2016年10月22日　ハンズオン資料です

1. Microsoft Azure
+
Movable Type
ハンズオンセミナー
2016年10月22日
シックス・アパート株式会社
長内 毅志
1

2. 長内毅志
–2011年～ Movable Typeプロダクトマネージャー
–2014年～ ディベロッパーリレーションマネージャー
エバンジェリスト
–趣味 ダンス (ストリート、ジャズ)
ジョギング (サブフォー)
英語の勉強 (TOEIC 875, 英検準1級)
家族と過ごすこと

3. 本日のハンズオン内容
3
• Movable Type とは
• Microsoft Azure のアカウントアクティベート
–Microsoft アカウントの作成
–Azure アカウントの作成
• 仮想マシンの立ち上げ
• Movable Type のセットアップ
• 環境のクリーンアップ

4. https://goo.gl/yZtxzn
4

5. Movable Type とは
5

6. Movable Type（ムーバブル・タイプ）とは
サンフランシスコ生まれの
世界標準CMSパブリッシングプラットフォーム。
世界中のユーザーに使われ15年。
2001年 2016年
Movable Type 1.0 Movable Type 6.3
サンフランシスコのシックス・アパー
ト創業者夫妻が自分たちの日記を書く
ために開発したブログツール
国内導入実績 ナンバー１。ウェブに
とどまらないコンテンツ管理が可能な
CMSソフトウェアとして進化中。
Movable Type とは

7. • ブログから数万ページに及び大規模サイトまで
5万件以上の導入実績
ECサイト
イントラサイト・WEB社内報
メディアサイト・企業オウンドメディア
会員制サイト・コミュニティサイト
実績
コーポレートサイト
5万件以上の導入実績
5万件以上！

8. ビジネスユーザーに絶大な支持
日経平均225社の
半数以上がMTユーザー

9. 安全性・セキュリティについて 安全性
タグだけでセキュア
なサイトを構築
CMSと公開サイト
のパスを分離可能
不正ログインに対す
るアカウントロック
細かな権限設定
で役割を明確に
安全性が高い
安全性が高い

10. サポートがある
• 開発拠点は日本
• オンラインサポート
• 月曜日 - 金曜日 10:00 - 17:00
–（土曜・日曜・年末年始・休祝日を除く）
• サポート内容は以下
–http://www.sixapart.jp/movabletype/support/support_rules.html
安心なサポートがある

11. Movable Type の特徴
11

12. 特徴
12
• プログラムを書かずにタグだけでいろいろな出力処理
が実装できる
• CMSサーバーとコンテンツを分離可能
• 不正ログインに対するアカウントロックやパスワード
設定など、セキュリティ対策に関する機能が豊富
• 国内に取り扱い可能な制作会社が多数存在する

13. 13
• 完成されたテンプレートエンジン
• デザインの変更が容易
• Data APIによるデータ入出力の拡張性
• 静的生成のためさまざまなサーバー構成に対応可能

14. • さまざまなプログラム言語からREST/JSON方式で Movable Type にア
クセスし、データの取得や更新が可能。
• CMSで管理しているデータを、サイト上で自由に呼び出したり、
独自の管理画面やアプリの開発、他のプラットフォームとの連携が
容易に。
Data API

15. ハンズオン
15

16. 本日のシナリオ
16
Microsoft Azure
仮想マシン
[CMSサーバー兼
ウェブサーバー]
※本日の内容をわかりやすくするために図式化したものであり、
厳密には事実と異なる部分があります。ご了承ください。

17. 本日のシナリオ(詳細)
17
Microsoft Azure
仮想マシン
[CMSサーバー兼
ウェブサーバー]
http(80)、SSH(22)
のみ通信可能なファイヤーウォール
インターネットゲートウェイ
(グローバルIP)
NAT
※本日の内容をわかりやすくするために図式化したものであり、
厳密には事実と異なる場合があります。ご了承ください。
サブネット

18. Microsoft Azureアカウントの
アクティベーション
18

19. 19
• やること
–Microsoft アカウントの作成
=>サインイン
–Azureアカウントの作成
=>サインイン

20. 20
• https://azure.microsoft.com/ja-jp/
へアクセス
• 検索エンジンから「Microsoft Azure」を検索

21. Microsoft Azure のトップ画面
21
「無料で始める」を
クリック

22. 22
「無料で始める」を
クリック

