技術資料

システム管理画面のログイン後のダッシュボードなど、雑多な情報を表示する画面を出力する際、サーバーサイドで全部処理してから出力するようにすると、画面が表示されるまでの体感時間が長くなってちょっと微妙な時があります。

例えば、ログイン後のダッシュボードに、「サイトのアクセスランキング」「新規問合せ件数」「新着お知らせ」が表示される場合、ダッシュボード画面を出力してからそれぞれの処理を呼び出すような設計の方が、システムの構造的にも、UX的にも良さそうな気がします。

そういう時の手段としては、

• Ajaxで呼び出す
• iframeで呼び出す

あたりが、シンプルな解決手段になるのかなという気がします。

Ajax で呼び出す

例えば、Ajaxで以下の3つのスクリプトを呼び出して表示する場合。

• access_ranking.php
• contact_notice.php
• recent_news.php

HTMLは以下のような感じに。

<script type="text/javascript">
    // 呼び出すスクリプトの一覧
	const load_url = [
		'https://mydomain/path/to/script/access_ranking.php',
		'https://mydomain/path/to/script/contact_notice.php',
		'https://mydomain/path/to/script/recent_news.php'
	];
</script>

<div>
    <!-- 一つ目のスクリプト呼び出し -->
    <script type="text/javascript">
        loadContents(load_url[0]);
    </script>
    <!-- 二つ目のスクリプト呼び出し -->
    <script type="text/javascript">
        loadContents(load_url[1]);
    </script>
    <!-- 三つ目のスクリプト呼び出し -->
    <script type="text/javascript">
        loadContents(load_url[2]);
    </script>
</div>

わざわざscript要素をスクリプト呼び出し毎に三つに分けている理由は後述します。

Ajaxで呼び出すスクリプト側(jQuery)は以下のような感じ。

function loadContents(load_url){
    let element = document.currentScript;
    $.ajax({
        url: load_url,
        type: 'GET',
        dataType: 'html',
        timeout: 5000,
    })
    .done(function(data) {
        element.insertAdjacentHTML('beforebegin', data)
    })
    .fail(function(jqXHR, textStatus) {
        // エラー時の処理
        console.log(textStatus);
        console.log(jqXHR);
        alert('Error: loadContents ' + load_url);
    });
}

ポイントは、document.currentScriptで、呼び出されたscript要素を取得してる点。これにより、処理成功時にelement.insertAdjacentHTML('beforebegin')で、呼び出された位置に、データを出力することができます。

script要素を3つに分けていない場合、3つの処理のうち、そのタイミングで処理完了が一番早かったものから順番に出力されてしまうため、出力するコンテンツの順番が、アクセスするタイミングによって異なってしまう可能性があります。それを解決するために、scriptを3つに分けて、呼び出された位置に出力する処理を行なっています。

iframe で呼び出す

ぶっちゃけ、こっちの方が基本的にはシンプルで良いと思っています。Ajaxでやると、予期せぬエラーが出た時のデバッグが色々面倒だし。

「出力する縦横幅が可変だがスクロールバーを出したくない」みたいなケース以外はiframeで良い気がします。

<div>
    <iframe src="https://mydomain/path/to/script/access_ranking.php"></iframe>
    <iframe src="https://mydomain/path/to/script/contact_notice.php"></iframe>
    <iframe src="https://mydomain/path/to/script/recent_news.php"></iframe>
</div>