incl.js – 外部HTMLをインクルード

下のページを参考に、外部のHTMLファイルをインクルードするJavaScriptを書いた。

前回のtmpl.jsのzipに同梱した。

  • tmpl.zip (削除済み)

incl.jsは、というタグで指定したファイルを読み込む。

<include id='file.html'></include>
<a href="http://incl.js">http://incl.js</a>

ファイルが読み込まれた後は次のようになる。

<div id=''file''>file.htmlの内容</div>
<script type=''text/javascript'' src=''incl.js''></script>

家にWindowsがないのでMac OSX (Tiger)のSafari 3.2とFirefox 3でしか動作確認してない。Opera 9.6では、ローカルのファイルとして開いた時はうまくインクルードされなかった。

追記 (2009.03.29)

Firefoxなどで、ページが読み込み中のままになってしまうのは、ファイルの読み込み用に生成した iframe の削除を行っているところが原因のようだ(何故なのかはよくわからん)。31行目 removeChild のところを削除するかコメントアウトすれば回避できる(iframeは残るけどスタイルで非表示にしているので、ブラウザ上では見えない)。

追記 (2009.09.05)

33行目のevent listenerを削除するところで、存在しない関数を指定してたので修正(ぴんくだいずブログさんから指摘。ありがとうございます。)

 

Advertisements
incl.js – 外部HTMLをインクルード

tmpl.js – JavaScript テンプレートシステム

1つ前のエントリに書いた、すごく単純なテンプレートスクリプトにいくつか機能を追加した。

tmpl.zip (削除済み)

追加したのは、

  • 言語の指定ができるように(パラメータをlang=jaとすると、それ用の定義を使う)
  • HTMLに指定してないプレースホルダがあったときに警告する(パラメータにdebug=1をつける)

の2つ。すごくニッチな機能なので、自分以外にニーズがあるのかわからないけど。

tmpl.js – JavaScript テンプレートシステム

Damn Small JavaScript Template

I was thinking that it’s useful if there is a small template system which just replaces placeholder by certain strings. So I looked around some websites, but most of them are too much for it. I just want to use something when I customize a template for my own blog or website. So I don’t want ‘if’ or loop or some other functionalities on a template script.

RND looks much better for than others from my point of view. I modified this a little bit for my usage. Here is the code.

dst.js (template script)

var dst = function(placeholder) {
    var _render = function(str) {
        return str.replace(/{([A-Za-z0-9_.]+)}/g, function(mStr, $1){
            return placeholder[$1] || '';
        }); 
    };
    document.title = _render(document.title);
    document.body.innerHTML = _render(document.body.innerHTML);
};
window.onload = dst(placeholder);

placeholder.js (sample data file)

var placeholder = {
    title: 'sample doc title',
    h1: 'sample document title',
    h2: 'heading level 2',
    h3: 'heading level 3',
    p: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    ul: '<ul><li>List Item 1</li><li>List Item 2</li></ul>'
};

sample.html

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>dst.js Sample - {title}</title>
</head>
<body>
<h1>{h1}</h1>
<h2>{h2}</h2>
<p>{p}</p>
<h3>{h3}</h3>
<p>{p}</p>
{ul}

<a href="http://placeholder.js">http://placeholder.js</a>
<a href="http://dst.js">http://dst.js</a>

</body>
</html>
Damn Small JavaScript Template

Mac OSX にインストールしてるソフト 2008

ユーティリティー

  • StartupSound.prefPane – 起動時の音を鳴らさない
  • Quick Siliver – ランチャー。Extra Scriptsを有効にして、QS呼び出し -> ‘sh’ と打ってシャットダウンするのが楽
  • Witch – アクティブなウィンドウを切り替える。Windows の Alt + Tab と同じ
  • AntiRSI – 定期的にアラート。目を休めるために
  • ShowOff Widget – dashboard に uptime を表示
  • SIMBL – プラグイン用拡張機能?
  • Transmission – BitTorrentクライアント
  • The Unarchiver – 解凍ソフト

ブラウザ関連

Safari

  • SafariPlus – 指定の cookie 以外の cookie を全削除。ただこれを使うとうちの Safari (Tiger, PPC, Safari 3) が落ちる
  • SafariStand – いろいろ機能があって便利
  • GreaseKit – Greasemonkey のようなもの。そして oAutoPagerize

FireFox

その他のブラウザ

メディア(音楽、動画)関連

テキストエディタ

  • CotEditor – シンプルでよい
  • Smultron – HTML タグを閉じてくれる機能とか snippet とかが便利

携帯 (Softbank 705NK, Nokia N73)

N73関連記事: Softbank 705NK (Nokia N73)

Mac OSX にインストールしてるソフト 2008