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

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

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

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

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

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/

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

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/

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

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

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

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）やスマートフォン向け開発の知識これが意外と大変かも・・

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

Hiroshi Oyamada

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

A particular slide catching your eye?