2012年1月12日木曜日

Blogger で JavaScript(4) - script type="text/html" を iframe へ変換

(2012.02.06)更新

  • .createElement() した div を .inertBefore() しないで、直接 div.innerHTML = "<iframe ..." して iframe を DOM Tree へ .insertBefore()
    ※ IE6 だとうまくいかなかったような気がするけれど無視。
  • title 属性を json 形式で iframe の属性に展開するようにコードを追加
    title="'id':'test', 'style':'display:block;width:100%;'" と書けば
    <iframe id="test" style="display:block;width:100%;" のように .setAttribute() される
  • iframe コンテンツの height を iframe の height に設定することでスクロールバーが出ないようにコードを追加
JavaScript Source
<script></script>

(2012.01.17)更新

  • Global 変数を使わないように関数化
  • return で深くなったブロック階層を解消
JavaScript Source
<script></script>

(2012.01.12)

JavaScript Source
<script type="text/javascript">
    var nodes = document.getElementsByTagName("script");
    for (var i=0; i<nodes.length; i++) {
      var script = nodes.item(i);
      if (script.getAttribute("type") == "text/html") {
        var div = document.createElement("div");
        script.parentNode.insertBefore(div, script);
        div.innerHTML = '<iframe frameborder="0"></iframe>'; // for IE7,IE8
        var iframe = div.firstChild;
        if (iframe) {
          script.parentNode.replaceChild(iframe, div);
          var doc = iframe.contentDocument || iframe.contentWindow.document;
          if (doc) {
            doc.open();
            doc.write(script.innerHTML);
            doc.close();
          }
        }
      }
    }
</script>
HTML Source
<script type="text/html">
</script><!-- type="text/html" -->
Result

確認

OS
Windows XP Professional Service Pack 3
Web Brower
Internet Explorer 8
Firefox 9.0.1

