1. TOP
  2. HTML / CSS
  3. Movable Typeのローカル環境をMAMPで作る
詳しくはこちら
HTML / CSS

Movable Typeのローカル環境をMAMPで作る

とある案件でMovable Typeを使うことになったのですがこれまで全く触ったことがなかったので、今後の備忘録としてローカル環境の構築方法を残しておきます。

Movable Typeのローカル環境を構築する方法はいくつかあります。

  • Vagrant + VirtualBox
  • Docker
  • MAMPやXAMPP

VagrantかDockerを使う方法は公式が公開していますが、私の場合うまくいきませんでした。

参考:MTの開発環境を簡単に作れる mt-dev を公開しました

 

そこで、MAMPで試してみたら意外とうまく行ったので、その方法を超丁寧に解説したいと思います。

そもそもMovable Typeとは?

Movable Type は、2001年から開発が続く CMS(コンテンツ・マネージメント・システム) ソフトウェアです。ウェブサイトでの利用はもちろんのことながら、REST API を搭載しているので、様々なフロントデバイスから利用することが出来ます。また、Movable Type 7 から導入されたコンテンツタイプ機能により、柔軟で再利用しやすいコンテンツを設計・運用することが出来ます。

https://www.movabletype.jp/documentation/mt7/start-guide/about-movable-type/ より引用

 

では、MAMPを使ったMovable Typeのローカル環境構築方法を解説していきます。

(今回はM1 Macで試しましたが、おそらく普通のMacやXAMPPでも問題ないと思います)

1. 必要なファイルをダウンロード

Movable Typeの公式サイトでアカウントを作って、環境構築に必要なファイルをダウンロードします。

アカウントを作ってファイルをダウンロード

https://www.sixapart.jp/inquiry/movabletype/personal_download.html

公式サイトでライセンスを作成します。個人利用の場合は、上記URLから申し込みましょう(個人利用であれば1ライセンスのみ無償で利用できます)。

メールアドレスを入力して送信したら、メールが届きます。


※リンクなどの一部の文章を隠しています(ご自身のメールを参考にしてください)

メールに記載されているダウンロードページURLのリンクからファイルをダウンロードします。Movable Type 6, 7はどちらでも大丈夫です。プロジェクトに応じて好きな方を選択してください。

ダウンロードしたzipファイルを解凍すると、フォルダ名がMT7-R5003のようになっていると思います。この名前は人によって(ダウンロードしたタイミングなどで)変わるかもしれません。

注意点
この記事ではMT7-R5003で解説しているので、名前が違う方はご自身のフォルダ名を変えて対応してください。

2. MAMPの環境にファイルを移動

この記事で解説するMAMPのポートはデフォルトの8888とします。ポートを変えている方は8888の部分をご自身の環境にあった番号に変えてください。

/Applications/MAMP/cgi-bin/ にファイルを置く

/Applications/MAMP/cgi-bin/の中に先程解凍したMT7-R5003フォルダを置きます。以下のようになればOKです。

/Applications/MAMP/htdocs/ にファイルを置く

/Applications/MAMP/htdocs/にMT専用のフォルダを作ります。今回はMTとします。

MT7-R5003/mt-staticフォルダをコピーしてMTの中にペーストします。

さらに、MTpublicと名前を付けたフォルダを作ります(中身は空で大丈夫です)。

ここまでの手順を行うと/Applications/MAMP/htdocs/MT/には、以下2つのフォルダが追加されているはずです。

  • mt-static(中にはファイルがたくさんある)
  • public(中身は空)

 

下準備はこれで終わりです。

3. Movable Typeをインストール

MAMPを起動した状態でlocalhost:8888/cgi-bin/MT7-R5003/mt-wizard.cgiにアクセスします。

インストール画面が表示されます。

インストール画面について
以下解説では、インストール画面のスクショを載せていますが、インストールする時期(Movable Type側のアップデートなど)により多少画面の内容が違うかもしれないのでお気をつけください。

スタティックウェブパスの設定

  • スタティックウェブパスには、MAMPでアクセスできるパス(URL)を入力
  • スタティックファイルパスには、MAMPのドキュメントルートのパスを入力

どちらもmt-staticのパスを入力します。

右下の「開始ボタン」を押したら、以下の画面へ切り替わります。

 

特に何も触らず「次へ」を押します。以下画面へ移動します。

 

/Applications/MAMP/cgi-bin/MT7-R5003の中にdbという名前で空のフォルダを作ります。

その後、「接続テスト」ボタンを押します。以下画面へ切り替わります。

 

「次へ」ボタンを押します。以下画面へ切り替わります。

 

システムメールアドレスは何でも大丈夫です(ローカルでは特にメール機能は使いません)。

メール送信プログラムは何も選択していない状態で、「次へ」ボタンを押します。

 

「次へ」を押します。

 

必要事項を入力します。

もしかしたら、メールアドレスはライセンスを作った時と同じにしたほうが良いかもしれません。

 

必要事項を入力してインストールが無事終われば、このような画面になります。

次に「サインイン」ボタンを押します。

 

このようにダッシュボードが表示されればインストール作業は終わりです。

4. サイトのセットアップ

最後に、サイトを表示させるまでの方法を解説していきます。

 

まず、ダッシュボード画面の左上の「システム」をクリックします。

 

以下の画面に移動するので、「左サイドバー > サイト > 新規」をクリックします。

 

以下の画面に移動するので、必要事項を入力します。

  • サイトURL:http://localhost:8888/MT/public/
  • サイトパス:/Applications/MAMP/htdocs/MT/public

残りは自由に入力してください。

 

これでサイトが見れるようになります。試しに、http://localhost:8888/MT/public/にアクセスしてみてください。

以下のようにサイトが表示されるはずです(サイトの見た目は選択したテーマによって変わります)。

 

Movable Typeの仕組み

初めてMovable Typeを触ったのでまだ分からないことだらけですが、少しだけ分かったことがあります。

 

Movable Typeの一番の特徴は、作成したページや記事が「静的なHTML」で生成されることです。

WordPressであればDBをもとにPHPファイルでサイトを表示させますが、Movable Type場合はページや記事を作るとHTMLファイルを生成・更新して、そのHTMLファイルでサイトを表示する仕組みのようです。

※今回の場合は/Applications/MAMP/htdocs/MT/publicにHTMLが生成されます

 

関連記事