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

Movable TypeのDataAPIで記事を投稿するサンプル

DataAPIで記事を投稿するサンプルを紹介します。

１．はじめに

ネットにDataAPIで記事を投稿するサンプルがないのと、サンプルがあってもログイン・ログアウトといった処理が盛り込まれていて、コードが複雑になって理解が難しいので、シンプルなものを自作してみました。

２．サンプル

下記にサンプル（ほぼほぼそのまま利用可能）を示します。ご利用前に３項と４項には必ず目を通してください。

また、コードにコメントを記載しているので、解説は省略します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<$mt:StaticWebPath$>data-api/v4/js/mt-data-api.min.js"></script>
<script type="text/javascript">
function post() {
 
    // DataAPIオブジェクト生成
    var api = new MT.DataAPI({
        baseUrl: '<$mt:CGIPath$>mt-data-api.cgi',
        clientId: 'post-entry',
        sessionPath: '/',
    });
 
    // ユーザー情報
    var credential = {
        username: "ユーザー名",
        password: "パスワード",
        remember: true
    };
 
    // 認証
    api.authenticate(credential, function(response) {
        if (!response.error) {
 
            // 記事データ
            var entry = {};
            entry['title']  = $('#title').val();
            entry['body']   = $('#text_body').val();
            entry['status'] = 'Publish';
 
            // 記事投稿
            api.createEntry(<$mt:BlogID$>, entry, function(response) {
                if (response.error) {
                    alert("Error:" + response.error.code + ':' + response.error.message);
                    return;
                }
                alert("Success:" + response.title);
            });
        }
    });
}
</script>
 
<div id="entry-post">
    <form name="CreateEntry" id="CreateEntry" method="post">
        <p><input type="text" name="title" id="title" placeholder="タイトル"></p>
        <p><textarea name="text_body" id="text_body" placeholder="本文"></textarea></p>
        <p><input type="submit" onclick="post(); return false;" value="投稿"></p>
    </form>
</div>

３．使い方

上記のコードをインデックステンプレートにペーストして、下記の赤色部分について、任意のユーザー・パスワードに書き換えてください。

    // ユーザー情報
    var credential = {
        username: "ユーザー名",
        password: "パスワード",
        remember: true
    };

テンプレートを再構築してページにアクセスすればフォームが表示されるので、タイトルと本文を入力して「投稿」をクリックすれば投稿できます。

投稿結果はJavaScriptのalertで表示します。

４．注意事項

パスワードは、ウェブサービスのパスワードを設定してください。ユーザー編集画面の「Webサービスパスワード」が該当します。

また、DataAPIを有効にするには、サイトの「設定」→「Webサービス」→「Data API」を有効にしてください。無効のまま投稿すると403エラーが発生します。

ただいシステム管理者はこの設定と無関係に投稿できるようです。