「作曲」カテゴリには自作曲がたくさん貼ってあります。初心者独特の曲の雰囲気をお楽しみください。
■ BGM作成サービスはじめました。[こちらから]
■ フリーBGM(素材)サイト: 【SOUND-SITES】 公開
■ アルバム(全16曲)完成: 「Electrovoice Trajectory」
■Short music clips please play & listen
Welcome! This song is my own work.[Shuffle! をクリックするとランダムで違う曲が流れます]
[Shuffle!]
←演奏中に押すとランダムで曲が変わります。
ニコニコモンズのページ (2935332)

youtube、ニコニコ動画、iTunes その他 作品公開場所一覧

http://tsukikagejoupr.blog.fc2.com

簡単! php の仕組み

php の仕組み。

html = xxx.html
php = abc.php

ここに html のコードがあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<!-- gokuu.html -->

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>HTML のテスト</title>
</head>
<body>
<h1>おっすおら悟空</h1>
</body>
</html>


以下のように表示されます。



これは、上記の 「gokuu.html」 を表示した結果です。サーバーに置いてあった gokuu.html の内容がそのままあなたのブラウザに送信され、ブラウザがそれを表示しました。

php だと何ができるでしょう?

<?php header("Content-Type:text/html;charset=utf-8"); ?>
<?php

/* gokuu.php */

$str = "ぼく悟飯、よろしくね" ;

// この部分はおまじない。
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>php のテスト</title>
</head>
<body>
<h1>おっすおら悟空 <?php echo $str; ?></h1>
</body>
</html>


このように表示されます。



<!DOCTYPE HTML ~ 最後の </html> までは、色を付けた部分以外は同じです。php をかくときは基本、html の上部分に php のコードを記述すればよいのです。


<?php echo $str; ?>

の部分が、「ぼく悟飯、よろしくね」を出力しています。

プログラムの上の部分で、変数 $str に $str = "ぼく悟飯、よろしくね" ; として代入していたものを、この部分で出力しています。

echo $str ; を
echo "ぼく悟飯、よろしくね" ;

としても同じ結果が得られます。

echo ... というのは、出力する、という命令です。

echo というのは php の命令なのですが、php の命令をさせたい場合は、

<?php ~ ?>

で囲む決まりになっています。

なにも $str を、プログラムの上の部分で 代入しなくても、

<?php $str = "ぼく悟飯、よろしくね" ; echo $str; ?>

としても大丈夫です。命令の最後には、セミコロン「;」を付け、文を区切ります。<?php ~ ?>で囲めばいくつの文でも実行できます。

html の上部分に php のプログラムを書くといいましたが、その部分も <?php ~ ?> で囲まれていることに気づくでしょうか。 囲みさえすれば php の命令ができるということです。

html の場合は、サーバーにある (htmlの) ファイルが”そのまま” 送られてきて、それをあなたのブラウザが表示しますが、php の場合は、”そのまま” ではありません。サーバーはこちらに送る前にphpの計算(命令を実行)をします。サーバ上で、上で述べた <?php ~ ?> の部分の命令が 上から順に実行されていきます。php の命令はたくさんの種類がありますが、今は echo について説明すると、echo ... は、その(html記述の)場所に 出力=つまり、html のコードを ”埋め込む” のです。echo のほかに、print, print_r などの出力の命令があります。実際、出力関数以外の関数はまさにいろいろなことを実行するだけです。


そのように、サーバ上で html にあたる 内容が 埋め込みで 生成され、生成されたものが、あなたのブラウザに送られてきます。


おわかりになられたでしょうか。これを、サイトが動的に生成されるといいます。


とにかく、<?php ~ ?> で囲めば命令ができるのですから、応用して、次のような便利なこともできます。

<?php header("Content-Type:text/html;charset=utf-8"); ?>
<?php

/* gokuu-2.php */

// 普通はこの部分でいろいろな命令を行いますが、理屈としては何もしなくても問題ないわけです。
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>php のテスト(2)</title>
</head>
<body>
<?php for($i=1;$i<=7;$i++) { ?>
<h1><font size="<?php echo $i; ?>">おっすおら悟空</font></h1>
<?php } ?>
</body>
</html>


繰り返しの構文、for 文のところが、巧妙に入り組んでいます。

以下のように表示されます。



