Code for Kanagawa勉強会資料

1. 勉強会資料
やさしいアーキテクチャで⾏こう
古川
2014.9.25

2. “やさしい”って何？
• 覚える技術のハードルが低い
技術的にやさしい
• お⾦がかからない
お財布にやさしい
• お⾦がかからない
• やさしい気持ちになれそう
やる気にやさしい

3. “やさしい”って何？
• 覚える技術のハードルが低い
技術的にやさしい
• お⾦がかからない
お財布にやさしい
• お⾦がかからない
• やさしい気持ちになれそう すぐに取りかかれそう
やる気にやさしい
新しい技術、⾼度な技術であることよりも
目的を達成することを優先する

4. アジェンダ
• 目的
• できること、できないこと
• アーキテクチャ
• アプリケーション開発• アプリケーション開発
• サンプル

5. 本勉強会の目的
• 社会課題を扱うテーマでOpenDataを使った
アプリを手軽に開発したい
• 特にこんなニーズに対応したい• 特にこんなニーズに対応したい
– 取りあえずWebアプリケーションを公開したい
– 維持費はそんなに掛けたくない
– そんなに大がかりなシステムじゃなくていい

6. アーキテクチャ
• JQWidget+Github+OpenData
Java ScriptアプJava Scriptアプ
商用/オープンAPI
リ
Java Scriptアプ
リ
犯罪
経済
商取引
地図
医療
交通
XML
CSV
RDF
RSS
JSON
CSV
OpenData
ホスティングサーバ

7. アーキテクチャ
• JQWidget+Github+OpenData
Java ScriptアプJava Scriptアプ
商用/オープンAPI
必要に応じて
リ
Java Scriptアプ
リ
犯罪
経済
商取引
地図
医療
交通
XML
CSV
RDF
RSS
JSON
CSV
OpenData
ホスティングサーバ
今回ここ今回はここ

8. JQWidget
• JQWidgetとはJQuery Wrapper
• UIとデータコネクタからなる部品集
• 個⼈、非営利目的であれば無償で使える
http://www.jqwidgets.com/
• データコネクタ(jqDataAdapter)
– リモート、あるいはローカルのJSON, XML,
CSV, TSVを扱える
– 非同期、同期でデータを読み込み可能
http://www.jqwidgets.com/
XML JSONCSV

9. アプリケーション開発
• ローカル開発環境
OS Webサーバ 開発言語 Git ネットワーク
Windows IIS JavaScript Gir for
Windows
WiFi
LTE/3G
• 扱うデータ
– よこはまオープンデータカタログ（試⾏版）
Mac Apache Git
http://www.city.yokohama.lg.jp/seisaku/seisaku/opendata/catalog.html

10. サンプル
• ハンズオンファイル参照
• CSVとXMLをテーブルにロードする
サンプルコード
• HTMLに埋め込んだJavaScriptで1ファイル• HTMLに埋め込んだJavaScriptで1ファイル

11. サンプル
• IIS/Apacheの公開ディレクトリに”practice”を配置します
• ブラウザのURLに下記を指定
– http://localhost/practice/post.html

12. サンプル
• 同フォルダに事前に入手した横浜市の地域防災拠点
(平成26年5月20⽇更新) XMLファイルが配置してあります
• 左上の”load”ボタンを押すと、XMLファイルを読み込みます。

13. サンプル
• JQWidgetのパーツ（ウィジット）を使うのでゼロから複雑なコー
ドを書かなくてもスプレッドシートに簡単にロードできます
• “Export”を押すと自動的にCSVファイルとして保存できます
JQWidgetの部品を
使っています

14. アプリの公開
• JQWidget+Github+OpenData
Java ScriptアプJava Scriptアプ
商用/オープンAPI
Gh-pagesで公開
リ
Java Scriptアプ
リ
犯罪
経済
商取引
地図
医療
交通
XML
CSV
RDF
RSS
JSON
CSV
OpenData
ホスティングサーバ

15. 参考情報
• JQWidget
• 国交省GIS
http://nlftp.mlit.go.jp/isj/
http://www.jqwidgets.com/
• GithubでWebページ公開
https://help.github.com/articles/creating-project-pages-manually

16. なぜやさしい必要が？
いわゆるITエンジニアの旬
20〜35歳
http://www.ipss.go.jp/site-ad/TopPageData/pyra.html

17. なぜやさしい必要が？
http://www.ipss.go.jp/site-ad/TopPageData/pyra.html

18. なぜやさしい必要が？
http://www.ipss.go.jp/site-ad/TopPageData/pyra.html

19. なぜやさしい必要が？
http://www.ipss.go.jp/site-ad/TopPageData/pyra.html

20. なぜやさしい必要が？
http://www.ipss.go.jp/site-ad/TopPageData/pyra.html
なんと4割減少！！

21. ITエンジニア不⾜への対応
• 2010〜2015年で第1段階のピークアウト
• 2015〜2020年で第2段階のピークアウト
• ⾼度な技術の習得には、⽐例して⻑い学習時間が必要
• 習熟できる⼈も限られる• 習熟できる⼈も限られる
コモディティ化した技術で学習時間を短縮
最短でゴールするためなら技術は何でも良い
これから必要に成る考え方

22. Thank you!Thank you!