Programの最近のブログ記事

PHPにおけるファイル操作(1)初心者PHPプログラマの備忘録の続きです。引き続き、フリーで配布されていた掲示板プログラムのmake_html.phpというphpプログラムを、上から順に読んでいきます。ただそれだけ。

本エントリーでは、以下の部分を解説します。今回は簡単そうな気がしますです。

#====================================================
# 本HTML吐き処理
#====================================================
$fp = fopen($INDEXFILE, "w");
#--------ヘッダ&上の広告
list($header, $footer) = explode('<CUT>', implode('', file("../test/index.txt")));
$header = str_replace("<BBS_TITLE>", $SETTING['BBS_TITLE'], $header);
$header = str_replace("<BBS_TEXT_COLOR>", $SETTING['BBS_TEXT_COLOR'], $header);
$header = str_replace("<BBS_MENU_COLOR>", $SETTING['BBS_MENU_COLOR'], $header);
$header = str_replace("<BBS_LINK_COLOR>", $SETTING['BBS_LINK_COLOR'], $header);
$header = str_replace("<BBS_ALINK_COLOR>", $SETTING['BBS_ALINK_COLOR'], $header);
$header = str_replace("<BBS_VLINK_COLOR>", $SETTING['BBS_VLINK_COLOR'], $header);
$header = str_replace("<BBS_BG_COLOR>", $SETTING['BBS_BG_COLOR'], $header);
$header = str_replace("<BBS_BG_PICTURE>", $SETTING['BBS_BG_PICTURE'], $header);
$header = str_replace("<BBS_TITLE_NAME>", $bbs_title, $header);
$head = implode('', file($PATH."head.txt"));
$header = str_replace("<GUIDE>", $head, $header);
$option = implode('', file("../test/option.txt"));
$header = str_replace("<OPTION>", $option, $header);
$putad = implode('', file("../test/putad.txt"));
$header = str_replace("<PUTAD>", $putad, $header);
fputs($fp, $header);
$headad = implode('', file("../test/headad.txt"));
if ($headad) {
fputs($fp, '<br><table border="1" cellspacing="7" cellpadding="3" width="95%" bgcolor="'.$SETTING['BBS_MENU_COLOR']."\" align=\"center\">\n <tr>\n  <td>\n");
fputs($fp, $headad);
fputs($fp, "\n  </td>\n </tr>\n</table><br>\n");
}
プログラマではないのですが、タイトルにプログラマと入れてしまいました。反省。

今、僕が使っているフリーの掲示板プログラムを例に、PHPに関するファイル操作の基礎を学びます。が、体系的にまとめませんので、あまり参考にならないと思います。あくまで備忘録。

掲示板プログラムの、HTMLを作っているmake_html.phpというファイルで、書き込みをした時に表示される書き込み完了画面のhead内で、スレッドIDが存在している時と、存在していない時で、遷移先URLを、スレッドページと、掲示板トップでだしわけしたい、という処理を追加したかったのですが、感覚的に修正を試みていたのだけど、どうもハマり気味。

ということで、この際ちゃんと勉強してから進めようと思います。ゆえに、関係のない部分のソースから、全部読んでいきたいと思います。とりあえずソースに書いてある部分を理解します。そこに山があるから、みたいな感じ。

本エントリーは連載形式で続けます。とりあえず今自分が使ってるプログラム位ちゃんと理解しておかないと困っちゃうよね、ってことで。
ひょんなきっかけで、今まで漠然とした理解のままスル―していたネットワーク、特にTCP/IPの仕組みについて勉強しましたので、要点だけまとめておこうと思います。ほんと要点だけ。超簡単に。

本も5冊ほど購入したんですが、転記するのも面倒なので全て意訳です。


今月は直近の大きな提携に向けて、ひたすらコピペプログラミングしてます。
さすがにコピペのみだと対応しきれない部分が多すぎるので日々勉強してますが、まだまだ初心者。
とりあえず今日書いたコードのおさらい。

とある配列データを取得して、ランダムで抽選した6つの配列要素を、テーブルを使って2列3行にデータを並べるプログラムを、JavaScriptとPerlのtemplate toolkitを使って二種類書きました。

配列の参照方法と、while分の中でのif分を使った条件分岐辺りがおさらいポイントです。

簡単なプログラムですが、まだまだ悩みますねぇ。

脱コピペプログラマ。

■JavaScript版
<script type="text/javascript">
<!--
var hogedata = getJSONData('http://domain.com/html/hoge.js');
// 配列hogedataに、hoge.jsのデータを流し込む

var cnt = 6;
// 変数cntを宣言し、繰り返し回数6をセット

