新機能「API」をさっくりと試してみた。

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

今回は、2018年1月9日にリリースされた「API」機能についての概要と、クライアント側のスタブ作成し、テスト利用をしていきたいと思います。

 

 

 

1.バージョンアップ

下記を参照にバージョンアップを行います。詳細は下記URLを参考にしていただければと思いますが、やることは、公式サイトよりデータをダウンロードして、setup.batを「管理者で実行」するだけです。

 

プリザンターのバージョンアップ · Implem/Implem.Pleasanter Wiki · GitHub

 

1点、大きな注意があります。設定ファイルを修正している場合は、必ずバックアップを取って置いてください。設定ファイル以下のフォルダが初期化されます!管理で変更した修正については、初期化されないようです。もちろん、本番運用されている環境はデータベースを含めてバックアップをとることをおすすめします。

 

2.APIキーの取得

 APIキーの取得を行います。ユーザーごとにAPIキーが発行されます。取得方法はこちらに記載がありますが、この記事で少し詳細に説明して行きたいと思います。

①ページ右上部「ユーザー名」にカーソルを持っていく

②表示されたメニューの「API設定」をクリック

 

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

APIキー作成ボタンをクリック

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

 

APIキーが作成されるので、キーをメモする。

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

 

これで、APIキーは完成です。

 

3.サイトの作成

今回のテスト用のサイトとデータを用意します。APIテスト用なのでシンプルに記録用テーブルを使います。名前を「APIテスト用」とします。

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

 ↓

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

 

4.クライアント側のスタブ作成

HTMLで出力するAPIを作成します。下記サイトの情報を元にHTMLを作成してみます。


qiita.com

 

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": "5565cb31f4153de2e51a43f4c939d576fcbe0db053b7de113757613877bfb20f7bed37a117481af315c8ac892b1f72d30940199835e796c01ce40761f0c134af",
"Title": $("#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/create"></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>

 

ブラウザの表示は下記のようになります。

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

 

さて、ここまでで準備が整いました。次回はAPIを実際に利用してデータ登録などを行っていきます。