MonacaとOnsenUIのあるある小ネタ集

1. 2018年8月31日
探偵！Monacaスクープ
～Monaca&OnsenUIあるある小ネタ集～
バルテス・モバイルテクノロジー株式会社

2. 自己紹介
2
バルテス・モバイルテクノロジー
ってどんな会社？
https://www.valtes-mt.co.jp/
↑詳しくはググって下さい。 ↑

3. 自己紹介
6
名前：山下大輔
横浜生まれ、大阪育ち
https://www.facebook.com/longjumper.daisuke
気軽に友達申請して下さい。
家族構成：妻１人、子３人

4. 自己紹介
7
モナカレーと私

5. 自己紹介
8
あと
私は「モナカソムリエ」です。
日本に3人しかいません。
3人/20万人

6. 9
探偵！Monacaスクープ
このLTは、弊社Monaca開発
プロジェクトに携わったメンバーから
寄せられたご意見に基づいて、
MonacaソムリエがMonaca開発者
の為、公序良俗・安寧秩序を守るべく、
Monacaのあらゆる「あるある」を
徹底的に調査追及する、娯楽LTである。
探偵！Monacaスクープ

7. 10
Localkitあるある
探偵！Monacaスクープ

8. 11
アプリ設定画面でアイコンのアップロード
部分で画像ファイルをドラッグ&ドロップ
すると
画像が画面一面に表示され身動き取
れずに終了。
Localkitあるある

9. 12
Localkitでビルドして画面が閉じない。
Localkitあるある
ソース修正→画面閉じるでソースが巻
き戻ってしまう。
Git操作までしているとへこむので、閉じ
る時に同期するか聞いてほしい。

10. 13
Localkitがちょくちょくエラーを出す。
Localkitあるある
Localkit再起動で復活

11. 14
Localkitでポートが使用中で起動でき
ないことがある。
Localkitあるある
ポート番号を変えて再起動

12. 15
Localkitでビルド履歴から
Downloadに遷移すると他の画面に
遷移できなかったのが最近できるように
なった。
Localkitあるある
うれしい

13. 16
Monaca設計あるある
探偵！Monacaスクープ

14. 17
画面遷移を設計する事が重要
Monaca設計あるある
• 先に画面遷移とボタンイベントを作って動きを確認する。
–なるべくシンプル設計
• ナビゲーション→タブ→ナビゲーションの階層はダメ、過去
にそれやって詰んだ・・・
• 画面遷移を作ってからデザイナーにHTMLコーティングの
タスクを渡している
–クラス等を自由に作ってよい。
–但し、idは変えない。

15. 18
Idについて
Monaca設計あるある
•複数画面を作るとidが被るので、設計する
必要あり
–イベントが重なって、違う画面のイベントが
走ったりする

16. 19
ライフスタイルを理解する
Monaca設計あるある
• この考え方は必須
–Init
–Show
–Hide
–Destroy
• どこで該当の処理を入れるかを検討する必要あり

17. 20
Monaca開発あるある
探偵！Monacaスクープ

18. 21
Android端末で、画面下部にある入力
ボックスに文字を入力しようとすると、キー
ボードで入力ボックスが隠れてしまう。
Monaca開発あるある
とりあえず、Androidでは、入力する場合
、上部エリアを非表示する対応を実施

19. 22
Android端末で、Backキーを押下した
際、アプリが強制終了することが発生した。
Monaca開発あるある
Backキーの処理を自作した。

20. 23
iOS端末で、選択肢が0のselectボックス
をスライド（タップでも？）するとアプリが強
制終了した。
Monaca開発あるある
iOSではセンタリングされているのに、
Androidでは上寄せだったり。

21. 24
iOSとAndroidでデザインが微妙
に異なる。
Monaca開発あるある
無理やり空の選択肢を追加し、disable
にした。

22. 25
WebViewのバージョンが古いAndroid
端末では、アプリがエラーになる。
Monaca開発あるある
便利！

23. 26
Macなしでもだいたい開発出来る。
Monaca開発あるある
便利！けど意見雑っ！
だがしかし、コンソールログを見るに
はMacが必要でした。。。

