こんにちは、ゆいまるです。今日はQwikでブログを作ってみたので、思い立ったきっかけとか使ったものとか感想とか書いていこうかなと思います。

#使ったもの・構成

##ライブラリ

• Qwik

  • Qwik City

    • †理論上最強†になるために

• kiso.css

  • 日本語を美しく表示するために

  • 後述しますが、マジで最高です

• shiki

  • コードブロックをハイライトするために

  • 苦しい。

• remark

  • Markdownをパースするために

  • remark-{frontmatter, gfm}

    • メタデータや脚注やテーブルなどを扱うために

• @napi-rs/canvas

  • OG画像を生成するために

  • 中身はskia（ネイティブライブラリ）のバインディング。node-canvasと同じく、Canvas APIを模倣したインターフェイスを露出している。

  • 実は、node-canvasよりこちらを使うほうが嬉しい。理由としては、システム依存関係がゼロであり、node-gypやpostinstallスクリプトも不要であるため。

• glypht

  • フォントのサブセットを生成するために

  • おそらくこのライブラリが最強だと思います。OpenTypeフォント特性を扱えるのはこのライブラリぐらいしかないかもしれない。

• feed

  • RSSフィードを生成するために

##フォント

• IBM Plex Sans JP

  • 人間に文章を読ませるためのフォントで一番好きなため採用した

##サイトマップ

• /

  • 記事の一覧が出現

  • /about

    • このサイトについて知ることができる

  • /@[filename]

    • 記事が読める。中身は適当にMarkdownをパースしてレンダリングしているだけ

    • GitHubにて編集履歴を閲覧することができる

  • /feed.{xml, json}

    • RSSフィードを取得することができる

#なぜ作ろうと思ったのか

割と幼稚な理由です。かなり前からお気持ち表明に適したプラットフォームが欲しいと思っていたんですが、自分のニーズを満たせるものがnoteしかないという状況で、使っていてイライラするので思い切って自分で一から作ろうと考えました。

#細部へのこだわり集

私は頭がおかしいので、様々なサービスにおいて自分のこだわりポイントからそれている部分があると発狂して全身がDo It Yourselfになります。どこで発狂したのかを紹介していきます。

##日本語のレンダリングをできるだけ頑張る

紙面組版の再現とまではいきませんが、最近のCSSは優秀なので、手軽に日本語を美しく描画することができます。最初は自動組版ライブラリでも作ろうかなと思っていたところ、CSSだけで自分のニーズを満たせることがわかりそちらの手法を取ることにしました。実のところ、このこだわりポイントで書いたコードはごく微量で、ほとんどがkiso.cssに支えられています。TAKさんのブログを見れば私がこのライブラリを採用した理由がわかると思います。

##極限まで軽量化する

今デスクトップ環境で閲覧している方は、DevToolを開いて適当に2-3ページほどクロールして通信の様子を見てみてください。フロントエンドのオタクなら割と頭のおかしなことが起こっているのがわかるはずです。Qwik/QwikCityによる†理論上最強†のWebサイトである上に、ルートごとにそのルートでしか使われない文字のフォントファイルを取得していることがわかります。

##デザインを頑張らない

元々このサイトの目的としては、他人に文章を読ませるためのサイトであるというのが主目的です。長時間読んでいても疲れないような工夫をするべきなので、メインコンテンツ以外の情報をできるだけ排除しようという試みをしています。

##できるだけ多くの人々が到達できるようにする

実は、このサイトはnoscriptでも動きます。¹ その上、知るを見ていただければわかるんですが、curlなどの環境で閲覧できるようにするためプレーンテキストでの情報を提供しています。これによって、インターネットに接続できてかつ検閲されていないほぼすべての環境では閲覧可能になっているはずです。

#今後の予定

##実装したいもの

• 目次

• 自作のシンタックスハイライター

• Moralerspace

  • コードブロックのフォントに採用したい

  • もちろんこれも極限まで軽量化する予定

• タグによる検索

• このサイトのリンクと外部リンクの違いを視覚的に表示する機能