Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」

307 views

Published on

2015年2月21日(土)に大津市のびわ湖ホールで行われた「International Open Data Day 2015 in Shiga / Biwako」の中級者向けプログラム「Beginner's Dev Camp」で使用したスライドです。

このプログラムでは、参加者各自が持参したPCを用いて、オープンデータを活用したアプリの開発ワークショップを行いました。

前半では1〜2時間程度、一緒に簡単なプログラムを行い、ローカル環境で動作するウェブページ(ウェブアプリ)を作成。その後、各自がカスタマイズできる例題を示し、独自のアプリを開発しあいました。

Published in: Government & Nonprofit
  • Be the first to comment

  • Be the first to like this

IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」

  1. 1. 1 International Open Data Day Code for Shiga / Biwako 2015.2.21
  2. 2. 2 今日つくるもの ウェブアプリ ≒ ホームページ HTML javascript + × • HTMLとjavascriptでつくって公開 • 開発が比較的容易(ネットワーク関係がとても得意!) • iPhone,Android,Windows Phoneに対応できる • デバイスにインストールしなくても使える
  3. 3. 3 <html>  <head>   <title>僕のホームページ</title>  </head>  <body>   <h1>こんにちは!</h1>  </body> </html> 全体のはじまり 文書情報のはじまり ! 文書情報の終わり 本文のはじまり ! 本文の終わり 全体の終わり HTMLとは
  4. 4. 4 javascriptとは HTMLは『表示』を担当
 どこに何をどのように? javascriptは『機能』を担当 どのタイミングでどうする? ホームページ・ウェブアプリ
  5. 5. 5 1. テキストエディタで新規ファイル作成(New File) 2. 配布したHTMLをコピー&ペースト 3. ファイル名『test.html』でmyAppフォルダに保存 4. ダブルクリックしてブラウザで表示 5. 『クリック』をクリックしてみる ページをつくってみよう
  6. 6. 6 オープンデータを見てみよう 1. test.htmlのリンクより
 「ラ・フォル・ジュルネ びわ湖 2015」に関するオープン データについてのページ → データの取得方法 → 公演情報 → 一覧のURL 2. Testing Toolのページの左側に、
 ダウンロードしたデータを貼り付ける
  7. 7. 7 サーバ HTML・javascript
 を使って表示 オープンデータの仕組み JSONデータ で結果を取得   リクエスト送信
  8. 8. 8 今日のテーマ 「ラ・フォル・ジュルネ びわ湖 2015」 「もりやまほたるパーク&ウォーク」
  9. 9. 9 「ラ・フォル・ジュルネ びわ湖 2015」 プログラムを一覧表示してみよう ❶
  10. 10. 10 1. 新たにlfj.htmlを作成 2. source.txtからコピーペーストして保存 3. ダブルクリックしてブラウザで見てみる データを読み込んで表示する
  11. 11. 11 カスタマイズしてみましょう ★ 区切り線を加えよう ★ 表示項目を増やしてみよう ★ ランダムに1つを表示しよう
  12. 12. 12 「もりやまほたるパーク&ウォーク」 ほたる飛翔地を地図上に表示してみよう ❷
  13. 13. 13 1. 新たにhotaru.htmlを作成 2. source.txtからコピーペーストして保存 3. ダブルクリックしてブラウザで見てみる 地図を表示してみよう
  14. 14. 14 Google Mapsとは? ‣ HTMLとjavascriptで実現されている ‣ 地図をタイル状に分割しておき、
 必要なものをサーバから取って来て並べて表示する ‣ ドラッグされたらどんどん取って来る ‣ ズームされたら取りあえず拡大縮小して表示しておき、
 新たな縮尺用の画像を取りに行く
  15. 15. 15 Google Maps APIとは? ‣ Google Mapの仕組み(javascript)とタイル画像を、
 他のページでも使えるようにしてくれているもの ‣ 基本的に無償で使える ‣ 地図表示が簡単に実現出来る ‣ オープンデータから取得した情報をその上に表示できる ‣ 他に…OpenStreetMap, OpenLayers, Leaflet.jsなど
  16. 16. 16 ズームしてみよう 色をカスタマイズしよう マーカーを表示しよう フキダシを表示しよう ダウンロードしたデータを表示しよう
  17. 17. 17 カスタマイズしてみましょう ★マーカーとして画像を表示してみよう ★iPhoneでフルスクリーン表示
 できるようにしてみよう

×