ネイティブ機能を利用するWebアプリの実例～PhoneGap×Rails～

ネイティブ機能を利用する
We b アプリの実例
～ Pho ne G a p × Ra ils ～

201 2/04/1 0
ドリコムソーシャルラーニング事業
ディレクター兼プログラマ二ッ森大介

© Drecom Co.,Ltd. All rights Reserved

自己紹介
二ッ森大介（ふたつもりだいすけ）

2007 年 4 月に新卒として入社

モバイル SN S 開発したり

きせかえビルダー開発したりして

バイナリの海を漂ったりもしつつ


自己紹介
2011 年 4 月より、ソーシャルラーニング事業の

ディレクター
兼
プロジェクトマネージャー〜タスク管理〜
兼
プログラマ

自分で考えて自分で作るを体現
最初の申請まではほぼ 1 人。


えいたま
ソーシャルラーニングアプリ第１弾
『聴いて育てる英会話えいたま』
英会話リスニング学習 × 育成ゲーム
AppStore ランキング
教育カテゴリ無料 1 位（広告なし）
iOS 版のみ
10 万ダウンロード突破
smacolo （スマコロ）
ソーシャルラーニングプラットフォーム
一緒に学習する友達を作ったり、
メッセージをつぶやいたりしながら、
学ぶ楽しみを共有できる


えいたまの企画の話
大変ありがたいことに好調でして

企画寄りの話に興味があります、という

声もいただくのですが、、、

技術勉強会なので企画の話は懇親会で。

そんなわけでえいたまで使っている技術の紹
介。

実例紹介：えいたまの構成
PhoneGap×Rails

ネイティブアプリ
using 通信・同期 Rails
PhoneGap


PhoneGap ？
概要
http://phonegap.com/
WebView 機能を拡張して
Web アプリをネイティブ化する framework

iOS/Android/Windows
Phone/BlackBerry etc.. に対応

Adobe が買収
Apache Cordova
今のところだいたい同じ


PhoneGap×Rails の基本形
Web アプリ Wrapper としての PhoneGap
フルスクリーンの WebView
HTML レンダリングを Rails がすべて行いそれを表
示
リクエスト
ネイティブアプリ
WEB/AP サーバ
using
(Rails)
PhoneGap HTML


PhoneGap×Rails の基本形
、、、とはいえそのままだと

Apple に Reject されます。
「それ Safari で見たらいいと思うの」

ユーザメリットも特にない。
「ブックマークでいいよね」

ネイティブ拡張でユーザに何が提供できるのか


実例紹介：えいたまの構成詳細版

PhoneGap （標準ライブラリ）

ローカルデバイス
音声再生
ファイル情報取得

拡張プラグイン

課金処理
同期・通信 Rails

ネイティブ ( 自作プラグイン )

ローカル追加データ
スマコロ連携
データ管理ダウンロード


ネイティブ機能を使うよ：標準ライブラリ
(1/2)
標準ライブラリ
ローカルファイル
デバイス情報の取得 Device
音声・動画再生 Media
ファイル管理 File
プッシュ通知・ローカル通知 Notification
etc..


ネイティブ機能を使うよ：標準ライブラリ
(2/2)
ローカルファイルを使う＝通信しない WEB アプ
リ
サーバとの通信ができない状態でも
なんらかの表示ができる
がんばれば通信なしで普通に遊んでもらうこ
とも
えいたまはがんばりました


ネイティブ機能を使うよ：拡張プラグイン
拡張プラグイン
課金処理 InAppPurchaseManager
バーコードスキャン BarcodeScanner
etc..

オススメ（というか公式？ phonegap plugis でぐぐ
る）
https://github.com/phonegap/phonegap-plugins
たくさんあるので自作する前にまず探そう
OS 毎に大きく仕様が異なもの
標準ライブラリに取り込まれる前のもの


ネイティブ機能を使うよ：自作プラグイン
(1/3)
自作プラグイン
JS から呼び出して callback で値を戻せる
WebView も当然ながら View の 1 種なので
別の View を上に表示するとかできる
ネイティブのボタンを設置して、 JS を叩くことも可
能
とりあえず HTML ベースで作って
重要なポイントをネイティブ拡張なんてこともできる


(2/3)
えいたまでは、、、
学習データのローカル管理
追加データのダウンロード管理
複数ファイルの一括 DL と進捗プログレスバー表示
そもそもファイル DL の仕組みがなかったので自作
プラグイン公開検討してたけど公式が対応してた


(3/3)
スマコロとの連携
ソーシャルラーニングプラットフォーム＝
Rails アプリ
中央管理用の Controller を root に追加
PhoneGap が持っている WebView と
スマコロ用 WebView を適宜切り替える
普通の P ho ne G a p えいたま版
ro o t ro o t
PhoneGap Root
WebView Controller

PhoneGap スマコロ
WebView WebView


PhoneGap メリット：えいたま経験談
対 Web アプリ
AppStore に出せる
オフラインでも動くようにできる
どれくらい動くかは設計と努力による
やり過ぎは禁物

対ネイティブアプリ
Web 技術が活かせる
取っ付き易い
開発工数がかからない（特に Rails なら）
複数 OS 対応が楽

PhoneGap デメリット：えいたま経験談
対 Web アプリ
AppStore に申請しないと更新できない
ネイティブ部分・ローカルファイル利用部分
ネイティブ拡張し過ぎると Web アプリ版は作りづら
くなる
Web で体験版とか

対ネイティブアプリ
動きがもっさりしている
HTML の限界にどこまで挑戦するか
どこまでネイティブ拡張するか


ネイティブアプリ vs Web アプリ
ひとつの着地点としての PhoneGap
それぞれのよさを活かす中間点

下手な構成にすると
デメリットの集合体になりかねない諸刃の
剣
とはいえ、初心者にもオススメします
やってみるのは簡単、基本形から始めよう


もう一度ゼロからえいたまを作るなら…
1st phase
基本 Web アプリ＋ PhoneGap
最低限のネイティブ，ローカルファイル
PDCA サイクルを早くして改善に努める

2nd phase
コア部分のネイティブ化によるレスポンス改善

3rd phase
ほぼ全ての部分をネイティブ化・ローカル化


まとめ
PhoneGap いい子だよ
Web アプリのよさとネイティブアプリのよさを活か
した
アプリ開発ができる
オフライン性と更新性のバランス大事
基本形から始めて徐々にネイティブ化・ローカル化

えいたまがんばります
英語・英会話の勉強に是非どうぞ


おわり

ありがとうございました
※ ドリコムよろしくお願いします


ネイティブ機能を利用するWebアプリの実例～PhoneGap×Rails～

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (11)

Similar a ネイティブ機能を利用するWebアプリの実例～PhoneGap×Rails～

Similar a ネイティブ機能を利用するWebアプリの実例～PhoneGap×Rails～ (20)