1. ガチリアルな修羅チーム開発
Japan Azure User Group
ふくあず（福岡支部）のみなさん

2. 自己紹介
2
小島 淳（こじま あつし）
元パンクロッカー
現役柔道整復師

3. 自己紹介
3
濱本 一慶（はまもと かずのり）
熊本と広島のハイブリッド
アプリエンジニア
言語はVB6、VB.NET、C#
ふくあずの二次元担当
お察しください…

4. 自己紹介
4
• 福岡県北九州市在住
• フリーランス
Webデザイナー / ディレクター
• インフラ知識ゼロ…
• 昨年12月にAzureデビュー
松本 典子（まつもと のりこ）
Webに関する業務全般やってます。
（提案～Webページ制作～運用・マーケティングetc…）
http://zuvuyalink.net/nrjlog/Blog

5. この子つくりました。
5
ふくあずロゴ

6. ふくあずのご紹介
6
ふくあずの愛称で親しまれているJAZUG福岡は福岡を中心に
九州地区で月1回開催しております。
アプリケーション・インフラエンジニアのみならずWebクリエーター
や経営者からも多くの参加があり、過去にはご当地アイドル
QunQunとのコラボレーションも行い活発な活動をしています。

7. 7
過去にはWeb Designing誌とのコラボレーション企画
も行ったり、福岡コミュニティの中心として活動して
います。

8. さて、福岡といえば？
8

9. 9
めんたいこ

10. 10
にわか仮面

11. 11
めんべえ

12. いやいや、今日は違います
12

13. 13

14. そう。
ここは修羅の国。
毎日が修羅なのです。
14
（本当は至って平和な毎日ですが）

15. ということで本日のセッションは、
ガチリアルな修羅チーム開発
ということでチーム開発を
楽しくお伝えします。
15

16. 本セッションで出てくるキーワード
Web Apps
Visual Studio Online
DevOps（時間があれば・・・）
16

17. Web Appsのおさらい
17

18. Azure App Service概要
18
Azure App Service は、任意のプラットフォームお
よびデバイス向けに迅速かつ容易に Web アプリや
モバイル アプリを構築するのに必要なすべてを統合
する唯一のクラウド サービスです。
Web アプリ
（Web Apps）
モバイル アプリ
（Mobile Apps）
API アプリ
（API Apps）
ロジック アプリ
（Logic Apps）

19. Web Apps
Webアプリケーションを簡単にデ
プロイし、公開出来るサービス。
19
 .NET、Java、PHP、Node.js、Python
 組み込みの自動スケールと負荷分散
 高可用性と修正プログラムの自動適用
 Git、TFS、GitHub、Visual Studio Online を使用した継
続的なデプロイ
 WordPressなどのOSSも利用可能

20. Visual Studio
Online
20

21. Visual Studio Onlineとは
Visual Studio Online（以下、VSO）は開
発とALM基盤のクラウドサービスです。
従来のTeam Foundation Serverがもつ
ALM機能だけでなく、オンラインでコー
ディング可能なIDEやリリース後のアプリ
ケーション解析なども行える便利なサービ
スです。
21

22. Visual Studio Onlineの勘違い
VS ≠ VSO
単純なVSのオンライン版ではなく、むしろTFSの
オンライン版と表現したほうが良い。チーム開発
で必要な機能をほぼ網羅しています。
タスク管理
自動テスト
Git、TFS連携
リリース管理
オンラインコーディング
22

23. 料金体系
23
ライセンス体系
Basic ・・・・・・$20
Professional・・・$45
Advanced・・・・$60
それぞれ5つの無料ユーザーライセンスが含
まれます。

24. 無料アカウント
24
 5 つの 無料の Basic ユーザー ライセンス
 無制限のステークホルダー
 無制限の有効な MSDN サブスクライバー
 無制限のチーム プロジェクトとプライベートな
コード リポジトリ
 すべてのユーザーを対象とする 無料の作業項目
の追跡
 無料の 60 分/月のビルド
 無料の 20K/月のロード テスト
 アプリケーション監視と分析の プレビュー

25. 機能紹介
タスク管理
アジャイル開発必要なバックログ管理を提
供しています。カンバン方式を使ってビ
ジュアル面を強化指定ます。
25

26. 機能紹介
自動テスト
テストマネージャーとの連携により自動テ
ストが可能。効率的なCI/CDを実現してい
ます。
26

27. 機能紹介
オンラインコーディング
Visual Studio Online “Monaco”は、Web
ブラウザーから利用可能なIDE（統合開発環
境）です。しかし、実際にはIDEとしての高
度機能はなく、デバッグ機能などは貧弱で
す。直接ソースを修正したいときに使うエ
ディタのような感覚で使うと良いかも。
27

