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

2011年8月2日火曜日

応答があるまで ping を繰り返すバッチファイル

実行方法

  • コマンドプロンプトから引数にホスト名か IP アドレスを指定する。
  • 名前がホスト名か IP アドレスのファイルをバッチファイルにドラッグする。
loop_ping_til_reply.cmd
@Echo Off
Rem (c) http://sofnote.blogspot.com/

Set WAITTIME=60
Set CMDNAME=%~nx0
Set TARGET=%~nx1
If Not "%TARGET%"=="" Goto ARGS_OK
  Echo.Usage:
  Echo.  %CMDNAME% (hostname ^| ip address)
  Echo.or
  Echo.  drag [(hostname ^| ip address)] file icon to [%CMDNAME%] icon.
  Goto ERROR
:ARGS_OK

Rem hostname check
Echo.executing: ping -n 1 %TARGET%...
Set LINES=0
For /F "tokens=*" %%i In ('ping -n 1 %TARGET%') Do Call :PING_ERR_CHECK ".%%i"
  If Not %LINES%==1 Goto HOSTNAME_OK
  Goto ERROR
:HOSTNAME_OK
If %LINES%==9 Goto SUCCESS
ping localhost -n %WAITTIME% > nul

:RETRY
  Echo.executing: ping -n 1 %TARGET%...
  ping  -n 1 %TARGET%
  if Not ERRORLEVEL 1 Goto PINGABLE
  ping localhost -n %WAITTIME% > nul
  Goto RETRY
:PINGABLE


:SUCCESS
Pause
Exit /b 0

:ERROR
Pause
Exit /b 1

Rem Return values:
Rem   LINES: number of line which ping result
:PING_ERR_CHECK
Setlocal ENABLEDELAYEDEXPANSION
  Set MSG=%1
  For /F "tokens=*" %%i In (!MSG!) Do Echo%%~i
Endlocal
Set /A LINES=%LINES%+1
Exit /b 0

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

2011年4月6日水曜日

Excel Viewer のコマンドラインオプション

xlview.exe [/e|(path名)]
  • /e [ファイルを開く] 画面を開かないで起動する。
  • 起動して(path名)のファイルを開く。

確認方法

下記コマンドを順番に実行。

コマンド プロンプト
C:\Program Files\Microsoft Office\Office12\>xlview.exe /a
  :
  :
C:\Program Files\Microsoft Office\Office12\>xlview.exe /z

確認環境

  • Microsoft Windows XP Professional Version 2002 Service Pack 3
  • Microsoft(r) Office Excel Viewer (12.0.6545.5000)

応用

Excel ファイルのパス名か、URL が書かれている一行のファイルを Drag and Drop すると Excel Viewer で開けるようなバッチファイルを書いてみる。

xlview.cmd
@Echo OFF

Set TARGET=%1
Set THISPATH=%0
Set THISFILE=%~n0%~x0
Set XLVIEW=C:\Program Files\Microsoft Office\Office12\xlview.exe

If x%TARGET%==x (
  Echo.
  Echo.Usage: %THISFILE% (file including target filepath or url^)
  Echo.
  Pause
  Exit
)


For /F "usebackq tokens=* eol=" %%i In (`"type %TARGET%"`) Do Set FILENAME=%%i
Echo %FILENAME%

start "" "%XLVIEW%" "%FILENAME%"

今のところ問題ないみたい。

2011年4月5日火曜日

Cygwin で rename コマンド

(2012.01.19)更新

rename
#!/bin/sh

