2017年10月23日 Movable Type for Azure ハンズオンの資料です。

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

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

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

4. Movable Type とは
4

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

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

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

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

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

10. Movable Type の特徴
10

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

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

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

14. ハンズオン
14

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

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

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

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

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

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

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

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

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

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

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

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

27. 27
携帯電話の番号を入力して、テキストメッセー
ジを受け取ります。電話でもOKです。

28. 28
クレジットカード情報を
入力します。課金は、
無料枠を使い切るま
で始まりません。

29. 29
テクニカルサポー
トが「ない」を選択
して次へ進み、ア
カウント作成を完
了します。

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

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

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

33. Virtual Machine(仮想マシン)とは
33
• Azure上で利用できるサーバーイメージ
• Windows だけでなく、Linuxなども利用可能
• マーケットプレースで様々なサーバーイメージを入手できる
• WebApps = 共用サーバーなら
仮想マシン＝VPS と考えると理解しやすい

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

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

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

37. 37
[Movable Type 6]というVMが見つかります。
この仮想マシンを選択します。

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

39. 39
名前を入力します。
半角英数字で指定し
てください。

40. 40
VMディスクの種類を
選びます。「SSD」でOK
です。

41. 41
ユーザー名を指定し
ます。任意の半角英
数字を入力します。

42. 42
認証の種類を選びます。
SSHなどでVMに接続する
ときに使います。[パス
ワード]を選び、半角英数
記号12文字以上を指定し
ます。

43. 43
サブスクリプションを
選びます。みなさんが
利用しているAzure の
サブスクリプションを
選択します。

44. 44
リソースグループを新
規作成します。名前
を任意で設定します。

45. • 設定したリソースグループの名前を控えておきます
45

46. 46
仮想マシンを配置す
る場所を選択します。
今回は[東日本]を選
びます。

47. 47
すべての設定が終
わったら「OK」ボタン
をクリックします。

48. 48
「サポートされる
ディスクの種類」
を[SSD]にします。

49. 49
「すべて表示」を
選びます。

50. 50
「DS1_V2 Standard」を
選び下部の「選択」ボ
タンをクリックします。

51. 51
「オプション昨日の選
択」画面に移動しま
す。設定はそのまま
で下部の「OK」ボタン
をクリックします。

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

53. 53
選択可能な仮想マシン
のサイズがすべて表示
されます。今回は
「DS1_V2 Standard」
を選び、下部の「選択」
ボタンをクリックします。

54. • 表示されている料金は、Movable Type for Azureを1ヶ月使
った場合の料金です。
• Movable Type for Azure には1ヶ月間の無料試用期間があ
るため、上記の金額は適用されません。
• 今回のハンズオンでは￥10.5円程度／時間のVM料金の
みかかります。
料金についての注釈
54

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

56. 56
「検証に成功しました」とい
うメッセージが表示された
ら、下部の「購入」ボタンを
クリックします。

57. 57
「デプロイを実行していま
す」というメッセージが表示
されるので、少し待ちます。

58. 58
作成した仮想マシンが実行
中になったら、クリックして
詳細を確認します。

59. 59
[パブリックIPアドレス]という
値があります。IPアドレスを
コピーして、ブラウザでアク
セスします。

60. 60
Movable Type の初期画面
が表示されます。「Start
Movable Type」をクリックし
て、初期設定を開始します。

61. 61
「コンピュータ名」か「リソース
ID」の入力を求められます。
今回はコンピュータ名を入力
することにしましょう。Azureの
管理画面に戻ります。

62. 62
「コンピュータ名」が管理画面
に表示されています。この文
字をコピーします。

63. 63
先程確認した「コンピュータ
名」を入力して[Continue]ボタ
ンをクリックします。

64. 64
「コンピュータ名」が正しく入
力されると、画面が切り替わ
ります。
[Username][Display Name]を
入力しましょう。[Username]
はMovable Type へサインイ
ンするためのIDとなります。

65. 65
[Email Address]にみなさんが
普段使用しているメールアド
レスを入力します。
[Use this as system email
addresss]へチェックを入れま
す。

66. 66
[Language]を日本語に変更し
ます。[Password][Confirm
Password]へ、利用したいパ
スワードを入力します。

67. 67
すべての設定が終わったら
[Continue]をクリックします。

68. 68
[Timezone]を「UTC+9」に指定
します。設定が終わったら
[Finish Install]ボタンをクリッ
クします。

69. 69
Movable Type のインストー
ルが始まります。終了した
ら[Sign in to Movable Type]
をクリックします。

70. 70
Movable Type ダッシュボー
ドが表示されたらインストー
ル成功です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

97. 97
右画面上部の
「リソースグループの削除」を
クリックしましょう。

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

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

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

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

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

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

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

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

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

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

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

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