この Webサイトの構成などを新しくしました!

読了まで:約4分


と​言う事で​新しくなった​カラクリスタです。

何が​どう​変わったか

基本的には、

  • Web デザインを​刷新した。​前の​デザインより​読み易くした
  • 複雑だった​ Hugo に​よる​静的生成を​シンプルに​した
  • 上記に​伴いタグ一覧の​ URL が​変わった

と​言う​辺りです。

な​お実際に​使っている​テンプレート類は​次の​ URL で​アクセスできます:

今回新たに​やってみた​事

今までは​ Web デザインを​作る​時に​デスクトップ向けと​モバイル向けを​明確には​分けてなったんですが、​ 今回は​ガッツリと​デスクトップ向けと​モバイル向けを​分けてみました。

それで​これは​正確に​言うと、​デスクトップ向けと​モバイル向けの​ Web デザインの​分け方は​画面の​横解像度に​依るんですが、​ 横の​解像度が​ 1120px 以下だと​モバイル向け、1120px​ 以上​だと​デスクトップ向け、と​言う​切り​替えに​なっています。​ なので​横の​解像度が​ HD ​(1280px)も​有れば​デスクトップ向けの​表示が​見れます。

また​タブレットなどの​タッチデバイスと​デスクトップなどの​ポインティングデバイスでは、​ クリック可能なリンクが​分かり​易くなる​様に​リンクに​下線が​付く​/付かない、と​言う​様な​工夫も​加えています。

それと​今回の​変更で​最大の​特長と​して、

Hugo で​生成した​ファイル類に​対して​テストを​書く

と​言う​事を​やっていて、​これの​おかげで​リンク先の​ミス、​ HTML や​ RSS、​Atom や​ JSONFeed の​構造が​崩壊しているなどと​言う​事が​かなりの​面で​防げる​様に​なりました。

特に​ Hugo の​生成物に​対して​テストを​書くと​言う​行為は、

  • JSON Linked Data ​(いわゆる​ JSON-LD)

の​チェックに​対して​効果が​抜群で、​以前は​ちょっとした​変更で​崩壊していた​この​手の​データ構造が、​ 今回は​崩壊しているか​否かの​テストが​キッチリ出来る​様に​なった、と​言うのは​大きな​前進だと​考えています。​ と​言うか​以前は​テストとか​無くて​結構​崩壊していたりしましたから。

今回の​変更に​伴う​非互換な​変更

先にも​ちょっとだけ​書いた​様に、​ 今回の​変更では​複雑怪奇と​なっていた​ 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 サイトへの​テストでは、

  • cheerio
  • mocha
  • power-assert

と​言った​ライブラリのみを​使い、​テストを​ JavaScript で​書いて​ Node.js で​走らせると​言う​様な​ことを​やっていました。​ その​ため上記の​組み合わせは​静的に​生成した​ファイルを​テストするだけなら​結構​手軽に​テストを​書けるので​大変​良いですね。​はい。

と​言う​様な​感じで、​今回は​この​ Web サイトの​デザインやら​構成を​変更した、と​言う​話でした。​はい。

にゃるら(カラクリスタ)

『輝かしい青春』なんて失かった人。
次に備えて待機中。

今は趣味でプログラミングをして
生活しています。