サイトをリニューアルオープンしたよ!(五ヶ月ぶり三回目)

このサイトいっつもリニューアルオープンしてんな。パチンコ屋かよ。

と言われても反論できないくらいに、こういったシステム改造は大好きなんです。

 

というわけで。

次リニューアルオープンした時に思い出すためにも、2018/02に行った改造記録を残しておきます。

スポンサーリンク

せっかくだから、俺はまたシステムを変えるぜ!

正直に言うと、最近は記事を書くことより新システム導入のほうが楽しかったりするの……。

特に、これまで足を踏み入れてこなかった技術を学ぶのは楽しい!

 

そんな改装沼に嵌ってしまった人の話は置いといて。

以前から不満を感じていたToC(記事目次)周りを変えるついでにいろいろしてたら、基盤システムまで変わっちゃったのでそのご紹介。

冷やしHugoはじめました

まず、Hugoを使い始めました。

これまで使っていたPicoはPHPのCMS(Wordpressのようにページ動的生成するやつ)で、HugoはGo言語の静的HTMLジェネレーター。

 

要するに、「CMSのようなテンプレート構造から、昔ながらのHTMLファイルを自動出力する」やつです。

静的HTMLジェネレーターにはJekyllとかHexoとかもあるんだけどね。こういうのは生成速度が大事だろうってことで、速度に定評のあるHugoくんにしました。

 

心情面では、個人的に好きなRust言語で出来てるGutenbergを使いたかったんだけどね。

さすがに本命サイトでは、そう冒険をする気にはなれなくて。結局無難な人気者こと、Hugoくんを選びました。

Hugoは何かと便利。特にPagenatorが便利

Hugoはいろいろと機能が詰まってるんだけど、僕としてはPagenator周りが同梱されてる点が嬉しかった。

 

実はPicoちゃん、(少なくともVer.1系列だと)Pagenator機能がなくてね……。

このサイトでも、公開されてるテーマを参考にしつつなんとか自前実装してた部分があるのよ。

 

Hugoくんはそのへんビルトインだから楽ちん。

ちょこっとドキュメントに不親切な部分があったりするけど、おおむねわかりやすい書き方だし。人気者は違いますな。

Picoからの移行はスムーズだった

Picoが「Markdownファイルで記事を管理する」似たシステムなこともあって、移行はスムーズに進みました。

データ移すよりCSSを書き直してた時間のほうが長いくらいには楽ちん。

 

いやあ、やっぱりMarkdownファイルっていいものですね。

ToC(記事目次)デザインを変えました

次にTable of Contents……記事目次のデザインを変えました。

レスポンシブデザインに調整してるので、今は以下のように見えてるはずです。

画面解像度 表示方法
スマホサイズ画面 記事上側(開閉ボタンを押せば開く)
タブレット~PCサイズ画面 記事の右横(初期状態で開いている)

改装前の状態は「どちらの画面でも、記事途中で表示」だったんだけど。

このサイトによくある長大記事だと、目次が長すぎて一画面分以上占拠するとかひどい表示になってたのよね……。

 

これが旧レイアウトの参考画像。

PCの縦画面一つ占拠しちゃうのはちょっと……

長すぎ!

 

これを改善できたことで、サイト管理者としての不満点が一つ減りました。

ただ、実現するのにcss grid layoutを使ってるので、古いブラウザだとひどい表示崩れしてると思います。

 

当サイトは最新ブラウザのみサポートしていく方針なので、ごめんね(´・ω・`)

自作スクリプトでのハイライト

PCから見てる人はもう気づいてるかもしれませんが、目次のハイライト機能をつけました。

うまく動作しているなら、「今現在画面に表示されてる部分」がハイライトされてるはずです。

 

このように目次をハイライトしてるサイトはちょこちょこ見かけるんだけど。

その多くは「画面の一番上に来てる部分だけハイライト」なんだよね。(qiitaの記事とか)

 

これ「自分が読んでる箇所とハイライト箇所がずれてるなあ」って違和感があってね。

自分のサイトぐらいは、そうした違和感をなくしたかったんです。

 

ちなみに、細かな仕様を一覧にするとこんな感じ。

条件 仕様
ハイライト位置 画面内に入っている要素をハイライト
目次内スクロール ハイライト要素が中央に維持されるように動く
ユーザーが目次内をスクロールさせたら 2秒間中央維持を止める
lazyloadで画像が読み込まれたら ハイライトトリガー位置を再計算

初めて書いたjavascriptだったりするけど、自サイトで使う分には納得行く仕上がりになりました。

なったはず。なったかも。ま、ちょっとは覚悟しておけ。

sitemapページを作りました

Hugoくんの文法を活かして、サイトマップページを作りました。

フッターについてる”SITEMAP”ボタンからも行けるよ。

 

「Google先生に提出する分には、XML Sitemapだけで十分」とも聞くけど、やっぱりサイトマップはあれば便利。

「新しく更新された記事が載ってない(サイトマップ側の更新忘れ)」とかは仕組み的に起きないはずなので、ぼちぼち使ってやってください。

 

Hugoでの作り方紹介とかもできるけど……需要はあるんだろうか。

まあ、また気が向いたら記事にします。

contactページを作りました

同じく、フッターに”CONTACT”というボタンがあるはずだけど、これも新しい機能。

管理者(つまり僕)へとメッセージが送れるページになっております。

 

はてなブログ => Wordpress => Pico CMSの連続移転の中で、コメント機能取っ払っちゃったからね。

どういう形であれ、「サイト管理者とコンタクトを取る」機能はほしかったの。

内部的な仕組み

メッセージを送信すると、PHPで僕のアドレスへとメールを送信する仕組みになってるよ。

つまりはこういう流れ。

  1. ユーザーがメッセージ送信
  2. 受け取ったメッセージを、バックエンドPHPがメール形式に加工
  3. 管理者のメールアドレスへとメール送信

Hugoは静的HTMLジェネレーターでPHP関係ないけど、HTMLを置くサーバーはPHP動かせるやつだかんね。

実に一般的で、解説の必要性もないだろう仕組みです。

記事下の関連記事表示を(内部的に)変更しました

以前のやつと機能はほとんど変わってないので、単純な裏話だけ。

 

以前はPico(に組み込まれたTwig構文)の機能で作ってたので、システム変えるとそりゃ当然動かない。

仕方ないので、これもJavascriptで動くように移植しました。

 

Hugoには「JSON形式でデータを出力する」機能があるので、それで生成されたjsonファイルを噛ませる形で作ったよ。

結果としてJavascript切ってる人は見れないシステムになっちゃったけど、ゆるしてヒヤシンス。

RSSとJSONのAPIを追加しました

トップページにおける、RSSJSON形式のエンドポイントを追加しました。

記事<description>には本文全体を載せず、一行二行の説明文を載せるタイプにしてます。

 

のですが、特にRSS関連は普段使わないので、どこかおかしいところがあるかもしれません。

<description>は全文載っけてくれたほうが便利なの!」などありましたら、お気軽に教えてください。

 

変えようと思ったらチャチャッと変えられる部分だからね。

「ここが大事」と教えてくれる意見はほんとにありがたいの。

まとめ

  • Hugoをはじめた
  • ToCデザインを変えた
  • ToCハイライトスクリプト書いた
  • Sitemapページ作った
  • Contactページ作った
  • PHPでメール送信スクリプト書いた
  • 記事下関連表示をJavascriptに移植した
  • RSSとJSONのAPIを追加した
  • cssをこっそり書き直した

といったあたりで説明記事終わり!

これからのまださなぎも、よろしくね!