OTCHY.NET

Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML

<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果

ヘッダA	ヘッダB	ヘッダC		ヘッダD	ヘッダE
		ヘッダ C-1	ヘッダ C-2
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ
データ	データ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ	データデータデータデータデータデータデータデータデータデータデータデータ

css のみを使って、ヘッダ / メニュー / フッタをスクロールしないように固定して疑似フレームを表現する手法は position: fixed による方法が広く知られています。
この方法は、手軽に疑似フレームを表現できる一方で、IE6 が対応していないという非常に残念な現実があり、対象ブラウザから IE6 を完全に外してしまえるような状況ならともかく、(特に仕事の上などでは) IE6 を対象から外せない事も多いので頭痛の種でした。

IE 独自拡張の expression を使って、fixed に近い状況を作り出す技が色々と開発されているのですが、どうも自分にしっくり来るものがありませんでした。
そこで、下記の条件を満たすやり方を開発したので公開します。

• IE6 標準準拠モードで動作させる
  IE 7 に関して、fixed を正しく動作させるために標準準拠に関しては重要な要件
• css ハックは使わない
  将来のブラウザのバージョンで異変が起きる可能性を排除
• メニューもフッタも固定する
  ヘッダだけの固定であればシンプルな実装が他にもある
• 無駄な HTML マークアップを追加しない
  HTML 自体は fixed 対応ブラウザのみの場合と同様
• 極力シンプルに記述できる
  冗長なコードを書いて無理矢理つじつまを合わせるような事はしない
• スクロール時に画面がちらつかない
  expression の使い方によってはダサイ見た目になってしまうのでそれを回避
• IE6 以外のブラウザに影響を与えない
  当然

論より証拠。まずはサンプルを見て下さい。
このページでは、ヘッダ / メニュー / フッタの 3 つがスクロールに対して固定されています。
fixed 対応ブラウザでは fixed で実現され、IE6 に関しては expression をちょっとだけ使っています。

まず、一般的な fixed 部分について簡単に解説します。

<div id="header">ヘッダ</div>
<div id="menu">メニュー</div>
<div id="contents">
START<br />
コンテンツ...<br />
END<br />
</div>
<div id="footer">フッタ</div>

HTML については、非常にシンプルです。
各部位ごとに異なる id を指定した div があるだけです。

css のうち装飾に関わる部分を除くとこんな感じです。

* {
	margin: 0;
	padding: 0;
}
#header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 24px;
	z-index: 3;
}
#menu {
	position: fixed;
	left: 0;
	top: 0;
	width: 150px;
	height: 100%;
	padding-top: 24px;
	z-index: 2;
}
#contents {
	padding: 24px 0 24px 150px;
	z-index: 1;
}
#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 24px;
	z-index: 3;
}

#header / #menu / #footer については、fixed で固定されています。
#menu / #contents では padding を指定する事で、重なってしまう部分が隠れないようにしてあります。
fixed 対応ブラウザであれば、これだけで疑似フレームの完成です。標準準拠モードになるよう、DOCTYPE を指定しているので、IE7 であっても同様に動作します。

続いて、IE6 向けの設定です。

<!--[if lt IE 7]>
<style>
#header, #footer, #menu {
	position: absolute;
}
#contents {
	overflow: auto;
	height: expression((document.documentElement.clientHeight - 48) + 'px');
}
#menu {
	height: expression((document.documentElement.clientHeight - 48) + 'px');
}
</style>
<![endif]-->

意外なほどシンプルではないでしょうか？これだけです。

<!–[if lt IE 7]> から始まる記述は IE 独自拡張の条件付きコメントで、IE 以外のブラウザでは完全に無視されます。
ここでは、IE 7 未満の IE を指定して専用の記述を読み込ませています。
どうせ IE に対してのみ動作を変えるのであれば、変に CSS ハックを使うよりよほどリスクが少なく確実な方法だと思います。

