22
© Drecom Co.,Ltd. All rights Reserved ネネネネネネネネネネネネ Web ネネネネネネ PhoneGap×Rails 2012/04/10 ドドドド ドドドドドドドドドドドド ドドドドドドドドドドド ドドド ドド

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

Embed Size (px)

DESCRIPTION

 

Citation preview

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

© Drecom Co.,Ltd. All rights Reserved

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

~ PhoneGap×Rails ~

2012/04/10ドリコム ソーシャルラーニング事業

ディレクター兼プログラマ 二ッ森 大介

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

© Drecom Co.,Ltd. All rights Reserved

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

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

モバイル SNS 開発したり

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

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

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

© Drecom Co.,Ltd. All rights Reserved

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

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

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

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

© Drecom Co.,Ltd. All rights Reserved

えいたま

ソーシャルラーニングアプリ第1弾『聴いて育てる英会話 えいたま』

英会話リスニング学習 × 育成ゲームAppStore ランキング

教育カテゴリ 無料 1 位(広告なし)

iOS 版のみ10 万ダウンロード突破

smacolo (スマコロ)ソーシャルラーニングプラットフォーム一緒に学習する友達を作ったり、メッセージをつぶやいたりしながら、学ぶ楽しみを共有できる

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

© Drecom Co.,Ltd. All rights Reserved

えいたまの企画の話

大変ありがたいことに好調でして

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

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

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

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

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

© Drecom Co.,Ltd. All rights Reserved

実例紹介:えいたまの構成

PhoneGap×Rails

ネイティブアプリusing

PhoneGapRails通信・同期

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

© Drecom Co.,Ltd. All rights Reserved

PhoneGap ?

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

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

Adobe が買収Apache Cordova

今のところだいたい同じ

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

© Drecom Co.,Ltd. All rights Reserved

PhoneGap×Rails の基本形

Web アプリ Wrapper としての PhoneGapフルスクリーンの WebViewHTML レンダリングを Rails がすべて行いそれを

表示

ネイティブアプリusing

PhoneGap

WEB/APサーバ(Rails)

リクエスト

HTML

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

© Drecom Co.,Ltd. All rights Reserved

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

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

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

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

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

© Drecom Co.,Ltd. All rights Reserved

PhoneGap(標準ライブラリ)

ローカルファイルローカルファイル

Rails同期・通信

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

ローカルデータ管理ローカル

データ管理

音声再生音声再生

追加データダウンロード追加データ

ダウンロード

デバイス情報取得デバイス情報取得

拡張プラグイン

課金処理課金処理

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

スマコロ連携スマコロ連携

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:標準ライブラリ(1/2)

標準ライブラリローカルファイルデバイス情報の取得 Device音声・動画再生 Mediaファイル管理 Fileプッシュ通知・ローカル通知 Notificationetc..

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:標準ライブラリ(2/2)

ローカルファイルを使う=通信しない WEB アプリ

サーバとの通信ができない状態でもなんらかの表示ができるがんばれば通信なしで普通に遊んでもらうことも

えいたまはがんばりました

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:拡張プラグイン

拡張プラグイン課金処理 InAppPurchaseManagerバーコードスキャン BarcodeScanneretc..

オススメ(というか公式? phonegap plugis でぐぐる)

https://github.com/phonegap/phonegap-plugins

たくさんあるので自作する前にまず探そうOS毎に大きく仕様が異なもの標準ライブラリに取り込まれる前のもの

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:自作プラグイン(1/3)

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

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:自作プラグイン(2/3)

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

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブ機能を使うよ:自作プラグイン(3/3)

スマコロとの連携ソーシャルラーニングプラットフォーム=Rails アプリ中央管理用の Controller を root に追加PhoneGap が持っている WebView とスマコロ用 WebView を適宜切り替える

PhoneGapWebViewPhoneGapWebView

普通の PhoneGaproot

RootControllerRoot

Controller

えいたま版root

PhoneGapWebViewPhoneGapWebView

スマコロWebViewスマコロWebView

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

© Drecom Co.,Ltd. All rights Reserved

PhoneGap メリット:えいたま経験談

対 Web アプリAppStore に出せるオフラインでも動くようにできるどれくらい動くかは設計と努力によるやり過ぎは禁物

対ネイティブアプリWeb 技術が活かせる

取っ付き易い開発工数がかからない(特に Rails なら)

複数 OS 対応が楽

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

© Drecom Co.,Ltd. All rights Reserved

PhoneGap デメリット:えいたま経験談

対 Web アプリAppStore に申請しないと更新できない

ネイティブ部分・ローカルファイル利用部分ネイティブ拡張し過ぎると Web アプリ版は作りづらくなる

Web で体験版とか

対ネイティブアプリ動きがもっさりしている

HTML の限界にどこまで挑戦するかどこまでネイティブ拡張するか

日本語の情報があまりない

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

© Drecom Co.,Ltd. All rights Reserved

ネイティブアプリ vs Web アプリひとつの着地点としての PhoneGap

それぞれのよさを活かす中間点

下手な構成にするとデメリットの集合体になりかねない諸刃の剣

とはいえ、初心者にもオススメしますやってみるのは簡単、基本形から始めよう

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

© Drecom Co.,Ltd. All rights Reserved

もう一度ゼロから …えいたまを作るなら

1st phase基本 Web アプリ+ PhoneGap最低限のネイティブ,ローカルファイルPDCA サイクルを早くして改善に努める

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

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

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

© Drecom Co.,Ltd. All rights Reserved

まとめ

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

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

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

© Drecom Co.,Ltd. All rights Reserved

おわり

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