var rnd = Math.floor(Math.random() * hogedata.length);
// 変数rndを宣言し、hogedataの要素数を上限として、乱数を発生
// floor関数で小数点以下を切り捨てて、変数rndに代入

if(rnd > hogedata.length - cnt){
  rnd = hogedata.length - cnt;
}
// 変数rndに代入された数値が、hogedataの要素数-6より大きい場合は、hogedataの要素数のマイナス6の数値をrndに代入
// 最後の6つの要素を参照する

  h = '<table>';
  h += '<tr>';

var i = rnd;
// 配列参照用の変数iを宣言、rndの値を代入

var c = 1;
// 変数cを宣言、1を代入

while(i <= rnd + cnt - 1){
// iが、乱数rndから1を引いた数に、繰り返し回数cnt6以上になるまで、以下の処理を繰り返す
//  -1 は、配列要素の1番目が0番であるための処理

 if(c == 3){
 // もし変数cが3の場合は、trを追加し、変数cを1に初期化

  c = 1;
  h += '<tr>';
  }
  h += '<td width="168" valign="top" style="line-height:140%">';
  h += '<a href="' + hogedata[i].url +  target="_blank">';
// 配列hogedataの要素番号[i]のurlデータを表示

  h += '<span class="title">' + hogedata[i].name + '</span><br>';
  h += '<img width="75" height="75" border="0" src="' + hogedata[i].imageurl + '"><br> ';
  h += '<span  class="address">' + hogedata[i].address + '<br>';
  h += '</span>';
  h += '</a>';
 h += '<br></td>';
 c == 2 ? '</tr>' : '';
// 変数cが2の場合に、trを閉じる

 c++;
 i++;
//変数cとiをインクリメントし、処理を繰り返す

 }
  h += '</table>';
document.write(h);
//-->
</script>

JavaScriptはhtmlを書くのに直接書けないのでコードがぐちゃぐちゃ見えて嫌ですね。
初心者はこれだけで嫌悪感を感じてしまいます。


■template toolkit版

[% USE hogedata = HOGE('/var/www/domain.com/html/js/hoge.js') -%] 
// 配列hogedataにjsのデータを流し込む

[% cnt = 6 -%]
// 変数cntを宣言、初期値6をセット

[% USE rnd = RAND(hogedata.size) -%] 
// 変数rndを宣言、hogedataの配列の要素数の中から、ランダムで要素数を上限とした整数を初期値としてセッット。
// template toolkitでは、RANDで整数が返されるようで、jsみたいな小数点以下切り捨て処理は不要みたい。便利!

[% IF hogedata.size - cnt < rnd -%][% rnd = hogedata.size - cnt -%][% END -%] 
// hogedataの要素数から、cnt(4)を引いたものが、rnd(ランダム整数)より小さい場合、rndには配列要素上限からcnt(4)を引いた数を代入

<table><tr>
[% c = 1 -%]
// 変数cを宣言、初期値1をセット

[% FOREACH i IN hogedata -%]
// 変数iを宣言、hogedataの配列を代入し、繰り返し処理を開始

[% NEXT IF loop.count <= rnd -%]
// ⑦変数rndまでroopをスキップ

[% IF c == 3 -%]<tr>[% c = 1 -%][% END -%] 
// 変数cが3の場合、<tr>を記述し、変数cを1に初期化

<td width="168" valign="top" style="line-height:140%"> <a href="[% i.url %]" target="_blank" style="text-decoration:none;">
<span class="title">[% iname -%]</span><br>
<img border="0" src="[% i.imageurl -%]&w=70&h=70&auto_offset=1&size_img=0&zoom_in=0"><br>
<span  class="address">

[% IF i.entry -%]<a href="http://www.domain.com/thread/[% i.entry.-1 -%]">掲示板を見る</a>

[% ELSE -%]<a href="http://www.domain.com/thread/id=[% i.id -%]">評判を聞く</a>[% END -%]

<br><br></td>
[% (c == 2) ? '</tr>' : '' -%]
// ⑨変数cが2の場合、trを閉じる、そうでない場合は、何もせずに次の処理を行う

[% c = c + 1 -%]
// ⑩変数cに数値1を追加

[% LAST IF loop.count >= rnd + cnt -%]
// ⑪loop.countが、変数rndと変数cnt(4)の合計以上になった場合に処理を終える

template toolkitは非常に分かりやすい。
コードもシンプルで見やすいですね。
日本語のドキュメントがほとんどないのが難です。


今進めているプロジェクトでは、業務システムの設計を担当しております。

