制作時のコツや留意点について

Q. これまでのサイト制作と違ってURLについて留意したほうが良い点はありますか？

espar に限らず多くの静的化エンジンは、HTMLを解析して自動的にサイト内を巡回し、各ページ毎に必要なファイルを自動収集する仕組みで動作しています。

中でも espar の静的化エンジンは、Web標準に則った実装がされているため、サイトがWeb標準に沿った作りであればあるほど、ページ追加や構造の変化が自動処理され易いという特徴を持っています。

ページやリソースのURLは、極力以下のように実装して頂くとトラブル(静的化したのに更新されない等)が発生しにくくなります。

サイト内のURLで ? & = の使用を避ける。つまり、全ページのURLが / で区切られたパス表記になるように、クエリパラメタ表記を使用するのを避ける
サイト内のリンクには <a> タグを利用する
JavaScript で <a> タグを生成したり、<a> タグ内の href 属性を挿入したりすることを避け、HTMLに最初から含まれるようにする
ページの応答とHTTPレスポンスコードを一致させる
ページ内リンクやリソースの参照にはURLフルパスではなく、できるだけルート相対パスを使用する
CMS側で極力リダイレクトさせない。特にURL末尾の / について、/ ありから / なしへのリダイレクトを避ける
WordPress側に非同期通信(AJAX)を行ってHTML(DOM)を組み立てるような仕組みにしない
<a> タグをクリックしていくだけでサイト内の全てのページに漏れなく辿り着ける導線を作る

これらはSEO的な観点で有用であるだけでなく、サイト閲覧者がページを表示する時の快適さを向上させる上でも有用です。以下に上記に準じていない例を示します。

非推奨実装例1:<a>タグを使わないリンク

<a> タグを使わずにサイト内にリンクしている。

<div onclick="window.location.href='/about/'">当社について</div>

esparの静的化エンジンは JavaScript を解釈しないため /about/ をサイト内リンクとして検出できません。location.href の記述近くをリンクとして解釈を試みる…といった忖度も行いません。以下のような実装も考えられ、結局は JavaScript を解釈する必要がある可能性が残るからです。

<div onclick="window.location.href='/achievement/' + new Date().getFullYear();">本年度の実績</div>

非推奨実装例2:JavaSctiptを使った<a>タグリンク

サイト内リンクが <a> タグで表現されていても、当該の <a> タグが JavaScript でDOM挿入されていたり、<a> タグの href 属性値が JavaScript によって注入されている。

DOM挿入の例

<div id="dom-injection"></div>
<script>
    var newLink = document.createElement('a');
    newLink.textContent = 'このリンクはDOM挿入です';
    newLink.href = '/about/';
    document.getElementById('dom-injection').appendChild(newLink);
</script>

href注入の例

<a id="link_injection">hrefはjsから注入</a>
<script>
    document.getElementById('a#link_injection').onclick = function() {
        window.location.href = '/blog/';
    };
</script>

esparの静的化エンジンは JavaScript を解釈しないため上記例の /about/ や /blog/ のサイト内リンクは検出できません。

HTTPレスポンスコードの意味に応じた正しい内容を返せていない。

コード	HTTP仕様上の意味	良くない返し方
200	ok	200 で応答しながら内容は Not Found ページ
404	not found	404 で応答しながら内容は正規のコンテンツページ

esparの静的化エンジンはWeb標準に沿って判断するため、後者はエラーとみなされます。(CMS側が自ら 404 を返しているのでそう判断されて当然)

この場合、例えコンテンツ的に正しい内容を返していても静的化はされません。静的化対象にしたい正規のコンテンツページなのであれば、サーバーとして正しく 200 応答をしてください。自身の振る舞いがWeb標準に準じていないにも関わらず、正常応答として解釈することを期待することはWeb標準的には誤りです。

WordPress上のファイルを取得してDOMを構成している

