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

17
1 International Open Data Day Code for Shiga / Biwako 2015.2.21

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

1

International Open Data DayCode for Shiga / Biwako

2015.2.21

2

今日つくるもの

ウェブアプリ ≒ ホームページ

HTML

javascript+ ו HTMLとjavascriptでつくって公開 • 開発が比較的容易(ネットワーク関係がとても得意!) • iPhone,Android,Windows Phoneに対応できる • デバイスにインストールしなくても使える

3

<html>

 <head>

  <title>僕のホームページ</title>

 </head>

 <body>

  <h1>こんにちは!</h1>

 </body>

</html>

全体のはじまり

文書情報のはじまり

!

文書情報の終わり

本文のはじまり

!

本文の終わり

全体の終わり

HTMLとは

4

javascriptとは

HTMLは『表示』を担当どこに何をどのように?

javascriptは『機能』を担当 どのタイミングでどうする?

ホームページ・ウェブアプリ

5

1. テキストエディタで新規ファイル作成(New File)

2. 配布したHTMLをコピー&ペースト

3. ファイル名『test.html』でmyAppフォルダに保存

4. ダブルクリックしてブラウザで表示

5. 『クリック』をクリックしてみる

ページをつくってみよう

6

オープンデータを見てみよう

1. test.htmlのリンクより「ラ・フォル・ジュルネ びわ湖 2015」に関するオープンデータについてのページ → データの取得方法 → 公演情報 → 一覧のURL

2. Testing Toolのページの左側に、ダウンロードしたデータを貼り付ける

7

サーバ

HTML・javascriptを使って表示

オープンデータの仕組み

JSONデータ で結果を取得  リクエスト送信

8

今日のテーマ

「ラ・フォル・ジュルネ びわ湖 2015」

「もりやまほたるパーク&ウォーク」

9

「ラ・フォル・ジュルネ びわ湖 2015」 プログラムを一覧表示してみよう

10

1. 新たにlfj.htmlを作成

2. source.txtからコピーペーストして保存

3. ダブルクリックしてブラウザで見てみる

データを読み込んで表示する

11

カスタマイズしてみましょう

★ 区切り線を加えよう ★ 表示項目を増やしてみよう ★ ランダムに1つを表示しよう

12

「もりやまほたるパーク&ウォーク」 ほたる飛翔地を地図上に表示してみよう

13

1. 新たにhotaru.htmlを作成

2. source.txtからコピーペーストして保存

3. ダブルクリックしてブラウザで見てみる

地図を表示してみよう

14

Google Mapsとは?

‣ HTMLとjavascriptで実現されている

‣ 地図をタイル状に分割しておき、 必要なものをサーバから取って来て並べて表示する

‣ ドラッグされたらどんどん取って来る

‣ ズームされたら取りあえず拡大縮小して表示しておき、新たな縮尺用の画像を取りに行く

15

Google Maps APIとは?

‣ Google Mapの仕組み(javascript)とタイル画像を、 他のページでも使えるようにしてくれているもの

‣ 基本的に無償で使える

‣ 地図表示が簡単に実現出来る

‣ オープンデータから取得した情報をその上に表示できる

‣ 他に…OpenStreetMap, OpenLayers, Leaflet.jsなど

16

ズームしてみよう

色をカスタマイズしよう

マーカーを表示しよう

フキダシを表示しよう

ダウンロードしたデータを表示しよう

17

カスタマイズしてみましょう

★マーカーとして画像を表示してみよう ★iPhoneでフルスクリーン表示できるようにしてみよう