システムの設計といっても幅広いわけですが、要件定義から外部設計、データベースの概念設計とか、割と上流工程まではお手の物なのですが、そこからさらに進むとチンプンカンプンです。

な状態なのですが、今回データベースの論理設計まで自分でやることになっていまして、もちろん初チャレンジなわけなのですが、当然、ある程度しっかりと勉強しないと着手するのもままならないといった状態。

その状態のまま、なかなかガッツリ時間を取れるタイミングがなく(言い訳)、かなり長期間ベンディングしちゃっていましたが、どうにもこうにも自分が動かないとプロジェクトが進まない局面に差し掛かってきましたので(というのと、物理的に時間の余裕も出てきまして)、とりあえず前に進めねばと、ER図の書き方を調べました。初歩の初歩。

ということで、Part4 初めてのデータベース設計の内容のうち、ER図についてのルールや基礎知識について、忘れないようにまとめます。

以下、もっとも普及しているらしいIDEF1XというものでER図を書くルール。

ER図の基本的な考え方
  • モデリングする対象をエンティティ(実態)と、エンティティ間のリレーションシップ(関連)で表すということ

たとえば具体的には
  • 「A」というエンティティは、属性として、「い」、「ろ」、「は」を持つ
  • これらの属性のうち、「A」を特定できる属性を主キーと呼ぶ
  • 主キー以外の属性を非キーと呼ぶ

ER図の書き方
  • ER図では、エンティティを四角形で表し、主キーを四角形の上段に、非キーを下段に書く

FOREIGN KEY
  • あるエンティティの属性のうち、他のエンティティの主キーになっているものを、外部キーと呼び、属性の後ろにFK(foreign key)を表示する

リレーションシップについて
  • 特定のエンティティとエンティティが、1対nの関係になっている場合、四角を線で結び、n側のエンティティの線に黒丸をつける
  • また、あるエンティティ「A」に外部キーが存在する場合、その外部キーを主keyとするエンティティ「B」を親エンティティ、エンティティAを子エンティティと呼ぶ

リレーションシップの分岐について
  • 黒丸の横に指定がない場合:1対0以上(0人があり得る)
  • 黒丸の横にPがある場合:1対1以上(常に1以上)
  • 黒丸の横にZがある場合:1対0または1(0もしくは1)
  • 黒丸の横に数字がある場合:1対nの「n」が決まっている
  • ひし形:0または1対n?の場合の0を表す(非依存関係に対してのみ指定できる)

リレーションシップとエンティティの種類
  • 四角の角が丸くなっているもの:従属エンティティ(依存エンティティ)と呼ぶ)

その他のルール、呼び名
  • 従属エンティティは、親エンティティなしでは存在できない
  • ほかのエンティティに依存しないエンティティを独立エンティティと呼ぶ
  • 立エンティティに対するリレーションシップは破線で表示し、非依存リレーションシップと呼ぶ

エンンティティの種類
  • エンティティは実体という意味ですがもう少し具体的に言えば二種類に分けられる
  • リソース・エンティティ(業務を遂行するために必要な人,物,お金などのリソース)
  • イベント・エンティティ(企業活動を構成するアクティビティです。業務フローを描いたときに現れる処理単位や,システム概念図に現れる)

以上、簡単にまとめでした。

ここからの具体的な書き方や詳細は以下をご参照ください。

2011.2.25 追記 以下、その後勉強してみた関連するお勧め書籍のご紹介です。ご参考までに。







ここ2年ぐらいでしょうか。JAVA、Parl、PHPと、それぞれ、ものすごく中途半端になんですが、プログラムの本は読んでいます。さすがに、コードを読んで、どういう機能を動かしているものなのかとか、制限時間や上限回数がどこで指定されていて、どの値を変更すればいいか位は理解できるのですが、実際に1からコードを書いたことはありません。本の練習問題止まり。


と言う状況なのですが、最近、実務としてJavaScriptが必要になってきましたので、せっかくなので備忘録がてら、勉強したことをメモしていきます。

初心者である自分が、ぼやっとしていて躓いた点などを、随時まとめていけたらいいなと思います。また、本来の正確な意味を覚えると言うよりも、こういう感覚です! という感じで、とにかく実務レベルで応用できればいいという前提で書きます。ですので、正確には間違っている部分など多いと思いますが、これからプログラムを始めるよ! という人は、参考までに読んでみていただけると、何かのきっかけになるかもしれません。


さて、javascriptは、イベントが発生した時にコードが実行されます。クリックしたとき、マウスオンした時、読み込みが終わった時など、あらかじめ定められたイベントに応じて、あらかじめ定められた処理が行われます。ようするに、いろんなコードが用意されていても、閲覧者が、定義されたイベントに至る行為を行わなければ、何の処理も実行されません。

