2010年9月26日日曜日

JavaScriptで使うグローバルな名前を減らす方法 - Blogger

Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
グローバルな名前を減らすと、JavaScriptを含む記事を並べて表示した時に、名前が重なり難くなります。
このブログで使っているのは、3つの方法です。

o ローカル変数を使う方法
o 一時的に使う変数や関数を、名前の無い関数の中に閉じ込める方法
o グローバル変数を1つだけ公開して、外から使いたい関数や変数をグローバル変数のプロパティにする方法


**** 手順
** ローカル変数を使う方法
o JavaScriptにおけるローカル変数とは、関数の中でのみ有効な変数の事です。
o 関数の引数(functionの直後にある丸括弧の中に書いた変数)の名前は、何も書かなくてもローカルになります。
o また、関数の中で変数を初めて使う場所で、「var 変数名; 」もしくは、「var 変数名 = 」の形で書くと、その変数名もローカルになります。
--------
<script type="text/javascript">
//<![CDATA[
<!--
function f(name) {
  var d = document;
  for (var i = 1; i <= 3; ++i) {     d.writeln("ミクさんが" + i + "人<\/br>");
    d.writeln( name +"さんが" + i + "人<\/br>");
  }
}

f("ネギ");
//-->
//]]>
</script>
--------

o この場合、変数 name, d, i は、関数 f の外から見えません。


** 一時的に使う変数や関数を、名前の無い関数の中に閉じ込める方法
o そして、中で使う変数には varを付けて、ローカル変数化します。
--------
<script type="text/javascript">
//<![CDATA[
<!--
(function(){
  var v = new Date();
  document.write("今日は" +v.getDate() + "日です。");
})()
//-->
//]]>
</script>
--------

o この場合、変数 v は無名関数の外から見えません。
o documentは、ブラウザーが用意しているグローバルな名前です。


** グローバル変数を1つだけ公開して、外から使いたい関数や変数をグローバル変数のプロパティにする方法
o ページ毎にキーワードを決めます。この例のキーワードは、MikuSan です。
o グローバル変数の名前を「MikuSan」、操作したいspanタグのidを「MikuSan_name」にする事で、他ページからの干渉を防ぎます。
--------
<script type="text/javascript">
//<![CDATA[
<!--
var MikuSan = new (function() {
  var $ = function(v) {
    return document.getElementById("MikuSan_" + v);
  }
  this.setSpan = function(span_id, message) {
    $(span_id).innerHTML = message;
  return true;
  }
})();
//-->
//]]>
</script>
<form>
<input type="button" value="挨拶ボタン" onclick="return MikuSan.setSpan('name', 'こんにちは、ミクさん。');">
<span id="MikuSan_name"></span>
</form>
--------

o この場合、var を使って宣言したローカル変数 $は、関数 f の外から見えません。
o 関数 f の外から見えるのは、this. を使って宣言したプロパティ setSpan です。
o 変数 MikuSan はグローバル変数です。関数の外で var を付けているからです。


**** メモ
o グローバルな名前を減らす利点については「ブログの本文にJavaScriptを書く時の注意点」をどうぞ。
o 上の書き方は一例です。JavaScriptは表現の幅が広い言語ですから、自分の好みの書き方で実現します。


==
関連ページ:
    ▼Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
    ▼Blogger
    ▼制作メモ
    > HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
    HTMLモード。特定ページのサイドバーが下にずれる時の確認点
    +
    ブログの本文にJavaScriptを書く時の注意点
(2010年9月26日変更。プロパティにする例について単純化と説明追加)

ブログの本文にJavaScriptを書く時の注意点 - Blogger

Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
ブログの本文でJavaScriptを使う時、ホームページやWikiには無い注意点が1つあります。
それは、ブログには、記事本文を上下に並べて表示する機能がある事です。

複数のページで同じ名前のグローバル関数や変数やidを使っていると、記事を並べて表示した時に名前の衝突が起こります。
ですから、ブログの複数のページでJavaScriptを使う時は、名前の付け方などを工夫するなどして、問題が起こらないようにします。


**** 工夫の色々
o グローバルな名前を極力減らします。
   + グローバルな名前 = 他のページと並べて表示した時に、他のページから見える名前の事です。
   + このブログで使っている方法は、次の3つです。
      + ローカル変数を使う方法
      + 一時的に使う変数や関数を、名前の無い関数の中に閉じ込める方法
      + グローバル変数を1つだけ公開して、外から操作したい関数や変数をグローバル変数のプロパティにする方法
   + 詳しくは「JavaScriptで使うグローバルな名前を減らす方法
o ページ毎にキーワードを決めて、そのページで使う全てのグローバルな名前の先頭に、キーワードを付けます。
o 多くのページで使う便利な関数は、Bloggerのテンプレートに記述してしまうか、外部ファイルにして呼び出す方法が便利です。
   + 理由は、関数の内容を修正したくなった時に 1箇所だけ直せば済むからです。
   + 外部ファイルにする場合は、ブログの管理は少し面倒になります。
   + ブログ以外の場所にJavaScriptファイルを置きますので、Bloggerのバックアップ対象になりません。

o なお、同じ名前の関数が重複していても、問題ない場合もあります。
   + 内容が全く同じで、複数のページに置いても干渉しない作りになっている場合です。


==
関連ページ:
    ▼Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
    ▼Blogger
    ▼制作メモ
    > JavaScriptで使うグローバルな名前を減らす方法
    HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
    HTMLモード。特定ページのサイドバーが下にずれる時の確認点