23. 23
Microsoft アカウントがある方はサインイン
無い方は「新しいアカウントを取得」をクリック

24. 24
• Microsoft アカウントをお持ちでない方は、アカウン
ト作成を行います。
• Microsoft アカウントをお持ちの方は、少しお待ちく
ださい

25. 25
Microsoft アカウントで利用するメールアドレス
と、パスワードを入力し、「次へ」をクリック

26. 26
入力したメールアドレス宛に、セットアップ用の
メールが届きます。

27. 27
最初の「下のリンクをクリックしてアカウントを確認してく
ださい」をクリックして、MSアカウントを作成します

28. 無料パスコードを入力
28
• http://www.microsoftazurepass.com/
へアクセス

29. 29
国名は「Japan」
下欄に無料体験コードを入力

30. 30
「Sign in」をクリックして、先程作成した
Microsoft アカウントでサインインします

31. 31
First Name は名、Last Nameは姓を入力
Microsoftアカウントを確認して
Submitをクリック

32. 32
「Activate」をクリックします

33. 33
国名、名前などを入力します。

34. 34
連絡先電話番号を入力します

35. 35
チェックボックスをチェックして、
「サインアップ」をクリックします

36. 36
入力が全て完了すると、
処理待ちの画面になります。

37. 37
「サービスの管理を開始する」をクリックします。

38. 38
Microsoft Azure のポータル画面に移動します

39. • 本日から30日以内、$100 分まで使用できます。
• $100 使い切るか、30日経過するかで、このコードは
無効となります。
• Azureのアカウントはのこりますので、クレジットカ
ード情報を登録すると、引き続き利用できます。
今回の無料体験コードについて
39

40. 仮想マシン
(Virtual Machine) の立ち上げ
40

41. Virtual Machine(仮想マシン)とは
41
• Azure上で利用できるサーバーイメージ
• Windows だけでなく、Linuxなども利用可能
• マーケットプレースで様々なサーバーイメージを入手
できる

42. 42
「Virtual Machines」をクリックします。

43. 43
「追加」をクリックします。

44. 44
「Market Place」の検索欄に
[nginx]と入力して検索を行
います。

45. 45
[nginx]を設定した仮想マシン一覧が表示されます。
名前：nginx、公開元：Docker
になっている仮想マシンを選択します。

46. 46
画面右欄に、仮想マシンの説明が表示されます。
下部にある「作成」をクリックします。

47. 47
VM disk typeを選択し
ます。初期状態
「Premium(SSD)」で
かまいません。

48. 48
ユーザー名を指定しま
す。仮想マシンにSSH
接続する際のユーザー
名となります。

49. 49
認証の種類を選択します。
今回は「パスワード」を
選びます。

50. 50
「パスワード」
「パスワードの確認」を
入力します。

51. 51
「リソースグループ」を
作成します。
「新規作成」を選び、
任意の名前を入力し
ます。

52. 52
「場所」を選択します。
「東日本」を選びます。

53. 53
すべての設定が完了し
たら「OK」を選択します。

54. 54
仮想マシンのサイズを
決定します。初期状態
ではお勧めのサイズが
表示されています。
「すべて表示」をクリック
してみましょう。

55. 55
選択可能な仮想マシン
のサイズがすべて表示
されます。今回は
「DS1_V2 Standard」
を選んでみましょう。

56. 56
「オプション機能の構成」
画面が表示されます。
ここでは何も変更せずに、
下部の「OK」ボタンを
クリックします。

57. 57
仮想マシン、および関連サービスの
デプロイが開始されます。完了までに
少し時間がかかるので、待ちます。

58. 58
デプロイが完了したら、左メニューから
「Virtual Machines」をクリックします。
一覧画面に作成した仮想マシンが表示さ
れますので、クリックします。

59. 59
作成した仮想マシンの詳細情
報が表示します。「概要」を選び、
「パブリックIP」を確認します。

60. 60
ブラウザに、「Public IP」のアドレスを入力してみましょう。
nginxの初期画面が表示されます。
(htmlが何もない状態なので、エラー画面が出ます。)
仮想マシンに接続して、htmlファイルをアップロードする
と、表示されるようになります。

61. 61
左上の「Microsoft Azure」をクリックすると、ダッ
シュボードに戻ります。左のメニューから「すべ
てのリソース」をクリックします。

62. 62
今回の仮想マシン公開に関連するサービス一覧が
表示されます。この中から
「ネットワーク・セキュリティグループ」を選びます。

