前から作ろうと思っていた個人サイトができました。
いやあ頑張った。
見た目はどシンプルでしょぼい感じがすると思いますがかなり頑張っています。この先に進む前にちょっとでいいので触ってみてください。*1
ブログ、用語集、茶の間の統合
これまで以下の場所にアウトプットしていました。
記事:このブログ(Noratetsu Lab)
用語集(フレーズや概念などの切り出し):Noratetsu Lab Dict.
ちょっとした短文:茶の間(初代/二代目)→のらてつの雑記帳 - zawazawa
ブログを書いていてすごく気になるのが、続きとして書いた記事に前の記事へのリンクを貼っても前の記事からはそれが分からないこと、そして単語やフレーズを対象とした記述(つまり事典風の記述)を書きにくいことです。元々日記に適した形態なので仕方ないことでしょう。
一応そのやりにくさを補うために、用語集と称した場をScrapboxに作ってちょこちょこ更新していました。Scrapboxの更新は簡単で楽しいのですが、ブログ記事とリンクするには手動で頑張る必要があります。ブログに書いたものを後から概念として名付けたりした時、元のブログ記事にリンクを貼りに行くのはなんだか非常に面倒で、結局いまいち一体感はないままになってしまいました。用語集を作る前と比べたら気分的にものすごくスッキリしてはいるのですが、実用的にはもう一歩というところです。
そういうわけで、記事と記事あるいは用語集とのリンクを大した手間なく実現できる仕組みを作ろう、と思ってこのサイトができました。
また、ブログに書くほどじゃないけどSNSに投稿するのもなんか違う、みたいな短めの記述を置く場所として「のらてつの茶の間」と名付けたサイトを以前作りました*2。
本当にめちゃくちゃ頑張って作って、ページ間リンクの仕組みは個人的には会心の出来だったのですが、如何せん更新作業が面倒で、とても「ブログに書くほどじゃない」程度の軽さの記述をほいほい公開できる感じではありませんでした。そもそも、そういう軽い記述と「縦横無尽のネットワーク」みたいな仕組みの相性が良くなくて、自分で作ったものを自分が活かせないという状態に陥ってしまいました。
その後、反省を踏まえて簡易版を作ってもみたのですが、自作サイトという形態である以上更新作業の面倒臭さの低減には限度があり、手間が「ブログに書くほどじゃない」程度のものを書けるレベルより下回らなかったので、結局いくらもしないうちにやめてしまいました。
最終的に掲示板サービスをひとりで使うというところに至りました*3。これは全然不満はなく面倒でもないのですが、なんとなく書くタイミングを掴めないというか存在を忘れがちというかで、そんなに活発には使っていません。Podcastや記事の感想を書くのには重宝しています。
で、後述しますが、今回のサイトは投稿内容のメンテナンスが非常に簡単になる仕組みを作ったので、今度こそと思って「茶の間」の欄を設けています。超単純なブログ風のビューになっています。記事更新のタイミングで一緒にまとめて更新できるので、茶の間の記述のためにわざわざ更新作業をするということをしなくてよくなりました。
Dynalistをエディタにする
訪問者には特に関わりのないことですが、このサイトの肝心なところは、Dynalistをエディタにしていることです。
記事も用語集も茶の間もAboutも全てDynalist上に書いています。それをサーバーサイドでDynalist APIを使って取得して諸々加工し、データとして取り扱える形にしてからHTMLに読み込んでいます。
この仕組みは、先月突如としてDynalistに目覚めて(?)活用法を怒涛のように思いついたことにより実現しました。ノート機能、タグ機能、ノードリンク機能をフル活用しています。
Dynalistでやることの利点は、過去の記述に手を入れることが非常に楽になることです。一般的なブログではおそらく過去記事の編集は面倒極まりないものではないかと思いますが、アウトライナーならとても簡単です。後からリンクを追加したいという時も作業は一瞬で終わります。
また、Dynalist APIで取得したデータはその後好きなように加工できます。正規表現を駆使してHTMLにしているわけですが、例えばNoratetsu Labの記事へのリンクをこのサイト内のリンクに変換するとか、#で始まるタグを用語集へのリンクとして解釈するとか、さまざまなことをやっています。つまり、Dynalist内ではDynalist上で扱うものとして自然な書き方で書いて、それをサイト仕様にコンバートすれば、投稿先の仕様に合わせて無理をする必要がなくなるのです。
具体的にはDeno*4のスクリプトで取得・加工してjsonファイルを作っておき、 GitHubの専用リポジトリにプッシュして、それをサイトのロード時に読み込む流れです。データの加工(サーバーサイド)とサイトでの実行(クライアントサイド)は完全に切り離されているので、加工にはどれだけ時間がかかっても構いません。やろうと思えばいくらでも複雑な処理ができます。
Drummerを思い出した
Dave Winer氏が開発したアウトライナーに、Drummerというものがあります。UIが独特過ぎて本人以外がこれに慣れるのはちょっと容易でないでしょうが、搭載している機能は非常に画期的だと思います。最大の特徴は、直接ブログとして公開できることと、JavaScriptを拡張したスクリプトを使えることです。
Drummerを知った当初は「スクリプトを使える」と言われても何をすればいいのかよくわからなかったのですが、その後二年弱が経った今、結局私はDynalistに対してブックマークレットやらChrome拡張機能やらDenoやらでスクリプトを使いまくって自分専用の機能を拡張しています。やっと意味がわかった、という心境です。
そしてDrummerと同様に、Dynalistに書いた内容をそのままブログやサイトのコンテンツとして公開するに至りました。この形式を思いついてコードを大方書いてから、ふとDrummerのことを思い出して、そういえばあれはつまりこういうことだったのではと思いました。
Drummerはずっと「わかりたいけどわからない」ものだったので、自分にとって良い形を追い求めた先に答えが待っていたことには感慨深いものがあります。
今後の予定
さて、作って公開に至ったことで若干燃え尽き気味な感がありますが、やらなきゃいけないこと、やりたいことは色々あります。
まず過去記事の引っ越し(というかDynalistへの追加)です。どう頑張っても全自動にはならないので、それなりの手間をかけて作業する必要があります。時間がかかるのを覚悟してちまちまやっていきます。
あとはスタイルの改良です。最低限は整えましたが、細かい部分の調整や、複数のビューモードの用意を考えています。
このサイトを自分の拠点として自分的に面白いことができたらいいなと思っています。
*1: 表示されない、挙動がおかしい、という場合はTwitter(X)(@Foam_Crab)かBluesky(@noratetsu.bsky.social)かお問い合わせからご連絡ください。ブラウザ毎に異なる仕様に対応できていないということなので、使用しているブラウザを教えていただければ対処できるかもしれません。
*4: 私はDenoを大変気に入っているのでDenoを使っていますが、もちろんその前身のNode.jsでも、あるいはPythonでもいいはずです。他のサーバーサイド言語のことはわかりませんが、おそらく多様な手段があるでしょう。
Backlinks
関連度が高いかもしれない記事
- サイトの引っ越しをしました
- のらてつの茶の間とは
- Noratetsu Houseの作り方(概要)
- よくわかるNoratetsu Lab(2023年版)10月~12月
- NTA-DIY:2ヶ月目①~アウトライナーを自作してみる~
他の「お知らせ」タグの記事
- サイトの引っ越しをしました
- Noratetsu Lab Dict.の改修作業をします
- 用語集に索引を作りました
- ブログのレイアウトを部分的に修正しました
- Noratetsu Lab Dict.
- ホームページ(仮)を作った
- ブログデザインを一新しました
他の「始めたこと・変えたこと」タグの記事