repo_zf1/documentation/manual/ja/module_specs/Zend_ProgressBar_Adapter_JsPush.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Reviewed: no -->
<!-- EN-Revision: 24249 -->
<sect3 id="zend.progressbar.adapter.jspush">
    <title>Zend_ProgressBar_Adapter_JsPush(日本語)</title>
    <para>
        <classname>Zend_ProgressBar_Adapter_JsPush</classname> は、
        ブラウザ内のプログレスバーを Javascript の Push で更新するアダプタです。
        つまり、実行中のプロセスの情報を取得するために改めて接続を行う必要がなく、
        そのプロセス自身が状況を直接ブラウザに送信するということです。
    </para>
    <para>
        アダプタのオプションを設定するには、<code>set*</code>
        メソッドを使用するか、あるいはコンストラクタの最初のパラメータで
        配列か <classname>Zend_Config</classname> インスタンスを渡します。
        使用できるオプションは次のとおりです。
    </para>
    <itemizedlist>
        <listitem>
            <para>
                <code>updateMethodName</code>:
                毎回の更新時にコールされる javascript のメソッド。
                デフォルト値は <classname>Zend_ProgressBar_Update</classname> です。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>finishMethodName</code>:
                状態を設定した後にコールされる javascript のメソッド。
                デフォルト値は <constant>NULL</constant> で、この場合は何も行われません。
            </para>
        </listitem>
    </itemizedlist>
    <para>
        このアダプタの使い方はきわめて単純です。まず、ブラウザ上にプログレスバーを作成します。
        これは JavaScript を用いたものでもかまいませんしプレーンな
        <acronym>HTML</acronym> によるものでもかまいません。それから、更新時のメソッドと
        終了時のメソッド (オプション) を JavaScript で定義します。
        これらのメソッドは、どちらも唯一の引数として json オブジェクトを受け取るようにします。
        そして、処理時間が長くかかるウェブページを
        <code>iframe</code> タグあるいは <code>object</code>
        タグの中で呼び出します。処理の実行中に、
        更新が行われるたびにアダプタのメソッドがコールされます。
        引数として渡される json オブジェクトには次のパラメータが含まれています。
    </para>
    <itemizedlist>
        <listitem>
            <para>
                <code>current</code>: 現在の値。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>max</code>: 最大値。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>percent</code>: 算出したパーセンテージ。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>timeTaken</code>: これまでの経過時間。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>timeRemaining</code>: プロセスが終了するまでの予想残り時間。
            </para>
        </listitem>
        <listitem>
            <para>
                <code>text</code>: オプションのメッセージ (指定した場合のみ)。
            </para>
        </listitem>
    </itemizedlist>
    <example id="zend.progressbar-adapter.jspush.example">
        <title>クライアント側の基本例</title>
        <para>
            この例では、JsPush アダプタ用の <acronym>HTML</acronym> および <acronym>CSS</acronym>、JavaScript
            の基本的な設定方法を示します。
        </para>
        <programlisting language="html"><![CDATA[
<div id="zend-progressbar-container">
    <div id="zend-progressbar-done"></div>
</div>

<iframe src="long-running-process.php" id="long-running-process"></iframe>
]]></programlisting>
        <programlisting language="css"><![CDATA[
#long-running-process {
    position: absolute;
    left: -100px;
    top: -100px;

    width: 1px;
    height: 1px;
}

#zend-progressbar-container {
    width: 100px;
    height: 30px;

    border: 1px solid #000000;
    background-color: #ffffff;
}

#zend-progressbar-done {
    width: 0;
    height: 30px;

    background-color: #000000;
}
]]></programlisting>
        <programlisting language="javascript"><![CDATA[
function Zend_ProgressBar_Update(data)
{
    document.getElementById('zend-progressbar-done').style.width =
         data.percent + '%';
}
]]></programlisting>

        <para>
            これは、黒の枠線と進捗状況表示用ブロックからなるシンプルなコンテナを作成します。
            <code>iframe</code> や <code>object</code> を <code>display: none;</code>
            で隠してしまってはいけません。Safari 2 などでは、
            そうすると実際のコンテンツを読み込まなくなってしまします。
        </para>
        <para>
            プログレスバーを自作するのではなく、Dojo や jQuery
            などの既存の JavaScript ライブラリのものを利用したいこともあるでしょう。
            たとえば次のようなものがあります。
        </para>
        <itemizedlist>
            <listitem>
                <para>Dojo: <ulink url="http://dojotoolkit.org/reference-guide/dijit/ProgressBar.html" /></para>
            </listitem>
            <listitem>
                <para>jQuery: <ulink url="http://t.wits.sg/2008/06/20/jquery-progress-bar-11/" /></para>
            </listitem>
            <listitem>
                <para>MooTools: <ulink url="http://davidwalsh.name/dw-content/progress-bar.php" /></para>
            </listitem>
            <listitem>
                <para>Prototype: <ulink url="http://livepipe.net/control/progressbar" /></para>
            </listitem>
        </itemizedlist>
    </example>
    <note>
        <title>更新間隔</title>
        <para>
            あまり頻繁に更新しすぎないようにしましょう。
            毎回の更新は、少なくとも 1kb の大きさとなるからです。
            これは、Safari が実際にレンダリングを行って関数をコールするのに必要なサイズです。
            Internet Explorer の場合はこれは 256 バイトとなります。
        </para>
    </note>
</sect3>
<!--
vim:se ts=4 sw=4 et:
-->