Blogger で JavaScript(3) - <![CDATA[ の代わりに script type="text/plain"

タグやソースコードの中の <, &, > をエスケープするのは大変だし、HTMLソースの見通しが悪くなるので、JavaScript で何とかしてみる。

JavaScript Source
<script type='text/javascript'>
  var nodes = document.getElementsByTagName('script');
  for (var i=0; i<nodes.length; i++) {
    var script = nodes.item(i);
    if (script.getAttribute("type") == "text/plain") {
      var text= document.createTextNode(script.innerHTML);
      script.parentNode.insertBefore(text, script);
    }
  }
</script>
HTML Source
<pre><script type="text/plain">普通のテキスト
<p>タグもそのまま</p>
<!-- コメントもそのまま --></script></pre>
Result

2011年12月1日木曜日

html コードとその結果を iframe に onload で表示するときの javascript

(2012.01.12)更新

↑こっちの方が楽なので↓は使わないことにする。

注)このブログ用テンプレート

  • dl>(dt,dd) を 2個対にして、div の中に入れる
  • HTML コードは dl.source>dd>pre>code の中に書く
  • 結果表示の iframe は dl.iframe>dd>iframe
  • dl.source と dl.iframe は、どちらが先でもよい
Template Code
<dl class="source">
  <dt>source</dt>
  <dd><pre><code>「&」「<」「>」をエスケープした HTML 文書</code></pre></dd>
</dl>
<dl class="iframe">
  <dt>iframe</dt>
  <dd><iframe src="about:blank" frameborder="0"
    onload="
var iframe = event.target || event.srcElement;
if (iframe.loaded) return; else iframe.loaded=true;
var doc = iframe.contentDocument || iframe.contentWindow.document;
var section = iframe.parentNode.parentNode.parentNode;

var nodes = section.getElementsByTagName('dl');
var source = null;
for (var i=0; i<nodes.length; i++) {
  var classname = nodes[i].getAttribute('class') || nodes[i].className;
  if (classname=='source') {
    source = nodes[i]; 
    break;
  }
}

var code = source.getElementsByTagName('code').item(0);
doc.open();
doc.write(code.firstChild.data);
doc.close();
    "></iframe>
  </dd>
</dl>

確認

Windows XP Service Pack 3 上の下記ブラウザ

  • Firefox 8.0
  • Google Chrome 15.0.874.121
  • Internet Explorer 7

2011年11月28日月曜日

HTML 4.01 Strict - Template

HTML 4.01 Strict

source

Preview

iframe

HTML 4.01 Transitional - Template

HTML 4.01 Transitional

source

Preview

iframe

2011年9月8日木曜日

Google App Engine はじめようかな? - Request Header の取得

ここで一つ疑問。

HTTP の Request Body は標準入力から取得できるとのことだけれど、HTTP の Request Header はどうやって取得するのだろう?

複数の python スクリプトに対応させる

その前に、現状 HTTP Request が helloworld.py にしかハンドリングされないので、
/py/(script name) で (script name).py が呼び出されるように app.yaml を変更してみる。

app.yaml
application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /py/(.*)
  script: \1.py

http://localhost:8080/py/helloworld でアクセスして、Hello, World! が表示されたからよいみたい。

疑問の解決に必要な知識

CGI 標準では、HTTP_ で始まる環境変数に設定されているはずなので、HTTP_ で始まる環境変数の内容を表示してみる。

HTTP_ で始まる環境変数を表示する

http_.py
import os

print 'Content-Type: text/plain'
print ''

for key, val in os.environ.iteritems():
    if (key[0:5]=="HTTP_"):
     print  key+": "+val

"http://localhost:8080/py/http_" でアクセスしてみると……

http://localhost:8080/py/http_
HTTP_ACCEPT_CHARSET: Shift_JIS,utf-8;q=0.7,*;q=0.7
HTTP_USER_AGENT: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
HTTP_CONNECTION: keep-alive
HTTP_HOST: localhost:8080
HTTP_CACHE_CONTROL: max-age=0
HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
HTTP_ACCEPT_LANGUAGE: ja,en-us;q=0.7,en;q=0.3

……うまくいった。

2011年9月6日火曜日

Google App Engine はじめようかな? - Hello, World!

Hello, World! を実行してみる。

簡単なリクエスト ハンドラの作成

helloworld という名前のディレクトリを作成します。アプリケーションのすべてのファイルは、このディレクトリに配置します。

Hello, World! - Google App Engine - Google Code

どこにだろう?
とりあえずデスクトップに作ってみる。

helloworld ディレクトリで、helloworld.py という名前のファイルを作成し、次のようなコンテンツを入れます。

print 'Content-Type: text/plain'
print ''
print 'Hello, world!'

Hello, World! - Google App Engine - Google Code

helloworld.py という名前で保存してみた。

設定ファイルの作成

App Engine アプリケーションには、app.yaml という名前の設定ファイルがあります。このファイルで最も重要なのは、どのハンドラ スクリプトをどの URL に対して使用するかが記述されていることです。

helloworld ディレクトリで、app.yaml という名前のファイルを作成し、次のようなコンテンツを入れます。

application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  script: helloworld.py

Hello, World! - Google App Engine - Google Code

app.yaml という名前で保存してみた。

アプリケーションのテスト

ハンドラ スクリプトと設定ファイルを使用して、各 URL にハンドラをマッピングすれば、アプリケーションは完成です。App Engine SDK に含まれる Web サーバーでこれをテストすることができます。

次のコマンドで helloworld ディレクトリまでのパスを指定し、Web サーバーを起動します。

google_appengine/dev_appserver.py helloworld/

Hello, World! - Google App Engine - Google Code

ここで helloworld フォルダを指定するのか……それなら C:\ に移動して……

Command Prompt
C:\helloworld>dir /b
app.yaml
helloworld.py

C:\helloworld>

…… PATH は通っているみたいだから……

Command Prompt
C:\helloworld>C:\helloworld>PATH
PATH=C:\WINDOWS\system32;C:\WINDOWS;C:\Program Files\Google\google_appengine\

C:\helloworld>dev_appserver.py .

……で、起動すると Warning とプロンプトが表示された。

Command Prompt
Warning: You are using a Python runtime (2.7) that is more recent than the produ
ction runtime environment (2.5). Your application may use features that are not
available in the production environment and may not work correctly when deployed
 to production.
INFO     2011-09-06 07:13:05,358 appengine_rpc.py:159] Server: appengine.google.
com
Allow dev_appserver to check for updates on startup? (Y/n):

