第6回Apache Cordova勉強会 に参加してきました

Cordova/PhoneGap、Monaca向けの勉強会が、2015年6月19日（金）飯田橋のIIJ本社 セミナールームにて開催されました。
毎回盛況なユーザ会も今回で6回目となりました。それでは、レポートいってみます。

 

セッション1: AngularJS入門

 


AngularJS超入門

 

まずは、AngularJSの超入門。ちょっと時間が押していたため早足でしたが、一通りの作成方法がプレゼンされました。

 


AngularJS超入門

 

発表者: アシアル 岡本さん

 

超入門というわりには、とくにディレクティブの説明とその利用方法について、バージョンの違いなどが詳しく説明されました。そして最後に、TODOアプリの紹介で締めくくられました。

 

ざっくりでしたが、AngularJSのcontrollerやFactoryからの、フロントエンドへのバインディング機能は、わずかなコーディング量で実現できるのは素晴らしいと改めて感じさせてくれるプレゼンでした。

 

セッション2: Cordovaプラグイン開発ライブコーディング

 

続いて、Cordova女子の登場です。

 


Animate.cssデモ

 

壇上は一気に、女子モード全開…プレゼン資料が一面ピンク色でした。

 

NTTコムウェア 佐藤玲奈さん(右)・古澤麻衣子さん(左)

 

Crosswalkについて

 

古澤さんによる、AndroidにおけるWebviewの描画機能の差異を埋めるための、ViewクライアントCrosswalkの紹介です。

 


NTTコムウェア 古澤さん

 

発表者：NTTコムウェア 古澤さん

 

Cordova5.0からプラグイン化され、より簡単に利用出来るようになりました。Android OSバージョンによる表示がうまく統一できないなどで悩むまえに、Crosswalkを利用してみる方が良いかと思います。

 

楽しいプラグインの基本的な作り方

 

佐藤さんによる、「プラグイン開発」についての説明です。

 


NTTコムウェア 佐藤さん

 

発表者：NTTコムウェア 佐藤さん

 

「プラグインってなに？」という説明から、プラグインを通して、Native機能を実際に利用するところまでを説明されました。丁寧ではありましたが、次回はライブコーディングにチャレンジして貰いたいです！

 

セッション3: Cordova Plugin をもっと簡単に！

 

続いて、Cordova Pluginのひな形生成ツールの紹介です。

 


Sony 関さん

 

発表者：ソニー 関さん

 

Plugmanというツールはあるけれど。。。

 

Plugmanとは、Corodva Pluginのひな形を作ってくれる、コマンドラインツールです。簡単にできるとは言え、問題点も多く、「引数が多く長い」「正しく引数の順序を守らないと動かない」などを抱えているそうです。そこで、YeomanによるCordova Plugin generatorを作ってみたということです。

 

Plugin開発において、ひな形だけならば、そんなに必要性を感じていませんでしたが、Jasminのテストケースも吐き出してくれると言うことで、興味深い内容でした。

 

Contribution 歓迎ということですので、興味のある方は是非。

 

紹介したプラグインのライブコーディング・・・

 

残念ながら、エラー・・・でした。

 

資料紹介

 

GitHub: generator-cordova-plugin-devbed

 

こちらのページに今回の資料が上がっていますので、ご参考まで。

 

第６回Cordova勉強会： Cordova plugin をもっと簡単に

 

その他： ライトニングトークと与太話

 

最後はライトニングトークでした。実際に開発された方の、生の声が聞けました。

 

その１「Cordovaで作ったSNSアプリ紹介」

 

実際に開発をしてみた感想などが中心となりました。こちらの所感は非常に参考になると思います。

 


池尻野　雄介（インフォコム株式会社）さん

 

ライトニングトーク： 池尻野　雄介さん（インフォコム株式会社）

 

ハイブリッドアプリを選んだ理由

 

  • タイムライン機能のネイティブ化の課題。
  • jQuery Movileだとパフォーマンスチューニングが必須。
  • ClickイベントはFastClickを利用したりしてパフォーマンスを上げた。
  • ハイブリッドアプリ向けにチューニングされたOnsenUIが利用できる。
  • OnsenUI+AngularJSでの実装。

 

OnsenUIをつかってみての感想

 

  • ネイティブアプリに遜色ない動き。
  • iOSのフラットデザインがベースになっていて、デザインに時間がとられない。
  • AngularJSベースなのでjQueryに比べて保守性が上がる。

 

Cordovaでハマったところ

 

  • Android
  • OS4.4.4で画像ファイルのアップロードが出来ない。
  • Cameraプラグインが古い事が原因。
  • Cordovaプラグインのバージョンアップは実施した方が良い。
  • iOS
  • ソフトウェアキーボードの挙動が怪しい。
  • ナビゲーションバーのヘッダが追随せず。結局自前で作成。
  • ionic kyebardプラグインを使うと良いらしい。

 

所感

 

  • ハイブリッドで作る決断は正しかった。
  • 業務用なら出来ないことは、ほぼ無い。
  • よほど凝ったUI、ゲームアプリじゃなければ問題無い。

 

その２「CordovaとElectron（Atom Shell）の同じところ・違うところ」

 


田中　正裕さん

 

ライトニングトーク：田中 正裕さん

 

ELECTRONの紹介です。

 

ELECTRONとは

 

もともとは「Atom Shell」と呼ばれていた物ということです。GitHub製のエディタ「ATOM」でも有名です。Node.jsを利用した、ハイブリット実行環境で、GitHubにてオープンソースとして公開されています。他に、ELECTRONの構造やELECTRONとCordovaの違いなどが紹介されました。

 

アプリケーション開発事例

 

  • Atom Editor
  • Slack App
  • Visual Studio Code

 

DEMO

 

Monacaの基板の元になったコードも紹介されました。

 

GitHub https://github.com/masahirotanaka/calculator

 

まとめ

 

今回は入門向けの発表が多かったですが、それだけCordova、Monacaのユーザ層が広がってきたと言うことでしょう。

 

初めてのツールなどで開発を行うときは、先人のベストプラクティスを聞いてしまうのが一番の近道です。こういった入門向けの勉強会は、ますます広がりを見せてくれる事でしょう。

 

これからさらに、活躍の場を広げそうなハイブリッド開発ですが、何事も基礎が大事だとおもった勉強会でした。

 

勉強会の様子