Google AI Studioを使ってPoIC用のWebアプリを作ってみた

2025-12-07
PoIC, 自作ツール

(当記事は知的生産の技術 Advent Calendar 2025への参加記事です。)

ふとGoogle AI Studioを触ってみようと思い立って、何作れるかなぁと考えていたら「PoICのWebアプリなら実装シンプルにできるんじゃね?」とひらめいた!

*PoIC(Pile of Index Cards)は情報カードを使った知的生産術(?)で、普段からその思想を取り入れてメモしたり、ツールを使ったりしてるので自然な発想だった。

何か必要にかられてというよりは、作れそうかつ面白そうだったから作った感じ。

で、完成したのが d-PoIC というアプリ。「デジタルでPoICをやる」そのまんまの命名。

Image

▲ d-PoICの画面。カードが色分けされて表示される

コードはほとんどAI Studio内でGemini 3 Pro Previewに書いてもらって、他のツールも使いながらちまちま修正していった。

主な機能

d-PoICの主な機能をざっくり紹介。

  • PoIC準拠の4カード
    • カードを記録・発見・GTD・参照に分けて書いて時系列で並べる
    • それぞれフィルタリング&カウントできる
    • GTDカードは期限や完了の管理が可能で、期日順で見るモードもある
    • 分類は色とアイコン
    • 位置で分けて 文化の遺伝子 風にしたい気持ちもあったけど、デジタルなら勝手に色変えてくれるし、上部のタグだけ並べるのは中身読めなくて不便と判断した
  • カード作成時間を自動で記録
    • タイムスタンプの形式は自分でカスタムできる
    • カードの本文中にもAlt+tで日時を挿入
  • タグ
    • カードごとにタグを付けられて、フィルタリング&カウントできる
    • インクリメンタルサーチ?できる
    • 一括でOPMLでコピー可能
  • WIKIリンク
    • 本文中 [[hoge]] でそのカードへのリンクになる
    • バックリンクも見られる
    • インクリメンタルサーチ?できる
    • リンク元のカードタイトルを変更するとリンクのテキストも自動で変更される
    • カードが存在しないリンクをクリックすると新しいカードが作られる
    • *この辺はCosenseに影響受けた
  • URLは自動でリンクになる
  • MarkDownのリンク記法にも対応
  • ピンしたカードは上部に並ぶ
  • タイトル・本文から検索可能
  • ヘッダー右のボタン類
    • 表示されてるカードからランダムピックアップ(カードをくる)
    • 複数選択して削除・タグ付け
  • OPMLボタンでタグまるごとや手動で複数選択してコピー
    • 各種アウトライナーにそのままペーストできる
    • PoICでいうタスクフォース編成
  • 画面分割
    • カードをCtrl+クリックしたり、カードを開いたら表示されるボタンからカードを右側に展開できる
    • 2枚のカードを比べてみたり、常駐用カードを開きっぱなしで他の操作が可能
  • Dropboxで同期

PoICがアナログでやっていたことに、デジタルならではの検索やデータ管理を加えたアプリになった。その分画像を扱えなかったり、自由に広げたりできないなどアナログならではの利点は無くなってるけど、うまいこと折衷させたつもり。

開発の苦労話

開発を始めてすぐにPoICらしきものになったものの、デジタルならではの機能を追加するのにかなり手こずった。

特に画面分割が難しかったんだけど、「今回は手動でファイルを修正するのでファイルの全文ではなく、修正箇所だけを生成して、元ファイルのどこをどう修正すればいいか教えてください。」というプロンプトを送るようにしてからサクサク進むようになった。

作業が複雑になってきたらAI全任せより問題を切り分けて人間の方でもトライアンドエラーできる環境にした方が良さげ。少なくとも今は。("知的生産の技術"かはわからないけど、このへんは役に立つ工夫と言えるかも、と思いAdventCalendarに参加させていただきました。)

何にせよ素人の自分が数日でここまで高機能なものが作れるのはありがたい時代だわ。

でも普段遣いのメモやサイトのコンテンツ管理はWorkflowyを使っているので、これを使い続けるかは謎w

参考リンク