jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
jQuery.suggestをIEの日本語に対応
jQuery.suggestをIEの日本語に対応 jQuery.suggestでサジェスト機能を実装しようとしたところIEでの日本語の認識が上手に行きませんでした。 調べてみたところ原因は100行目あたりの以下のコード。 } else if ($input.val().length != prevLength) { if (timeout) clearTimeout(timeout); timeout = setTimeout(suggest, options.delay); prevLength = $input.val().length; } 文字数で変化を取得しているので、たとえば「か」と入力したい場合、最初の「k」を入力した時点でサジェスト機能が動作し、「a」を入力して「か」になった段階では文字数が変わらないのでサジェスト機能が動作しない形になる。 } else if ($inpu
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想
「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。 資料が公開されました。 ■出典元：CSS Reloaded ■著者；John Allsopp ■リンク：Web Directions East 以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。） CSSの歴史 1996年ぐらいからありました。 2000年にCSSのサポートが良いMac IEが登場 2000-2005年はCSS3の開発がストップ 2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded) 各ブラウザはCSS3を試験的に実装 プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。 Firef
エントリーでPHPを利用する方法
WordPressのエントリーでPHPを利用する方法 WordPressではテンプレートではPHPを利用できるのですが投稿ページではPHPが利用できません。 そこで、WordPressでPHPを利用する為のプラグインをご紹介。 Exec-PHPを利用すれば、WordPressのエントリー中でPHPを利用することが可能になります。 インストール方法 配布ページの『Download Exec-PHP 3.3 here!』よりプラグインをダウンロード、ダウンロードした『exec-php.zip』を解凍します。 FTPでWordPressをインストールしたサーバーにアクセスして、解凍してできた『exec-php』を、wp-contentディレクトリ内のplugins内にアップロードします。 次に管理画面にアクセスして、トップメニューのプラグインを選択。 プラグイン一覧内のExec-PHPの『有効化
javascriptなしで背景が透けるカラムを実装するスタイルシート
javascriptなしで背景が透けるカラムを実装するスタイルシート ネタ元:背景が透けるカラムを実装するスタイルシート このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。 サンプル 特に難しいことはしていないですが、カラムの背景を透過pngで指定しています。 透過pngに対応していないIEに関してはfilterで代用しています。 参考：IEとそれ以外のブラウザでアルファ画像を使う方法 #main,#navi{ background:url(alpha.png); } * html #main{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; } * h
ユーザーがページのどこをクリックしたか解析するツール[to-R]
ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず
![ユーザーがページのどこをクリックしたか解析するツール[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0330939009a892e86a58d7eebfca00c0ecd1fe43/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20070820_01.jpg)
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
PHPの欠点
PHPの欠点 ネタ元：PHPがいかに駄目な言語か、という話。 定期的に起こる、PHPに関する議論ですが、今回はRubyのまつもとゆきひろさんが火種とあり結構な盛り上がりを見せています。 とりあえず、まとめ どの言語で書いてもおかしなコードを書く奴は書く。 404 Blog Not Found:「PHPなめんな」と「(Perl|Python|Ruby)をなめんな」の違い PHPとRubyについて Rauru Blog » Blog Archive » 悪いのはPHP自体じゃないかもしれないけど PHPやってるだけでバカにされるんですがどうしたらいいでしょうか。 - 人力検索はてな 「PHPは初心者に優しい」は不適切な宣伝文句 - 2008-01-29 - ひがやすを blog Matzにっき(2008-01-29): PHP使いの反論 Matzにっき(2008-01-29): 安全なWebア
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
【Adobe Spry TIPS】別ドメインの内容を読み取る
【Adobe Spry TIPS】別ドメインの内容を読み取る 【Adobe Spry TIPS】ＲＳＳを取得して表示する。の補足。 Ajaxではブラウザのセキリュティ上、別ドメインの内容を取得することはできません。 それではRSSデータを十分に活用できませんので、別ドメインのRSSを読み取る方法としてcgiやphpなどでサーバーサイドで読み込みの処理をかます方法があります。 phpを利用して外部のドメインのRSS（twitterのRSS)を取得・表示する方法を解説します。 以下のような内容のurl_proxy.phpを作成します。 <?php $url = "http://twitter.com/statuses/user_timeline/5396752.rss"; $xml = file_get_contents($url); header("Content-type: applica
【Adobe Spry TIPS】XMLとXPath
【Adobe Spry TIPS】XMLとXPath 【Adobe Spry TIPS】ＲＳＳを取得して表示する。の補足 XMLとXPathについては一番なじみが深いと思われるXHTMLを元に解説していきます。 XHTMLはもともとSGMLベースで策定されたHTMLを、XMLベースに策定しなおしたものであり、XMLとはXHTMLのように複数の要素を入れ子にして情報を表現する為のマークアップ言語です。 XPathはXMLの特定の要素までの道筋を記述する方法です。 サンプルに、当blogの最新の状態を保存したXHTMLを用意しました。 (xml宣言の追加や、サーバーの設定のため拡張子をxmlに変更した物) このサンプルを元に最新のエントリー一覧を抽出するXPathを書いてみます。 まず、一番外側の要素（html要素）を記述します。 /html 次にその内側の要素。エントリー一覧はbody要素内
DOM 読み込み完了時に関数を実行する domready.js
DOM 読み込み完了時に関数を実行する domready.js 配布元:METAREAL[閉鎖] ライセンス:MIT-style license. domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。 ページの読み込みが終了したイベントを取得するonloadイベントは厳格すぎて少々扱いにくいところがあります。 画像などのすべてのファイルの読み込みを終了してから実行するため、ラグが生じてしまうからである。 この domready.jsを利用すれば、DOM ツリーが構築されたタイミングで、任意の関数を実行できるのでラグが最小限ですむ。 同様の機能をjQueryやmootoolsではサポートしており、Prototyp.jsの最新版も新たにサポートされています。 domready.jsを利用すれば、それらのフレー
高さの異なるカラムをそろえるスタイルシート
高さの異なるカラムをそろえるスタイルシート ネタ元：高さの異なるカラムを揃えるスタイルシート[コリス] 高さの異なるカラムをそろえるのがはやっているようですので、色々考察。 高さの異なるカラムをそろえる一般的な手法は、親要素の背景に画像を設定し、高さが揃っているように見せかける方法です。 まず、高さがバラバラの場合のサンプル。 次に、高さをそろえたサンプル。 こちらの方がネタ元より若干、汎用性が高い。 例えば、カラムの下を角丸でそろえることも可能です。サンプル ネタ元ですが、ネガティブマージンを使った手法でボックスの領域を超えて背景画像を表示する形で、高さをそろえているように見せかかけています。 図解するとこんな感じ、 『カラムの内容領域の高さ』に対して、『padding-bottomにより背景画像の表示領域を拡大』し、『カラムの実際の高さ』は、『margin-bottomにより縮小』させ
IEでposition:fixedを再現するFixed positioning
IEでposition:fixedを再現するFixed positioning Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。 IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル 関連エントリー テーブルをソートできるようにするjsライブラリ-table sorting 画像に鏡面効果を与えるreflection.js 半角ｶﾅを全角カ
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
