documentation/manual/ja/module_specs/Zend_ProgressBar_Adapter_JsPush.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- Reviewed: no -->
   3 <!-- EN-Revision: 20854 -->
   4 <sect3 id="zend.progressbar.adapter.jspush">
   5     <title>Zend_ProgressBar_Adapter_JsPush</title>
   6     <para>
   7         <classname>Zend_ProgressBar_Adapter_JsPush</classname> は、
   8         ブラウザ内のプログレスバーを Javascript の Push で更新するアダプタです。
   9         つまり、実行中のプロセスの情報を取得するために改めて接続を行う必要がなく、
  10         そのプロセス自身が状況を直接ブラウザに送信するということです。
  11     </para>
  12     <para>
  13         アダプタのオプションを設定するには、<code>set*</code>
  14         メソッドを使用するか、あるいはコンストラクタの最初のパラメータで
  15         配列か <classname>Zend_Config</classname> インスタンスを渡します。
  16         使用できるオプションは次のとおりです。
  17     </para>
  18     <itemizedlist>
  19         <listitem>
  20             <para>
  21                 <code>updateMethodName</code>:
  22                 毎回の更新時にコールされる javascript のメソッド。
  23                 デフォルト値は <classname>Zend_ProgressBar_Update</classname> です。
  24             </para>
  25         </listitem>
  26         <listitem>
  27             <para>
  28                 <code>finishMethodName</code>:
  29                 状態を設定した後にコールされる javascript のメソッド。
  30                 デフォルト値は <constant>NULL</constant> で、この場合は何も行われません。
  31             </para>
  32         </listitem>
  33     </itemizedlist>
  34     <para>
  35         このアダプタの使い方はきわめて単純です。まず、ブラウザ上にプログレスバーを作成します。
  36         これは JavaScript を用いたものでもかまいませんしプレーンな
  37         HTML によるものでもかまいません。それから、更新時のメソッドと
  38         終了時のメソッド (オプション) を JavaScript で定義します。
  39         これらのメソッドは、どちらも唯一の引数として json オブジェクトを受け取るようにします。
  40         そして、処理時間が長くかかるウェブページを
  41         <code>iframe</code> タグあるいは <code>object</code>
  42         タグの中で呼び出します。処理の実行中に、
  43         更新が行われるたびにアダプタのメソッドがコールされます。
  44         引数として渡される json オブジェクトには次のパラメータが含まれています。
  45     </para>
  46     <itemizedlist>
  47         <listitem>
  48             <para>
  49                 <code>current</code>: 現在の値。
  50             </para>
  51         </listitem>
  52         <listitem>
  53             <para>
  54                 <code>max</code>: 最大値。
  55             </para>
  56         </listitem>
  57         <listitem>
  58             <para>
  59                 <code>percent</code>: 算出したパーセンテージ。
  60             </para>
  61         </listitem>
  62         <listitem>
  63             <para>
  64                 <code>timeTaken</code>: これまでの経過時間。
  65             </para>
  66         </listitem>
  67         <listitem>
  68             <para>
  69                 <code>timeRemaining</code>: プロセスが終了するまでの予想残り時間。
  70             </para>
  71         </listitem>
  72         <listitem>
  73             <para>
  74                 <code>text</code>: オプションのメッセージ (指定した場合のみ)。
  75             </para>
  76         </listitem>
  77     </itemizedlist>
  78     <example id="zend.progressbar-adapter.jspush.example">
  79         <title>クライアント側の基本例</title>
  80         <para>
  81             この例では、JsPush アダプタ用の HTML および <acronym>CSS</acronym>、JavaScript
  82             の基本的な設定方法を示します。
  83         </para>
  84         <programlisting language="html"><![CDATA[
  85 <div id="zend-progressbar-container">
  86     <div id="zend-progressbar-done"></div>
  87 </div>
  88
  89 <iframe src="long-running-process.php" id="long-running-process"></iframe>
  90 ]]></programlisting>
  91         <programlisting language="css"><![CDATA[
  92 #long-running-process {
  93     position: absolute;
  94     left: -100px;
  95     top: -100px;
  96
  97     width: 1px;
  98     height: 1px;
  99 }
 100
 101 #zend-progressbar-container {
 102     width: 100px;
 103     height: 30px;
 104
 105     border: 1px solid #000000;
 106     background-color: #ffffff;
 107 }
 108
 109 #zend-progressbar-done {
 110     width: 0;
 111     height: 30px;
 112
 113     background-color: #000000;
 114 }
 115 ]]></programlisting>
 116         <programlisting language="javascript"><![CDATA[
 117 function Zend_ProgressBar_Update(data)
 118 {
 119     document.getElementById('zend-progressbar-done').style.width = data.percent + '%';
 120 }
 121 ]]></programlisting>
 122
 123         <para>
 124             これは、黒の枠線と進捗状況表示用ブロックからなるシンプルなコンテナを作成します。
 125             <code>iframe</code> や <code>object</code> を <code>display: none;</code>
 126             で隠してしまってはいけません。Safari 2 などでは、
 127             そうすると実際のコンテンツを読み込まなくなってしまします。
 128         </para>
 129         <para>
 130             プログレスバーを自作するのではなく、Dojo や jQuery
 131             などの既存の JavaScript ライブラリのものを利用したいこともあるでしょう。
 132             たとえば次のようなものがあります。
 133         </para>
 134         <itemizedlist>
 135             <listitem>
 136                 <para>Dojo: <ulink url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/user-assistance-and-feedback/progress-bar" /></para>
 137             </listitem>
 138             <listitem>
 139                 <para>jQuery: <ulink url="http://t.wits.sg/2008/06/20/jquery-progress-bar-11/" /></para>
 140             </listitem>
 141             <listitem>
 142                 <para>MooTools: <ulink url="http://davidwalsh.name/dw-content/progress-bar.php" /></para>
 143             </listitem>
 144             <listitem>
 145                 <para>Prototype: <ulink url="http://livepipe.net/control/progressbar" /></para>
 146             </listitem>
 147         </itemizedlist>
 148     </example>
 149     <note>
 150         <title>更新間隔</title>
 151         <para>
 152             あまり頻繁に更新しすぎないようにしましょう。
 153             毎回の更新は、少なくとも 1kb の大きさとなるからです。
 154             これは、Safari が実際にレンダリングを行って関数をコールするのに必要なサイズです。
 155             Internet Explorer の場合はこれは 256 バイトとなります。
 156         </para>
 157     </note>
 158 </sect3>
 159 <!--
 160 vim:se ts=4 sw=4 et:
 161 -->