position: absolute; は、fixed に対応していない IE6 のために、設定を上書きしています。
css の設定は後勝ちなので、IE6 向けの設定は fixed 向けよりも後に書く必要があります。

#contens / #menu にある、expression がポイントです。
expression は、filter 関数などと同様の IE 独自拡張で、任意の JavaScript コードを使用して動的に css の値を指定する事が出来きるものです。

ここでは、#contents / #menu の高さを、ウィンドウ内部の高さからヘッダとフッタの分を引いた値に指定しています。
これにより「メニューとコンテンツ部分がウィンドウからはみ出ない」という状況が生まれ、実質的な疑似フレームになります。
また、expression 関数は、ウィンドウサイズが変更された際などにも自動的に再計算されます。

ヘッダとフッタの top や left を expression 関数で設定する手法も見かけたのですが、これだとスクロール時にちらつきが出るのでイマイチです。
この手法は、ウィンドウ自体がスクロールしないよう抑制し、コンテンツ部分のみを overflow: auto; でスクロールさせるという逆転の発想で実装されています。

ソースの全容はサンプルをダウンロードして確認して下さい。
また、実際に使用する時はもちろん、css を直接 HTML に書かず、外部ファイルに切り出した方がよいです。

ecoder って何？

ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」:phpspot開発日誌 で紹介されている、激しく便利そうなエディタです。
ブラウザ上から、こんな感じでサーバ上のファイルを直接編集することができます。

順に、HTML / CSS / JavaScript / PHP を編集している様子です。これらのファイルが、色分けされた状態でブラウザで編集できるなんて、よだれが止まりません。

そこで早速インストールしてみようとしたところ、まだベータ版ゆえか、公式ではいっさいドキュメントが用意されていなかったので、ソースを読みながらインストールした記録を公開することにしました。

対象者

• PHP の動作するサーバを使用できる
• Linux 設定について基本的な事を理解している or 自分で調べられる
• Apache の設定について基本的な事を理解している or 自分で調べられる

ファイルのダウンロードと展開

ecoder のウェブサイトから、tar.gz ファイルをダウンロードして、ecoder を配置したい場所に展開します。
現在の最新版 (ver 0.3.2) の直 DL は http://downloads.sourceforge.net/ecoder/ecoder_0.3.2.tar.gz?use_mirror=jaist&filesize=406946 ですが、まだベータ版の状態なので、インストール時点での最新版を調べて DL した方が良いです。

Windows で作業をする場合は、ブラウザから DL して展開したファイルに対して、後述の設定変更を行った後に、FTP なりでアップすると良いでしょう。
ここでは、Linux 上で作業を完結させるためのコマンドを掲載しておきます。
DL するパスとか展開するパスは、それぞれの環境に合わせて読み替えてください。

$ su -
# cd /usr/local/src/
# mkdir ecoder_0.3.2
# cd ecoder_0.3.2
# wget http://downloads.sourceforge.net/ecoder/ecoder_0.3.2.tar.gz?use_mirror=jaist&filesize=406946
# tar xfvz ecoder_0.3.2.tar.gz
# mv ecoder_0.3.2.tar.gz ../
# cd ../
# cp -a ecoder_0.3.2/ /var/www/www.otchy.net/himitsu
# cd /var/www/www.otchy.net/
# chown -R apache:apache himitsu/
# cd himitsu/
# find -type d -exec chmod 755 {} \;
# find -type f -exec chmod 644 {} \;

※最後の権限変更は、デフォルトの設定がいろいろと気持ち悪かったのでなおしました

設定ファイルの編集

ルートディレクトリ直下にある code.php というファイルに、正しい設定を書かないと ecoder は動作しません。といっても、必要な設定はすべてここにまとめられているので、さほど難しくはないかと思います。
以下では、修正が必要な項目について、本サイトの設定を例に順番に説明します。
まずは、大抵の場合で修正が必要な項目です。

動作させるサイトのドメイン。

$code['domain'] = "http://www.otchy.net/";

