Monaca IDE の活用方法

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

での発表資料です。

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 8BST
4. # MOONGIFT DAY 2018/09/20 エディタの遍歴 Windows Mac OSX/macOS 漢字トーク / MacOS Linux
5. PAGE # MOONGIFT X DAY 2018/09/20 / 40
6. PAGE # MOONGIFT X DAY 2018/09/20 / 40 8FC
   *%&ͷྺ࢙
7. PAGE # MOONGIFT X DAY 2018/09/20 / 40 TIBCO General Interface Version 3.1 Professional ը૾Ҿ༻ɿ"KBY։ൃ؀ڥΛແঈʹͨ͠5*#$0͸উͪ૊ʁ
   
   !*5 .00/(*'5Ͱ೥݄೔ʹ঺հ
8. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Gyre ը૾Ҿ༻ɿ(ZSF
   8FCCBTFE
   *%&
   BOE
   EFCVHHFS
   GPS
   3BJMT .00/(*'5Ͱ೥݄೔ʹ঺հ
9. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Cloud 9 .00/(*'5Ͱ೥݄೔ʹ঺հ ը૾Ҿ༻ɿ$MPVEͷ࢖͍ํͱศརػೳʂ࠷ڧϓϩάϥϛϯά։ൃ؀ڥʢ*%&ʣ
   c
   ࣆΤϯδχΞक़ϒϩά
10. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Ϋϥ΢υ
11. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Heroku Garden IFSPLVDPN
    
    IFSPLVHBSEFODPN
    
    IFSPLVDPN
12. PAGE # MOONGIFT X DAY 2018/09/20 / 40 AWS Cloud9 ೥݄ʹ"84͕ങऩɺ೥݄ʹൃද
13. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Google Apps Script
14. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Φʔϓϯιʔε
15. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Eclipse Che 2016年3月リリース
16. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Atomの登場
17. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Atom • atom-shell
 Node.jsベースのデスクトップアプリ開発環境
 後のElectron（2015年04月に改名） • GitHub製 • HTML5/JavaScript/CSS製
18. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaco Editor 74
    $PEFͰ΋࢖ΘΕ͍ͯΔϓϩάϥϛϯάΤσΟλ
19. PAGE # MOONGIFT X DAY 2018/09/20 / 40 +BWB4DSJQUͷߴ଎Խ8"4.
20. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Vim.Wasm IUUQTSIZTEHJUIVCJPWJNXBTN
21. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Ymacs IUUQXXXZNBDTPSH
22. PAGE # MOONGIFT X DAY 2018/09/20 / 40 ຊ୊
23. PAGE # MOONGIFT X DAY 2018/09/20 / 40 .POBDB
24. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaca ? • クラウドでCordovaをビルドするサービス • Cordova + HTML5/JavaScript/CSSでスマートフォンアプリ を作れるサービス • ネイティブの機能はプラグインを介してやり取り • ニフクラ mobile backendだと簡単に連携（プッシュ通知とは データベース、ストレージなど）できます
25. PAGE # MOONGIFT X DAY 2018/09/20 / 40 イメージ )5.- +BWB4DSJQU $44 プラグイン
26. 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 ঎༻ ঎༻
27. PAGE # MOONGIFT X DAY 2018/09/20 / 40 クラウドIDEの利点 • 開発環境のセットアップが不要 • コードをローカルに配備しない • ストレージが壊れたり、PCが盗まれるようなインシデントに強い • コードを遠隔地の人と“リアルタイムに”共有できる • 負荷を気にせず使える
28. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaca IDE
29. PAGE # MOONGIFT X DAY 2018/09/20 / 40 デモ画面 ϑΝΠϧπϦʔ ΤσΟλ λʔϛφϧ ϓϨϏϡʔ
30. PAGE # MOONGIFT X DAY 2018/09/20 / 40 デモ画面 ϑΝΠϧΛฤूͯ͠อଘ
    ͢Δͱͦͷ৔Ͱ൓ө
 ʢϗοτϦϩʔυʣ
31. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Monaca IDEの特徴 • Monaco ベース • 日本語対応 • 実機のログをクラウドで確認できる • 1ユーザ1コンテナ • 複数デバイスのプレビューあり • NEW PWA対応（Firebase向けにデプロイ）
32. PAGE # MOONGIFT X DAY 2018/09/20 / 40 IDE + コンテナ • GitHubへのpush/pull操作 • Angular / React / Vueなどのトランスパイル • SASS/SCSSの変換 • プロジェクトに対してコマンドを実行できる
 git / rm / mkdir / curl などなど • 他人の環境に影響を及ぼさずに実行できる
33. PAGE # MOONGIFT X DAY 2018/09/20 / 40 開発スタイル Monaca IDE Monaca デバッガ WebSocket Monaca IDEで修正した内容が即座に反映
34. PAGE # MOONGIFT X DAY 2018/09/20 / 40 ׆༻๏
35. PAGE # MOONGIFT X DAY 2018/09/20 / 40 App Storeアップロード機能 macOSのアップローダーをクラウドで提供
36. PAGE # MOONGIFT X DAY 2018/09/20 / 40 チーム開発 Monaca IDE プログラマー デザイナー プロデューサー
37. PAGE # MOONGIFT X DAY 2018/09/20 / 40 複数環境 Monaca IDE
38. PAGE # MOONGIFT X DAY 2018/09/20 / 40 ·ͱΊ
39. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Web IDEは10年以上開発されている • JavaScriptの高機能化によって実用的なレベルに • WebAssemblyがネイティブレベルのスピードを実現 • クラウドデプロイなど、クラウドならではの良さも
40. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Web IDEも無視できないレベルに • 良い意味で束縛されることで開発フローがシンプルに • 開発環境を整える手間なし。Webブラウザだけで開発可能 • 自由度を高めるコンソール重要
41. PAGE # MOONGIFT X DAY 2018/09/20 / 40 Thanks! !