Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webデザイナー視点で使ってみた Microsoft Azureの話

2,615 views

Published on

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

Published in: Technology
  • Be the first to comment

Webデザイナー視点で使ってみた Microsoft Azureの話

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

×