MovableTypeのDataAPIでコンテンツデータをモーダル表示させる方法
MovableTypeのDataAPIでコンテンツデータをモーダル表示させる方法を紹介します。
1.サンプル
下記のテンプレートをコピーしてインデックステンプレートとして再構築してください。
サンプルでは、デフォルトの「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>
2.解説
必要なライブラリを引き込みます。
<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,
});
Movable Type 8の共有プレビューでパスワードを設定する方法
Movable Type 8の共有プレビューでパスワードを設定する方法を紹介します。
共有プレビューの基本機能については下記の記事を参照してください。
1.パスワードの設定
パスワードはサイト別に複数設定可能です。
サイト管理画面の「設定」→「プラグイン」→「SharedPreview x.x」→「設定」をクリック。
パスワード入力画面に任意のパスワードを入力して「変更を保存」をクリック。
「パスワードを追加」をクリックすれば複数のパスワードを設定できます。
不要なパスワードは「削除」ボタンで削除できます。
2.共有プレビュー時のパスワード入力
パスワードを設定すれば、共有プレビュー時にパスワード入力を求める画面が表示されます。
Movable Type 8リリース
遅ればせながら、Movable Type 8が11/1にリリースされました。
ここでは主な機能を紹介します。
1.共有プレビュー
コンテンツデータや記事を下書き状態にすると「共有プレビュー」のリンクが表示されます。
リンクをクリックするとプレビュー画面が表示されます。
また、編集画面のリンクや、共有プレビューのリンク、公開ページのリンクも取得できます。
共有プレビューのリンク
公開ページのリンク
これまでのプレビューと異なるのは、コンテンツを編集して保存しても再度同じURLでプレビューを確認が可能です。
またパスワードも設定できるようです。
ちなみに共有プレビューは「mt-shared-preview.cgi」をキックしています。
2、新しいブロックエディタ
プラグインとして提供していた 新しいブロックエディタ(MTブロックエディタ)機能を同梱しました。
既存のブロックエディタも同梱されてますが、デフォルトは無効になっています。
「カスタムブロック」も作成可能です。
3.管理画面の多要素認証
プラグインとして提供されていた多要素認証機能が同梱されました。
現在は TOTP (Time-based One Time Password) による2要素認証に対応しているようです。
利用するには下記の認証アプリが必要です。
- Google Authenticator ( iOS版 / Android版 )
- Twilio Authy ( iOS版 / Android版 )
- Microsoft Authenticator ( iOS版 / Android版 )
- 2FA Authenticator (2FAS) ( iOS版 / Android版 )
設定方法は、各ユーザー編集画面に「認証デバイスの設定」が表示されます。
クリックするとQRコードが表示されるので、対応する認証アプリで読み込み、確認コードを入力。
これで設定完了です。
これで管理画面にログインすると、二段階認証画面に遷移するので、認証アプリに表示されたコードを入力すればログインできます。
解除したい場合は、ユーザー編集画面から解除できます。
4.ライセンス確認
システム管理画面の「設定」→「ライセンス確認」でライセンスを確認できるようになりました(手動で登録)、
5.検索機能への導線の改善
管理画面の左上に、検索ページへ遷移するボタンが設置されました。