簡単なプログレスバーの表示
次に、Zend Frameworkの公式マニュアルにある、divタグとJavaScriptを利用した簡単なプログレスバーを紹介します。
<!-- （1）divタグの色と大きさの指定 -->
#zend-progressbar-container {
width: 300px; height: 30px;
border: 1px solid #000000; background-color: #ffffff;
}
#zend-progressbar-done {
width: 0; height: 30px;
background-color: #000000;
}
..
//（2）zend-progressbar-done の幅を進捗の割合に応じて決める
document.getElementById('zend-progressbar-done').style.width =
data.percent + '%';
...
<!-- （3）入れ子構造のdivタグ -->
<div id="zend-progressbar-container">
<!-- 外側の zend-progressbar-container は白く塗り潰されている -->
<div id="zend-progressbar-done">
<!-- 内側の zend-progressbar-done は黒く塗り潰されている -->
</div>
</div>
このプログレスバーでは、（3）にある入れ子になっている2つのdivタグを利用しています。それぞれのdivタグは（1）で基本的な大きさと色が決まっており、外側にあるzend-progressbar-containerは白く塗られており、幅は300ピクセルです。また、内側にあるzend-progressbar-doneは黒く塗られており、最初は幅が0ピクセルです。
（2）が進捗を受け取ると、その割合に応じて内側のzend-progressbar-doneの幅を変化させて、最終的に100%まで延ばしていくことで進捗を表現しています。
このような単純な仕組でも、視覚的に進捗を表示することができます。この仕組を改造することで、より複雑なプログレスバーを自作することも可能ですし、より本格的なプログレスバーを利用したい場合には、次に紹介するようにライブラリが提供するウィジェットを利用することもできます。
ProgressBar Dijitの利用
本格的なプログレスバーを自分でデザインしようと思うと結構な手間がかかります。そこで、ライブラリが提供するプログレスバーのウィジェットを利用して進捗を表示する方法を解説します。ここではZend Frameworkと相性の良いJavaScriptのツールキットであるDojoを利用する例を取り上げます。
Dojoツールキットが提供するウェジェットはDijitと呼ばれており、プログレスバー用のDijitはDijit.ProgressBarです。これを利用して進捗を表示してみましょう。
<style type="text/css">
<!-- （1）テーマのスタイルファイルの読み込み -->
<!--
@import "http://o.aolcdn.com/dojo/1.5/dijit/themes/soria/soria.css";
...
</style>
<!-- （2）Dojoの読み込み -->
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
<!--
//必要なライブラリの読み込み
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser");
//（3）更新のための関数
function Zend_ProgressBar_Update(data)
{
progress.update({
progress: data.percent
});
}
-->
</script>
...
<!-- （4）利用するテーマの指定 -->
<body class="soria">
...
<!-- （5）プログレスバーの設置場所 -->
<div dojoType="dijit.ProgressBar" style="width:100px"
jsId="progress"
id="downloadProgress" maximum="100">
</div>
</body>
...
<!-- （6）Progressアクションと通信するための iframe -->
<iframe
src="<?php echo $this->url(array('controller' => 'index',
'action'=>'progress')) ?>"
id="long-running-process"></iframe>
まず（1）と（4）ではDijitで利用するテーマ（色や形）を指定しています。また（2）ではDojoツールキットの読み込みを行っています。ここで「djConfig="parseOnLoad: true"」と指定していますが、これはページを処理する際にdojoTypeが指定されているページ内の部品をDojoツールキットの部品で置き換えるための指示です。
ページ内の部品で実際に置き換えられるのは（5）のdivタグで、これがDijitのProgressBarに置き換えられます。また、（5）でjsIdが指定されていますが、これはJavaScriptからこのDijitを操作する際に利用する変数名です。
ページを読み込んだ後の処理の流れは前のサンプルと同じで、（6）のiframeがProgressアクションと通信し、受け取った結果を（3）のZend_ProgressBar_Update関数が処理します。（3）では受け取った進捗をProgressBar Dijitのupdateメソッドに渡して、表示の更新を行っています。
これで、Zend_ProgressBarモジュールを使ってWebアプリ用のプログレスバーを作成することができました。
サンプルのスクリーンショットはInternet Explorer 7のものですが、DojoのバージョンによってはInternet Explorerではこのサンプルがうまく実行できない場合があるようです。
例えばZend Framework 1.10.7 に付属している Dojo では、iframe の読み込みが終了するまで（つまり処理が終了するまで）プログレスバーが表示されないため、プログレスバーがうまく機能しませんでした。
もし Dojo を利用していて不具合が発生した場合は、自分のプログラムのミスだけではなく、Dojo のバージョン等も確認してください。