<h1><font size="1">おっすおら悟空</font></h1>
<h1><font size="2">おっすおら悟空</font></h1>
<h1><font size="3">おっすおら悟空</font></h1>
<h1><font size="4">おっすおら悟空</font></h1>
<h1><font size="5">おっすおら悟空</font></h1>
<h1><font size="6">おっすおら悟空</font></h1>
<h1><font size="7">おっすおら悟空</font></h1>

と、全く同じ意味ですが、このように 7行書かなくてはいけない手間が、php のプログラミングで省けました。この場合は、上のように7行実際に書くことで html でも同じことができますが、もっと細かいことをやりたいとき、php でなければできないことも多々あります。


1, 2, 3, 4, 5, 6, 7 に当たる場所に、<?php echo $i; ?> が埋め込まれているのがわかりますね。for 文によって、$i が 1から7 まで順に繰り返され変化していきます。

php では、データベースを扱うことができますが、それとこの方法を組み合わせれば、たとえば表(<table> ~ </table> ) を動的に作ったりすることができ、様々なデータを扱うほかのいろいろなホームページは、そのようにして成り立っています。

さて、このような php プログラムを自分で書いても、そのままでは実行できません。
ブラウザは、html をそのまま表示するものなので、php の計算はしてはくれません。わかりますか?php の計算はサーバー側がやるものなのです。サーバーと同じものが、自分のパソコンの中にも必要なのです。そう、自分のパソコンをサーバーのようにしなくてはなりません。

無料で始める方法は無理のないように存在していて、apache というサーバーソフトを導入します(マイクロソフトのサーバーもあると思うのですがよく知りません)。また、php も導入します。さらに、MySQL というデータベースも導入します。多くの人がこの組み合わせを利用していて、問題はない感じです。

これに関しては、apache 、php、MySQL を調べてください。すべて入門からいろいろな手引きがネット上に存在しています。

ここではダウンロードのサイトだけ紹介しておきます。

Download apache
Download php
Download MySQL

※php には大きい潮流として、5 と 7 がありますが、レンタルサーバーが 7 に対応していれば問題ないです。レンタルサーバーと相談です。5 を入れておくと無難ですが、移行したりする場合面倒な事にもなるので 7 がサーバーで利用可能なら 7 かな。でも、とはいいつつ僕は 5 で始めて、いまも 5 だったかな…。


これら3つを統括してくれる xampp というものも存在してくれます。いろいろな設定を簡便に行うことができます。

また、作った phpで作ったホームページを公開する際には、サーバーにアップロードしますが、php を使うには、サーバーが phpに対応していないといけません。ホームページを公開する方法として普通、レンタルホームページ、レンタルサーバーの方法がありますが、php が使えるのは レンタルサーバーのほうだと思います。腕試しの場合はレンタルサーバーを利用できるでしょう。
php に対応しているのであれば、あとは、サーバーに配置するだけで、php は有効に働きます。

以上です。がむばれ!

エスケープツール

<html>
<input type="text" style="xxxxxxx">
<input type="ttt">

<button id="id_x">
</html>

みたいのを、

"<html>\n".
" <input type=\"text\" style=\"xxxxxxx\">\n".
" <input type=\"ttt\">\n".
"\n".
" <button id=\"id_x\">\n".
"</html>\n"

みたいに変換するツール。エスケープして、" で囲む。" は、 ' にも任意にも変更可能。. も + にしたりできる。


IE だと動かない。

開発用。

エスケープ文字をエスケープし、文字列形式にするツール。(説明しづらい)


HTML コード生成ツール

HTML 部品のコードを wysiwyg で自動で吐くアプリケーションを開発したので使ってみてください。あと、HTMLソースコードをそのまま表示させたいときのツール(下の、「ジェネレーターX(仮称)」の画面を開いた後右の "tagShow" リンクより)。

利用はここ(ジェネレーターX)から。

とりあえず一番上段から作りたいアイテムの種類を選択し、generate ボタンを押して一度生成してみて、感じをつかみとってください。

[説明]______________________

HTML タグジェネレータ

チェックボックスとラジオボタンの簡単操作でHTMLタグを生成します。

一番上がアイテムの種類です。選択後、その他オプションを好みで選択します。

name, value, width は値を入力できます。特に、name, value はエディットボックス内の値を変更すると、逆に入力欄に値が反映されるように作っています。遊び心を楽しんでください。(入力を反映するためにはチェックボタンにチェックする必要があります)