if [ $# -lt 2 ]; then
  echo "USAGE: $0 /変更対象/変更後/ ファイル名展開のパターン文字列"
  exit 0
fi
RE="$1"
shift 1

# ファイル名が - で始まるとき ./ を先頭に挿入
# ファイル名内の ' を '\\\\'' でクォート
#   →sed('\\'') →mv('\'')
# ファイル名をホールドスペースへ保存
# ファイル名を ' でクォート
# パターンスペースとホールドスペースを交換
# ファイル名を正規表現で変換
# 変換したファイル名を ' でクォート
# 変換したファイル名をホールドスペースへ追記
# パターンスペースとホールドスペースを交換
# 改行をタブに変更してから
# xargs で mv へ送る
while [ $# -gt 0 ]; do
 echo "$1";
 shift 1
done | sed -e "
s/^-/.\/-/
s/'/'\\\\''/g
h
s/^/'/
s/$/'/
x
s$RE
s/^/'/
s/$/'/
H
x
s/\n/\t/
" | xargs -L 1 mv -v

(2011.04.05)

rename コマンドを実行したら "bash: rename: command not found"。cygwin.com のパッケージ検索ページでも見つからない。

Cygwin にはどうやら rename コマンドがないらしいので、下記ページを参考に sed ベースで書き換えてみる。

  • 【Linux Tips】 テキストファイルの一括置き換え/ファイル名の一括置き換え: 日々此精進
    → http://murakan.cocolog-nifty.com/blog/2009/11/linux-tips-5aa7.html
/bin/bash
$ /bin/ls -d ファイル名展開のパターン文字列 | sed -e '
s/ /\\ /g
h
s/変更対象/変更後/
x
G
s/\n/\t/
' | xargs -L 1 mv

ファイル名が .txt で終わるファイルの前に今日の日付を追加するなら、

/bin/bash
/bin/ls -d  *\.txt | sed -e "
s/ /\\ /g
h
s/^/$(date +"%y%m%d")-/
x
G
s/\n/\t/
" | xargs -L 1 mv

2011年3月10日木曜日

はてなブックマークが ajax に変更されている

Firefox で RequestPolicy を導入しているので、他のドメイン(st-hatena.com)にある JavaScript のコードから ajax でブックマークのエントリーを取得されても何も表示されなくてこまる。

Firebug の [接続タブ] で確認すると、どうやら次のような URL でブックマークのエントリーを取得しているらしい。

http://b.hatena.ne.jp/(Hatena ID)/fragment?tag=(Tag name)

直接アクセスしてみたら問題なく表示されたので、元のページからエントリーデータのページへ移動するブックマークレットを作ってひとまず回避。

bookmarklet
javascript:var a=/^(http:\/\/b\.hatena\.ne\.jp\/[^/]+\/)(.*)$/.exec(location.href);location.href=a[1]+'fragment'+((a[2]&&a[2]!='')?'?tag='+a[2].replace(/\/$/,'').split('/').join('&tag='):'');

2011.03.11 追記

ブックマークレットで移動した先のページを開いているときに st-hatena.ne.jp を RequestPolicy で許可したら Favicon がリピートして気持ち悪いことに。。。

Stylish で次の css を導入して解決。

Stylish
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("b.hatena.ne.jp") {
  h3.entry { background:no-repeat; padding-left: 20px; }
}

2011.04.11 追記

cookie を削除したら ajax を使わない元のはてなブックマークに復帰。
何かの弾み(何かクリック?)で ajax 機能のスイッチが入ってしまっていたみたい。

タグ一覧の右上にある [クラウド(or リスト)表示に切り替え] ボタンをクリックしていたら、 また ajax に。。。

b.hatena.ne.jp の Cookie を覗いてみると "fast" 項目が、値 "1" で追加されている。
どうやらこれが ajax 機能のスイッチみたい。

2011年3月4日金曜日

window.open() していたブックマークレットが新しいウィンドウで開かなくなった

いつもは新しいタブで開いて、ここぞという状況では新しいウィンドウで開いてくれていたのに、何かのきっかけで、すべて新しいタブで開くようになってしまった。 ※ 環境:Firefox 3.6.14/Windows XP

bookmarklet
javascript:void window.open(
 "about:blank"
, "_blank"
, "width=300,height=400,scrollbars=yes");

次のページの

「新しいウインドウではなく新しいタブで開く」の「注意」には、次のように書かれている。

注意: 一部の指定されたサイズでのみ正しく表示されるページのために、このオプション設定 が無視されることがあります。リンクを新しいタブに開くようにしていても、新しいウインドウのサイズがページ作者によって指定されていると、リンクが新しいウインドウで開かれます。

やっぱり、新しいウィンドウで開いてくれてもよさそうな感じの説明。

あれこれ検索していたら、次の記述を発見。

リンクが window.open の時、サイズ指定がある時はウインドウで開く 「browser.link.open_newwindow.restriction」を「2」にする。
  • (bowz.info) [ Firefox ] target="_blank" のリンクを現在のタブで開く方法 | Bowz::Notebook
    → http://bowz.info/817#extended

日本語で検索できるページを作ってくれている事に感謝しつつ browser.link.open_newwindow.restriction を検索

"about:config" で "browser.link.open_newwindow.restriction" を "2" へ設定して回復。

2011年2月23日水曜日

分単位で実行するための項目を crontab に追加

5分毎に /etc/cron.5minsly/* を root で実行する

/etc/crontab
 :
 :
*/5 * * * * root run-parts /etc/cron.5minsly
 :
 :

ディレクトリの作成とサービスの再起動

bash
# mkdir /etc/cron.5minsly
# service crond stop
# service crond start

tidy コマンドラインオプション(とりあえず用)

tidy -<charcode> -asxml -i -w 0 -o <output> <input>
  • -<charcode> { iso2022 | shiftjis | utf8 }
  • -asxml : convert html to xhtml
  • -w 0 : wrap なし
  • -o <output> : 出力ファイル
  • <input> : 入力ファイル

参照

ヘルプ

bash
$ tidy --help
tidy: file1 file2 ...
HTML 整形ユーティリティ
http://www.w3.org/People/Raggett/tidy/ を参照

tidy (1998 年 9 月 1 日版) のオプション
  -indent または -i  エレメントの内容をインデントする
  -omit   または -o  省略可能な終了タグを省く
  -wrap 72           テキストを 72 文字目で改行 (デフォルトは 68)
  -upper  または -u  タグを大文字にする
  -clean  または -c  font, nobr, center タグを削除
  -raw               128 以上の文字を出力時に変換しない
  -ascii             入力に Latin-1、出力に ASCII を使用
  -latin1            入出力に Latin-1 を使用
  -iso2022           入出力に ISO-2022 ベースのエンコードを使用
  -utf8              入出力に UTF-8 を使用
  -modify または -m  元のファイルを修正
  -errors または -e  エラー表示のみ
  -f <file>          エラーを <file> に出力
  -xml               入力が XML の場合に使用
  -asxml             HTML を XML に変換
  -help   または -h  オプション一覧
デフォルトでは入出力にそれぞれ標準入出力を使用
以下のように-f 以外の一文字オプションは組合せ可能:
   tidy -f errs.txt -imu foo.html

HTML に関する詳しい情報は "Raggett on HTML" 参照,
(c) 1998, Addison Wesley Longman, ISBN 0-201-17805-2

2011年2月21日月曜日

css で気をつけること - display:inline-block

メモ

  • Gecko 1.9(Firefox 3) からサポート。
    ※ 参照: (mozilla.org) display - MDC Doc Center
    → https://developer.mozilla.org/en/CSS/display
  • IE7 (以下?)は、インライン要素への適用をサポート(block 要素へ適用しても効かない)。
    ※ 確認 IE7/Windows XP
  • IE7 (以下?)は、ブロック要素へ display:inline;zoom:1; を適用することで代用。
    (yomotsu.net) 「書籍などに紹介されていない display : inline-block について」
    → http://www.understandard.net/css/css008.html
    ※ スタイルシートを使用しない方が読みやすいかも (2011.02.22 追記)
  • IE7 (以下?)で display:inline;zoom:1; を適用することで逆に起こる問題について。
    (webtech-walker.com)「hasLayoutプロパティがtrueで発生するバグ - Webtech Walker」
    → http://webtech-walker.com/archive/2007/11/27033016.html
    ※ (2011.02.22 追記)

検証用

iframe

iframe 文書の HTML

Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>display:inline-block</title>
 <style type="text/css">
  * { font-size:100%; }
  body { font-family:arial; sans-serif; }
  body>div { margin-bottom:0.5em; }
  .div, .span {
   display:inline-block;
   padding:0.2em 0.5em;
   border:solid 1px gray;
   font-weight:bold;
  }
  div.block { border:solid 1px gray; padding:1em; }
 </style>
 <!--[if lte ie 6]><style type="text/css">
  body div { margin-bottom:0.5em; }
  body * div { margin-bottom:0; }
 </style><![endif]-->
 <!--[if lte ie 7]><style type="text/css">
  .div, .span { vertical-align:middle; }
 </style><![endif]-->
</head>
<body>
 <h1>display:inline-block</h1>
 <div class="block">text element<div class="div">div style="display:inline-block;"</div>text element</div>
 <div class="block">text element<span class="span">span style="display:inline-block;"</span>text element</div>
</body>
</html>

XSLT - テンプレート

XSLT

Source
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="no"
  doctype-public="-//W3C//DTD XHTML 1.1//EN" 
  doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

<xsl:template match="/">
  <xsl:apply-templates select="html"/>
</xsl:template>

<xsl:template match="@*">
  <xsl:copy/>
</xsl:template>

<xsl:template match="node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>

Preview

iframe

XSLT Capsulized XHTML

XSLT でカプセル化した XHTML

source
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="#"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">
<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="yes"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template match="xsl:stylesheet">

<html xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xslt capsulized xhtml</title>
  <style type="text/css">
    /*@import url(style.css);*/
    body { font-family:arial, sans-serif; }
  </style>
</head>
<body>

<h1>xslt capsulized xhtml</h1>

</body>
</html>

</xsl:template>
</xsl:stylesheet>

Preview

iframe

XHTML 1.0 Strict - テンプレート

XHTML 1.0 Strict

source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>XHTML 1.0 Strict</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.0 Strict</h1>
</body>
</html>

Preview

iframe

XHTML 1.1 - テンプレート

XHTML 1.1

source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>XHTML 1.1</title>
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.1</h1>
</body>
</html>

Preview

iframe

2011年2月17日木曜日

a 要素を button 要素の代わりに使う

注意点

  • ポインターが a.button の上にあるときのセレクタ a.button:hover は効かないけれど a#button:hover は Ok
    ※ 確認: ie7, firefox3.6.13

検証

iframe

iframe の contentWindow.document

Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>a element button</title>
 <style id="button" type="text/css">
  a.button, span.button, #button, #class { display:inline-block; }
  .button a, a.button { text-decoration:none; }
  a.button span, span.button a { display:block; }
  a.button span, span.button a, a#button, a#class {
   font-size:80%;
   font-weight:bold;
   padding:0.2em 0.5em;
   cursor:default;

   border:solid 1px gray;
   background-color:#ccc;
   color:gray;
  }
  a.button span:hover, span.button a:hover, a#button:hover, a.button:hover {
   border-color:#444;
   background-color:white;
   color:black;
  }
 </style>
 <style type="text/css">
  body { font-family:arial,sans-serif; }
  h1 { font-size:100%; }
  ul li { margin-bottom:1px; }
 </style>
