Movable Type 7 の新機能「コンテンツタイプ」をつかって、写真ギャラリーサイトを構築する

この記事は、[Movable Type Advent Calendar](https://adventar.org/calendars/2203) の14日目の記事です。

「Movable Type 7 ベータ版」を使って、○○○○○gramのような写真ギャラリーサイトを作っります。Movable Type 7 から実装される「コンテンツタイプ」機能を使います。

今回作るギャラリーサイトは「MTGram」と命名、写真を投稿・公開できるようにします。

![mtgram_06.png](https://qiita-image-store.s3.amazonaws.com/0/83767/9b2723c2-86fe-eaa9-5f1b-ece4b8a1b0e5.png)

## Movable Type 7 とは

CMS[「Movable Type」](https://www.sixapart.jp/movabletype/)の新バージョンです。2018年春にリリース予定。

## コンテンツタイプとは

詳細は以下

https://speakerdeck.com/hirata/mtddc-2017-keynote-mt-7-concept


## コンテンツタイプの設定

MTGramを構築するサイトを選び、左メニューから [Content Types] => [新規] を選び、名前を 「MTGram」 とします。右メニューから[Image Asset]を選び、ドラッグアンドドロップでコンテツタイプに配置します。名前を「画像」と指定します。必須チェックを入れ、ユーザーに新規イメージのアップロードを許可するように設定して、終わったらSaveボタンを押します。

![mtgram_01.png](https://qiita-image-store.s3.amazonaws.com/0/83767/9e3baec7-4f5f-1b75-a05e-9d0de7beb9c8.png)


次に、[デザイン]=>[テンプレート]を選び、[インデックステンプレートの作成]をクリックします。

![mtgram-02.png](https://qiita-image-store.s3.amazonaws.com/0/83767/62aaacb4-418e-c48c-8b69-8f8d6e37f221.png)

テンプレート名を[MTGram]として、以下のテンプレートコードを貼り付けます。出力ファイル名はなんでもかまいませんが、ここでは「mtgram.html」としてみます。コードを貼付け後、保存と再構築を行います。


```html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>MTGram</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
 </head>
<body>

<div class="container gallery-container">

    <h1>MTGram</h1>

    <p class="page-description text-center">Powered by Movable Type 7</p>
    
    <div class="tz-gallery">
        <div class="row">

        <mt:Contents content_type="MTGram" limit="3">

            <div class="col-sm-6 col-md-4">

            <mt:ContentField content_field="画像">
                <a class="lightbox" href="<mt:AssetURL>">
                    <img src="<mt:AssetThumbnailURL square="1">">
                </a>
            </mt:ContentField>

            </div>

         </mt:Contents>

        </div>

    </div>

</div>
   <style type="text/css">

      body {
          background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
          min-height: 100vh;
          font: normal 16px sans-serif;
          padding: 60px 0;
      }

      .container.gallery-container {
          background-color: #fff;
          color: #35373a;
          min-height: 100vh;
          border-radius: 20px;
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
      }

      .gallery-container h1 {
          text-align: center;
          margin-top: 70px;
          font-family: 'Droid Sans', sans-serif;
          font-weight: bold;
      }

      .gallery-container p.page-description {
          text-align: center;
          max-width: 800px;
          margin: 25px auto;
          color: #888;
          font-size: 18px;
      }

      .tz-gallery {
          padding: 40px;
      }

      .tz-gallery .lightbox img {
          width: 100%;
          margin-bottom: 30px;
          transition: 0.2s ease-in-out;
          box-shadow: 0 2px 3px rgba(0,0,0,0.2);
      }


      .tz-gallery .lightbox img:hover {
          transform: scale(1.05);
          box-shadow: 0 8px 15px rgba(0,0,0,0.3);
      }

      .tz-gallery img {
          border-radius: 4px;
      }

      .baguetteBox-button {
          background-color: transparent !important;
      }


      @media(max-width: 768px) {
          body {
              padding: 0;
          }

          .container.gallery-container {
              border-radius: 0;
          }
}
</style>  

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
    baguetteBox.run('.tz-gallery');
</script>
</body>
</html>
```

![mtgram-03.png](https://qiita-image-store.s3.amazonaws.com/0/83767/a0ccb0f3-e627-722e-0dd6-d6310aa530cc.png)


これで構築は終了です。次に、写真を登録してみましょう。
右メニューから[Content Data] => [MTGram]を選び、写真を登録していきます。

![mtgram_04.png](https://qiita-image-store.s3.amazonaws.com/0/83767/52370195-c348-60f4-22a0-ae942e067392.png)


画像の挿入が終わったら「公開」ボタンを押します。

![mtgram-05.png](https://qiita-image-store.s3.amazonaws.com/0/83767/2ebb441e-90e5-70ac-fab1-4b63900324bd.png)


先程公開した「mtgram.html」にアクセスしてみると、写真ギャラリーが公開されているのわかります。

![mtgram_06.png](https://qiita-image-store.s3.amazonaws.com/0/83767/3496584b-fc20-369a-8171-f8bbaf876924.png)


Movable Type の「ロールと権限」機能を利用すると、「MTGram」の投稿に関するメニューだけが表示されるようになり、非常にスッキリとした管理画面になります。

![mtgram-07.png](https://qiita-image-store.s3.amazonaws.com/0/83767/a3a5be26-8770-f2fc-8a97-9142edbee7e4.png)

![mtgram-09.png](https://qiita-image-store.s3.amazonaws.com/0/83767/d81b0b85-cd78-5cfd-f4a0-361659eaa891.png)


Movable Type 7 には、 Data API Ver4 が実装されます。これまでのData APIと同様、REST APIを介して、データの取得・表示や、新規データの登録などを行うことができますので、こちらも触ってみてください。

今回は、コンテンツタイプを使う第一歩として、シンプルな構成の写真ギャラリーを開発してみました。

もう少し高度なカスタマイズをしてみたい…という方は、MT7 の機能を使って開発したテーマ [「Jungfrau」](https://github.com/movabletype/mt-theme-jungfrau)に触って、コンテンツタイプの使い方を紐解いてみてもよいでしょう。Jungfrau のデモサイトは[こちら](https://demo.movabletype.jp/jungfrau/)です。

コンテンツタイプ、ぜひ使ってみてください。


(今回のテンプレートは [tutorialzine](https://tutorialzine.com/) 内のテンプレート [「Freebie」](https://tutorialzine.com/2017/02/freebie-4-bootstrap-galleries) を利用してカスタマイズ・構築しました)