28. 機能紹介
Git連携
VSOはGitリポジトリを備えているので、
Gitによるソース管理が可能です。
しかし、色々と罠があるので後ほど説明し
ます。
28

29. 修羅なデモ開始！
29

30. 登場人物
デモに登場する人物紹介
30
今回のクライアント。ビジネスからお金
を得ることが最大の楽しみ。
K氏
受託したプログラマー。ライブライブを
こよなく愛する2次元デスマーチャー。
H氏
デザイナー。普段はウェーイ！なサービ
スをドヤ顔でディレクションしている。
M氏

31. お金が大好きというK氏よりH氏へ新サービ
ス用のランディングページ制作の依頼が
入った。
31
Hちゃーん、おげんき？
これサクッと作っちゃっ
てよ。クラウドで！！！
お、おう。。。
やりまする。。。

32. デモ1
VSO周りの環境構築をします
VSOをGitリポジトリ付きで作成する
VSOへソースをコミットする
Web Appsを作成する
Web Apps機能拡張でVSOをインストー
ル
VSO MonacoでGitリポジトリを作成する
32

33. 33
どうしてMonacoを
使用するの？

34. 多くのデザイナーさんはGitを使わない
アップロードは基本的にFTP！
34

35. 35
Monaco
FTP

36. 程なくして依頼されたサイトが出来上がっ
たが・・・・
36
一応。。。
出来たのですが。。。
な、なんやこりゃ！！！
われ！舐めとんかい！！

37. 37
ひ、ひぃぃぃ！！
すぐに！すぐに！！！
もっとドパーンとバカー
ンとシャキーンとしたや
つくれや！！
Mしゃん！
お助けを！お助けを！！

38. デモ2
Webデザイナーでも使えるAzure
FTPでソースをWeb Appsにアプロード
管理者側でGitコミットする
38

39. Web デザイナー視点
でのAzure解説
39

40. サイトの自動バックアップ
40

41. サイトの復元
41

42. ステージングとスワップ
• テスト環境と本番環境をワンクリックで
入れ替えできる！
42

43. スケールアウト
43

44. 動画配信
• Azure Media ServicesでYouTubeのような
制御できる動画が配信できる
• 動画配信サーバを用意する必要がない
• 動画を配信できる状態にエンコードする
必要もなし
• ライブストリーミング配信や
コンテンツ保護もできる
44

45. 修羅なデモに戻ります
45

46. 出来上がったサイト
46

47. 仕上がったサイトの比較
47

48. さすがイケイケでウェーイなデザイナー。
とっても素敵なサイトが出来上がりました。
48
出来ました♪
億万長者間違いない！
いいね～。
でも、ここちょろっと修
正してね♪

49. デモ2
VSOによるライブコーディング
Monacoを使ってソース修正
49

50. クライアントのK氏は大喜び！Azureなんて
素晴らしいんだ！これでチャリンチャリン
ビジネスがうまくいくか、おっと誰か来た
ようだ・・・
50
あ、これうちのサーバー
に移しておいてね！
なんだ、と！？

51. 51

52. 52
VSOはチーム開発のハブ
まとめ
VSOとmonacoは違う
億万長者には気をつけよう
Azureはデザイナーさんを
楽にする

53. ご静聴ありがとうございました。
53

54. 番外編
時間があればDevOps
54

55. PowerShell DSCとは
PowerShell DSCは、WMF4.0から新たに導
入されたサーバー構成管理ツールです。
PowerShell4.0がインストールされている
Windows Server 2012 R2とWindows8.1
からは標準で使えます。
ChefやPuppetと同じくサーバー構成をコー
ド化し、冪等性を持ちます。
55

56. PowerShell DSCの構成
56
DSC Server
Node
Node
Push
DSCサーバーが各ノードに対して問い合わせて
ノードを構築していく。
Pull
ノードがDSCサーバーに対して「あるべき構成」
が変化してないかどうかを定期的に確認する。

57. Resource code
57
WindowsFeature IIS
{
Ensure = "Present"
Name = "Web-Server"
}
WindowsFeature IISMgmt
{
Ensure = "Present"
Name = " Web-Mgmt-Tools"
}
WindowsFeature ASP
{
Ensure = "Present"
Name = "Web-Asp-Net45"
}
IIS機能追加
IIS管理機能追加
.NET4.5追加

58. オーケストレーション
58
仮想マシン
Storage
Blob
SQL
Database
Managed
Cache
PowerShell
DSC
Azure
Resource
Manager
Azure
Automation