Python が 2.5 じゃ無いから、実際の環境では使えない機能あって、正しく動作しないかもしれないということらしいけど、とりあえず [Enter] キー。

いろいろメッセージが表示されて、PIL モジュールが import できないとか出ているけど、ウェブサーバが起動できたようなので、

Command Prompt
 :
 :
 :
INFO     2011-09-06 07:48:14,937 dev_appserver_multiprocess.py:637] Running appl
ication helloworld on port 8080: http://localhost:8080

ウェブブラウザで http://localhost:8080/ にアクセスしてみると、 Hello, World と表示されたから、うまくいったみたい。

追加参照

app.yaml は、おもに URL に対するハンドラを記述するファイルなので細かい設定は下のページを参照

Google App Engine はじめようかな? - インストール

Google App Engine の 開発環境ページを見ると

Google App Engine 用の Python アプリケーションの開発とアップロードには、App Engine Python ソフトウェア開発キット(SDK)を使用します。

Python SDK には、App Engine 環境をシミュレートするための Web サーバー アプリケーションが用意されており、ローカルのデータストアや Google アカウントを利用できます。また App Engine API を使用することで、URL をフェッチしたり、メールをコンピュータから直接送信したりできます。Python SDK は、Python 2.5 がインストールされているすべてのコンピュータで動作します。Windows、Mac OS X、Linux 用に異なるバージョンが提供されています。

必要に応じて、Python の Web サイトから Python 2.5 をダウンロードしてインストールしてください。Mac OS X 10.5 Leopard には、Python 2.5 があらかじめインストールされています。

開発環境 - Google App Engine - Google Code

とのことなので、Python の Web サイトから Python 2.5 をダウンロードしようとしけれど Python 2.7 の .msi(Windows 用) ファイルしか置いていないようなので、だめもとで python-2.7.2.msi をダウンロードして……

…… Python のインストールはすんなりと完了。次は、Google App Engine SDK for Python(GoogleAppEngine-1.5.3.msi) をダウンロードして……

……インストールも完了。

[Run Launcher] とあるので、とりあえず起動してみると……

Warning: Prerequisites for App Engine development are missing!

A valid python binary must be available. In addition,
the App Engine SDK must be installed. Here are the current
values we found:

 python = None
 App Engine SDK root = C:\Program Files\Google\google_appengine

Please install the missing pieces and restart the launcher.
If these are installed but the Launcher failed to find them,
you can configure their location by editing Launcher preferences.

The Launcher preferences can be modified by selecting Edit > Preferences.

python が None だから path がわからなかったみたい。[Edit] > [Preferences] で設定を更新できるということらしい。

[OK] をクリックすると Warning 画面が閉じて [Google App Engine Launcher] が表示されたので [Edit] < [Preferences] で [Path Path:] に "C:\Python27\python.exe" を設定したら、一度閉じる。

もう一度 [Run Launcher] をクリックしてみたら Warning 画面が表示されないのでこれでいいみたい。

次は Hello, World!

Google App Engine はじめようかな?

ウェブアプリケーションが無料で作成できるということらしいので、有料のレンタルサーバ解約できるかな?と思って、はじめてみようと、とりあえず紹介のページをよんでみる。

Java と Python のどちらかを選べるみたいだけど、手軽さからするとスクリプト言語だし Python がよさそうかな?

全くしらない言語だから、まずは Python を覚えるところから。

ざっと「1. やる気を高めよう」~「8. エラーと例外」まで読んで、やる気が下がってきたからひとまず読書はここまでにして残りはあとで。

全く根拠はないけれど、なんとなく BASIC ににているかな?
なんだか懐かしい感じで親しみやすいきがする。

