jQueryのattrメソッドとpropメソッド
jQueryのattrメソッドとpropメソッド jQueryデザイン入門の読者の方から、書籍中の jQueryのattrメソッドの使い方（P281）が間違っているのでは？とご質問をいただいたので解説をします。 jQueryではバージョンによって挙動が変わったメソッドが幾つかあり、attrメソッドはその一つです。（変わったといっても少しだけですが） attrメソッドでチェックボックスの値を取得しようとした場合、次のような変更がありました。 <input type="checkbox" name="01" checked="checked"> <input type="checkbox" name="02"> $("input").each(function(){ alert($(this).attr("checked")) }); 上記のコードをjQuery1.5.2 で実行した場合、na
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
「Web Intents」でTwitterの機能をサイトに埋め込む
「Web Intents」でTwitterの機能をサイトに埋め込む 先日、AmazonがTwitterやFacebookによるシェア機能に対応したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。 ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイトにTwitterの機能を埋め込む際にはOAuth認証を利用しなくてはいけなかったのですが「Web Intents」を利用すれば簡単に埋め込めるようになっています。 Tweet機能の実装 つぎのようなシェアボタンを簡単に埋め込めます。 このページをシェア ソースコードは次のような感じになります。 <script type="text/javascript" src="http://twitter.com/intent/t
Re:犯してはいけないHTMLタグの過ち10個
Re:犯してはいけないHTMLタグの過ち10個 ネタ元：犯してはいけないHTMLタグの過ち10個 基本的には良い記事なんだけども、原文が2年近く前の物でXHTMLを前提に書かれているので少しだけ内容が古いかなと思ったりします。 1. インライン要素の中にブロック要素を入れない <a href="#"><h2>これは間違いです</h2></a> aタグのようなインライン要素の中にhタグのようなブロック要素を入れてはいけません、となってるけどこれはHTML5的にはこれはあり。 a要素は基本的にフロー・コンテンツが記述できる場所に記述できます。ただ、他のほとんどのインライン要素はフレージング・コンテンツしか内包できないのでNG。 <span><h2>これは間違いです</h2></span> HTML5だとコンテンツモデルの概念が変わっているので要注意。 参考：コンテンツ・モデル - HTML5タ
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」 FirefoxのアドオンFirebugを利用することで効率的なCSSデバッグが可能になる。ただし、このFirebugはIEなどFirefox以外のブラウザでは利用することが出来ない。しかしFirebugではFirefox以外でも利用できるFirebug Liteが提供されている。 Firebug LiteはIE6以上, Firefox, Opera, Safari そしてGoogle Chromeなどほとんどのブラウザで利用可能です。 オリジナルのFirebugと比較すると機能が限定されているがCSSデバッグには十分利用できるでしょう。 Firebug Liteの利用方法 Firebug Liteはブックマークレットとして提供されています。ブックマークレットとはサイト上で任意のJavaScriptを実行する機能で
MTのキャプチャ認証の負荷を軽減する方法
MTのキャプチャ認証の負荷を軽減する方法 先日、このブログのサーバー負荷が増大して、表示できないことがある状態になったのでMTのキャプチャ認証に対して負荷を軽減を行いました。 MTは通常、静的にHTMLを書き出している為、表示に対する負荷はそれほど掛かりませんが、静的ページで読み込んでいるキャプチャ認証の画像に関してはcgiで書き出されている為、表示のたびにcgiが実行されています。 MTの4.2のマイナーバージョン(細かいバージョンは忘れましたが)では、デフォルトテンプレートではコメント欄にフォーカスがあった場合にキャプチャ認証の画像を表示するように改善されていますが、それ以前のバージョンのテンプレートを利用している場合や、独自のテンプレートで運用している場合には独自に実装しなくてはなりません。 変更前 <dt><label for="comment-text">コメント:</label
Ajax中にページ更新する際の注意点
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",
twitterでblogの更新情報を配信
twitterでblogの更新情報を配信 先日よりtwitterでblogの更新情報の配信を始めました。 一時はPostToTwitterを利用して配信していたのですが、私のブログをRSSリーダーで読んでる人はさらにtwitterのフィードでも配信されたらうっとおしいだろうと思ってtwitterへの配信を辞めておりました。 けど、最近情報収集にRSSではなくtwitterを利用しているという人をちょくちょく見かけるようになり、個人的に感じていた「twitterを利用している人」=「既にRSSを利用している人」構図が成り立たなくなっているようですのでtwitterへの配信を再開しました。 私のtwitterはhttp://twitter.com/KazumaNishihataなのでお気軽にフォローしてください！ フィードの配信にはtwitter feedを利用しています。 PostToTwi
MTカスタムフィールド画像を見えるようにする（推奨）
MTカスタムフィールド画像を見えるようにする（推奨） ネタ元：MTカスタムフィールド画像を見えるようにする こないだ書いたエントリーが参考先にあげてもらっていうるのですが、このやり方はあまりお勧めできません。(ごめんなさい) で、長谷川さんの書いてるjQueryのもあまりお勧めできない。 Junnamaさんのエントリーでも書かれている通り、MTには標準でカスタムフィールド画像のURLを出力するタグが用意されているので、それを使うのが一番正攻法です。 ちょっとややこしくなるので、めんどくさい方は以下のプラグインがお勧めですよ。 カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02 MT4.1のカスタムフィールドで指定した画像を素直なタグで出力する。 カスタムフィールドの取得はMTEntriesコンテナで利用します。 <MTEntries> </MTEntries
画像置換とSEO
画像置換とSEO 画像置換の話題がはやっているようですのが、SEOに関して肝心なところ出てきていないようですので補足しておきます。 ひとまず、関連エントリーのまとめ 画像置換乱用してませんか？ | THE HAM MEDIA 画像置換について « grandes cedro 画像置換について考えてみました｜linker journal｜linker ここからが本文。 結論から書くとGoogleはaltもテキストも同等に扱う為、SEO上のメリットはありません。あったとしても計測できないほどの微々たるものです。 ただ、Yahooはaltに関してまったく評価されません。 つまり、画像のaltにのみキーワードがあるような場合は検索結果に登場しません。 また、a要素に包まれたテキスト、アンカーテキストと呼ばれるものですが、これは現在のSEOで結構重要なポジションにある要因なので、これが評価されていな
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
Movable TypeとWordpressについて
Movable TypeとWordpressについて 最近はMovable TypeからWordpressへの移行がはやっているようですね。 [N] Movable TypeからWordPress移行の波がくる？ ブログをMovableTypeからWordPressに移行しました - trick7 ブログをMT(3.32)からWordPressに移行しました : akiyan.com 固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ 個人的にどちらも愛用しているのですが、どちらもよいCMSですよね。 ちょっと私なりにMovable TypeとWordpressの違いをまとめてみたいと思います。 Googleトレンド ネタフルさんでも利用されているGoogle トレンドでもう少しトレンドを分析してみたいと思います。 Movable Typeと
IE6で閲覧すると。のanalog.js
IE6で閲覧すると。のanalog.js ネタ元：IE6で閲覧すると。 という訳でIE6で見ると最新バージョンにアップデートするように促すJavaScriptライブラリを作ってみました。 利用方法は簡単、analog.jsをhead要素などで読み込んでください。 <!--[if IE 6]> <script type="text/javascript" defer="defer" charset="utf-8" src="analog.js"></script> <![endif]--> 条件付コメントとcharset属性、defer属性を忘れずに！ IEで見るとこんな感じで表示されます。 ご利用は自己責任でお願いします。 ライブラリ中の「アップロード」のtypoを「アップデート」に修正しました。 IE6向けには他にもこんなのがありますよ。 IE6で閲覧するとモノクロ Re: IE6を使っ
知っておきたい15個のCSS TIPS
知っておきたい15個のCSS TIPS IN THE WOODSでまとめられている15 CSS Tricks That Must be Learnedを紹介します。 原文は素敵なイラスト付きで解説されていますので、合わせてチェックしてください。 positionがabsoluteの要素をpositionがrelativeの要素の中に入れる positionがrelativeを指定した要素の中にpositionがabsoluteを指定した要素を入れることにより、計算した場所に配置することができます。 参考：positionプロパティの考察 z-indexによる配置 z-indexを利用する場合は、「position:relative」と共に利用することにより要素の重なり順を制御することができます。 margin auto widthを指定した要素の左右にmargin:autoを指定すると中央
XSSの脆弱性を限りなくなくす方法
XSSの脆弱性を限りなくなくす方法 XSSがはやっているので便乗しておきます。 私がよく使う方法なんですが、この方法を利用するとXSSの脆弱性を限りなくなくすことが出来ます。 対応方法は、PHPファイルの最初に以下のコードを挿入するだけ。 foreach($_GET as $key => $value){ $_GET[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES); } foreach($_POST as $key => $value){ $_POST[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES); } これで自動的にエスケープの処理を行ってくれます。 通常のXSS対
Yahooの検索順位を表示するGreasemonkeyスクリプト
Yahooの検索順位を表示するGreasemonkeyスクリプト 今までYahoo!で検索結果に順番が振られていたのですが、つい先日から順番が表示されなくなりました。 これでは少し不便ですので、Yahooの検索順位を表示するGreasemonkeyスクリプトを作成しましたので、必要な方はお使いください。 numberyahooresults.user.jsをインストール Greasemonkeyスクリプトの利用方法は姉妹スクリプトのnumbergoogleresults.user.jsで詳しく説明しているのでそちらを参考にしてください。 普段から検索結果の順位を見るクセを付けておけば、色々と見えてくるものもあると思いますので。 関連エントリー Greasemonkeyを使いGoogleの検索順位を表示する方法 Googleに挑むYahoo!Japan 関連キーワードを探すキーワードアドバイ
MovableTypeにタグクラウド(SEO対策済み)を設置する
MovableTypeにタグクラウド(SEO対策済み)を設置する ブログのリニューアルをおこなったのですが、ついでにタグクラウドを設置してみました。(右メニューの一番下に設置してます。) 普通に設置しても面白くないので、SEOをふまえたタグクラウドにしてます。 タグクラウドを設置する利点 blogのエントリーを通常のカテゴリーとは別に、汎用性のある分類を行うことができます。 例えば、最近このblogでは『Twitter』に関する話題を取り扱うことが多いのですが、カテゴリーを作るほどではありません。 そんな場合『Twitter』のタグを設定しておけば、『Twitter』に関するエントリーの一覧を作ることができます。 参考：Twitterのタグページ また、SEO上も有効で、タグでキーワードを設定すれば、そのキーワードの専門ページが1ページ作成されることになります。 基本的な設置方法 テンプレ
Slice Imageでサイトを高速化
Slice Imageでサイトを高速化 ネタ元:CSS Spritesでサイトを高速化&CSS Sprites化と画像減色でサイトを高速化 ナローバンド時代にサイトの表示を高速化する為に利用された古典的手法「Slice Image」と、ネタ元のCSS SpritesやSlice Imageで、なぜサイトの高速化が可能かを解説したいと思います。 注)古典的な手法で現在はバッドノウハウです。実際には利用しないでください。 Slice Imageは画像を分割し、複数の画像として表示することにより、表示を高速化する為のテクニックです。 例えば、大きい画像を表示する際に、一度に読み込むよりは10個の画像にわけて読み込んだほうが表示は高速になります。 1個の蛇口からバケツに水を注ぐより、10個の蛇口から水を注いだほうが速く満杯になるのを想像してもらったら解りやすいと思います。 画像の分割はFirewo
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン MTのテンプレート開発で再構築の工程が非常に不満だったので、テンプレート開発中は再構築を不要にするプラグインを作成しました。 以下のような条件で開発している方用のプラグインです。 ダイナミックパブリッシング環境で開発 テンプレートのファイルリンク機能を利用して開発 ダイナミックパブリッシング環境で開発 スタティックな環境で開発している方も多いと思いますが、あまり効率が良いとはいえません。 ダイナミックパブリッシング環境で開発を行えば、再構築の作業を行わなくてもブラウザで確認を行うことが出来ます。 参考：MovableTypeにダイナミック・パブリッシングを設定する テンプレートのファイルリンク機能 MTのテンプレート管理画面でテンプレート管理画面で開発している方も多いと思いますが、これもあまり効率が良いとは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
