Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webサービスの必須スキル:HTTPリクエスト入門

 Webサービスの必須スキル:HTTPリクエスト入門

〜好きなプログラミング言語からWebサービスのkintoneにアクセスするワークショップ〜

HTTPリクエストの基礎を学び、Postmanでリクエストの体験をします。
kintoneアプリを作成し、Postmanやプログラミング言語からkintoneアプリに対してHTTPリクエストをし、データの送受信方法を学びます。

kintoneGeeks

July 12, 2023
Tweet

More Decks by kintoneGeeks

Other Decks in Technology

Transcript

  1. もくじ ©️2023 Cybozu Inc. 会社紹介 1 5 mins kintoneとは? 2

    5 mins kintoneハンズオン 3 15 mins HTTPリクエストとは? 4 15 mins プログラミング言語からのHTTPリクエスト(概要) 6 30 mins プログラミング言語からのHTTPリクエスト(ハンズオン) 7 20 mins Postmanのハンズオン 5 40 mins コメント・まとめ 8 10 mins 休憩(10min) 休憩(10min)
  2. サイボウズ株式会社とは 名称 サイボウズ株式会社(東証一部上場 4776) 事業内容 チームの情報共有サービス 「グループウェア」 の開発・販売・運用 チームワーク強化メソッドの開発・普及 創業

    1997年8月(創業:愛媛県松山市) 所在地 東京都中央区日本橋2-7-1 東京日本橋タワー 拠点 東京, 大阪, 松山, 名古屋, 福岡, 仙台, 広島、札幌 上海, 深圳, 台北, ホーチミン, サンフランシスコ, シドニー, バンコク 資本金 613百万円 業績 連結売上 25,497百万円 ※2023年12月期:業績予想 従業員数 連結 1,115名 ※2022年12月末時点 平均年齢 35歳 ※2022年12月末時点 ©️2023 Cybozu Inc.
  3. APIが豊富 ⚫ REST API ⚫ kintoneのデータ連携をすることができる ⚫ kintoneにデータが登録されたらLINEに通知する ⚫ Alexa(音声認識デバイス)からkintoneにデータ

    を登録する ⚫ JavaScript API ⚫ kintoneの画面の動作や、 見た目を変えるカスタマイズができる ⚫ 一覧画面が表示されたときにボタンを表示 ©️2023 Cybozu Inc. APIとは? API:Application Programming Interface ソフトウェアやプログラム、Webサービスを 連携させる仕組みのこと REST API
  4. オリジナルのkintoneアプリを作ってみよう! ⚫自分のkintone開発者ライセンスの環境にログインして、kintone アプリを作ってみよう ⚫ kintone開発者ライセンスを持ってない人は https://cybozu.dev/ja/ か ら取得しよう ⚫どういうkintoneアプリを作る? ⚫

    皆さん学生なので、業務と関係無いものでOK ⚫ 普段エクセルで管理してるものを参考にkintoneアプリにしてみよう ⚫ 何も思いつかない場合は講師が作るものを一緒に作ろう ⚫ 漫画データーベースを作ろう! ©️2023 Cybozu Inc.
  5. kintoneアプリを作成してみよう ⚫他のフィールドも設定しよう ©️2023 Cybozu Inc. フィールドの種類 フィールド名 フィールドコード 文字列(1行) タイトル

    manga_title チェックボックス ジャンル manga_genre 文字列(1行) 漫画家 manga_artist 文字列(複数行) あらすじ manga_plot 終わったらフォームを保存する
  6. HTTPリクエストをしてみる(郵便番号検索API) ⚫郵便番号検索APIに郵便番 号を渡し、それに関する情 報をレスポンスで受け取る ⚫ドキュメントはこちら http://zipcloud.ibsnet.co. jp/doc/api ©️2023 Cybozu Inc.

    情報を取得するので、GETを選択 リクエスト先のURLを入力 Keyに『zipcode』 Valueに『0400001』 を入力 下のKeyとValueを入れると 自動で補完される ① ② ③
  7. HTTPリクエストをしてみる(郵便番号検索API) ©️2023 Cybozu Inc. Postman 郵便番号 検索API リクエスト レスポンス 郵便番号4228017に関する

    情報をください 住所と読み仮名を 返します クリック レスポンスが JSONという形で 表示される こういう処理が行われている↓ ① ②
  8. kintoneアプリのデータもリクエストしてみよう ⚫やりたいこと ©️2023 Cybozu Inc. Postman 漫画データベース Postman 漫画データベース ①

    kintoneへのGETリクエスト ② kintoneへのPOSTリクエスト 日常系のマンガの一覧を頂戴 日常系のマンガの一覧です 鳥山明が描いた『ドラゴンボール』を 追加したいです 追加出来ました
  9. kintoneアプリからデータを取得する ⚫kintoneで作った漫画データベースからデータを取得してみる ©️2023 Cybozu Inc. Postman 漫画データベース ① kintoneへのGETリクエスト 日常系のマンガの一覧を頂戴

    日常系のマンガの一覧です ドキュメント: https://cybozu.dev/ja/kintone/docs/rest- api/records/get-records/ ドキュメントを読むと、下記が分かる: - HTTPメソッドは GET - エンドポイントURLが https://{サブドメイン 名}.cybozu.com/k/v1/records.json - appパラメータはリクエストには必須な情報 - queryパラメータはリクエストには必須では無い が、含めると取得する情報の絞りこみが出来る
  10. kintoneアプリからデータを取得する(クエリ付きで) ⚫ 同じリクエストにqueryパラメータを付けて、取得するレコードを絞り込む ©️2023 Cybozu Inc. クエリ記法は絞り込むフィールドによって異なる: - チェックボックスやドロップダウンの場合 query={フィールドコード}

    in (“{選択肢の値}”) - 文字列(1行)の場合 query={フィールドコード} = {“値”} - 日付の場合 query={フィールドコード} < TODAY() など ① ② ③ 自動で補完される クエリの内容で絞り込まれている、 新しいレスポンスが表示される
  11. kintoneアプリにデータを登録する ⚫kintoneで作った漫画データベースにデータを登録する ©️2023 Cybozu Inc. ドキュメント: https://cybozu.dev/ja/kintone/docs/rest- api/records/add-record/ ドキュメントを読むと、下記が分かる: -

    HTTPメソッドは POST - エンドポイントURLが https://{サブドメイン 名}.cybozu.com/k/v1/record.json - appパラメータはリクエストには必須な情報 - recordパラメータは省略可だが、リクエスト に含めない場合何も情報が無いレコードが追 加されてしまう Postman 漫画データベース ② kintoneへのPOSTリクエスト 鳥山明が描いた『ドラゴンボール』 を追加したいです 追加出来ました
  12. kintoneアプリにデータを追加してみよう ⚫メソッドとURLを設定する ⚫POSTリクエストのパラメータはここでは設定出来ず、後述す るBodyで設定する ©️2023 Cybozu Inc. ① ② ※URLがrecords.jsonではなく

    record.jsonであることに注意 このPOSTリクエストをPostmanで作成するさいに、新しいタブ開くか、 GETリクエストに使用したタブを編集してください
  13. kintoneアプリにデータを追加してみよう ⚫ボディを指定する ⚫ボディには必要なパラメータをJSON形式で入力する ©️2023 Cybozu Inc. ① ② ③ ④

    ⑤ ※JSONはシングルクォーテーションは使えず、 ダブルクォーテーションを使用する必要がある
  14. WebサービスへのHTTPリクエストの注意点 ⚫WebサービスのREST APIの利用限度を確認すること ⚫ 無制限にREST APIを使用して言いわけではない ⚫ 利用制限は時間がたてばリセットする仕様が多い ⚫短期間に大量のリクエストは控えよう ⚫

    Webサービスにもよるが、大量のリクエストを短時間で送ると、『攻 撃されている』とみなされてしまう ⚫リクエストしてからレスポンスをもらうまで『時間がかかる』 ⚫ 体感的にはすぐにレスポンスが返ってくることもあるが、プログラミ ング言語によってはレスポンスが返ってくる前に次のコードの処理を してしまうことがある ⚫ 『同期処理』『非同期処理』を把握する必要がある ©️2023 Cybozu Inc.
  15. 同期処理と非同期処理の理解が大事 同期処理 ©️2023 Cybozu Inc. 非同期処理 ⚫ プログラムの実行が順次行われる ⚫ タスクが完了するまで次のタスクに

    進まない ⚫ プログラムの実行が複数のタスクに 対して同時に行われる ⚫ タスクの完了を待たずに次のタスク に進む 席に座る ↓ メニューを手に取る ↓ 食事を選ぶ ホールを呼ぶ ↓ 食事を注文する ↓ スマホでアニメを見る ↓ ご飯を食べる → → 食事を運ぶ → 顧客 顧客 ホール シェフに オーダーを共有 今回案内するプログラムは『非同期処理』(時間の係る処理)を同期的に扱ってくれる内容です (ようは、レスポンスが返ってきてから次の処理にとりかかるようになっています)
  16. HTTPリクエストをプログラミング言語で送ってみよう ⚫Python ©️2023 Cybozu Inc. ⚫Node.js ⚫Unity(C#) コマンドラインで pip install

    requests を実行して、HTTPリクエストに必要な requestsライブラリをインストールする コマンドラインで npm install axios を実行して、HTTPリクエストに必要な axiosライブラリをインストールする SimpleJSONファイルをダウンロードし、UnityプロジェクトのAssetsフォルダに配置する。 https://github.com/Bunny83/SimpleJSON/blob/master/SimpleJSON.cs Unity Asset Store からRest Client for Unityをダウンロードし、Unityのプロジェクトにインポートする。 https://assetstore.unity.com/packages/tools/network/rest-client-for-unity-102501 Python、 Node.js、Unityでの案内をします。それぞれ下準備が必要になります。
  17. PythonからのHTTPリクエスト(GET) ©️2023 Cybozu Inc. リクエストに必要な URLとパラメータを設定。 自分の環境に合わせて変更すること。 ヘッダーに認証情報を追加。 自分のアプリから生成した APIトークンを設定すること

    ヘッダ-情報と合わせて、 パラメータ付きのURLに対して HTTPリクエストをする。 requestsは同期的な関数のため、 リクエストを送信してから レスポンスが返ってくるまで 次の行が実行されない
  18. PythonからのHTTPリクエスト(POST) ©️2023 Cybozu Inc. リクエストに必要な URLとパラメータを設定。 自分の環境に合わせて変更すること。 ヘッダーに認証情報と Content-Typeを追加。 自分のアプリから生成した

    APIトークンを設定すること ヘッダ-情報と合わせて、 パラメータ付きのURLに対して HTTPリクエストをする。 requestsは同期的な関数のため、 リクエストを送信してから レスポンスが返ってくるまで 次の行が実行されない リクエストに含める レコードデータを JSONの形で作成
  19. Node.jsからのHTTPリクエスト(GET) ©️2023 Cybozu Inc. リクエストに必要な URLとパラメータを設定。 自分の環境に合わせて変更すること。 ヘッダーに認証情報を追加。 自分のアプリから生成した APIトークンを設定すること

    await を宣言することによって、 axiosの非同期処理が 終わるまで次の行の処理は始まらない。 axiosは設定したURLに対して HTTPのGETリクエストをする。 Node v18.16.0で実行
  20. Node.jsからのHTTPリクエスト(POST) ©️2023 Cybozu Inc. リクエストに必要な URLとパラメータを設定。 自分の環境に合わせて変更すること。 ヘッダーに認証情報と Content-Typeを追加。 自分のアプリから生成した

    APIトークンを設定すること await を宣言することによって、 axiosの非同期処理が 終わるまで次の行の処理は始まらない。 axiosは設定したURLに対して HTTPのPOSTリクエストをする。 ボディもリクエストに含まれている。 リクエストに含める レコードデータを JSONの形で作成 Node v18.16.0で実行
  21. Unity(C#)からのHTTPリクエスト(GET) ©️2023 Cybozu Inc. Unity 2021.3.25f1で実行 HTTPリクエストの準備 成功時に処理される 失敗時に処理される ゲーム内のオブジェクトに

    コンポーネントとしてつけると、 ゲーム実行時に処理が始まる ※ Simple.JSON を使って JSONを扱いやすくしています ライブラリの仕様で、デフォルトの ContentTypeが application/jsonな ので、オプションでfalseに設定する 必要がある
  22. Unity(C#)からのHTTPリクエスト(POST) ©️2023 Cybozu Inc. { "app":237, "record":{ "manga_title":{ "value":"ドラゴンボール" },

    "manga_artist":{ "value":"鳥山明" } } } 右のような JSONを作成 HTTPリクエストの準備 成功時に処理される 失敗時に処理される Unity 2021.3.25f1で実行 ※ Simple.JSON を使って JSONを扱いやすくしています
  23. まとめ ⚫kintone ⚫ データを貯めるデータベース ⚫ REST APIがあり、自分で作ったプログラムからデータのアクセスが出来る ⚫HTTPリクエスト ⚫ ウェブサービスへのデータの要求のこと。

    ⚫ 要求する方法には色々とルールがある。 ⚫ 情報をURLパラメータやボディに含める必要がある ©️2023 Cybozu Inc. kintoneにデータを保管して、 独自アプリと連携して 何か作れるかも・・・!
  24. おまけ ⚫kintone開発者ライセンス ⚫ メールアドレスで取得可能 ⚫ https://developer.cybozu.io/hc/ja/articles/200720464 ⚫ 公式ドキュメント(チュートリアルやAPI情報を確認できます) ⚫ https://cybozu.dev/ja/

    ⚫kintoneのSDK ⚫ JavaScript Client (公式) ⚫ https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/ ⚫ Java Client (公式) ⚫ https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-java-client/ ⚫ Python ⚫ https://github.com/sada-nishio/kintone_sdk4python ⚫ Ruby ⚫ https://github.com/SonicGarden/kintone_rb ©️2023 Cybozu Inc.