akiyoko blog

akiyoko の IT技術系ブログです

トップ > 勉強会 > 「第2回 Apache Cordova 勉強会」に参加してきました

「第2回 Apache Cordova 勉強会」に参加してきました

勉強会 Cordova PhoneGap JavaScript AngularJS

昨日は、Apache Cordova（旧PhoneGap）＋ SPA の勉強会でした。

セッション3本とも、とても勉強になりました。


タイトル

第2回Apache Cordova勉強会 - 日本Cordovaユーザー会 | Doorkeeper　（2014.12.2）




主催

日本Cordovaユーザー会

スポンサー

アシアル株式会社

会場

東京都千代田区富士見2-10-2　飯田橋グラン・ブルーム
IIJ本社 セミナールーム

会場提供：株式会社IIJ

Twitterハッシュタグ

#cordovajp





CordovaでAngularJSアプリ開発

田中 正裕 氏（アシアル株式会社）



  • アシアルは Monaca, Onsen UI とかやってる
  • SPA(Single Page Application)とは？
    • Ajaxなどで画面を切り替えながら遷移
    • メリット
      • ユーザエクスペリエンスの向上（真っ白なページを無くす ＆ 画面切り替えの読み込み速度を速く）
  • SPAの例：
  • Backbone.js, Knockout.js, ext.js, ember, React, etc...
  • AngularJSの特徴
  • 学習リソース
    • AngularJS公式サイトの公式動画
    • ドットインストール
    • AngularJSリファレンス

AngularJSリファレンス

AngularJSリファレンス

  • Cordovaで使う AngularJS
  • ngCordova
    • Drifty社が中心となり開発（Ionic Frameworkの作者でもある）
    • Cordova APIをAngularJSモジュールとしてラッピングしたもの
    • より AngularJS風にAPIを呼び出すことができる
// ngCordovaをモジュールとして組み込み
angular.module("myapp", ["ngCordova"]);
  • 同様にして Onsen UI も組み込みできる
  • Onsen UI
    • UIコンポーネント用ライブラリ
    • Cordova向けモバイルUIライブラリ
    • ディレクティブでHTMLを記述
      • , , , 等
    • Master-Detail, スライディングメニュー、タブバー、スプリットビュー（レスポンシブ）等の機能を実装している
    • コンポーネント一覧は こちら
  • Cordova用の便利機能
    • 戻るボタンのカスタマイズ（「閉じてもいいですか？」）
    • プラットフォームや画面無機の判定
    • ソフトウェアキーボード対応
    • ジェスチャー（スワイプ、ドラッグ）の対応

Onsen UI と Ionic との機能差はほとんどないとのこと。（日本のユーザは日本語のドキュメント、海外ユーザはコミュニティの大きさを重視する傾向があるとか。）







　

Cordovaで開発したアプリ 『XZ（クローゼット）』 の制作事例をご紹介

吉田 紳一郎 氏（株式会社スタジオ･アルカナ）



  • XZ（クローゼット）って？
    • 女性向けのソーシャルクローゼットサービス（着回し解決コミュニティ）

  • なぜ Cordovaを採用？
    • アプリ開発に加えて Web版の開発も（iOS優先、Android版は後でリリース）
    • エンジニアやデザイナーのWeb系スキルを活かせる
    • 環境構築やビルドの手間が省ける
  • デメリット
  • アシアル久保田さんの本が役に立った
    • Amazon の評価がよい！！

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

  • インフラはAWS
    • プッシュ通知は SNS
  • nginx, Apache, PHP, PHP(Zend Framework), MySQL
    • 画像を小さくするのに、nginx の「Smalllight」使ってる
  • フロントエンド
    • Ionic（裏側でGPUをなるべく使うようにしていたり、ネイティブのようなサクサク感）
  • アプリっぽく見せるために
    • 背景がアニメーションしてる（CSSアニメーション）
  • Cordovaが重いときは・・・（苦労話）
  • 1. 巨大なリストのスクロール
    • 「ng-repeat」ではなく、Ionic の「collection-repeat」を使う（見えなくなったDOMを裏で消してくれる）
  • 2. デザインに凝った画面（DOM構造が複雑）のスクロール
    • ブラウザのスクロールではなく、独自スクロール機能を使っているが、それが逆に重くなることもある
      • overflow-scroll=true 指定すると、通常ブラウザのスクロールに切り替えることができる
  • 3. Androidが重い
    • Android標準のWebViewはレンダリング性能が悪い
    • Crosswalk（Intelが推進）を使うと、Chromeくらいサクサク動く！
      • Android 4.0以降（でOKであれば、絶対に採用すべき！）
      • PCと繫いで Chromeの Webインスペクタも使える
      • アプリのサイズが20MBくらい増えてしまうのが少し難点か
  • まとめ
    • 動作がカクカクするときのチューニングは結構大変かも
    • サードパーティ製SDKの導入は大変
    • Web版は、Chromeであれば全く問題なし



　

smartFXにおけるApache Cordovaの活用について

森田 剛志 氏（株式会社みんかぶ）



Cordova の実装関連については、

を参照とのこと。

とかかな。


smartFX


  • SPAなので、検索エンジンに引っ掛からない。。
  • 普通の人には、SPAって何それ？状態なので、直帰されちゃう
  • バーチャルFXアプリを8月にリリース
  • Webアプリは Rails
  • 言語は CoffeeScript
  • Backbone.js, Socket.IO, CCChart, ios-imagefile-megapixel（キャンバスで画像を縮小できる）, Onsen UI
  • 注意点
    • UIがガイドラインに則っていないと Reject対称
    • Androidの場合、タイマー処理がバックグラウンドで有効なので、バッテリ消費が大変なことになったり
    • SPAではcookieが使い物にならなかったので（中身が変わらない）、LocalStorageを使った
      • ただし、クライアントのブラウザがシークレットモードだと LocalStorage がエラーになっちゃう。。
    • iOS6以上の iOS Simulator, Android 4.4以上の WebViewなら外部からデバッグ可能
    • 特に、Android 4.0は Canvasのバグが激しい。。
  • ネイティブの機能を使わなくても、アプリ化するメリットは大きい（ユーザの流入導線の獲得とか）