個数欄の数字を変更すると、個数分だけアイテムが生成されます。「連番を作成する」、にチェックを入れておくと、id が自動で連番出力されます。その隣の選択欄からは、<td> <li> <br> を選択できます。

また、アイテムを生成するだけでなく、エディットボックス内に一単位のスクリプトをコピーペーストするか書き込んで、そのid 値を連番で番号付けしながら複数倍のスクリプトに仕上げる機能があります。id="xyz" のように指定されている場合、xyz_1, xyz_2 …のように出力されます。また、単位スクリプト内で "xyz" として囲まれている他の部分がすべて xyz_1, xyz_2 …のように変換されます。(連番を作成する、にチェックが入っていることを確認してください)

その際、「自動認識」にチェックが入っていると、スクリプトのタグで閉じた部分を自動で検出します。しかし、自動認識機能は一番始めの閉じたタグを取得するため、スクリプトが複数のタグから成っている場合は、「自動認識」チェックを外します。全体としてタグが入れ子になり一つに閉じている場合は「自動認識」にチェックが入っていても問題ありません。


テキストボックスの内容をコピーするだけでも用は果たせると思いますが、generate することにより、実際のアイテムを表示させることができます。


その他、formタグ、tableタグ、ul li タグの入れ子、div タグを生成できます。

その下にあるのは、よく使うjavascriptやphpの述語で、長いのでスペルミスをする場合があると困るという場合のための自動出力です。

エディットボックスでは、やり直し(Undo)が使えます。



■ キーワード:「プログラミング」「html」「ツール」「tag」「ジェネレーター」

HTMLそのまま出力君

この前の記事で、HTMLのタグをそのまま表示するためのプログラム(Javascript) をのせましたが、使う人は完成品が欲しいと思うので、このリンク からアプリとして使って下さい。

< や、> を、そのまま出力するプログラムです。< や、 > をHTMLソースコード内にそのまま書いても表示されなくて困りますよね。

やっていることは、< を、&lt; に、> を &gt; に、あとは、& を、 &amp; に変換しているだけです。

あと、オンラインでコード変換するのはどうもなぁ、という人のために、HTML コードも載せておきます。

テキストファイルを開いて、下のコードをそのまままるごとコピペして保存して、拡張子を .html にすればOKです。ファイル名は(もち、拡張子を除いた部分の!)お好みで。

あと、実行時、この Web ページはスクリプトや Active X を実行しないように制限されています。みたいなのがでても、許可してOKです。僕が自分で使っているときも出るし、なんら悪さのないプログラムなので…。信用って大事!(涙)

tagShow_sjis.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style type="text/css">
body { font-size : 16px ;font-family:MS Pゴシック,Times New Roman;}
.txtarea {
margin-top:15px;
}
.s_1a { margin-top:15px; clear: both ;}
.s_1b { margin-top:15px; }
</style>

<title>HTMLそのまま出力アプリ</title>

<script type="text/javascript">


function tagShow( plain )
{ //escape encode という言葉は違うみたいだよ?

var s = "" ;
if( document.getElementById("id_pre").checked ) s += "<pre>\r\n" ;
if( document.getElementById("id_code").checked ) s += "<code>\r\n" ;

var c ;

for( var i = 0; i < plain.length ; i ++ )
{ c = plain.charAt(i) ;

switch( c) {
case "<" : s += "&lt;" ; break ;
case ">" : s += "&gt;" ; break ;
case "&" : s += "&amp;" ; break ;
//case "\"" : s += c ; break ;
//case "'" : s += c ; break ;
//case "\\" : s += c ; break ;
default : s += c ; break ;
}
}

if( document.getElementById("id_code").checked )
s += (( s.slice(-2) != "\r\n") ? "\r\n" : "" ) + "</code>" ;
if( document.getElementById("id_pre").checked )
s += (( s.slice(-2) != "\r\n") ? "\r\n" : "" ) + "</pre>" ;

return s ;
}

</script>

</head>
<body>

<div style="margin-top:100px;"><div><!--<a href="./generate_resource.html" style="float:right;">resourceGen</a>--></div>
<div id= "firstParent" align="center" style="margin:0 auto;width:875px;text-align:center;">
<!--<h3>括弧コード生成</h3>-->
<h3>HTMLそのまま出力</h3>
<div style="margin:0 auto;width:650px;">
<div id="container_1" style="margin-top:10px;text-align:left;">
出力したいコードを入力<br>
<textarea id="t_input" cols="60" rows="10" style="margin-top:3px;"></textarea><br>
<input type= "button" id="do_conv" value="GO !" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)" style="margin-top:5px;">

