ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~
-
Upload
daisuke-futatsumori -
Category
Health & Medicine
-
view
7.210 -
download
4
description
Transcript of ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を利用するWeb アプリの実例
~ PhoneGap×Rails ~
2012/04/10ドリコム ソーシャルラーニング事業
ディレクター兼プログラマ 二ッ森 大介
© Drecom Co.,Ltd. All rights Reserved
自己紹介二ッ森 大介(ふたつもり だいすけ)
2007 年 4 月に新卒として入社
モバイル SNS 開発したり
きせかえビルダー開発したりして
バイナリの海を漂ったりもしつつ
© Drecom Co.,Ltd. All rights Reserved
自己紹介2011 年 4 月より、ソーシャルラーニング事業の
ディレクター兼プロジェクトマネージャー〜タスク管理〜兼プログラマ
自分で考えて自分で作るを体現最初の申請まではほぼ 1 人。
© Drecom Co.,Ltd. All rights Reserved
えいたま
ソーシャルラーニングアプリ第1弾『聴いて育てる英会話 えいたま』
英会話リスニング学習 × 育成ゲームAppStore ランキング
教育カテゴリ 無料 1 位(広告なし)
iOS 版のみ10 万ダウンロード突破
smacolo (スマコロ)ソーシャルラーニングプラットフォーム一緒に学習する友達を作ったり、メッセージをつぶやいたりしながら、学ぶ楽しみを共有できる
© Drecom Co.,Ltd. All rights Reserved
えいたまの企画の話
大変ありがたいことに好調でして
企画寄りの話に興味があります、という
声もいただくのですが、、、
技術勉強会なので企画の話は懇親会で。
そんなわけでえいたまで使っている技術の紹介。
© Drecom Co.,Ltd. All rights Reserved
実例紹介:えいたまの構成
PhoneGap×Rails
ネイティブアプリusing
PhoneGapRails通信・同期
© Drecom Co.,Ltd. All rights Reserved
PhoneGap ?
概要http://phonegap.com/WebView 機能を拡張してWeb アプリをネイティブ化する framework
iOS/Android/Windows Phone/BlackBerry etc.. に対応
Adobe が買収Apache Cordova
今のところだいたい同じ
© Drecom Co.,Ltd. All rights Reserved
PhoneGap×Rails の基本形
Web アプリ Wrapper としての PhoneGapフルスクリーンの WebViewHTML レンダリングを Rails がすべて行いそれを
表示
ネイティブアプリusing
PhoneGap
WEB/APサーバ(Rails)
リクエスト
HTML
© Drecom Co.,Ltd. All rights Reserved
PhoneGap×Rails の基本形、、、とはいえそのままだと
Apple に Reject されます。「それ Safari で見たらいいと思うの」
ユーザメリットも特にない。「ブックマークでいいよね」
ネイティブ拡張でユーザに何が提供できるのか
© Drecom Co.,Ltd. All rights Reserved
PhoneGap(標準ライブラリ)
ローカルファイルローカルファイル
Rails同期・通信
ネイティブ (自作プラグイン )
ローカルデータ管理ローカル
データ管理
音声再生音声再生
追加データダウンロード追加データ
ダウンロード
デバイス情報取得デバイス情報取得
拡張プラグイン
課金処理課金処理
実例紹介:えいたまの構成 詳細版
スマコロ連携スマコロ連携
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:標準ライブラリ(1/2)
標準ライブラリローカルファイルデバイス情報の取得 Device音声・動画再生 Mediaファイル管理 Fileプッシュ通知・ローカル通知 Notificationetc..
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:標準ライブラリ(2/2)
ローカルファイルを使う=通信しない WEB アプリ
サーバとの通信ができない状態でもなんらかの表示ができるがんばれば通信なしで普通に遊んでもらうことも
えいたまはがんばりました
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:拡張プラグイン
拡張プラグイン課金処理 InAppPurchaseManagerバーコードスキャン BarcodeScanneretc..
オススメ(というか公式? phonegap plugis でぐぐる)
https://github.com/phonegap/phonegap-plugins
たくさんあるので自作する前にまず探そうOS毎に大きく仕様が異なもの標準ライブラリに取り込まれる前のもの
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:自作プラグイン(1/3)
自作プラグインJS から呼び出して callback で値を戻せるWebView も当然ながら View の 1種なので別の View を上に表示するとかできるネイティブのボタンを設置して、 JS を叩くことも可能とりあえず HTMLベースで作って重要なポイントをネイティブ拡張なんてこともできる
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:自作プラグイン(2/3)
えいたまでは、、、学習データのローカル管理追加データのダウンロード管理複数ファイルの一括 DL と進捗プログレスバー表示そもそもファイル DL の仕組みがなかったので自作プラグイン公開検討してたけど公式が対応してた
© Drecom Co.,Ltd. All rights Reserved
ネイティブ機能を使うよ:自作プラグイン(3/3)
スマコロとの連携ソーシャルラーニングプラットフォーム=Rails アプリ中央管理用の Controller を root に追加PhoneGap が持っている WebView とスマコロ用 WebView を適宜切り替える
PhoneGapWebViewPhoneGapWebView
普通の PhoneGaproot
RootControllerRoot
Controller
えいたま版root
PhoneGapWebViewPhoneGapWebView
スマコロWebViewスマコロWebView
© Drecom Co.,Ltd. All rights Reserved
PhoneGap メリット:えいたま経験談
対 Web アプリAppStore に出せるオフラインでも動くようにできるどれくらい動くかは設計と努力によるやり過ぎは禁物
対ネイティブアプリWeb 技術が活かせる
取っ付き易い開発工数がかからない(特に Rails なら)
複数 OS 対応が楽
© Drecom Co.,Ltd. All rights Reserved
PhoneGap デメリット:えいたま経験談
対 Web アプリAppStore に申請しないと更新できない
ネイティブ部分・ローカルファイル利用部分ネイティブ拡張し過ぎると Web アプリ版は作りづらくなる
Web で体験版とか
対ネイティブアプリ動きがもっさりしている
HTML の限界にどこまで挑戦するかどこまでネイティブ拡張するか
日本語の情報があまりない
© Drecom Co.,Ltd. All rights Reserved
ネイティブアプリ vs Web アプリひとつの着地点としての PhoneGap
それぞれのよさを活かす中間点
下手な構成にするとデメリットの集合体になりかねない諸刃の剣
とはいえ、初心者にもオススメしますやってみるのは簡単、基本形から始めよう
© Drecom Co.,Ltd. All rights Reserved
もう一度ゼロから …えいたまを作るなら
1st phase基本 Web アプリ+ PhoneGap最低限のネイティブ,ローカルファイルPDCA サイクルを早くして改善に努める
2nd phaseコア部分のネイティブ化によるレスポンス改善
3rd phaseほぼ全ての部分をネイティブ化・ローカル化
© Drecom Co.,Ltd. All rights Reserved
まとめ
PhoneGap いい子だよWeb アプリのよさとネイティブアプリのよさを活かしたアプリ開発ができるオフライン性と更新性のバランス大事基本形から始めて徐々にネイティブ化・ローカル化
えいたまがんばります英語・英会話の勉強に是非どうぞ
© Drecom Co.,Ltd. All rights Reserved
おわり
ありがとうございました※ドリコムよろしくお願いします