お役立ち情報&資料コラム記事

タスクワールドAPI、Javascript サンプルプログラムを使ってみましょう!

〜 API連携により、タスクワールドの可能性が大幅に広がります!〜

今回は Taskworld API で情報を取得する Javascript のサンプルプログラムをご紹介します。こちらは認証ユーザーに紐づく情報を取得してワークスペース内の情報をツリー状に表示しますので、登録情報のご確認や仕様理解のご参考にお使いいただけます。

本稿ではプログラムの使い方と実装のポイントをご説明します。

※本稿に掲載されているインターフェース画像は記事がリリースされた時点のものであり、現在のものとは完全に一致しない場合があります。

サンプルプログラムの使い方

まずはサンプルの使い方をご説明します。

本記事の公開時点ではセキュリティ上の理由から API サーバ側で CORS 制限を掛けています。そのため本プログラムをWEB サーバーから直接配信する場合は情報取得時にクロスドメインエラーが発生しますのでご注意ください。

htmlファイルをブラウザで開くと以下のように表示されますので、email と password 欄に登録済みユーザーの認証情報を入力して「情報取得」ボタンをクリックします。

email と password 欄に登録済みユーザーの認証情報を入力して「情報取得」ボタンをクリックします。

認証情報を間違えると以下のように result 欄にエラー情報が表示されます。この場合は再入力してリトライしてください。

認証情報を間違えると以下のように result 欄にエラー情報が表示されます。この場合は再入力してリトライしてください。

認証に成功すると以下のようにユーザー情報とワークスペース情報が表示されます。

認証に成功すると以下のようにユーザー情報とワークスペース情報が表示されます

「ユーザー情報」には認証したユーザーの登録情報とアクセストークン、デフォルトスペース ID(ユーザー登録時最初に作成したワークスペース)が表示されます。

「ワークスペース情報」には、ユーザーが参加しているワークスペースの一覧が表示されます。(default)となっているのは認証したユーザーのデフォルトスペースです。

ワークスペース名がASCII文字以外の場合、ワークスペース名はハッシュコードの形になります。これはプロジェクト ID とは違うので注意してください。

※なお、こちらは記事公開時点の仕様であり、今後変更される可能性があります。

ワークスペース名をクリックすると、アコーディオンが展開してワークススペースの詳細を表示します。

ワークスペース名をクリックすると、アコーディオンが展開してワークススペースの詳細を表示します

丸括弧でくくった数字は下位のアイテムの件数です。

「channels」「projects」のアイテムをクリックすると各々の詳細を表示します。

「channels」はチャットの情報です。

「general / project channel(s)」 はそれぞれワークスペースとプロジェクトのデフォルトのチャットです。

「group channels 」は任意で作成したグループチャット、「direct channels 」はダイレクトメッセージです。チャット情報を展開すると以下のようになります。

「project(s)」はプロジェクトの情報です。アコーディオンを展開するとプロジェクトの詳細とタスクリストが表示されます。タスクリストとタスクはさらにクリックして詳細を表示できるようになっています。

以上がサンプルプログラムの使い方です。

実装のポイント

このプログラムの実装のポイントとしては、階層化された情報を順番に取得するための仕組みを設けた点がまず挙げられます。タスクワールドのオブジェクトの情報を取得するには上位オブジェクトの ID を指定する必要があるため、必然的にこのようなスタイルになります。

また、一度にすべての関連情報を取得すると大量の通信が発生するため、本プログラムではアコーディオン表示を展開した時に追加情報を取得しています。

イベントごとに行う処理は以下の通りです。

★「情報取得」ボタン押下時

  • auth(ユーザー認証)
  • user.get-info(認証ユーザーのユーザー情報を取得)
  • workspace.get-user(ユーザー名表示のためワークスペースのユーザー情報を取得)
  • workspace.get-all(ワークスペースの情報を取得)
  • channel.get-all(各ワークスペースのチャット情報を取得)

★ ワークスペース表示展開時

  • project.get-all(プロジェクト情報取得)
  • tag.get-all(タブ名表示のためタグ情報を取得)

★ プロジェクト表示展開時

  • tasklist.get-all(タスクリスト取得)

★ タスクリスト表示展開時

  • tasklist.get-tasks(タスク情報取得)

本プログラムでは各アイテムを識別しやすくするために、ユーザーやタグについては登録名も表示しています。ですが、以下の情報は記事公開時点ではAPIから取得できませんので、こちらはタスクワールド管理画面で確認していただく必要があります。

  • 日本語のワークスペース名
  • プロジェクトチャットのプロジェクト名

まとめ

いかがでしたか?今回は情報取得のみでしたが、更新や追加の API を組み合わせれば自由なデザインでタスクワールドを操作できるようになります。興味がある方はぜひトライしてみてくださいね。

簡単サインアップ、すぐに全機能を使えます。