appendChildに失敗する原因

Posted on 2007-08-14 by seckie

最近はJavaScriptをいじってるのが楽しくなってきたのでそんなネタでも。

ノードをDOMツリーに追加するappendChildメソッド。当然ですが、ノード以外のものを追加しようとするとエラーになってしまいます。

例えば文字列を追加しようとした場合、Firebugのコンソールではuncaught exception:…とかいうエラーが出ます。数行に渡って激しく怒られるため、最初は一体何事かと思いました。

Firebugコンソールのエラー表示: uncaught exception...

例えば<p id="result">appendChild</p>というp要素があってそこにappendChildしたいとすると…

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
result.appendChild(string); // ←stringは文字列なのでエラー
}

文字列を追加したい場合はcreateTextNodeメソッドを使って文字列をテキストノードに変換する、もしくは最初からcreateTextNodeを使って文字列ではなくテキストノードを作ってappendChildしなければなりません。これで1時間は悩みました・・・orz

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
var textNode = document.createTextNode(string);// テキストノードに変換
result.appendChild(textNode); // ←textNodeはテキストノードなので成功
}

innerHTMLを使えば文字列のまま扱えますが、追加される対象親ノードの中身が全部書き換えられてしまう点に注意。innerHTMLだと"追加"というより"書き換え"っていう感じですね。

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
result.innerHTML = string;
}

Continue reading →

WinXPローカルでXAMPPを使ってMovableTypeを動かす

Posted on 2007-06-04 by seckie

追記 – 2010-03-14

2010年3月時点では、この記事の情報は正確でなくなっている可能性があります。現在の情報で当記事を書き直しましたので、よろしければそちらをご覧ください。

ローカルでMTが動かしたくて数日格闘した結果、無事動かすことができました。せっかくなのでここにやり方をまとめます。

環境と準備

OSはWinXP SP2
XAMPPは2007年5月30日時点の最新版（version 1.6.2）
XAMPP Perlアドオンは2007年5月30日時点の最新版（version 5.8.8-2.2.4）
DBはMySQL
xamppをインストールするディレクトリはC:\xampp（デフォルトでそうなってる）

まずはXAMPPをダウンロード。ここでは[ベーシックパッケージ]のインストーラ版を使用。

それからPerlアドオンもダウンロードしておく。同ページからDL可能。ここではインストーラ版を使用。

ローカルでMTが動くまで

XAMPPのインスーラを実行。
インストールの途中apache、MySQLはサービスとしてインストールしておく（自動起動になる）。他の設定はここでは全てデフォルトに。C:\xamppにインストールされる。ファイルがそれなりに多いのでちょっぴり時間かかる。
Perlアドオンもインストール。インストール設定はデフォルトでOK。ファイルがそれなりに多いのでこちらちょっぴり時間がかかる。
Apacheの再起動（アドオンを有効にするため）
http://localhost/ にアクセスする。最初に言語選択画面が出るので「日本語」を選択。その後「XAMPP Windows版へようこそ Version 1.6.2 !」と表示された画面が出るはず。ステータスをチェック。
CGIファイルの関連付けを変える。
拡張子が「.cgi」のファイルを右クリック→プロパティ→プログラムの変更→参照ボタン→C:\xampp\perl\bin\perl.exeを選択してOK。
C:\xampp\apache\conf\http.confの設定。
エディタで開いて、372行目、#ScriptInterpreterSource registry の#を外す。これでファイルの関連付けに基づいてPerlのパスが処理されるようになる。保存してApachの再起動
DBの準備
http://localhost/phpmyadmin/にアクセス
「新規データベースを作成する」に「movabletype」（DB名）と入力して「作成」ボタンを押す
セキュリティ対策 (1)
- メニューの「特権」をクリックして「root」ユーザの「操作」のアイコンを押す
- 「パスワードを変更する」でパスワードを入力。「実行」ボタンを押す。するとphpMyAdminにアクセスできなくなる。
- C:\xampp\phpMyAdmin\config.inc.phpをエディタで開き、81行目のpasswordの値に先ほど設定したパスワードを入力して保存。するとphpMyAdminにアクセスできるようになる。（※ セキュリティ対策(3)を先に実施すればこの設定は不要…？）
セキュリティ対策(2)

C:\xampp\htdocsとC:\xampp\htdocs\xamppに.htaccessファイルを設置して、外部からのアクセスを遮断。

