MovableTypeのDataAPIでコンテンツデータをモーダル表示させる方法
小粋空間 » Movable Type » DataAPI » 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,
});