Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は、Movable Type Advent Calendar の14日目の記事です。

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

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

mtgram_06.png

Movable Type 7 とは

CMS「Movable Type」の新バージョンです。2018年春にリリース予定。

コンテンツタイプとは

詳細は以下

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

コンテンツタイプの設定

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

mtgram_01.png

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

mtgram-02.png

テンプレート名を[MTGram]として、以下のテンプレートコードを貼り付けます。出力ファイル名はなんでもかまいませんが、ここでは「mtgram.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

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

mtgram_04.png

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

mtgram-05.png

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

mtgram_06.png

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

mtgram-07.png

mtgram-09.png

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

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

もう少し高度なカスタマイズをしてみたい…という方は、MT7 の機能を使って開発したテーマ 「Jungfrau」に触って、コンテンツタイプの使い方を紐解いてみてもよいでしょう。Jungfrau のデモサイトはこちらです。

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

(今回のテンプレートは tutorialzine 内のテンプレート 「Freebie」 を利用してカスタマイズ・構築しました)

TakeshiNickOsanai
Developer Relation Manager, Sales Engineer/PreSales, User Community Supporter, CMS Engineer, AWS Certified Solutions Architect
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away