2015/11/21に行われた「プログラミング生放送勉強会 第37回＠福岡」で発表したスライドです。

1. Webデザイナー視点で使ってみた
Microsoft Azureの話
松本 典子
Noriko Matsumoto
フリーランス Webデザイナー / ディレクター
2015 / 11 / 21 プログラミング生放送勉強会 第37回＠福岡

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

3. 3
こういうデザイン作ってます

4. 本日お話しする内容
 Microsoft Azureについて
 Webデザイナー視点で便利と思った機能
– Web構築環境が一瞬でできるWebアプリ
– Webサイトのバックアップ・復元
– 急激なアクセス増も安心！スケールアウト
– 一瞬でテスト環境と本番環境入れ替える方法
– YouTubeのような制御できる動画を配信できる
 もっと便利に！
Web的に工夫して使ってみた
4

5. Microsoft Azureについて
5

6. Microsoft Azureについて
 Microsoft Azureについてざっくり説明
66
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け（仮想マシン）
3 WebApps(Webデザイナー向け)
軽量なWebシステムやWebデザイナー、
フロントプログラマ向け

7. Microsoft Azureについて
 Microsoft Azureについてざっくり説明
77
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け（仮想マシン）
3 WebApps(Webデザイナー向け)
軽量なWebシステムやWebデザイナー、
フロントプログラマ向け

8. Azure WebAppsについて
8

9. Azure WebAppsについて
9

10. Azure WebAppsってこんな感じ
10
 「STANDARD」がおすすめ
 50GBまで「独自ドメインサイト」が入れ放題
– 約8000円で
– WordPressだったら1000サイト入る計算
 5ドメインまでSSLもOK
– 6サイト目から918円／月
 構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
自分専用で環境を細かく設定できる
レンタルサーバーを持てるイメージ

11. Azure WebAppsのいいところ
 Azureを従来のレンタルサーバーの
ような形で使うことができる
 管理ポータル画面で、よく使う必要な機能は
操作できる
– コマンド知らなくて大丈夫
– スケールアウト・フェイルオーバーも
自力で設計せずに使える
11

12. Webデザイナー視点で
便利と思ったAzureの機能
12

13. Web構築環境が一瞬でできるWebアプリ
13
 管理画面から「新規作成」を選ぶだけ

14. Webサイトの自動バックアップ・復元
14
 完全バックアップを1日1回やってくれる
– 設定しておけば毎日
 バックアップデータはストレージに
保存されていくので容量を圧迫しない
– 極論365日前の状態に戻すこともできる
 WordPressもSQLiteを採用すれば
DBのバックアップ対策しなくてOK
– DBバックアップ用のプラグイン不要
– 復旧時はFTPでファイルをあげるだけ

15. Webサイトの自動バックアップ・復元
15

16. テスト環境と本番環境を一瞬で入れ替え
16
「ステージング」でテスト環境と本番環境を
ワンクリックで入れ替えできる！！

17. テスト環境と本番環境を一瞬で入れ替え
17
ステージング環境のURLは「サイト名-staging.azurewebsites.net」
 「新しい展開スロットの追加」で作成
 ワンクリックでテストと本番を入れ替え

18. 急激なアクセス増も安心！スケールアウト
 スケールアウトとは？
18

19. 急激なアクセス増も安心！スケールアウト
 手動でスケールアウトする
19

20. 急激なアクセス増も安心！スケールアウト
 時間でスケジュールしスケールアウトする
20

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

22. もっと便利に！
Web的に工夫して使ってみた
Azure WebAppsの各機能を工夫して使ってみました。
22

23. ファイル転送サービス的に使ってみる
 宅ふぁいる便やfirestorageの変わり
 BLOBストレージは容量無制限で
画像入れ放題
 ダウンロードに期限がない
 納品データのバックアップの意味も
 FTPクライアントではなく
専用クライアントが必要
– 「Azure Storage Explorer」が便利
23
BLOBストレージを利用。

24. 制作データを丸ごとバックアップ
 MacでいうとTime Machineのクラウド版な
イメージ
 geo 冗長ストレージ (GRS)では
データのコピーが6つ保持される
 一度スケジュールを設定すると自動で
バックアップし続けてくれる
– デザインデータなどのバックアップに便利
 1回の操作でバックアップ可能な対象
ファイルサイズは最大53TB
24
Azure Backupを利用。

25. iPhoneでWebページを修正する
 WebAppsはFTP以外にもDropboxでの
デプロイが可能
– 事前にDropboxでデプロイできるように設定
– iPhoneには無料のFTPクライアントがない問題を
これで回避する
 HTMLやCSSの修正ができるエディタとして
「iEditor」を使用 25
✕
複数のデプロイ方法を利用。

26. 26
iPhone側の
作業
Azure側の
作業

27. A/Bテストを実施する
27
 A/Bテストとは？
異なる2パターンのWebページやバナーを用意し、実際
にユーザーに利用させて効果を比較するテスト。

28. A/Bテストを実施する
28
 新規Webサイトを作成
 展開スロットを準備
 「オリジナル」と「スロット」
それぞれにテストしたいデザインを
アップロード
ステージング機能とトラフィックルーティ
ングを利用。

29. A/Bテストを実施する
29
 トラフィックルーティングを設定する

30. A/Bテストを実施する
30

31. WebAppsの魅力、総まとめ
31
 1分程度でWeb構築環境が作れる
 FTP操作で通常のレンタルサーバーのように
使える
– Visual Studio Online、GitHub、Git、Dropbox
等、その他のデプロイ方法も複数選択可能
 Web制作の根本的なワークフロー効率化に
役立つ
 インフラ的な専門知識・技術が無くても、
スケールアウトなどアクセス負荷にも耐える
「サイトを落とさない」仕組みをデザイナー
が構築できる

32. 最後に
32
Webデザイナー視点で実際に使ってみた
Azureの色々な機能についてブログ書いてます。
http://zuvuyalink.net/nrjlog/Blog

33. ご静聴ありがとうございました！