また、DOMという概念を知っておく必要があります。Document Object Model の略だそうですが、htmlやxmlなどの文書の特定の要素にアクセスする手法と覚えればよいでしょう。

今回は以下のコードに対して手を加えます。

【表示側】
<div id=”switchpoint1”>
<a href=”#” onClick=”switchPoint3();”><img src=”http://hogehoge.ne.jp/img/com/btn03b.gif” alt=”” border=”0”></a>
</div>
<!?switchpoint1end?>

<div id=”switchpoint3”>
◆クリックした投稿のURLを表示<br>
<a href=”http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10”>http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10</a>
<br>

<a href=”http://hogehoge.com/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10”>この投稿を指定する</a>
</div>
<!?switchpoint3end?>

【JS側】
function switchPoint3{
    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“switchpoint3”).style.display = “block”;
}

あるページで、特定のボタンをクリックすると、それまで表示していた要素を非表示し、同じページ内で、それまで非表示されていた要素を表示するコードです。また、hogehoge.ne.jp内のとある投稿のURLを、最終的に、hogehoge.comに送ります。

ボタンをクリックした時の処理の流れは以下です。

<a>タグの中に、「onClick=”switchPoint3()”」と記述があります。onclick属性といい、該当する<a>リンクをクリックしたときにイベントが発生します。

1.ユーザーがクリック
2.switchPoint3という関数が動く
3.JSのSwitchPoint3関数内に書かれた処理が上から順に実行される

function switchPoint3とありますが、この「switchPoint3」の部分はコードを書く人が勝手に決められる関数名です。functionに続けて関数名を記述することで、自分で関数を作ることができます。hogeでもいいわけです。関数とIDに同じ文字列「switchPoint」を使っていますが、関数名とIDは別のものであることを意識しましょう。

さて、そのJS関数の中身を見てみましょう。

document.getElementByID(“switchpoint1”),style.dispray

これがDOMと呼ばれるもののようです。
「document」で、htmlソース全体を指定します。
「.getElementByID」と続けることで、そのhtml内の特定のIDを持つ要素にアクセスしています。

ここの指定の仕方はいろいろとあります。
「document.title」と記述すれば、<title>タグの中身にアクセスできますし、「document.ElementsByTagName(“h1”)」のように記述すれば、<h1>タグ
の中身にアクセスできます。
いろんな指定の仕方がありますので、都度調べてみることにして、とりあえず先に進みます。

ここでは、ID(“switchpoint1”)というIDを持つ要素にアクセスしています。
IDは、その文書の中で常に一意の存在ですから、必ず要素が一つだけ特定されます。

このコードでは、<div id=”switchpoint1”>以下から、</div>までがその要素になります。

    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“switchpoint3”).style.display = “block”;

div要素にアクセスした上で、「.style.display= “none”;」と続いています。
「.style」で、cssのdisplayプロパティに対して、「=”none”」と続けることでnoneという値にダイナミックに変更し。これまで表示していたswitchpoint1というIDが指定されている<div>全体を非表示しました。

後者も同じで、switchpoint3というIDを持つ<div>要素全体を、displayプロパティの値をblockに変更することで、表示しました。

同じページ内で、再読み込みすることなく、表示要素をダイナミックに変更しているわけです。

さて、ここで本題です。
<div id=”switchpoint3”>内に記述されているリンクのパラメータの一部が静的に記述されているのですが、これを動的にとってきたい。

[% param.fol -%]&tn=[% param.tn -%]&rn=10”

掲示板のプログラムでして、folがフォルダ名、tnがスレッドNO、rnが最新の10件をと言う意味なのですが、これを、指定されたコメントNOを動的にとってきたいわけです。

表示側では、stwitchpoint1で指定したコメントのURLを表示し、該当するURLのリンクを表示し、またその値を持った状態で、他のドメインにデータを渡したいのですが、元のプログラムは、どのコメントを指定しても、最新10件のURLを静的に表示しています。

以下のように修正します。

◆表示側
<div id=”switchpoint1”>
<a href=”#” onClick=”switchPoint3(‘[% param.fol -%]’,’[% param.tn -%]’,’[% i.no -%]’);”><img src=”http://hogehoge.ne.jp/img/com/btn03b.gif” alt=”” border=”0”></a>
</div>
<!?switchpoint1end?>

