身近な業務にAPIを活用してみた

そもそもAPIって何？

APIにはたくさん種類があります。
皆さんも聞いたこと、見たことはあると思いますが。。



何かはわからない。。



GPTに下記の質問を投げてみました。


Q. APIとはなんですか？
A.「便利機能を外部向けに提供する架け橋」のようなものです。


なんだって？？
抽象的すぎて何言ってるかわからない。。


聞き馴染みのある「なんたかAPI」で
より具体的に見ていきます！

例えば、YouTubeのAPI

「　YouTubeAPI　」と言うものがあるのですが、
こちらは名前の通りYouTubeのAPIになるので、YouTubeのさまざまなデータを簡単に呼び出すことができるのかな？と思い調査を続けてみました。



するとすごくわかりやすそうな図を発見！

左側のパソコンから動画の再生回数を聞いています。


すると、
右側のAPI （YouTubeAPI） 側から １００万回だよ！ と結果として返ってきます。



なるほどなるほど。。すごくわかりやすい！

続いて2枚目の図、
少し見方を変えて「インターネット通信の流れ（HTTP）」をみてみよう。


こちらも、
左側の「クライアント」からリクエスト（依頼）として送り
右側の「サーバー」にレスポンス（結果）として返してもらいます。


先ほどの図を見た後だと内容が入ってきやすいぞ。



そこで、
そもそもAPIを使うにあたって必要なものはなんなのか調査してみました。

知ってる単語が並んできたぞ！


まぁ一旦座学はこれくらいにして、、

iPhoneのショートカットアプリで使ってみた①

①.Notionで取得したインテグレーショントークンを記入

②.①のテキストを、「APIキー」と設定する

③,Notionで作成している URLの「so/⚪︎⚪︎⚪︎⚪︎⚪︎?xx」の⚪︎部分をテキストに記入

④,のテキストを、「DB名」と設定する

⑤,タスク名を表示させる

⑥,「URL」で「https://api.notion.com/v1/pages」と入力

⑦,URLを取得

⑦の詳しい内容

完成しました！
実際に使ってみるとちゃんとメモに入り、iPhoneからも実行ができる。


APIとはこういうことか！と少しづつ理解度が上がってきました。


もうここまで来ると楽しくなってきて止まらない。

WorksからBacklogの起票をしてみた

①. 最初に、「個人設定」にある「API」からキーを発行してみる

②. モザイクかけてますけど、発行されたら「APIキー」をコピーしてメモしておく

③. 自社で使っているBacklogのURLに、先ほどのAPIキーを埋めて、


記入欄 : https://interpark.backlog.jp/api/v2/issues?apiKey=（APIキー）


実行すると、Responseが「　OK　」正常にGETできてますね。


よし！　アプリを作ってこよう。。


...５分後

各項目を入れて、レコードの登録をしてみると、、

起票完了！！　おお〜！！
※ この瞬間が一番API連携できたなって感じました


使えるBacklog API一覧はこちら
URL : https://developer.nulab.com/ja/docs/backlog/api/2/add-issue#



ここからは、カスタムコード内で書いたコードを解説していきます。

ソースコード

function BacklogPost() {
    // リクエストパラメータを定義
    var projectid = document.querySelector('select[name="projectid"]').value;
    var ticketname = document.getElementById('ticketname');
    var issuetypeid = document.querySelector('input[name="issuetypeid1"]:checked').value;
    var priorityId = document.querySelector('input[name="priorityid1"]:checked').value;
    var assigneeIdSelect = document.getElementById('assigneeid1');
    var assigneeId = assigneeIdSelect.options[assigneeIdSelect.selectedIndex].value;
    var description2 = document.getElementById('text02').value;
    var phenomenon = "**" + "確認した現象" + "\n" + description2;
    var description3 = document.getElementById('text03').value;
    var errorCode = "**" + "エラーコード" + "\n" + description3;
    var description4 = document.getElementById('text04').value;
    var expectedResults = "**" + "期待される結果" + "\n" + description4;
    var description5 = document.getElementById('text05').value;
    var cause = "**" + "発生環境" + "\n" + description5;
    var description6 = document.getElementById('text06').value;
    var procedure = "**" + "再現手順" + "\n" + description6;
    var description7 = document.getElementById('text07').value;
    var remarks = "**" + "備考" + "\n" + description7;

    var combinedDescription = phenomenon + "\n" + errorCode + "\n" + expectedResults + "\n" + cause + "\n" + procedure + "\n" + remarks;

    // Backlogの指定の項目にあてはめる
    const requestData = {
        "projectId" : projectid,
        "summary" : ticketname.value,
        "description": combinedDescription,
        "issueTypeId" : issuetypeid,
        "assigneeId" : assigneeId,
        "priorityId" : priorityId
    };

    // HTTPリクエストを送信する関数
    async function sendRequest() {
        try {
            // APIキー
            const response = await fetch('https://（実行したいBacklogのURL）?apiKey=（APIキー）', {
                // HTTPメソッド
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            });

            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const responseData = await response.json();
            console.log(responseData); // APIのレスポンスをコンソールに出力
            // レスポンスを使った追加の処理をここに追加する
        } catch (error) {
            console.error('There was a problem with the fetch operation:', error); // エラーメッセージをコンソールに出力
            // エラーが発生した場合の処理を記述
        }
    }

    // ページのロードが完了したときにHTTPリクエストを送信する
    sendRequest();
}

window.addEventListener('load', function() {
    // submitボタンの要素
    var submitButton = document.querySelector('input[name="Submit"]');

    // ボタンがクリックされた時の処理を設定
    submitButton.addEventListener('click', BacklogPost);
});

最後に