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 に対するハンドラを記述するファイルなので細かい設定は下のページを参照