よつまお

過去ログ倉庫を兼ねたライフログ的な雑記ブログ。記事ジャンルにこだわることなく、不定期更新でゆるゆる運営しています。

ブログ移転 ( https://www.yotsumao.org/ )

 

はてなブログからHUGOに乗り換えたらちょっとしたバグに遭遇

ナウでヤングなエンジニアはみんな一度は触ってる静的サイトジェネレーター。

 

ということで颯爽と乗り換えようと思ったけど、なかなかはてなブログからはめんどくさかった。というか情報すくなー。

 

なので誰でもやれそうな移行方法は、いずれきっとそのうちたぶん書く別記事に譲るとして、テーマ固有の問題ってやつなのか、いわゆるバグ的なものに当ってしまったのでメモ。

 

使用テーマはClarity。あえて真っ黒ではないダークテーマで好みだし、たぶん私のようなHUGO初心者でも扱いやすいシンプルな感じなので選択。

 

変換した記事mdファイルをそのままフォルダに入れるだけで動く。さすがHUGO。

とはいえ文章レイアウトの細かなバランスや元々使っていたリンクの装飾など、微妙に修正したくなる感があるが、まぁ許容範囲。読めればいい。

 

んでんで。PCで閲覧している分には問題無いのだが、スマホでチェックしていてあることに気づく。

 

なんか記事の文字をタップすると、一瞬文章全体が選択されるんだが、、

そしてしばし経って問題箇所特定。

f:id:yotsumao:20220301005848p:plain

どうやら画像の親の親要素に設定するはずの自動縮尺のクラスimage-scalableが、ブログ記事の文章全体<div class="post_body">に追加されているせい。

 

なので当然画像が含まれていない記事ではこの問題が起きない。

というかそもそも論で言うとこれは、はてな→HUGOにあたってHTMLで書かれたmdファイルを使っているから。普通にマークダウン記法で画像挿入していれば、生成されるタグが異なるのでこのバグは発生しない。

 

※マークダウンで画像を挿入しHUGO&Clarityが静的ファイルを生成すると、imgがpictureとfigureタグに囲まれるので、本来はfigureにimage-scalableが設定される。対して、はてなでエクスポートしたHTMLはimgがpタグに囲まれているだけで、その親の親要素はdivになってしまう。

 

これを決めているのはindex.jsの300行目あたりから。

if (actionableRatio > 1) {
             pushClass(image.parentNode.parentNode, imageScalableClass);
             image.parentNode.parentNode.dataset.scale = actionableRatio;

 

ちなみにここで少し脱線すると、はてなフォトライフで生成した画像が含まれている記事を、そのままHUGOのClarityにぶち込むと、

f:id:yotsumao:20220301010000p:plain

このようにaltのテキストが自動的にキャプションとして画像下に表示される。普通に考えれば便利機能。

しかしいちいちaltなんて設定していなかった私にとっては、単にはてなidと画像名が表示されるだけ。

 

これを決めているのは同じくindex.jsの269行目あたり。

let desc = document.createElement('figcaption');

 

なお、ここをコメントアウトするともちろんキャプションが非表示になるのだが、それどころか更にはなぜか先述のimage-scalableがpost_bodyに付かず、全選択が起きない。

この行を加えるとなぜか正常に動く、ならぬ消すと動く。思わぬ収穫。

 

しかしすると別の問題が起きる。

これもPC閲覧なら気づかないが、figcaptionをコメントアウトした状況のモバイル表示で、ナビメニューの三本線をタップするとトップページに戻るようになってしまう。

だが、トップページで三本線をタップするときちんとメニューが開く。つまりこの謎現象が起きるのは各記事ページにおいてだけ。もうわけわかめ。

 

ということでキャプション非表示はあきらめて、本線のimageScalableClassに戻る。

 

結局のところ、せめてpost-bodyにだけはクラスを追加しないでくれればいいので、該当部分を

if (actionableRatio > 1) {
            if( image.parentNode.parentNode.className == !'post_body' ){
             pushClass(image.parentNode.parentNode, imageScalableClass);
             image.parentNode.parentNode.dataset.scale = actionableRatio;

こうすればいい。きっと万事暫定解決。なおtheme内のファイルの方は直接いじらないのは言うまでもない。

 

しかしただでさえ静的サイトジェネレーターの話、そして数ある中でもHUGO、更にはてなからの移行となるとまだまだナレッジ不足な感がすごい。

ブログ程度にはオーバースペックかつ日々セキュリティホール爆盛りのワードプレスを窓から投げ捨てて、スピーディかつ軽量なSSGに移行したい非プログラマーにはつらすぎる。

 

こういった誰もが再利用可能な、数多の先人たちの試行錯誤が日本語で蓄積されているという点では、はてなブログをはじめ既存の国産ブログサービスはやはり捨てがたいと思う次第。

 

それにしてもこれはイシューを投げつけてもいい案件なんだろうか。英語でdevにissue書くなんてこわいわ。そのうち自然と修正されないかなぁ。

っていうかたぶん既存ブログからそのまま無理やり移行した場合にぶち当たるようなレアケースなんだと思う。