インフラ知識ゼロの「デザイナー」でも OK ！

Microsoft Azure の便利機能をWeb 制作的に活かしてみた話

松本 典子Noriko Matsumoto

フリーランス Web デザイナー / ディレクター

2016/03/05 　 JAZUG 札幌支部 第 10 回勉強会 ～祝 !! きたあず 2 周年記念勉強会～

2

福岡県北九州市在住Web デザイナー歴 14 年フリーランス

Web デザイナー / ディレクターインフラ知識ゼロ…Microsoft MVP for Microsoft

Azure

松本 典子（まつもと のりこ）

Web に関する業務全般やってますが、メイン業務は「デザイン」です。

自己紹介

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

3

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

4

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

5

コーディングも苦手なのでできれば、

「コードは一切触りたくない」

普段はビジュアル制作メインのデザイナーやってます。

（そして見たくない・・・）

本日お話しすること

6

Web デザイナーなのになぜ Azure を使ってるの？

Web 制作的に使って欲しいオススメ機能

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

＜番外編＞ Azure WebApps でいろいろチャレンジしてみた件

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

7

実際に使う前の Azure のイメージ

8

インフラエンジニアやプログラマが知識と技術を駆使して使うイメージ–そもそも用語に馴染みがなかった• デプロイ？

• リージョン？

専門知識が無いと使えない？–使えるように設定するの無理そう･･･

とりあえず Web 制作には関係なさそう

使ってみたら実はそんなに難しくない！

やりたいことは、ほぼポータル画面から設定・変更できる

レンタルサーバーと同じようにも使える– レンサバよりラクで便利な場合が多い

専用のツールが必要なものもWebApps の機能を工夫すれば代替可能– 例： A / B テストなど

しくじったらとりあえず消せばいい

9

Azure WebApps はデザイナーや Web 制作者に優しい！

ポータル画面でやりたいことはできる

10

管理ポータル画面で、よく使う必要な機能は操作できる–コマンド知らなくて大丈夫–スケールアウトやフェイルオーバーなどの

独自設計が基本不要

Azure 新旧ポータル対応表https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/

11

1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど

2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け（仮想マシン）

3WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け

Microsoft Azure についてざっくり説明

12

Azure WebApps のメリット

クラウド上に作られたレンタルサーバーのようなもの

数分で作れる Web 制作・配信・構築環境構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など

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

インフラなどの知識の無い人でもクラウドサービスの利点を活かせ

る！

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

13

14

Web 構築環境が一瞬でできる Web アプリ

ポータル画面で「 Web＋モバイル」を選び、「アプリの名前」を入力するだけ

容量無制限の Azure BLOB ストレージ

画像や動画など容量が大きなファイルを置くのに適している

Web サーバー代わりにも使えるカスタムドメインの設定も可能WordPress の場合はプラグインがある–Windows Azure Storage for WordPress

15

Azure BLOB ストレージは容量無制限課金制（ 1GB 2.45円くらい）

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

16

動画配信もすぐに対応できる

17

ライブストリーム配信やオンデマンドで配信ができる

インデックス作成ができる自動的にキャプションを追加DRM （著作権保護機能）の追加も可能SSL接続経由でコンテンツのストリーミング

も可能

Azure Media Services動画配信サーバを用意したり、動画のエンコードを自力でやったりという手順は一切なく、Azure 管理ポータルから簡単に準備して配信できる。

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

18

テスト環境と本番環境を一瞬で入れ替え

19

ステージング環境の URL は「サイト名 -staging.azurewebsites.net 」

ワンクリックでテストと本番を入れ替え

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

デプロイ（アップロード）方法が選べる

20

FTP 、 Git 、 Dropbox 、 OneDrive…

デプロイ（アップロード）方法が選べる

21

Microsoft Azure WebApps と Bitbucket を使って Git デプロイ環境を構築してみた話。http://zuvuyalink.net/nrjlog/archives/2486

22

急激なアクセス過多も安心！スケールアウト

スケールアウトとは？

急激なアクセス過多も安心！スケールアウト

23

手動でスケールアウトする

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

24

一般的な WordPress サイトの構成

25

データベースに MySQL を採用

WordPress の構成を工夫

26

WordPress と画像を別々に配信するように構成

使用するプラグイン

27

Windows Azure Storage for WordPress–メディアコンテンツ ( 画像 / 動画 ) を

AzureBLOB ストレージに配置する

SQLite Integration–MySQL の代替用

WP-Mail-SMTP or SendGrid– Azure でメール送信できるようにする

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

WordPress の「 wp-config.php 」に追記

28

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

29

WordPress サイトの自動バックアップ・復元が可能

データベースのバックアップ対策をわざわざしなくて大丈夫–データベースバックアップ用のプラグイン不要

データベースの復旧が必要な場合はFTP等でファイルをあげるだけ

30

改ざん検知も入れられる

2 つの Powershell スクリプトWeb ジョブ＋ scheduler＋外部 SMTP– CreateHashDb は「 DB を作るとき実行する」– IntegrityCheck は「定期的に実行する」

31

Azure WebApps を使うといいところ

32

データベースは SQLite がオススメWordPress サイトでもワンクリック

でテスト環境と本番環境を入れ替え可能

自動バックアップができる、復旧もラク改ざん検知（簡易的）も入れられる

WordPress サイトの構築がものすごくラクになる♪

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

33

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

34

ステージング機能とトラフィックルーティング、 GoogleAnalyst を利用。

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

35

iPhone で Webページを修正する

36

Dropbox or OneDrive を使ってデプロイ–事前に上記方法でデプロイできるように設定

– iPhone には無料の FTP クライアントがない問題をこれで回避する

HTML や CSS の修正ができるエディタとして「 iEditor 」を使用

✕複数のデプロイ方法を利用。

37

iPhone側の作業

Azure側の作業

iPhone で WordPress をインストール

38

✕Dropbox を使ってデプロイ– Dropbox でデプロイできるように設定–WordPress ファイルは zip化しておく– iPhone には無料の FTP クライアントがない問題をこれで回避する

Kudu で zip ファイルを解凍

クラシックポータルで頑張るとできる！

iPhone で WordPress をインストール

39

がんばります…_(´ཀ` 」 ∠ )_

Azure WebApps のオススメポイント

インフラ知識が無くてもクラウドサービスの利点を活かせる

実は Web 制作向きの便利機能が多い大体ポータル画面でやりたいことは

操作できる各種機能を工夫すれば色々できる

40

Azure WebApps はとても便利なので

ぜひ使ってみてください！！

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

今回の内容はブログに記事書いてます。ご興味のある方はぜひ！

41

http://zuvuyalink.net/nrjlog/Blog