皆さん、どーもこんにちは、はじめまして、イズムといいます。
普段は主に「ニコニコ動画」のデザインを担当している、デザイナーになって7ヶ月目の元エンジニアです。

元エンジニア、ということなんですが、実は私はこのdwango creators’ blogの開発担当者でもあります。そんなわけで、今日はdwango creators’ blogの開発裏話と使用したツールについてお話をしたいと思います。

静的サイトとしての構築

何かを作るときに、“完成形のイメージ”ができていること、つまり要件がわかっているということはとても大切です。
dwango creators’ blogを開発する際には以下のような要件がありました。

• デザイナーが簡単にブログ記事を投稿・管理できるようになっている
• ポートフォリオ（制作実績）もブログ記事とは別に掲載できる
• カテゴリ別記事一覧、筆者別記事一覧がある
• aboutページとかメンバー紹介ページもある
• スマートフォン対応されている

浅はかなWordPress知識しか持ち合わせていなかった私でしたが、『ふむふむ。これぐらいなら固定ページ、カスタム投稿とかを上手く使えばだいたいWordPressでなんとかなりそうですね。』と、編集部の皆さんと『WordPressでいくぞ！』と決めた、その矢先でした。

なんとWordPressをそのまま外部に公開することがNGに・・・！！

理由は・・・皆さんもご存知のとおりWordPressの脆弱性の観点からです。

そこで、WordPressに代わるCMSがないかどうか、もういっそ一から全部開発してしまうか、いろいろと考えてはみたものの、やっぱり投稿や記事の管理はWordPressでできたら嬉しいな、という編集部からの希望もあり、調査の結果、辿り着いたのが、Wordpress + StaticPress という解決策でした。

StaticPressとは？

StaticPressは、WordPressで作成したWebページを静的なHTMLページとして指定したディレクトリに出力してくれるプラグインです。

導入方法や使用方法はここに書くまでもない程、とても簡単なのでここでは割愛しますが、安心してください、和製のプラグインなので詳細まで日本語の公式ページで確認することができますよ。

StaticPress

どんな人向け？

簡単に言ってしまえば「コメント機能はいらないし、サイト内検索もできなくてもいいし、セキュリティ対策とかよくわからないし・・・とりあえずHTMLで書き出してくれたものが公開できればいい。」という方にオススメしたいプラグインです。

そして私のような「WordPressをそのまま一般公開するのはダメだけど、WordPressで作ったコンテンツをHTMLにして出力したものを公開するのであれば良いよ。」という大人の事情の狭間で途方に暮れていた人間にとっても最高のソリューションと言えるでしょう。

逆に「サイトの中に検索フォームを置きたいし、動的にコンテンツをガチャガチャ切り替えて表示したいし、コメントもいっぱい投稿して欲しい！」・・・というような方にはオススメできないプラグイン、というわけです。

StaticPressのメリットとデメリット

実際に導入してみてメリットとデメリットがあったので、お話します。

メリット

大人数で更新していくdwango creators’ blogのようなブログサイトでは校正前の記事を途中で公開してしまったり、テーマの変更でページが崩れてしまったりと、不慮の事故が発生しがちですよね。ですが、StaticPressでの静的ページの再構築作業を挟むことで、WordPress側でのミスが即座に外部に公開されてしまうリスクを減らせたのではないかと思っています。実際、編集部に聞くとメンバーが公開ステータスにしてしまったものもチラホラあるとかで、StaticPressの恩恵を受けてるようです。

再構築作業が手間だと言えばそれもそうなんですが、公開前のチェックは大事な一手間ですから、大きなメリットなのではないでしょうか。

デメリット

動的な機能を実装しにくいというのがデメリットです。

dwango creators’ blogのデザインを考える際に、人気の記事をトップに出したり、ランキングの実装を検討したり、いくつかのデザインのパターンだしをしていましたが、編集部からPVによる記事のランキング付けはしたくないという意向とできるだけシンプル設計という方針により、現在のデザインとStaticPressの採用が決定しました。

参考までにタグ、ランキングを採用していたデザインもご紹介します。

きっとこのデザインだったら別の実装方法を検討しなければならなかったかもしれません・・・。

StaticPressの注意点

ここでいきなり込み入った話になりますが、StaticPress導入でちょっとだけハマったところがあったので紹介したいと思います。

パーマリンクの設定

まずはパーマリンク設定についてです。
StaticPress導入のお約束としてパーマリンクの設定は『カスタム構造』で拡張子を『.html』にするというものがあります。最終的にHTMLファイルとして書き出すからですね。
この設定をしている場合で、かつブログ記事に画像などの添付ファイルがあったとき、StaticPressで書き出されたはずのブログページが404でアクセスできなくなってしまうことがあります。

これはブログに対する添付ファイルがあった場合に、StaticPressが記事のHTMLファイルと同じ名前のディレクトリを作ってしまうことが原因のようでした。

▼参考例
ーーーーーーーー
例えば、パーマリンク設定をカスタム構造で『$post_id.html』にしていた場合で、$post_idが『2525』のブログ記事があり、アイキャッチとしてテレビちゃんの画像『tv-chan.png』が添付されていたとします。するとStaticPressでページを静的に書き出したときに『%$post_id%.html』と設定されたパーマリンクから『2525.html』というページができるのですが、画像が添付されていると『2525.html/tv-chan.png』が書き出されてしまうようです。

このときStaticPressで書き出した『2525.html』が404になってしまうのは、『（ルートディレクトリ）/2525.html/tv-chan.png』があるために、ブログ記事のHTMLファイルである『（ルートディレクトリ）/2525.html』にアクセスするはずが『2525.html/』というディレクトリにアクセスしてしまっている、ということが原因のようです。
ーーーーーーーー

回避策としては「メディア」に先に画像をアップロードするなどして直接ブログ記事に対してファイルを添付しないようにするか、StaticPressのコードそのものをいじってしまうか、functions.phpでStaticPressに対して処理を行うか、の3択になりそうです。

現状dwango creators’ blogではStaticPressのコードをいじってしまう、という方法を取っていますが、プラグインがアップデートされる度に修正が必要になるので、代替案を模索しています。

エラーページの設定

あとはエラーページの設定で少々時間を食いました。
WordPressでは404.phpを作っておくとエラーでページにアクセスできなかった時にきちんとリダイレクトをしてくれるのですが、404.phpはStaticPressではHTMLとして書き出してくれないので、自分で404.htmlを作ってリダイレクトされるように設定する必要があります。せっかく404.phpを作っていてもそのまま反映されないので注意が必要です。

最後に

今回はdwango creators’ blogがなぜ静的サイトとして作られたのか、とその実現方法についてちょこっとお話しました。他にも実はポートフォリオ（制作実績）ページを作るにあたって導入したプラグインなどもありますが、また機会があればご紹介します。

それでは皆さん、またお会いしましょう。