日々の面倒をプログラミングで解决！【入门编】
?
23 likes?7,196 views
ストリートアカデミーの講座資料 http://www.street-academy.com/myclass/2935
![プログラムを記述しましょう
途中まで作成してあるプログ編集完了したら保存します
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheets()[0],
_row;
_row = ["小山田浩","11月1日","プログラミング講座"];
sheet.appendRow(_row);
}
ここをクリック
ラムを編集します
以下のようなポップアップが表示されて
プロジェクト名の入力を促されるので
ストリートアカデミー講座
と入力してください](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-21-320.jpg)
![ご自宅での復習用に：プログラムの解説
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日","プログラミン
グ講座"]);](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-23-320.jpg)
![プログラムを記述しましょう
途中まで作成してあるプログ編集完了したら保存します
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); !
} !
}
ここをクリック
ラムを編集します](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-25-320.jpg)
![ご自宅での復習用に：プログラムの解説
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); !
} !
}
このプログラムで利用する変数をまとめ
て宣言してます
シートに挿入したい値をここで設定してま
す。
挿入したい値を１つづつ取り出して繰り返
しシートに挿入する処理を行いたいので
JavaScriptのforループを使ってます
最初のループを開始する前に動作します
for (_i = 0, _len = items.length; _i < _len; _i++) {
// ここに書かれる内容が条件を満たしてる限り実行される!
}
繰り返し処理をする事に動作して、
出てきた値の真偽が評価されます。
１つの繰り返し処理が終わ
る事に実行されます
→ここでの処理は挿入したい値の数（items.lengthの箇
所）と初期値として設置して値（_i=0の箇所）を比較しな
がら繰り返し処理を行ってます
１からはじまるID番号となるものを準備しようとしてるのです
が変数_iをそのまま参照してしまうと、0,1,2という感じで0か
ら始まってしまうため、１を加算した変数_idに格納してます](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-27-320.jpg)
![プログラムを記述しましょう
途中まで作成してあるプログラムを編集します
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);
}
}](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-32-320.jpg)
![ご自宅での復習用に：プログラムの解説
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件づつ講座情報を取
り出してシートに挿入](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-34-320.jpg)
![ご自宅での復習用に：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](https://image.slidesharecdn.com/2014-11-07-programming-with-gas-141107012000-conversion-gate02/85/-35-320.jpg)
日々の面倒をプログラミングで解决！【入门编】
- 1. Photo by Bastien Vaucher (http://www.flickr.com/photos/vaucher/5763894833/) 日々の面倒をプログラミングで解决！【入门编】
- 2. この講座の狙い ? 日々の面倒なこともちょっとしたアイ デア＋プログラミングで解決出来るこ とを体験してもらい、そこからプログ ラミングの面白さを体感してもらいた いと思ってます ? 以下理由でプログラミング言語に JavaScriptを採用しました ? 今回取り上げるGoogleスプレッド シートで標準的に使える ? Webのシステムで利用されてるイ メージがあるがそれ以外の場面でも 使えるため色々チャレンジしたくなっ たら応用が効きやすい http://www.flickr.com/photos/alanant/4483533096/
- 5. Excelの一般的な関数や逆にExcelに無い関数 もあったりします 一般的な関数Excel標準に無い関数 チーム平均打率： =AVERAGE(B2:B33) チーム本塁打数 =SUM(D2:D33) Google社の株価を見る場合 =GoogleFinance("GOOG","Price") この阪神の打撃成績データを取得 =ImportHtml("http://baseballdata.jp/5/ ctop.html", "table",1 )
- 6. Excelに無いインターネット対応機能の便利 さを実感してみましょう 一般的な関数Excel標準に無い関数 チーム平均打率： =AVERAGE(B2:B33) チーム本塁打数 =SUM(D2:D33) Google社の株価を見る場合 =GoogleFinance("GOOG","Price") この阪神の打撃成績データを取得 =ImportHtml("http://baseballdata.jp/5/ ctop.html", "table",1 )
- 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/ ここをクリック 以下のような画面が表示される ので、右下の新規にシートを作 成するボタンをクリックします ここをクリック画面右下の新規にシート作 成のボタンをクリック
- 9. まずはネット上にある株価情報を取得する A1のセルに以下を入力しますしばらくすると株価が表示さ =GoogleFinance("GOOG","Price") れます これはティッカーシンボルといって株式市場で上場企業や商品を識別するた め付けられてるもの。ニューヨーク証券取引所やNASDAQといったアメリ カの証券取引所で用いられているものなのです。 ティッカー?シンボルをいくつか調べてあるのでGOOG以外の値もいれてみ ましょう ? Ford Motorの場合 → “F” ? GEの場合 → “GE” ? 3Mの場合 → “MMM: ? Microsoftの場合 → “MSFT”
- 10. ブログの更新情報を読み込む A1のセルに以下を入力します =IMPORTFEED("http://scopp-cafe.com/feed.rss",B1,false,10) ここにブログのRSSを入力します。 しばらくするとブログの更新情報が表示されます
- 11. ここまでまとめ GoogleスプレッドシートはクラウドのExcel Excelの標準的な関数もある インターネットのサービスなのでネット上か ら情報抽出する関数がありこれだけでもかな り便利な機能なので仕事で活用できるかも？ ?jeffrey james pacres http://www.flickr.com/photos/jjpacres/3293117576/
- 13. GoogleスプレッドシートはExcelマクロやVBA のように機能拡張可能！ 今回の講座のメイントピックのGoogle Apps Script →GoogleのサービスをJavaScriptによるスクリプトで操作するためのスクリプ ト環境
- 14. demo Gmail宛に送信されてくる楽天カードの取引情 報を取り込んでスプレッドシートに挿入する ※プログラムのコードは以下に準備してあります Photo by Peter Voerman via Flickr (CC BY-NC 2.0) https://www.flickr.com/photos/oudeschool/5818953542/ ! http://bit.ly/1tjzlt1
- 15. Google Apps Scriptの画面にプログラムを 記述 こちら↓のサイトにアクセス するとこの画面が表示される Google Apps Scriptの画面 に貼り付ける http://bit.ly/1tjzlt1 ※ここに書かれてるプ ログラムを一旦削除し てコピペする 最終的にこんな感じ になる
- 16. 記述が終わったら実行する 実行ボタンをクリック 実行中はこんなラベル 表示される Gmailのデータにアク セスしていいか確認画 面出るのでAcceptする こんな感じに表示さ れる
- 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/ ここをクリック 以下のような画面が表示される ので、右下の新規にシートを作 成するボタンをクリックします ここをクリック画面右下の新規にシート作 成のボタンをクリック
- 19. Google Apps Scriptの起動手順 以下画面を参考にしてスクリ プトエディターを選択します ここをクリック ここをクリック 以下のような画面が表示されれ ばOKです
- 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); ! } ! } ここをクリック ラムを編集します
- 26. プログラムを実行しましょう ここをクリック シートを切り替えて実行結果を 以下手順で実行しましょう確認してみましょう シートに値が挿入されてる ことを確認してください myFunctionとなってるの でshowDataを選択します 実行ボタンをクリックしま す
- 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); ! } ! } このプログラムで利用する変数をまとめ て宣言してます シートに挿入したい値をここで設定してま す。 挿入したい値を１つづつ取り出して繰り返 しシートに挿入する処理を行いたいので JavaScriptのforループを使ってます 最初のループを開始する前に動作します for (_i = 0, _len = items.length; _i < _len; _i++) { // ここに書かれる内容が条件を満たしてる限り実行される! } 繰り返し処理をする事に動作して、 出てきた値の真偽が評価されます。 １つの繰り返し処理が終わ る事に実行されます →ここでの処理は挿入したい値の数（items.lengthの箇 所）と初期値として設置して値（_i=0の箇所）を比較しな がら繰り返し処理を行ってます １からはじまるID番号となるものを準備しようとしてるのです が変数_iをそのまま参照してしまうと、0,1,2という感じで0か ら始まってしまうため、１を加算した変数_idに格納してます
- 28. ここまでまとめ GoogleスプレッドシートはExcelマクロやVBA のような拡張が出来る 拡張の仕組みをGoogleAppsScriptという 開発時にはJavaScriptという言語を使って 記述していきます。 ※ちなみにJavaScriptとJavaは全く別のも のです ?jeffrey james pacres http://www.flickr.com/photos/jjpacres/3293117576/
- 30. Google Apps Scriptの画面にプログラムを 記述する前に準備１ こちら↓のサイトにアクセス http://bit.ly/120pGSJ Google Apps Scriptの画面 に貼り付ける ※ここに書かれてるプ ログラムを一旦削除し てコピペする 最終的にこんな感じ になる
- 31. Google Apps Scriptの画面にプログラムを 記述する前に準備２ Googleスプレッドシートに表示されてるデータを この部分のデータを削除し てください このように何もデータが表 示されていなければOKです 全て削除しておいてください
- 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); } }
- 33. プログラムを実行しましょう シートを切り替えて実行結果を 確認してみましょう シートに値が挿入されてる 実行ボタンをクリックしまことを確認してください す
- 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
- 37. これ以降は補足資料 ?jeffrey james pacres http://www.flickr.com/photos/jjpacres/3293117576/ 変数について JavaScriptについて !
- 38. 変数について補足解説 変数とは？ プログラム中で変 数宣言された状態 変数宣言をいくつか 行った状態 ? 計算結果を一時的に格納して、 必要な時に取り出せる場所 ? よく「箱」が比喩として使わ れるが一列に８個の箱が縦に 大量に積み上がってる状態を 頭のなかで描いたほうがより 適切になるかと思います。 ? 変数が宣言された段階でこの ようにメモリの一部が利用（確 保）されるイメージになりま す。 ? その後変数が宣言される度に、 メモリが利用（確保）されて きます ? プログラムの書き方が上手で ないと本人が意図せず別の値 でいつの間にか書き換わって しまったりすることもあるの で変数の取り扱いは注意が必 要です
- 39. 講座に入る前に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
- 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. プログラミングもモノづくりの１つ 調理方法や素 材のことを覚 える + 作り方（レシ （任意）調理 ピ）を覚える+ を助けるモノ 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. プログラミングもモノづくりの１つ 今回の講座の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 :
- 44. JavaScriptを覚えれば何でも作れるようになる？ 参考：JavaScriptで書けるスマートフォンアプリ（Titanium Mobile）の場合 JavaScriptの文 法を覚える // comment var sampleCode = ‘Hello’; alert(sampleCode) ; !! 作りたいアプリに + 関するAPIを理解+（任意）ライブラ リ利用法学ぶ Moment.js Underscore.js : + iOS（もしくは Android OS） やスマートフォン 向け開発の知識 これが意外と 大変かも??