IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
•
0 likes•346 views
2015年2月21日（土）に大津市のびわ湖ホールで行われた「International Open Data Day 2015 in Shiga / Biwako」の中級者向けプログラム「Beginner's Dev Camp」で使用したスライドです。 このプログラムでは、参加者各自が持参したPCを用いて、オープンデータを活用したアプリの開発ワークショップを行いました。 前半では1〜2時間程度、一緒に簡単なプログラムを行い、ローカル環境で動作するウェブページ（ウェブアプリ）を作成。その後、各自がカスタマイズできる例題を示し、独自のアプリを開発しあいました。
Recommended
More Related Content
Similar to IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
Similar to IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」 (20)
IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
- 1. 1 International Open Data Day Code for Shiga / Biwako 2015.2.21
- 2. 2 今日つくるもの ウェブアプリ ≒ ホームページ HTML javascript + × • HTMLとjavascriptでつくって公開 • 開発が比較的容易（ネットワーク関係がとても得意！） • iPhone，Android，Windows Phoneに対応できる • デバイスにインストールしなくても使える
- 5. 5 1. テキストエディタで新規ファイル作成（New File） 2. 配布したHTMLをコピー＆ペースト 3. ファイル名『test.html』でmyAppフォルダに保存 4. ダブルクリックしてブラウザで表示 5. 『クリック』をクリックしてみる ページをつくってみよう
- 6. 6 オープンデータを見てみよう 1. test.htmlのリンクより 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープン データについてのページ → データの取得方法 → 公演情報 → 一覧のURL 2. Testing Toolのページの左側に、 ダウンロードしたデータを貼り付ける
- 10. 10 1. 新たにlfj.htmlを作成 2. source.txtからコピーペーストして保存 3. ダブルクリックしてブラウザで見てみる データを読み込んで表示する
- 11. 11 カスタマイズしてみましょう ★ 区切り線を加えよう ★ 表示項目を増やしてみよう ★ ランダムに１つを表示しよう
- 13. 13 1. 新たにhotaru.htmlを作成 2. source.txtからコピーペーストして保存 3. ダブルクリックしてブラウザで見てみる 地図を表示してみよう
- 14. 14 Google Mapsとは？ ‣ HTMLとjavascriptで実現されている ‣ 地図をタイル状に分割しておき、 必要なものをサーバから取って来て並べて表示する ‣ ドラッグされたらどんどん取って来る ‣ ズームされたら取りあえず拡大縮小して表示しておき、 新たな縮尺用の画像を取りに行く
- 15. 15 Google Maps APIとは？ ‣ Google Mapの仕組み（javascript）とタイル画像を、 他のページでも使えるようにしてくれているもの ‣ 基本的に無償で使える ‣ 地図表示が簡単に実現出来る ‣ オープンデータから取得した情報をその上に表示できる ‣ 他に…OpenStreetMap, OpenLayers, Leaflet.jsなど