adiary開発日誌

Google ChromeやFirefoxには標準で<textarea>の自由リサイズ機能（マウスでのリサイズ機能）がありますが、input type="text"等のテキストボックスにはその機能がありません。

jQueryで実装してみました。

• 使い方
• ソース
• 解説
  • 仕組みを理解したい場合

使い方

以下のCSSとJavaScriptを導入してください。あとは自動的に機能が導入されます。

• jQueryを先にロードしてください。必要バージョンは分かりません（苦笑）
• Google ChromeとFirefoxで動作確認しています。
• CSSの width が掴める部分のサイズになります。
• CSSの z-index の下3桁（1000で割った余り）がテキストボックスの最小サイズになります。*1
• CSSの display:none を有効にするとフォームリサイズ機能を無効にできます。
  • テキストボックスの初期サイズの方が小さい場合はそちらが最小サイズになります。
• IE6,7で動作しましたが、IE8,9では動作しませんでした（動作しないだけで不具合はありません）。
  • 手前にあるspanよりも裏側にあるテキストボックスが優先される謎の仕様のせいです。

続きを読む

JavaScript

//-----------------------------------------------------------------------------
// ●enterで送信させない
//-----------------------------------------------------------------------------
// Tested : Fx4, GC, IE7/8
function enter_not_submit(evt) {
	evt = evt ? evt : event;
	var e = evt.target || evt.srcElement;
	if (e.tagName != 'INPUT') return true;
	if (evt.keyCode == 13) return false;
	return true;
}

フォーム側

<form action="" method="POST" onkeypress="return enter_not_submit(event);">
	（フォーム内容）
</form>

Formに仕込むだけです。INPUTタグやSubmitボタンの細工は不要。

全INPUT要素を探し出してイベントを登録するハンドラのような無駄な処理も不要。

画像の縦横中央配置

HTMLのソース。余計な改行やスペースを入れないこと。

<div class="image"><span class="dummy"></span><img src="xxx.png" /></div>

CSS。

div.image {
	border:		1px solid #8ff;

	min-width:	320px;
	width:		320px;
	height:		240px;
	_width:		322px;
	_height:	242px;

	text-align:	center;
	display:	block;
}
div.image span.dummy {
	height:		240px;
	width:		0px;
	vertical-align:	middle;
	display:	inline-block;
}
div.image img {
	max-width:	320px;
	max-height:	240px;
	vertical-align:	middle;

	/* IE6 hack */
	_margin-top:	-1px;
	/* IE6 でアスペクト比保存縮小のためのhack */
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}
*:first-child+html div.image img { /* IE7 hack */
	margin-top:	-1px;
}

• 画像領域は320*240。
• モダンブラウザは問題なく表示。
• IE6は後方互換モード、IE7は標準準拠モード+ie8.js。
• "margin-top: -1px;"してあげないと画像がなぜか下に1pxずれてしまう。

「span.dummy」を「display: inline-block」するのが縦方向センタリングのポイントです。

IE6で縦横比保存なmax-width, max-height

img {
	max-width:	320px;
	max-height:	240px;
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}

240と320を好みのサイズに変更してください。

適当に追記します。

• 雑多なおさらい
• オブジェクト（っぽいもの）の生成
• メンバ関数をコールバックさせる　方法１
• メンバ関数をコールバックさせる　方法２

雑多なおさらい

• JavaScriptのクラスの概念はないらしい。
• プリミティブな数字や文字列など意外は、すべてオブジェクトであり参照。
• 参照なので代入した側でメンバ変数をいじると、代入元も書き換わる。
• 関数を変数に代入できる。

  var f = function (x){ alert(x); }
  f("msg");    // "msg"と表示される
  

Perl5のオブジェクトに似たところがありますが、クラス名前空間（パッケージ）を持たないため、Perl5よりも簡素な実装と言えそうです。

続きを読む

Wikipedia APIとは

というふうに、サムネイル作成で使わせて頂いているSimple APIが提供するWikipediaの情報を取得するAPIです。これを adiary で Ajax 風に実装しようと思ったんですが、XMLHttpRequest ではセキュリティ上の問題でクロスドメイン（Simple API提供のWikipedia API）から直接データを取得することができないんですね。

よくよく調べると、JSONPというのがありまして、別にhandlerの名前を指定出来なくていいから対応してもらえないかなーという感じです。

例えば

呼び出すhandler名は固定で、引数も現在のAPIを文字列に変えたものでいいんですけど…。例えば、http://wikipedia.simpleapi.net/api?keyword=Google&output=xml&jsonp=1にアクセスすると、特定の関数をXMLを文字列として戻してくれるとか。

追記 2006/12/28

JSONは既に対応済だったらしい（恥）