</head>
<body>
 <h1>a element button</h1>
 <ul>
  <li><span class="button"><a onclick="this.parentNode.parentNode.innerHTML+='!';">span.button&gt;a</a></span></li>
  <li><a class="button" onclick="this.parentNode.innerHTML+='!';"><span>a.button&gt;span</span></a></li>
  <li><a class="button" id="button" onclick="this.parentNode.innerHTML+='!';">a#button</a></li>
  <li><a class="button" id="class" onclick="this.parentNode.innerHTML+='!';">a.button</a></li>
 </ul>
</body>
</html>

2011年2月15日火曜日

ブックマックレット

RequestPolicy で google.com 検索結果のリンクからリダイレクトできないとき

  • javascript:var d=document,u=d.getElementsByTagName('noscript').item(0).innerHTML.split("'")[1];d.body.innerHTML='<p style="text-align:center;"><a href="'+u+'">'+u+'</a></p>';

2011年2月14日月曜日

css で注意すること

そのつど更新

display:inline-block は inline 要素なので、既定の vertical-align:baseline だと、要素の下のほうに英文字の g のように線がベースラインの下まで出るためのスペースが確保されるので vertical-align:top で対処する。

  • iframe
  • object

block 要素の中の block 要素を position:absolute や float:left すると親 block 要素の高さが 0 になるので、height を指定して対処する。