JAZUG 札幌支部第10回勉強会 ～祝!! きたあず2周年記念勉強会～でお話した内容です。

1. インフラ知識ゼロの「デザイナー」でもOK！
Microsoft Azureの便利機能を
Web制作的に活かしてみた話
松本 典子
Noriko Matsumoto
フリーランス Webデザイナー / ディレクター
2016/03/05 JAZUG札幌支部 第10回勉強会 ～祝!! きたあず2周年記念勉強会～

2. 2
福岡県北九州市在住
Webデザイナー歴 14年
フリーランス
Webデザイナー / ディレクター
インフラ知識ゼロ…
Microsoft MVP for Microsoft
Azure
松本 典子（まつもと のりこ）
Webに関する業務全般やってますが、
メイン業務は「デザイン」です。
自己紹介

3. こういうロゴデザインや…
3

4. Webデザインを制作してます
4

5. Webデザインを制作してます
5
コーディングも苦手なので
できれば、
「コードは一切触りたくない」
普段はビジュアル制作メインの
デザイナーやってます。
（そして見たくない・・・）

6. 本日お話しすること
6
Webデザイナーなのに
なぜAzureを使ってるの？
Web制作的に使って欲しい
オススメ機能
Azure WebAppsの便利機能を活かす
サイト構成例
– WordPressサイトを構築してみよう
＜番外編＞Azure WebAppsで
いろいろチャレンジしてみた件

7. Webデザイナーなのに、
なぜAzureを使ってるの？
クラウドって難しいイメージあるけど…？
7

8. 実際に使う前のAzureのイメージ
8
 インフラエンジニアやプログラマが
知識と技術を駆使して使うイメージ
– そもそも用語に馴染みがなかった
• デプロイ？
• リージョン？
 専門知識が無いと使えない？
– 使えるように設定するの無理そう･･･
 とりあえずWeb制作には関係なさそう

9. 使ってみたら実はそんなに難しくない！
 やりたいことは、ほぼポータル画面から
設定・変更できる
 レンタルサーバーと同じようにも使える
– レンサバよりラクで便利な場合が多い
 専用のツールが必要なものも
WebAppsの機能を工夫すれば代替可能
– 例：A / Bテストなど
 しくじったらとりあえず消せばいい
9
Azure WebAppsは
デザイナーやWeb制作者に優しい！

10. ポータル画面でやりたいことはできる
10
 管理ポータル画面で、よく使う必要な
機能は操作できる
– コマンド知らなくて大丈夫
– スケールアウトやフェイルオーバーなどの
独自設計が基本不要
Azure新旧ポータル対応表
https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/

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

12. 12
Azure WebAppsのメリット
クラウド上に作られたレンタルサーバーの
ようなもの
数分で作れるWeb制作・配信・構築環境
構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
デプロイ（アップロード）方法が選べる
– FTP、Git、Dropbox、OneDrive…
インフラなどの知識の無い人でも
クラウドサービスの利点を活かせる！

13. WEB制作的に使って欲しい
オススメ機能
Web制作的視点で「コレは使える！」と思う便利機能のご紹介
13

14. 14
Web構築環境が一瞬でできるWebアプリ
 ポータル画面で「Web＋モバイル」を選び、
「アプリの名前」を入力するだけ

15. 容量無制限のAzure BLOBストレージ
 画像や動画など容量が大きなファイルを
置くのに適している
 Webサーバー代わりにも使える
 カスタムドメインの設定も可能
 WordPressの場合はプラグインがある
– Windows Azure Storage for WordPress
15
Azure BLOBストレージは容量無制限
課金制（1GB 2.45円くらい）

16. Azure BLOBストレージとWebAppsの違い
16

17. 動画配信もすぐに対応できる
17
ライブストリーム配信やオンデマンドで配
信ができる
インデックス作成ができる
自動的にキャプションを追加
DRM（著作権保護機能）の追加も可能
SSL接続経由でコンテンツのストリーミン
グも可能
Azure Media Services
動画配信サーバを用意したり、動画のエンコードを
自力でやったりという手順は一切なく、
Azure管理ポータルから簡単に準備して配信できる。

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

19. テスト環境と本番環境を一瞬で入れ替え
19
ステージング環境のURLは「サイト名-staging.azurewebsites.net」
 ワンクリックでテストと本番を入れ替え
「ステージング」でテスト環境と本番環境
をワンクリックで入れ替えできる！！

20. デプロイ（アップロード）方法が選べる
20
FTP、Git、Dropbox、OneDrive…

21. デプロイ（アップロード）方法が選べる
21
Microsoft Azure WebAppsとBitbucketを使ってGitデプロイ環境を構築してみた話。
http://zuvuyalink.net/nrjlog/archives/2486

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

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

24. Azure WebAppsの便利機能を
活かすサイト構成例
WordPressサイトを構築してみよう！
24

25. 一般的なWordPressサイトの構成
25
データベースにMySQLを採用

26. WordPressの構成を工夫
26
WordPressと画像を別々に配信するように構成

27. 使用するプラグイン
27
 Windows Azure Storage for WordPress
– メディアコンテンツ(画像 / 動画)を
AzureBLOBストレージに配置する
 SQLite Integration
– MySQLの代替用
 WP-Mail-SMTP or SendGrid
– Azureでメール送信できるようにする

28. ステージングで、テスト環境と本番環境が
ワンクリックで入れ替えられる
 WordPressの「wp-config.php」に追記
28

29. ステージングで、テスト環境と本番環境が
ワンクリックで入れ替えられる
29

30. WordPressサイトの
自動バックアップ・復元が可能
 データベースのバックアップ対策を
わざわざしなくて大丈夫
– データベースバックアップ用のプラグイン不要
 データベースの復旧が必要な場合は
FTP等でファイルをあげるだけ
30

31. 改ざん検知も入れられる
 2つのPowershellスクリプト
 Webジョブ＋scheduler＋外部SMTP
– CreateHashDbは「DBを作るとき実行する」
– IntegrityCheckは「定期的に実行する」
31

32. Azure WebAppsを使うといいところ
32
 データベースはSQLiteがオススメ
 WordPressサイトでもワンクリックで
テスト環境と本番環境を入れ替え可能
 自動バックアップができる、復旧もラク
 改ざん検知（簡易的）も入れられる
WordPressサイトの構築が
ものすごくラクになる♪

33. ＜番外編＞Azure WebAppsで
いろいろチャレンジしてみた件
・・・ネタ枠です。
33

34. A / Bテストができる仕組みを作る
34
ステージング機能とトラフィックルーティ
ング、GoogleAnalystを利用。

35. A / Bテストができる仕組みを作る
35

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

37. 37
iPhone側の
作業
Azure側の
作業

38. iPhoneでWordPressをインストール
38
✕
Dropboxを使ってデプロイ
– Dropboxでデプロイできるように設定
– WordPressファイルはzip化しておく
– iPhoneには無料のFTPクライアントがない問題
をこれで回避する
Kuduでzipファイルを解凍
クラシックポータルで頑張るとできる！

39. iPhoneでWordPressをインストール
39
がんばります…
_(´ཀ`」 ∠)_

40. Azure WebAppsのオススメポイント
 インフラ知識が無くてもクラウド
サービスの利点を活かせる
 実はWeb制作向きの便利機能が多い
 大体ポータル画面でやりたいことは
操作できる
 各種機能を工夫すれば色々できる
40
Azure WebAppsはとても便利なので
ぜひ使ってみてください！！

41. ご静聴ありがとうございました！
今回の内容はブログに記事書いてます。
ご興味のある方はぜひ！
41
http://zuvuyalink.net/nrjlog/Blog