読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

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

昨日は、Apache Cordova(旧PhoneGap)+ SPA の勉強会でした。

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


タイトル

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




主催

日本Cordovaユーザー会

スポンサー

アシアル株式会社

会場

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

会場提供:株式会社IIJ

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のバグが激しい。。
  • ネイティブの機能を使わなくても、アプリ化するメリットは大きい(ユーザの流入導線の獲得とか)