2014/10/18に行われたコミュニティイベント『国際だるやなぎ会議 2014』における同名セッションの資料 https://atnd.org/events/56816

1. ブラウザだけでwebアプリ開発！
monacoの始め方
国際だるやなぎ会議 2014
2014/10/18
きよくら ならみ

2. 自己紹介
• ハンドル：きよくら ならみ
–@kiyokura
–kiyokura.hateblo.jp
• NET系の開発やWebアプリ開発
–Microsoft MVP for ASP.NET/IIS

3. 諸注意と免責事項
• 私個人による調査と見解であり所属す
る組織を代表するものではありません
• 万が一、本セッションの内容の誤りに
起因する何らかの損害が発生した場合
においても、私は一切の責任を負うこ
とができません
ご了承ください

4. 本セッションの目的
• ブラウザで動作する開発環境
monacoを知ってもらう

5. 本セッションのゴール
• monacoの始め方を知る

6. アジェンダ
• monacoってなに？
• monacoの始め方
• まとめ

7. monacoってなに？

8. Visual Studio Online “monaco”
• Webブラウザで動く開発環境
• マルチプラットホーム
–もちろんmacでも動く！

9. “開発環境”です
• 単なるエディタではない
–多言語対応
–コーディング支援
–コンパイラ
–継続的インテグレーション
–ツール実行

10. 多言語対応
• 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

11. コーディング支援
• シンタックスハイライト
• インテリセンス
• エラーや警告表示
言語によって対応具合が異なります。
（シンタックスハイライトのみ等）

12. 例：TypeScript

13. コンパイラ
• MSBuildが使える
• コンパイラやインタプリタを追加インス
トール可能
–. PHP / Pythonは標準で利用可
–node.jsが動作
• nodeで動くコンパイラ類を簡単に導入可能

14. 継続的インテグレーション
• Gitに標準で対応
–GithubやVisual Studio Onlineと連携可
能

15. ツール実行環境
• コンソールあり
–nodeが動く ＝ npmが動く
• 例
1. npmでtypescriptとbowerインストール
2. bowerでjqueryとjquery.d.tsを取得
3. tcsでtypescriptコンパイル

16. nodeがあるので割と好き放題できる
• npmでインストール
–bowerとかいれちゃう
–TypeScriptとか入れてコンパイルしちゃ
う

17. 仕組み的な話
• Azure Web Sitesで動いてる
–Azure Web Sitesにホストしたものを触れ
る
–Azure Web Sitesは無料で使える
–作って、即公開可能
• 無償の環境で開発、gitリポジトリを通じて
公開用の環境にデプロイ、という使い方も可
能

18. monacoのはじめ方

19. 実際に触ってみたい方のために
• Step by Stepで始めるmonaco

20. 手順
• MSアカウントを作る
• Microsoft Azureにサインアップ
• Azure Web Sitesを新規作成する
• 構成する
• 起動する

21. マイクロソフトアカウントの作成
• 以下などにアクセスしてマイクロソフト
アカウントを作成
–http://www.microsoft.com/ja-
jp/msaccount/
–マイクロソフトアカウントを持っている人
はこの手順は不要です

22. Microsoft Azureにサインアップ
• Azureへのサインアップが必要
• 無料で利用可能です
–http://azure.microsoft.com/ja-
jp/pricing/free-trial/
–30日間、20,500円分のサービスを無償
で利用可能
• クレジットカードが必要
– 勝手に課金される心配は無し
–MSDN契約者はクレジットカード不要

23. Azure Web Sitesを新規作成する
• ポータルからAzure Web Sitesを作成

24. Azure Web Sitesを新規作成する
• ポータルからAzure Web Sitesを作成

25. 構成する
• サイトの「構成」タブから…

26. 構成する
• 『VISUAL STUDIO ONLINE での編集』を
ONにして…

27. 構成する
• 保存する

28. 起動する
• 「ダッシュボード」に移動して…

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

30. アクセス完了！

31. まとめ

32. monacoとは
• Visual Studio Online “monaco”
• ブラウザで動作する開発環境
• 色んな言語に対応
• かなり高機能

33. monacoの始め方
• Azureへのサインアップが必要
• Azure Web Sitesを作成して…
• monacoを有効にするだけ！

34. おまけ

35. ブラウザでできる開発環境
• Windows App Studio
–ブラウザで、Windows Phone /
Windows ストアアプリの開発が！
–無料！！
• http://appstudio.windows.com/ja-
jp

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

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