管理画面の「ステータス」画面に、任意のページの内容を表示する

概要

管理画面の「ステータス」画面（管理ページにログインした直後に表示されるページ。）に、任意のページの内容を表示することができます。

「ステータス」画面に直接、「コメント管理」の内容を表示したり「メッセージ登録プラグイン」から投稿されたメッセージを一覧表示したり…ということができます。（実際は「ステータス」画面以外のページにも表示できるため、色々なことに活用できる方法です。）

広告

詳細

基礎知識

freoは初期状態でjQueryというJavaScriptライブラリを使用しています。このライブラリの命令を使用すると、任意のページの内容を読み込むことができます。

具体的には、jQueryの load() という命令を使用します。例えば

<div id="example"><p>Now Loading...</p></div>

というタグを用意しておけば、

$('div#example').load('読み込みたいページのURL');

という命令で id="example" の場所にページを表示することができます。ただし、

  • 異なるドメインのページは読み込めない
  • ログインしていない状態だと、ログインが必要なページは読み込めない

という制限があります。

具体例

以下でいくつか具体例を挙げてみます。（管理画面の「ステータス」画面に、色々な内容を読み込んでみます。）テンプレートの templates/internals/admin/default.html をエディタで開き、ファイルの最後の方にある

  </div>
{include file='internals/admin/footer.html'}

この直前に、以下のコードを追加してみます。

<div id="example1"><p>Now Loading...</p></div>
<script type="text/javascript">
$('div#example1').load('{$freo.core.http_file}');
</script>

{$freo.core.http_file} には、設置したfreoのトップページのURLが格納されています。（参考）つまりこの場合、「ステータス」画面にトップページが読み込まれます。（ただし、レイアウトは崩れてしまいます。）

次に、上のコードの代わりに以下のコードを追加してみます。

<div id="example2"><p>Now Loading...</p></div>
<script type="text/javascript">
$('div#example2').load('{$freo.core.http_file}/admin/comment');
</script>

/admin/comment を追加したことにより、読み込まれるページが「コメント管理」画面になります。（この場合も、レイアウトは崩れてしまいます。）

次に、上のコードの代わりに以下のコードを追加してみます。

<div id="example3"><p>Now Loading...</p></div>
<script type="text/javascript">
$('div#example3').load('{$freo.core.http_file}/admin/comment div#content');
</script>

div#content を追加すると、読み込まれる内容が <div id="content">～</div> の内容のみになります。これを利用すれば、ページ内の必要な部分のみ読み込むことができます。

応用1

これまでIDは example3 のような値にしてきましたが、ページ内の他のIDと値が重複しなければ何でも大丈夫です。例えば拍手送信プラグインを導入している場合、

<div id="clap"><p>Now Loading...</p></div>
<script type="text/javascript">
$('div#clap').load('{$freo.core.http_file}/clap/admin div#content');
</script>

このようにすれば、拍手一覧ページを表示することができます。$('div#clap') という指示によって <div id="clap"><p>Now Loading...</p></div> の場所に表示させています。

応用2

読み込み先ページのテンプレートに任意のIDを追加すれば、読み込む際にそのIDを指定できます。

例えば、読み込み先ページのテンプレートに <div id="target">～</div> というタグを追加しておけば、

<div id="clap"><p>Now Loading...</p></div>
<script type="text/javascript">
$('div#clap').load('{$freo.core.http_file}/clap/admin div#target');
</script>

このように指定することで <div id="target">～</div> の内容のみを表示することができます。