Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

59 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 2018年8月31日 探偵!Monacaスクープ ~Monaca&OnsenUIあるある小ネタ集~ バルテス・モバイルテクノロジー株式会社
  2. 2. 自己紹介 2 バルテス・モバイルテクノロジー ってどんな会社? https://www.valtes-mt.co.jp/ ↑詳しくはググって下さい。 ↑
  3. 3. 自己紹介 6 名前:山下大輔 横浜生まれ、大阪育ち https://www.facebook.com/longjumper.daisuke 気軽に友達申請して下さい。 家族構成:妻1人、子3人
  4. 4. 自己紹介 7 モナカレーと私
  5. 5. 自己紹介 8 あと 私は「モナカソムリエ」です。 日本に3人しかいません。 3人/20万人
  6. 6. 9 探偵!Monacaスクープ このLTは、弊社Monaca開発 プロジェクトに携わったメンバーから 寄せられたご意見に基づいて、 MonacaソムリエがMonaca開発者 の為、公序良俗・安寧秩序を守るべく、 Monacaのあらゆる「あるある」を 徹底的に調査追及する、娯楽LTである。 探偵!Monacaスクープ
  7. 7. 10 Localkitあるある 探偵!Monacaスクープ
  8. 8. 11 アプリ設定画面でアイコンのアップロード 部分で画像ファイルをドラッグ&ドロップ すると 画像が画面一面に表示され身動き取 れずに終了。 Localkitあるある
  9. 9. 12 Localkitでビルドして画面が閉じない。 Localkitあるある ソース修正→画面閉じるでソースが巻 き戻ってしまう。 Git操作までしているとへこむので、閉じ る時に同期するか聞いてほしい。
  10. 10. 13 Localkitがちょくちょくエラーを出す。 Localkitあるある Localkit再起動で復活
  11. 11. 14 Localkitでポートが使用中で起動でき ないことがある。 Localkitあるある ポート番号を変えて再起動
  12. 12. 15 Localkitでビルド履歴から Downloadに遷移すると他の画面に 遷移できなかったのが最近できるように なった。 Localkitあるある うれしい
  13. 13. 16 Monaca設計あるある 探偵!Monacaスクープ
  14. 14. 17 画面遷移を設計する事が重要 Monaca設計あるある • 先に画面遷移とボタンイベントを作って動きを確認する。 –なるべくシンプル設計 • ナビゲーション→タブ→ナビゲーションの階層はダメ、過去 にそれやって詰んだ・・・ • 画面遷移を作ってからデザイナーにHTMLコーティングの タスクを渡している –クラス等を自由に作ってよい。 –但し、idは変えない。
  15. 15. 18 Idについて Monaca設計あるある •複数画面を作るとidが被るので、設計する 必要あり –イベントが重なって、違う画面のイベントが 走ったりする
  16. 16. 19 ライフスタイルを理解する Monaca設計あるある • この考え方は必須 –Init –Show –Hide –Destroy • どこで該当の処理を入れるかを検討する必要あり
  17. 17. 20 Monaca開発あるある 探偵!Monacaスクープ
  18. 18. 21 Android端末で、画面下部にある入力 ボックスに文字を入力しようとすると、キー ボードで入力ボックスが隠れてしまう。 Monaca開発あるある とりあえず、Androidでは、入力する場合 、上部エリアを非表示する対応を実施
  19. 19. 22 Android端末で、Backキーを押下した 際、アプリが強制終了することが発生した。 Monaca開発あるある Backキーの処理を自作した。
  20. 20. 23 iOS端末で、選択肢が0のselectボックス をスライド(タップでも?)するとアプリが強 制終了した。 Monaca開発あるある iOSではセンタリングされているのに、 Androidでは上寄せだったり。
  21. 21. 24 iOSとAndroidでデザインが微妙 に異なる。 Monaca開発あるある 無理やり空の選択肢を追加し、disable にした。
  22. 22. 25 WebViewのバージョンが古いAndroid 端末では、アプリがエラーになる。 Monaca開発あるある 便利!
  23. 23. 26 Macなしでもだいたい開発出来る。 Monaca開発あるある 便利!けど意見雑っ! だがしかし、コンソールログを見るに はMacが必要でした。。。
  24. 24. 27 QRコードでiOSアプリをインストー ルできる。 Monaca開発あるある 便利(凄い)!
  25. 25. 28 QRコードでインストールできる期 間が短い! Monaca開発あるある 期限は1週間程度
  26. 26. 29 時間帯によってビルドに時間がか かる Monaca開発あるある iOSは特に長い。 30分程度
  27. 27. 30 ビルドをキャンセルしたいけど、キャ ンセルできない。 Monaca開発あるある だって。
  28. 28. 31 エラー発生しても処理は止まるけど、 アプリは落ちない。 Monaca開発あるある 便利!
  29. 29. 32 Monacaで作成したキーストアをエ クスポートしてから、再度、インポー トしてビルドするとエラー。 Monaca開発あるある Monacaの不具合では??? とりあ えず、Javaのコマンドキーストアを作成 し対応。
  30. 30. 33 Monacaで作成したキーストアでビ ルドしたアプリをインストールしようと すると一部のAndroid端末にイン ストールできなかった Monaca開発あるある 原因不明。Javaコマンドで作成したら 解決した。
  31. 31. 34 Cordovaプラグインあるある 探偵!Monacaスクープ
  32. 32. 35 一部のCordovaのプラグインと Monacaのデバッグのプラグインと競合 し、iOSでデバッグができなかった。 Cordovaプラグインあるある chrome.sockets.tcp Plugin、 chrome.sockets.udp Plugin
  33. 33. 36 自作プラグイン作成時にSwiftのバー ジョン指定が出来ないのでビルド出来 ない。 Cordovaプラグインあるある Objective-Cで作った方がいい。 プラグイン自体はいっぱいあるので、探 して基本それを使ったほうが良い。
  34. 34. 37 プラグインを取り込んでから、プラグイン のソースを修正できる。 Cordovaプラグインあるある 便利!
  35. 35. 38 OnsenUIあるある 探偵!Monacaスクープ
  36. 36. 39 Formタグはあまり使わない。 Cordovaプラグインあるある 実装が増えると、バグが増える。 AndroidはAndroidっぽいを求めてい る顧客が少ない。
  37. 37. 40 おすすめタグ Cordovaプラグインあるある tab,spliter,onsepage,oncemodal
  38. 38. 41 ons-back-button 勝手に矢印が付けちゃう、しかも OnsenUIで自動生成したものなので、調 整は難しい Cordovaプラグインあるある 簡単なアプリであればons-back-button 使うと便利。カスタマイズが必要だったら、 使用を避けたほうがよい。
  39. 39. 42 ons-toolbar ons-toolbarの高さは固定値、toolbar子要素 <left><center><right>はline-heightで縦 中央設定している Cordovaプラグインあるある 複雑なレイアウトであれば、ons-toolbar 使わないほうがよい
  40. 40. 43 ons-toolbar iOSの場合、ステータンスバーを非表示にすると、 ons-toolbarの上に余白が出る Cordovaプラグインあるある デフォルトでは、top:20pxのステータンスバー高さが 設定してるので、toolbar_xxxとpage_xxx合わ せて調整が必要 *ステータンスバー非表示: ons.disableAutoStatusBarFill();
  41. 41. 44 ons-modal、ons-dialog modal、dialogの中に、inputなど、キーボードが出 るコンテンツを入れると、画面のレイアウトが全体的に 崩れる Cordovaプラグインあるある modal、dialogの中に、画面レイアウトが変わらな いように(キーボードが下側から出るなど)調整す る必要がある。
  42. 42. 45 VSCodeおすすめプラグイン 探偵!Monacaスクープ
  43. 43. 46 • Bracket Pair Colorizer – 括弧の対がわかるように色付け • ESLint – 構文チェック • Evilinspector – 全角スペース強調表示 • Indent-Rainbow – インデントの階層で色付け • Trailing Spaces – 行末のスペースを色付け VSCodeおすすめプラグイン
  44. 44. 47 • LiveSassCompiler – SASSコンパイラ • Syntactically = 構文的に • Awesome = イケてる • StyleSheet = スタイルシート • HTML CSS Support – HTML/CSS構文補完 VSCodeおすすめプラグイン
  45. 45. ご清聴ありがとうございました。 48

×