アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

第7回Apache Cordova勉強会に行ってきました

11月16日、第7回Apache Cordova勉強会が日本マイクロソフト セミナールームにて行われました。今回はマイクロソフト Visual Studio Client Toolsチーム シニア・プログラム・マネージャー Ryan Salva氏が来日するのに合わせて実施されました。



最初はそのRyan Salva氏の発表でした。



エンタープライズ企業におけるCordovaソリューションの提供について



ガートナーの発表しているMagic Quadrant for Mobile Application Development Platformsからの引用としてグラフが提示されていました(via Mendix Named a Visionary in Gartner 2015 Magic Quadrant for Mobile Application Development Platforms)。





このグラフは左から右に行くほど完成度が高く、開発者にとって必要な機能が揃っているということになります。



上下はベンダーのビジョンの完成度を表しています。この上位(右上の四角の中)にある殆どの企業(全20社中9社)がCordovaソリューションを持っています。企業規模はもちろん、Cordovaの完成度が高いことも分かります。



そして別なデータとしてビジョンモバイルの調査によるとCordovaは他のマルチプラットフォーム技術に比べて2倍以上採用ケースが多いとのことです(via Cross-Platform Tools 2015 - VisionMobile





そしてハイブリッドアプリを使っているアプリ(一部でも)は代表例として次のようになっています。なお、これはCordovaを採用しているという意味ではありません。





このように数多くのアプリにおいてハイブリッドアプリ構成は行われています。



Cordovaに関する主な不満については以下のようになります。会場でもそれぞれ不満を感じている方がいらっしゃいました。



  1. ドキュメント
  2. コアプラグインでないものは品質が悪い
  3. バージョンが上がると動かない


なお、この解決手段としてコントリビュートしてくださいというのがRyan Salva氏の答えでした。Cordovaはオープンソース・ソフトウェアであり、不満に思う点があれば開発に参加できるのが大きなポイントです。



実際、Cordovaにコントリビュートしている主な企業は以下の通りです。





これらの企業に加えて多くの個人開発者も参加しています。そして参加の具合ですが、





という暗黙のルールがあります。そのためiOS9が発表されるとAdobe社のコミットが増え、MicrosoftWindows 10、そしてAndroidも最新版のOSに合わせた開発が行われるとのことです。それぞれ貢献時期は異なるものの、年間を通して同じくらいの貢献度であるというのが良い点とのことです。エンタープライズにおいてCordovaを使っていく上で、各企業がきちんとメンテナンスしてくれることで5年後、10年後の安心感につながるとのことです。



Cordovaのサイトに来るユーザ層は、



  • インド
  • アメリカ
  • ブラジル
  • 中国


が多く、日本からももっとアクセスして欲しいとのことです。Cordovaのダウンロード数は着実に伸びており、過去2年間で2倍に達しています。特にエンタープライズ分野で伸びています。



実際にCordovaで開発しているプラットフォームは、



  1. Android
  2. iOS
  3. Windows


という順番になっています。さらにすでに最新のCordova5が最も多く使われています。



Web技術を使えるとあって、多くのフレームワークが存在しますが、アプリの評価と比べると



  • Backbone 5.8
  • Zepto 5
  • Ionic 4.2
  • Dojo 4.1
  • Angular 3.8


といった順番になっています。jQuery Mobileなどは古いフレームワークであるために動作が重かったり、機能がモダンなプラットフォームに対応していないことが多いそうです。そのためフレームワークの種類に限らず、新しいフレームワークを採用しましょう。



今後のCordovaのロードマップですが、



  1. ドキュメント
  2. プラグインの品質システム
  3. バージョン統合
  4. ネイティブAPIサポートまでの期間短縮


といった順番で考えられているとのことです。



質疑応答では以下の質問が寄せられました。



Electronについてはどうか?



まだまだバギーではないか。CordovaとしてもElectronをサポートするかどうかという話は出たか、今は未定。



エンタープライズ・モバイルアプリにおけるハイブリッドアプリ開発



続いてジェーエムエーシステムズ 中居さんによる**エンタープライズ・モバイルアプリにおけるハイブリッドアプリ開発**の発表です。



スマートデバイスの業務利用増加しているとのことです。理由としては、



  1. セキュリティ懸念よりもビジネス競争力
  2. 単なる便利ツールから武器へと変化している
  3. モバイルアプリの寿命が長期化


昔はデバイスの契約が2年で切れるので、それまで使えれば良かった。今は5年くらいは使い続けられるシステムでないといけない。そこでハイブリッドアプリに注目が集まっている。



ジェーエムエーシステムズさんの開発手法については、



  • ネイティブアプリ
  • ハイブリット開発
  • Webアプリ


の3パターンをクライアントニーズによって使い分けている。iOSアプリのネイティブ開発案件が多いが、ハイブリッドアプリ開発も急激に増えている。数年前はパフォーマンスが悪かったり、一部の機種で動かないような不具合があったので一旦ハイブリッドアプリ開発は中断していた。



なぜハイブリッドアプリ開発が増えているか?理由としては下記が考えられる。





今はマルチデバイスが必須では内が、将来に備えているケース。ハイブリッドアプリはネイティブに劣らないレベルでハードウェアの性能が向上している。昔から一部はクロスプラットフォーム開発フレームワークがあったが、ホビーレベルだったが、今は品質が上がっている。また、Swift/Objective-Cエンジニアの数があまりに少ないため採用しづらい問題も。



ハイブリッドアプリフレームワークに求めるもの。



  • マルチデバイス対応がちゃんとしている
  • OSのバージョンアップ対応が速いかいなか
  • サポートの充実


ジェーエムエーシステムズ社ではMonacaIBM MobileFirst Platformを使っている。Cordovaを直接使わないのはサポートがあるから。



Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発



最後は慶應義塾大学 伊藤さんによるCordovaとセンサー、BLEモジュールを用いたIoTアプリ開発に関するプレゼンでした。



Cordovaはスピーディーに開発できるのが良い。自作アプリとしてはAppCubeなど。今回はセンサー × BLE × Cordovaを組み合わせて簡単なIoTを実現するデモです。



作ったのはWaterTrackerというアプリで、コップの下に圧力センサーを置いて、その値をスマートフォンに送信するもの。スマートフォン側はBLEで値を受け取り、コップの残量を可視化。Cordovaを使っているので簡単なJavaScriptのメソッドでできる。



WaterTrackerのソースコードはGitHub上にあります






エンタープライズ(対企業)においてハイブリッドアプリの需要が伸びているのはよく感じられる方が多いのではないでしょうか。スマートフォンは移動中にも使えるデバイスですし、タブレットは現場に持ち込んで作業するのに最適です。



Cordovaの性能が向上したことで、リッチなUI/UXや高速動作よりもまず素早く開発できて、かつマルチプラットフォームに提供できるハイブリッドアプリはますます需要が増しそうですね。

第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



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



第6回Cordova勉強会: Cordova plugin をもっと簡単に



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



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



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



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





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



ライトニングトーク: 池尻野 雄介さん(インフォコム株式会社)



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


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


OnsenUIをつかってみての感想


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


Cordovaでハマったところ


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


所感


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


その2「CordovaとElectron(Atom Shell)の同じところ・違うところ」





田中 正裕さん



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



ELECTRONの紹介です。



ELECTRONとは


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



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




DEMO


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



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



まとめ



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



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



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



勉強会の様子



Cordova勉強会 #4 に参加してきました

Cordova/PhoneGap、Monacaなどを使っている方向けのユーザ会、Cordovaユーザ会 #4が2月13日(金)、日本マイクロソフト セミナールームにて開催されました。レポートを書くまでが勉強会、ということで個人的な感想を含めてレポートを書きたいと思います。





Andre氏



まず最初はAdobe社のAndre Charland氏の発表でした。彼は元々PhoneGapを開発していたNitobi社の創設者で、Adobe社に買収された後は米PhoneGapチームマネージャーを勤めています。つまりPhoneGapのすべてを知っている人と言えます。



CordovaとPhoneGapの違いは度々話題にあがるのですが、こちらの資料が一番分かりやすいと思います。





Cordova/PhoneGap/PhoneGap Enterpriseの違い



CordovaはApache財団に寄贈されたオープンソース・ソフトウェアです。MicrosoftIBMGoogleSalesforceなど多くの企業が開発に参加しています。そのCordovaに対してAdobe社が便利なツールを追加したのがPhoneGapになります。ここまでは無料で使える範囲になります。



そしてAdobe社のビジネスモデルとしてPhoneGapに解析機能であったり、コンテンツ管理機能を追加したのがPhoneGap Enterpriseであり、こちらは有償のサービスになっています。



無料のPhoneGapツールについては主な機能は以下の通りになります。



  • Build
  • CLI
  • Desktop App
  • Develper App


PhoneGap Buildはクラウド上でPhoneGapアプリをビルドできるサービスとして知られています。



Cordovaで最も気にされるのがパフォーマンスだと思うのですが、最新のOS(iOS8、Android 5.0)では十分にパフォーマンスが上がってきているとのこと。この辺りは実際に開発されている方にしても納得できるかと思います。



そしてそもそもなぜPhoneGapを選択するのかという話なのですが、一番大きいのはシングルコードでマルチプラットフォームに提供できるのが大きいとのことです。iOS/Android/Windows Phoneなど多くのプラットフォームに対して単一のコードでアプリを提供できます。さらにHTML5/JavaScript/CSSで構築されていますのでWebサイトにも使えます。



パフォーマンスについては前述の通り、OSやハードウェアが高性能化しているのに加えてUIフレームワーク(Onsen UIやIonicなど)を使うことで高パフォーマンスなUIを実現できるようになっています。



Webアプリとの違いで言えばデバイスAPIにアクセスできる点が大きいでしょう。HTML5でも幾つかのAPIが使えますが、プッシュ通知やBluetooth、バックグラウンド処理などはネイティブアプリならではです。



また、あまり知られていませんがコンテンツをアプリストア(App StoreGoogle Playなど)を通さずに差し替えることもできます。これはA/Bテストなどで活躍する機能になるでしょう。その他、ネイティブアプリの中にCordova/PhoneGapを内包するという仕組みも可能です。これによりハイパフォーマンスが求められる部分はネイティブで、頻繁な変更が求められるところはWebViewで実装と分けることもできます。すべてCordova/PhoneGapまたはゼロという選択肢だけでないのは良さそうです。



Cordova/PhoneGapとネイティブを組み合わせたアプリは数多くあります。Instagram/Evernote/Amazon/Yelpなどでも使われているそうです。また、Basecamp(Ruby on Rails開発元)もかなりの部分がHTML5で実装されているとのことです。



気になる数字が色々と発表されました。





PhoneGapから見る数値



  • PhoneGap CLIのダウンロード回数 15万回
  • PhoneGap Buildのユーザ数 65万ユーザ
  • PhoneGap Buildを使ったアプリ 45万アプリ
  • PhoneGap Developer Appのダウンロード回数 8万回
  • PhoneGap Desktop Appのダウンロード回数 2.3万回
  • CordovaはNPMのダウンロードトップ


最後にPhoneGap Enterpriseについて。こちらは主にマーケティング担当者向けのサービスになるようです。ダッシュボードでステータスを確認したり、その使われ方を可視化しています。さらにアプリのアップデートもPhoneGap Enterpriseを通して簡単にできるようになっています。





PhoneGap Enterpriseの画面



最後に以下のような質問があがっていました。



Q. Adobeに移ったということで、AppleAndroidのWebViewに対する発言力は増したのかどうか



A. Cordovaはオープンソースでアリ、GoogleMicrosoftなどが加わったことで影響は増している。また、AppleAndroidに対する発言力も増しているといえる。



Q. 他のプラットフォーム(Xboxなど)への対応はあるのか



A. PhoneGap自体はモバイル対応がメインで他は今のところない。将来的には分からないが対応を考えたい。






続いてMicosoft社の物江さんによりVisual Studioを使用したCordova開発という発表です。





Visual Studioを使用したCordova開発



Visual StudioではHTML5/JavaScriptでアプリを開発できますが、ストアアプリ、Windows Phone、XBOXHTML5/JavaScriptからネイティブコードに変換される仕組みになっています。そしてCordova開発はVisual Studio Tools for Apache Cordovaというアプリをインストールすると可能になります。こちらはVisual Studio 2015から今後デフォルトで入ってくるそうです。





Visual Studio 2013とHTML5アプリ



現状はエミュレータApache Rippleなのですが、2015からはHyperVベースになるのでより本物に近い形でデバッグできるようになります。Visual Studio Tools for Apache CordovaはVisual Studio 2013 × Windows 8.1(Update 3からはWindows 7も)で動かすようです。





Visual Studio Tools for Apache Cordova



開発できるターゲットはAndroid 2.33または4以上、iOSは6以上が開発対象になります。ただしiOSAndroid 4.4未満ではデバッガーが動きません。Mac OSXを経由してiOS対応もできるようですが、ブレークポイントが使えなかったりするのでAndroid向けと考えるのが良さそうです。



Visual Studio Tools for Apache Cordovaを使う大きな利点として、開発環境を整えるのが簡単であるとのことです。Javaランタイムを含め、Android SDKをインストールしたり、Cordoavaの環境を整えたりするのがVisual Studioのアドインインストールだけで完結します。これは確かに便利そうです。また、HTML5関連の開発支援機能が使えるようになります。





Visual Studio Tools for Apache Cordovaを使うメリット



後は実際にVisual Studioを使って、どうやって開発を行っていくのかをデモされました。強力な入力補完機能であったり、省略した入力からHTMLタグを展開したりと記述量を抑えた開発ができるようになります。CordoavaプラグインのインストールもVisual Studioから選択して行えるようになっています。





プラグインのインストール



最後に以下のような質問があがっていました。



Q. Cordovaのプラグイン開発はできますか?



A. Androidはできます。iOS向けはできません。



Q. ExpressでCordova開発はできますか?



A. プラグインのインストールができないのでCommunity Editionを使ってください。



Q. Visual Studio以外の環境に移せますか?



A. ファイル構成は同じなのでフォルダを移動するだけでいけます。



Q. TypeScriptで使えますか?またはTypeScriptの方が効率的ということはありますか?



A. 使えます。実際のところ好みではないでしょうか。



Q. Cordovaのバージョンアップした場合の対応



A. 現状は入れ直しになります。将来的にはアップデートに対応予定。






最後に当社代表取締役の田中によるCordovaをWindowsで使うというセッションです。





CordovaをWindowsで使う



先ほどのVisual Studioで使う場合でも分かりますが、WindowsではiOS向けの開発においてかなり難があると言えます。それをどうにかして解決しようというセッションです。



アプリ開発には以下のようなプロセスがあると言えます。





これらのプロセスに対してWindowsでのAndroid開発は問題なく行えます。対してiOSでは困難です。この各プロセスに対する打開策は次のようになります。



開発/デバッグ



まだ若干難はあるものの、GapDebugを使うとiOSアプリのデバッグを行えるようになります。





GapDebug



ビルド



ビルドはMac OSX + Xcodeが必須とのことで残念です。





ビルドについて



代替手段としてはPhoneGap BuildやMonacaを使うといった手段があります。





ビルドの代替手段



リリース



リリースもまたMac OSX + Xcodeが必須とのことで残念です。



代替手段として代行サービスがあるのですが、iTunes Connectのメールアドレス/パスワードを教える必要があります。セキュリティ上のリスクが大きいと言わざるを得ない状態です。





リリースの代替手段



まとめとしてはiOSアプリの開発はWindowsだと色々と大変なことがつきまとうようです。ただしApp Storeへの申請を除けば、基本的にMacと同じことはできるようになっています。



最後に以下のような質問があがっていました。



Q. Windows + Androidで動けばiOSでも大丈夫?



A. 動くはずですが、社内的には色々愚痴を聞きます。






当日の様子は以下の動画で確認できます。





第4回Apache Cordova勉強会 - YouTube



WindowsiOS向けのCordovaアプリ開発は茨の道に見えますが、例えばMonacaシミュレータを使えば開発、デバッグ、ビルドまでWindows上だけで完結できます。GapDebugのような手段もありますので、今後Visual Studioの高機能化に期待といったところでしょうか。



Cordova勉強会は今後も行われますので参加しましたらまたレポート記事を書きたいと思います。

第1回symfony勉強会で発表してきました&資料公開します。

こんにちは、亀本です。

先日、4月9日に行われた第1回symfony勉強会で、アシアルのsymfony導入事例としてトレイン・トレインを紹介させていただきました。

人の前できちんとした形の発表を行うのは初めてだったので、緊張してしまってちゃんと伝え切れたか不安でしたが、下手な話しながらも皆さん真剣に聞いてくださって、苦手ながらもがんばった甲斐がありました><

以下に、発表に使用したスライドを公開しておきます。



勉強会は1回目からなかなかの盛り上がりで、懇親会でも多くの人と意見交換もでき、symfony需要の高まりを感じました。
これからも続けていきたいですね。

P.S.
会場提供および進行をしてくださった月宮さん並びに株式会社ディノのみなさん、ありがとうございました。