14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv

MTのコメントスパムをなくす.htaccess 運営しているサイトのひとつでコメントスパムが急増したので.htaccessによるスパム対策を行いました。 .htaccessに次のような記述を書くとコメントスパムがほとんどなくなります。 「http://blog.webcreativepark.net」を運営しているサイトのドメインに変更してください。 <Files mt-comments.cgi> SetEnvIf Referer "^http://blog.webcreativepark.net" ref order deny,allow deny from all allow from env=ref </Files> リファラーを確認してリファラーがサイトのドメインと異なる場合mt-comments.cgiへのアクセスを弾く仕組みになっています。 .htaccessはmt-comme

Ajax中にページ更新する際の注意点 Ajaxで通信中にF5などを押してページをリロードすると通信エラーが帰ってきます。 詳しくは調べていませんが、どうもFirefoxでの挙動のようです。 参考：FirefoxでAjax中にF5押したとき « pocketo.net blog このサイトのようにAjaxのXMLHttpRequestをabort()で中断すれば、この問題は解決できます。 var xhr = $.ajax( {....}) $( document ).bind( 'beforeunload', function() { xhr.abort(); } ); ただ、通信の数が多い場合は、毎回設定するのは少し面倒。 そういう場合は、以下のように設定しておくとjQueryでajaxを使うと自動でabort()を設定してくれます。 $("body").bind("ajaxSend",

8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[

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> 直接読み込むことも出来ます。

JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen

ウェブデザイナーのための13のFirefoxのアドオン ネタ元:ウェブデザイナーのための16のFirefoxのアドオン 私のお勧めのアドオンです。(お勧め度は独断と偏見で) お勧め度★★★ Firebug 要素にかかっているCSSの確認や、リアルタイム編集による検証など、FirebugがないとCSSコーディングをしたくないと思うまでに大活躍中です。 JavaScriptを書く際にも、スクリプトの停止やオブジェクトの確認、console.logでの動作チャック、現在のDOMTツリーの確認などで非常に利用します。 Firebugは絶対利用したほうがよいですよ。 お勧め度★★☆ Html Validator XHTMLが正しく書かれているかどうかチェックしてくれるツール。間違っている場合はその理由も教えてくれます。 Web Developer Toolbar Firefoxの登場でめっきり出番は

jQueryを使ったサンプルコード ネタ元：一晩で覚えるjQueryの逆引き基礎サンプル7つ 色々書こうかと思ったらでぃべろっぱーず・さいどさんにほとんど書かれてる。。。 ですので、2サンプルほど 閉じる、開くボタンを同一の場所で交互にしたい ネタ元ですと、毎回ロードしてるけど同じデータなら最初の一回だけでよくないです? $(function(){ $("input[name='btn22']").one("click", function(){ $("#load1").load("./load.html"); }).toggle( function(){ $(this).attr('value','閉じる'); $("#load1").show(); }, function(){ $(this).attr('value','ローディング'); $("#load1").hide(); }

Movable Typeの再構築 高速化いろいろ Movable Typeの再構築を高速化する方法をいくつかご紹介します。 インデックステンプレートの再構築オプションをはずす インデックステンプレートを表示した際に、すべてのテンプレートに緑のチェックが入っていませんか？ これは再構築オプションといって、ブログの投稿や編集、インデックスの再構築を行ったときにそのファイルを再生成するというオプションです。 メインページやアーカイブインデックス、RSSといった類は仕方ないのですがスタイルシートやjsファイルなどの一度生成したら更新しなくていいものは再構築オプションを外してしまいましょう。 はずし方は、テンプレート名をクリックしてテンプレートを編集する際に、下にある『再構築オプション』のチェックを外してください。 不要なMTタグの除去 テンプレート内にはブログの設定を反映させるタグがいくつかありま

Movable TypeでSEO対策-metaタグ編- Movable TypeでSEOを行う際のmetaタグについて。 head要素内のmeta要素ですが、一時期は検索エンジンがまったく評価していなかったのですが、最近では量やコンテンツとのマッチを加味した上で評価されているようです。 参考：SEO対策-meta要素 Movablet Typeではデフォルトではmeta要素が出力されないので、metaを出力する際の設定を紹介。 Movablet Typeには基本の入力フィールドに『概要』と『キーワード』が存在するので、それを利用してmetaを設定する場合は以下のような記述をhead要素内に入れます。 <MTIf name="entry_template"> <MTIfNonEmpty tag="MTEntryKeywords"> <meta name="keywords" content=

ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。

MovableTypeにお問い合わせフォームを設置 MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。 インストール ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。 FTPでMovableTypeをインストールしたサイトにアクセスして、解凍したMailFormディレクトリをpluginsディレクトリにアップロードします。 MailForm内のmt-mail-form.cgiのパーミッションを変更します。(755とか700に) テンプレートの作成 ヘッダーメニューのデザイン ＞ テンプレート から「ブログのテンプレート」へ。 『インデックステンプレートを作成』から新規にテンプレートを作成します。 メールフォームを表示したい箇所に以下のような記述を行います。 出力ファイル名(これがお問い

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の『有効化

ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず

Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容

ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

ie以外でもクリップボードが使えるsetClipboard.js IE以外のブラウザでもクリップボードにコピーが簡単にできるjavascriptライブラリを作成しました。 IEにはclipboardData.setDataという関数があり、クリップボードへのコピーなどが簡単にできますが、IE以外のブラウザはクリップボードにアクセスする機能がありません。 そこでflashプレーヤ―のsetClipboard関数を利用してクリップボードにコピーするライブラリです。 まずは関連ファイルをダウンロードします。 ダウンロード(setClipboard.zip) 解凍してできる『setClipboard.js』と『setClipboard.swf』は同じディレクトリにアップしてください。 header要素などでsetClipboard.jsを読み込みます。 <script type="text/jav

FeedburnerがYahoo!ブログ検索にインデックスされない件 FeedburnerがYahoo!ブログ検索にインデックスされないらしいので解決法を考えてみました。 (参考：Googleが「Feedburner」を買収？) Feedburnerがインデックスされない原因は、Yahoo!ブログ検索が『RSSのアドレスが、ブログや各記事のドメインと異なる』場合インデックスしないというポリシーで運営されているからのようです。 Yahoo!ブログ検索にポリシーを変更してもらうのが一番いいのですが、そうも言ってられないので解決法を考えてみました。 Yahoo!ブログ検索のボットのユーザーエージェントは『Y!J-BSC』らしいので、それで条件分岐したら大丈夫と思います。 (参考：Y!J-DSCとY!J-BSC - Yahoo! JAPAN独自のクローラー) オートディスカバリーの設定(heade

MovableTypeにタグクラウド(SEO対策済み)を設置する ブログのリニューアルをおこなったのですが、ついでにタグクラウドを設置してみました。(右メニューの一番下に設置してます。) 普通に設置しても面白くないので、SEOをふまえたタグクラウドにしてます。 タグクラウドを設置する利点 blogのエントリーを通常のカテゴリーとは別に、汎用性のある分類を行うことができます。 例えば、最近このblogでは『Twitter』に関する話題を取り扱うことが多いのですが、カテゴリーを作るほどではありません。 そんな場合『Twitter』のタグを設定しておけば、『Twitter』に関するエントリーの一覧を作ることができます。 参考：Twitterのタグページ また、SEO上も有効で、タグでキーワードを設定すれば、そのキーワードの専門ページが1ページ作成されることになります。 基本的な設置方法 テンプレ

script.aculo.usでHTML Slidyを改造 CSS Nite in Osaka 2007 春の陣 前夜祭のプレゼンで使ったスライドですがscript.aculo.usを使って改造しています。 改造方法をちょっとだけ紹介します。 script.aculo.usというのはPrototype.jp上で動くエフェクトライブラリで、簡単にWEBサイト上の部品にアニメーションのようなインタラクティブな効果を与えることができます。 あの有名なLightboxなどもscript.aculo.usを使い作られています。 まず、script.aculo.usの公式サイトよりライブラリをダウンロードします。 ダウンロードしたファイルを解凍しlibディレクトリの中身とsrcディレクトリの中身をサーバー上のjsディレクトリにアップします。 (ディレクトリ構成は好みに別れますがボクはjsディレクトリに