Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

https://atnd.org/events/56816

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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

  1. 1. ブラウザだけでwebアプリ開発! monacoの始め方 国際だるやなぎ会議 2014 2014/10/18 きよくら ならみ
  2. 2. 自己紹介 • ハンドル:きよくら ならみ –@kiyokura –kiyokura.hateblo.jp • NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS
  3. 3. 諸注意と免責事項 • 私個人による調査と見解であり所属す る組織を代表するものではありません • 万が一、本セッションの内容の誤りに 起因する何らかの損害が発生した場合 においても、私は一切の責任を負うこ とができません ご了承ください
  4. 4. 本セッションの目的 • ブラウザで動作する開発環境 monacoを知ってもらう
  5. 5. 本セッションのゴール • monacoの始め方を知る
  6. 6. アジェンダ • monacoってなに? • monacoの始め方 • まとめ
  7. 7. monacoってなに?
  8. 8. Visual Studio Online “monaco” • Webブラウザで動く開発環境 • マルチプラットホーム –もちろんmacでも動く!
  9. 9. “開発環境”です • 単なるエディタではない –多言語対応 –コーディング支援 –コンパイラ –継続的インテグレーション –ツール実行
  10. 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. 11. コーディング支援 • シンタックスハイライト • インテリセンス • エラーや警告表示 言語によって対応具合が異なります。 (シンタックスハイライトのみ等)
  12. 12. 例:TypeScript
  13. 13. コンパイラ • MSBuildが使える • コンパイラやインタプリタを追加インス トール可能 –. PHP / Pythonは標準で利用可 –node.jsが動作 • nodeで動くコンパイラ類を簡単に導入可能
  14. 14. 継続的インテグレーション • Gitに標準で対応 –GithubやVisual Studio Onlineと連携可 能
  15. 15. ツール実行環境 • コンソールあり –nodeが動く = npmが動く • 例 1. npmでtypescriptとbowerインストール 2. bowerでjqueryとjquery.d.tsを取得 3. tcsでtypescriptコンパイル
  16. 16. nodeがあるので割と好き放題できる • npmでインストール –bowerとかいれちゃう –TypeScriptとか入れてコンパイルしちゃ う
  17. 17. 仕組み的な話 • Azure Web Sitesで動いてる –Azure Web Sitesにホストしたものを触れ る –Azure Web Sitesは無料で使える –作って、即公開可能 • 無償の環境で開発、gitリポジトリを通じて 公開用の環境にデプロイ、という使い方も可 能
  18. 18. monacoのはじめ方
  19. 19. 実際に触ってみたい方のために • Step by Stepで始めるmonaco
  20. 20. 手順 • MSアカウントを作る • Microsoft Azureにサインアップ • Azure Web Sitesを新規作成する • 構成する • 起動する
  21. 21. マイクロソフトアカウントの作成 • 以下などにアクセスしてマイクロソフト アカウントを作成 –http://www.microsoft.com/ja- jp/msaccount/ –マイクロソフトアカウントを持っている人 はこの手順は不要です
  22. 22. Microsoft Azureにサインアップ • Azureへのサインアップが必要 • 無料で利用可能です –http://azure.microsoft.com/ja- jp/pricing/free-trial/ –30日間、20,500円分のサービスを無償 で利用可能 • クレジットカードが必要 – 勝手に課金される心配は無し –MSDN契約者はクレジットカード不要
  23. 23. Azure Web Sitesを新規作成する • ポータルからAzure Web Sitesを作成
  24. 24. Azure Web Sitesを新規作成する • ポータルからAzure Web Sitesを作成
  25. 25. 構成する • サイトの「構成」タブから…
  26. 26. 構成する • 『VISUAL STUDIO ONLINE での編集』を ONにして…
  27. 27. 構成する • 保存する
  28. 28. 起動する • 「ダッシュボード」に移動して…
  29. 29. 起動する • しばらく(数秒~数十秒)待つと、 現われるので、クリック!
  30. 30. アクセス完了!
  31. 31. まとめ
  32. 32. monacoとは • Visual Studio Online “monaco” • ブラウザで動作する開発環境 • 色んな言語に対応 • かなり高機能
  33. 33. monacoの始め方 • Azureへのサインアップが必要 • Azure Web Sitesを作成して… • monacoを有効にするだけ!
  34. 34. おまけ
  35. 35. ブラウザでできる開発環境 • Windows App Studio –ブラウザで、Windows Phone / Windows ストアアプリの開発が! –無料!! • http://appstudio.windows.com/ja- jp
  36. 36. パーツを並べながら、プレビューしつつ
  37. 37. ご清聴ありがとうございました

    Be the first to comment

    Login to see the comments

  • furuya02

    Jan. 9, 2015
  • ueponx

    Jan. 13, 2015
  • flicker001

    Feb. 15, 2015
  • koguma98

    Aug. 26, 2015
  • ssuser81f0ad

    Jun. 28, 2016

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

Views

Total views

6,776

On Slideshare

0

From embeds

0

Number of embeds

202

Actions

Downloads

6

Shares

0

Comments

0

Likes

5

×