(2010年12月29日変更。JavaScriptは、Bloggerのテンプレートに記述する事も可能)

ブログの本文にJavaScriptを書く方法 - Blogger

Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
Bloggerは、本文中にJavaScriptを埋め込む事も出来ます。

o 「HTML」モードに切り替えてから入力します。
o scriptタグの内容をコメントで囲みます。


**** 手順
** 「HTML」モードに切り替えます。
o 本文入力欄の左上にある「HTML」ボタンをクリックします。
    + 有効になると、「HTML」ボタンの背景色が少し暗くなります。
o 右側にある「投稿の設定」欄の「オプション」は、必要に応じて切り替えます。
    + to_dkで使っている設定は、「HTMLコードを表示」と「「Enter」キーを押して改行」

** scriptタグを書き、その中にHTMLコメントを入れます。
o Bloggerで文法エラーにならない、最低限の書き方
--------
<script type="text/javascript">
<!--
document.write("おはようございます。ミクさん");
//-->
</script>
--------

o コメント「<!--」「//-->」で囲まない場合、スクリプトの中で大なり記号や小なり記号を使った時に、Bloggerが文法エラーと判定します。

o XHTMLの仕様に極力合わせた書き方
--------
<script type="text/javascript">
//<![CDATA[
<!--
document.write("おはようございます。ミクさん");
//-->
//]]>
</script>
--------

o 将来的に、上の書き方よりも長持ちすると思われる書き方です。
    + と言っても、書く文字が多いですので、上の書き方の方が長生きするかもしれません。
o 追加したのは2行。「//<![CDATA[」と「//]]>」の行です。
o XHTMLの仕様では最初の //も余分です。でも、//が無いと実際に表示する時に問題が起こります。


**** メモ
o XHTML仕様に極力準拠する為には、もう一工夫必要になります。
o JavaScriptで「</」が出てくる所は、全部「<\/」に書き直す必要があります。
   + 「誰ですか、手間を増やす規則を作ったのは。」と言いたい所ですが、XHTMLの仕様を決めた人達は、書き易さよりもブラウザーの作り易さを優先したみたいです。

o この他、ブログ特有の注意点として、記事の一覧表示対応があります。
   + 複数のページに JavaScriptを書く時は、同じ名前を使っていると重なる事があります。
   + 必要に応じて、重ねない工夫をします


==
関連ページ:
    ▼Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
    ▼Blogger
    ▼制作メモ
    > ブログの本文にJavaScriptを書く時の注意点
    JavaScriptで使うグローバルな名前を減らす方法
    HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
    +
    HTMLモード。特定ページのサイドバーが下にずれる時の確認点
(2012年5月7日変更。新デザイン対応)

AWKプログラムで使用可能な特殊ファイル名。標準入力、標準出力、標準エラー出力など - AWK

AWKの入出力とコマンド実行機能
getlineprintで標準入力や標準出力を使いたくなった時、特殊なファイル名を使用する事が出来ます。

o /dev/stdin -- 標準入力(= mawk不可)
o /dev/stdout -- 標準出力
o /dev/stderr -- 標準エラー出力

この他、Gawkでは、次の特殊ファイル名も使用できます。
o /dev/null -- 出力しない
o /dev/pid -- プロセスID(非推奨。Gawkでは変数 PROCINFO["pid"]の使用を推奨しています)

**** 使用例
--------
BEGIN {
  print "ミクさんの髪飾りは四角形" > "/dev/stderr";
}
--------


特別なファイル名の一覧
名前Gawk on Windows 3.1.7Gawk for Windows 3.1.6mawk32 1.3.3Mawk for Windows 1.3.3awk (May 1, 2007)説明
入力  
/dev/stdin××標準入力 = コマンドプロンプト画面からの読み込み
/dev/fd/0×××標準入力。/dev/stdin と同じです
出力  
/dev/stdout標準出力 = コマンドプロンプト画面への書き出し
/dev/stderr標準エラー出力 = コマンドプロンプト画面への書き出しその2
/dev/null×××どこにも出力しない
/dev/fd/1×××標準出力。/dev/stdout と同じです
/dev/fd/2×××標準エラー出力。/dev/stderr と同じです
/dev/tty×××××現在表示中のコマンドプロンプト画面に出力。バックグラウンドで使用不可
入力。プロセス情報など取得(非推奨) 
/dev/pid×××自分のプロセスID。変数「PROCINFO」の使用を推奨
/dev/ppid×××××親プロセスのID。変数「PROCINFO」の使用を推奨
/dev/pgrpid×××××自分のプロセスのグループID。変数「PROCINFO」の使用を推奨
/dev/user×××××1行にユーザーIDなど4情報。$1 = uid / $2 = euid / $3 = gid / $4 = egid。変数「PROCINFO」の使用を推奨
o この他に、「/inet/」から始まるインターネット接続用文字列があります。
    詳しくは「/inet = AWKからインターネットにアクセスする方法」(Gawk専用)


==
関連ページ:
    ▼AWKの入出力関数とコマンド実行機能▼ABC順
    ▼AWKプログラムを書く▼ABC順
    ▼AWK
    ▼制作メモ
    > ▼AWKのインターネット接続機能(Gawk専用)
    /dev/stderr = 標準エラー出力を示すファイル名
    PROCINFO = AWKのプロセスに関する情報。プロセスIDなど(Gawk専用)