TP_TEAHOUSE

最近のサイト改修

2021-06-20

直近で色々とサイトをアップデートしたので書き記しておきます。

トップページのバナー変更

またトップページを変えました。スライダー→横長一枚の画像に変更です。
スライダーを導入してる時点でうっすら思ってはいたんですが、スライダーが一周するまで眺め続けることって多分無いですよね。自発的にカチカチ進めて流し見するかスルーするかしかないような気がします。

まあそれでもオシャレってことで……とは思っていたんですが、Google の PageSpeed Insights でトップページ入れたらまぁアホみたいに低いスコアしか出なかったわけです。何がそんなにひどいことになってるのかと言うと、読み込む画像の総バイト数とレイアウトのシフト量でした。
前者はともかく後者はどういうこっちゃと思ったんですが、適当に調べてみると"一度全画像を読み込む→ページに展開する→一つのスライダーに纏める"の二番目の矢印のところで (展開した画像の枚数-1)*height 分シフトが発生するらしいです。悲しいなぁ。
で、どうせ見られないだろうしそういう問題も抱えてるんだったら無くした方がいいかなぁと判断してスライダーを取り除いたという流れです。画像ベタ貼りに戻しました。

ちなみにですが、上記のスコアリングで PC 表示の方は大分改善しました。でもモバイル表示はスコアがクソ低いままです。画像リソースのペナルティが PC よりも厳しいらしい。画像フォーマットを WebP にしろ！という強い圧を感じますがどうしましょうかね。

ロゴの導入

ロゴを導入しました。各ページのメイン部分の先頭に配置してあるやつです。

一応同人サークルなので、以前即売会に参加した際にはサークルカットとか用意していました。そこで使っていたサークル名の部分をそのまま使おうと最初は思っていたんですが、探しても探してもエクスポートしたファイルしかなくて、レイヤー構造とかが残った編集用ファイルが見当たらないんですよね……。あとぶっちゃけ良さげなフォントを見つけて斜体にしたり太文字にしたりくらいのことしかしていなかったので、これをロゴというには若干忍びないな……という気持ちもあって新しく作りました。
まあ本質的には上に書いてる以上のことはできてない気もしますけど…… Adobe の Creative Cloud 経由で使えるフォント引っ張ってきてうにうに動かしたくらいです。この手の創造性がどうにも十分ではない……。

フッターの整理

何かリンクが5個くらい並んで終わり！みたいなクソ雑フッターでしたが、とりあえず体裁を整えました。上記ロゴとリンクとコピーライト表記です。
まあこれ自体は大した話ではないんですが、フッターみたいな全ページ共通パーツって少し変えると全ページに反映しないといけなくて非常に面倒なんですよね。なのでこのサイトの(多分)全ページを Markdown ベースの HTML 生成 or jinja2 テンプレートからの HTML 生成に対応させました。今の所そんなにページ数がないので手作業でも良かったんですが、気が向いたうちにやっとこうということで。大規模になってからリファクタリングとかやりたくないですからね……。

モーダルウインドウの導入

Photography ページでモーダルウインドウ(画像をクリックすると暗転してデカい画像が表示されるやつ)を導入しました。というか今までサムネイルくらいにしかならない解像度の画像だけ並べてたのは何なんよという話なんですが……。
複数枚の画像が並んでいるためにどの画像がどのモーダルを呼び出すかがっちり指定しないといけない、という点に頭が回っていなかったので(よくよく考えると当たり前なんですが)、一枚目の画像しかモーダルウインドウ表示されないんですけど！みたいな感じで延々詰まってました。
結局次のような感じで、画像タグに呼び出すモーダルの id を書いておいて(data-select)、呼び出された id を持つモーダルだけ display:none を解除する感じです。

<img class="open_button" data-select="modal1" src="hoge.jpg">
    <div id="modal1" class="modal">
      <img class="modal_photo" src="hoge_highres.jpg">
    </div>

<img class="open_button" data-select="modal2" src="fuga.jpg">
    <div id="modal2" class="modal">
      <img class="modal_photo" src="fuga_highres.jpg">
    </div>
    ...

var open_button = document.getElementsByClassName('open_button');
var modal = document.getElementsByClassName('modal');

let select_modal;
let target_modal;

for (let i = 0; i < open_button.length; i++){
  open_button[i].addEventListener('click',function(e){
    select_modal = e.currentTarget.getAttribute("data-select");
    target_modal = document.getElementById(select_modal);
    target_modal.style.display = 'flex';
  },false);
}

HTML 上にはモーダル要素がドカドカ並ぶし js でもリスナーがドカドカ生成されるしであまりスマートでない感じは否めないんですが……。まあ問題が表面化したら有識者に聞いてみます。

今回の改修箇所は以上 4 点です。
自分の Web ページを作って改修していくって、何だかマイクラで拠点作ってる時と似たような気分になりますね。