ニコニコ動画紹介ブログ「1日1ニコ」の引っ越しが完了しました。【#np2020】

MovableTypeからWordPressへの引っ越し第2弾として、備忘録も兼ねたニコニコ動画紹介ブログとして細々と更新してきたブログ「1日1ニコ」をWordPressへ引っ越ししました。アクセス数は1日に数件程度であり仮に障害が起きても影響が軽微であることと、長年運営しているおかげで6,000件弱の記事があることで、本ブログの引っ越し前の試験として適当でした。

1nico | 1日1ニコ

結果から言うと、インポート自体はそれほど時間が掛からずに終わったのですが、インポート時に一部のコードが削除されてしまうという仕様に悩まされました。結局、フィルタリングをカスタマイズすることで回避できたんですが、

【Wordpress】インポート時に「script」「iframe」などのタグが削除されてしまう【#np2020】 | mutter

このブログは生のコードを書いていることもあるし、被害が大きそうだなあ……すっごい不安になりました。

変更点

CMSが変わったのでデザイン含めて全てが変わったと言えるとは思いますが、中でも大きく変わった点をあげるとすると、

SSLに対応した（https:// でアクセス可能）
スマホでの表示に対応した
目次を表示するようにした
記事にサムネイルを追加した
記事に詳細なタグを追加した
独自の動画表示を止めてオフィシャルの動画プレイヤーに切り替えた
データ収集を止めた

こんなところでしょうか。僕以外特に興味がないようなことばかりですが、順に書きます。

1. SSLに対応した（https:// でアクセス可能）

コストがネックになって対応が遅れていたのですが、AWSに移行することでほぼ無料でSSL対応出来るようになったので、対応しています。サブドメインのないドメインでのSSL対応についてはこちらを参照してください。

【AWS】サブドメインなしのドメインをCloudFrontでSSL対応させる【#np2020】 | mutter

WordPressの対応を含めおおむね滞りなく完了したのですが、1点だけ問題があるとすると、ニコニコ動画の動画プレイヤーに表示されるサムネイル画像って、プレイヤーはhttpsになっているのに画像はhttpで読み込むんですよ。だから警告が出ちゃう。なんでやねん（サムネイル画像のURL自体はhttpsに対応してるのに）。

ニコニコ動画のお知らせでは「HTTPS対応しました」って言ってるんですが、対応したのはコードだけで中身は対応できてませんよー。なんとかしてください。

2. スマホでの表示に対応した

3. 目次を表示するようにした

配布されているテーマを指定された枠内でカスタマイズして使用しています。なのでスマホへの対応もスムーズに出来ていますし、テーマの機能として「目次」や「人気記事」の表示なども行えるようになりました。使用しているテーマはわいひらさん制作の「Cocoon」です。

Cocoon | WordPress無料テーマ

テーマをお借りする以上、デザインの自由度が下がってしまうのは仕方の無いことなのですが、全体的にスッキリまとまっていて気に入っています。もちろん細かい造形では気になるところもあるんですが、その辺は素材を作成するなりCSSを追加するなりして順次調整していければと。

自分が納得できるデザインが完成してから移行、でも良かったんですが、今回の移行プロジェクト全体に言えることとして、やりたいことやトライしたいことが多すぎて完成を目指すと終わらないという傾向があるので、閲覧に支障がないのであればとりあえずOKということにしてリリースすることにしました。

なお、目次の機能は h2 タグがあるときにそれ以下の見出しを検知して自動的に作成してくれるというものですが、これまで割と適当に見出しを設定していた（h2がなかった）ので、移行に当たっては見出しの変換をざっくり行っています。2019/07/11以前の記事に関しては適切に目次が表示されていませんが、それはまあある程度諦める方向で。

4. 記事にサムネイルを追加した

5. 記事に詳細なタグを追加した

WordPressに移行するに当たってやりたいなあと思っていたことの1つが、記事にサムネイルを付けることでした。特に動画紹介をメインにしているブログですから、動画のサムネイルが記事のサムネイルにもなっていたらとてもわかりやすい。なのでやりたいと思っていたのですが、表示するには手動で設定する必要があります。

記事を書く
サムネイルにする動画を選ぶ
動画のサムネイルをダウンロードする
メディアに追加する
記事のアイキャッチ画像に指定する

面倒くさい。どうするか。

結局、独自の投稿フォームを用意して解決しました。

記事を書く
（自動）本文中の一番最初の動画のサムネイルを取得
（自動）取得したサムネイルをメディアに追加
（自動）追加したメディアをアイキャッチ画像として記事を投稿

以上です。

人間がやることは「記事を書く」だけになって楽になりました。またついでに記事内の見出しを抽出してタグとして登録する機能も作っておいたので、タグ登録も自動です。ルールに従って記事を書くことで見出しと、目次の生成と、タグ追加が自動で行えるイメージです。

ちなみに……過去の動画のサムネイル、タグについても別途ツールを作ってあとから追加しました。おかげでメディアは最初から結構な量の画像を抱えることになりました（約4,700件）が、それでも200MBぐらいにしかならないし大したことはありませんね。

6. 独自の動画表示を止めてオフィシャルの動画プレイヤーに切り替えた

以前は「再生数」や「マイリスト数」を表示したくて独自の形式で動画を表示していたのですが、それを全て止めてオフィシャルの動画プレイヤーを表示するようにしました。独自の動画表示はそのためにニコニコ動画のAPIを叩いていたのでどうしても時間が掛かってしまっていたんですよね。少しでも負担を軽くしようと思ってキャッシュ機構なんかも組み込んでいたんですけど、それもまたメンテナンスフリーというわけには行かず。

独自形式を諦めればサイト表示は早くなるし依存するミドルウェアは減るし、その場で動画再生できるしと良いことづくめだったのでまあいいかなと。

7. データ収集を止めた

独自のランキング生成のために色んな情報を取得しては蓄積していました。蓄積したデータはデータベースに格納されていて、一番重いテーブルで4,000万件くらい。それだけため込んで活用出来ていたかというと……どうでしょうねえ。出来てなかったんじゃねーかなー

AWSでもデータ構造を考えれば安く済ませられる（DynamoDBとかS3とか）し、収集をこのまま続けても良いんですが、やはりこれもメンテナンス面での負荷が重すぎるのでサーバ移行を期に廃止することにしました。