Official WebSite をリニューアルした話。
今日4月13日に公式サイトの「Shiyu Official WebSite」をリニューアルしました。半年ぐらいかけました…
リニューアルを考えたきっかけ
これまではあまりコードをゴリゴリ書きたくなくて、WordPressを使って運用していました。有料テーマを買って気に入らないところをカスタマイズして使っていましたが、WordPress独特のフックやテンプレートの仕組みがあり、カスタマイズにも学習コストが結構かかるのが難点でした。また、セキュリティ的にも不安が残り、メンテナンスコストも高く、更新作業をせずとも常に気にかけないといけないというデメリットがありました。
そんなわけで「もしかして自分の場合はWordPressを使うよりも1から書いてしまった方が早いのでは？」と思うようになり、試しにしゆうソニックサイトを自分で構築してみたところかなり楽だったので、志優サイトも自分で書いたものへリニューアルすることを決めました。
また、現在少しづつDockerを使い始めていて、最終的に全てDockerへ移行することを考えた時に、静的ファイルと動的ファイルで扱いが変わるPHPは面倒だったので、脱PHPをしたかった、という理由もありました。
バックエンドで使ったもの
僕は完全にPython信者なので（昔はPHP信者でしたが、食わず嫌いをしていたPythonを少し触ってから推し変しました）、今回もPythonで書きました。フレームワークにはマイクロフレームワークなFlaskを使用しています。これは仕事でも触ることがあってすでに学習していた、というのもありますが、Djangoよりも自分にあった思想で使いやすかったというのも大きいです。
動的なnewsページなどの管理には、microCMSというサービスを利用しています。これは管理画面と入稿したコンテンツが返されるAPIだけが提供される、いわゆるHeadlessCMSというものです。個人利用であれば無料で十分使えるので、ちょっとしたブログなんかを作る時には是非試してみてほしいなーと思います。
当初はnewsページなど動的に生成するところも管理画面を作ってDBから読み出す予定でしたが、セキュリティ的に表示と管理は別ドメインにしたかったので、内部的にAPIを作って…とかしているうちに、HeadlessCMS使った方が早いじゃん！となりました。始めに使おうとしていたのはStrapiというOSSのHeadlessCMSでしたが、スマホからの編集や認証部分の構築を考えると外部のサービスの方が楽な気がしたので、色々試してmicroCMSにしました。
フロントエンドで使ったもの
CSSはフレームワークを使わず、全てフルスクラッチで書きました。昔はBootstrapを使っていましたが、HTMLの構造がすごいことになったり記述が増えてしまうこと、どうしてもBootstrap臭が拭えないことの理由から、自分で書いた方が早い！となって、しゆソニサイト構築の頃からフルスクラッチで書いています。
下記はフルスクラッチで書く上でめちゃめちゃ参考にさせてもらったサイト。flexboxめちゃめちゃわかりやすくて良かったです。
余談ですが、CSSGridがめちゃめちゃ使いやすかったので是非オススメしたいです。
また、今回のサイト制作では（しゆソニサイトでもそうですが）HTML5の記述を極力守るとともに、ロボットが見てもわかりやすいようにCSSがなくても大丈夫な記述を意識しました。例えばProfileページの「Overview」に書かれている内容はこんな感じ。
<section class="contents-card profile-overview profile_overview">
<h2 class="contents-card_title">Overview</h2>
<div class="contents-card_body">
<dl>
<dt class="profile_overview-title">Japanese Name</dt>
<dd class="profile_overview-jp_name">志優</dd>
<dt class="profile_overview-title">English Name</dt>
<dd class="profile_overview-en_name">Shiyu</dd>
<dt class="profile_overview-title">Description</dt>
<dd>
<ul class="profile_overview-list">
<li>京都府出身の男性シンガー。</li>
<li>関西を中心にライブ等のイベントで活動しながら、動画投稿サイト「ニコニコ動画」にて動画投稿を行なっている。</li>
</ul>
</dd>
<dt class="profile_overview-title">History</dt>
<dd>
<ol class="profile_overview-list">
<li>2011年4月、活動を開始。</li>
<li>2017年10月14日、京都にて自身初の主催ライブ「しゆうソニック2017」を開催。</li>
<li>2018年1月、活動名を「志優」に変更。</li>
<li>2018年4月、ラジオ『しろーとめせん』をスタート。</li>
<li>2019年5月1日、初のオムニバスライブ「しゆうソニック2019」を主催。</li>
</ol>
</dd>
</dl>
</div>
</section>
実際これがどの程度効果があるのか、SEO的に不利になることはないのか、色々気になるところではありますが、将来的な拡張性も考えて、ひとまず今回はこのスタンスでやってみました。これでもやはりW3Cのチェッカー通すといくつか怒られるので、その辺りはちょっとずつ直していきたいなと思っています。
今後やりたいこと
現状ちょっと手が回らなくてnewsページなどにInstagramやTwitterの投稿とかniconicoのiframeを載せようとすると色々書かなきゃいけないんですが、サクッとできるようにしたいなーと思っています。
また、今はniconicoやtwitterなどいろいろなサービスから情報を取ってくるところで、一定期間読み込みが早くなるように（外部サービスに負荷をかけないように）キャッシュしていますが、サイトアクセス時に行われるので、タイミングによってどうしても表示速度が低下します。また、相手先のサーバーが落ちちゃってると、タイムアウトするまで表示されない、といった事態が起こりかねません。そんなわけで、定期的にバックグラウンドで取得・キャッシュさせて、表示の時はキャッシュから出せばいいようにしたいなーと思っています。
どちらも構想としては考えられているんですが、実装が間に合わなかった形です。追い追いやります。
あとはデザイン面で、シェアボタンの位置がどうしても納得がいっていないので、これも納得がいくデザインが思いついたら変えたいですね。
ご意見求む
どうしても一つ気になっていることがあります。今サイト上部のTickerはこのようにバックエンド側でHTMLを生成する時に書いています。
<div class="ticker_bar">
<ul class="ticker_bar-list">
<li class="ticker_bar-item ticker_bar-item-news">
<a class="ticker_bar-link" href="/news/cpZaKmnF3">Shiyu Official WebSite が新しくなりました</a>
<span class="ticker_bar-datetime">(2020/04/13)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-news">
<a class="ticker_bar-link" href="/news/AStrkLs1L">同棲のご報告</a>
<span class="ticker_bar-datetime">(2019/07/09)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-twitter">
<a class="ticker_bar-link" href="https://twitter.com/4uShiyu/status/1249417806833016833">イースターなステッキだけは流れ星イベント必要だから、起き上がりこぼしを2こ作っておいた。</a>
<span class="ticker_bar-datetime">(04/13 04:23)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-twitter">
<a class="ticker_bar-link" href="https://twitter.com/4uShiyu/status/1249417163879804930">これ、遠回しにこんな時間に声かけるなって言われてる？？？ #どうぶつの森 #AnimalCrossing #ACNH #NintendoSwitch https://t.co/tf33sntiRS</a>
<span class="ticker_bar-datetime">(04/13 04:20)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-instagram">
<a class="ticker_bar-link" href="https://www.instagram.com/p/B-hMMzHpXkL/">#スタバ新作 の #アイスムースカラメルラテ 飲んだ！基本的にはダブルショットカラメルラテとおなじ感じだったけど、こっちのほうがちょっとコーヒー感強いような…？🤔ムースがしっかりしてて食感も楽しめるし、やっぱり半分だけのカスカラシュガートッピングがお洒落⿻</a>
<span class="ticker_bar-datetime">(04/03 21:24)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-instagram">
<a class="ticker_bar-link" href="https://www.instagram.com/p/B-bEqg6p70-/">#スタバ新作 の #ダブルショットカラメルラテ 飲んだ！思ってたよりも甘めだけど、カラメルのほろ苦さが上手く効いて、コーヒー好きでもコーヒー苦手でも美味しく飲めそう！半分だけの #カスカラシュガー がまたお洒落⿻⿻</a>
<span class="ticker_bar-datetime">(04/01 12:22)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-note">
<a class="ticker_bar-link" href="https://note.com/4ushiyu/n/neba4d50e22e6">Twitterに理不尽な大量凍結を食らった話。</a>
<span class="ticker_bar-datetime">(04/11 17:47)</span>
</li>
<li class="ticker_bar-item ticker_bar-item-note">
<a class="ticker_bar-link" href="https://note.com/4ushiyu/n/n4b6be0c03575">しろーとめせん#37 配信後記</a>
<span class="ticker_bar-datetime">(04/04 21:50)</span>
</li>
</ul>
</div>これをCSS3にanimationでrollさせることでTickerを表現しているのですが、これはJSを使わずに表現したかったためこういう形をとりました。しかしながらよく考えてみれば、これはtwitterやnoteなど様々なサービスと同じコンテンツが掲載されているわけで、これが検索エンジンボットに「コピーコンテンツ」と認識されないのかが気になっています。
回避するためにはAjaxで取ってこればいいので、どちらでも実装はそこまで大変ではないのですが、このあたりどちらが良いのだろう……？
もし知見をお持ちの方は是非お教えいただきたいです。
サポートしていただけると嬉しさのあまり裸踊りします。嘘です。でも本当にそれぐらい嬉しいです。 頂いたお金は活動に充てると言いたいですが、おいしいもの食べるのに使ったらすみません。