新APIを試してみる（Items編） - オープンソースのローコード開発ツールのプリザンター（pleasanter）ブログ

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

今回は、APIの取得方法が変更になりましたので、簡単なサンプルを元にデータを取得できるかを確認してみます。使い方はいままでのものとほぼ変わりませんので、すでにAPIを利用している方は、いくつかの変更を行うだけでOKです。

それでは、試してみましょう。

公式マニュアルと本ブログにある旧APIの解説について

公式マニュアルの情報は下記となります。

プリザンターの使い方マニュアル · Implem/Implem.Pleasanter Wiki · GitHub

また、旧APIについては、本ブログの記事にまとめを前に書きましたので参考いただければとおもいます。

pleasanter.hatenablog.jp

テスト環境について

今回は、自分のPCにプリザンターをインストールした環境を利用しました。サンプルのHTMLファイルは、ブラウザからhttpでアクセスできるドキュメントルート直下に配置（http://localhost/new_api.html）しています。サンプルファイル名などは適宜変更していただいて問題ありません。

利用するサンプルコード

それでは早速試してみましょう。利用するサンプルコードは下記のとおりです。今回は、HTMLファイルを用意し、その中にJavaScriptのコードを記載しています。以前書いたサンプルをよりシンプルにしています。

<!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 JSONdata = {
                "ApiKey": "APIkeyの文字列"
                };
            alert(JSON.stringify(JSONdata));
            $.ajax({
                "type" : "post",
                "url" : "http://localhost/pleasanter/api/items/2/get",
                "data" : JSON.stringify(JSONdata),
                "contentType": "application/json",
                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><button id="button" type="button">submit</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>

画面はこんな感じです。

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

プリザンター側

今回は1件のデータを取得するサンプルですので、プリザンター側のIDの指定が必要です。取得するプリザンターの情報はが2を指定しました。ローカルPCの環境のため、APIのURLは「http://localhost/pleasanter/api/items/2/get」となります。具体的な設定は、先ほどのサンプルソースをご覧ください。

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

アクセスしてみる

それでは、具体的にアクセスしてみましょう。ブラウザよりサンプルソースにアクセスし、submitボタンをクリックします。JavaScriptのalertメッセージで、APIキーの情報と「success」と表示された後に、プリザンターに登録されているIDが2の情報がテキストボックスに表示されることが分かります。

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

まとめ

いかがでしたでしょうか？
新しいAPIでも無事にデータが取得できることが分かっていただけたかと思います。今までのAPI形式でもデータは取得できるようですが、これから作成するプログラムについては、新APIを利用していったほうがよさそうですね。

今後、機会があれば新しく実装された、ユーザ、グループ、組織それぞれのAPIについても試してみる予定です。お楽しみに。

それでは、今回はこの辺で。
最後までごらん頂ありがとうございました。