ブラウザだけでwebアプリ開発！monacoの始め方

国際だるやなぎ会議 2014

2014/10/18

きよくら ならみ

自己紹介

• ハンドル：きよくら ならみ

–@kiyokura

–kiyokura.hateblo.jp

• NET系の開発やWebアプリ開発

–Microsoft MVP for ASP.NET/IIS

諸注意と免責事項

• 私個人による調査と見解であり所属する組織を代表するものではありません

• 万が一、本セッションの内容の誤りに起因する何らかの損害が発生した場合においても、私は一切の責任を負うことができませんご了承ください

本セッションの目的

• ブラウザで動作する開発環境monacoを知ってもらう

本セッションのゴール

• monacoの始め方を知る

アジェンダ

• monacoってなに？

• monacoの始め方

• まとめ

monacoってなに？

Visual Studio Online “monaco”

• Webブラウザで動く開発環境

• マルチプラットホーム–もちろんmacでも動く！

“開発環境”です

• 単なるエディタではない

–多言語対応

–コーディング支援

–コンパイラ

–継続的インテグレーション

–ツール実行

多言語対応

• HTML / CSS / JavaScript / Sass / Less

• C++ / C# / VB.NET / F# / Razor

• CoffeeScript / TypeScript

• Java / PHP / Ruby / Python / Lua

• Markdown

などなど。kuduコンソールを使って掘り下げていくと、対応言語がなんとなくわかるD:¥Program Files (x86)¥SiteExtensions¥Monaco¥<xxxx>¥client¥<xxxx>¥vs¥languages

コーディング支援

• シンタックスハイライト

• インテリセンス

• エラーや警告表示

言語によって対応具合が異なります。（シンタックスハイライトのみ等）

例：TypeScript

コンパイラ

• MSBuildが使える

• コンパイラやインタプリタを追加インストール可能

– . PHP / Pythonは標準で利用可

–node.jsが動作

• nodeで動くコンパイラ類を簡単に導入可能

継続的インテグレーション

• Gitに標準で対応

–GithubやVisual Studio Onlineと連携可能

ツール実行環境

• コンソールあり

–nodeが動く ＝ npmが動く

• 例

1. npmでtypescriptとbowerインストール

2. bowerでjqueryとjquery.d.tsを取得

3. tcsでtypescriptコンパイル

nodeがあるので割と好き放題できる

• npmでインストール

–bowerとかいれちゃう

–TypeScriptとか入れてコンパイルしちゃう

仕組み的な話

• Azure Web Sitesで動いてる

–Azure Web Sitesにホストしたものを触れる

–Azure Web Sitesは無料で使える

–作って、即公開可能

• 無償の環境で開発、gitリポジトリを通じて公開用の環境にデプロイ、という使い方も可能

monacoのはじめ方

実際に触ってみたい方のために

• Step by Stepで始めるmonaco

手順

• MSアカウントを作る

• Microsoft Azureにサインアップ

• Azure Web Sitesを新規作成する

• 構成する

• 起動する

マイクロソフトアカウントの作成

• 以下などにアクセスしてマイクロソフトアカウントを作成

–http://www.microsoft.com/ja-jp/msaccount/

–マイクロソフトアカウントを持っている人はこの手順は不要です

Microsoft Azureにサインアップ

• Azureへのサインアップが必要

• 無料で利用可能です–http://azure.microsoft.com/ja-

jp/pricing/free-trial/

–30日間、20,500円分のサービスを無償で利用可能• クレジットカードが必要

–勝手に課金される心配は無し

–MSDN契約者はクレジットカード不要

Azure Web Sitesを新規作成する

• ポータルからAzure Web Sitesを作成

Azure Web Sitesを新規作成する

• ポータルからAzure Web Sitesを作成

構成する

• サイトの「構成」タブから…

構成する

• 『VISUAL STUDIO ONLINE での編集』をONにして…

構成する

• 保存する

起動する

• 「ダッシュボード」に移動して…

起動する

• しばらく（数秒～数十秒）待つと、現われるので、クリック！

アクセス完了！

まとめ

monacoとは

• Visual Studio Online “monaco”

• ブラウザで動作する開発環境

• 色んな言語に対応

• かなり高機能

monacoの始め方

• Azureへのサインアップが必要

• Azure Web Sitesを作成して…

• monacoを有効にするだけ！

おまけ

ブラウザでできる開発環境

• Windows App Studio

–ブラウザで、Windows Phone /Windows ストアアプリの開発が！

–無料！！

• http://appstudio.windows.com/ja-jp

パーツを並べながら、プレビューしつつ

ご清聴ありがとうございました