ファイルの内容は
```
order deny,allow
deny from all
allow from localhost
allow from 127.0.0.1
```
とかでいいはず。
よく分からない人は.htaccess Editorとかで作りましょう。かく言う私もよく分かっていません。ちなみに.htaccessファイルはBOM付きのUTF-8で作るとエラーになるので、Shift_JISとかで作っとくのが無難です。
セキュリティ対策(3)

C:\xampp\phpMyAdmin\config.inc.phpの68行目の値configを、httpかcookieに変更。 phpMyAdminにアクセスした時にユーザ名とパスワードを聞かれるようになる。ユーザ名はroot、パスワードはStep9で設定したもの。
MTをインストール
C:\xampp\htdocsにmtフォルダを作り、MTのファイルをコピー。 http://localhost/mt/でアクセスしてみる。 http://localhost/mt/mt-check.cgiを実行し、一番下の方に「準備が整いました（略）」と出ていればOK。
http://localhost/mt/mt.cgiにアクセスするとMTの設定ウィザードになる。（C:\xampp\htdocs\mt\mt-config.cgiをいじってもいいけど、こっちのが簡単）
1. ステップ1/3
  
  見つからないパッケージが一覧で出てくるが、今回は無視。使うならお好みで調べてみてくださいー。
  - Image::Magick　→　今回は無視。使うならお好みでー。
  - Crypt::DSA　→　今回は無視。使うならお好みでー。
  - DB_File　→　Berkley DBを使わないので必要ない。
  - DBIとDBD::Pg　→　PostgreSQLを使わないので必要ない。
2. ステップ2/3
  
  データベース　→　「MySQL Database」
  - データベース名　→　movabletype
  - ログイン名　→　root
  - パスワード　→　セキュリティ対策(1)か(3)で設定したパスワード。未設定なら空白。
  - データベースサーバー　→　localhost
  - データベースのポート　→　空白
  - データベースのソケット　→　空白
  「接続のテスト」ボタンを押す　→　「データベース設定を完了しました。次へボタンをクリックしてメールの設定をしてください。」と出たら「次へ」
3. ステップ3/3
  
  ここではしません。「次へ」。これで「mt-config.cgi」が生成される。
「Movable Type Publishing Platform 3.35の構成が終了しました。」と出る。「インストール」ボタンを押す。
あとはレンタルサーバーなどにインストールするのと同じように、ログイン名とかの設定をフツーにしていけばOK。

Continue reading →

アーカイブ一覧をJavaScriptで書き出すMTテンプレート

Posted on 2007-05-06 by seckie

エントリーを新規投稿する度に、全てのページにあるアーカイブ一覧やタグクラウドをいちいち再構築させるのはだるい、と思い JavaScript で書き出すことにしました。SSI や PHP でやった方がスマートだと思いますが、サーバーサイドはいまいちよく分からないので・・・という軟弱な理由で今回は不採用。

MT テンプレートにして自動更新されるようにしたので、せっかくだからテンプレートを公開してみます。恥ずかしいくらいシンプルなシロモノですけれども。

アーカイブ一覧を書き出す JavaScript のテンプレート（txt形式）

「月別アーカイブ」・「カテゴリーアーカイブ」・「直近の10記事」・「タグクラウド」を書き出す命令を function に突っ込んでいるだけです。書き出す XHTML も各項目が li 要素でマークアップされているだけのシンプルなリストです。実際にこのサイトでテンプレートから構築された後の JavaScript はこうなっています（他のスクリプトも多少混在してますが）。

XHTML 側では下記のように関数を呼んであげればいいだけ。

<script type="text/javascript">
recentEntries();
categoryArchives();
tagCloud();
monthlyArchives();
</script>

ただし、当然 JavaScript が無効な環境ではなんにも表示されなくなりますのでご注意を。JS オフな環境を考慮して、トップページのみはこの方式のインクルードを採用せず、普通に XHTML で書いてます。また JS オフだとその旨を通知するメッセージが出るようにしました。いずれも 2xup さんのアイデアを参考にさせていただきました。でも 2xup さんのスクリプトの方が100倍はカッコいいので、間違っても比較しないように。。

またデメリットとして、動的に書き出すコンテンツは静的なコンテンツより一般的に SEO が弱いと言われている点ですね。だから内部リンクは弱くなるのではないかなぁとか思います。施策したばかりなので、Google ウェブマスターツールなどで見ても、まだその影響は現れていないようですが。

Adobe Version Cue は使わないならオフっときましょう

Posted on 2007-04-25 by seckie

職場では Adobe CS2 を使っているわけですが、いつもタスクトレイに常駐しているこのアイコン、何だろうと思っていました。

しかも、タスクマネージャで見てみると、結構な量のメモリを使っていることがわかりました。73Mって・・・おいっ！

