【YOLO:②アプリ偏】YOLO x Pleasanterで物体検出のDX加速！
はじめに
前回の記事で作ったFast API x YOLOのアプリをローコード業務改善ツール Pleasanter(プリザンター) と接続します。
Pleasanterと接続することによって物体検出によるDXが超加速します！
- スマホからも利用可能
- 推論結果(物体検出結果)をデータベースに即登録
- 後工程でスムーズな活用(月間の車両検出台数をエクスポートし、分析する等)
できること
この投稿の内容を設定すると以下のようなことができるようになります。
スマホから物体検知
パソコンから物体検知
前回の記事
Pleasanter(プリザンター)とは
株式会社インプリム(Implem Inc.)が提供している「オープンソース×ノーコードで実現する
スケーラブルな業務システム構築プラットフォーム」です。[1]
要は、サイボウズ株式会社の kintoneのようなことがOSSでできる すごいシステムです！
(雑な説明で申し訳ありません、、、いつもPleasanterには大変お世話になっておりますが、知らない人向けにはこれが簡単そうで、、、(媚売))
Pleasanterを知らなかった！という人は公式サイトも確認してみてください。
前提条件・対象
- AWSの基礎知識があること(EC2の起動ができる程度でOK)
- Pleasanterを構築済みであること
- 前回の記事(YOLO:①アプリ偏)でFastAPIサーバーが構築済み(サーバー起動済み)であること
動作環境
この記事の構成では諸事情あって2台のEC2を使っています。
- FastAPI用：Amazon Linux 2023
- Pleasanter用：Windows Server 2025
(Windows_Server-2025-English-Full-Base-2025.09.10)
パターン1：この記事の構成
別パターン
少しアレンジして、1台のEC2(Linux)やWSL上にすべて構築しても大丈夫です。
(パターン1→2→3と簡単な構成になっていきます。)
パターン2：EC2 1台にdocker版PleasanterとFastAPIサーバー
パターン3：WSL内部にdocker版PleasanterとFastAPIサーバー
図形の描画はここからDraw.ioを使いました[2]
構築手順
手順の小目次です。
- Githubから設定ファイルを取得
- Pleasanterにインポートして導入
- サーバースクリプトの変数値を調整
1. Githubから各種設定ファイルを取得
前回記事で使ったリポジトリのtestフォルダにアップロードしたものを使います。
Pleasanter設定用jsonを以下リンク先でダウンロードしてください。
2. Pleasanterにインポートして導入
キャプチャに従って設定していきます。
設定のインポート
サイトパッケージのインポート
Pleasanter設定用jsonをインポート
正常にインポート出来たら、以下のようなフォルダが構築されます。
YOLO_といch/ # フォルダ
├─ YOLOｘFastAPI/ # 親サイト：ここで画像を送信します。
└─ YOLO-output/ # 子サイト：ここに検出結果が保存されます。
# ただし親にリンクしているので、初期設定時以外は開きません。
子サイトのIDを控える
「YOLO_といch」を開く
「YOLO-output」を開く
サイトIDを控える
後でCHILD_SITE_IDとして使うので/items/147/index部分を控えてください。
APIキーを控える
「API設定」を開く
APIキーを控える
3. サーバースクリプトの変数値を調整
調整画面に移動します。
「YOLOｘFastAPI」フォルダの管理画面にはいる
「サーバースクリプト」→「serverside-test」を開く
「// MARK: 初期設定」部分の変数を変更します。
- この二つは前回記事で設定したものです。
- API_BASE_URL ：FastAPIサーバーのIP
- YOLO_API_KEY ：FastAPIサーバーの.envにあるキー(DETECTION_API_KEY)
- この二つはPleasanterで控えたものです。
- PLEASANTER_API_KEY ：APIキー
- CHILD_SITE_ID ：出力先のサイトID
API_BASE_URL = "http://＜ここがFastAPIサーバーIPなので注意！＞:8000";
変更できたら、
- 「変更」でサーバースクリプト画面を閉じます
- 「更新」で設定を反映します
緑の帯で更新しましたと表示されることを確認
動作確認
スマホの場合
「YOLOｘFastAPI」にアクセスし、右上の三本線から「新規作成」
「写真アイコン」→「写真をとる」
「作成」 ※部屋を撮影するわけにもいかないのでモニター直撮り
パソコンの場合
「＋」で新規作成 →以降はスマホと同じなので割愛
結果の補足
作成画面を下にスクロールすると結果が表示されています。
サーバースクリプトで処理しています。
- 説明A：検出した物体の種類:個数のjson
- 説明B：検出した物体の位置と種類を表すボックス付きの出力画像
- 説明C：A,Bを含む詳細(各ボックスの4隅のx,y座標など)
サーバースクリプトの中身について
Pleasanterのマニュアルと結構格闘した、我ながら頑張った部分です。
はじめてPleasanterで画像の送受信しました。
せめてデフォルトで閉じているこのゾーンに書かせてください！😭
そしてAPIではなくサーバースクリプトだけでできるなら教えてください😭😭
- function getAttachmentBase64()
- スマホやPCで「内容」に張り付けた画像を Base64 で取得する関数
- Pleasanterの親サイト自身のAPIを呼んでいる
- function updateImageHashOnly()
- APIを使って DescriptionB にBase64形式の画像を上書きする関数
- こちらはPleasanterの親サイトから、子サイトのAPIを呼んでいる
- 処理順の関係で入力画像の保存・ログ表示・出力画像の保存を共存するために、親子サイト構成にした
後工程での活用例
Pleasanterは表示形式の調整やCSVエクスポートが可能です。
(エクスポート機能を使います。詳しくは公式マニュアル参照[3])
エクスポートしたデータを別途プログラムで処理したり、分析したりもできますね。
(サーバースクリプトの書き換えによって、説明Aに特定の物体の個数だけ登録することも可能)
おわりに
皆さんの環境でも設定できたでしょうか？
今回はスマホからアクセスできるPleasanterと組み合わせたことで、自分的にはすごい仕組みが見えたと思っています。
パソコンを開かなくていいということは、建設業、製造業、農業といった場面でもITの恩恵を受けやすいですよね！
IoTカメラからPleasanterのAPI経由で、定期的な物体検出も可能ですよね！
(伝われ～～～～～！(念))
✍️ この記事が参考になったら「いいね」「ブックマーク」「フォロー」をお願いします。
Xで絡んでいただくのも大歓迎です！
トラブルシュート
上手く動かない場合は以下を順に試してみてください。
- REQUEST_TIMEOUT_MSの値を「30000」等長めに設定してみる
- F12を押して開発者ツールのログをAIに投げる
- 記事のコメントを書く(ベストエフォートで確認・返信します！)
使用した画像
おまけ
AIに建設業、製造業、農業での活用イメージを作ってもらいました
ポン出しなのでちょっとぞわっとする文字ですね🤣
Discussion