もともと、switchPoint3という関数は、()内に何の値も持っていませんでしたが、今回、クリックした際に、フォルダ名とタイトル名、コメントNOを取得するようにしました。[% hogehoge -%]は、parlのtemplate toolkit側の処理ですので、割愛します。いずれにしても、Onclickイベントが起こった時に、switchPoint3と言う関数に3つの値を持たせました。

さらに、JS側でその値を受け取らなくてはいけません。

function switchPoint3(fol,tn,rs){
    document.getElementById(“switchpoint1”).style.display = “none”;
    document.getElementById(“comurl”).href = “http://hogehoge.com/fol=” + fol + “&tn=” + tn + “&rs=” + rs;
    document.getElementById(“comrsurl”).href = “http://hogehoge.ne.jp/fol=” + fol + “&tn=” + tn + “&rs=” + rs + “&re=” + rs;
    document.getElementById(“comrsurldisp”).innerHTML = “http://hogehoge.ne.jp/fol=” + fol + “&tn=” + tn + “&rs=” + rs + “&re=” + rs;
    document.getElementById(“switchpoint3”).style.display = “block”;
}

switchPoint3(fol,tn,rs)と引数を与え、表示側で投げた3つの値を順に受け取ります。左から、フォルダ名、スレッドNO、コメントNOが入っています。

switchPoint3関数内に、三つの処理を加えました。それぞれ、一意のIDを指定し、引数で取得してきた値を用いて、ダイナミックにURLを生成します。

.hrefで、表示側の該当するIDを持つhrefの値に、=より右側で生成したURLを与えます。

=より右側の作り方は以下。
文字列は ”hogehoge” とダブルクウォーテーションで囲みます。表示するときは「hogehoge」と表示されます。値はダブルクウォーテーションは用いずそのまま引数を指定します。folにたとえば「tokyo」というフォルダ名が入っていれば、tokyoという文字列が表示されることになります。
tnに1500というスレッド番号、rsに35というコメント番号が入ったと仮定すると、一つめの処理では、以下のURLが生成されます。

http://hogehoge.com/fol=” + fol + “&tn=” + tn + “&rs=” + rs
http://hogehoge.com/fol=tokyo&tn=1500&rs=35

hogehoge.com以下のtokyoというフォルダにある、1500番スレッドの35番コメントのURLができあがりました。
JSに限った事ではありませんが、プログラム初心者は、値と文字列の扱いに最初に躓きますね。
どれが動的に取得してきた値で、どれが文字列で、コードのうちどれが表示されるのか、を理解することが大切です。

innerHTMLは、ドキュメントにあるタグのIDを取得して、タグ内のHTMLを参照します。

表示側は、以下のように修正します。

<div id=”switchpoint3”>
◆クリックした投稿のURLを表示<br>
<a id=”com_rs_url”  href=”http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10“>
<div id=”com_rs_url_disp”>http://hogehoge.ne.jp/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10</a></div>
<br>

<a id=”com_url”  href=”http://hogehoge.com/fol=[% param.fol -%]&tn=[% param.tn -%]&rn=10“>この投稿を指定する</a>
</div>
<!?switchpoint3end?>


それぞれ、js側で指定したIDを、値を差し替えたい個所に指定します。
com_url リンク先URL
com_rs_url 該当コメントのURL
com_rs_url_disp 該当コメントのURLを表示する用

JS側で、「.href」「.innerHTML」にアクセスし、動的に中身を変更しますので、これまで静的に指定されていたURLは削除しておきます。データの取得に失敗したときに表示する用に、記述しておいてもよいでしょう。

これで、
1.html側でリンクをクリックする
2.特定のコメントNOをJSに渡す
3.JSでコメントNOを受け取る
4.JSで、コメントNOを含んだURLを生成する
5.html側に作ったURLを渡して表示する

と言う処理を行うことができるようになりました。

とても簡単な処理ですが、DOMの概念とか、イベントが発生した時に処理が行われるということ、データがhtml側とJS側でどういう風に行き来するかといった、JavaScriptの基本的な概念みたいなものが良く分かりました。

今回の処理で、初心者が押さえておくべきポイントは、以下ぐらいでしょうか。

・URLを動的に作る場合、値と文字列を意識する
・onClick イベントが発生したときに、JS側に値を渡す
・JS側で、その値を受け取る引数を指定する
・引数を使って、動的に作ったURLをhtml側に戻す
・戻すときに、DOMが必要になる
・IDを使って、戻す場所を指定する

ということで、初めて簡単なコードを書いたJavaScript超初心者のメモでした。

        

人気エントリー

株保有銘柄晒し中

購入時価格も晒し中
ミサワホーム:524円
ヤフー:29,342円