Snippets

markdiary Movable Type DATA API からプレビューするサンプルテンプレート

Created by markdiary
mt-preview_via_data-api.html
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MT DATA API でプレビュー</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

<form id="login_form" action="" onsubmit="">
<p><label>ユーザーアカウント : </label><input type="text" id="user" /></p>
<p><label>Webサービスパスワード : </label><input type="password" id="pass" /></p>
<p><label>エントリーID : </label><input type="number" id="eid" value="1" /><p>
<p><input type="button" id="login" value="ログイン" /></p>
</form>

<div id="result"></div>

<script>
// Data API Auth plugin
(function($){
  $.fn.mt_auth = function(options){
    var dataset = {
      user : 'melody',
      password : '',
      clientId: 'test',
      ap_url: '/PATH TO MT DATA API CGI/v3/authentication',
    };
  var setting = $.extend(dataset, options);

  $.ajax({
     url: dataset.ap_url,
     type: "POST",
     dataType : "json",
     data: {
       username: setting.user,
       password: setting.password,
       clientId: setting.clientId,
     }
  }).done(function(data){
    $('#result').text(data.sessionId);
  });
//  console.log(setting);
   return this;
  };
})(jQuery);

(function($){
  $('#login').click(function(){
    $.fn.mt_auth({
      user: $("#user").val(),
      password : $("#pass").val()
    });
  });

  $("#result").click(function(){get_entry(this)});
})(jQuery);

function get_entry(val){
  if(!val) return;
  var sessionId = "MTAuth sessionId=" + jQuery(val).text();
  var eid = $("#eid").val() || "1";
  jQuery.ajax({
    url: "/PATH TO MT DATA API CGI/v3/token",
    type: "POST",
    dataType: "json",
    headers: {
        'X-MT-Authorization': sessionId
    }
  }).done(function(data){
    $("#login").attr("disable",true);
    var accessToken = "MTAuth accessToken=" + data.accessToken;
    jQuery.ajax({
      url: "/PATH TO MT DATA API CGI/v3/sites/1/entries/" + eid + "/preview",
      type: "POST",
      dataType: "json",
      data: {
        entry: '{}'
     },
      headers: {
        'X-MT-Authorization': accessToken
     }
    }).done(function(entry){
      window.open(entry.preview);
  })
});
}
</script>
</body>
</html>

Comments (1)

  1. markdiary
    • /PATH TO MT DATA API CGI/ には、 mt-data-api.cgi までのパス
    • Webサービスパスワードは、 Movable Type ユーザーの編集画面の Webのサービスパスワード

    submit 後、フォーム下にセッションIDが表示されるので、クリックしますと、フォームのエントリーIDの記事のプレビューのウィンドウを開きます。 フォームの Validation と、Ajaxのエラー処理は省いています。

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.