2016/01/31に行われた、HTML5fun福島で話したときの資料です。 CordovaとBackbone.jsの紹介をしました。

1. 浪江町タブレットで採用した、
Cordovaで作るHTML5のAndroidアプリのしくみ
2016/01/31
HTML5fun 現場で使えるライブラリと、JSの基礎（福島）
山田 直行

2. アジェンダ
• 自己紹介
• 浪江町とタブレット事業の紹介
• Cordovaとは
• Backbone.js入門
• なみえアプリでのCordovaとBackbone.js

3. 自己紹介
山田 直行（やまだ なおゆき）
2015年7月から浪江町役場勤務。
復興推進課 情報統計係
復興庁 福島復興局 所属 市町村応援職員
Code for Japanフェロー
• 2007年に社会復帰し、メルティングドッツ、イストピカ、サイバーエージェントと勤め、浪江町役場
は４つ目の勤務先。
• 政治・行政の世界でのITの今後の可能性にかけて現場から取り組むことを決意し、Code for Japanフェ
ローに。
• 浪江町タブレット配布プロジェクトの開発・運用を担当する職員として役場でフルタイムで働く。
• ソフトウェアエンジニアとしては、クラウドの運用・サーバーサイドの開発を得意とするが基本的に何
でも屋
• AWS認定ソリューションアーキテクト- アソシエイト
• 福島県郡山市在住

4. 浪江町の紹介とタブレット事業について
• 平成28年1月版「なみえ復興レポート」より
• http://www.town.namie.fukushima.jp/
uploaded/attachment/4513.pdf

5. タブレット端末を利用した「きずなの維持」
• 全国に分散避難する町民と町、あるいは町民同士
をつなぐ
• 「ふるさとなみえ」への愛着を持ち続けて欲しい
• 町の近況を身近に感じてもらい、将来の帰還へつな
げたい

6. アプリの開発と、Code for Namie プロジェクト
• 浪江町タブレット 最後の挑戦 -プロジェクト参加
者募集 より
• http://www.slideshare.net/codeforjapan/
ss-51373165

7. ここまでが前振りです
(；́Д｀)

8. 浪江町タブレットで採用している
Cordovaで作るHTML5の
Androidアプリのしくみ

9. Androidアプリが動く仕組み(基本)
• Androidアプリは、Java言語で記述された
プログラムをJavaクラスファイルにコンパイ
ルしたものを、さらにAndroid SDKによっ
てAndroidが動作するDalvik仮想マシン上で
の実行形式(.dex形式)に変換することによっ
て動作します

10. つまりJava言語で記述するの
が基本

11. ここに、HTML5やJavaScript
がどう関係してくるのか？

12. Apache Cordova

13. Cordovaとは(1/3)
• オープンソースのモバイルアプリ開発フレームワーク
• Apacheソフトウェア財団に寄贈されたため
「Apache」とついている
• もともとはPhoneGapという名称だったが、Adobe
社が買収したことによりPhoneGapはAdobeのプロ
ダクト名になり、フレームワーク自体はCordovaと
呼ばれるようになった

14. Cordovaとは(2/3)
• HTML5( JavaScript)で記述したアプリケーショ
ンをAndroidを含むさまざまなモバイル端末上で実
行するためのフレームワーク

15. Cordovaとは(3/3)
• Androidを例にすると、HTML5で書かれたコード
はAndroidの中にあるWebViewというウェブブラ
ウザの機能を持った部品を使って実行できる
• それにWebViewの外のAndroid独自の機能（カメ
ラ・センサー・Push通知など）との連携機能をつ
け、フレームワーク化したものがCordova。

16. 浪江町のアプリでのCordova
• なみえ新聞
• なみえ写真投稿
• なみえタブレット道場
• なみえ放射線情報
• 記事管理などの管理画面（ウェブサイトから利用）
→これら5つは、全てCordovaフレームワークで作られています

17. Cordovaは、AndroidとHTML5を橋渡しする
フレームワークでした。
では、HTML5で記述する実際のアプリケーショ
ン（ JavaScript）の中はどのように
書かれているのでしょうか？

18. Backbone.js

19. Backbone.jsとは
• クライアントサイドのJavaScript MVCフ
レームワーク
• JavaScriptのソースコードを役割別に分割
して、見通しをよくする
• 大規模開発に効果を発揮

20. Backbone.jsの部品
• View・・・ビュー（見た目の制御）
• Model・・・データの取得・保存・更新・削除
• Collection・・・Modelの集合
• Router・・・URLの制御・監視
• History・・・Routeの履歴監視
http://www.slideshare.net/otoyo0122/backbonejs-16753352

21. 見た目の制御と、ロジックを明確に分離
ユーザー View
Model
Collection

22. サンプルアプリ
• あるボタンを押して入力すると友だちを追加
あるボタンを押すと友だちの数を表示
というシンプルなアプリです。
• Backbone.jsで書いた場合とjQueryで書い
た場合の比較をしてみたいと思います。

23. DEMO

24. 浪江町のアプリでの
CodrovaとBackbone.js

25. オープンソースです！（昨年度までの開発分）
https://github.com/codefornamie/namie-tablet-html5

26. 浪江町アプリの技術
なみえ新聞
なみえ写真投稿
なみえ道場
放射線情報
サーバー
AWS
Cordova
+
Backbone.js
Personium.io
(Tomcat+Elasticsearch)

27. DEMO

28. ご清聴ありがとうございました
m(__)m
- 質疑応答 -