24. 27
QRコードでiOSアプリをインストー
ルできる。
Monaca開発あるある
便利（凄い）！

25. 28
QRコードでインストールできる期
間が短い！
Monaca開発あるある
期限は1週間程度

26. 29
時間帯によってビルドに時間がか
かる
Monaca開発あるある
iOSは特に長い。
30分程度

27. 30
ビルドをキャンセルしたいけど、キャ
ンセルできない。
Monaca開発あるある
だって。

28. 31
エラー発生しても処理は止まるけど、
アプリは落ちない。
Monaca開発あるある
便利！

29. 32
Monacaで作成したキーストアをエ
クスポートしてから、再度、インポー
トしてビルドするとエラー。
Monaca開発あるある
Monacaの不具合では？？？ とりあ
えず、Javaのコマンドキーストアを作成
し対応。

30. 33
Monacaで作成したキーストアでビ
ルドしたアプリをインストールしようと
すると一部のAndroid端末にイン
ストールできなかった
Monaca開発あるある
原因不明。Javaコマンドで作成したら
解決した。

31. 34
Cordovaプラグインあるある
探偵！Monacaスクープ

32. 35
一部のCordovaのプラグインと
Monacaのデバッグのプラグインと競合
し、iOSでデバッグができなかった。
Cordovaプラグインあるある
chrome.sockets.tcp Plugin、
chrome.sockets.udp Plugin

33. 36
自作プラグイン作成時にSwiftのバー
ジョン指定が出来ないのでビルド出来
ない。
Cordovaプラグインあるある
Objective-Cで作った方がいい。
プラグイン自体はいっぱいあるので、探
して基本それを使ったほうが良い。

34. 37
プラグインを取り込んでから、プラグイン
のソースを修正できる。
Cordovaプラグインあるある
便利！

35. 38
OnsenUIあるある
探偵！Monacaスクープ

36. 39
Formタグはあまり使わない。
Cordovaプラグインあるある
実装が増えると、バグが増える。
AndroidはAndroidっぽいを求めてい
る顧客が少ない。

37. 40
おすすめタグ
Cordovaプラグインあるある
tab,spliter,onsepage,oncemodal

38. 41
ons-back-button
勝手に矢印が付けちゃう、しかも
OnsenUIで自動生成したものなので、調
整は難しい
Cordovaプラグインあるある
簡単なアプリであればons-back-button
使うと便利。カスタマイズが必要だったら、
使用を避けたほうがよい。

39. 42
ons-toolbar
ons-toolbarの高さは固定値、toolbar子要素
<left><center><right>はline-heightで縦
中央設定している
Cordovaプラグインあるある
複雑なレイアウトであれば、ons-toolbar
使わないほうがよい

40. 43
ons-toolbar
iOSの場合、ステータンスバーを非表示にすると、
ons-toolbarの上に余白が出る
Cordovaプラグインあるある
デフォルトでは、top:20pxのステータンスバー高さが
設定してるので、toolbar_xxxとpage_xxx合わ
せて調整が必要
＊ステータンスバー非表示：
ons.disableAutoStatusBarFill();

41. 44
ons-modal、ons-dialog
modal、dialogの中に、inputなど、キーボードが出
るコンテンツを入れると、画面のレイアウトが全体的に
崩れる
Cordovaプラグインあるある
modal、dialogの中に、画面レイアウトが変わらな
いように（キーボードが下側から出るなど）調整す
る必要がある。

42. 45
VSCodeおすすめプラグイン
探偵！Monacaスクープ

43. 46
• Bracket Pair Colorizer
– 括弧の対がわかるように色付け
• ESLint
– 構文チェック
• Evilinspector
– 全角スペース強調表示
• Indent-Rainbow
– インデントの階層で色付け
• Trailing Spaces
– 行末のスペースを色付け
VSCodeおすすめプラグイン

44. 47
• LiveSassCompiler
– SASSコンパイラ
• Syntactically ＝ 構文的に
• Awesome ＝ イケてる
• StyleSheet ＝ スタイルシート
• HTML CSS Support
– HTML/CSS構文補完
VSCodeおすすめプラグイン

45. ご清聴ありがとうございました。
48