H: 0～360Hについては図を見ての通りぐるっと一周３６０度です。その他は0～１の範囲にあるパラメータとします。さて、しかしながらこのHが曲者でして...、Hは色相ですのでペイントでやってみると、たとえば左上の点から上に沿って右に進ませていくっていう操作に当たります。このときRGBをじっくり観察してみると、
S: 0.0～1.0
V: 0.0～1.0
R ⇒ Y ⇒ G ⇒ C ⇒ B ⇒ M（Y：Yellow、C：Cyan、M：Magenta）と移り変わります。要は、まずRを255に保ったままGが0から255へ変化、後Gを255に保ったままRが255から0へ変化...（以下略）と動きます。プログラムし辛い...、ヤダヤダ。と思っているところにWikipedia様が登場です。
（Wikipedia: HSV色空間より抜粋）
なんと！こんな便利な変換式があるんですね。この計算のミソは、はじめにHiを60で割ってあげるところにあります。すると0～6（0/60～360/60）になるのですが、この値をガウス記号（床関数、floor）で切り捨ててあげちゃうんです。つまり、0、1、2、3、4、5のどれかにしちゃうというわけですが...、すると、この数字がそれぞれRYGCBMのどれかに当たることになります！なるほど、これで場合分けをすればいいのか...。ちなみにmod6（６で割ったときの余り）を求めているのは、色相が0～360ではない角度（１０００度とか）になった場合を考慮してのものです。さてさて、この数字による場合分けを行ってしまえばめでたくHMKをRGBに変換することができるので、以下にソースを示します。
// HSVtoRGB変換
function HSVtoRGB(H, S, V) {
var ret = [0, 0, 0];
// 引数チェック
if(S < 0 || S > 1 || V < 0 || V > 1) return ret;
var Hi = Math.floor(H/60) % 6;
var f = (H/60) - Hi;
// RGB
V = V * 255;
var p = Math.round(V * (1 - S));
var q = Math.round(V * (1 - f*S));
var t = Math.round(V * (1 - (1 - f)*S));
V = Math.round(V);
// 色相による場合わけ
switch(Hi) {
case 0: ret = [V, t, p]; break;
case 1: ret = [q, V, p]; break;
case 2: ret = [p, V, t]; break;
case 3: ret = [p, q, V]; break;
case 4: ret = [t, p, V]; break;
case 5: ret = [V, p, q]; break;
}
return ret;
}
こんな感じで配列でRGBを返します。どうせならペイントみたいなインターフェースを作ってしまいましょう。これを頭に#をつけた１６進数コードであらわされたRGBの文字列に変換する関数を付け加えます。function RGBto16(RGB) {
var R = (RGB[0] < 16) ? "0" + RGB[0].toString(16): RGB[0].toString(16);
var G = (RGB[1] < 16) ? "0" + RGB[1].toString(16): RGB[1].toString(16);
var B = (RGB[2] < 16) ? "0" + RGB[2].toString(16): RGB[2].toString(16);
return ("#" + R + G + B);
}
function getClr(H, S, V) {
return RGBto16(HSVtoRGB(H,S,V));
}
ここでtoString()を使いましたが、これは与えた引数を基数とした数字を返してくれます。16なので16進数のコードが返ってくるわけです。んー、便利。また、3項演算子を用いて、もし、15=fのように16進数に直した時1文字になってしまうとき、頭に0をつけて2文字にするようにします。この関数とHSVtoRGB()をまとめてやってくれるgetClr()を定義しました。この関数を使って色を設定します。表示部は以下のようになります。ちなみに、上の例ではペイントに合わせるため、getClrの第3引数を(2+j)/3としました。もし、ここが1だった場合は下はグレーではなく真白になります。
// パラメータ
di = 6; // 横の刻み（0～360）
dj = 0.04; // 縦の刻み（0～1）
// HSVtoRGB変換
function HSVtoRGB(H, S, V) {
var ret = [0, 0, 0];
// 引数チェック
if(S < 0 || S > 1 || V < 0 || V > 1) return ret;
var Hi = Math.floor(H/60) % 6;
var f = (H/60) - Hi;
// RGB
V = V * 255;
var p = Math.round(V * (1 - S));
var q = Math.round(V * (1 - f*S));
var t = Math.round(V * (1 - (1 - f)*S));
V = Math.round(V);
// 色相による場合わけ
switch(Hi) {
case 0: ret = [V, t, p]; break;
case 1: ret = [q, V, p]; break;
case 2: ret = [p, V, t]; break;
case 3: ret = [p, q, V]; break;
case 4: ret = [t, p, V]; break;
case 5: ret = [V, p, q]; break;
}
return ret;
}
// 16進数変換
function RGBto16(RGB) {
var R = (RGB[0] < 16) ? "0" + RGB[0].toString(16): RGB[0].toString(16);
var G = (RGB[1] < 16) ? "0" + RGB[1].toString(16): RGB[1].toString(16);
var B = (RGB[2] < 16) ? "0" + RGB[2].toString(16): RGB[2].toString(16);
return ("#" + R + G + B);
}
// まとめ
function getClr(H, S, V) {
return RGBto16(HSVtoRGB(H,S,V));
}
// カラーコード取得用グローバル変数
_H = 0;
_S = 0;
// VBar変更
function changeVBar(H, S) {
_H = H; _S = S;
id=0;
for(j=1; j>=0; j-=dj) {
document.getElementById("b_"+ id).bgColor = getClr(H,S,j);
id++;
}
}
// カラーコード取得
function setClr(V) {
with(document.getElementById("gtnClr")) {
bgColor = getClr(_H, _S, V);
style.color = getClr(_H, 0, 1 - V);
innerHTML = getClr(_H, _S, V);
}
}
| <table class="color_table" border="0" cellpadding="0" cellspacing="0"> <script type="text/javascript"> for(j=1; j>=0; j-=dj) { document.write("<tr>"); for(i=0; i<360; i+=di) { document.write('<td onclick="changeVBar(' + i + ',' + j + ')" bgcolor="' + getClr(i,j,1) + '"> </td>'); } document.write("</tr>"); } </script> </table> | <table class="color_table VBar" border="0" cellpadding="0" cellspacing="0"> <script type="text/javascript"> id = 0; for(j=1; j>=0; j-=dj) { document.write('<tr>'); document.write('<td id="b_' + id + '" onclick="setClr(' + j + ')" bgcolor="' + getClr(0,1,j) + '"> </td>'); document.write("</tr>"); id++; } </script> </table> |
| color | |
①でかい領域のどこかをクリック
color
var Human = Class.create();このように記述します。クラスの定義については、
Human.prototype = {こんな感じです。initializeがコンストラクタで、この中にフィールドを入れます。メソッドはprototypeの中に放り込んでやればおｋです。他にも記述の仕方はありますが、僕の場合は面倒くさいんでこれで統一しています。ちなみにプログラム自体は、場合分け処理が適当なので見ての通りうまく避けてくれませんｗ。誰かうまい処理考えてくれないかなー...。以下全ソースです。
initialize: function(obj,x,y,vx,vy) {
～
},
move: function() {
～
}
};
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;">
<meta http-equiv="content-script-type" content="text/JavaScript">
<title>人間工学シミュレーション</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<style type="text/css"><!--
* {
margin: 0;
padding: 0;
}
.street {
background-color: #ccc;
position: absolute;
}
.human {
position: absolute;
font-size: 16px;
line-height: 16px;
margin-left: -8px;
margin-top: -8px;
}
.human2 {
color: #f00;
}
#area{
background-color: #000;
}
--></style>
<script type="text/javascript" src="pt.js"></script>
<script type="text/javascript">
// ---------- 初期設定 ----------
// ウインドウサイズと道幅
var WinSizeW = 360, WinSizeH = 360;
var StreetW = WinSizeH/2;
var StreetL = (WinSizeW - StreetW)/2;
var StreetR = StreetL + StreetW;
// 描画間隔(ms)
var t = 10;
// 速度幅
var vy = 5;
var vx = 0;
// 人
var num = 8; // 人数
var size = 8;
var human = Array(num);
var human2 = Array(num);
// ---------- 初期化 ----------
// 初期化関数
function init() {
createStreet(); // 道の描画
for(i=0; i<num; i++) {
var left = StreetL + Math.floor(StreetW * Math.random());
var vx0 = Math.floor(vx * Math.random());
var vy0 = Math.floor(1 + vy * Math.random());
human[i] = new Human($('human_p' + i), left, 0, vx0, vy0);
human[i].move();
left = StreetL + Math.floor(StreetW * Math.random());
vx0 = Math.floor(vx * Math.random());
vy0 = Math.floor(1 + vy * Math.random());
human2[i] = new Human($('human_m' + i), left, WinSizeH, vx0, -vy0);
human2[i].move();
}
// タイマーの実行
Timer();
}
// 道の生成
function createStreet() {
var vertical = $('vertical');
Element.setStyle(vertical,
{
'left' : StreetL+ "px",
'top' : 0 + "px",
'width' : StreetW + "px",
'height': WinSizeH + "px"
});
}
// humanクラス
var Human = Class.create();
// クラスの中身
Human.prototype = {
initialize: function(obj,x,y,vx,vy) { // コンストラクタ（ここでメンバ変数も指定）
this.obj = obj;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
Element.setStyle(this.obj, // 実際の移動 / 体裁整え
{
'left': x + "px",
'top' : y + "px",
'font-size': size + "px",
'line-height': size + "px"
});
},
move: function() { // 移動の記述
if(this.y > WinSizeH || this.y < 0) { // 下から出たら
var left = StreetL + Math.floor(StreetW * Math.random()); // 開始位置指定
var tb = this.vy / Math.abs(this.vy); // 進んでた向き
var vx0 = Math.floor(vx * Math.random()); // 初速度
var vy0 = tb * Math.floor(1 + vy * Math.random()); // 初速度
if(tb>0) this.y = 0; // 上に戻す
else this.y = WinSizeH; // 下に戻す
this.x = left; // 初期位置に持っていく
this.vx = vx0; // 初速度指定
this.vy = vy0; // 初速度指定
}
if(this.x < StreetL) { // 道の外に出たら
this.vx = -this.vx; // 速度逆
this.x += size;
} else if(this.x > StreetR) {
this.vx = -this.vx;
this.x -= size;
}
this.x += this.vx; // 進む
this.y += this.vy; // 進む
this.vx = 0; // 速度初期化
Element.setStyle(this.obj, // 実際の移動
{
'left': this.x + "px",
'top' : this.y + "px"
});
},
// --------- ここが衝突判定 ---------
// this: 自分 obj: 相手
conflict: function( obj ) {
// --------- ここから判断の記述 ---------
var tb = this.vy / Math.abs(this.vy);
var lx = (obj.x - this.x); // x方向距離
var ly = tb*(obj.y - this.y); // y方向距離
var lf = tb*((obj.y + 10*obj.vy) - (this.y + 10*this.vy)); // 10時間後の距離
if(
ly > 0 && // 後ろにいて
Math.abs(lx) < 3*size && // かつ3人分の幅の中に入っていて
lf < 0 // 10時間後抜かしてるとき時
) {
var lr = this.x - obj.x; // 右か左かの符号用
if(!lr) lr = 0.5 - Math.random() // 真ん中だったらどっちか
lr = lr / Math.abs(lr); // 1か-1にする
var to = obj.x + lr*3*size; // 抜かす際の移動幅
this.vx += Math.floor((to - this.x)/3 + 0.5); // 3時間後に抜かす速度
}
// ------------- ここまで -------------
}
};
// 画面更新関数
function winDraw() {
for(i=0; i<num; i++) {
for(j=0; j<num; j++) {
if(i!=j) human[i].conflict(human[j]);
if(i!=j) human[i].conflict(human2[j]);
if(i!=j) human2[i].conflict(human[j]);
if(i!=j) human2[i].conflict(human2[j]);
}
}
for(i=0; i<num; i++) {
human[i].move();
human2[i].move();
}
}
// タイマー
function Timer() {
winDraw();
setTimeout("Timer()", t);
}
--></script>
</head>
<body>
<div id="area">
<div id="vertical" class="street"></div>
<script type="text/javascript">
for(i=0; i<num; i++) {
document.write('<div id="human_p' + i + '" class="human">●</div>');
document.write('<div id="human_m' + i + '" class="human human2">●</div>');
}
</script>
</div>
</body>
<script type="text/javascript">init();</script>
</html>
開始を押すとランダムな開始位置よりアミダを辿って下の番号に到達します。ソースは相当汚いですが、動けばいいや的なノリで組みました...、ご助言頂ければありがたいです。
function makeAmida(num, len){
if(num > 20) alert("20人以下でお願いします。")
var a = new Array(len);
for(i=0; i<len; i++) { // 縦
a[i] = new Array(num);
for(j=0; j<2*num-1; j++) { // 横
if (j%2) { // 偶数番目は２通り
if(a[i][j-1] == "┣") a[i][j] = "━";
else a[i][j] = " ";
} else { // 奇数番目は最初、最後を場合分け
if(a[i][j-1] == "━") a[i][j] = "┫";
else {
if(j==2*(num-1)) a[i][j] = "┃";
else a[i][j] = (Math.floor(Math.random()*2))? "┃" : "┣";
}
}
}
}
return a;
}function writeAmida(matrix) {
var nums = new Array("①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩","⑪","⑫","⑬","⑭","⑮","⑯","⑰","⑱","⑲","⑳");
document.write("<br />");
for(i=0; i<matrix.length; i++) {
for(j=0; j<matrix[0].length; j++) {
document.write('<span class="amida" id="amida' + i + "l" + j + '">');
document.write(matrix[i][j]);
document.write('</span>');
}
document.write("<br />");
}
for(i=0; i<(matrix[0].length+1)/2; i++) {
document.write('<span class="amida" id="num' + i + '">');
document.write(nums[i]);
document.write(' </span>');
}
}function traceAmida(matrix,i,i2,j,j2,step) {
// numに人数、lenに縦の長さ。これを実行すればOK。
pre_i = i; pre_j = j;
// n:人数 matrix[0].length: 2n-1 行列から人数を逆算⇒あみだの開始位置は偶数番目
if(i==0 && j==0 && step==0) {
pre_i = -1;
j = 2*Math.floor(Math.random()*(matrix[0].length+1)/2); // 最初は開始位置ランダム
}
else {
if(matrix[i][j] == "━") j += (j - j2);
else if(matrix[i][j] == "┫") {
if(i-i2) j--; // 下向きに速度を持っていたら左
else i++; // 横向きだったら下へ
}
else if(matrix[i][j] == "┣") {
if(i-i2) j++; // 下向きに速度を持っていたら右
else i++; // 横向きだったら下へ
}
else i++; // ┃
}
if(!(i==matrix.length)) {
document.getElementById("amida" + i + "l" + j).style.color = (step)? "f00" : "ff0";
step++;
setTimeout(function(){ traceAmida(matrix, i, pre_i, j, pre_j, step) }, 50);
} else {
document.getElementById("num" + (j/2)).style.color = "#00f";
}
}
function amida(num, len){
var a = makeAmida(num, len);
writeAmida(a);
traceAmida(a,0,0,0,0,0);
}
set_time_limit(0);こんな記述を冒頭に入れてあげましょう。
<span id="msg"></span>このchangeMsg()関数をPHPから呼び出し、<span>タグの中身を書き換えるわけです。
<script type="text/javascript">
function changeMsg(msg) {
document.getElementById("msg").innerHTML = msg;
}
</script>
ob_flush();バッファをフラッシュ（水をどっと流す）してあげる記述です。
flush();
$com = "表示したい内容"
echo '<script type="text/javascript">changeMsg("' . $com . '")</script>';
sleep(1); // 重い処理する場所こんな風にしちゃえばOKです。いかがでしょうか？思ったよりも簡単ですよね。具体例を挙げると、
$com = $i . "/" . $total; // $i: 処理中のデータ番号 $total: データ総数
echo '<script type="text/javascript">changeMsg("' . $com . '")</script>';
ob_flush();
flush();
$i=1;
foreach($url as $urls) {
getDataFromURL($url);
// （$urlのページからデータを取ってくる自分で定義した関数）
$com = $i . "/" . count($datas);
echo '<script type="text/javascript">changeMsg("' . $com . '")</script>';
ob_flush();
flush();
}
<form action="./hoge.php" method="POST" name="hoge">こんな風にタグが並んでいるときに、チェックボックスだけ選択してチェックをいれるためには、
<input type="checkbox" name="chk[]" value="1" />
<input type="text" name="text1" value="凸" />
<input type="checkbox" name="chk[]" value="2" />
<input type="text" name="text2" value="凹" />
<input type="checkbox" name="chk[]" value="3" />
</form>
-----------(preview)-----------
document.[form名].elements.lengthを使います。これはform内にある要素の数を数えてくれます。上の例でいえば5となります。では、早速すべてのチェックボックスをチェックするスクリプトを書いてみましょう。
<script type="text/javascript">いかがでしょうか。なお、checkboxの数を
function chkAllChkbox() {
for(i=0;i<document.hoge.elements.length;i++) {
if(document.hoge.elements[i].name == "chk[]") {
document.hoge.elements[i].checked = true;
}
}
}
</script>
<input type="button" onClick="chkAllChkbox()" value="check" />
-----------(preview)-----------
document.[form名].elements['checkboxの名前'].lengthで調べることもできます。覚えておくと便利？これを使ってradioボタンみたいなことを実現してみましょう。checkboxに更にＩＤを加えます。上とは違ってgetElementByIdを使ってcheckedを調べています。
<script type="text/javascript">getElementByIdとはその名の通りＩＤから要素を判別することができます。是非使ってみてくださいね。
function unchkOthers(num) {
for(i=1;i<=document.hoge2.elements['chk[]'].length;i++) {
document.getElementById('chk' + i).checked = false;
}
document.getElementById('chk' + num).checked = true;
}
</script>
<form action="./hoge.php" method="POST" name="hoge2">
<input type="checkbox" name="chk[]" value="1" id="chk1" onClick="unchkOthers(1)" />
<input type="checkbox" name="chk[]" value="2" id="chk2" onClick="unchkOthers(2)" />
<input type="checkbox" name="chk[]" value="3" id="chk3" onClick="unchkOthers(3)" />
</form>
-----------(preview)-----------
<span class="sup">©</span>などとクライアントに入力していただくのは少々難があります。そのために、
<input type="button" onClick='forms[0].text.value="<span class=\"sup\"">©</span>'>のようにボタンを実装してみたのですが、どうにもtextareaに入力される文章が多くてうざったいです。また、このようにして挿入した文章をSQLなどのデータベースに保存すると、magic_quote_gpcがONになっていた場合、'や"の前にバックスラッシュが挿入されてしまいます。それを除去するために、stripslashes()関数を使うのも面倒くさいですので、どうにかできないと考えてみました。
[symbol:COPY]のように勝手に自分で定義し、後で
str_replace("[symbol:COPY]","<span class=\"sup\">©</span>",$string);のように置換してしまおう、という作戦に出ました。このようにすれば他にもシンボルを配列で定義し、
$symbols = array(とまとめることもできます。
"COPY" => "<span class=\"sup\">©</span>",
"REG" => "<span class=\"sup\">®</span>",
...
)
while( list($key,$val) = each($symbols) ) {
str_replace("[symbol:". $key ."]",$val,$string);
}
[link:題名:URL] => <a href="URL">題名</a>と定義しました。そして変換時に正規表現を使おうと思い、初めはereg_replace()を使ってみました。しかしながらどんなにやってもエラーが出るため、調べてみると日本語用にmb_ereg_replace()があることを発見（知ってろよって感じですが…（汗））。preg_replace()もありますがmb_ereg_replace()の方が個人的に表記が簡単かと思い、こちらを使用しました。
mb_ereg_replace("\[link:(.*?):(.*?)\]", "<a href=\"\\2\">\\1</a>", $string);これで万事解決ですが、もっといい方法とかありましたら教えてください。
# Install (only for first install, not for update)と書いてあります。これを自分なりに追加・解釈して読むと、
- Extract in one folder, "phpcollab" for example (with Xoops integration, extract as "phpcollab" in modules folder)
- Unix/Linux: rename "includes/settings_blank.php" to "includes/settings.php"
- Unix/Linux: chmod 777 + chown apache "includes/settings.php" file, "files" folder and "logos_clients" folder
- Create a new MySql, PostgreSQL or Sql Server database "phpcollab" or use existing database
- Start at installation/setup.php
- Set all parameters
- Delete installation/setup.php file after successfull install
- Login at index.php
- With Xoops integration, go to admin, edit settings and set Xoops integration to "true" and set full path to your Xoops folder
- Avanced users can edit generated file includes/settings.php
①ダウンロードしたファイルを解凍といった感じです。ただし、マイコミジャーナルの記事にも書いてあるとおり、notificationメール（プロジェクトが変更されたときなどに送信されるメール）と、ガントチャート（プロジェクト作成>タスク作成 とするとプロジェクトの画面に現れます）において文字化けします。特にガントチャートについてはこのシステムの目玉なので、文字化けは痛い…、ということで何とかしたい！と思いますが、これは…マイコミジャーナル参照。さーせんｗ。ただし2点だけ補足。efontからダウンロードできるさざなみフォントは、tar.bz2という拡張子がついていますので、+Lhacaか何かで解凍してください。あと絶対パスという言葉が出てきますが、これは/home/～のように始まるパスです。lolipopなら、/home/sites/lolipop.jp/users/*****-*****/web/（ここで自分のルートフォルダ)php/phpcollab/includes/fonts/といった感じになります。次にメールについてですが、残念ながらマイコミジャーナルの記事では文字化け治らなかったので…、includes/phpmailer/class.phpmailer.phpの中の、437行目付近で
②includes/settings_blank.phpの_blankを消して、includes/settings.phpにする。
③アップロードする
④includes/settings.phpのパーミッションを777にする。
⑤installation/setup.phpにアクセス。
⑥各種設定（詳しくはマイコミジャーナル参照）
⑦installation/setup.phpを削除。
⑧index.phpにアクセスして使い放題
if ($this->Sender != "" && strlen(ini_get("safe_mode"))< 1)となっている箇所があるので、
{ (略)
$rt = @mail($to, $this->EncodeHeader($this->Subject), $body,
$header, $params);
}
else
$rt = @mb_send_mail($to, $this->EncodeHeader($this->Subject), $body, $header);
if ($this->Sender != "" && strlen(ini_get("safe_mode"))< 1)といった感じに変更してください。するとしっかりと日本語でメールが送られてくるはずです。実際phpCollabまだ使い始めなんでその威力はわからないですが、最初触れた感じは、結構使いやすそうです。みなさんも是非試してみてください。
{ (略)
@mb_language("ja");
@mb_internal_encoding("UTF-8");
$rt = @mb_send_mail($to, $this->EncodeHeader($this->Subject), $body,
$header, $params);
}
else
@mb_language("ja");
@mb_internal_encoding("UTF-8");
$rt = @mb_send_mail($to, $this->EncodeHeader($this->Subject), $body, $header);
visible: これで指定するとFireFoxではみ出ました。ってな感じです。IEだと標準で追従するようです。詳しくはリンク先を参照してください。あー…知らないことまだまだたくさんあるなぁ…。
auto: これに直すと追従。
こんなです。ソースは、
<style type="text/css">こんな感じで書けますね。まぁデザイン等はお好みで。次にＪａｖａＳｃｒｉｐｔ部分は、
#p_bar {background: #565656; font-size: 3mm; width: 0; padding: 0; margin: 0; border-spacing: 0;}
#i_p_bar {color: #ffffff; text-align: right;}
#out_bar {background: #cfcfcf; width: 300px; border: 1px #565656 solid; padding: 0; margin: 0; border-spacing: 0;}
.under_p_bar {color: #565656; font-size: 3mm;}
</style>
<table id="out_bar" width="300">
<tbody><tr><td>
<table id="p_bar">
<tbody><tr><td id="i_p_bar"> </td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<span id="msg" class="under_p_bar">Wait a minute ...</span>
<span id="rest" class="under_p_bar"></span>
こんなになってます…、あ、ちなみにprototype.js使ってます。まぁ見ての通りchangeMsg()ではidがmsgのspanの中身を変える関数、setProgressではプログレスバーの横幅を変更、処理状況をidがrestのspanに書きだしています。んじゃぁ、この関数をどうやって実行するのか、ですが、これはＰＨＰ側で行います。
// メッセージを変える
function changeMsg(msg) {
$('msg').innerHTML =msg;
}
// プログレスバーを動かす
function setProgress(i ,all) {
Element.setStyle($('p_bar'), {'width': ((i/all)*300)+'px'});
$('i_p_bar').innerHTML = Math.round(100*(i/all))+"%";
$('rest').innerHTML = i + "/" + all + "件を処理完了";
}
echo "<script type=\"text/javascript\">changeMsg(\"解析開始...\")</script>\n";こんな感じでです。flush()ってのはバッファをフラッシュしているらしいです。バッファ？フラッシュ？良く分かんないですがｗなんか、ob_flush()とflush()を両方コールすることでで向こう側にある処理途中の情報も送信してくれて（普通は処理し終わってから全部こっちに送ってくれるのかな？）ブラウザに表示してくれる、と解釈してます。まぁ動けばよし！ということで…。知ってる人いたら教えてください。そいでもって、プログレスバーを進めるには、
ob_flush();
flush();
echo "<script type=\"text/javascript\">setProgress(".$i.",".$this->cntData. ")</script>\n";こんな感じで行います。あ、ちなみに$this->cntDataには解析するデータ総数、$iには解析中のデータの番号を格納しています。こんな感じにすることでプログレスバーが実現できちゃいます。もうちょい詳しく書くと、
$i=0; $all = count($data);こんな感じですかね。実装すると
foreach($data) {
sleep(1); //ここが重い処理をする場所。
echo "<script type=\"text/javascript\">setProgress(".$i.",".$all. ")</script>\n";
ob_flush();
flush();
$i++;
}
こんな感じになります。流れとしては、
ＨＴＭＬとＣＳＳは成功したけどＪａｖａＳｃｒｉｐｔはまだダメヨ。ってことらしいです。なんかごちゃごちゃいじらなきゃいけないみたいなんで、自分には無理！とあきらめました。仕方ないのでＸＰが入ってるノートＰＣを併用して確認して作業していきたいと思います…、無念。
$fruit = array("apple", "banana");なんて感じで分解できます。これを利用してよく使われるのがeach()との組み合わせで、
$list($fruit1, $fruit2) = $fruit;
$fruit = array(てな感じになります。each()はキーとその値を分けてくれる関数です。なお、この状態でもう一度実行しても
"佐藤" => "先生",
"鈴木" => "友達",
"伊藤" => "上司"
);
while(list($name, $rel) = each($fruit)) {
echo $name . "は僕の" . $rel . "です。<br />\n";
}
/* 出力
佐藤は僕の先生です。
鈴木は僕の友達です。
伊藤は僕の上司です。
*/
while(list($name, $rel) = each($fruit)) {となってしまいます。これは配列の内部にポインタってものがあって、今どこを参照しているか記憶しているものです。これを最初に戻してあげるために、
echo $name . "は僕の" . $rel . "です。<br />\n";
}
/* 出力
*/
reset($fruit);をしてあげてからwhileを実行しないと動作しませんので注意してください（僕はこれで生じたエラーで1時間悩みましたｗ）
// 重複度合を調べるこんな感じで、クロス（同じ祖先を重複して持つ）を調べています。$this->horseは配列で馬の名前が格納されてます。最初はこの重複を、
$chk_cross = array_count_values($this->horse);
$i=0;で調べてたんですが、マニュアル見てたら見っけました。やっぱ欲しい関数って結構あるもんなんですね。
foreach($this->horse as $hname) {
$chk_cross[$this->horse[$i]]++;
$i++;
}