次は、Google App Engine の開発環境を導入してみてみる。

2011年8月15日月曜日

バッチファイルに潜む罠(4) - 改行を含む文字列の Echo その2

サーカムフレックス「^」で改行をエスケープした複数行の文字列の一行目を消そうとして More +1 したら、一行も出力されない。。。

Command Prompt
C:\>type newline.cmd
@Echo Off
Set STR=^

Some string including^

newline.
Setlocal ENABLEDELAYEDEXPANSION
Echo.!STR! | More +1
Endlocal

C:\>newline.cmd


C:\>

ファイルへリダイレクトして確認したら、サーカムフレックス「^」でエスケープした改行は CRLF ではなくて LF。。。

Set 変数 | (command) を使うと……

Command Prompt
C:\>type newline.cmd
@Echo Off
Set STR=^

Some string including^

newline.
Set STR | More +1

C:\>newline.cmd
Some string including
newline.


C:\>

……成功するから、ほかのコマンドにリダイレクトするときは、バッチファイルでも遅延評価を使わないで
Set 変数名 | (command)
がいいみたい。

バッチファイルに潜む罠(3) - 改行を含む文字列の Echo

改行を含んだ文字列を Echo するには、改行をサーカムフレックスで「^」でエスケープすればよくて、

Command Prompt
C:\>echo. Some string including^
More?
More? newline.
 Some string including
newline.

C:\>

Set コマンドもうまくいく。

Command Prompt
C:\>Set STR=Some string including^
More?
More? newline.

C:\>Set STR
STR=Some string including
newline.

C:\>

でも、Set した変数を Echo すると……

Command Prompt
C:\>Echo.%STR%
Some string including

C:\>

1行目しか表示されない。遅延評価じゃないから 1行目しか表示されないのは分かるけど、2行目の newline. がエラーにならないので、デバッグしにくい。

対処

バッチファイルなら遅延評価(!変数!)が使えるけれど……

Command Prompt
C:\>type newline.cmd
@Echo Off
Set STR=Some string including^

newline.
Setlocal ENABLEDELAYEDEXPANSION
Echo.!STR!
Endlocal

C:\>newline.cmd
Some string including
newline.

C:\>

……コマンドプロンプトでは Setlocal が使えない。

とりあえず 1行目に余分な改行を追加して、使うとき More +1 で 1行目を削除でしのぐ。

Command Prompt
C:\>Set STR=^
More?
More? Some string including^
More?
More? newline.

C:\>Set STR | More +1
Some string including
newline.


C:\>

続き

2011年8月14日日曜日

バッチファイルに潜む罠(2) - Call :(label) の出力を他のコマンドにリダイレクトすると失敗する。

ファイルへのリダイレクトは問題ないけど……

Command Prompt
C:\>dir /b *.txt
aaa.txt
bbb.txt
ccc.txt

C:\>type call2file.cmd
@Echo Off

Call :ECHO_ARGS %*> args.log
Exit /B 0

:ECHO_ARGS
For %%i In (%*) Do Echo.%%~i
Exit /B 0

C:\>call2file.cmd *.txt

C:\>type args.log
aaa.txt
bbb.txt
ccc.txt

C:\>

コマンドへリダイレクトすると……

Command Prompt
C:\>type call2cmd.cmd
@Echo Off

Call :ECHO_ARGS %*| More
Exit /B 0

:ECHO_ARGS
For %%i In (%*) Do Echo.%%~i
Exit /B 0

C:\>call2cmd.cmd
バッチ スクリプト外でバッチ ラベルを呼び出すことはできません。


C:\>

失敗。。。

対処

考え中……

バッチファイルに潜む罠(1) - シェルはファイル名展開してくれない。

Command Prompt
C:\>dir /b *.txt
aaa.txt
bbb.txt
ccc.txt

C:\>type expansion.cmd
@Echo.%*

C:\>expansion.cmd *.txt
*.txt

C:\>

対処

For 文のファイル名展開機能を使う

Command Prompt
C:\>type expansion.cmd
@For %%i In (%*) Do @Echo.%%i