クッキーを適用するドメイン。

$code['domain_cookie'] = "www.otchy.net";

編集するファイルのルート。スラッシュから始まるフルパスで記述する。

$code['root'] = '/var/www/www.otchy.net/';

エラーログの出力先。後述の .htaccess の設定と同じパスにする。
事前に Apache ユーザに対して書き込み許可を与えておく必要がある。

$dbug['error_path'] = '/var/log/ecoder/error.log';

続いて、必要に応じて修正するといいかも知れない項目です。

自動セーブ機能をデフォルトで ON にするかどうか。保存即公開の場合は、OFF 推奨。
デフォルト OFF になっていても、画面上から切り替えることが可能。

$code['autosave'] = 0;

自動セーブ機能を ON にした場合のセーブ間隔 (秒)

$code['autosave_time'] = 10;

編集時に裏でバックアップをするかどうか。

$code['backup'] = 1;

ツリービューに表示させるファイルの拡張子。

$_SESSION['tree_file_types'] = array( "php", "js", "html", "css", "txt", "htaccess", "ini" );

アップロードできないようにするファイルの拡張子。

$_SESSION['upload_banned'] = array( "exe" );

ツリービューの中で無視するファイル名。

$_SESSION['tree_file_ignore'] = array ( ".ftpquota" )

ツリービューの中で無視するディレクトリ名。

$_SESSION['tree_dir_ignore'] = array( ".", "..", ".files", ".snap", "logic", "cpanel", "ftp", "00", "01" );

セキュリティと .htaccess 設定

上記の設定を施しただけでも、とりあえず ecoder は動作し、ファイルの編集、保存を行うことができます。
ただ、セキュリティは全く考慮されておらず、URL さえ知っていれば、誰でも編集可能な状態になってしまいます。

実は、ecooder 自体でもセキュリティの仕組みを持っていて、code.php において、$code['secure'] = 1; と設定すれば、認証機能を有効にすることができます。
ただ、この認証は、別プログラムでアカウントを認証し、設定したキー名で PHP のセッションを発行する事により機能するようです。(推測)
既存のシステムにシングルサインオンで組み込むには非常に適した仕組みですが、認証プログラム自体は同梱されておらず、別途作り込む必要があります。

そんな面倒くさい作り込みはしたくないので却下して、ここでは簡単に BASIC 認証を設定しておくことにします。
平文でパスワードが流れるのが嫌な方は、SSL を同時に適用することをお勧めします。
自分専用の編集サイトであれば、おれおれ証明書でも十分ですし。
(その辺の設定については本記事の範疇外ですので別サイトなど参照してください。)

以上を踏まえた、.htaccess の編集箇所は以下の通りです。

ログファイルの出力先の権限を設定

<Files /var/log/ecoder/error.log>
  Order allow,deny
  Deny from all
  Satisfy All
</Files>

ログファイルの出力先を設定

php_value error_log /var/log/ecoder/error.log

BASIC 認証を追加

AuthUserFile /var/www/www.otchy.net/himitsu/.htpasswd
AuthGroupFile /dev/null
AuthName "ecoder login"
AuthType Basic
require valid-user

<Files .htpasswd>
  order allow,deny
  deny from all
</Files>

さらに、.htpasswd ファイルを作成する必要がありますが、ここでは詳しく説明しません。
Apache 同梱の htpasswd コマンドを使うのが一番楽かと思います。

$ htpasswd -c .htpasswd username

以上で、設定は完了です。
ファイル一式を配置したフォルダをブラウザから開けば、高機能なエディタが利用できます。
もし何らかの設定が間違っている場合、ecoder 側で結構丁寧なエラーメッセージを表示してくれるので、それを元に修正していけば大丈夫です。

この ecoder と AjaXplorer を組み合わせて使えば、簡単な開発はもう Web 上で完結できるんじゃないかという気がしてきますね。
すばらしい時代になったものです。

