More Related Content Similar to 日々の面倒をプログラミングで解決!【入門編】 (20) More from Hiroshi Oyamada (20) 日々の面倒をプログラミングで解決!【入門編】1. Photo by Bastien Vaucher
(http://www.flickr.com/photos/vaucher/5763894833/)
日々の面倒をプログラミングで解決!【入門編】
2. この講座の狙い
✤ 日々の面倒なこともちょっとしたアイ
デア+プログラミングで解決出来るこ
とを体験してもらい、そこからプログ
ラミングの面白さを体感してもらいた
いと思ってます
✤ 以下理由でプログラミング言語に
JavaScriptを採用しました
✤ 今回取り上げるGoogleスプレッド
シートで標準的に使える
✤ Webのシステムで利用されてるイ
メージがあるがそれ以外の場面でも
使えるため色々チャレンジしたくなっ
たら応用が効きやすい
http://www.flickr.com/photos/alanant/4483533096/
7. 実際に試してしましょう
Photo by Sebastien Wiertz via Flickr
https://www.flickr.com/photos/wiertz/4604140980/
8. Google スプレッドシートを起動する
まずはGoogleスプレッド
シートのサイトに行く
http://
www.google.com/intl/
ja_jp/sheets/about/
ここをクリック
以下のような画面が表示される
ので、右下の新規にシートを作
成するボタンをクリックします
ここをクリック画面右下の新規にシート作
成のボタンをクリック
15. Google Apps Scriptの画面にプログラムを
記述
こちら↓のサイトにアクセス
するとこの画面が表示される
Google Apps Scriptの画面
に貼り付ける
http://bit.ly/1tjzlt1
※ここに書かれてるプ
ログラムを一旦削除し
てコピペする
最終的にこんな感じ
になる
17. 実際に試してしましょう
Photo by Sebastien Wiertz via Flickr
https://www.flickr.com/photos/wiertz/4604140980/
18. Google スプレッドシートを起動する
まずはGoogleスプレッド
シートのサイトに行く
http://
www.google.com/intl/
ja_jp/sheets/about/
ここをクリック
以下のような画面が表示される
ので、右下の新規にシートを作
成するボタンをクリックします
ここをクリック画面右下の新規にシート作
成のボタンをクリック
20. Google Apps Scriptの画面にプログラムを
記述する前に準備
こちら↓のサイトにアクセス
http://bit.ly/120lh2g
Google Apps Scriptの画面
に貼り付ける
※ここに書かれてるプ
ログラムを一旦削除し
てコピペする
最終的にこんな感じ
になる
21. プログラムを記述しましょう
途中まで作成してあるプログ編集完了したら保存します
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheets()[0],
_row;
_row = ["小山田浩","11月1日","プログラミング講座"];
sheet.appendRow(_row);
}
ここをクリック
ラムを編集します
以下のようなポップアップが表示されて
プロジェクト名の入力を促されるので
ストリートアカデミー講座
と入力してください
22. 先ほどのプログラムを実行しましょう
ここをクリック
シートを切り替えて実行結果を
確認してみましょう
プロジェクト名の入力が完了し
たら以下手順で実行しましょう
GoogleAppsScriptで書いたプログラムか
らGoogleスプレッドシートにアクセスして
いいか確認するポップアップが表示される
のでcontinueを選択Acceptを選択
青色のアイコンのタブ
がGoogleAppsScript
の画面です
こちらのタブをクリッ
クするとGoogleスプレッ
ドシートの画面に戻り
ます
シートに値が挿入されてる
ことを確認してください
23. ご自宅での復習用に:プログラムの解説
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheets()[0],
_row;
_row = ["小山田浩","11月1日","プログラミング講座"];
sheet.appendRow(_row);
}
• このプログラムで利用する変数をまとめ
て宣言してます(変数の説明は後述)
• Googleスプレッドシートの現在アク
ティブになってるスプレッドシートの情
報をGoogleAppsScriptのプログラム
から取得できるように
SpreadsheetApp.getActiveSprea
dsheet()という機能を呼び出します
• 変数ssに格納しておくことでこれ以
降ssという名前でこの機能を呼び出
せます
• 現在選択されてるスプレッドシートの一
番先頭のシートを取得するため
ss.getSheets()[0]とします
シートに挿入したい値をここで設定してま
す。[](これはbracketといいます)の
中に"(ダブルクオーテーション)で括っ
た文字を記述します
• appendRow()という機能を呼び出してシートに値を挿入します
• appendRow()の機能を利用する時にカッコの中に挿入したい値を
入力します。
• 今回は画面幅の都合で挿入したい値を変数に代入してから
sheet.appendRow(_row)としましたが以下のように書いてもOK
です。
• sheet.appendRow(["小山田浩","11月1日","プログラミン
グ講座"]);
24. Google Apps Scriptの画面にプログラムを
記述する前に準備
こちら↓のサイトにアクセス
http://bit.ly/120n9rC
Google Apps Scriptの画面
に貼り付ける
※ここに書かれてるプ
ログラムを一旦削除し
てコピペする
最終的にこんな感じ
になる
25. プログラムを記述しましょう
途中まで作成してあるプログ編集完了したら保存します
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); !
} !
}
ここをクリック
ラムを編集します
27. ご自宅での復習用に:プログラムの解説
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); !
} !
}
このプログラムで利用する変数をまとめ
て宣言してます
シートに挿入したい値をここで設定してま
す。
挿入したい値を1つづつ取り出して繰り返
しシートに挿入する処理を行いたいので
JavaScriptのforループを使ってます
最初のループを開始する前に動作します
for (_i = 0, _len = items.length; _i < _len; _i++) {
// ここに書かれる内容が条件を満たしてる限り実行される!
}
繰り返し処理をする事に動作して、
出てきた値の真偽が評価されます。
1つの繰り返し処理が終わ
る事に実行されます
→ここでの処理は挿入したい値の数(items.lengthの箇
所)と初期値として設置して値(_i=0の箇所)を比較しな
がら繰り返し処理を行ってます
1からはじまるID番号となるものを準備しようとしてるのです
が変数_iをそのまま参照してしまうと、0,1,2という感じで0か
ら始まってしまうため、1を加算した変数_idに格納してます
30. Google Apps Scriptの画面にプログラムを
記述する前に準備1
こちら↓のサイトにアクセス
http://bit.ly/120pGSJ
Google Apps Scriptの画面
に貼り付ける
※ここに書かれてるプ
ログラムを一旦削除し
てコピペする
最終的にこんな感じ
になる
32. プログラムを記述しましょう
途中まで作成してあるプログラムを編集します
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;
for (_i = 0, _len = items.length; _i < _len; _i++) {
item = items[_i];
_row = [item.teacher_name.text,item.available_date.text,item.seminar_title.text];
sheet.appendRow(_row);
}
}
34. ご自宅での復習用に:プログラムの解説
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;
for (_i = 0, _len = items.length; _i < _len; _i++) {
item = items[_i];
_row = [item.teacher_name.text,
item.available_date.text,
item.seminar_title.text];
sheet.appendRow(_row);
}
}
講座一覧をGoogleAppsScriptから
利用しやすく変換してくれる
KimonoLabsというサイトにアクセス
• UrlFetchApp.fetch()の機能を利
用して上記URLにアクセスして情報取
得します
• 取得結果は
response.getContentText()を利
用することで値が得られます
• JSONというデータ構造で扱えるよう
にするため取得結果をJSON.parseと
いう関数を利用してデータ変換処理を
行います
• result.results.collection1で
講座一覧情報を得て変数itemsに格納
講座一覧情報から1件づつ講座情報を取
り出してシートに挿入
35. ご自宅での復習用に: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
38. 変数について補足解説
変数とは? プログラム中で変
数宣言された状態
変数宣言をいくつか
行った状態
• 計算結果を一時的に格納して、
必要な時に取り出せる場所
• よく「箱」が比喩として使わ
れるが一列に8個の箱が縦に
大量に積み上がってる状態を
頭のなかで描いたほうがより
適切になるかと思います。
• 変数が宣言された段階でこの
ようにメモリの一部が利用(確
保)されるイメージになりま
す。
• その後変数が宣言される度に、
メモリが利用(確保)されて
きます
• プログラムの書き方が上手で
ないと本人が意図せず別の値
でいつの間にか書き換わって
しまったりすることもあるの
で変数の取り扱いは注意が必
要です
40. 講座に入る前に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
41. プログラミングもモノづくりの1つ
調理方法や素
材のことを覚
える
+ 作り方(レシ
(任意)調理
ピ)を覚える+ を助けるモノ
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/
42. プログラミングもモノづくりの1つ
今回の講座のGoogle App Scriptの場合
// comment
var sampleCode = ‘Hello’;
alert(sampleCode);
!!
JavaScript
の文法を覚え
る
Google App
Script固有の
APIを理解
+
(任意)ライ
ブラリ利用法
学ぶ
+
Moment.js
Underscore.js
:
• 今回はforループと
JSON.parseが出てきます
• Googleスプレッドシートを利用
する機能や外部のWebサイトか
ら情報取得するAPIを今回使いま
す
• 今回は入門編という位置づけ
なのでこれは使いません
43. 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
: