狠狠撸

浪江町タブレットで採用した、
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
がどう関係してくるのか？

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とは
? クライアントサイドの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で書い
た場合の比較をしてみたいと思います。

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

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

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

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

狠狠撸

浪江町タブレットで採用した、 Cordovaで作るHTML5のAndroidアプリのしくみ

Recommended

More Related Content

What's hot (20)

Similar to 浪江町タブレットで採用した、 Cordovaで作るHTML5のAndroidアプリのしくみ (20)

More from Naoyuki Yamada (17)

浪江町タブレットで採用した、 Cordovaで作るHTML5のAndroidアプリのしくみ