日々の面倒をプログラミングで解決！【入門編】

Photo by Bastien Vaucher
(http://www.flickr.com/photos/vaucher/5763894833/)
日々の面倒をプログラミングで解決！【入門編】

この講座の狙い
✤ 日々の面倒なこともちょっとしたアイ
デア＋プログラミングで解決出来るこ
とを体験してもらい、そこからプログ
ラミングの面白さを体感してもらいた
いと思ってます
✤ 以下理由でプログラミング言語に
JavaScriptを採用しました
✤ 今回取り上げるGoogleスプレッド
シートで標準的に使える
✤ Webのシステムで利用されてるイ
メージがあるがそれ以外の場面でも
使えるため色々チャレンジしたくなっ
たら応用が効きやすい
http://www.flickr.com/photos/alanant/4483533096/

Google スプレッドシートの概要

基本的にはクラウド上のExcel

Excelの一般的な関数や逆にExcelに無い関数
もあったりします
一般的な関数Excel標準に無い関数
チーム平均打率：
=AVERAGE(B2:B33)
チーム本塁打数
=SUM(D2:D33)
Google社の株価を見る場合
=GoogleFinance("GOOG","Price")
この阪神の打撃成績データを取得
=ImportHtml("http://baseballdata.jp/5/
ctop.html", "table",1 )

Excelに無いインターネット対応機能の便利
さを実感してみましょう
一般的な関数Excel標準に無い関数
チーム平均打率：
=AVERAGE(B2:B33)
チーム本塁打数
=SUM(D2:D33)
Google社の株価を見る場合
この阪神の打撃成績データを取得
=ImportHtml("http://baseballdata.jp/5/
ctop.html", "table",1 )

実際に試してしましょう
Photo by Sebastien Wiertz via Flickr
https://www.flickr.com/photos/wiertz/4604140980/

Google スプレッドシートを起動する
まずはGoogleスプレッド
シートのサイトに行く
http://
www.google.com/intl/
ja_jp/sheets/about/
ここをクリック
以下のような画面が表示される
ので、右下の新規にシートを作
成するボタンをクリックします
ここをクリック画面右下の新規にシート作
成のボタンをクリック

まずはネット上にある株価情報を取得する
A1のセルに以下を入力しますしばらくすると株価が表示さ
れます
これはティッカーシンボルといって株式市場で上場企業や商品を識別するた
め付けられてるもの。ニューヨーク証券取引所やNASDAQといったアメリ
カの証券取引所で用いられているものなのです。
ティッカー・シンボルをいくつか調べてあるのでGOOG以外の値もいれてみ
ましょう
• Ford Motorの場合 → “F”
• GEの場合 → “GE”
• 3Mの場合 → “MMM:
• Microsoftの場合 → “MSFT”

ブログの更新情報を読み込む
A1のセルに以下を入力します
=IMPORTFEED("http://scopp-cafe.com/feed.rss",B1,false,10)
ここにブログのRSSを入力します。
しばらくするとブログの更新情報が表示されます

ここまでまとめ
GoogleスプレッドシートはクラウドのExcel
Excelの標準的な関数もある
インターネットのサービスなのでネット上か
ら情報抽出する関数がありこれだけでもかな
り便利な機能なので仕事で活用できるかも？
©jeffrey james pacres
http://www.flickr.com/photos/jjpacres/3293117576/

GoogleAppsScriptでプログラミング
http://www.flickr.com/photos/johny/2627262185/

GoogleスプレッドシートはExcelマクロやVBA
のように機能拡張可能！
今回の講座のメイントピックのGoogle Apps Script
→GoogleのサービスをJavaScriptによるスクリプトで操作するためのスクリプ
ト環境

demo
Gmail宛に送信されてくる楽天カードの取引情
報を取り込んでスプレッドシートに挿入する
※プログラムのコードは以下に準備してあります
Photo by Peter Voerman via Flickr (CC BY-NC 2.0)
https://www.flickr.com/photos/oudeschool/5818953542/
!
http://bit.ly/1tjzlt1

Google Apps Scriptの画面にプログラムを
記述
こちら↓のサイトにアクセス
するとこの画面が表示される
Google Apps Scriptの画面
に貼り付ける
http://bit.ly/1tjzlt1
※ここに書かれてるプ
ログラムを一旦削除し
てコピペする
最終的にこんな感じ
になる

記述が終わったら実行する
実行ボタンをクリック
実行中はこんなラベル
表示される
Gmailのデータにアク
セスしていいか確認画
面出るのでAcceptする
こんな感じに表示さ
れる

Google Apps Scriptの起動手順
以下画面を参考にしてスクリ
プトエディターを選択します
以下のような画面が表示されれ
ばOKです

記述する前に準備
http://bit.ly/120lh2g
に貼り付ける
てコピペする
になる

プログラムを記述しましょう
途中まで作成してあるプログ編集完了したら保存します
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheets()[0],
_row;
_row = ["小山田浩","11月1日","プログラミング講座"];
sheet.appendRow(_row);
}
ラムを編集します
以下のようなポップアップが表示されて
プロジェクト名の入力を促されるので
ストリートアカデミー講座
と入力してください

先ほどのプログラムを実行しましょう
シートを切り替えて実行結果を
確認してみましょう
プロジェクト名の入力が完了し
たら以下手順で実行しましょう
GoogleAppsScriptで書いたプログラムか
らGoogleスプレッドシートにアクセスして
いいか確認するポップアップが表示される
のでcontinueを選択Acceptを選択
青色のアイコンのタブ
がGoogleAppsScript
の画面です
こちらのタブをクリッ
クするとGoogleスプレッ
ドシートの画面に戻り
ます
シートに値が挿入されてる
ことを確認してください

ご自宅での復習用に：プログラムの解説
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheets()[0],
_row;
_row = ["小山田浩","11月1日","プログラミング講座"];
}
• このプログラムで利用する変数をまとめ
て宣言してます（変数の説明は後述）
• Googleスプレッドシートの現在アク
ティブになってるスプレッドシートの情
報をGoogleAppsScriptのプログラム
から取得できるように
SpreadsheetApp.getActiveSprea
dsheet()という機能を呼び出します
• 変数ssに格納しておくことでこれ以
降ssという名前でこの機能を呼び出
せます
• 現在選択されてるスプレッドシートの一
番先頭のシートを取得するため
ss.getSheets()[0]とします
シートに挿入したい値をここで設定してま
す。[]（これはbracketといいます）の
中に"（ダブルクオーテーション）で括っ
た文字を記述します
• appendRow()という機能を呼び出してシートに値を挿入します
• appendRow()の機能を利用する時にカッコの中に挿入したい値を
入力します。
• 今回は画面幅の都合で挿入したい値を変数に代入してから
sheet.appendRow(_row)としましたが以下のように書いてもOK
です。
• sheet.appendRow(["小山田浩","11月1日","プログラミン
グ講座"]);

記述する前に準備
http://bit.ly/120n9rC
に貼り付ける
てコピペする
になる

途中まで作成してあるプログ編集完了したら保存します
function showData() {!
var ss = SpreadsheetApp.getActiveSpreadsheet(),!
sheet = ss.getSheets()[0];items,_i,_len,_row, _id;!
!
items = ["プログラミング講座","マーケティング講座","Webデザイン講座"];!
for (_i = 0, _len = items.length; _i < _len; _i++) {!
_id = _i + 1;!
_row = ["ID番号：" + _id, items[_i]];!
sheet.appendRow(_row); !
} !
}
ラムを編集します

プログラムを実行しましょう
以下手順で実行しましょう確認してみましょう
ことを確認してください
myFunctionとなってるの
でshowDataを選択します
実行ボタンをクリックしま
す

ここまでまとめ
GoogleスプレッドシートはExcelマクロやVBA
のような拡張が出来る
拡張の仕組みをGoogleAppsScriptという
開発時にはJavaScriptという言語を使って
記述していきます。
※ちなみにJavaScriptとJavaは全く別のも
のです

ストリートアカデミーの講座を自動抽出
http://www.flickr.com/photos/johny/2627262185/

記述する前に準備１
http://bit.ly/120pGSJ
に貼り付ける
てコピペする
になる

記述する前に準備２
Googleスプレッドシートに表示されてるデータを
この部分のデータを削除し
てください
このように何もデータが表
示されていなければOKです
全て削除しておいてください

途中まで作成してあるプログラムを編集します
function streetAcademy() {
var url = "https://www.kimonolabs.com/api/32wfnu1e?apikey=BDQRHGE1SDkvrgWw4LYCcyosv4bB7wth",
response,
result,
items,
item,
result,
_i,
_len,
_row;
response = UrlFetchApp.fetch(url);
result =JSON.parse(response.getContentText());
items = result.results.collection1;
item = items[_i];
_row = [item.teacher_name.text,item.available_date.text,item.seminar_title.text];
}
}

プログラムを実行しましょう
確認してみましょう
実行ボタンをクリックしまことを確認してください
す

function streetAcademy() {
var url = "https://www.kimonolabs.com/api/32wfnu1e?
apikey=BDQRHGE1SDkvrgWw4LYCcyosv4bB7wth",
response,
result,
items,
item,
result,
_i,
_len,
_row;
response = UrlFetchApp.fetch(url);
result =JSON.parse(response.getContentText());
items = result.results.collection1;
item = items[_i];
_row = [item.teacher_name.text,
item.available_date.text,
item.seminar_title.text];
}
}
講座一覧をGoogleAppsScriptから
利用しやすく変換してくれる
KimonoLabsというサイトにアクセス
• UrlFetchApp.fetch()の機能を利
用して上記URLにアクセスして情報取
得します
• 取得結果は
response.getContentText()を利
用することで値が得られます
• JSONというデータ構造で扱えるよう
にするため取得結果をJSON.parseと
いう関数を利用してデータ変換処理を
行います
• result.results.collection1で
講座一覧情報を得て変数itemsに格納
講座一覧情報から1件づつ講座情報を取
り出してシートに挿入

ご自宅での復習用に：JSONへの変換イメー
ジ
{"name":"staca","count":
248,"frequency":"Everyhour","version":
75,"newdata":false,"lastrunstatus":"success","thisversionrun
":"TueNov11201404:02:18GMT
+0000(UTC)","lastsuccess":"TueNov11201404:10:21GMT
+0000(UTC)","nextrun":"TueNov11201405:10:21GMT
+0000(UTC)","results":{"collection1":[{"available_date":
{"text":"11月11日(火)8:00PM","href":"http://www.street-academy.
com/myclass/1190?
sessiondetailid=6621"},"seminar_title":{"text":"エクセルで学ぶ
ビジネス・シミュレーション・セミナー①超入門（東京）","href":"http://
www.street-academy.com/myclass/1190"},"picture":
{"text":"","src":"https://stacademy-images.s3.amazonaws.com/
uploads/class_detail/class_image/1190/5f2c3f28-
a440-4d8b-8d35-e04c08b25c0d.jpg","href":"http://www.street-academy.
com/myclass/1190","alt":"5f2c3f28-a440-4d8b-8d35-
e04c08b25c0d"},"teacher_name":{"text":"熊野
整","href":"http://www.street-academy.com/steachers/7844"}},
{"available_date":{"text":"11月21日
(金)7:00PM","href":"http://www.street-academy.com/myclass/
2232?sessiondetailid=5995"}]}
JSON.parse()使ってJSON化した時のイメージ
var result = {
"name": "staca",
"count": 248,
"frequency": "Every hour",
"version": 75,
"newdata": false,
"lastrunstatus": "success",
"thisversionrun": "Tue Nov 11 2014 04:02:18 GMT+0000
(UTC)",
"lastsuccess": "Tue Nov 11 2014 04:10:21 GMT+0000 (UTC)",
"nextrun": "Tue Nov 11 2014 05:10:21 GMT+0000 (UTC)",
"results": {
"collection1": [
{
"available_date": {
"text": "11月11日 (火) 8:00PM",
"href": "http://www.street-academy.com/myclass/
1190?sessiondetailid=6621"
},
"seminar_title": {
"text": "エクセルで学ぶビジネス・シミュレーション・セミナー
①超入門（東京）",
"href": "http://www.street-academy.com/myclass/
1190"
}
}
→ツリー構造でデータが格納される
UrlFetchApp.fetch()
の機能で得た値はこのよう
な状態だとイメージしてく
ださい
例：プログラムの中で
result.countと記述する
と、countに紐づく値（この
場合だと248）が取得できる
result
name
count
frequency
“staca"
248
“Every
hour”
collection1
results

講座は以上です。珈琲飲みつつ質問タイム
http://www.flickr.com/photos/windsordi/3273502072/

これ以降は補足資料
変数について
JavaScriptについて
!

変数について補足解説
変数とは？プログラム中で変
数宣言された状態
変数宣言をいくつか
行った状態
• 計算結果を一時的に格納して、
必要な時に取り出せる場所
• よく「箱」が比喩として使わ
れるが一列に８個の箱が縦に
大量に積み上がってる状態を
頭のなかで描いたほうがより
適切になるかと思います。
• 変数が宣言された段階でこの
ようにメモリの一部が利用（確
保）されるイメージになりま
す。
• その後変数が宣言される度に、
メモリが利用（確保）されて
きます
• プログラムの書き方が上手で
ないと本人が意図せず別の値
でいつの間にか書き換わって
しまったりすることもあるの
で変数の取り扱いは注意が必
要です

講座に入る前にJavaScriptについて一度整理
一般的なイメージとしてはWebブラウザで実行されるもの
ブラウザJavaScriptエンジン
Internet Explorer JScript（*1）
Google Chrome V8
Firefox JaegerMonkey
Sarafi Nitro（*2）
Opera Carakan
*1:IE9ではChakraというものが採用されているようです
http://blogs.msdn.com/b/ie_jp/archive/2011/06/21/chakra.aspx
*2:http://www.apple.com/safari/features.html

講座に入る前にJavaScriptについて一度整理
実はWebブラウザ以外でも使えます
名称説明
WSH
ファイル/フォルダの操作、MS Office等の自動実行、OSの設定情報の取
得、操作などが行える。 Windows98/2000/XP/7 （*1）やWindowsサ
ーバで利用できる Windowsのシステム管理者には必須
Rhino Javaで書かれたソフトウェア。JavaがインストールされていればOSに依
存せず上記のWSHと同様な処理やそれ以上のことも実現可能
Node.js Webアプリケーションのサーバサイドの実行環境
MongoDB Oracle/SQL Server/MySQLといったDBと少し性質が異なるデータベー
スソフト
*1: Windows XP以降は使ったことがないので実際どこまで利用できるか不明・・
*2: https://developer.mozilla.org/ja/Rhino_Shell

プログラミングもモノづくりの１つ
調理方法や素
材のことを覚
える
+ 作り方（レシ
（任意）調理
ピ）を覚える+ を助けるモノ
Photo by Rebeca Anchondo via Flickr (CC BY-NC 2.0)
https://www.flickr.com/photos/rebecaanchondo/
13233537673/
Photo by Joana Petrova via Flickr (CC BY-NC-SA 2.0)
https://www.flickr.com/photos/jhard/4479868636/
Photo by Toshiyuki IMAI via Flickr (CC BY-SA 2.0)
https://www.flickr.com/photos/matsuyuki/2336268411/

プログラミングもモノづくりの１つ
今回の講座のGoogle App Scriptの場合
// comment
var sampleCode = ‘Hello’;
alert(sampleCode);
!!
JavaScript
の文法を覚え
る
Google App
Script固有の
APIを理解
+
（任意）ライ
ブラリ利用法
学ぶ
+
Moment.js
Underscore.js
:
• 今回はforループと
JSON.parseが出てきます
• Googleスプレッドシートを利用
する機能や外部のWebサイトか
ら情報取得するAPIを今回使いま
す
• 今回は入門編という位置づけ
なのでこれは使いません

JavaScriptを覚えれば何でも作れるようになる？
Webのシステムの場合
// comment
var sampleCode = ‘Hello’;
alert(sampleCode);
!!
JavaScript
の文法を覚え
る
作りたいアプ
リに関するAPI
を理解
+
（任意）ライ
ブラリ利用法
学ぶ
+
XMLHttpRequest(サーバとの
HTTP通信を行うためのAPI)
!
DOM(W3Cから勧告されている
HTML文書やXML文書をアプリケー
ションから利用するためのAPI)
*1:詳しくはこちら（http://documentcloud.github.com/backbone/）
*2:JavaScriptでゲーム開発するのに便利なライブラリ。詳しくはこちら（http://enchantjs.com/ja/?s=ja）
jQuery
Moment.js
Underscore.js
:

JavaScriptを覚えれば何でも作れるようになる？
参考：JavaScriptで書けるスマートフォンアプリ（Titanium
Mobile）の場合
JavaScriptの文
法を覚える
// comment
var sampleCode =
‘Hello’;
alert(sampleCode)
;
!!
作りたいアプリに
+ 関するAPIを理解+（任意）ライブラ
リ利用法学ぶ
Moment.js
Underscore.js
:
+
iOS（もしくは
Android OS）
やスマートフォン
向け開発の知識
これが意外と
大変かも・・

日々の面倒をプログラミングで解決！【入門編】

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to 日々の面倒をプログラミングで解決！【入門編】

Similar to 日々の面倒をプログラミングで解決！【入門編】 (20)

More from Hiroshi Oyamada

More from Hiroshi Oyamada (20)

Recently uploaded

Recently uploaded (9)

日々の面倒をプログラミングで解決！【入門編】