浪江町タブレットで採用した、 cordovaで作るhtml5のandroidアプリのしくみ
TRANSCRIPT
浪江町タブレットで採用した、 Cordovaで作るHTML5のAndroidアプリのしくみ2016/01/31 HTML5fun 現場で使えるライブラリと、JSの基礎（福島） 山田 直行
アジェンダ• 自己紹介
• 浪江町とタブレット事業の紹介
• Cordovaとは
• Backbone.js入門
• なみえアプリでのCordovaとBackbone.js
自己紹介山田 直行（やまだ なおゆき）
2015年7月から浪江町役場勤務。 復興推進課 情報統計係 復興庁 福島復興局 所属 市町村応援職員 Code for Japanフェロー
• 2007年に社会復帰し、メルティングドッツ、イストピカ、サイバーエージェントと勤め、浪江町役場は４つ目の勤務先。
• 政治・行政の世界でのITの今後の可能性にかけて現場から取り組むことを決意し、Code for Japanフェローに。
• 浪江町タブレット配布プロジェクトの開発・運用を担当する職員として役場でフルタイムで働く。 • ソフトウェアエンジニアとしては、クラウドの運用・サーバーサイドの開発を得意とするが基本的に何でも屋
• AWS認定ソリューションアーキテクト- アソシエイト • 福島県郡山市在住
浪江町の紹介とタブレット事業について
• 平成28年1月版「なみえ復興レポート」より
• http://www.town.namie.fukushima.jp/uploaded/attachment/4513.pdf
タブレット端末を利用した「きずなの維持」• 全国に分散避難する町民と町、あるいは町民同士をつなぐ
• 「ふるさとなみえ」への愛着を持ち続けて欲しい
• 町の近況を身近に感じてもらい、将来の帰還へつなげたい
アプリの開発と、Code for Namie プロジェクト
• 浪江町タブレット 最後の挑戦 -プロジェクト参加者募集 より
• http://www.slideshare.net/codeforjapan/ss-51373165
ここまでが前振りです (；́Д｀)
浪江町タブレットで採用している Cordovaで作るHTML5の Androidアプリのしくみ
Androidアプリが動く仕組み(基本)
• Androidアプリは、Java言語で記述されたプログラムをJavaクラスファイルにコンパイルしたものを、さらにAndroid SDKによってAndroidが動作するDalvik仮想マシン上での実行形式(.dex形式)に変換することによって動作します
つまりJava言語で記述するのが基本
ここに、HTML5やJavaScriptがどう関係してくるのか？
Apache Cordova
Cordovaとは(1/3)• オープンソースのモバイルアプリ開発フレームワーク
• Apacheソフトウェア財団に寄贈されたため「Apache」とついている
• もともとはPhoneGapという名称だったが、Adobe社が買収したことによりPhoneGapはAdobeのプロダクト名になり、フレームワーク自体はCordovaと呼ばれるようになった
Cordovaとは(2/3)
• HTML5(≒JavaScript)で記述したアプリケーションをAndroidを含むさまざまなモバイル端末上で実行するためのフレームワーク
Cordovaとは(3/3)
• Androidを例にすると、HTML5で書かれたコードはAndroidの中にあるWebViewというウェブブラウザの機能を持った部品を使って実行できる
• それにWebViewの外のAndroid独自の機能（カメラ・センサー・Push通知など）との連携機能をつけ、フレームワーク化したものがCordova。
浪江町のアプリでのCordova• なみえ新聞 • なみえ写真投稿 • なみえタブレット道場 • なみえ放射線情報 • 記事管理などの管理画面（ウェブサイトから利用）
→これら5つは、全てCordovaフレームワークで作られています
Cordovaは、AndroidとHTML5を橋渡しする フレームワークでした。
では、HTML5で記述する実際のアプリケーション（≒JavaScript）の中はどのように 書かれているのでしょうか？
Backbone.js
Backbone.jsとは
• クライアントサイドのJavaScript MVCフレームワーク
• JavaScriptのソースコードを役割別に分割して、見通しをよくする
• 大規模開発に効果を発揮
Backbone.jsの部品• View・・・ビュー（見た目の制御）
• Model・・・データの取得・保存・更新・削除
• Collection・・・Modelの集合
• Router・・・URLの制御・監視
• History・・・Routeの履歴監視http://www.slideshare.net/otoyo0122/backbonejs-16753352
見た目の制御と、ロジックを明確に分離
ユーザー View
Model
Collection
サンプルアプリ
• あるボタンを押して入力すると友だちを追加あるボタンを押すと友だちの数を表示というシンプルなアプリです。
• Backbone.jsで書いた場合とjQueryで書いた場合の比較をしてみたいと思います。
DEMO
浪江町のアプリでの CodrovaとBackbone.js
オープンソースです！（昨年度までの開発分）https://github.com/codefornamie/namie-tablet-html5
浪江町アプリの技術
なみえ新聞なみえ写真投稿なみえ道場放射線情報
サーバーAWS
Cordova+
Backbone.js
Personium.io(Tomcat+Elasticsearch)
DEMO
ご清聴ありがとうございました m(__)m
- 質疑応答 -