タスクマネージャでプロセスを見たところ

「VersionCueCS2Tray.exe」っていう方は、タスクトレイに常駐表示させていると出現するプロセスです。これでも微量ながらメモリ使ってますね。

一体これが何なのか Adobe のサイトで調べてみました。ほうほう、なるほどなるほど・・・少なくとも今の私の環境では必要なさそう。迷わずオフに・・・と。

この Version cue をもし使いこなしていない or 使う必要がないのであれば、迷わずオフにしてシステムメモリを節約することをお勧めします。

段組レイアウトのお約束：段組ボックスの底辺を揃える（揃っているように見せる）

Posted on 2007-04-03 by seckie

使い古されたネタで申し訳ないのですが、自分が復習するという意味も含め、CSSで段組レイアウトをする際のお約束をまとめてみることにしました。まず第一回は「段組ボックスの底辺を揃える（揃っているように見せる）」です。

以下の画像のような見た目の段組を、実現することを目標とします。

目標とする段組レイアウト図

普通に考えると、float を使って横に並べたボックス各々に border を適用したくなります。が、このやり方ですと各ボックスの内容量が異なる場合、各々の高さが異なってしまい、ボックスの底辺が揃わなくなります。このように。

各段組ボックスの底辺が揃わないの図

そこで、border を使わずに目標の見た目を実現します。

以下に示す方法は、例として2カラムの段組を取り上げていますが、3カラム以上の段組でも同じように利用することができます。ただし、横幅固定デザインでのみ有効です。リキッドレイアウトやエラスティックレイアウトでは手法を変えないと利用できません。

まず以下のような画像を作り、スライスを切ります。

作成する画像と、それにスライスを切った図

緑色の部分がスライスと思ってください。段組中段の部分を実現するためのスライスと、段組底辺を実現するためのスライスです。わかりやすいように高さ10ピクセル程度のスライスにしていますが、実際は中段部分は高さ1ピクセル、底辺は線の太さと同じで大丈夫です。

で、次のようなソースを書きます。あくまで一例です。

XHTMLのコード

<div id="container">
<div class="section" id="columnAlpha">
<h2>コラムA</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<div class="section" id="columnBeta">
<h2>コラムB</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<p id="containerBtm">&nbsp;</p>
</div>

CSSのコード

div#container {background:url(中段部分の画像.gif) repeat-y;}
div#columnAlpha {
float: left;
width: 162px;
border-top: 2px solid #339;
margin-right: 10px;
}
div#columnBeta {
float: left;
width: 162px;
border-top: 2px solid #339;
}
p#containerBtm {
clear: both;
height: 2px;
background: url(底辺部分の画像.gif) no-repeat bottom;
font-size: 2px;
line-height: 2px;
}

段組しているボックスには上辺のみ border を指定し、親のコンテナボックスに対して段組中段部分の画像をY軸リピートで指定します。そして、段組ボックスの直後に、底辺となる p#containerBtm を挿入し clear:both と、底辺部分の画像を背景に指定します。height と font-size、line-height の指定は、このボックスを底辺画像の高さピッタリにするためのものです。

p#containerBtm にあたるものは、clear ができてかつ底辺画像が表示できれば、なんでもいいです。底辺画像は背景ではなくて、img 要素で埋め込んでも構いませんし。p#containerBtm 自体入れたくない方は、コンテナdivをもうひとつ追加して、そちらに底辺画像を背景で指定＆ clearfix を使う、というやり方でもいいです。また、きちんと内容を持っているフッター的なボックスを持ってきてもいいでしょう。

以上のような方法で底辺を「揃っているように見せる」ことができます。（実際は揃ってないです）

JavaScriptを使って強引に揃えちゃったサイトを先日、はやしさんに教えていただきました。

オーケーズデリカ株式会社: お弁当

お弁当一覧のところです。なんとまあ・・・

なお、クロスブラウザな表示を実現する際に border は障害となる場合がありますので注意が必要です。この点は ADP: ピクセル単位で合わせるところではborderを使わない（IE7でも！）においてよくまとめられています。

段組ボックスでは上辺のみを表現し、親コンテナボックスで中段部分を表現するのがミソですね。この点を抑えて工夫すれば、リキッドレイアウトやエラスティックレイアウトにおいても実現する方法はありそうです。

追記 – 2010-03-14

環境と準備

ローカルでMTが動くまで

セキュリティ対策 (1)

セキュリティ対策(2)

セキュリティ対策(3)

ステップ1/3

ステップ2/3

ステップ3/3

XHTMLのコード

CSSのコード