リニューアル!悲願達成ついにきましたリニューアル。Simplyを開発した2017年からずっと言っていて、ようやく達成した形である。手で打ち直すにはあまりにも量が多いことなどが理由で、WordPressからの移行を考えなければならなかった。加えて、Chienomiの場合、アクセスが非常に多く、下手に止めることができない。Simplyの改良などを経てついに公開に至った。公開の大きなきっかけとなったのはchienomi.orgドメインが取得できたことであり、これがなければまだしばらくはWordPressのままだったと思う。WordPressからのインポートWordPressからの記事以降をどのようにするかは難題であった。Zと結構様々なフォーマットで書かれている。間有力視していたのは、Pandocを使ってHTMLからMarkdownに変換することだが、これをするとかなり汚いMarkdownが出来上がる。Simplyでできるようなドキュメント管理機能がないことを踏まえて、「HTMLで抜き出してビルドデータにmergeする」という手段を選択した。ポイントとなるのはディレクトリ構造である。パーマリンク機能を使わない場合、WordPress記事のリンクは/?p=nnnという感じになるが、パーマリンク機能を使うと一般的には/archives以下にリンクされる。Simplyは静的HTMLファイルとして配置するものであるため、このリンクに従ってHTMLファイルを配置すれば単純なリダイレクトで記事が失われない。マップを書くよりもだいぶ建設的だ。画像に関しても基本的に/wp-content/uploads以下にあり、これはファイルとしてそのままコピーすれば良い。Simplyの生成機構が使えないことである。SimplyのサイトはPandocテンプレートを使用する前提となっている。そこでインポーターには「Pandocテンプレートを使って既に生成したHTMLファイルをテンプレートとする」という方法をとった。Simplyと共存する形で変換できる。WordPressの記事はWordPressの機能を使ってXML形式にエクスポートできる。これはRSSのような形式だが、RSSではない。当初REXMLライブラリでなんとかしようとしていたのりだが、いまひとつうまくいかなかったので、結局ActiveRecordを使用した。あとは値を文字列置き換えではめ込んでいくだけである。シンプルなアプローチだが、非常に強力で実用的なプログラムが完成した。それがGitLabで公開中のこちらだ。その後、TOCの変換にも対応するように手を加えたが、結局はこれのためにコード量が倍になってしまった。HTMLのTOCは飛ばしたりすることがあるため、なかなか難しい。上手い考え方はないのだろうか。検索機能Chienomiは記事数が多く、特定のテクノロジーなど検索対象が明確なので、検索機能はなくてはならない。YokohamaのときはGoogleに逃げてしまったが、最近のGoogleはサイト内検索ですらまともに機能しないので、自前で実装する必要があった。textなファイルを生成しておき、grepする」という方針がきていた。実は一時期RroongaやNamazuを使う方法も検討したのだが、結局自分が望む振る舞いではないということが分かって断念した。基本的にはgrepを使いたかったのだが、問題は「Chienomi的にはand検索が欲しい」ということだ。grepで任意個数のand検索をするスクリプトは書きにくいし、重いし、遅い。そこで、Rubyで直接実装することにした。insensitiveにする工夫が入っていたりする。考え方としては2つに分かれている。ひとつはインデックスを作るものだ。text化するのだが、これをどうしようか随分悩んだ割に結局はシンプルに、「タイトルと本文エレメントを正規表現で抜き出し、ここからタグをすべて除去したテキストファイルを作る」という感じになっている。grep同様、「一致した前後のテキストを取得する」という機能を使えるように空行を除去する機能も持たせてある。このとき必要な要素はタイトル記事のアドレス検索対象の本文の3つ。これをどう含めるかが問題になっていたのだけど、タイトルを「一行目」とするアドレスは、元ファイルと同じヒエラルキーで持たせる設定ファイルに元ファイルとインデックスファイルの起点を「絶対パスで」書かせるという方法でクリアした。このあたりは細かい小技が多い。この決定には、「RubyのDir#.globは**/が使える」という点が大きい。検索対象に含めてほしくないものはどうするか、という点については、検索対象をグロブで明示する、という形にした。Simplyは綺麗なヒエラルキーを組みやすいので、この点にも利した。}で良いことは明らかである。実際にはそこまで単純にはなっていない。汎用性をもたせる必要があるためだ。「前後の行を含める」ためのコードが長め。検索ワードの解釈はShellwordsライブラリを使用しており、ダブルクォートで囲むことができる仕様。AND検索とOR検索の組み合わせは、Chienomiの規模では必要性に乏しいためサポートしなかった。サイト固有の事情をすべて飲み込むことは到底できないので、コアライブラリとして提供し、それを利用したウェブアプリケーションを作ってね、という形になっている。公式にもサンプルとなるCGIがあり、これは動作確認済みなのだが、本体が56行なのに対し、CGIが46行とあまり文量は変わらない。Simplyとの整合性のため、WPimporterと同じような方法をとっている。こちらもGitLabで公開中。ありで出力含め手元計測では0.18秒ほどだった。「遅いかもしれない」と覚悟していただけにびっくりした。デザインChienomiのデザインは従来、見た感じスタイリッシュだが、あまりよくはなかった。WordPressテーマとして、もうしばらく更新されていない、というのもあるが、アクセシビリティが低いし、重い。画像の表示などに割と難がある。Chienomiにとっては非常に重要なコード部分の表示が美しくない。した問題を踏まえて最適化されたのが新しいChienomiのデザインである。私の中のトレンドは、「サイドカラムすらない、究極にアクセシブルでリーダービューのようなデザイン」なのだが、Chienomiはナビゲーション要素が非常に多いためサイドカラムを採用している。当初は「タブ切り替えで項目を表示できるように」とがんばっていたのだが、どうしてもDilloが意図したものを表示してくれなかったので、諦めてセレクトボックスで飛べるようにした。このあたりは、Chienomiが「読み物として長いタイプのものは少なく、基本的に明確で簡潔な情報である記事が多い」ということを踏まえてのもので、私のサイトでは唯一本文フォントがサンセリフである。コードが読みやすいよう、またChienomiを読みながらコードを書いたりしやすいように「なりで全幅を使う」仕様で、表示に手を加えている要素は非常に少ない。当然ながらChienomiのユーザーはリテラシーが高い傾向にあるので、それぞれお好みの設定でうまく対処する可能性が高く、それを阻害することはしないようにしている。monospaceフォントだけは、リテラシーが高くないユーザー、あるいは「monospaceフォントなんて指定しないよ」って人のためにある程度指定してある。Firefoxではmonospaceフォントの設定は裏メニューだしね。本当はもっともっとスタイリッシュなデザインのサイトを作りたいところではあるんだけど、Memorandaと比べてもデザイン要素は控えめで、また多分ボロクソ言われるんだろうなぁ、と思うとちょっと気が滅入る。いえ、Chienomiの場合実用性優先なので、そこはぐっとこらえることにする。ちなみに、Chienomiは初代〜3代目ではオレンジがテーマカラーだった。先代である4代目だけがモノトーンで、落ち着いたイメージになったという話もあった。この5代目Chienomiも基本的にはモノトーンだけど、実はちょいちょいオレンジ要素が入れてあったりもする。わかりやすいところではサイトロゴ。TwitterでシェアSNSボタンはTwitterだけになった。いうことなのだけど、Twitterを残したのは、Twitterはシェアボタンを使うとメンションにすることができるからだ。これまでずっと入れたかったいくつかの機能が追加されているが、従来は難しかった「URIエンコードされた文字列」を扱うためにシステム側でメタデータに含めるようになっている。このため、テンプレート内に動的なリンクを書きやすくなった。Twitterシェアが公式ウィジットでないのは、公式ウィジットはJavaScriptで動作し、アクセシビリティが悪いだけでなく、訪問者をトラッカー被害に晒すことになるからである。コメント機能コメント機能は、近いうちにつけるとは思うのでお待ちくださいな。WINGはそのままCGIが使える仕様なので、コメント機能くらいならとても簡単に書ける。モデレーションありなのでそのあたりは気にしない。新着通知機能はWordPress.comの機能(JetPackの機能)なので、なくなった。メールマガジンを運用するというのも微妙なので、結局この機能は廃止の方向。YokohamaのページではAtomフィードを配信しているが、フィードもロストテクノロジーになりつつあるらしいので、Chienomiではサポートしていない。SlimStatを使ったアクセス解析機能は非常によかったが、これも廃止である。WINGでホスティングされており、サーバーログが見えないためアクセス解析に関してはかなり後退した。Simplyサイトではアプリケーションで解析するようなこともない。Analysticsであっても)ない。JetPackで行っていたTwitterへの自動投稿機能もなくなった。Simplyとはあまり相性がよくない。hookのタイミングがズレるからだ。pullすればいいだけなので、別に難しいことではない。改善とにかく速くなったし、記事がちゃんと管理できるようになったし、更新が楽になった。Chienomiは更新頻度が高いのでWordPressの更新が重いのはとてもしんどかった。ページロードが2MB近かった(これでもWordPressとしては平均的なサイズ)Chienomiの問題点が改善された。このページにおける転送量は今のところ21kBほどである。これでモバイル容量を気にしながらChienomiを見る必要がなくなったし、例え速度制限を受けたとしても問題なく見ることができるだろう。デザインはダサくなったが、一方で非常に読みやすくなったはずだ。柔軟性が上がり、印刷もしやすくなった。印刷プレビューで開いてもらうとわかるが、画面表示とは全く違う形式となり、かなり印刷物として読みやすいはずだ。色も、グレースケールで印刷することを想定して印刷で出しやすいようにしている。一時はPDF配信もしていたChienomiだが、もはやその必要もなく、そのまま印刷できるように調整してある。Chienomiは、「印刷してじっくり読みたい」という要望が結構あるので、それは重要な点だ。細かいところでは画像の途中で切るようなことはしないように調整もしてある。Chienomiは「使える」サイトを目指しているので、これからはきっとより良い体験を提供できることだろう。