<input type= "button" value="クリア" onClick="document.getElementById('t_input').value ='';">
<input type= "checkbox" id="id_pre" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)"> &lt;pre&gt;
<input type= "checkbox" id="id_code" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)"> &lt;code&gt;

<div style="margin-top:30px;">↓↓↓<br>
<textarea id="t_output" style="" cols="60" rows="10" onFocus="this.select();"></textarea>

</div>

</div>
</div>
</div>
</div>
<br>
<p align="right">This application was created by Yutaka Kawasaki.</p>
</body>
</html>




Cofee Break ♪ (拙作:A song leading me to realization ) : 聴いてかネ?(ちゃんと休めよな)


(Javascriptの) 正規表現のちょっとした応用。

正規表現を使って、シングルクオテーション、ダブルクオテーションで囲まれた値を取得する関数を作ってみた。

文字列 「 var = "foo" ; 」

のようになっていた場合、変数var の値の文字列である、foo を得たいわけだ。

上記の例では、var の前に、空白があって、var の後ろにも、= の後ろにも不定数の空白がある(あってもよい)。こういう場合に正規表現を使うのがもともとの利用法だろう。

プログラミング上では、str = ' var = "foo" ; ' という設定だ。
(なお、この関数は厳格にしてないので、str = " var = 'foo' " ; のようにな場合も取得できてしまう。要は、シングルクォテーションもダブルクォテーションでもOKな関数)。


function getStringVal( s , key )
{ var ret = s ; var reg ;
var i = s.indexOf("'")
if( i != -1 && i < s.indexOf("\"" ))
reg = new RegExp( key + "[ \s\r\n\t\f]*?=[ \s\r\n\t\f]*?\'(.*?)\'" ) ;
else
reg = new RegExp( key + "[ \s\r\n\t\f]*?=[ \s\r\n\t\f]*?\"(.*?)\"" ) ;

// var reg = new RegExp( key + "[ \s\r\n\t\f]*?=[ \s\r\n\t\f]*?\"([a-zA-Z0-9_]*?)\"" ) ;
// ↑このようにした方が、得たいものがより具体的。間違いがない。

if( ret.match( reg ))
ret = ret.match(reg)[1] ;
// ret = ret.match(reg)[0].replace( reg , "$1" ) ;

else ret = "" ;

return ret ;
}



// str = ' var = "foo" ; ' ; // この str はたとえば、の場合。
v = getStringVal( str, 'var' ) ;

のように使う。

結果として、

v => foo

が得られるわけだ。この関数では、; は無視している。

match メソッドの使い方の参考にもなる。match メソッドでは、match(...)[0] にマッチした文字列、match(...)[1] に、取得したい値が入る。その取得したい値はどうやって設定するのかというと、正規表現の中で、"...(.*?)..." のように、かっこ () で囲めばいいのだ。括弧の中身に引っかかった「モノ」(検索に引っかかったもの)がmatch(...)[1] に格納される。() はいくつも作れるから、そして match(...)[2] , match(...)[3] .... に次々に格納されてゆくのだ。オー便利。(必要な人にはね)


replace をコメントアウトしてあるのは、はじめこの match(...)[1]の使い方をしらなくて、replace で $1 を使う方法だけを知っていたので、工夫して使っていた名残だ。知らないってこわぁい。


この関数を見ると、RegExp オブジェクトの利用価値がわかる。
/var[ \s\r\n]=[ \s\r\n] ...../ のようにスラッシュで囲んだ形の固定正規表現オブジェクトを使っている限りは、正規表現の中身を動的に変更することができないから、動的に、変数 「var」 の値を取得したい場合(変数名を自由に変えたい場合)に、困難が生じるからだ。


・・・・とはいえ、この関数がやっていることは、かなりコアなプログラマーが必要とするような内容だと思う。
僕は職業プログラマーではないのでわからないが、正式にはこの関数のやりたいことをやりたかったら、たぶんもっとブラッシュアップされ整備されたコードを書かなければいけないと思う。



さて、明日はHTMLタグをストリップする関数を作る。



プロフィール

Author:tsukikagejou

カテゴリ
最新記事
最新コメント
月別アーカイブ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
かうんた