「Monacaユーザーにとって役立つ情報をシェアする場所」をコンセプトとして活動しているユーザーグループ、それがMonaca UGです。「Monacaを使ったアプリの事例が知りたい！」「Monacaを使うべき時と、ネイティブで開発すべき時ってみんなどうやって判断してる？」「開発体制ってどんな感じ？」など、様々な疑問をMonaca UGで解消したいと考えています。
10月03日にサイボウズ社にてMonaca UG TOKYO #2が開催されました。こちらはそのレポートになります。なお、当日の様子はMonaca UG #2 ~集まれMonaca ユーザー! ~ - Togetterまとめにもまとまっています。
LT×3本＋メインセッション
今回は最初にLTを3つ、その後メインセッションという構成になっています。まず最初は「Monaca × Squareでキオスクアプリを作る」と題してMOONGIFTの中津川さんがお話されました。二つ目は岡崎さんによる「Monacaで作るMESHタグ利用アプリ」、三つ目はJMASの田中さんによる「ド素人がMonacaとニフクラ mobile backendを使う」です。
Monaca × Squareでキオスクアプリを作る
中津川さん：
キオスクというのは皆さん一度は目にしたことがあるかと思います。日本では駅中や駅前にある売店のことです。海外でも同じように道ばたにお店があります。雑誌やお菓子、飲み物など細々としたものを売っています。そこで使われるようなアプリがキオスクアプリと呼ばれます。
もう一つこのLTでキーワードになるのがSquareです。SquareというのはiOS/Androidアプリでクレジットカード決済を可能にするレジアプリになります。専用のカードリーダーがあり、イヤホンジャックに接続してカード決済ができます。
今回はキオスクアプリをMonacaで作りつつ、その決済をSquareで行うというデモアプリの紹介です。なお、Androidでは解決していない問題があり、今回はiOSのみの実装となっています。
SquareレジというアプリとMonacaアプリを連携させる場合、2つのプラグインが必要になります。一つ目はCustom-URL-schemeです。これはMonacaアプリにカスタムURLスキーマを実現するものです。もう一つはcordova-plugin-queries-schemesです。最近ではiOSのセキュリティが厳しくなり、アプリから呼び出せる外部アプリに制限が設けられています。このプラグインを使うことで呼び出せる外部アプリを指定できるようになります。
カスタムURLスキーマが決まっていれば、データパラメータをつけてSquareのレジアプリが呼び出せます。そして決済を行った上でMonacaアプリがコールバックされます。この仕組みはMonacaアプリに限らず使えるのではないでしょうか。
MonacaとSquareのAPIで簡単に作るキオスクアプリ！ #monaca_ug #spjp pic.twitter.com/wiKoOlbxOd
— Kayoko🇯🇵CMXSummit (@kayoko_coco) October 3, 2017
Squareではこれ以外にも多くのAPIを提供していますのでぜひMonacaアプリと組み合わせてみてください。
Monacaで作るMESHタグ利用アプリ
岡崎さんはフリーランスでエンジニアをされる一方、幾つかの大学でMonacaを使ったプログラミング教育を実施されているそうです。理系の方でなくともMonacaを使うと楽しくプログラミングを学んでくれているとのことです。
岡崎さん：
LTのタイトルにもあるMESHはソニーが開発したブロック型の小さなデバイスになります。一個ずつがタグと呼ばれ、それぞれのタグがボタンやLED、傾きセンサー、人感センサー、湿度温度、GPIOなど様々な機能を持っています。アプリを使ってセンサーの動きをコントロールできるようになっています。さらにマイクやカメラタグと言ったスマートフォン側の機能を使ったソフトウェアタグと呼ばれる仕組みもあります。LyftやGmailなど外部サービスとの連携も可能です。
そのMESHとMonacaアプリを連携させて、ボタンタグを押したらアプリ側で検知したり、逆にアプリ側でボタンを押したらLEDタグが光ったりすると面白いよね、というのがそもそもの発想です。これは一例ですが、クイズに対して○×それぞれのボタンタグがあり、押すと正誤が分かるというアプリを開発したので紹介します。
実装部についてですが、MESHタグはBluetoothでMESHアプリとつながっています。その部分の実装は技術力も時間もかかるということで、今回はニフクラ mobile backend（以下NCMB)を使ってデータ連係を行っています。MESHのSDKにはAjaxも含まれるので、それを使ってNCMBに直接データを保存する予定だったのですが、NCMBのSDKはサイズが大きすぎて小さなMESHデバイスで動かすにはメモリが足らず、急遽別途サーバを立てて、そのサーバ経由でMESHにデータを保存することになりました。
今後の予定としてMESH SDKからNCMBに直接アクセスできるようにして、独立したアプリに仕上げたいと考えています。名前はすでに決まっておりME→MOとなっています。さらに本来であればBluetoothで直接通信したいと考えていたところ、先日MESHからRaspberry Piにインストールするハブアプリがリリースされました。これを使うとスマートフォンアプリの代わりにRaspberry Piが使えるようになります。この辺りも今後視野に入れていきたいと考えています。
ド素人がMonacaとニフクラ mobile backendを使う
JMASの田中さんから上記タイトルで発表がありましたが、内容はユーザ会でのみ共有されるものになりました。こうした裏話的な内容が聞けるのもオフラインならでは、参加者限定というのがポイントですね。
メインセッション：2年間Monacaで自社サービスを運用して学んだこと全部言います
そして休憩を挟んでのメインセッションは、ニジボックスの藤原さんより「2年間Monacaで自社サービスを運用して学んだこと全部言います」と題して行われました。
藤原さん：
今回はレシポというサービスについて話させてもらいます。リリースは3年前で、その1年後にMonacaアプリ版をリリースしています。レシポはレシートを写真で撮影してアップロードすると自動的にポイントになってキャッシュバックされるサービスになります。中には100%に近い還元率のものや、飲み物なんでも5ポイントといった商品もあります。
最初はWebサービス版としてリリースしたのですが、その中のよく使われる機能だけをスマートフォンアプリ版としてリリースしました。そしてサーバサイドエンジニアの隙間時間を使ってREST APIを実装しておいたり、ドキュメントをSwagger（OpenAPI Specification）で管理できるようにもしました。
Monacaアプリを作った印象ですが、まずデバッガーが非常に便利でした。開発者以外も集まる会議の場において、みんなデバッガーを立ち上げておいて開発者がリアルタイムにUIや動作を変えて確認すると言ったことがよく行われていました。そうしたスピード感もあって、2週間程度でアプリを開発できました。
二週間で実案件リリースしたとき、デバッガー大活躍。フィードバックをもらってその場で調整してまたフィードバック！おさわり会… #monaca_ug pic.twitter.com/czc3YL0hQO
— Kayoko🇯🇵CMXSummit (@kayoko_coco) October 3, 2017
最初はクラウドIDEを使い、Onsen UI+jQueryの組み合わせで行っていました。コーディングルールというほどではないですが、ons-pageタグごとにHTML/JavaScript/CSSを1ファイルずつに分割管理していました。これは独立性のためだったのですが、開発が進んでくと分割しておいて良かったと感じられました。後から入ってきた人にも分かりやすし、他に影響を与えないという安心感があります。MonacaアプリはJavaScriptライブラリがどんどん追加できるのでWeb開発のノリでアプリ開発を行えるのがメリットです。また、Google ChromeのDevToolsが使えるので開発が容易でした。
サーバが落ちてもアプリならもう一度アクセスしてくれる
リリース後に行ったこととして、まずクラウドIDEはやめてLocalkitに移行しました。それに伴い、ソースコードはGitで管理するようにしました。今はクラウドIDEにもGitHub連携があるのですが、当時はなかったので…。後はVagrantを利用してバックグラウンドAPIをローカルでも使えるようにし、個人の環境だけで開発が進められるようにしています。アプリの分析もしたかったので、レシポではGoogle Analyticsを使ってイベントのトラッキングを行っています。
ちょっと話がそれるんですが、レシポはありがたいことにテレビで何度か取り上げてもらっています。その結果として、取り上げられる度にサーバが落ちてしまっています…。しかし、アプリの場合、サーバが落ちた翌日でもユーザが増え続けます。その時はアプリが使えなくとも、インストールさえされていれば後日アプリを起動してくれているということです。これがWebサービスの場合、二度はアクセスしてくれません。これはアプリならではの利点ではないでしょうか。
その後、大きな改修がありました。元々機能を絞り込んでいたので、機能追加とデザインの変更を行いました。そのタイミングでフレームワークにAngularを採用しました。元々画面単位に分かれれていたJavaScriptはそのままコントロール化し、jQueryの部分をどんどん消していきました。ロジックなども分離し、その結果としてソースコードが綺麗になったと感じました。仕様の決定には様々な意見が出て揉めた一面もありましたが、移行自体はスムーズに完了しました。
アプリの内部構造、開発Tips
ディレクトリ構成は次のようになっています。
使っているJavaScriptライブラリは以下の通りです。特にこれが良い、という訳ではなくWeb開発のノリで必要なものを追加している形です。
設定ファイルは手動で切り替えていたのですが、開発サーバ向け設定のままストアにリリースしてしまったことがあります。これはとても焦りました。アプリを開いたらテストの文言が多数並んでいるので…。これはまだ解決法が見いだされておらず、アドホック時点できちんと確認するという進め方になっています。
現在はLocalkitをメインにしています。とは言えデザイナーなどはクラウドIDEを使っています。後はディレクターなどで、コードをささっと直したい方たちはクラウドIDEを使っています。Localkitではプレビューは殆ど使っておらず、転送ツールとして活用しています。最初、クラウドIDEだけで十分だと思っていたのですが、一度Localkitを使ってしまうともう手放せない存在になっています。
当社でLocalkit推しな理由として、テキストエディタが自由に選べるという点が挙げられます。Sublimeが多いですがWebStorm、Visual Studioなども使われています。タブやインデントなどの設定は共通にしつつ、各々好きなエディタで開発を行っています。
CIについても積極的に進めていてGit+Jenkins+MonacaCLI+DeployGateを使ったテストアプリ自動ビルド、自動配布 - Qiitaといった記事も書いています。これはGitのmasterにプッシュしたら関係者全員にアプリが配布される環境を構築する方法の解説となっています。
レシポで使っているCordovaプラグインは以下になります。ニフクラ mobile backendも使っています。
これらの中で、ピックアップして紹介したいのがReproになります。Reproはユーザの操作状況をムービーにとっておいてくれるサービスで、ユーザがどうスクロールしてどう迷って…といった情報が分かるようになります。サポートが充実していて、すごく助かっています。残念なのはCrosswalkが対象外という点でしょうか。
問題が起こることも…
後は広告系のSDKを幾つか試しているのですが、そうやって色々なSDKを追加していくと事件が起きてきます。例えばどうということのない修正でアプリがビルドできなくなったりします。これはCorodvaプラグインのアップデートが原因で、これ以降URLを指定してプラグインをインポートするのは止めています。必ずZipファイルまたは自分たちのリポジトリのURLを指定して、バージョンを固定できるようにしています。
SDKが入らない、アプリが落ちる、さらに他のSDKとの合わせ技で不具合が発生するというのはよくある問題です。これは plugin.xml のAndroidバージョン指定が問題というケースが多い印象があります。とは言えSDKやプラグイン周りの問題はまだ未解決なことも多く、バージョン番号を2桁から3桁に変えただけで動いたといったケースもあります。何度かは諦めたケースもあります。
Crosswalkについて。パフォーマンスについてはCrosswalkの方が良いと聞くのですが、端末によっては逆に遅くなっているというケースもあるようです。ただブラウザが共通化されるのでAPIが端末依存しなくなるのは大きなメリットです。その代わりアプリのバイナリサイズが大きくなってしまうのが難点です。
私たちが確認している限りではアプリ内ブラウザの挙動についてはCrosswalkは怪しい気がします。セッション周りの動作が特に怪しいです。Cordovaのバージョンを上げたタイミングなどで動作が変わったりもするので、まだ結論は出ていません。
運用についてのTipsです。最初はAjaxでテキストを取得して表示していたのですが、その内HTMLを直接サーバから送る方が楽になりました。審査を待つ必要もなくなるので、これからアプリを作る際には迷ったらHTMLをサーバから受け取れる形にしておくのがお勧めです。やり過ぎるとサーバからビューを送ることになってしまいますので、検討は必要ですが…。この辺りの小回りが利くのもMonacaアプリの良さなのかなと思います。
今後はAppiumを使ってUIテストを自動化したいと考えています。
当社にとってのMonacaは見積もり時の有力な選択肢になっています。Webブラウザ向けが一番安く、次にMonaca、そして一番高いのがネイティブとなっています。そうした中でMonacaを選んでもらえるケースが多く、レシポ以外の案件もこなしています。私自身はアプリよりはWebとかJavaScriptが好きなので、また開発トレンドがWebに戻ってくることを信じてMonacaでJavaScriptをガシガシ書いています。
この後、アシアル社から開発者向けアンケートの途中結果が発表されました。こちらは間もなくちゃんとしたアンケート結果が出るはずです。
最後に懇親会が行われました。多くの方に残っていただき、Monacaに関する悩みや最近の案件の話などで盛り上がっていました。
Monaca UG OSAKA始動！
次回は、ついに東京に続いて大阪でもUGが立ち上がることになりました。11月17日に大阪のバルテス社にて行われます。また、東京は11月27日に第3回目が渋谷にて行われます。ぜひご参加ください！
イベントの案内はMonaca UG - connpassにて行っています。気になる方はぜひメンバーになってください。また、Monaca UGはFacebookグループもあります。Monaca UGに興味がある方はぜひご参加ください！