メインコンテンツまでスキップ

簡単なお試しツール

環境を構築する前に試したい方のために、ブラウザ上でWeb APIを簡単に実行できるツールを以下に紹介いたします。 一度の実行につき、一つのWeb APIしか呼び出せませんが、Web APIでできることの具体的なイメージを掴むことができます。

以下に紹介するコードはそのままHTMLファイルとして一つのWeb APIを実行するツールになります。 利用するための手順は以下のとおりです。

利用手順​

  1. テキストファイルに次のリンクで紹介するコードをコピーする。
    • サンプルコード
    • テキストファイルのファイル名は任意の名前で問題ありません。
  2. 「ユーザー設定項目 ここから」～「ユーザー設定項目 ここまで」のコメントに挟まれた箇所を、環境や実行するWeb APIに合わせて変更する。
    追加や更新、削除を行う場合

    以下の箇所を更新してください。
    ・MethodType：処理したい種別（POST、PUT、DELETEなど）
    ・RequestBody：サンプルコードの「// この間にJSON形式でリクエストを記入する」のコメントの間に入力してください。
    　指定する値が分からない場合は、Web APIヘルプの次のリンクを参照ください。：リファレンス

  3. 手順1のテキストファイルの拡張子を「.html」に変更する。
  4. 手順3で拡張子を変更したファイルをTimeTracker NXのWebサーバーに接続可能なPC（サーバー自身も可）に配置する。
  5. 配置したファイルをダブルクリックし、ブラウザで開く。
  6. ブラウザで［Web APIを実行する］ボタンをクリックする。
  7. 正常終了のダイアログが表示されたら［OK］ボタンをクリックする。

上記処理語、ブラウザの下半分にWeb APIの実行結果（サーバーからの戻り値）が表示されます。

サンプルコード​

以下のコードを上記「利用手順」に沿ってご利用ください。

<html>
    <head>
        <meta http-equiv="content-type" charset="utf-8">
        <title>Web API実行ツール</title>
    </head>
    <body>
        <script>
        // JavaScript実装部 Webページのボタンクリック時の挙動を設定
            function WebAPI_Run() {

                var request = new XMLHttpRequest();

                // サーバーとの通信状態が変わるたびに実行
                request.onreadystatechange = function () {
                    const READYSTATE_COMPLETED = 4;
                    const HTTP_STATUS_OK = 200;

                    // サーバーとの通信が完了したかチェック
                    if (request.readyState == READYSTATE_COMPLETED){
                        // サーバーとの通信が完了し、通信ステータスが正常終了以外の場合
                        if(request.status != HTTP_STATUS_OK) {
                            // 異常終了の表示
                            alert("【Status: " + request.status + "】\n\n" + request.responseText);
                        }

                        // サーバーとの通信が完了し、通信ステータスが正常終了の場合
                        else {
                            // 正常終了(実行完了のダイアログとともに結果をWebページに出力)
                            alert("Web APIの実行が完了しました");
                            document.getElementById("result").innerHTML = request.responseText;
                        }
                    }
                }

                ////////////////////////////////////////////////////////////////////////////////
                // ユーザー設定項目 ここから                                                     //
                ////////////////////////////////////////////////////////////////////////////////

                // ServerNameとSiteNameを環境に合わせて変更する
                // 以下の初期設定はURLが"http://localhost/TimeTrackerNX/#timesheet/・・・"ような場合の例
                var ServerName = 'localhost';
                var SiteName = 'TimeTrackerNX';

                // Web APIを実行するユーザーの認証情報を設定する
                // Web APIはここで指定するユーザーの権限に従って実行される
                // 以下の初期設定はサンプルデータの岡本さんの例
                var UserName = 'okamoto';
                var Password = '';

                // 実行するメソッドを設定する
                // 以下の初期設定はユーザー情報の一覧を取得する例
                var MethodType = 'GET'				// 実行する処理により変更する(追加:POST,更新:PUT,削除：DELETE)
                var APIString = '/system/users'		// 呼び出すAPIに変更する。

                // こちらの変数は「MethodType」に"PUT"、"POST"を指定した時に使用してください。
                var RequestBody =
                // ↓この間にJSON形式でリクエストを記入する(Web APIヘルプにあるリファレンスのサンプルを参照)
                    {
                        fields: {
                            "ActualProgress": 80,
                            "PlannedTime": 3000
                        }
                    }
                // ↑この間にJSON形式でリクエストを記入する
                    ; //この「;」は消さない。

                ////////////////////////////////////////////////////////////////////////////////
                // ユーザー設定項目 ここまで                                                     //
                ////////////////////////////////////////////////////////////////////////////////

                // Basic認証の情報を作成する
                var AuthorizeString = 'Basic ' + window.btoa(UserName + ':' + Password);

                // 実行するWeb APIのURL設定
                var URL = 'http://' + ServerName + '/' + SiteName + '/api' + APIString;

                // Web APIの実行
                request.open(MethodType, URL);
                request.setRequestHeader("Authorization",AuthorizeString); // 基本認証の設定
                if(MethodType == 'GET'){
                    request.send();
                } else {
                    request.setRequestHeader("Content-Type","application/json"); // 送信する情報のフォーマットを指定
                    request.send(JSON.stringify(RequestBody));// サーバーに情報を送信する場合(PUTやPOST)、JSON形式のデータを送信する
                }
            }
        </script>

        <h2>Web API実行ツール</h2>
        <p>下記ボタンをクリックするとWeb APIを実行します。</p>
        <!-- ブラウザ上のボタンクリックで上記のWeb API処理を実行する -->
        <input type="button" value="Web APIを実行" onclick="WebAPI_Run();" />
        <hr />

        <!-- 実行したAPIの返信内容をこの箇所に出力する -->
        <div id="result" />

    </body>
</html>

出力結果の整形​

出力結果はJSON形式で出力されます。
Webサイト上に、無償でデータを整形するサイトがございますので、必要に応じてご活用ください。

注意事項​

  • 利用するブラウザや導入されているセキュリティソフトによっては、JavaScriptの実行が制限されている場合があります。
    この場合はシステム管理者に相談して、JavaScriptが実行できるようにこれらのソフトの設定を変更してください。
  • ブラウザに表示される出力結果はサーバーからの戻り値になるので、アイテムの追加や削除などはTimeTracker NXの画面で確認する必要があります。
に最終更新