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.
https://speakerdeck.com/codeforoedo
大江戸
Googleスプレッドシートと
5374多地域対応
老中首座 古川 文生
in Code For Japan Summit 2015
CODE for 大江戸
古川 文生
フミリア・ラボ
プロエンジニア育成塾
フルカワ フミオ
CODE for 大江戸
CODE for 大江戸とは
「CODE for 大江戸」は、東京の歴史、文化を語りデータ化する
イベントなどの提供を通じて、同じ興味の方向性を向く人たち
の新しい出会いを生み出し、新しい活動のきっかけをつくるこ
とを...
CODE for 大江戸
CODE for 大江戸の活動
1. しながわWEB写真館のデータマッピング
品川の「今」と「昔」に触れる、品川のことを「知る」「好き」に
なってもらう機会
2. しながわ巡り〜東海七福神に会いにいこう!
品川観光協会...
CODE for 大江戸
CODE for 大江戸の5374
東京都品川区版 東京都大田区版
CODE for 大江戸
改めて、5374とは・・・
• 地域ごとに異なるごみの収集⽇情報をわかりやすく
表⽰するWebアプリ
• スマートフォン向けのUIデザイン
• プログラムは 2013年9⽉ に v1.0 リリース
• 現在、⽇本全国 ...
CODE for 大江戸
5374のテクニカルな特質
•シングルページアプリケーションである
• 地域ごとにURL1個
• ページ遷移なし、アコーディオン開閉のみ
• JavaScript / jQuery 1.10
• Safari/iOS ...
CODE for 大江戸
5374のホスティング方法
• GitHub Page (何といっても無料)
• Amazon S3  (速い!安い!)
• お好きなクラウドサーバー、共⽤サーバー
静的(Static)なWebサイトが置けるサーバー
...
CODE for 大江戸
5374データ作成時のあるある
• CSVファイルをExcelで開いたら、⽂字化けした!
• Excelのシート機能で複数のCSVファイルを管理できたら楽な
のになぁ
• GitHubのアカウントがないとアップロードで...
CODE for 大江戸
その時、5374が動いた
• CSVファイルをExcelで開いたら、⽂字化けした!
• Excelのシート機能で複数のCSVファイルを管理できたら楽なのになぁ
• GitHubのアカウントがないとアップロードできない!...
CODE for 大江戸
Googleスプレッドシートで編集
CODE for 大江戸
大江戸コンソール
CODE for 大江戸
5374多地域版の構成
大江戸サーバー Amazon S3
Googleドライブ
5374サイト
HTML+JavaScript
ドメイン 地域データ
マッピング
URL取得
大江戸コンソール
Laravel 5
地域...
CODE for 大江戸
さらなる機能アップに向けて
1. 地域分けの基準作り
• 千葉市(区ごと)と川崎市(1つ)
• 各地域のデータフォーマットが微妙に異なる
• 整備することで、CSVからRDFへのレベルアップが可能
2. 地域検索機能
...
みなさん、対話しながら
ともに考えませんか?
Facebookページ
https://www.facebook.com/codeforoedo/
CODE for 大江戸サイト
http://codeforoedo.org/
Upcoming SlideShare
Loading in …5
×

Googleスプレッドシートと5374多地域版

373 views

Published on

Code For Summit Japan 2015 2日目の「5374Party(ゴミナシパーティ)」で発表した資料です。

Published in: Software
  • Be the first to comment

  • Be the first to like this

