2012-09-05 Wed
【280】ホームページで古いページを『過去ログフォルダ』に移動 (リンク切れ対策)
どうも。久し振りに JavaScript ネタ。
メインサイトでホームページを公開している人…けっこういると思う。自分もその一人なんだけど。
で、題名のとおり
ホームページで古いページを『過去ログフォルダ』に移動
…すると、リンク切れが発生し、修正するのが面倒くさい。こんな時、リンクの記述を JavaScript で書き込んでおくとラクだな、と。↓
// リンク・データ var mymy_data = [ { name:'14: circle', href:'./14-circle.html', line:'【円弧】真円、円弧を描く' }, { name:'15: circle0', href:'./15-circle0.html', line:'【円弧】真円、楕円、円弧を描く (昔の circle 文)' }, { name:'27: circle_p', href:'./27-circle_p.html', line:'【多角】円周上に点を打つ (点を結んで多角形を描く)' }, { name:'28: wipe_out', href:'./28-wipe_out.html', line:'【除去】描画範囲からはみ出た座標を拭き取る' }, { name:'30: rnd_p', href:'./30-rnd_p.html', line:'【点描】指定範囲内にランダムに点を打つ' } ]; // リンク生成 var num = mymy_data.length; for (var i=0; i<num; ++i) { var name = mymy_data[i].name; // 関数名 var line = mymy_data[i].line; // 説明文 var href = mymy_data[i].href; // url var link = '<a href="' + href + '">' + name + '</a><br>'; var str = '<div class="mymyleft">' + line + '</div>'; document.write(link + str); // 出力 }
これを仮に link.js として ./ (カレントディレクトリ) に html ファイルと一緒に放り込んでおく。で、html には(例えばサイドバーとかに)
<script type="text/javascript" src="./link.js"></script>
…という 1行を記述。こうしておくと、その html を別のディレクトリに移動すると、リンク切れのリンク自体が表示されなくなる。つまり『無かった事になる』ので、修正する必要もなくなる。これは便利だー。
JavaScript を覚えてしまうと、CGI が面倒くさく感じる。。。
Permalink | コメント(0) | トラックバック(0) | 00:00 
2012-05-03 Thu
【233】自作ブログパーツを作ってみた…
まず、
サンプル置場のツリー構造を変えました。 新サンプル置場：http://blue.zero.jp/foussin/cgi/src/ ブログパーツを作った。で、それを公開するとして、どこに置こうか…ここで 詰まってしまった。管理しやすい容れ物を作っておかないと、後がキツイぞ…。 このことである。 …で、その『容れ物』の型を決めることを最優先した。それ用に index_list.cgi という CGI を急遽『マルチバイト対応』に作り直した。 ファイルの分類を文字 コード別にフォルダを分ける…というのをヤメるためだった。 やっつけ仕事なので、改善の余地がたくさんあるコードだが、今は贅沢は言う まい。この件については、もう少し推敲して、改めて投稿するつもり。 さて、ブログパーツですが。サンキュー、メリル
●名前：名前はテキトーです。(サンキュー、メリル) thank-you-meryl.js_sjis.txt (sjis 版) thank-you-meryl.js_utf8.txt (utf8 版) thank-you-meryl.js_euc.txt (euc 版) ●置き場所(サンプル置場)： http://blue.zero.jp/foussin/cgi/src/js/thank-you-meryl/ (sjis版、utf8版、euc版、全部ここに置いてあります) ●対応状況： ・はてなダイアリー ←(現時点では動作しない) ← たぶん無理… ・はてなブログ ←(想定どおりの動作を確認) ・アメーバ ←(動作はするが、レイアウトが崩れる) ・ヤプログ ←(想定どおりの動作を確認) のサイドバーに貼り付けて使う…予定だったんだけど、コードがデカ過ぎる らしくて、どのブログでも表示できなかった。がっかり。 そこで、このファイルを『 thank-you-meryl.js 』にリネームして、 さらにアップロード可能、アクセス可能な外部ストレージに置いて、 仮に、その場所を『 http://host/path/ 』と仮定すると… ブログの編集ページに、次のように記述する。↓
<script type="text/javascript"> <!-- /* 『ありがたい お言葉』『感謝の意』の【ユーザー設定】 * * はてなブログで使う ：var mymy_product = ''; * アメーバで使う ：var mymy_product = 'ameba'; * ヤプログで使う ：var mymy_product = 'yaplog'; * * メインサイトで使う場合：var mymy_product = ''; * (空文字列：自作 Web ページの場合) * * 上記いずれかの指定を『ブログで行う』 */ var mymy_product = ''; // --> </script> <script type="text/javascript" src="http://host/path/thank-you-meryl.js"></script>
…このようにしてブログから呼び出す仕様に変更した。 ●注意点：ブログサービスによって『文字コード』が違います。このファイルを 適切な文字コードに変換しないと『文字化け』します。ちなみに… はてなダイアリー .. euc ← 動作しないけど… はてなブログ ...... utf8 アメーバ .......... utf8 ヤプログ .......... sjis となっています。(一応 utf8 版と euc 版も用意しました) ●概要： ・『ありがたい お言葉』 ・『感謝の意』(上記と連動する) …の 2つのパーツで構成されています。 url を指定する使い方ではつまらない。これに自分なりのオリジナリティを 加えて、自分のブログに貼り付けた方が面白い。 そのため拡張子は .js で はなく js_.txt にした。つまり、改造して使う前提です。 ご自由に改造し てください。 あとで、これを使ったサンプルページを作って、サンプル置場に置いてみる。 今日は、ちょっと疲れたので、もうおしまい。
Permalink | コメント(0) | トラックバック(0) | 01:39 
2012-04-08 Sun
【223】JavaScript の予約語
【追記】04/08 Sun 20:29(明らかなバグを修正…)
04/08 23:50(記事も一部修正)
制作メモ
そうだ。予約語を表示してみよう、と思った。 js を覚えきれていない現状では、コーディング中によく手が止まる。 変数名 を決める時に、 これは予約語だっけ ? となるので。そこで 1. テキストボックスに 英字1文字 を入力すると、 その文字から始まる予約語を表示する。 2. テキストボックスに 英単語 (2文字以上)を入力すると、 その文字列が予約語にマッチするかどうかを調べる。 …というのを作ってみる(英字は大文字と小文字を区別する)。 予約語については、次のページを参考にしました。↓ http://www.ajaxtower.jp/js/ini/index5.html (AjaxTower - 予約語：buzzword 氏のページ) 上記の資料をまるごと変数 heredoc に格納した。 あとは入力単語と heredoc を照合する。さほど難しいことではないかと。実現するために必要なことは… ・入力文字列が何文字かを特定(単語 or 1文字) ・1文字ならば、その文字から始まる予約語を探し、配列 reserve に格納 ・具体的には、 /\s文字[a-zA-Z]+\s/gm にマッチする予約語を探す ・配列要素を sort() で並べ替え、join() で連結して表示 ・配列が null なら『"文字" から始まる予約語はありません』…となる・単語の場合は、 /単語/m にマッチする予約語があるかを探す・単語の場合は、 /\s単語\s/m にマッチする予約語があるかを探す ・マッチしたら 『"単語" は予約語です』 …となる ・マッチしなければ『"単語" は予約語ではありません』…となる Perl だったら、ここまで仕様が固まれば、もう出来たも同然なんだけど、js の場合、さらに html フォームとか、色々と面倒くさい… とまあ、こんな感じでやってみた。ソースは『サンプル置場』に http://blue.zero.jp/foussin/cgi/sjis-src/trial-run/js/reserved_words0.html .......... オリジナルreserved_words0_hatena.html ... はてなブログ用に書き直したものreserved_words1.html .......... オリジナル reserved_words1_hatena.html ... はてなブログ用に書き直したもの …を置いてある。今回のサンプルでは、正規表現、sort、join、innerHTML など、 js でよく使うと思われる構文を一通り試した。これでやっと『じゃじゃ馬 js 』 を乗りこなせた気がする。乗れただけで、走らすには至っていないが、コイツを 疾走させるのはプロに任せて、当方としてはのんびりゆったりと歩を進めたい。はてなブログでプチトラブル…
今回はちゃんと表示できた。フォームから起動させれば動くようだ。ブログの 記事の中で js を動かす場合、ヘッダではなく、ボディに記述することになる。 body 内では、html のレンダリングが終わるまで待つ…ということができないの で、js コードを最後に記述する。これで良いみたい。 しかし、ちょっとしたトラブルが発生した。前回に投稿した時計の時刻が、今 回の記事のテキスト窓に表示されてしまった。 JavaScript の時計は、こんなソースだった。↓
<FORM METHOD="post"> ただいま<INPUT NAME="watch" SIZE=15>です。 </FORM> <SCRIPT LANGUAGE="JavaScript"> function watch() { now = new Date(); : : (中略) : document.forms[0].elements[0].value = hour+":"+min+":"+sec; setTimeout('watch()', 999); // 1000msec = 1sec } watch(); </SCRIPT>
これは、とある有名な Webサイトからコピペしただけのものなんだけど、今回 これが問題なのは、 『名無しの <form> 』を使っている 『document.forms[0].elements[0].value』…抽象的に指定している …ここが問題だった。で、次のように修正した。↓
<form method="post" name="fwatch"> ただいま<input type="text" name="iwatch" size="15" />です。 </form> <script type="text/javascript">// <
2012-04-06 Fri
【222】 正規表現
…といえば、Perl のお家芸。
my $pattern = "abc";
my $bool;
($str =~ /$pattern/) && ($bool = "true"); # マッチすれば真
これを JavaScript でやるには、こうするらしい。↓
var pattern = "abc";
var bool;
var pat = new RegExp(pattern); // パターンオブジェクトを作る
str.match(pat) && (bool = "true");
正規表現の記述自体は、だいたい Perl と同じみたいなので、詳細は省く。Perl
をやってて良かった。。。
文字列が "abc" にマッチすれば真(true)。↓
xyz => false
cdef => false
xyzabcd => true
foo => false
これのソース。↓
<pre>
<script type="text/javascript">
<!--
var pattern = "abc";
var re = new RegExp(pattern);
var bool = "";
var str = ["xyz", "cdef", "xyzabcd", "foo"];
var num = str.length;
for (var i=0; i<num; ++i) {
bool = "false";
str[i].match(re) && (bool = "true");
document.writeln(str[i] + "\t => " + bool);
}
// -->
</script>
</pre>
…ブログで JavaScript のソースや実行結果を掲載するのは、正直ちょっと面倒。
そこで、メインサイトに『サンプル置場』を作った。興味があったらどうぞ。
サンプル置場(JavaScript)：
http://blue.zero.jp/foussin/cgi/sjis-src/trial-run/js/
パターンマッチを使ったサンプルを追加(2つ)：
reg-exp.html
money-changing2.html
今回はここまで。
Permalink | コメント(0) | トラックバック(0) | 03:18 
2012-04-05 Thu
【221】間に合わんかった…(jsネタ)
昨日は 4月4日(水)。3月3日(雛祭)と5月5日(こどもの日)の間をとって『オカマ の日』とか。すっかり忘れていたがゾロ目の日だ。ブログを投稿する日だった。 実は、相変わらず JavaScript をいじっている。JavaScript を使ってローカル アプリを作るのはキビシイ事が分かってしまったが、それでも JavaScript には 利用価値がある。 例えば、今まで『表計算』で雛形を作って、それに CSV データを流し込んで、 仕事用の文書を作ったりしていたが、こういう作業の大部分が JavaScript で代 用できるな、と。。。 苦労してエクセル関数を使いこなすより、プログラミング言語 JavaScript を 使った方が、よりキメ細かい処理が自在に記述できる。 そんな訳でさっきまで、自分の仕事で使えそうな JavaScript コードを書いて いたんだけど、それを素のまま公開するのはちょっとマズイ。企業情報、個人情 報等が含まれているので…公開するなら、ちゃんと抽象化しないと。 代わりに、簡単な何かを書いてお茶を濁すことにした。 あと、JavaScript のトライアルな記事を書くなら、はてダよりはてなブログの 方が適している…と思ったんだけど、どうもうまくいかない。 何度も編集し直し て試したんだけど、結局削除した。。。 今回は…金種計算のサンプル(JavaScript)
複雑なことはまだ覚えてないので、 document.write() を羅列しているだけ…。 給料は、ほとんどの人が銀行振り込みだと思うので、金種計算なんて今さらな 気もするが、週払い・現金払いの前提で…。 で、メインサイトにサンプルページとして置いときました。↓ http://blue.zero.jp/foussin/cgi/src/example/js/money-changing3.html url で察しがつくと思うけど、文字コードは sjis です。
Permalink | コメント(0) | トラックバック(0) | 06:43 
