新機能「API」をさっくりと試してみた②(失敗!)

こんにちわ。リーデックス小川です。

今回は、前回設定したAPIを実行し、検証して行きたいと思います。

※本記事は、実施してみた結果上手く行かなかった内容となります。ご了承ください。

 

  

5.APIのお試し

①データの新規登録

それでは実際に実行してみましょう。私は、プリザンターをローカルPCにインストールしたのでURLが「localhost」となっていますが、適宜修正してください。上記設定が正しければ、submitボタンをクリックすれば登録完了するはずです。

 

登録される前のプリザンターのサイトの一覧表示です。

f:id:h-ogawa-reedex-co-jp:20180111192827p:plain

 

 

ためしにsubmitボタンを押してみましょう。

f:id:h-ogawa-reedex-co-jp:20180328075722p:plain

 ↓

f:id:h-ogawa-reedex-co-jp:20180111192936p:plain

 ↓

f:id:h-ogawa-reedex-co-jp:20180111193253p:plain


あれ?どうやらタイトルを「Title」と設定したはずなのですが、「タイトル無し」として登録されてしまったようです。HTTPのステータスコードは200で返ってきているので、特にエラーではなかったようです。

 

プリザンターの一覧を見てみましょう。

f:id:h-ogawa-reedex-co-jp:20180111193732p:plain

 

データは登録されていますね。ただし、タイトルはちゃんと入っていないように思えます。念のため、詳細画面を確認してみましょう。

 

f:id:h-ogawa-reedex-co-jp:20180111194010p:plain

 

やっぱり、タイトルは入っていません。。。うーむ・・・HTML側のロジックを見直してみても特におかしいところはないように思えますが・・・。

 

②データの取得、一括取得

念のため、データの取得を行ってみます。先ほどソースからすこし書き換えています。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLファイルからPOSTでJSONデータを送信する</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){
            var url = $("#url_post").val();

                var JSONdata = {
"ApiKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
//"Title": $("#value1").val(),
//"Body": $("#value1").val(),
//"CompletionTime": "2018/3/31"
};

            alert(JSON.stringify(JSONdata));

            $.ajax({
                type : 'post',
                url : url,
                data : JSON.stringify(JSONdata),
                contentType: 'application/JSON',
                dataType : 'JSON',
                scriptCharset: 'utf-8',
                success : function(data) {

                    // Success
                    alert("success");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                },
                error : function(data) {

                    // Error
                    alert("error");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                }
            });
        })
    })
</script>

</head>
<body>
    <h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
    <p>URL: <input type="text" id="url_post" name="url" size="100" value="http://localhost/pleasanter/api_items/278/get"></p>
    <p>Title <input type="text" id="value1" size="30" value="値1"></p>
    <p><button id="button" type="button">submit</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>

JavaScriptの不要JSONパラメータのコメントアウトと、データ取得用のURLを変更しましたがその他は変更していません。Titleの入力項目は残っていますが、JSONファイルには影響しないロジックになっています。フォームの見た目はURL以外は変わらないため、キャプチャは割愛します。

 

それでは、実行ボタンをクリックしてみます。

f:id:h-ogawa-reedex-co-jp:20180328080014p:plain

 ↓

f:id:h-ogawa-reedex-co-jp:20180111195111p:plain

 ↓

f:id:h-ogawa-reedex-co-jp:20180111195232p:plain

 

要求が不正というエラーメッセージが返ってきてしまいました。

実は、1/9にAPIの新機能のリリースがあったためバージョンアップを行いました。
そのあとすぐに、API機能にバグがあり再度バージョンアップをするアナウンスがあったので、再度バージョンアップました。その後に、上記検証をおこなってみましたが、上手くいきませんでした。

 

念のためバージョンを管理画面から確認してみます。

 

f:id:h-ogawa-reedex-co-jp:20180111195637p:plain

 

おそらく、最新の状態となっています。

 

③データの変更・削除

①、②が上手くいかなかったので、一旦やめることにしました。

  

ということで、今回の検証ではAPIが上手く行きませんでした。少し時間を置いて、再度検証してみたいと思います。上手く行った方やこうしたらよいのでは?というヒントをいただける方がいらっしゃいましたら、プリザンターのFacebookページに投稿してもらえるとありがたいです。

 

3/28追記:

実はこれ、既に解決できています。解決した投稿については、近々UPする予定です。