XMLHttpRequestまとめ

/web/javascript

XMLHttpRequestは、スクリプト言語からサーバとのHTTP通信を行うための組み込みオブジェクト(API)。既に読み込んだページ上からHTTPリクエストを発することができるため、ページ遷移なしでサーバとのデータ送受信が可能になる。Ajaxの基幹技術。

実装にあたって、おおかまかな手順は以下。
文字コードはUTF-8にしておこう。

  1. XMLHttpRequestオブジェクトを作成
  2. XMLHttpRequestオブジェクトからデータを取得
  3. 取得したデータを編集、利用

ただしセキュリティ上の問題から、リクエストの送信は同一ドメイン内に制限されている。そのため、ドメインを越えてデータを交換するには以下のような方法をとる必要がある。

  1. Perlなど、サーバーサイドでデータを取得
  2. Flashのクロスドメイン通信の機能を経由させる
  3. ScriptタグからJavascriptプログラムとして取得(JSONPなど)

memo: もとはマイクロソフトがIE-5においてActiveXオブジェクトとして実装したのが始まりらしい。

»続きがあります

スライド・メニューを作る

/web/javascript

ボタン・クリックで滑り落ちるメニューを作ってみた。昔のShaunInman.comとか、今で言うjek2k.comにあるようなやつ。大きめのフッタとセットで提供されることが多いように思います。

今回のポイントは3つ。

  • 開ききった時の「高さ」を取得
  • 現時点での「高さ」を取得
  • 連打時の処理中断(重複)への対応

»続きがあります

『Tumblr』が凄すぎる件

/web/trend

Tumblr』は、他に類を見ないほどシンプルかつ利用しやすいブログみたいなサービス。ソーシャルブックマーク(はてな、del.icio.us)みたいな感覚でブックマークレットから投稿できて、ブログほど鬱陶しくない。ローンチ1ヶ月でユーザー数5万人超を記録し、なお成長中。

Tumblrトップ画面

»続きがあります

選択可能なアンチエイリアス文字を出力する『sIFR 2.0』導入メモ

/web/javascript

sIFR(Scalable Inman Flash Replacement)は、HTML上の任意のテキストをJavascriptでFlashムービーに置き換え、アンチエイリアスが掛かった選択可能なテキストとして表示する手法。Shaun Inman氏が世に広めた技術で、海外では割と普通に使われています。

sIFR test

見た目はCSSによる画像置換と同じだけど、通常のテキストと同じように選択やコピペも可能。Javascriptを切った環境では通常のテキストが表示され、HTML上のテキストを修正するだけで変更が反映されます。

ただし日本語では使えない。正確には、使えるけど重すぎて実用に耐えない。これは、Flashにフォントファイルをまるごと埋め込んで利用する仕様のため。せいぜい百数十文字しかない欧文フォントに対し、約二万種類もの文字が存在する日本語フォントは重すぎるということですね。

Update: sifr.jsを2.0.2 → 2.0.7にアップデートしました。現行のFirefox/Opera等ではプレーンテキストのままだったためです。(2009.02.27)

Update: Wikipedia(英語版)には概要および参照リンクが集まっているので、公式サイトが重いという方はこちらからどうぞ。(2009.02.27)

»続きがあります

簡易WYSIWYGエディタを作る

/web/javascript

Javascriptを使ったWYSIWYGエディタと言えば、openWYSIWYGという立派なものが既に公開されているわけで、実際利用するにもこれを弄ったほうが使えそうなのですが、カスタムするにも周辺知識は必要だろう、ということで作ってみました。

動作確認はサンプルにて。おおかまかな手順は、以下。

  1. iframeを生成する (textareaを隠す)
  2. iframeのdesignModeをonにする (文書を編集可能にする)
  3. iframeにイベントを付与する (編集内容をtextareaに反映する)

提供される機能としては、こんな感じです。

  1. execCommand()で各種効果を実装する
  2. WYSIWYGモードとソース表示を切り替える
  3. 任意の場所に指定したHTMLタグを挿入
  4. 選択領域を指定したHTMLタグで囲む

»続きがあります