ちょっと携帯から Twitter に投稿してみたいと思って、色々と方法を調べてみました。
携帯用の Web インターフェースや、メールから投稿できるもの、専用アプリなどいろいろあったのですが、どれもいまいち自分のニーズにしっくりきません。

• よく分からんサービスに ID とかパスワードを預けたり送ったりするのは不安だ
• 単につぶやきたいだけだから、多機能である必要はない
• そもそもパケホじゃないので、なるべく無駄なパケットは使いたくない

なので、自分のニーズにしっくりくるものを自作することにしました。
もちろん、PHP やら Perl やらを使ってごりごりやることも出来るんですが、簡単に (x)HTML だけで事が済みそうだったので、HTML だけで作成することに決定。

HTMLソース

下記の xhtml ソースを任意の名前で文字コードを UTF-8 として保存し、任意のサーバにアップします。
携帯からアクセスして、「投稿」ボタンを押すと、最初は BASIC 認証が聞かれるので、Twitter で使用している ID とパスワードを入力します。
以上で Twitter への投稿は完了です。

ひたすら軽く軽くシンプルにをモットーとして作られているので、投稿結果の処理が入っていません。(というか、HTML だけでそこまで出来ません。)
投稿後は端末上で「未対応のフォーマット」的なエラーになるかと思います。
アップしたページを画面メモなりお気に入りなりで携帯に保存しておけば、必要最小限のパケットで、Twitter に投稿することが可能です。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>モバT</title>
</head>
<body>
<div>モバT</div>
<form action="http://twitter.com/statuses/update.xml" method="POST">
<input type="text" name="status" /><input type="submit" value="投稿" />
</form>
</body>
</html>

制限事項

UTF-8 ＋xhtml が読めない端末だと使用できません。最近の 3G 携帯なら特に問題ないでしょう。
BASIC 認証に対応していない端末では使用できません。これも最近のものなら特に問題ないようです。
au では使用できません。ページのエンコードが UTF-8 であっても、フォームの送信は Shift_JIS で行うという謎仕様のせいです。

参考ページ

• Twitter API 仕様書 (勝手に日本語訳シリーズ)
• 携帯電話でのベーシック認証
• 【携帯サイト制作】第五回 auでutf-8のページからformで日本語を渡すと文字化けorz

普通、HTML で画像の回り込みというと、右上か左上に画像があって、そこに文字列が回り込むという感じです。これは簡単です。画像に対して float: left; すれば OK です。
しかし、右下か左下に画像を固定して、文字列がそこにたどり着いたら回り込むという動作は一筋縄ではいきません。
画像をブロックの左下に配置してテキストを回り込ませる方法を考える というページで色々と考察されていて、ふむふむと思ったのですが、この方法では、テキストの量が変わるたびに調整が必要になってしまうので、テキストの量が動的に変わる場合には対応しにくいです。
何より、文章をぶった切って画像を入れるというのはどうもスマートではありません。

色々と試行錯誤してみたところ、以下の方法で実現できそうだったので、公開してみます。

<html>
<head>
<style>
#block {
    width: 200px;
    height: 200px;
    overflow: hidden;
    font-size: 10pt;
    border: solid 1px #666;
    padding: 0.5em;
}
#bar {
    float: right;
    width: 1px;
    height: 100px;
    background-color: red;
}
#img {
    float: right;
    clear: both;
    width: 100px;
    height: 100px;
    background-color: blue;
}
</style>
</head>
<body>
<div id="block">
<div id="bar"></div>
<div id="img"></div>
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
</div>
</body>
</html>

このソースを保存して開くと、以下のような見た目になります。
わかりやすいように色分けした div で表現していますが、赤線は実際には透明、青い四角は実際には画像だと思って下さい。

#bar の部分とか美しいマークアップとは言えないですし、画像に文字が被ったりとかしてますが、微調整してやれば十分使い物になるかと思います。
最初は絶対実現できないんじゃないかと思ったので、出来た時は嬉しかったですね～。