と言う事で新しくなったカラクリスタです。
何がどう変わったか
基本的には、
- Web デザインを刷新した。前のデザインより読み易くした
- 複雑だった Hugo による静的生成をシンプルにした
- 上記に伴いタグ一覧の URL が変わった
と言う辺りです。
なお実際に使っているテンプレート類は次の URL でアクセスできます：
nyarla/the.kalaclista.com-v3: The source code of hugo for the.kalaclista.com
今回新たにやってみた事
今までは Web デザインを作る時にデスクトップ向けとモバイル向けを明確には分けてなったんですが、 今回はガッツリとデスクトップ向けとモバイル向けを分けてみました。
それでこれは正確に言うと、デスクトップ向けとモバイル向けの Web デザインの分け方は画面の横解像度に依るんですが、
横の解像度が 1120px 以下だとモバイル向け、1120px 以上だとデスクトップ向け、と言う切り替えになっています。
なので横の解像度が HD （1280px）も有ればデスクトップ向けの表示が見れます。
またタブレットなどのタッチデバイスとデスクトップなどのポインティングデバイスでは、 クリック可能なリンクが分かり易くなる様にリンクに下線が付く/付かない、と言う様な工夫も加えています。
それと今回の変更で最大の特長として、
Hugo で生成したファイル類に対してテストを書く
と言う事をやっていて、これのおかげでリンク先のミス、 HTML や RSS、Atom や JSONFeed の構造が崩壊しているなどと言う事がかなりの面で防げる様になりました。
特に Hugo の生成物に対してテストを書くと言う行為は、
のチェックに対して効果が抜群で、以前はちょっとした変更で崩壊していたこの手のデータ構造が、 今回は崩壊しているか否かのテストがキッチリ出来る様になった、と言うのは大きな前進だと考えています。 と言うか以前はテストとか無くて結構崩壊していたりしましたから。
今回の変更に伴う非互換な変更
先にもちょっとだけ書いた様に、 今回の変更では複雑怪奇となっていた Hugo による Web サイト生成を再びシンプルな構成に戻した関係で、 一部の URL が変更になっています。
と言うのも具体的にはタグ一覧のページに関してだけなんですが、以前は、
https://the.kalaclista.com/posts/tags/{tag}
となっていたタグ一覧の URL が、今回からは、
https://the.kalaclista.com/tags/{tag}
となっています。
まぁこの辺りは大体的に公開している URL と言うより内部的なちょっとした便利機能の URL なので、 あんまり実害は無いかと思いますが一応ここでその点は告知しておきます。
その他
あとその他の変更点としては：
- Google Adsense などの自動広告の配信を復活させた
- Google Analytics をダイレクトに使う様に設定し直した
- SNS や Online Bookmark への追加ボタンを復活させた
- この Web サイトの詳細についてアクセスし易くした
と言った辺りでしょうか。
まぁこの辺りの共有機能や広告は自分としてはちょっと邪悪な Hack な気がしないでも無いんですが、
とりあえずもう少しはこの Web サイトの露出を上げて収益化したいなー
と言うアサマシな感じで付けてます。なのであんまり露骨にはやらない様にはしています。
ちなみに自動配信広告や Google Analytics に関するオプトアウトの方法については、
に全部書いたので、その辺りの方法については上記のリンク先を見ればおおよそは分かると思います。
以上
とりあえず今回の変更ではテンプレートを作っているよりテストを書いている時間の方が長くて、 これはこれで結構面倒でやってられねー感が有ったのですが、 今回はその辺りをぐっと堪えてテストを書いたおかげで Web サイトの崩壊やらミスを大きく防げたため、 その点ではやってみて正解だったなと思ってます。ただまー面倒と言えば面倒だったのですが。
また今回のこの Web サイトへのテストでは、
cheeriomochapower-assert
と言ったライブラリのみを使い、テストを JavaScript で書いて Node.js で走らせると言う様なことをやっていました。 そのため上記の組み合わせは静的に生成したファイルをテストするだけなら結構手軽にテストを書けるので大変良いですね。はい。
と言う様な感じで、今回はこの Web サイトのデザインやら構成を変更した、と言う話でした。はい。