C:\>expansion.cmd *.txt
aaa.txt
bbb.txt
ccc.txt

C:\>

2011年8月12日金曜日

バッチファイルで which コマンド

which.cmd
@Echo Off
If "%1"=="" (
  Echo.Usage: %~nx0 COMMAND
  Echo.Write the full path of COMMAND^(s^) to standard output.
  Exit /b 0
)

For %%i In (%PATHEXT%) Do Call :EXIST_THEN_ECHO %1%%i && Exit /b 0
Echo.%~nx0: no %1 in (%PATH%)
Exit /b 1

:EXIST_THEN_ECHO
If Not Exist "%~1\" If Exist "%~1" Echo..\%~1& Exit /b 0
If Not "%~$PATH:1"=="" Echo.%~$PATH:1& Exit /b 0
Exit /b 1

IE8 や Firefox3 などの data スキーマに対応しているブラウザなら

参照

  • help call

修正履歴

  • カレントフォルダを先に確認 (2011.08.15)
    :EXIST_THEN_ECHO
    If Not "%~$PATH:1"=="" Echo.%~$PATH:1& Exit /b 0
    If Not Exist "%~1\" If Exist "%~1" Echo..\%~1& Exit /b 0

    :EXIST_THEN_ECHO
    If Not Exist "%~1\" If Exist "%~1" Echo..\%~1& Exit /b 0
    If Not "%~$PATH:1"=="" Echo.%~$PATH:1& Exit /b 0

指定されたパスがフォルダか否か調べる(コマンドプロンプト/バッチファイル) - その 2

If Exist でパス名の最後に「\」をつける。

Command Prompt
C:\>type nul > file

C:\>mkdir folder

C:\>If Exist folder\ (Echo.Folder.) Else (Echo.Not folder.)
Folder.

C:\>If Exist file\ (Echo.Folder.) Else (Echo.Not folder.)
Not folder.

C:\>

確認

  • Windows XP Professional Service Pack 3

2011年8月11日木曜日

DIR コマンドのエラーメッセージの謎(コマンドプロンプト)

Command Prompt
C:\>dir /b -
ファイルが見つかりません

C:\>dir /b -\
指定されたファイルが見つかりません。

C:\>dir /b " "
ファイル名または拡張子が長すぎます。

C:\>

確認

  • Windows XP Professional Service Pack 3

内部コマンドのリスト(コマンドプロンプト)

コマンドプロンプトの内部コマンドのリストをウェブで探し出せなかったので作ってみる。

help コマンドからコマンドリストを得る。

Command Prompt
C:\>for /F "skip=1 tokens=1*" %i In ('help') Do @If Not "%j"=="" @Echo.%i

そのコマンドを C:\Windows フォルダから探して、なければ表示する。