<div id="blog-list" />
<script>
    fetch('/blog-list.json')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('blog-list');
            data.posts.forEach(post => {
                var element = document.createElement('div');
                element.innerHTML = `<h2>${post.title}</h2><p>${post.excerpt}</p><a href="${post.url}">続きを読む</a>`;
                container.appendChild(element);
            });
        });
</script>

esparの静的化エンジンは JavaScript を解釈しないため、このような JavaScript で生成されたリンク先を検出することはできません。どうしてもこの記述をしたい場合は、[サイト反映]→[設定] の [追加取得パス] に対象リンクを手動で追加して下さい。詳しくは静的化の設定をご覧下さい。

Q. これまでのサイト制作と違ってリソースファイルについて留意する点はありますか？

espar には基本価格のほか、転送量に応じた従量価格があります。転送量料金は、サイトのアクセス応答に要した転送量合計を月ごとに集計して算出します。そのため、サイトへのアクセス数が多いほど、そして1アクセスの応答に要する転送量が多いほど、ご請求料金が高額になります。

画像/動画/PDFファイルは注意しなければ大きなサイズになりがちです。月次のご請求額が必要以上に高額になる可能性がありますので、用途に適した大きさやサイズにして頂くようお願い致します。

種類	注意点
動画	エンコード・ビットレート・解像度等を調整して容量を極力小さくなるように動画を出力する。
画像	サムネイル用の画像は表示する大きさに合わせた解像度にする。ブログ投稿の詳細ページで使用する大きな画像をそのまま一覧ページのサムネイルとして使用しない。(驚く程よくあります)
PDF	資料PDFの場合は埋め込む画像が必要以上に大きくならないように注意する。

また必要以上に大きなサイズのファイルは、以下のようなデメリットがあることも留意して下さい。

ページが表示されるまでの時間が長くなる
スマホの場合に閲覧者のギガを無駄に浪費させてしまう

これらを考慮し、リソースファイルの容量は常に最適化するようにして下さい。

Q. 画像やCSSファイルの配置の仕方に注意すべき点はありますか？

espar の導入方式によります。

サイト全体の静的化を基本運用とし、かつオプション「リンク切れしたページや画像等を削除しない」を常用しない運用の場合、特段の注意点はありません。従来のCMSの制作と同様に構築頂いて問題ありません。

一方で、指定パスの静的化を基本運用とする場合、かつオプション「同階層以下のファイルも取得する」を常用する場合、画像やCSSファイルの配置はできるだけ共通リソース用のディレクトリを作らず、コンテンツ毎に異なるディレクトリ内に一式収まるようにすることを推奨します。

例えば、指定パスの静的化で /recruit/ 配下だけを更新する運用が常態化する場合、/recruit/ 配下に画像やCSS等のリソースファイルを集約して頂くほうがトラブルが発生しにくいです。

これは制定パスの静的化のオプション「同階層以下のファイルも取得する」の振る舞い仕様によります。詳しくは制定パスの静的化の同階層以下のファイルも取得するをご覧下さい。

Q. CMSがWordPressです。使えないプラグインはありますか？

プラグインは無数にあるため、弊社では全てのプラグインについて使用可否を調査することは行っていません。またプラグインのオプション設定によって振る舞いが変わったり、プラグインをどのように使用するかにもよって挙動も変わることがあるため、断定的な可否情報のご提示も行っていません。

恐れ入りますが、esparとはのページをお読み頂き、サーバ構成が従来のWordPress単体サーバ公開とは全く異なることを御理解のうえプラグインごとにご判断下さい。「静的化したページのURLへのアクセスはWordPressサーバには届かない」という大原則を認識頂くと、正確に判断を行い易いです。

参考までに、動作しない可能性が高いと思われるプラグインを列挙します。

プラグイン	動作しない可能性が高いと思われる理由
Redirection	管理画面で指定したリダイレクト設定を、WordPressにインストールされた Redirection プラグインのPHP実装がアクセスの都度処理する作りになっているため
HTTP Auth	管理画面で指定した認証設定で、WordPressにインストールされた HTTP Auth プラグインのPHP実装がアクセスの都度チェックする作りになっているため