--- created: 2025-08-21T11:55:02.422Z title: garden.ooo visibility: public modified: 2026-02-16T15:47:55.080Z content_id: MwjsoIWyBdGIxqqfyGDEB archival: true tags: - tools - highlight aliases: - garden-ooo --- ![](https://wp.baku89.com/wp-content/uploads/2026/02/garden-1770600953213.png) _ロゴ：[[永良新]]さんデザインの _Aratana_ というフォントをベースに2分でつくったロゴタイプ_ [[baku89.icon]]が開発しているホームページ作成、ノートテイキング、Wiki、ナレッジベースシステム。 [garden.ooo](https://garden.oo)というURLそのものがシステム名であり、サービス名。[[baku89.icon]]自身や友人のWebサイトの[[dogfooding|構築に使いながら]]開発を続けている旧名：[[morion|Morion]] ## 要するに 1. **「個人ホームページ」をつくるための仕組み** - ハイパーテキストの再発見 - カテゴリや投稿タイプという階層構造や、ブログや日記といったタイムライン構造に縛られた今日のWebから、WWW本来のリゾーム性を取り戻す 2. **[[Local-First Software|Local First]]** - 全情報はローカルにテキストファイルとして保存される - データをクラウドに人質にとらない。むしろ、ローカルこそがsource of truthで、クラウドはそれをミラーする存在 - データの実体はただのテキストファイルだから、garden.ooo に限らず色んなシステムで編集したり開くことができる 3. **[[ダダ漏れ]]をアフォードする** - 公的な文章から私的なメモまで、色んなものを安心して綯い交ぜに載せておけるシステム - 公開範囲を細かく設定できる - [見られることを意識したアーカイブページ）](archival)と[個人的で無責任なメモ](scratchpad)とを混在させる ## 設計原則 ### [[階層性と線形性を信じない]] 普通のCMS開発のように、`work`、`event`、`member` のような投稿タイプや、 `/2025/some-post` といったディレクトリに分類したりはしない。そうした設計はその瞬間の見立てにすぎず、「`work`でもあり`event`でもある」ような中間的なコンテンツの登場とともに破綻する運命にある。コンテンツ同士の連関は「AがBに属する」のような含有関係ではなく、「AがBを指し示す」というリンクによってのみ決まる。また、garden.ooo では「ページ（エンティティ）」と「タグ（タクソノミー、分類子）」の区別をしない。（Cosenseを参照） ### [[Local-First Software|ローカル・ファースト]] ページは常にローカルに置かれたテキストファイルとして保存され、相互同期する。ローカルは単なるバックアップではなく、オリジナルそのもの。書き手の「第二の脳」をクラウド上に人質に取らない。 - 参照：[File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) ### [[プレーンテキストは普遍的なインターフェース]] ページのソースはプレーンテキストによって表現される。CMSの管理画面だけではなく、メモ帳からも編集出来るし、ほかのCMSにインポートすることも、コマンドで一括置換することも、AIに喰わせることもできる。このサイトは[[baku89.icon]]の好みでMarkdownを採用したが、HTMLに変換できさえすれば、Cosenseのブラケット記法でもなんでも好きな構文をユーザーは採用することができる（予定）。ちょうど今日、The VergeにObsidian CEOの[[Steph Ango]]へのインタビューを読んでいて、面白い下りがあった。 > 「ひとつ面白い展開として、ぼくはステフにこう尋ねた。多くの競合が生産性ソフトに次々とAI機能を詰め込もうとしているのに、なぜ Obsidian はそれに倣おうと急いでいないように見えるのか、と。 > _[Obsidian’s CEO on why productivity tools need community more than AI | The Verge](https://www.theverge.com/decoder-podcast-with-nilay-patel/760522/obsidian-ceo-steph-ango-kepano-productivity-software-notes-app#:~:text=And%20in%20one%20interesting%20twist%2C%20I%20asked%20Steph%20why%2C%20when%20so%20many%20of%20his%20competitors%20seem%20to%20be%20racing%20to%20stuff%20their%20productivity%20products%20with%20AI%20features%2C%20it%20didn%E2%80%99t%20seem%20like%20Obsidian%20was%20all%20too%20eager%20to%20follow%20suit)_ これは的外れも良いところで、「プレーンテキストを用いる」という設計がその答えだろうと思っている。だって、Obsidianの実体は手元のPCに保存されたただのテキストファイルなんだから。文字通り Notion AI 連携できない Notion と違って、ObsidianはCursorでもVS Code + GitHub Copilotでも、どんなIDEやAIシステムとも統合することができる。 Obsidianには、多くのプラットフォーマーが口にする「エコシステム」なんて意識はなくて、プレーンテキストを介した、人類がこれまでに築き上げてきたコンピューティング文化という、より大きなものの一部であるっていう自覚と謙虚さがあるんだと思う。OpenDocやUNIX思想にも通ずるものを感じる。 ### [[ダダ漏れ]]をアフォードするコンテンツの階層構造同様に、その書き手の気分もまた、公か私か、寄稿かつぶやきかといった境界で割り切れるものではない、連続的なもの。garden.oooでは、そうした曖昧さを切り捨てず、そのままに受け止められる「構造のなさ」を大事にしている。ブログとニュース、リサーチとブックマークは区別なく保管でき、両方のタグをもたせればその中間的な性質をもたせることができる。ページの公開設定やクロール設定も多段階でセットできるし、気まぐれで変えることもでる。だからこそ、書き手は自分の思考や制作の過程を「ダダ漏れ」のまま残しておけるし、読み手はその連続性を含めてアクセスできる。 - Archival フラグの導入 - Archival pages: [見られることを意識したアーカイブページ）](archival) - Scrachpads: [個人的で無責任なメモ](scratchpad) ## メモたち - [[garden/tech|garden.oooの技術スタック]] - [[garden/frontmatter|garden.ooo Frontmatterフォーマット]] - [[garden/md|garden.ooo Markdownフォーマット]] - [[garden/implementation|garden.oooの設計]] - [[garden/pricing|garden.oooの価格設定]] - [[garden/sites-to-renewal|garden.oooでリニューアルしたいサイトたち]] - 関連する概念たち - [[Hypertext]] - [[Transclusion]] - [[Intertwingularity]] ## 利用モード - **Browser mode**: まずは、アカウント作成すらせずに使い始めらる。データはユーザーのブラウザに直接保管される - Origin Private File System (OPFS)、あるいはIndexedDB + mysqlite3 on wasmで - **Local mode**: ディレクトリを選択すれば、自動的にローカルの`.md`とも同期される - それをDropboxとかで他のデバイスと同期すれば複数端末からでも編集できる。 - あるいはそのフォルダをまるごと[[Obsidian]]のVaultにするとか。 - Browser modeにおいても、OPFS上に.mdファイルは保存されているから、実装は殆ど変わらない - **Server mode**: サーバーにデータを保管したくなって初めてアカウント登録をする - たとえば: - モバイル端末との同期をしたい時（iOSはFile System Access APIでiCloudドライブにアクセスとか出来ないので）、 - Web上に公開したい時 - 複数人で簡単に共同編集したい時 - そのアカウントとページが作られている事自体は公表され、検索可能であり、`/index.md`は常に見られる - オリジナルの`.md`はE2Eで保管される - エンベロープ暗号 - 限定公開コンテンツは - 一般公開サイトだけがSSRされる。それ以外は、クライアントサイドで`.md`のパースとDOMレンダリングが行われる。 - 基本的にはOAuthだけ。専用のアカウントを作る必要がない（その方が開発楽だし） - `foobar.garden.ooo`のようにサブドメインが与えられる - 画像は、適当に上限を決めてアップロードは可能 - アップロード上限を超えたいときは、クライアントサイドで復号可能なWordpressのAPI Keyなどを与えて、自前のサーバーにアップロードするか、課金モデルに移行する - Headless CMSとして使うためのAPIは、`localhost`等の開発環境には常に開放されている。もし外部ドメインから呼び出したい際は、後述の課金モデルに移行する。（これってドメイン偽造可能なの?） ## 名前 [[Digital Gardening]]から。トンチキでナンセンスな感じ。[[cosense|Cosense]]は素敵な名前だと思うけど、「言霊」を込めすぎているのが[[baku89.icon]]の感覚だと惜しい。Helpfeelという社名からしてそうだけど……。サービス名表記は一貫して `garden.ooo`。読み方はそれぞれに任せる。「ガーデン」でも「ガーデン・オー・オー・オー」、「ガーデン・トリプルオー」でもなんでもいい。 ## 雑多なメモ - [[Obsidian]], [[cosense|Cosense]], Notion, Evernote, Wordpressといったものの中間 - 中間というか、ディレクトリで整理されたmarkdownというデータを中心とした[[OpenDoc]]的なエコシステムに対して「CMS」という角度から補完するものっていう感覚？ - 投稿タイプやタグ、カテゴリ、フォルダ分けという概念のない、ただのテキストファイルで相互リンクするページの集まりとしてサイトを構築できる - コアにあるのはAPI - https://featuredprojects.jp のために開発し、このサイトで投入しながら安定化を図っている - [[使えそうなMarkdown拡張]] ## 設計 → [[Principles for Digital Gardening]] 各ページは本質的には以下の情報から成り立つ - ユニークなpath (e.g., `/hello`, `/2025/some-posts`) - DBにシリアライズ可能な何らかのデータ（JSONなど）畢竟、本文すら必要ない。英単語のデーターベースサイトとかだと実際そうなると思う。Nuxt ContentはYML, CSVファイルをページデータとして使用することができる。ただし、一般的にはページからなるサイトの構築にも使うものなので、プレーンテキストからHTMLの構文木にパース可能な言語を選定しておく。以下、Lightweight markup language (LM言語) と呼ぶ。 - HTMLそのもの - Markdown - Cosenseブラケット記法 - Textile - 以下のVDOMそのものを表したJSONテキスト（何らかのリッチテキストエディタで編集される前提で）構文木は例えばこういう感じ。（Nuxt Contentにおける内部表現の例。rehypeでもremarkでもどの表現方法でもOK） ```js { type: 'root', children: [ { type: 'element', tag: 'p', children: [ {type: 'text', text: 'Hello, World!'} ] }, { type: 'element', tag: 'img', attributes: { src: 'https://example.com/some-image.jpg' } } ] } ``` これをVueでもReactでも、VDOMを実際のDOMに変換可能なフロントエンドライブラリに流し込み、Webを表示させる（あるいはCGIでもいい）投稿タイプやメタデータのスキームは、流動的に変化させられるようにする。NoSQLで構築したいところ。Markdownだと、Frontmatterにこういう感じのものを書き込める。ここはObsidianとできるだけ互換性をもたせたい。 ```yml created: 2025-08-20 title: Hello World title_locale: ja: こんにちは、世界！ layout: grid sort_by: modified visibility: public tags: - video - diary ``` ## linkとbacklink ページ同士は、本文のリンク、あるいはtagsを介して関連性をもたせる。たとえば、「メンバーA」のページを「チーム」に関連付けるには、単ページの中で「チーム」のpathにリンクを貼ればいい。 CMSにおけるタグ分類と違うのは、「チーム」と「メンバーA」のページに本質的な違いは無いこと。オブジェクト（括られるもの、対象）とタクソノミー（分類子）を区別しない。カテゴリやフォルダによる木構造の分類に対して、タグによる分類はいわば二部グラフではあるが、 MorionについてはCosense同様有向グラフの構造をもたせる。 → [[データ構造の階層関係]] そして、「リンクされたもの」から「リンクしたもの」には自動的にバックリンクが貼られる。この機能をうまく使うことで、従来のCMSにおけるカテゴリや投稿リストいったものを表現する。 → [[Backlink]] Morionの現状の実装では、「タグによるリンク」と「本文中からのリンク」を便宜的に区別している。タグリンクのほうが本文リンクよりもより高い関連性を示唆する。 - **タグリンク:** 所属、包摂、共通性 - **本文リンク:** 言及例えば、「チーム」というページをカテゴリのように運用したいときには、チームメンバーからタグリンクを貼ることとする。かつ、ページのレイアウトをデフォルトの`page`からそれ以外のもの（FPとこのサイトでは`grid`, `table`を用意）に加えることで、本文後に追記されるbacklinksから本文リンクを除外することができる。 ```yml layout: grid sort_by: title sort_order: asc ``` こうすることで、「チームメンバーは[[こちら]]を御覧ください！」という関係のないページがチーム一覧に表示されるのを防ぐ。 ## 公開設定 - `public`: 誰からもみることができ、リストにも表示される - `unlsited`: 一切のページリストには表示されず、URLの直接入力や直リンクのみで表示できる - `proteced`: 何らかの認証（パスワード、OAuth、WebAuthn等）越しに見ることができる - 数人への共有、メンバーシップ制、あるいは同じCMSを使うメンバー間でのみ閲覧可能 - `github:baku89`, `mail:b@baku89.com`とか。 - `private`: 書き手だけが見ることができる ## archivalフラグ全てのページは、公開設定とは別にarhivalというフラグを持つ。これによって、永続化したいものと、[[エフェメラ]]ルなものを区別する。 - **[[archival|Archival]]**: 公開ページ（不変のURLで公開され続け、引用可能なもの） - permalink - **[[scratchpad|Scratchpad]]**: メモ書きページ（一応見ることのできる個人的なメモ書き） - no-index, no-follow 詳細はそれぞれのページを参照。そして、archivalページは、バージョン管理が出来るようにする。SemVerで。 `${major}.${minor}.${patch}` - `patch`: 誤字修正。編集のたびに勝手にインクリメントされる - `minor`: 普通の改稿 - `major`: 文章全体の構造が一変するくらいの大きなアップデート。一度 `1.0.0` を付与したテキストは、できる限り取り下げられないようにする。 ## 多言語対応 LMLは多言語を扱えるように拡張してもいい。FPとbaku89.comではこうした、WordpressのqTranslatorに則ってこういう記法を採用している。 ```md [\:ja] **なんらかの強調文字** [\:en] **Some emphasized texts** [\:] ``` 「`\`」は無視して！プリプロセッサ的に正規表現置換しているから、このタグを普通に入力するとそれ自体が多言語ブロックとして解釈されちゃうけどなんでもいいかも。今ならぼくはこうするかな。 ```html 日本語English ``` あるいはMDC記法にのっとって ```md ::en some texts :: ::ja 何かの文章 :: ``` とか、 ```md ::locale #en some texts #ja :: ``` だっていい。 ## API いや、これはいらないなぁ。RxDBを使うんだもの - [`/api/pages?tags=tools&limit=5`](/api/pages?tags=tools&limit=5) - まちがえた、取得件数に上限を設けるのを忘れてて、そのままアクセスすると（公開されている）全ページがdumpされてしまう - [`/api/page?path=&2Fmorion`](/api/page?path=%2Fmorion) - 常にpathにleading slashをつけるか迷う。やめたほうがいいと思う - [`/api/search-index`](/api/search-index) - [`/api/pages-count`](/api/pages-count) ## 仲間の募集興味がある人としたいなフロント、バックエンド、デザインで数名で。

橋本Hashimoto 麦Baku

橋本Hashimoto 麦Baku

garden.ooo

A School of Fry

Morion

Making of “Kindolphin”

Glisp

Scene Referred Workflow

Douglas Hofstadter

Pave

Chirashi Composition

Mochi Sims

ベナール・セルを撮る

Unim

Koma

適応度地形

Spacenotblank

Hashimoto Baku

Hashimoto Baku