タグ: JavaScript

Strict定義な「HTML 4.0X」「XHTML 1.0」での target=”_blank” の代替手段

「HTML 4.01 Strict」や「XHTML 1.0 Strict」文書型ではtarget属性が定義されておらず事実上廃止となった模様。実際、W3Cが提供する「Markup Validation Service」でもInvalidとなるのが確認出来ます。

リンク先を開くウィンドウの指定手段として広く用いられてきたtarget属性ですが、「新規ウィンドウで開くかどうかは利用者の判断に委ねるべき」との判断から外されてしまったようですが、Webコンテンツを提供する側としては実に頭の痛いところです。

Strict定義に準拠したまま外部サイトへのリンクを別ウィンドウで開きたい…という要求に対しJavaScriptで対応する方法が提起されているようですので、ここではjQueryとprototype.jsという2種のフレームワークを用いた実装例を紹介しておくことにします。

YUI Compressorを使ってみた

特に必要に迫られたわけではないけれど、少々時間があったのでJavaScriptのソースコードを圧縮するアプリケーション「YUI Compressor」を使ってみました。

米Yahoo!の「UI Library」内YUI Compressorのページから本日時点での最新バージョン 2.2.5 をダウンロードして解凍。build フォルダ配下に目的の “yuicompressor-2.2.5.jar” があるので、コマンドプロンプトから以下のようにして実行。

java -jar yuicompressor-2.2.5.jar (圧縮したいファイル)

ファイルに圧縮した内容を出力したければリダイレクトすればオーケー。

java -jar yuicompressor-2.2.5.jar (圧縮したいファイル) > (圧縮後のファイル)

試しにPrototype 1.6.0を試してみたところ、121KBから71KBへと40%近い圧縮効果を発揮。Web上での40KBの節減はかなり効果が大きいのではないかと思います。

JavaScript + CSS によるタブ切り替え

ここ数日、実験的にAjaxを駆使したWebアプリケーションを作成してました。まぁ、特に具体的なターゲットがあるわけではないんですが、こうした技術が業務アプリとして活用するに耐えうるだけの信頼性やレスポンスを確保できるんかなぁ、という個人的な興味がありまして。

閑話休題。そのサンプルアプリの作成過程で必要になったタブ機能はこちらのページを参考に実装。『prototype.jsでタブ切り替え』とあったので、「prototypeにタブ機能なんてあったっけ!?」と思って取り込んだのですが、よくソースを見るとタブ切り替えのスクリプトにprototypeを使ってみたってことだったみたい。でも、ちゃんと考えて作りこんであって便利です。感謝。

「google-code-prettify」を導入してみた

先日MYCOMジャーナルに掲載されていた「ハイライトもGoogle流 – “google-code-prettify”でソースコードに色付けを」という記事で存在を知ったばかりのシンタックスハイライトモジュール「google-code-prettify」。

“シンタックスハイライトモジュール”というと難しそうですが、要はHTMLで利用する<pre>タグの中に記述したコードを自動で色分けしてくれるもの。秀丸に代表される高機能エディタやVisual Studioなどの統合開発環境で各種ソースを表示したときに、コメント部と実行コード部は見分けやすいようフォント色を変えて表示してくれてますが、それをJavaScriptとCSSを使ってやっちゃうよ、というなんとも素晴らしいものなのです。

そんな便利なものをGoogleが無償公開していて導入も簡単なのだから使わない手はありません!ってことでさっそくこのサイトにも導入してみました。

Ajax逆引きクイックリファレンス

Ajax逆引きクイックリファレンスWeb2.0対応for Windows & Macintosh毎日コミュニケーションズより発刊されている『Ajax逆引きクイックリファレンス』はWeb2.0の要ともいえるAjaxを実際に組み込む上での「どうすればいいの?」「どうやるんだったっけ?」といった具体的なシーンに逆引きで解してくれるオススメの一冊です。

すっきりしたレイアウトで読みやすく、サンプルの豊富さも類似書籍に比べると大変優秀。JavaScriptフレームワーク「prototype.js」を用いるシーンにも対応しています。

基礎からの説明はほとんどなされていないので、一からAJAXを学ぼうとしている人には不向き。XMLやPerlなどWeb全般の幅広い知識の基礎を押さえた上でステップアップを図ろうとしている人にとって適したレベルになっています。勿論、わたしのような忘れっぽい技術者にとっても手元に置いといて損はありません。

Google Maps APIをIEでも正常動作させる(headやbodyタグを触らずに)

Google Mapsで提供されている地図を自分のウェブサイトやアプリケーションに組み込んだり、その地図上に独自の情報を表示したりすることを可能にするサービス「Google Maps API」。最近流行りの「Web 2.0」や「マッシュアップ」といった言葉の浸透とともにGoogle Maps APIを利用するウェブサイトも増加の一途を辿っています。

しかし、このAPIで提供されるサンプルコードをそのまま利用した場合にFirefoxやMozilla、Operaなどのブラウザでは正しく表示できるのに、Internet Explorer(以下、IE)では「開けません。 操作は中断されました」といったエラーを吐いてしまい、正しく表示できない場合があります。原因はIEのバグ…というかセキュリティ仕様上コードの解釈が他のブラウザと大きく異なってしまっているのが原因のようなのですが、このまま放っておくわけにもいかないので対応を検討してみることに。