小粋空間  -  a cheap joke and a play on words site

MovableTypeのDataAPIでコンテンツデータをモーダル表示させる方法

MovableTypeのDataAPIでコンテンツデータをモーダル表示させる方法を紹介します。

１．サンプル

下記のテンプレートをコピーしてインデックステンプレートとして再構築してください。

サンプルでは、デフォルトの「Site Page」コンテンツデータの一覧を表示して、リンクをクリックすると取得したデータ（JSON）をモーダル表示させます。

ユーザー、Webサービスパスワード、クライアントID、サイトID、コンテンツタイプIDは適宜書き換えてください。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="<$mt:StaticWebPath$>data-api/v4/js/mt-data-api.min.js"></script>
 
<mt:Contents content_type="Site Page">
<mt:ContentsHeader><dl></mt:ContentsHeader>
     <dt><$mt:ContentLabel$></dt>
     <dd><mt:ContentField content_field="Title"><a href="javascript:void(0);" class="mtlink" data-id="<mt:ContentID>"><$mt:ContentFieldValue$></a></mt:ContentField></dd>
<mt:ContentsFooter></dl></mt:ContentsFooter>
</mt:Contents>
 
<div id="main" style="display:none;">
<p id="hoge"></p>
</div>
 
<script>
$(function() {
    var accessToken;
 
    $.ajax({
        url: "<$mt:CGIPath$><$mt:DataAPIScript$>/v<$mt:DataAPIVersion$>/authentication",
        type: "POST",
        dataType: "json",
        data: {
            'username': 'ユーザー名',
            'password': 'ユーザーのWebサービスパスワード',
            'clientId': '任意のID'
        }
    }).done(function(data){
        accessToken = "MTAuth accessToken=" + data.accessToken;
    });
 
    $(".mtlink").click(function(){
        $('#hoge').text('');
        var content_data_id =  $(this).data('id');
 
        $("#main").dialog({
            open: function(event, ui) {
 
                // コンテンツデータ取得
                $.ajax({
                    url: "<$mt:CGIPath$><$mt:DataAPIScript$>/v<$mt:DataAPIVersion$>/sites/1/contentTypes/1/data/" + content_data_id,
                    type: "GET",
                    dataType: "json",
                    headers: {
                        'X-MT-Authorization': accessToken
                    }
                }).done(function(data){
                  $('#hoge').text(JSON.stringify(data));
                });
            },
            modal:true, //モーダル表示
            title:"テスト", //タイトル
            width: 900,
            height: 500,
        });
    });
});
</script>

２．解説

必要なライブラリを引き込みます。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="<$mt:StaticWebPath$>data-api/v4/js/mt-data-api.min.js"></script>

コンテンツデータの一覧を表示します。data-id属性にコンテンツデータIDを設定。リンクはページ遷移しないようにしておきます。

<mt:Contents content_type="Site Page">
<mt:ContentsHeader><dl></mt:ContentsHeader>
     <dt><$mt:ContentLabel$></dt>
     <dd><mt:ContentField content_field="Title"><a href="javascript:void(0);" class="mtlink" data-id="<mt:ContentID>"><$mt:ContentFieldValue$></a></mt:ContentField></dd>
<mt:ContentsFooter></dl></mt:ContentsFooter>
</mt:Contents>

モーダルとなるエリアです。

<div id="main" style="display:none;">
<p id="hoge"></p>
</div>

ページ読み込み時にアクセストークンを取得・保持します。

    var accessToken;
 
    $.ajax({
        url: "<$mt:CGIPath$><$mt:DataAPIScript$>/v<$mt:DataAPIVersion$>/authentication",
        type: "POST",
        dataType: "json",
        data: {
            'username': 'ユーザー名',
            'password': 'ユーザーのWebサービスパスワード',
            'clientId': '任意のID'
        }
    }).done(function(data){
        accessToken = "MTAuth accessToken=" + data.accessToken;
    });

リンククリックで前回のモーダル表示の内容をクリアし、コンテンツデータIDを取得します。

    $(".mtlink").click(function(){
        $('#hoge').text('');
        var content_data_id =  $(this).data('id');

dialogでモーダル表示を実行し、openイベントを使って、モーダルが開いたタイミングでDataAPIを起動してコンテンツデータを取得します。

        $("#main").dialog({
            open: function(event, ui) {
 
                // コンテンツデータ取得
                $.ajax({
                    url: "<$mt:CGIPath$><$mt:DataAPIScript$>/v<$mt:DataAPIVersion$>/sites/1/contentTypes/1/data/" + content_data_id,
                    type: "GET",
                    dataType: "json",
                    headers: {
                        'X-MT-Authorization': accessToken
                    }
                }).done(function(data){
                  $('#hoge').text(JSON.stringify(data));
                });
            },
            modal:true, //モーダル表示
            title:"テスト", //タイトル
            width: 900,
            height: 500,
        });