Web デザイナーの私がMicrosoft Azure を使うようになったワケ

株式会社オルターブース デザインアーキテクトJapan Azure User Group 女子部松本 典子

2016 / 11 /03 　 Geek Women Japan 2016

自己紹介

2

修羅の国 福岡出身・在住JAZUG 、 JAZUG 女子部、ふくあずWeb 系勉強会「 Web っちゃ」主催Microsoft MVP for Microsoft Azure

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

デザインに関する業務全般やってます。（ Web デザイン・ UI 設計・ DTP… ）

株式会社オルタブース デザインアーキテクト @nori790822

https://www.facebook.com/noriji822

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

3

こういう Web サイト作ってます

4

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

きっかけは？クラウドって難しいイメージあるけど…？

5

私のこれまでの経歴

6

新卒時は地元北九州の印刷会社–まったくのド素人（作品持ち込みで入社）

–デザインの基礎・各種アプリの使い方

Web 制作会社や通販会社の Web 部門–ビジュアルデザイン ＆ アクセス解析など

フリーランスで活動– 2014 年末に Microsoft Azure デビュー

2016 年 5 月オルターブースに JOIN–会社立ち上げ時から顧問デザイナー

Microsoft Azure を使うきっかけ

7

軽い感じで紹介されたのに、容赦なく Azure の基礎を叩き込まれる–まったくのド素人に Azure の専門知識

きっかけつくった人デプロイ王子（現： MS の中の人）

デザイナーが Azure ガッツリ使えるようになったら面白いと思うー

ちょっと、日本語でおｋ

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

8

インフラエンジニアやプログラマが知識と技術を駆使して使うイメージ–まず用語や知識に馴染みがない、知らない• Pass と IaaS ってなんぞ・・・

• 黒い画面怖いし・・・

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

とりあえずデザイナーが手を出せるモノではなさそう

Azure App Service がおすすめ

9

WebApps LogicApps

APIApps MobileApps

Web サイトや Web アプリケーションをホストするために最適化された PaaS サービス

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

10

管理ポータル画面で、よく使う必要な機能は操作できる–黒い画面と基本戦わなくて OK–スケールアウトやフェイルオーバーなどの

独自設計が基本不要

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

11

Azure WebApps のメリット

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

数分でできる Web 制作・動画配信・構築環境

構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など

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

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

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

12

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

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

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

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

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

私の Azure 勉強法

13

自分が馴染みがあることから「実際に」やってみる–自分のブログ（ WordPress ）を Azure に移行–Web サイト公開環境を Azure WebApps で構築

実際にやってみると絶望的にハマる・・・–実際にやらないと理解できない–自分的にハマった・教えてもらったことは

すぐブログ記事に

nrjlog http://zuvuyalink.net/nrjlog/

Microsoft MVP とは

https://www.microsoft.com/ja-jp/communities/mvp/14

Microsoft MVP とは

2016 年 1 月にMicrosoft MVP for Microsoft Azure受賞

15

デザイナー視点で MVP になってよかったこと

16

いろいろな立場の人と出会う機会が増える自分の専門分野以外の様々なジャンルを学ぶ機会が増える

開発・インフラの人たちと仕事のときにディスカッションする機会をもらえる–これまで環境構築はオマカセが多かった

–Web的な環境はこうしたいとか

自身の視野がとても広くなりやれることの選択肢が増えた

Web 制作がラクになる！App Service オススメ便利機能

便利な 7 つの機能について

17

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

18

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

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

19

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

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

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

20

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

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

21

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

22

FTP 、 Git 、 Dropbox 、 OneDrive…

Git デプロイ環境の構築例

23

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

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

24

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

ステージングでテスト環境と本番環境を入れ替えできる！！

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

25

スケールアウトとは？

26

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

スケールアウトの設定方法

7. プログラミングできなくても OK ！Logic App

27

コードを記述せずコネクターをつなげることで、クラウドベースのさまざまなアプリケーションに接続する仕組みを簡単・手軽に作れる便利機能

Logic App について

28

ノンプログラミングで流行りの BOT を作成できる！

コミュニティのご紹介

29

JAZUG （ Japan Azure User Group ）

30

• Japan Azure User Group–略称 JAZUG ( じゃずゆーじー )

• Microsoft Azure を学び、楽しみ、活かす、日本のユーザーグループ

• 2010 年 8 月 26 日に結成したコミュニティ• 各地に支部あり

https://www.facebook.com/groups/jazug/

JAZUG 女子部のご紹介

31

Japan Azure User Group 女子部略称： JAZUG( じゃずゆーじー ) 女子部

JAZUG 女子部とは：「 IT 業界の女子と仲良くなりたい♡」「男性ばっかりのところに入っていくのは勇気が…」「でも Azure には興味があるの！！！」というお嬢様方からのご参加をお待ちしています♫

http://r.jazug.jp/https://www.facebook.com/groups/jazug.girls/

Web サイト

FB グループ

まとめ

32

システム会社の 1 人デザイナーとして

33

エンジニアとデザイナーの間を埋める努力–デザインへの意見は遠慮されやすい

「デザイン」の意味を伝える–デザインの本質って？

–ビジュアルデザインが「全て」ではない

違う立場だからこそ色々気づく。それを活かせばもっと良くなる！

今後やっていきたいこと

34

「クラウド ×Web のイイ関係」

をもっと広めていきたい !!Azure WebApps(PaaS) は Web 制作者の助

けになる機能が多くあることを知ってほしいWeb 制作者自身が「クラウドを使う」という

選択肢を持ってもらいたい

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