このサイトでこだわったCMSとDAMとCDN
更新しにくいので放置しがちだったこのサイトを4月にようやくリニューアル（再構築）しました。SSL化とレスポンシブ対応は当然として、画像はDAMでデバイスに合わせて解像度とフォーマットを最適し、CDNで配信。Static Generatorなので応答が速く、セキュリティも強固。ひと昔前のエンタープライズ向けCMSを無料で実現！
コンテンツ更新が滞っていた理由
- 自前のDAMライブラリが壊れて画像やコードが表示されなくなった
- CMSの管理画面が重く、古いコンテンツの把握や確認がしにくくなった
- ヨーロッパ産のCMSで日本語の漢字変換ができなくなった
- 古いコンテンツを把握できなくなった
このままではマズイ、と一年前からリニューアルの準備を進めていました。
きっかけは、USで参加したSDLのイベント。コンテンツ管理に関する最新のソリューションについて知り、いろいろ刺激を受けました。特に、Headless CMSというコンテンツの保管と表現を分離する考え方を実践したいと思うようになりました。
定めたWebリニューアルの要件
- コンテンツ（テキスト）をバージョン管理したい
- 手元で複数のコンテンツを開いて一括編集したい
- リポジトリ（コンテンツ保管）とフロントエンド（HTML表現）を分離したい
- 画像をCDNで高速化したい
- 画像はデバイスに応じて解像度と容量を最適化したい
- レイアウトをデスクトップとモバイルでレスポンシブ対応したい
- AMP対応でスマホからのアクセスを高速化したい
- 全ページSSL化したい
- 内容と合わなくなったのでドメインを変えたい
- 既存コンテンツのURLを維持したい
と積もり積もった希望を満たすために試行錯誤。
まずWordPressで構築
まずは各種プラグインを探してWordPressを拡張しました。
** Markdown対応 **
HTMLを生成するWYSIWYGエディタは余計なHTMLを挿入するのが嫌いなので、もっとシンプルでかつ普及していて長期的にサポートされそうなマークダウン形式でコンテンツを記述するためにプラグイン「JP Markdown」を導入。Jetpackの設定でもMarkdown形式を有効化できますが、多機能すぎてWordPressが重くなるのが難点。
** GitHub同期 **
WordPressのテキストコンテンツが自動的にGitHubのリポジトリに同期されるプラグイン「WordPress GitHub Sync」を導入。テキストエディタで一括編集し、コミットするだけでサイトが更新されるようにしました。コンテンツの保存時に毎回Gitにコミットするので、これもWordPressの管理画面が重くなるのが難点。
結果として、バージョン管理、ローカル一括編集、リポジトリとフロントエンドの分離はできるようになったけども、WordPressのサイトも管理画面も、あまりに遅くて更新する気が失せるほどになったので、断念。
Headless CMSは発展途上？
新興のツールやソリューションをいくつか検討しましたが、対応する無料のフロントエンドが見つからず、自前で構築する必要があったので断念。このジャンルはまだ発展途上なのかも？
静的ジェネレーター「Hexo」を採用
最近は静的HTMLを生成するジェネレーターが増えていると知り、検討を開始。
そのうちメジャーなJekyllは、方法やテンプレートが充実しているので有力候補でしたが、Rubyを今から覚える気になれず、ボツ。Node.jsベースのHexoを採用しました。
ホスティングは「Netlify」
ジェネレータの実行とホスティング環境としては、Netlifyを採用。Githubへコミットすると自動でジェネレーターの実行と配信が行われるだけでなく、CSSやJSのファイル結合・圧縮、CDN対応、タグ追加や認証、A/Bテストなどの機能があるので、GitHub Pagesよりも圧倒的に便利です。
DAMは「Cloudinary」
画像をWeb用の解像度とフォーマットに変換してからサーバーにアップロードすることは避けたいので、動的に解像度やフォーマットを変換してくれるDAM (Digital Asset Manager)と、その配信を高速化できるCDNをいろいろ検討しました。
Netlifyにも画像のCDN配信機能がついていますが、さらにデバイス毎に最適化したかったので、Cloudinaryを採用。容量や転送量によっては、なんと無料で使えるDAMです。
Cloudinaryへ画像をアップロードし、その画像のURLを細工すると、サーバー側で動的にリサイズ、フォーマット変換、トリミング、フィルタ適用などができ、その結果はCDNで配信されます。
特に気に入ったのは、デバイスの解像度（DPR）に応じて必要なピクセルサイズを算出し、過不足ない解像度の画像を自動で配信してくれる機能。高解像度のスマートフォンで見ると画像がボケボケになる状況を避けられるようになりました。
↓iPhoneのretinaなど高解像度に自動対応、フォーマットもWebPなどに最適化する画像の例
URLはres.cloudinary.com/mak00s/f_auto,w_auto:200:800/Eclipse
↓URLにパラメータを含めるだけでDPR 1.0で幅200pixelにリサイズした例
URLはres.cloudinary.com/mak00s/w_200/dpr_1.0/Eclipse
HTMLのタグで縮小しているわけではなく、環境に応じて無駄のない大きさの画像がサーバーから配信されます。
オリジナルの最大解像度の写真をそのまま入れておけるので、元画像を別で管理する必要もありません。5年くらい経って通信速度や画面の解像度がさらに改善されたとしても、一番大きな元画像を保管してサーバー側で変換しているので、画像URLのパラメータを変えるだけで対応できます。
無料でも軽量で楽なサイト運用を実現できる！
以上、試行錯誤しながら今風の構成を個人サイトで実現してみました。昔（2005年頃）は勤務先に同じようなシステムを入れるのに数千万円かけていたのに、同じような構成を今はここまで無料で実現できるのか、と興奮の連続。CMSやDAM、タグマネージャーを自作していた時期もありましたが、世界のトレンドやブラウザのバージョンアップに合わせて進化させずに放置してしまいがち。似たようなニーズを持つ人や組織は世界にたくさんいるので、車輪の再発明をするのではなく、みんなの知恵やツールを上手に活用するのが一番ですね。