63. 63
ネットワークセキュリティの設定画面が表示されま
す。ここではセキュリティ規則(ファイヤーウォール)
の設定ができます。

64. 64
「受信セキュリティ規則」の「HTTP(TCP/80)」
を選んでみましょう。

65. 65
画面右側に詳細設定画面
が表示されます。
「アクション」を「拒否」にし
て、上部の保存ボタンを押
し、設定を保存します。

66. 66
「受信セキュリティ規則」で、HTTPが「Deny」になって
いることが確認できます。
もう一度、ブラウザで、仮想マシンのパブリックIPへ
アクセス・リロードしてみましょう。

67. 67
ブラウザで閲覧できていた仮想マシンのウェブサー
バーへ、アクセスできなくなっています。
Azureのセキュリティ設定(ファイヤーウォール)が
有効化されたからです。

68. リソースグループのサービス各役割
68
Microsoft Azure
仮想マシン+
ストレージサービス
ネットワークセキュリティグループ
パブリックIPアドレス
ネットワーク
インターフェース
※本日の内容をわかりやすくするために図式化したものであり、
厳密には事実と異なる場合があります。ご了承ください。
仮想ネットワーク

69. リソースグループ内サービスの各役割
69
Microsoft Azure
仮想マシン
[CMSサーバー兼
ウェブサーバー]
http(80)、SSH(22)
のみ通信可能なファイヤーウォール
インターネットゲートウェイ
(グローバルIP)
NAT
※本日の内容をわかりやすくするために図式化したものであり、
厳密には事実と異なる場合があります。ご了承ください。
サブネット

70. • サービスを提供するために構築した、サーバー構成一
式(各種サービス一式)をグループ化したもの
リソースグループとは
70
※本日の内容をわかりやすくするために文書化したものであり、
厳密には事実と異なる場合があります。ご了承ください。

71. Movable Type 用のサーバー環境
設定
71

72. 72
• Movable Typeの動作環境を設定します。
• 今回はハンズオンのプログラム構成上、スキップしま
す。

73. Movable Type インストールのための環境設定
73
• MovableType.jp(MTの技術ドキュメント)
–https://www.movabletype.jp/documentation/
• さくらのナレッジ
–http://knowledge.sakura.ad.jp/beginner/2074/

74. Movable Type のインストール
74

75. 75
• 配布した用紙の「インストール用URL」をブラウザに
入力してアクセスします

76. 76
配布用紙の「インストール用URL」へアクセスします。
Movable Type の初期画面が表示されるので
「Movable Type にサインイン」をクリックします。

77. 77
[開始]をクリックします。

78. 78
[システムチェック]画面が表示されます。
「次へ」をクリックします。

79. 79
[データベース設定]
の画面に移動します。
データベースは
「MySQL」
データベースサー
バーは「localhost」の
ままにします。

80. 80
データベース名、を
手元の用紙を元に
入力します。

81. 81
ユーザー名は
handson
パスワードは
H6vBAbsZ
と入力します。

82. 82
すべての入力が終わっ
たら
「接続テスト」をクリック
します。

83. 83
データベースの接続設定が成功すると、画面が切り替
わります。「次へ」をクリックします。

84. 84
[システムメールアドレス]の入力画面になります。みなさん
がお使いのメールアドレスを入力して「次へ」をクリックしま
す。「メール送信プログラム」は今回設定しません。

85. 85
[Movable Type Proの設定を完了しました。]とメッセージ
が表示されたら、「次へ」をクリックします。

86. 86
ユーザー名、表示名
を入力します。両方
同じで名前でOKです。
ユーザー名は
Movable Type のサ
インインアカウントに
なります。

87. 87
電子メール欄にメー
ルアドレスを入力し
ます。
使用言語は「日本
語」のままで変更し
ません。

88. 88
パスワードを入力します。パ
スワードは8文字以上で指
定します。Movable Type の
サインインを行うときに、
「ユーザー名」とともに使用
します。

89. 89
アカウント設定が全て終
わったら「次へ」をクリックし
ます。

90. 90
「ウェブサイト名」はそのままで
変更しません。
「ウェブサイトURL」「ウェブサイ
トパス」は、用紙を元に入力し
ます。
「テーマ」「タイムゾーン」は変
更しません。

91. 91
すべての設定が終わったら「イ
ンストール」をクリックします。

92. 92
Movable Typeのインストールが
始まります。

