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

エスケープツール

<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タグをストリップする関数を作る。



HTML をそのまま表示するプログラム

「<」 「>」 を含んだテキストを表示しようとすると???うまくいかない。

<span>こうやって<span></span>ごとだしたい</span>

のに、

こうやってごとだしたい

しか表示されない。

ので、
プログラムを作りました。

完成品はここ。利用も可能

javascript です。あまり細かいことは考えていません。なので、対応できない場合もあるかもしれませんが。


function tagShowHTML( plain )
{
var s = "<pre>\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 ;
default : s += c ; break ;
}
}

s += "\r\n</pre>\r\n" ;
return s ;
}


この関数で、例えば、

<div id= "firstParent" align="center" style="margin:0 auto;width:875px;text-align:center;">

を変換すると、

<pre>
&lt;div id= "firstParent" align="center" style="margin:0 auto;width:875px;text-align:center;"&gt;
</pre>

という結果が得られます。
これをHTML内に記述すると晴れて、


<div id= "firstParent" align="center" style="margin:0 auto;width:875px;text-align:center;">

と表示されます。

<pre> と </pre> は、はずすと縁取りのテキストボックスみたいのがなくなって表示されるので、適宜はずしてください。それを .html ファイルの中に記述すればよいわけです。



どーもです。ちょっと寝起きしてから不満なことがあったので、腹いせに作っちゃいました。

あぁ、この関数は、HTML 内で javascript を書かないと使えないから、HTML を書かなことには意味がありません。
だから、HTML を書いて、テキストボックス <textarea id=... cols=... rows=... ... ></textarea> みたいなのを張り付けて、
自分用のHTMLアプリでも開発するくらいの感じで利用しないと、他に用途はないと思います。

textarea の文字を取得したりセットしたりするには、

document.getElementById('なんとか(id名)').value を(とかを)用います。getElementsByName でもできます。

document.getElementById('なんとか(id名)').value = "セットしたい文字" ; とか、
document.getElementById('なんとか(id名)').innerText = "セットしたい文字" ; でもいけます。