internal_command.cmd
C:\>Cd \Windows
C:\Windows>For /F "skip=1 tokens=1*" %%i In ('help') Do @If Not "%%j"=="" @Dir /s /b %%i.com %%i.exe > nul 2>&1 || @Echo.%%i %%j
ASSOC ファイル拡張子の関連付けを表示または変更します。
BREAK 拡張 CTRL+C チェックを設定または解除します。
CALL バッチ ファイル中から、別のバッチ ファイルを呼び出します。
CD 現在のディレクトリを表示または変更します。
CHDIR 現在のディレクトリを表示または変更します。
CLS 画面を消去します。
COLOR コンソールの文字と背景の既定の色を設定します。
COPY 1 個以上のファイルを別の場所にコピーします。
DATE 日付を表示または変更します。
DEL 1 個以上のファイルを削除します。
DIR ディレクトリ中のファイルやサブディレクトリの一覧を表示します。
ECHO メッセージの表示、コマンド エコーのオン、オフの指定をします。
ENDLOCAL バッチ ファイルで、環境変数のローカライズを終了します。
ERASE 1 個以上のファイルを削除します。
EXIT CMD.EXE プログラム (コマンド インタープリタ) を終了します。
FOR 指定されたコマンドを、ファイルの集合の各ファイルに対して実行
FTYPE ファイル拡張子の関連付けで使われるファイル タイプを表示または変更
GOTO バッチ ファイル中で、ラベルで定義されている行へ Windows コマンド
IF バッチ ファイル中で、条件処理を実行します。
MD ディレクトリを作成します。
MKDIR ディレクトリを作成します。
MOVE 1 個以上のファイルをディレクトリから別のディレクトリに移動します。
PATH 実行可能ファイルの検索パスを表示または設定します。
PAUSE バッチ ファイルの処理を一時停止し、メッセージを表示します。
POPD 現在のディレクトリを PUSHD で保存したディレクトリに戻します。
PROMPT Windows コマンド プロンプトを変更します。
PUSHD 現在のディレクトリを保存して、変更します。
RD ディレクトリを削除します。
REM バッチ ファイルや CONFIG.SYS の中で、コメント (注釈) を記録します。
REN ファイルの名前を変更します。
RENAME ファイルの名前を変更します。
RMDIR ディレクトリを削除します。
SET Windows 環境変数を表示、設定、または削除します。
SETLOCAL バッチ ファイルで、環境変数のローカライズを開始します。
SHIFT バッチ ファイルで、置き換え可能パラメータの位置をシフトします。
START 別のウィンドウを起動して、指定したプログラムまたはコマンドを実行
TIME システム時刻を表示または変更します。
TITLE コマンド プロンプト ウィンドウのタイトルを設定します。
TYPE テキスト ファイルの内容を表示します。
VER Windows のバージョンを表示します。
VERIFY ファイルがディスクへ正しく書き込まれたかを照合するかどうか
Windows へ指定します。
VOL ディスクのボリューム ラベルとシリアル番号を表示します。

2011年8月9日火曜日

指定されたパスがフォルダか否か調べる(コマンドプロンプト/バッチファイル)

Command Prompt
C:\>Type nul>file

C:\>Mkdir folder

C:\>dir /ad file.txt>nul 2>&1 || Echo.file is not folder.
file is not folder.

C:\>dir /ad /b folder>nul 2>&1 && Echo.folder is folder.
folder is folder.

C:\>

続き

2011年8月8日月曜日

WScript でパスワードを入力させる

バッチファイルからパスワードを入力させる方法を探して PowerShell に行き着いたけれど、WScript でできる(※参照)みたいなので PowerShell はまたしばらくお休み。

コマンドプロンプト
C:\>type password.vbs
WScript.StdOut.Write "Password: "
strPassword = CreateObject("ScriptPW.Password").GetPassword()
WScript.Echo
WScript.Echo strPassword

C:\>CScript //Nologo password.vbs
Password:
password

C:\>

注意

[ScriptPW.Password] は Windows XP から。Windows 2000 は使用不可(※参照)。

確認

  • Windows XP Service Pack 3
  • Microsoft (R) Windows Script Host Version 5.7

参照

2011年8月4日木曜日

PowerShell メモ

  • コマンドプロンプト(or バッチファイル)からコマンドを指定して実行
    C:\> powershell -Command コマンド群
    ※ クォートやエスケープはいらない。
    ※ 複数のコマンドは ";" で分割
  • コマンドプロンプト(or バッチファイル)からスクリプトを呼び出す
    C:\> powershell -ExcecutionPolicy RemoteSigned -File スクリプト.ps1
  • パスワードを入力させる
    PS> $password = read-host Password -AsSecureString Password: 123456789 PS> $password System.Security.SecureString
    ※ 直接文字列は取得できない
  • [System.Security.SecureString] から文字列を取得する
    PS> $ptr = [Runtime.InteropServices.Marshal]::SecureStringToBSTR($password) PS> [Runtime.InteropServices.Marshal]::PtrToStringBSTR($ptr) 123456789

参照

  • ユーザに文字列を入力させる(1)/(2) - PowerShell Memo
    → http://d.hatena.ne.jp/newpops/20050922/p1
    → http://d.hatena.ne.jp/newpops/20050923/p1