はじめに

こんにちは。以前から視聴していた吉田製作所の管理人である吉田氏がガジェットレビューを主としたSNSを作成したと知り、登録してみました。

特にレビューするガジェットもないので、ブログ記事として、自分がClaudeで制作したWEBアプリを２つほど紹介してみようと思います。

異なるAIプラットフォームのログを管理するためのハブサイト

みなさんはどのような用途でAIを使われていますか？私は技術者ではないので高度な使い方はしていませんが、調べ物をする時によくAIを活用しています。

そしてそのような用途で使用していて困ったが各AIのログの分散でした。いろいろなAIプラットフォームを気分や内容の比較であちこち使用しているうちに、ログが分散し、あとで読み返すときに面倒だと思うことが増えました

このような状況に対する解決方法やそうならないためのAI運用方法はいくつかあると思いますが、私に必要だったのはアカウント登録やアプリのインストールを必要とせず、知識がなくても扱えて自分の環境下で保存・動作するものでした。

Claudeを使って作成  

そこで私はClaudeを使って自分にとって理想のサイトを作ることにしました。

そして完成したのがLOGLYです。LOGLYは、上述した私の設計思想を反映したサイトで各プラットフォームの共有URLリンク、および、ユーザーのプロンプトに対する回答内容を自分のローカル環境化で管理・保存するサイトです。

サイトは「LOGLY.html」のみで動作するSingle-File Web アプリなのでソースを丸っとコピーすれば、サイト自体もだれでもローカルで動作させることが可能です。

簡単な特徴

・単一HTMLファイルで動作
・保存（IndexedDB / LocalStorage）
・オフライン利用対応
・AI会話ログの一元管理
・URL保存と本文保存の両対応
・Markdown表示対応
・JSON形式によるバックアップ・復元
・カテゴリ階層管理
・モデル別管理
・プラットフォーム別管理
・信ぴょう性評価機能
・記事内容のURL埋め込み型共有（デフォルトでTinyURL使用）

簡単な使い方の説明

自分で使っているものはNINJAのレンタルサーバーで運用し使用しています。

トップ画面

サイトにアクセスするとこのような画面になります。

・左上のLoglyがサービス名です。（Gemini考案）
・その隣が検索ウィンドウです
・右端の鍵マークは、編集のロック／解除です。意図しない編集を防ぐときに使います
・歯車マークは設定画面に移動します（後述）

会話の内容やURLを保存するには、下段右端の「＋追加」をクリックします

追加画面では各プラットフォームで発行した共有用URLリンクを登録するか、ログの内容を直接登録するテキスト保存型かを上部のタブメニューより選べます・

AIの回答内容は、「この会話全体をMarkdown形式で出力してください。」とプロンプトを送ることでMarkdown形式で出力させることが出来るので、それを貼り付けて管理しています。

設定画面

上から順に
・JSON形式のエクスポート／インポート
・テーマカラーの設定
・信憑性のカラーストライプをプレビューウィンドウに表示
・URL共有時にTinyURLを使うか、使わないかの設定。
※記事内容のURL埋め込み型共有のためURLが非常に長くなります。
※また記事内容が多いとTinyURLでもエラーになる可能性があります

URLの共有化例→ ttps://tinyurl.com/preview/deprecated/25fr4nx9

・スマホのピンチ操作のON・OFF。
・LOGLYのリセット
・IndexedDB の使用容量とLocalStorage の使用容量を確認できます
※ブラウザによっておそらく異なります
※IndexedDBが優先的に使用されます

実際の使用例

ある程度使用しログがたまってくるとこんな感じになります。

プレビュー用のJSONを置いておくので気になる人はインポートして見てみてください。

オンラインブックマークサイト

LOGLYの前身として作成したのがブックマークサイトの「Local Bookmark Online」です

ブラウザのブックマークに入れるほど頻繁に見るサイトではないけど、備忘録として置いておきたいという時用に作りました。もともとはGoogleの保存機能を活用していたのですが、Google依存を減らしたかったのと、WEBページ以外に保存しているもの（地図上のスポットなど）が膨大だったので、こちらを作成しました。

プレビュー用のJSONを置いておくので気になる人はインポートして見てみてください。