Monaca IDE の活用方法

by Atsushi Nakatsugawa

Slide 1

Slide 1 text

PAGE DAY 2018/09/20 # MOONGIFT X / 40 Monaca IDE の活用方法 $MPVE%FWFMPQFST$JSDMF&EJUPS*%&8BST

Slide 2

Slide 2 text

# MOONGIFT DAY 2018/09/20 自己紹介 @goofmint fb.me/goofmint 中津川篤司株式会社MOONGIFT 代表取締役 www.moongift.jp エバンジェリストコミュニティ次回は9/28@渋谷！

Slide 3

Slide 3 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 8BST

Slide 4

Slide 4 text

# MOONGIFT DAY 2018/09/20 エディタの遍歴 Windows Mac OSX/macOS 漢字トーク / MacOS Linux

Slide 5

Slide 5 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40

Slide 6

Slide 6 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 8FC*%&ͷྺ࢙

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Gyre ը૾Ҿ༻ɿ(ZSF8FCCBTFE*%&BOEEFCVHHFSGPS3BJMT .00/(*'5Ͱ೥݄೔ʹ঺հ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Ϋϥ΢υ

Slide 11

Slide 11 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Heroku Garden IFSPLVDPNIFSPLVHBSEFODPNIFSPLVDPN

Slide 12

Slide 12 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 AWS Cloud9 ೥݄ʹ"84͕ങऩɺ೥݄ʹൃද

Slide 13

Slide 13 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Google Apps Script

Slide 14

Slide 14 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Φʔϓϯιʔε

Slide 15

Slide 15 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Eclipse Che 2016年3月リリース

Slide 16

Slide 16 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Atomの登場

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 +BWB4DSJQUͷߴ଎Խ8"4.

Slide 20

Slide 20 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Vim.Wasm IUUQTSIZTEHJUIVCJPWJNXBTN

Slide 21

Slide 21 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Ymacs IUUQXXXZNBDTPSH

Slide 22

Slide 22 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 ຊ୊

Slide 23

Slide 23 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 .POBDB

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 イメージ )5.- +BWB4DSJQU $44 プラグイン

Slide 26

Slide 26 text

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 ঎༻ ঎༻

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 デモ画面 ϑΝΠϧπϦʔ ΤσΟλ λʔϛφϧ ϓϨϏϡʔ

Slide 30

Slide 30 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 デモ画面 ϑΝΠϧΛฤूͯ͠อଘ ͢Δͱͦͷ৔Ͱ൓ө  ʢϗοτϦϩʔυʣ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 開発スタイル Monaca IDE Monaca デバッガ WebSocket Monaca IDEで修正した内容が即座に反映

Slide 34

Slide 34 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 ׆༻๏

Slide 35

Slide 35 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 App Storeアップロード機能 macOSのアップローダーをクラウドで提供

Slide 36

Slide 36 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 チーム開発 Monaca IDE プログラマーデザイナープロデューサー

Slide 37

Slide 37 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 複数環境 Monaca IDE

Slide 38

Slide 38 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 ·ͱΊ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Web IDEも無視できないレベルに • 良い意味で束縛されることで開発フローがシンプルに • 開発環境を整える手間なし。Webブラウザだけで開発可能 • 自由度を高めるコンソール重要

Slide 41

Slide 41 text

PAGE # MOONGIFT X DAY 2018/09/20 / 40 Thanks! !