このサイトには、単に表記が乱れたりする部分があったりと、いろいろ気になっていた部分がいたるところにあってさ、改修していきたいなって、思っていました。でも、めんどいよね。
めんどさの中心にあるのが、生まれたてのCMSであるEmdashをアップデートとかして、開発環境でエラーが出まくったりして、激萎え、近寄らんとこ・・・って気持ち。
ふつー、運用が始まったらこういうものはアップデートしないんだけれど、Emdashは開発途中のものだし、更新していきたいじゃん。個人で運用しているものだから、誰に迷惑をかけるでもないし。ただひたすらに私が萎えるだけ。
一旦、萎えを乗り越えてやってきました。
ということで、今だとたぶんこういうことができる
どうかな。できてるかな。
あとこれとか。
競輪場に小池栄子ー♪
— 浅川芳直 (@asakawww) November 22, 2014
まあできてるかもな。
単にこういうことも可能かもしれない。
おー、望月けいのイラストが出てくるー！[1]米山舞なのかもしれないけど。ってか、リボンの騎士の新しいアニメってさキャラクター原案が望月けいで、キャラクター原案協力が米山舞で、何？なぞなぞ？？？方向性が同じすぎるだろ、それ。
まあ監督がさ、スター・ウォーズ：ビジョンズ『のらうさロップと緋桜お蝶』の五十嵐祐貴だからさ、主演がサーヤだろうがさ、おもろいんだろうな。
さておき、こういうのはembedって呼ばれる外部コンテンツを埋め込むことができるHTMLの機能。といってもさ、表記とかをスタイルできれいに整えるとかは、各々がやっていく必要があって、これもめんどい、のでプラグインとかを使うとかが楽。だったのだけれど、プラグインを入れたらこれまたエラーが出まくりで、それを解決するのにすごい時間がかかったり、したのね。
nodeのパッケージマネージャーがpmpn推奨だったのだが、astroとviteのバージョンの相性がどうのこうので無限にエラーが消えなくて普通にnpmを使うのがいいっていう、もう自分で何を書いているのかわかりません[2]。AIも「ごめん俺が間違ってた！本当に正しいのはこっち！！」って130回くらい言ってた。ツラの皮ってやつよね。
で、一応動くようになったので、次はBunkei Technology Lab.で実装されている@hogeやid:hogeでリンクになったりする（嬉しすぎる）機能を、自分のところでもできるようにするぞと。
で、ここでまたやっぱり、自前のプラグインとかを作って･･･みたいなことを一瞬考え始めたりした。なんかちゃんとした機能として実装しなきゃ･･･みたいな思い込み、これがね、本当によくない。こんなもの、動けばいいんだから。もっとだらしなく実装すべき。ハッキング的な考え方が大事ですって、@someru（さやわかさん（『のらうさロップと緋桜お蝶』の脚本の人））の『カルチャーお白州』でもありましたよ。
これです！
きたなくても、ゴリ押しでもいいから、実質的にそのように振る舞う機能であれば良しとする、それがハック的なやつってことを思い出しまして、そうすることにしました。
そして、Geminiにこんな感じに伝えました。
例えば@hogehogeって書いたらそれが別のサイトのリンクになっていて欲しい
バックスラッシュを使ってエスケープさせたり、正規表現でどうにかしたい
で、プラグイン作るのも面倒だから、投稿されたテキスト（PortableText情報）をコード上で直で書き換えるとかをしたい
本当はもっと日本語として乱れていたけれど、概ねこう。正規表現というのは、条件を設定して長い文章の中から単語などを拾い出したりできる呪文みたいなもの。非常に論理的な操作によって細かく条件を設定できるのだが、記述の仕方がクソキモいし難しいのでAIにお任せ。
const regex = /(\\@|\\id:)|(@[a-zA-Z0-9_-]+)|(id:[a-zA-Z0-9_-]+)/g;Geminiが書き出したコードから抜粋。「=」から右側にあるのが正規表現の記述。暗号みたいだね。でもこれで@hogeとかid:hogeとか書いたら、この部分を拾い出してくれる。そして対応するURLがあるかどうかを判定する処理へと運べるってわけ。Geminiとああでもないこうでもないってやりとりを数回したら、実装できた。そして思った、embedの実装もこうやれば早かったんじゃねって。だらしなくやってれば、あんなに萎え続けなくてすんだのかもしれない。
ちなみに、私のサイトが利用しているEmdashというCMSは、次世代感を出しているのでPortable Textって仕組みが使われていて、ブラウザ上のエディタで書いたテキストが細かくJSONデータ[3]になるっていうこれまたクソキモいが汎用性が高い仕様。
公式サイトが言うには
<p>Read the <a href="/docs">documentation</a> for <strong>Portable Text</strong>.</p>ってHTMLが
[
{
"_type": "block",
"style": "normal",
"children": [
{ "_type": "span", "text": "Read the " },
{
"_type": "span",
"text": "documentation",
"marks": ["a1b2c3"]
},
{ "_type": "span", "text": " for " },
{
"_type": "span",
"text": "Portable Text",
"marks": ["strong"]
},
{ "_type": "span", "text": "." }
],
"markDefs": [
{
"_key": "a1b2c3",
"_type": "link",
"href": "/docs"
}
]
}
]こうなるらしい。きめー。全然直感的じゃない。でもこうすることによって、テキストとHTML要素が分離できて、いろいろ便利なんですって。
んで、こういう記述（JSON）で扱われるデータをEmdashさんはHTMLに変換してくれるらしいのだけれど、その途中に割り込んで正規表現で特定の表記を見つけて書き換えるってことをした。とっても簡単だった。簡単サイコ〜。
ってわけで、@someruでid:someruのさやわかさん、@pale-blueでid:pale-blueの色川海雪さんを登録できたのでした。Geminiが「サイトが複数あるなら、今後簡単に追加できるようにしといたわ」っていいながら、そういう仕様にしてくれていたので、今後仲間が増えても安心なのだ〜。
💬