はじめに
こんにちは! shuです。
今回は、作図サービスLucidChartのAPIに挑戦してみたいと思います。
作図AIサービスに興味がある方やHULFT Squareの活用法を知りたい方、ぜひお付き合いください!
新しい視点から、これらのツールがどのように役立つかを一緒に探求していきましょう。
今回やること
HULFT Squareを利用して、LucidChartの REST APIと連携し、組織図を作成します。
このプロセスを通じて、効率的な情報整理の方法を学びますので、自分のプロジェクトにも応用できるヒントが得られるかもしれません!
・HULFT Squareで作成するスクリプトは下記のようになります。
作成手順
1.事前準備
①LucidChartのトライアル申込
②APIトークンの発行
③組織図生成するためのファイルの用意
・従業員データの用意(.csv)
・Jsonファイルの設定
・上記2つのファイルをもとに、.lucidファイルの作成
2.HULFT Squareの設定
④組織図生成するためのファイルをストレージに格納
⑤コネクションの設定
⑥スクリプトの設定
3.結果確認
1.事前準備
①LucidChart無料トライアルの申込
「開発者プラットフォーム」機能があればLucidChartのAPIをコールすることが可能ですので、今回はチームプランを試しました。
下記のURLからチームプランのトライアルを申し込んでいきます。
②APIトークンの発行
LucidChartにログイン、開発者画面でAPIキーを作成
ログインURL:https://lucid.app/documents/#/home?folder_id=recent
開発者用URL:https://lucid.app/developer#/apikeys
③組織図生成するためのファイルの用意
下記以後の処理はLucidchart Standard Importドキュメントをご参考してください。
https://lucid.readme.io/v1.0/docs/overview-si
■従業員データの用意
フォルダ名:data ※フォルダ名は固定
ファイル名:org-chart-data.csv ※CSVファイル名はご自由に設定可能
data
└── org-chart-data.csv
EmployeeID,Department,Role,Fullname,SupervisorID
EmployeeID,Fullname,Role,SupervisorID,Image
E01,鹿内テクノロジー,鹿内 春太,,
E02,ビジネス本部 本部長,鳥会津はじめ,E01,https://images.pexels.com/photos/1181672/pexels-photo-1181672.jpeg
E03,技術革新センター 部長,山田 太郎,E02,
E04,技術革新センター 副部長,佐藤 花子,E03,
E05,技術革新センター,鈴木 次郎,E03,https://img.icons8.com/color/452/businessman.png
E06,技術革新センター,高橋 美咲,E03,
E07,技術革新センター,田中 健,E03,https://img.icons8.com/color/452/businessman.png
E08,製品販売技術部 部長,中村 太一,E02,
E09,製品販売技術部一課 課長,伊藤 明,E08,
E10,製品販売技術部一課,小林 あゆみ,E09,https://img.icons8.com/color/452/businessman.png
E11,製品販売技術部一課,加藤 勇気,E09,
E12,製品販売技術部一課,吉田 桃子,E09,
E13,製品販売技術部二課 課長,石井 計,E08,
E14,製品販売技術部二課,斉藤 理恵,E13,
E15,製品販売技術部二課,山口 直樹,E13,
E16,製品販売技術部二課,松本 玲子,E13,
E18,製品販売技術部三課,李 華,E08,
E19,製品販売技術部三課,前田 優,E08,https://img.icons8.com/color/452/businessman.png
E20,製品販売技術部三課,藤田 まどか,E08,
E21,製品販売技術部三課,井上 陽介,E08,
E22,データ統合コンサル部,森田 恵介,E02,https://img.icons8.com/color/452/businessman.png
■Jsonファイルの設定
ファイル名:document.json ※JSONファイル名は固定
{
"version": 1,
"product": "lucidchart",
"pages": [
{
"id": "page1",
"title": "Org Chart Example",
"dataBackedShapes": [
{
"id": "orgChart1",
"type": "orgChart",
"position": {
"x": 150,
"y": 150
},
"collectionId": "org-chart-data",
"idField": "EmployeeID",
"foreignKeyField": "SupervisorID",
"nameField": "Fullname",
"roleField": "Role",
"imageUrlField": "Image"
}
]
}
],
"collections": [
{
"id": "org-chart-data",
"dataSource": "org-chart-data.csv"
}
]
}
■拡張子.lucidファイルの作成
フォルダ名: data
ファイル名: document.json
上の手順で作成した上記2種類データをまとめてZIP圧縮し、ファイル名拡張子を .lucid に設定 ※今回は 「orgchart.lucid」 に設定
orgchart.lucid
├── data
│ └── org-chart-data.csv
└── document.json
2.HULFT Squareの設定
※HULFT Squareで下記の変数を事前に設定しておきました。
④orgchart.lucidファイルをストレージにアップロード
①ストレージをクリック
➁ファイルをアプロード
③先ほど作成したlucidファイルをストレージにアップロード
⑤コネクションの設定
コネクションは下記のように設定しております。
⑥スクリプトの設定
①orgchart.lucidファイルを格納するファイルパースを指定。
➁今回はStandard Importを利用するため、API タイプを
「x-application/vnd.lucid.standardImport」を入力
③生成するドキュメントのタイトルを設定。今回は「New Document」を入力。
④利用する製品名を指定。今回はLucidchartを利用するため、「Lucidchart」を入力。
組織図を生成するためのPOST実行処理を以下のように設定。
生成されたドキュメントをPNG画像として取得するために、事前に設定した変数と連携し、URLとIDを変数に代入します。
生成されたドキュメントをPNG画像として取得するためのGETリクエストの実行処理は、以下のように設定します。
3.結果確認
HULFT Squareでスクリプトを実行すると、PNG画像が生成されます。
生成された画像は、事前に設定したHULFT Squareのストレージに格納されます。
おまけ
グループ企業情報の自動生成も作ってみました!
ご一読いただき、ありがとうございました。
HULFT SquareとLucidChartの連携が、業務の生産性向上に寄与することを期待しています。今後も新しい技術やツールの活用に積極的に挑戦していきたいと考えています。
もしこの記事が参考になった場合は、ぜひ「いいね」やコメントをいただけると嬉しいです。皆さんの意見や経験をお聞かせいただけると、次の記事づくりの励みになります。