はじめに
Webサイトリニューアルに関する活動は「思いつくくまま・気の向くまま・行き当たりばったり」でやっている。方向性はまだ完全には定まっていないがここでいったんいいままでの状況や今後に関してメモっておこうと思った。
トップページのリニューアルの状況
今使っているSNS（[Twitter][]/[Youtube][]/[Qiita][]）へのキュレーション・ページにしようとまず考えた。そしてサンドボックス・ページを試しに作ってみたりした。
このページはデザインの検討と同時に以下の調査・検証も行った。というよりこっちに重きをおいてるのでデザインは２の次かもしれないね。。
- Twitter API全般
- CSS Gridによるレイアウト
- Masonryレイアウト
MiniMasonryを改造して利用 - Infinite Scroll
いわゆる無限スクロール。静的コンテンツを
fetchしてスクロールに応じて連続してコンテンツを表示
しかしポート・フォリオ的なサイトにしたいとも思い始め、次に書く問題対応もあって今手が止まっている。デザインのイメージも頭の中で靄っとした状態。しかし今年の２Ｑあたりまでには形にできないかなあ？と思う。
サイトがクロールされない問題への対応
もともとこのサイトはアクセスが少ないのだが、去年の11月から12月にかけてアクセスが激減し、日によってはPVが0という状況になった。調べてみるとGoogleインデックスから消滅してしまっていたからだった。究明の結果、根本原因はWebサーバーをnode.jsのネイティブhttp/2モジュールを使用するため、expressからkoa.jsに切り替えたからだった。ネイティブhttp/2モジュールはデフォルトではhttp1.1にフォールバックしないため、http1.1でアクセスしてくるクローラに対してコンテンツを返すことができていなかったのだ(403エラー）。
http2 returns 403 and "read ECONNRESET" from Googlebot & lynx · Issue #29219 · nodejs/node
対応方法はhttp2.createSecureServerのオプション・パラメータにallowHTTP1: trueを追加すること。これでクロールされるようになった。
旧コンテンツのAMP対応を進める（AMPエラーを除去する）
今のところ一番時間を割かれている部分。これをやらないとページがgoogleの検索結果に表示されないので。理由はいろいろだが、Search Consoleが細かに教えてくれるので、それをチマチマ直していっている所である。これに関しては以下で書いた。
ブログシステムの改造
Twitterのポスト表示
サンドボックス・ページで得た知見を生かして、ブログのカスタムタグに[twitter:(status-id)]、[twitter-thread:(status-id)]を追加した。これを使うと以下のような埋め込みができる
ブログテキスト文中にこう書くと、
[twitter:{"status":"1226996922692464640"}]
こう表示される。
tweet
スレッドは以下のような感じで書くと
[twitter-thread:{"status":"1226630555527045121","custom":true,"overflow":"none"}]
こうなる
S.F.@SFPGMR
peg.jsのUnicode周りの処理を改造しようとしてる。エスケープ・シーケンスをJSみたくコード・ポイントで指定できるようにしてみている。内部的な正規表現も"u"付きに改造しようと思ってるところ。自前markdownパーサを作るための位置づけ。
Unicodeへの対応をそれなりにやりたいと思ってUnicode界隈のドキュメント見てるけどまあいろいろあるわ。。昨日は異体字セレクタとか読んだけどSVSやらIVSとか知らないことがいっぱい。。
異体字セレクタも結合文字の一種かなあと思ったけど、異体字はある漢字コードの字形が異なるバージョンで、状況によっては異体字のベースとなる漢字が同じでも意味としては同じとみなさないケースもあるから結合文字とはいえんところがあるよなあ。。
結合文字は２つのコード・ポイントで１つの文字を表すということですからな。。またこの結合文字というのがなかなかややこしい。。昨日も半濁点とかで？？と思うことがあって。
オリジナル書式用パーサーの作成
今取り組もうとしているはこれである。これを作っておけば、トップページのリニューアルにも流用できる（というか流用できるように作る）と思ったので、先に作ろうと思った次第である。
今はmarked.jsを独自拡張してカスタム書式やメタ情報の埋めこみを可能としているが、それをやめてmarked.jsに情報を渡す前にタイトル・メタ情報・カスタム書式・本文をパースするパーサーを通し、本文をmarked.jsに渡すようにしたいと考えている。本文についてもtexやhtmlについてもそこそこきちんとパースして構造や意味をある程度把握できるようにし、AMPページ出力をもうちょっとスマートに行いたいと考えている。
今後
ブログの「目次の自動出力」とか、「本文からのキーワード抽出」、「同カテゴリの文書の自動抽出、リンク」とかも取り組んでみたいなあと思ってるけど、ゲームに使用するツール・インフラやゲーム作りそのものもやりたいと思ってるのでとりあえずオリジナル書式パーサーの作成が一段落させるところまでを今年の前半には終えたいなあと思う。そのあとゲームつくりに戻りたいと思ってるんだけどね。
あと高校野球観戦と音作りとの趣味のバランスも悩ましいところ。趣味に割ける時間は限られてるからね。。