O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた

20.121 visualizações

Publicada em

第10回 Cordova 勉強会で発表したスライドです。

Publicada em: Engenharia
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた

  1. 1. Cordova を使って 本気で商用ハイブリッドアプリ開発をやってみた 第10回 Apache Cordova 勉強会 ソニーネットワークコミュニケーションズ(株) 緒方 信 ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  2. 2. Agenda 自己紹介 プロジェクト概要 教科書では教えてくれないハイブリッドアプリ開発 現場で役立つ小技集 通信簿 まとめ 2ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  3. 3. 自己紹介 緒方 信 ◦ ソフトウェアアーキテクト ◦ プログラマ ◦ 元 PC アプリ屋さん ◦ C/C++ が好き ◦ 人類はデストラクタという発明をもっと大切にすべきだと考えている 3ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  4. 4. プロジェクト概要 4ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  5. 5. クライアントアプリ概要 – 主な機能 ほかのアプリとの差別化をはかるメイン UI ◦ 楽しい高速スクロール デジタルコンテンツの作成 ◦ スマートフォン内の写真を使って簡単操作 デジタルコンテンツを機器へ転送 ◦ 専用フォーマットに変換 ◦ Bluetooth Low Energy (BLE) で転送 ほかにもたくさん 5ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  6. 6. 開発環境・仕向け Cordova 6.1.1 ◦ Cordova android 5.1.1 ◦ Cordova ios 4.1.1 Node.js 4.5.0 ◦ Npm 2.14.7 TypeScript 1.8.10 SASS (SCSS) ◦ Compass 1.0.3 6ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部 Android 5+, iOS 9+ ◦ 比較的新しいデバイスのみサポート ◦ タブレット用に最適化はしない 対応言語 ◦ 日, 米, 中(簡体字)
  7. 7. 教科書では教えてくれないハイブリッドアプリ開発 元PCアプリ屋が考えたアプリ開発の大方針 7ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  8. 8. ハイブリッドアプリとは? Java/Objective-C/C++ Hybrid フレームワーク JavaScript ・Native 通信用APIを通じてデータをやり取り ・プラグイン機構を用いて機能拡張 アプリ ブラウザコンポーネ ント • 普通のアプリとして動作 • ブラウザコンポーネント上で Web 技術を活用 8ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  9. 9. ウェブアプリとネイティブアプリのいいとこどり? ウェブアプリ ネイティブアプリ Pros ・複数OS対応コストが低い ブラウザで動けばよい ・リアルタイムに更新できる サーバー上にデプロイすることで、すべてのユーザーが更 新されたものにアクセス可能 ・技術者の数が多い Webアプリのフロントエンド開発者 > 特定プラットフォームの Native アプリ開発者 ・高いパフォーマンス プラットフォームに最適化 ・ユーザへのタッチポイントが多い ストアから配信 Home画面やランチャーに登録される ・H/W リソースへのアクセスが容易 OSがAPIを公開 Cons ・操作性やレスポンスが悪い ネットワーク状態に依存する Native アプリほど最適化されていない ・ユーザーへのタッチポイントが少ない ストアに置けない ブックマーク登録が基本 ・H/W リソースへのアクセスが限定的 HTML5で策定されるAPIのみ使用可 ・複数OS対応コストが高い プラットフォームごとにコードベースが必要になる ・リアルタイムに更新できない ストアによってはアップデートごとに申請が必要 ユーザーは必ずしも最新版を使用するとは限らない ・サービスに誘導しにくい SNSで拡散されても、アプリをダウンロードしてもらわないと使っても らえない ハイブリッドアプリ Pros ・複数OS対応コストが低い ブラウザで動けばよい ※ プラットフォーム依存を最小化 ・リアルタイムに更新できる サーバー上にデプロイすることで、すべてのユーザーが更 新されたものにアクセス可能 ※ リソースをサーバーに置くことも可能 ・技術者の数が多い Webアプリのフロントエンド開発者 > 特定プラットフォームの Native アプリ開発者 ・高いパフォーマンス プラットフォームに最適化 ※ コストのかかる処理は Native で ・ユーザへのタッチポイントが多い ストアから配信 Home画面やランチャーに登録される ・H/W リソースへのアクセスが容易 OSがAPIを公開 ※ 必要に応じてプラグインを実装 Cons ・操作性やレスポンスが悪い ネットワーク状態に依存する Native アプリほど最適化されていない ・ユーザーへのタッチポイントが少ない ストアに置けない ブックマーク登録が基本 ・H/W リソースへのアクセスが限定的 HTML5で策定されるAPIのみ使用可 ・複数OS対応コストが高い プラットフォームごとにコードベースが必要になる ・リアルタイムに更新できない ストアによってはアップデートごとに申請が必要 ユーザーは必ずしも最新版を使用するとは限らない ・サービスに誘導しにくい SNSで拡散されても、アプリをダウンロードしてもらわないと使っても らえない 建前です 9ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  10. 10. 商用ハイブリッドアプリとしての宿命 初見でブラウザだなと思われたら… ユーザーの期待値は常にネイティブアプリ ◦ 「ハイブリッドアプリだからしょうがないねー」とはならず、容赦な く低評価が付くことになる 負けです 商用アプリとして成立させるにはなにをすべきか? そのための方針を最初に立てておく必要がある 10ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  11. 11. 商用ハイブリッドアプリ開発って? ネイティブアプリ開発では”あたりまえ”とのギャップをなくす ◦ ハイブリッドアプリ開発のほうがコストがかかっては本末転倒 ◦ ウェブアプリではなくネイティブアプリの挙動 「作っておしまい」ではなく妥協なき商品力を追及する ◦ プロが定義するユーザーインターフェイスの実現 ◦ なんでもありとせず、保守まで見据えた秩序の確立 11ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  12. 12. ”あたりまえ”とのギャップをなくす 開発言語とフレームワーク選定 ◦選定理由 自然な画面遷移とは ◦画面遷移のメカニズムと工夫 ローカライズに関して ◦リソース管理と運用 12ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  13. 13. ”あたりまえ”とのギャップをなくす 開発言語とフレームワーク選定 ◦選定理由 自然な画面遷移とは ◦画面遷移のメカニズムと工夫 ローカライズに関して ◦リソース管理と運用 13ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  14. 14. 開発言語 TypeScript ◦ C/C++, Java 経験エンジニアにはとっつきやすい ◦ クラスサポートによりオブジェクト指向設計のノウハウをコードに 反映しやすい ◦ もともとES2015 の仕様の先取りという感覚だったので、廃れる不安 はなし 何よりも強力な型付けで安心 我々はコンパイルに対して 何のためらいもない 14ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  15. 15. フレームワークはなぜ必要なのか? https://www.slideshare.net/AsialCorp/angularonsen-uihtml5 アプリ Foundation/UIKit Objective-C/Swift iOS アプリ Android SDK Java Android アプリ ! ブラウザ/Cordova iOS/Android Android SDK Foundation/UIKit 15ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  16. 16. 半年ごとに誕生するHOTなフレームワーク http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%8 1%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3 %82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9 2009 2013 2015 16ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  17. 17. さて今回のミッションは… 最新の JavaScript の動向を追い、次期トレンドに乗り遅れるな! 常に研究し自分を高め、エバンジェリストであり続けろ! 地雷はすべて踏め! 限られた時間とリソースで、個性的な楽しい商品を供給しろ! 最新の JavaScript の動向を追い、次期トレンドに乗り遅れるな! 常に研究し自分を高め、エバンジェリストであり続けろ! 地雷はすべて踏め! 限られた時間とリソースで、個性的な楽しい商品を供給しろ! 17ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  18. 18. jQuery Mobile + Backbone.js + i18next ◦ オリジナル UI の実装のしやすさ ◦ ほかのOSSと組み合わせやすさ ◦ 開発チームの専門性 今回は”おとなしめ”なもの 商品開発では枯れたものを採用したい ※2016年初期のお話 フレームワークの 足りない機能は拡張する 18ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部 シンプルに倒す
  19. 19. ”あたりまえ”とのギャップをなくす 開発言語とフレームワーク選定 ◦選定理由 自然な画面遷移とは ◦画面遷移のメカニズムと工夫 ローカライズに関して ◦リソース管理と運用 19ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  20. 20. 画面遷移とページスタックのメカニズム ブラウザの履歴とページスタックを連動 ◦ Backbone.Router オブジェクトと jQuery Mobile の changePage() を連携 ◦ 実際には$.mobile.navigate.history.stack と hash を連動 ◦ Android の H/W Back Key のイベントでもブラウザの履歴を戻れば画面遷 移可能 ◦ イベントは Cordova がサポート A B "file:///android_asset/www/index.html#A" "file:///android_asset/www/index.html#B"c "file:///android_asset/www/index.html#C" URL history 20ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  21. 21. 画面遷移あるある物語対策 ページスタック ◦[A]→[B]→[a]→[b]→[c]→[B] ◦×[A]→[B]→[a]→[b]→[c]←[B] ◦◎[A]←[B] ◦[A]→[B]→[a]→[b]→[c]→[B] ◦[A]→[B]→[a]→[b]→[c]→[B] A B a b c Sub Flow “Sub Flow” という特別な区間を定義し、終了するときにその区間の履歴を破棄 21ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  22. 22. ”あたりまえ”とのギャップをなくす 開発言語とフレームワーク選定 ◦選定理由 自然な画面遷移とは ◦画面遷移のメカニズムと工夫 ローカライズに関して ◦リソース管理と運用 22ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  23. 23. ローカライズリソース管理と運用 マスターデータはExcelで管理 ◦ 外部ベンダーとのやり取りに実績があるフォーマット ◦ Excel → i18next 用 json を生成するスクリプトを用意 "pattern": { "save": { "title": "SAVE", “description”: “名前をつけて保存", "unavailable": "{{param}}は使用できません。", "unavailableCharacter": "使用できない文字が含まれています。", "limitString": "{{numOfString}}文字以内で入力してください。" }, }, ローカライズは運用まで含めて最初に決めておくことが大事 23ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  24. 24. 妥協なき商品力の追及 ユーザーインターフェイス実現のために ◦基本の UI コンポーネント 非同期処理との向き合い方 ◦保守まで見据えた実装方針 24ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  25. 25. 妥協なき商品力の追及 ユーザーインターフェイス実現のために ◦基本の UI コンポーネント 非同期処理との向き合い方 ◦保守まで見据えた実装方針 25ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  26. 26. 商用アプリのユーザーインターフェイス アプリの差別化が図れるメイン画面 26ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  27. 27. 商用アプリのユーザーインターフェイス プラットフォームガイドラインに準拠した画面 27ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  28. 28. プラットフォームテイスト対応 jQuery Mobile の UI の骨組みを作る CSS に加え Android Material Design, iOS System Design に対応したCSSを適用 本当に力を入れたい差別化 UI に集中できる 28ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  29. 29. CSSには無茶が効く? Modernizr のようなアプローチで実現 https://modernizr.com/ <!DOCTYPE html> <html class=“platform-android”> : </html> .platform-android .ui-radio .ui-btn:after { border-color: green; } <!DOCTYPE html> <html class=“platform-ios”> : </html> .platform-ios .ui-radio .ui-btn:after { border-color: white; } 起動に時間がかかるAndroid の場合でも 処理のうちの 2% ほど 29ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  30. 30. 妥協なき商品力の追及 ユーザーインターフェイス実現のために ◦基本の UI コンポーネント 非同期処理との向き合い方 ◦保守まで見据えた実装方針 30ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  31. 31. はじめてハイブリッドアプリを書いた時の思い出 JavaScript では1度非同期処理をはさむと 同期処理には戻れない! sleep() WaitForSingleObject() ところが非同期処理を使う機会は意外に多い ◦ Network 処理 (XmlHttpRequest) ◦ Cordova の Native  JavaScript の bridge 界面 キミ達も for 文の中に非同期処理が入り込んでしまい、 慌てたことがあることを私は知っている。 31ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  32. 32. Promise オブジェクト 非同期処理はコールバック地獄を避けるため Promise オブジェクトなどを導入するのが一般的 ◦ ES6 Promise, Q.js, jQueryPromise, e.t.c function procPipeline(): JQueryPromise<SomeData> { let df = $.Deferred(); async1() .then(() => { return async2(); }) .done(() => { df.resolve({ somedata: "hoge" }); }) .fail((error) => { df.reject(error); }); return df.promise(); } 32ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  33. 33. View A 約束を破りたいときもある 現実問題として非同期処理は クライアントの都合でキャンセルできる必要がある View BView A ■ごとにリクエストを発行 するようなシチュエーション 画面が切り替わるため、 リクエストをキャンセルしたい しかし DOM を削除したとしても… リクエストはキャンセルされず、 実行され続ける 33ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  34. 34. ためしに約束を破れるようにしてみたら処理が統一できてワロタ abort() を追加するファクトリメソッド ◦ jQueryXHR 互換 任意のタイミングで abort()可 ◦ reject() が発火 さらに管理オブジェクトを導入 ◦ 同時に複数の非同期処理を行う場合 画面遷移時に非同期処理を中止可能に ◦ 管理オブジェクトの cancel() を呼ぶと配下 の abort() 呼び出す。 function async(): IPromise<SomeData> { let df = $.Deferred(); let promise = makePromise(df); : return promise; } let promise = async(); setTimeout(() => { promise.abort(); }); let manager = new PromiseManager(); manager.add(async1()); manager.add(async2()); manager.cancel(); 実際にはパイプライン処理内で複数の Promise を連鎖でき、もう少しだけ高機能 34ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  35. 35. 元PCアプリ屋が考えたアプリ開発の大方針 独特な案件に対応しやすいフレームワーク 画面遷移対応 ローカライズ運用 基本 UI コンポーネント対応 統一された非同期処理 35ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  36. 36. 現場で役立つ小技集 引き出しの数が多ければ、百戦危うからず 36ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  37. 37. 本日のレシピ ネイティブ連携どうしてる? スタブは開発を救う 37ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  38. 38. ネイティブ連携に Cordova Plugin 化は必須なの? 通常 Cordova では JavaScript  Native 連携に プラグイン化が必要 Plugin.xml JS impl Native impl Cordova Plugin $ cordova plugin add <cordova-plugin-id> + コレってコストが高く感じられること、ありませんか? ネイティブのSDKを一発 叩きたいだけなのに.. この機能、このアプリで しか使わないよ… 名前つけんの超メンドクセー アレっ? そもそも Plugin.xml って どう書くんだっけ? 38ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  39. 39. そんなあなたに cordova-plugin-cdp-nativebridge https://github.com/sony/cordova-plugin-cdp-nativebridge この汎用の Native Bridge Plugin を導入すれば、 クラス定義を JavaScript レイヤと Native レイヤで行うだけで、 対応するメソッドが反応するようになるゾ!! NativeBridge.Gate SomeFeature + coolMethod .ts(.js) NativeBridge.Gate SomeFeature + coolMethod .java NativeBridge.Gate SomeFeature + coolMethod .m // インスタンスを作成 var native = new SomeFeature(); // メソッド呼び出し native.coolMethod(1, false, "test", { ok: true }) .done((result: CDP.NativeBridge.IResult) => { // 成功 }) .fail((error: CDP.NativeBridge.IResult) => { // 失敗 }); 39ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  40. 40. スマートフォン内の画像一覧の作成 こんなところに使いました DateTime Picker のフォーカス解除イベント取得 ステータスバーテキストカラーの変更 いつでもネイティブを呼び出せるという安心感が違います 40ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  41. 41. 開発者の本音 実機デバッグは大切だ! なぜなら真実はいつもそこにあるから UI がうまく動いているか確認するために、 JavaScript 側のビジネスロジック通したいだけなんだよね。 ネイティブ機能をチェックしたいわけじゃないし。 …っていうかハードウェアまだ手元に無いし。 そもそもオレ、Mac のキーボードまだあんまし慣れてないし… 建前です 実機デバッグは大切だ! なぜなら真実はいつもそこにあるから 41ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  42. 42. できるだけ PC 開発で引っ張れるようにする スタブ実装と切り替え UI という裏口を準備しよう ◦ 外部システムとの界面 ◦ プラットフォームの差異界面 ※ ほとんどのcordova plugin は browser プラットフォーム非対応 JavaScriptの柔軟性を活用しよう ◦ prototype を上書きしちゃえばいいじゃない ◦ TypeScript でも any キャストで private メソッドを呼び出せる ユースケースであればブラウザで確認可能に ただし、商品コードには影響がでないように注意しよう 42ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  43. 43. 通信簿 簡単なメトリクスの紹介 43ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  44. 44. コードメトリクス LOC ◦TypeScript: 23,160 ◦SASS(SCSS): 6,027 ◦HTML (template): 1,072 ※OSS およびスタブコードを除く GitHub トレンド ※リポジトリには OSS を含んでいる 44 今回利用した OSS 34 種類 ・Cordova Plugin: 16 ・JavaScript Library: 18 ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  45. 45. Halstead complexity measures https://en.wikipedia.org/wiki/Halstead_complexity_measures plato https://github.com/es-analysis/plato を用いて数値化 LOC (SLOC, LLOC) プログラムの規模 functions ファイルあたりの関数の数 maintainability 保守容易性指数 0 ~ 100 であらわされ、高いほどよい deliveredBugs ファイル単位あたりのバグ発生量の見積もり. 低いほどよい difficulty 理解性, プログラムの書きやすさの指数. 低いほどよい 45ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  46. 46. 機能別 LLOC 機能別の規模がわかる 46ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  47. 47. 機能モジュールごとの OSS との比較 47ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  48. 48. まとめ まとめと所感 48ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部
  49. 49. 商用ハイブリッドアプリ開発は キチンと準備して臨めば結果はついてくる ◦ ネイティブアプリ開発とのギャップの解消 ◦ 商品力向上のためにどのような対策が必要か 一昔前とは状況が異なり、技術面で詰まったことはほとんどなかった ◦ マルチプラットフォーム対応するなら十分に選択肢のひとつになる コンシューマー向けアプリ開発はソフトウェアエンジニアにとって花形だ と思っています。 もし皆さんにも機会があるとき、ここで紹介させていただいた情報が少し でもお役に立てば幸いです。 49ソニーネットワークコミュニケーションズ (株) クラウド&サービスアプリ開発運用部門1部

×