Room A

デモ使い方や基礎的な

知識をお伝えします

Cloud First で Mobile First で

Open な時代の最新統合開発環境を今日から使いこなせるようになる

DemoHello “Monaco”!!

ブラウザで動く軽量な開発環境 Visual Studio の使いやすさをブラウザ上で実現

Azure Websitesに統合されて提供 Websites の [構成] から機能をオンにすれば利用可能

現在はプレビュー版

モダンなフレームワークと言語をサポート HTML5, JavaScript, TypeScript, Node , PHP, ASP.NET などに対応

Why “Monaco” なぜ “Monaco” が出てきたのか

Erich GammaDistinguished Engineer

Microsoft

Design Pattern の GoFの一人Kent Beck とともに JUnitを開発

IBM 時代は Eclipse JDT の設計リーダー2011 年 6 月から Visual Studio チームに参画

Mobile First

時代の統合開発環境

Cloud First

What’s“Monaco”

“Monaco” はどういうものか

“Monaco” は Azure Websites の機能の一つとして提供

Web サイト構築に特化

仮想マシン上のWebアプリ

アプリ

Web サーバー

ゲスト OS

ホストOSAzure が管理

利用者が管理 仮想化

アプリ

Webサーバー

ゲスト OS

仮想化

ホストOS

Azure Websites

レベル 対応状況 言語

Basic

色付け、ブラケットの自動補完、自動インデント、テキストの一部補完など

C#, VB, Razor, Markdown,

Handlebars, HTML, XML, INI,

Batch, Jade, CoffeeScript

Good

IntelliSense (コード補完)、エラーチェック、定義への移動、アウトライン表示、シンボルの名前変更など

JavaScript, JSON, CSS,

LESS, SASS, PHP

Great 複数ファイルでの参照検索 TypeScript

今日触れる予定の言語

レベル 対応状況 言語

Basic

色付け、ブラケットの自動補完、自動インデント、テキストの一部補完など

C#, VB, Razor, Markdown,

Handlebars, HTML, XML, INI,

Batch, Jade, CoffeeScript

Good

IntelliSense (コード補完)、エラーチェック、定義への移動、アウトライン表示、シンボルの名前変更など

JavaScript, JSON, CSS,

LESS, SASS, PHP

Great 複数ファイルでの参照検索 TypeScript

Visual Studioを補完する軽量な開発環境

“Monaco”というパワフルな開発環境

二つの側面

“Monaco” とVSを組み合わせた開発

“Monaco” だけでここまでできる

Web 開発

JavaScript

JavaScript Node.js

Open

時代の開発環境

“Monaco”とGitによる Azure Websites 運用

1.

2.

3.

4.

5.

git

Dev git

開発用サイト

mysite-dev.azurewebsites.netMonaco: オン

git

Kudu

運用 or ステージングサイト

mysite.azurewebsites.netMonaco: オフソースコード管理からの展開:

VS Online, GitHubなどgit

clone

/ push

ブランチのリンク

ソース管理

(VS Online,

GitHub, etc)

クラウド上での継続的デプロイメント

git

git

Dev git

git

clone

push

運用 or ステージングサイト

mysite.azurewebsites.netソース管理: VS Online

開発サイト

mysite-dev.azurewebsites.netMonaco: オン

Visual Studio Onlineに Push されると、Visual Studio Online

が継続的インテグレーションを行い、通ればデプロイする

myproject.visualstudio.com

VS online build, test

Kudu

最後にSummary

時代の統合開発環境

OpenMobile First Cloud First

Azure Websites

IIS

Node, PHP..

wwwroot実行

Kudu

Write権限

Azure Websites

IIS

Node, PHP..

wwwroot実行

“Monaco” Kudu

Read/Write権限

Write権限

Azure Websites

IIS

Node, PHP..

wwwroot実行

“Monaco” Kudu

Read/Write権限

Write権限

https://***.scm.azurewebsites.net/devhttp://***.azurewebsites.net https://***.scm.azurewebsites.net