インプリムのhmineです。あけましておめでとうございます。
2025年も引き続きプリザンターの製品開発に取り組みます。よろしくお願いします！
2025年最初のプリザンター（以下公式ページ）に関する記事を投稿いたします。
本記事では、レコードに画像を表示する際、プリザンターの標準機能である画像のアップロードではなく、ファイルの直リンク指定をするTipsをご紹介します。
本Tipsではnginx（エンジン・エックス）を使用します。
主にローカル上でプリザンターを個人利用する際、画像管理の選択肢を広げるTipsです。
前置き（読み飛ばしOK）
Q. 年のはじめと言えば？
A. 新たな年の目標、抱負 → そして目標管理！
目標管理といえば、「仕事に限らず『趣味』や『家庭生活』も含めてあらゆるタスクや知的作業の進行を管理し、実績のログを残す」といった、「セカンドブレイン」を日常生活に取り入れる方が増えていると聞きます。
知人からは「Notionで目標管理やふりかえりをしている」という話を聞きました。
- Notion
- Obsidian
- Google Drive
- Miro
このような有名サービスの中に、プリザンターも加われないだろうか、と考えています。
2025年は私もさまざまな情報の整理をプリザンターに助けてもらおうと思います！
この記事のネタは、ローカルの画像整理にプリザンターを活用できないか考える中で、検証したものです。
今回やること。
--画像表示を「直リンク方式」にします。
📝プリザンターの標準機能：
「内容」欄や「説明」項目に画像を表示したいときは、画像をアップロードする。アップロードした結果、元の画像とは別にバイナリが作られる。
▼プリザンター標準の画像アップロード：
📝今回やること：
プリザンターに画像アップロードすることなく、元の画像を直接「内容」欄や「説明」項目へ表示する。バイナリや別ファイルを介さない「直リンク」となるところがポイント。
▼フォルダ構成例：
.
|-- compose.yaml
|-- .env
|
+-- nginx
+-- Images
↑このImagesフォルダをWindows等ホストの画像管理フォルダとして使いながら、
プリザンターのレコードに即時反映する運用を実現。（アップロード不要）
--どうやるの？
静的コンテンツを管理するため、nginxのコンテナを立ち上げます。
プリザンターから以下のようにnginxのURLを指定し、画像を表示します。
🖼️画像を指定するMarkdownの例：
--nginxはなぜ必要なの？
画像がホストPCのフォルダにあるだけ、または、プリザンターのコンテナにファイルをマウントしただけでは、マークダウンから指定するURLがまだない状態です。
静的コンテンツへアクセスするURLを発行するにはWebサーバが必要となるため、nginxを使います。
--なにが便利になるの？
画像のアップロード操作が不要となります。また、直リンク表示になります。
👉この特性より、プリザンターのレコード新規作成と同時に大量の画像をはやく反映したい場合や、ローカルの「リアルタイムの画像」を見られるテーブルを構築したい場合（バイナリと二重管理するのではなく）、威力を発揮します。
トレードオフとして、「画像ライブラリ」機能 等プリザンターに画像がアップロードされている状態が前提となっている機能は使えなくなります。
👉なぜプリザンターに画像を表示したいのか、その目的に応じて使い分けてください。
※本記事は個人PC上、個人ネットワーク上の利用を想定しています。
仮にインターネット上にあるサーバで同じことをおこなうと、画像は誰でもどこからでもアクセス可能なファイルとなります。
プリザンターのユーザ以外にアクセスされたくないファイルは、プリザンター標準のアップロード機能で連携してください。
📝前提条件：
- 個人のPC（Windows11等）でコンテナを立ち上げてプリザンターを運用をしている。
- 以下マニュアル手順でプリザンターを立ち上げている。
👉localhost:50001 でプリザンターにアクセスする環境ができている。
手順
nginxのDockerイメージを使用します。
事前準備
💡nginxの情報を https://hub.docker.com/_/nginx で確認。
静的ファイルの配備先をチェック。
今回確認した結果は、/usr/share/nginx/html でした。（2025/1/1）
compose.ymlを編集し、サービス「nginx」を新規追加します。
nginx:
image: nginx:latest
container_name: nginx
ports:
- "80:80"
- "443:443"
volumes:
- type: bind
source: ./nginx/Images
target: /usr/share/nginx/html/MyFile/Images
ホスト側（Windows11）の画像の配備先は「source」の通り「./nginx/Images」です。
ここは自由に変えられますので、一度このブログの通りためした後は、使いやすいパスに変えてください。
コンテナ側の配備先は、先ほど確認した「/usr/share/nginx/html」ディレクトリ配下です。
ここも/MyFile/…以下は好きなパスを指定して問題ありません。
また、volumesは複数設定できますので、ご自身が整理しやすいように工夫してください。
画像ファイルをWindows11のフォルダ上に配備
上記のcompose.ymlを使用する場合は「./nginx/Images」配下です。
「demo.png」というファイル名の画像を配備してください。
コンテナを再生成
docker compose up -d nginx
※もしプリザンターと一緒に立ち上げるのであれば
docker compose up -d pleasanter nginx
これで作業完了です。
難しい記述、コマンドは不要でした。
確認1.
まず画像ファイルのマウントができているかを確認します。
docker ps -a
docker exec -it {{1行上のコマンドで調べたコンテナID}} /bin/sh
nginxのコンテナでbashできるようになりました。
Linuxの標準コマンドで現在のディレクトリやディレクトリ内の状況を確認します。
pwd #現在のディレクトリを確認。
ls -l #ディレクトリ内の状況を確認。
コンテナでbashをおわらせたいとき。
exit
compose.ymlで指定した静的ファイルの配備先をチェックします。
cd /usr/share/nginx/html/MyFile/Images
ls -l
# 以下、ls -l 実行結果の例。
total 4920
-rwxrwxrwx 1 root root 5034290 Jan 1 01:15 demo.png
👉マウントが成功していることを確認してください。
確認2.
ブラウザでURLを指定し、画像を表示しましょう。
http://localhost/MyFile/Images/demo.png
👉ブラウザで表示できることを確認してください。
確認3.
最後はプリザンターのレコード上で画像を表示します。
[md]
👉プリザンター上からも表示できることを確認してください。
補記：バインドマウントの利用について。
今回、compose.ymlの「volumes」配下で「type: bind」を指定し、バインドマウントのしくみを使用しているため、画像ファイルの取り扱いが楽です。
nginxとプリザンターのコンテナを立ち上げたままで、以下のような操作ができます。
- Windowsのペイントで「./nginx/Images/demo.png」を加工すると、加工後の画像でプリザンターに表示されます。
※加工前の画像のキャッシュが表示されることはあります。「F5」キーで最新のファイルを表示してください。 - Windows11側の「./nginx/Images」に画像ファイルを追加すると、即時でWebサーバの静的コンテンツとして取り扱えます。
#別ファイル「demo2.png」を「./nginx/Images」配下に追加すると、以下URLで画像に即時アクセス可。 http://localhost/MyFile/Images/demo2.png
このように、Windows11のフォルダ上で画像を取り扱いながら、間に他のコマンドを挟むことなく、nginxコンテナ上のコンテンツとして扱うことができるのです。
▼Use a bind mount with Docker Compose