UGで解消したいと考えています。#2が開催されました。こちらはそのレポートになります。Togetterまとめにもまとまっています。LT×3本+メインセッション今回は最初にLTを3つ、その後メインセッションという構成になっています。Squareでキオスクアプリを作る」と題してMOONGIFTの中津川さんがお話されました。backendを使う」です。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アプリに限らず使えるのではないでしょうか。2017Squareではこれ以外にも多くのAPIを提供していますのでぜひMonacaアプリと組み合わせてみてください。Monacaで作るMESHタグ利用アプリ岡崎さんはフリーランスでエンジニアをされる一方、幾つかの大学でMonacaを使ったプログラミング教育を実施されているそうです。理系の方でなくともMonacaを使うと楽しくプログラミングを学んでくれているとのことです。岡崎さん:LTのタイトルにもあるMESHはソニーが開発したブロック型の小さなデバイスになります。一個ずつがタグと呼ばれ、それぞれのタグがボタンやLED、傾きセンサー、人感センサー、湿度温度、GPIOなど様々な機能を持っています。アプリを使ってセンサーの動きをコントロールできるようになっています。マイクやカメラタグと言ったスマートフォン側の機能を使ったソフトウェアタグと呼ばれる仕組みもあります。LyftやGmailなど外部サービスとの連携も可能です。そのMESHとMonacaアプリを連携させて、ボタンタグを押したらアプリ側で検知したり、逆にアプリ側でボタンを押したらLEDタグが光ったりすると面白いよね、というのがそもそもの発想です。これは一例ですが、クイズに対して○×それぞれのボタンタグがあり、押すと正誤が分かるというアプリを開発したので紹介します。実装部についてですが、MESHタグはBluetoothでMESHアプリとつながっています。backend(以下NCMB)を使ってデータ連係を行っています。MESHのSDKにはAjaxも含まれるので、それを使ってNCMBに直接データを保存する予定だったのですが、NCMBのSDKはサイズが大きすぎて小さなMESHデバイスで動かすにはメモリが足らず、急遽別途サーバを立てて、そのサーバ経由でMESHにデータを保存することになりました。SDKからNCMBに直接アクセスできるようにして、独立したアプリに仕上げたいと考えています。名前はすでに決まっておりME→MOとなっています。Piにインストールするハブアプリがリリースされました。Piが使えるようになります。この辺りも今後視野に入れていきたいと考えています。backendを使うJMASの田中さんから上記タイトルで発表がありましたが、内容はユーザ会でのみ共有されるものになりました。した裏話的な内容が聞けるのもオフラインならでは、参加者限定というのがポイントですね。メインセッション:2年間Monacaで自社サービスを運用して学んだこと全部言いますそして休憩を挟んでのメインセッションは、ニジボックスの藤原さんより「2年間Monacaで自社サービスを運用して学んだこと全部言います」と題して行われました。藤原さん:今回はレシポというサービスについて話させてもらいます。リリースは3年前で、その1年後にMonacaアプリ版をリリースしています。レシポはレシートを写真で撮影してアップロードすると自動的にポイントになってキャッシュバックされるサービスになります。中には100%に近い還元率のものや、飲み物なんでも5ポイントといった商品もあります。レシート送ると超おトク。レシポ!最初はWebサービス版としてリリースしたのですが、その中のよく使われる機能だけをスマートフォンアプリ版としてリリースしました。Specification)で管理できるようにもしました。Monacaアプリを作った印象ですが、まずデバッガーが非常に便利でした。開発者以外も集まる会議の場において、みんなデバッガーを立ち上げておいて開発者がリアルタイムにUIや動作を変えて確認すると言ったことがよく行われていました。したスピード感もあって、2週間程度でアプリを開発できました。二週間で実案件リリースしたとき、デバッガー大活躍。UI+jQueryの組み合わせで行っていました。コーディングルールというほどではないですが、ons-pageタグごとにHTML/JavaScript/CSSを1ファイルずつに分割管理していました。これは独立性のためだったのですが、開発が進んでくと分割しておいて良かったと感じられました。後から入ってきた人にも分かりやすし、他に影響を与えないという安心感があります。MonacaアプリはJavaScriptライブラリがどんどん追加できるのでWeb開発のノリでアプリ開発を行えるのがメリットです。ChromeのDevToolsが使えるので開発が容易でした。サーバが落ちてもアプリならもう一度アクセスしてくれるリリース後に行ったこととして、まずクラウドIDEはやめてLocalkitに移行しました。それに伴い、ソースコードはGitで管理するようにしました。今はクラウドIDEにもGitHub連携があるのですが、当時はなかったので...。後はVagrantを利用してバックグラウンドAPIをローカルでも使えるようにし、個人の環境だけで開発が進められるようにしています。Analyticsを使ってイベントのトラッキングを行っています。話がそれるんですが、レシポはありがたいことにテレビで何度か取り上げてもらっています。その結果として、取り上げられる度にサーバが落ちてしまっています...。アプリの場合、サーバが落ちた翌日でもユーザが増え続けます。その時はアプリが使えなくとも、インストールさえされていれば後日アプリを起動してくれているということです。これがWebサービスの場合、二度はアクセスしてくれません。これはアプリならではの利点ではないでしょうか。その後、大きな改修がありました。機能を絞り込んでいたので、機能追加とデザインの変更を行いました。そのタイミングでフレームワークにAngularを採用しました。画面単位に分かれれていたJavaScriptはそのままコントロール化し、jQueryの部分をどんどん消していきました。ロジックなども分離し、その結果としてソースコードが綺麗になったと感じました。仕様の決定には様々な意見が出て揉めた一面もありましたが、移行自体はスムーズに完了しました。アプリの内部構造、開発Tipsディレクトリ構成は次のようになっています。使っているJavaScriptライブラリは以下の通りです。これが良い、という訳ではなくWeb開発のノリで必要なものを追加している形です。設定ファイルは手動で切り替えていたのですが、開発サーバ向け設定のままストアにリリースしてしまったことがあります。これはとても焦りました。アプリを開いたらテストの文言が多数並んでいるので...。これはまだ解決法が見いだされておらず、アドホック時点できちんと確認するという進め方になっています。現在はLocalkitをメインにしています。言えデザイナーなどはクラウドIDEを使っています。後はディレクターなどで、コードをささっと直したい方たちはクラウドIDEを使っています。Localkitではプレビューは殆ど使っておらず、転送ツールとして活用しています。最初、クラウドIDEだけで十分だと思っていたのですが、一度Localkitを使ってしまうともう手放せない存在になっています。当社でLocalkit推しな理由として、テキストエディタが自由に選べるという点が挙げられます。Studioなども使われています。タブやインデントなどの設定は共通にしつつ、各々好きなエディタで開発を行っています。Qiitaといった記事も書いています。これはGitのmasterにプッシュしたら関係者全員にアプリが配布される環境を構築する方法の解説となっています。レシポで使っているCordovaプラグインは以下になります。backendも使っています。これらの中で、ピックアップして紹介したいのがReproになります。Reproはユーザの操作状況をムービーにとっておいてくれるサービスで、ユーザがどうスクロールしてどう迷って...といった情報が分かるようになります。サポートが充実していて、すごく助かっています。残念なのはCrosswalkが対象外という点でしょうか。問題が起こることも...後は広告系のSDKを幾つか試しているのですが、そうやって色々なSDKを追加していくと事件が起きてきます。いうことのない修正でアプリがビルドできなくなったりします。これはCorodvaプラグインのアップデートが原因で、これ以降URLを指定してプラグインをインポートするのは止めています。Zipファイルまたは自分たちのリポジトリのURLを指定して、バージョンを固定できるようにしています。SDKが入らない、アプリが落ちる、さらに他のSDKとの合わせ技で不具合が発生するというのはよくある問題です。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に関する悩みや最近の案件の話などで盛り上がっていました。OSAKA始動!次回は、ついに東京に続いて大阪でもUGが立ち上がることになりました。11月17日に大阪のバルテス社にて行われます。東京は11月27日に第3回目が渋谷にて行われます。connpassにて行っています。気になる方はぜひメンバーになってください。UGはFacebookグループもあります。していること」を共有することで、MonacaユーザーがもっとMonacaを使いやすく、Monacaを好きになれる場所を目指しています。