チームBLUECODEの開発ブログ

開発の中で生まれたtipsを共有していきます。

ハイブリッドアプリ開発プラットフォームMonacaって実際どうなの??

どうもはじめまして、BLUECODEのいーちゃんです。

 

ハイブリッドアプリ開発プラットフォームを謳うMonacaって実際どうなの??

っていう人向けに特に自分達が使う前に気になっていた点について書いてみたいと思います。

 

・本当に使いやすい?
・公式サイトでは夢のようなツールに書かれてるけど問題はないの?


っていうあたりですね。

[Monacaを実際に使ってみて]

・開発が簡単って書いてるけどホント?

これは本当です。

僕はおかも、ひーくんと違い、組み込みメインの会社で働いているため、こういったアプリ開発の開発にそもそも疎かったんですがそれでも多様かつ十分な機能を実現できます。

具体的には各画面遷移非同期通信による動的コンテンツの生成画面デザイン、が特に作りやすいと感じました。

[画面遷移] 

こんな感じでクリックイベントと合わせて引数付きで実現できます。

f:id:team-bluecode:20170628024602p:plain
これでこのタグを押せばxxx.htmlに引数つきで遷移できます。
非常に直感的ですね。

[非同期通信による動的コンテンツの表示]

これもOnsenUIのonsタグとAngularJSのディレクティブという機能を使うことで容易に実現できます。

[hoge.html] 動的コンテンツ表示するをhtml

f:id:team-bluecode:20170628024919p:plain

[fuga.js] 非同期処理のコールバックを処理するjs

f:id:team-bluecode:20170628025033p:plain 

非同期通信のコールバックで渡ってきた値をhtml側で指定している変数(ここではCommentList)に格納し、$apply()を呼んであげれば、即座に新しいDOMが生成され画面が動的に生成されます。


※ 少し込み入った話ですが自分たちが詰まった点なので補足しておきます。非同期処理のコールバックで$scope内の変数に値を格納した場合、$scope.$apply()を呼ばないと結果が反映されません!

[画面デザイン]

これはこんな便利なデザインパターンが容易されています。
http://components.onsen.io/patterns

ですので僕のようなほぼHTMLとCSSの経験がない人間でもなんとかなります。

 

・ハイブリッドアプリって重くない?

特に重さを感じたことはありません。体感としては想像より早いくらいです。
高度な3D処理でもしない限りまず問題ないです。

スタンドアローン型アプリなら全く問題ないでしょう。

 

・ハイブリッド型っていうけど本当にiOS/Android対応できる?

これは9割本当です。使用デバイスが違う開発者達でもほぼ問題なく開発できます。

残りの1割は正直デバイス間の埋めがたい溝です。
例えばAndroidの戻るボタン押下時の処理などはAndroid用の対応が必要です。
あとcssの指定でAndroidでは問題ないのにiPhoneだと表示が異なる、、なんてことも若干あります。
が、若干です。

 

・開発に詰まった時困らない?

Monaca公式サイト、個人ブログ、teratail、stack overflowなど、リファレンスやQA情報は豊富に存在します。

このブログもその一助となることを目指して更新していきます。

 

・作ってて面白い?

Yes!

 


唐突ですが僕はiPhoneユーザーです。

そして開発者他二人はAndroidユーザーです。

 

これだけでアプリを作るにあたり、結構困ったちゃんだったわけですが、民主主義宜しく数の暴力でAndroidに移行せずにAndroidユーザーと共存の道を歩むことができたのは偏にMonacaのおかげでした。

 

いーちゃん

「長い間、くそお世話になりました」「このご恩は一生忘れません」ドンッ


オーナーMonaca

「カゼひくなよ」

 

ということでこれからもYourshelfを継続して開発していきます。


Yourshelfは現在Android版しかリリースしていませんが、近いうちにiPhone版も公開予定ですので、何卒宜しくお願い致します。