探偵Monacaスクープ！~monaca&onsen uiあるある小ネタ集~

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

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

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

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

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

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

10
Localkitあるある

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

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

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

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

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

16
Monaca設計あるある

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

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

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

20
Monaca開発あるある

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

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

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

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

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

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

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

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

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

30
ビルドをキャンセルしたいけど、キャ
ンセルできない。
だって。

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

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

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

34
Cordovaプラグインあるある

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

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

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

38
OnsenUIあるある

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

40
おすすめタグ
tab,spliter,onsepage,oncemodal

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

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

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

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

45
VSCodeおすすめプラグイン

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

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

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

探偵Monacaスクープ！~monaca&amp;onsen uiあるある小ネタ集~

More Related Content

More from Daisuke Yamashita

探偵Monacaスクープ！~monaca&amp;onsen uiあるある小ネタ集~

探偵Monacaスクープ！~monaca&onsen uiあるある小ネタ集~

探偵Monacaスクープ！~monaca&onsen uiあるある小ネタ集~