93. 93
インストールが完了したら「Movable Typeにサインイン」
をクリックします。

94. 94
Movable Typeのユーザーダッシュボードが表
示されたら、インストール完了です。

95. Movable Type でウェブサイトを
出力・更新する
95

96. 96
ユーザーダッシュボードから「First
Website」をクリックします

97. 97
「First Website」の操作画面に移動します。
右上の丸矢印アイコンをクリックしてみま
しょう。

98. 98
再構築用ポップアップ画面が表示
されます。「再構築」とは、Movable
Type で htmlを出力する処理です。
「再構築」ボタンをクリックしましょう。

99. 99
「再構築」が始まり、
htmlの出力を行います。
しばらく待ちます。

100. 100
再構築が終了したら、
「サイトを見る」をクリック
します。

101. 101
最初のウェブサイトが出力されているのが
確認できます。

102. 102
いま出力したウェブサイトに新しい記事を追加してみま
しょう。左メニューの [記事] => [新規] 、もしくは右上黄
色のボタンから [新規作成] => [記事] を選びます。

103. 103
最初の記事編集画面に移動します。「タイトル」と「本
文」に適当な文字・文章を入力してみましょう。

104. 104
入力が終わったら画面右
の「公開」ボタンをクリックし
ます。

105. 105
公開が終わったら、画面上部の「記事を見る」か、右上
の四角いアイコンをクリックしてみましょう。

106. 106
入力・公開した記事が公開されて
いることが確認できます。

107. Movable Typeの管理画面と
基本操作

108. 管理画面
Movable Type の管理画面はユーザーダッシュボードを起
点に、3層構造になっています。

109. ウェブサイトとブログの違い
• ウェブサイト…
「サイト」「ホームページ」全体を管理する仕組み
• ブログ…
ウェブサイトの中にある、更新頻度の高いコンテンツを管理する仕組
み
「ブログ」「ニュースリリース」「IR情報」
「新製品紹介」など
参考リンク3：
http://www.movabletype.jp/documentation/mt6/websites/

110. 1つのWebサイトを構成する例

111. 複数のWebサイトを構成する例

112. ダッシュボード
左上の三角アイコンをクリックして、操作したいモードを切
り替えながら、ウェブサイトやブログを管理していきます。

113. 環境のクリーンアップ
113

114. 114
• 最後に、今日のハンズオンで作成した環境を削除して
終了します。
• Microsoft Azure の管理画面に移動しましょう。

115. 115
左メニューから「リソースグループ」
を選択し、本日作成したリソースグループをク
リックします。

116. 116
今回のハンズオンで
作成したサービスの
一覧が表示されます。

117. 117
右画面上部の「削除」
をクリックしましょう。

118. 118
削除の確認画面が表
示されます。入力欄
に、今回作成したリ
ソースグループ名を
入力します。

119. 119
正しいリソース名を入
力すると「削除」ボタ
ンが選択できるように
なります。
「削除」ボタンをクリッ
クします。

120. 120
削除中の処理画面が表示され、
今回の環境一式の削除を開始します。

121. 121
左メニューから「すべてのリソース」を選択しま
しょう。何も表示されていなかったら、環境のク
リーンアップは終了です。

122. 122
削除が完了したのに、リソースが表示されている
場合、ブラウザキャッシュの影響が考えられます。
画面上部の「更新」をクリックしてみましょう。

123. Microsoft Azureと
Movable Type を
より深く学びたい方のために
123

124. Microsoft Azure のセミナーもいっぱい「mstep」
124
※Microsoft パートナープログラムへの登録が必要です
mstep で検索

125. Azure のユーザーグループ「JAZUG」
125
JAZUG で検索

126. Movable Type 開発者のためのライセンス
126
MT 開発者ライセンスで検索

127. Movable Type のセミナー情報
127
MT セミナーで検索

128. Movable Type のユーザーグループ情報
128
MT ユーザーグループで検索

129. 全国に広がるMTユーザーグループ
• MT蝦夷
• MT東北
• MT東京
• MTなごや
• MT愛媛
• MT鹿児島
• MT関西
• MT広島
• MT福岡
• MT長野
• MT ∗/ NIIGATA(新潟)
• MT SAGA
• MT熊本

131. MTDDC Meetup TOKYO 2015
200人以上が参加

132. MTDDC Meetup TOKTO 2016 開催
132
11月12日(土)お台場で開催！

133. • ありがとうございました
133