Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monaca IDE の活用方法

Monaca IDE の活用方法

【増員】Cloud Developers Circle #8 - Editor/IDE Wars - connpass - https://cdevc.connpass.com/event/98178/

での発表資料です。

Atsushi Nakatsugawa

September 21, 2018
Tweet

More Decks by Atsushi Nakatsugawa

Other Decks in Technology

Transcript

  1. PAGE DAY 2018/09/20 # MOONGIFT X / 40 Monaca IDE

    の活用方法 $MPVE%FWFMPQFST$JSDMF&EJUPS*%&8BST
  2. # MOONGIFT DAY 2018/09/20 自己紹介 @goofmint fb.me/goofmint 中津川 篤司 株式会社MOONGIFT

    代表取締役 www.moongift.jp エバンジェリスト コミュニティ 次回は9/28@渋谷!
  3. PAGE # MOONGIFT X DAY 2018/09/20 / 40 TIBCO General

    Interface Version 3.1 Professional ը૾Ҿ༻ɿ"KBY։ൃ؀ڥΛແঈʹͨ͠5*#$0͸উͪ૊ʁ!*5 .00/(*'5Ͱ೥݄೔ʹ঺հ
  4. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Cloud 9

    .00/(*'5Ͱ೥݄೔ʹ঺հ ը૾Ҿ༻ɿ$MPVEͷ࢖͍ํͱศརػೳʂ࠷ڧϓϩάϥϛϯά։ൃ؀ڥʢ*%&ʣcࣆΤϯδχΞक़ϒϩά
  5. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Heroku Garden

    IFSPLVDPNIFSPLVHBSEFODPNIFSPLVDPN
  6. PAGE # MOONGIFT X DAY 2018/09/20 / 40 AWS Cloud9

    ೥݄ʹ"84͕ങऩɺ೥݄ʹൃද
  7. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Atom •

    atom-shell
 Node.jsベースのデスクトップアプリ開発環境
 後のElectron(2015年04月に改名) • GitHub製 • HTML5/JavaScript/CSS製
  8. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaco Editor

    74$PEFͰ΋࢖ΘΕ͍ͯΔϓϩάϥϛϯάΤσΟλ
  9. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaca ?

    • クラウドでCordovaをビルドするサービス • Cordova + HTML5/JavaScript/CSSでスマートフォンアプリ を作れるサービス • ネイティブの機能はプラグインを介してやり取り • ニフクラ mobile backendだと簡単に連携(プッシュ通知とは データベース、ストレージなど)できます
  10. PAGE # MOONGIFT X DAY 2018/09/20 / 40 他の技術との違い .POBDB

    $PSEPWB 1IPOF (BQ 8FC 3FBDU /BUJWF 'MVUUFS 6OJUZ 9BNBSJO ݴޠ +BWB4DSJQU +BWB4DSJQU +BWB4DSJQU +BWB4DSJQU +BWB4DSJQU %BSU $ $ NBD ෆཁ ཁ ෆཁ /" ཁ ཁ ෆཁ ཁ ࣮ߦ଎౓ ˚ ˚ ˚ ˚ ˓ ˕ ˕ ˕ ωΠςΟϒ ࿈ܞ ˓ ˓ ˓ º ˓ ˓ ˓ ˓ ϥΠηϯε ঎༻ 044 ঎༻ /" 044 044 ঎༻ ঎༻
  11. PAGE # MOONGIFT X DAY 2018/09/20 / 40 クラウドIDEの利点 •

    開発環境のセットアップが不要 • コードをローカルに配備しない • ストレージが壊れたり、PCが盗まれるようなインシデントに強い • コードを遠隔地の人と“リアルタイムに”共有できる • 負荷を気にせず使える
  12. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaca IDEの特徴

    • Monaco ベース • 日本語対応 • 実機のログをクラウドで確認できる • 1ユーザ1コンテナ • 複数デバイスのプレビューあり • NEW PWA対応(Firebase向けにデプロイ)
  13. PAGE # MOONGIFT X DAY 2018/09/20 / 40 IDE +

    コンテナ • GitHubへのpush/pull操作 • Angular / React / Vueなどのトランスパイル • SASS/SCSSの変換 • プロジェクトに対してコマンドを実行できる
 git / rm / mkdir / curl などなど • 他人の環境に影響を及ぼさずに実行できる
  14. PAGE # MOONGIFT X DAY 2018/09/20 / 40 開発スタイル Monaca

    IDE Monaca デバッガ WebSocket Monaca IDEで修正した内容が即座に反映
  15. PAGE # MOONGIFT X DAY 2018/09/20 / 40 App Storeアップロード機能

    macOSのアップローダーをクラウドで提供
  16. PAGE # MOONGIFT X DAY 2018/09/20 / 40 チーム開発 Monaca

    IDE プログラマー デザイナー プロデューサー
  17. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Web IDEは10年以上開発されている

    • JavaScriptの高機能化によって実用的なレベルに • WebAssemblyがネイティブレベルのスピードを実現 • クラウドデプロイなど、クラウドならではの良さも
  18. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Web IDEも無視できないレベルに

    • 良い意味で束縛されることで開発フローがシンプルに • 開発環境を整える手間なし。Webブラウザだけで開発可能 • 自由度を高めるコンソール重要