webデザイナー視点で使ってみたmicrosoft azureの話
TRANSCRIPT
![Page 1: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/1.jpg)
Web デザイナー視点で使ってみたMicrosoft Azure の話
松本 典子Noriko Matsumoto
フリーランス Web デザイナー / ディレクター
2015 / 11 / 21 プログラミング生放送勉強会 第 37 回@福岡
![Page 2: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/2.jpg)
福岡県北九州市在住フリーランス
Web デザイナー / ディレクターインフラ知識ゼロ…昨年 12 月に Azure デビュー
2
自己紹介
松本 典子(まつもと のりこ)
Web に関する業務全般やってます。(提案~ Web ページ制作~運用・マーケティング etc… )
![Page 3: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/3.jpg)
3
こういうデザイン作ってます
![Page 4: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/4.jpg)
本日お話しする内容
Microsoft Azure についてWeb デザイナー視点で便利と思った機能– Web 構築環境が一瞬でできる Web アプリ
– Web サイトのバックアップ・復元
– 急激なアクセス増も安心!スケールアウト
– 一瞬でテスト環境と本番環境入れ替える方法
– YouTube のような制御できる動画を配信できる
もっと便利に!Web 的に工夫して使ってみた
4
![Page 5: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/5.jpg)
Microsoft Azure について
5
![Page 6: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/6.jpg)
Microsoft Azure について
Microsoft Azure についてざっくり説明
66
1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど
2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け(仮想マシン)
3 WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け
![Page 7: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/7.jpg)
Microsoft Azure について
Microsoft Azure についてざっくり説明
77
1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど
2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け(仮想マシン)
3 WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け
![Page 8: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/8.jpg)
Azure WebApps について
8
![Page 9: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/9.jpg)
Azure WebApps について
9
![Page 10: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/10.jpg)
Azure WebApps ってこんな感じ
10
「 STANDARD 」がおすすめ 50GB まで「独自ドメインサイト」が入れ放題
– 約 8000 円で– WordPress だったら 1000 サイト入る計算
5 ドメインまで SSL も OK– 6 サイト目から 918 円/月
構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など
自分専用で環境を細かく設定できるレンタルサーバーを持てるイメージ
![Page 11: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/11.jpg)
Azure WebApps のいいところ Azure を従来のレンタルサーバーの
ような形で使うことができる 管理ポータル画面で、よく使う必要な機能は
操作できる– コマンド知らなくて大丈夫
– スケールアウト・フェイルオーバーも自力で設計せずに使える
11
![Page 12: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/12.jpg)
Web デザイナー視点で便利と思った Azure の機能
12
![Page 13: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/13.jpg)
Web 構築環境が一瞬でできる Web アプリ
13
管理画面から「新規作成」を選ぶだけ
![Page 14: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/14.jpg)
Web サイトの自動バックアップ・復元
14
完全バックアップを 1 日 1 回やってくれる–設定しておけば毎日
バックアップデータはストレージに保存されていくので容量を圧迫しない–極論 365 日前の状態に戻すこともできる
WordPress も SQLite を採用すればDB のバックアップ対策しなくて OK– DB バックアップ用のプラグイン不要–復旧時は FTP でファイルをあげるだけ
![Page 15: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/15.jpg)
Web サイトの自動バックアップ・復元
15
![Page 16: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/16.jpg)
テスト環境と本番環境を一瞬で入れ替え
16
「ステージング」でテスト環境と本番環境をワンクリックで入れ替えできる!!
![Page 17: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/17.jpg)
テスト環境と本番環境を一瞬で入れ替え
17
ステージング環境の URL は「サイト名 -staging.azurewebsites.net 」
「新しい展開スロットの追加」で作成
ワンクリックでテストと本番を入れ替え
![Page 18: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/18.jpg)
急激なアクセス増も安心!スケールアウト
スケールアウトとは?
18
![Page 19: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/19.jpg)
急激なアクセス増も安心!スケールアウト
手動でスケールアウトする
19
![Page 20: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/20.jpg)
急激なアクセス増も安心!スケールアウト
時間でスケジュールしスケールアウトする
20
![Page 21: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/21.jpg)
YouTube のような制御できる動画を配信できる
Azure Media Services で YouTubeのような制御できる動画が配信できる
動画配信サーバを用意する必要がない動画を配信できる状態にエンコードする
必要もなしライブストリーミング配信や
コンテンツ保護もできる
21
![Page 22: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/22.jpg)
もっと便利に!Web 的に工夫して使ってみたAzure WebApps の各機能を工夫して使ってみました。
22
![Page 23: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/23.jpg)
ファイル転送サービス的に使ってみる
宅ふぁいる便や firestorage の変わりBLOB ストレージは容量無制限で
画像入れ放題ダウンロードに期限がない納品データのバックアップの意味もFTP クライアントではなく
専用クライアントが必要–「 Azure Storage Explorer 」が便利
23
BLOB ストレージを利用。
![Page 24: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/24.jpg)
制作データを丸ごとバックアップ
Mac でいうと Time Machine のクラウド版なイメージ
geo 冗長ストレージ (GRS) ではデータのコピーが 6 つ保持される
一度スケジュールを設定すると自動でバックアップし続けてくれる– デザインデータなどのバックアップに便利
1 回の操作でバックアップ可能な対象ファイルサイズは最大 53TB
24
Azure Backup を利用。
![Page 25: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/25.jpg)
iPhone で Web ページを修正する
WebApps は FTP 以外にも Dropbox でのデプロイが可能– 事前に Dropbox でデプロイできるように設定
– iPhone には無料の FTP クライアントがない問題をこれで回避する
HTML や CSS の修正ができるエディタとして「 iEditor 」を使用 2
5
✕複数のデプロイ方法を利用。
![Page 26: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/26.jpg)
26
iPhone側の作業
Azure側の作業
![Page 27: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/27.jpg)
A/B テストを実施する
27
A/B テストとは?異なる 2パターンの Web ページやバナーを用意し、実際にユーザーに利用させて効果を比較するテスト。
![Page 28: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/28.jpg)
A/B テストを実施する
28
新規 Web サイトを作成展開スロットを準備「オリジナル」と「スロット」
それぞれにテストしたいデザインをアップロード
ステージング機能とトラフィックルーティングを利用。
![Page 29: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/29.jpg)
A/B テストを実施する
29
トラフィックルーティングを設定する
![Page 30: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/30.jpg)
A/B テストを実施する
30
![Page 31: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/31.jpg)
WebApps の魅力、総まとめ
31
1 分程度で Web 構築環境が作れる FTP 操作で通常のレンタルサーバーのように
使える– Visual Studio Online 、 GitHub 、 Git 、 Dropbox等、その他のデプロイ方法も複数選択可能
Web 制作の根本的なワークフロー効率化に役立つ
インフラ的な専門知識・技術が無くても、スケールアウトなどアクセス負荷にも耐える「サイトを落とさない」仕組みをデザイナーが構築できる
![Page 32: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/32.jpg)
最後に
32
Web デザイナー視点で実際に使ってみたAzure の色々な機能についてブログ書いてます。
http://zuvuyalink.net/nrjlog/Blog
![Page 33: Webデザイナー視点で使ってみたMicrosoft Azureの話](https://reader035.vdocuments.mx/reader035/viewer/2022062503/587565ec1a28abd80a8b513f/html5/thumbnails/33.jpg)
ご静聴ありがとうございました!