Googleスプレッドシートと5374多地域版

  1. 1. https://speakerdeck.com/codeforoedo 大江戸 Googleスプレッドシートと 5374多地域対応 老中首座 古川 文生 in Code For Japan Summit 2015
  2. 2. CODE for 大江戸 古川 文生 フミリア・ラボ プロエンジニア育成塾 フルカワ フミオ
  3. 3. CODE for 大江戸 CODE for 大江戸とは 「CODE for 大江戸」は、東京の歴史、文化を語りデータ化する イベントなどの提供を通じて、同じ興味の方向性を向く人たち の新しい出会いを生み出し、新しい活動のきっかけをつくるこ とを目指しています。 地域の課題を行政に届ける、ITの力で解決
  4. 4. CODE for 大江戸 CODE for 大江戸の活動 1. しながわWEB写真館のデータマッピング 品川の「今」と「昔」に触れる、品川のことを「知る」「好き」に なってもらう機会 2. しながわ巡り〜東海七福神に会いにいこう! 品川観光協会のスマートフォンアプリ「しながわ巡り」を使ったま ちあるき アプリのユーザー視点の評価レポートを品川観光協会へ
  5. 5. CODE for 大江戸 CODE for 大江戸の5374 東京都品川区版 東京都大田区版
  6. 6. CODE for 大江戸 改めて、5374とは・・・ • 地域ごとに異なるごみの収集⽇情報をわかりやすく 表⽰するWebアプリ • スマートフォン向けのUIデザイン • プログラムは 2013年9⽉ に v1.0 リリース • 現在、⽇本全国 81地域 に展開中 (2015年10⽉31⽇時点)
  7. 7. CODE for 大江戸 5374のテクニカルな特質 •シングルページアプリケーションである • 地域ごとにURL1個 • ページ遷移なし、アコーディオン開閉のみ • JavaScript / jQuery 1.10 • Safari/iOS のホーム画⾯へのアイコン追加機能に対応 •サーバープログラムがない • HTMLと⼀緒にCSVファイルを置くだけ • サーバー保有コストはほぼ掛かからない
  8. 8. CODE for 大江戸 5374のホスティング方法 • GitHub Page (何といっても無料) • Amazon S3  (速い!安い!) • お好きなクラウドサーバー、共⽤サーバー 静的(Static)なWebサイトが置けるサーバー ならなんでもいい 要件
  9. 9. CODE for 大江戸 5374データ作成時のあるある • CSVファイルをExcelで開いたら、⽂字化けした! • Excelのシート機能で複数のCSVファイルを管理できたら楽な のになぁ • GitHubのアカウントがないとアップロードできない! • そもそもGitHubに不慣れなメンバーばっかり! • プログラムの保守(アップデート)が⾯倒だなぁ
  10. 10. CODE for 大江戸 その時、5374が動いた • CSVファイルをExcelで開いたら、⽂字化けした! • Excelのシート機能で複数のCSVファイルを管理できたら楽なのになぁ • GitHubのアカウントがないとアップロードできない! • そもそもGitHubに不慣れなメンバーばっかり! • プログラムの保守(アップデート)が⾯倒だなぁ Googleスプレッドシートで編集しよう! ボタン⼀発でデプロイ(サーバー配置)しよう! プログラムは⼀つだけにしよう! CODE for 大江戸は考えた!
  11. 11. CODE for 大江戸 Googleスプレッドシートで編集
  12. 12. CODE for 大江戸 大江戸コンソール
  13. 13. CODE for 大江戸 5374多地域版の構成 大江戸サーバー Amazon S3 Googleドライブ 5374サイト HTML+JavaScript ドメイン 地域データ マッピング URL取得 大江戸コンソール Laravel 5 地域データ スプレッドシート 地域データ CSV データ取得 地域データ CSV データ取得 地域データ スプレッドシート データ配置
  14. 14. CODE for 大江戸 さらなる機能アップに向けて 1. 地域分けの基準作り • 千葉市(区ごと)と川崎市(1つ) • 各地域のデータフォーマットが微妙に異なる • 整備することで、CSVからRDFへのレベルアップが可能 2. 地域検索機能 • 郵便番号から検索 3. ごみ分別カタログ • 1種別あたり50件超えるとスクロールが⼤変 4. リマインダーのプッシュ通知 • サーバーサイドのプログラムが必須
  15. 15. みなさん、対話しながら ともに考えませんか?
  16. 16. Facebookページ https://www.facebook.com/codeforoedo/ CODE for 大江戸サイト http://codeforoedo.org/

×