jQueryプラグインの先頭にセミコロンがある理由
jQueryプラグインの先頭にセミコロンがある理由を調べてみました。 １．「jQueryプラグインの先頭にセミコロン」とは？ 例えば、レスポンシブ対応で画像を拡大表示できる「SuperBoxプラグイン」のコードは次のようになっています。 ;(function($) { $.fn.SuperBox = function(options) { var superbox = $('<div class="superbox-show"></div>'); var superboximg = $('<img src="" class="superbox-current-img">'); …中略… }); }; })(jQuery); 1行目の行頭にセミコロンがついています。 ;(function($){ 直感的に「エラー防止用かな？」と思って調べてみたらそのとおりだったのですが、以下調べたことについ
スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」
スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロード 公式サイトにある「DOWNLOAD SOURCE」をクリック。 ３．使い方 jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
HTML5のWebsocketを使ったお絵かきチャット
HTML5のWebsocket（Node.js+Socket.IO）を使って、お絵かきチャットが行えるサンプルを作ってみました。Node.js+Socket.IOについては、下記のエントリーを参照してください。 Windows+Node.js+Socket.IO 環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。 １．サンプル動画 2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、チャットを行います。お絵かきの内容をページにアクセスしている別のブラウザに反映します。 下の表示は画面が小さいので、全画面表示にするかYoutubeのサイトで直接見た方がいいかもしれません。 ２．サンプルコード Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。 色々ネットを探しまし
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキュメントモード」が用意されています。これを利用すれば、IEの旧バージョンの表示や挙動などを確認できるようです。 ブラウザーモードの選択 ドキュメントモードの選択 が、公式サイトの「ブラウザーモード」と「ドキュメントモード」の説明（７項に掲載）を読んでも、それぞれの使い方が良く分かりません。 ということで、本エントリーで「ブラウザーモード」と「ドキュメントモード」を変更することで、なにがどうなるかを調査してまとめました。参考になれば幸いです。 １．サンプル 説明は後回しにして、「ブラウザーモード」と「ドキュメントモード」を変更すると何がどのように変わるか、簡単なサンプルを作ってみました。 サンプルページ このページをIE8またはIE9で表示して「ブラウザ
poEDIT の使い方
WordPress の日本語部分を変更する場合には、クロスプラットフォームな gettext カタログ（po ファイル）の編集ができる poEDIT が便利です。 以下、Windows での poEDIT の利用方法を紹介します。 １．ダウンロード poEDIT のページの「Download」をクリック。 Windows の場合は、ページ下にある poedit-1.x.x-setup.exe（エントリー作成時は 1.3.6） のリンクをクリック。 ２．インストール ダウンロードした exe ファイルをダブルクリックしてインストールを開始します。 「Next」をクリック。 「I accept the agreement」を選択して「Next」をクリック。 インストール先フォルダを指定（デフォルトは C:¥Program Files¥poEdit）して「Next」をクリック。 デフォルトのまま
小粋空間: Movable Type が WordPress に負けた本当の理由
Movable Type と比較して WordPress が人気なのは、「再構築が不要」とか「インストールが簡単」とか「デザインが豊富」とか、国内ブロガーの評価を頼りにしていましたが、下記の記事の一文を読んで、米国で Moovable Type の人気が急激に落ち、WordPress にシェアを明け渡した本当の理由を知りました。 Movable Type 4.0 ベータ、ローンチ―第3四半期にもオープンソース化へ MTユーザーとSixApartの間には波乱の歴史がある。Movable Typeは決してオープンソースプラットフォームではなかったのだが、MT 3.0のリリース以前は多くのユーザーがMTをオープンソースであるかのように扱っていた。2004年のMT 3.0のリリースと同時にライセンス契約が強制されるようになったことでユーザーコミュニティーからは激しい非難の声（私の声もかなり声高に混
小粋空間: Firefox・Netscapeで連続した半角文字を折り返す
FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せないという既知のバグがあります。当サイトでもMTタグをリストとして掲載している記事をFirefox・Netscape等で表示すると、画像のようにブロックからはみ出して表示されてしまいます。 Firefoxまとめサイト：URLっぽい文字列が右端で折り返されずレイアウトが乱れます FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。 あすかぜ・ねっと：url_breaker またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。 outsider reflex：Firefoxで長いURIを折り返す （本文中に
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
小粋空間: Sitemaps 0.90 用テンプレート（Google・Yahoo!・MSN サポート予定）
少し前の話ですが、Google sitemaps 0.84 として Google がサポートしていた Sitemaps が、0.90 より Yahoo! MSN のサポートが表明されました。 注：本記事は Movable Type 3.x の内容です。Movable Type 4 対応の Sitemaps 0.90 用テンプレートについては「Sitemaps 0.90 用テンプレート（MT4対応）」をご覧ください。 グーグル、ヤフー、MSが提携--ウェブインデックス作成機能を共通化へ Googleなど3社、Sitemapsをサポート - サイト管理者は要注目 サイトマップで検索エンジンフレンドリーなサイト - Sitemaps 0.90 XMLファイルの書き方 ということで、以前作成して放置状態だった 0.84 用のサイトマップ用テンプレートを 0.90 対応に作り直してみました。 １．テ
小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる
はてなブックマーク経由で「IE6 と IE7 の共存はできませんか？」という類の質問をいくつか頂きまして、ネットを検索してみたところ、簡単に共存できる方法が書かれたサイト（下記）をみつけましたので、本エントリーにて IE6 と IE7 を共存する方法をご紹介します。 Tredosoft：Internet Explorer 7 running side by side with IE6. (standalone) 「共存」というのはやや誇張した表現ですが、IE7 Standalone 版を本来の IE のインストールフォルダとは異なるフォルダにインストールするというものです。またインストーラを利用するので簡単にインストールできます。アンインストールも可能です。当然ながら対応 OS は Windows XPのみです。 上記のページには2つの方法が紹介されていて、このエントリーでは「インストーラ
バナー広告不要・アクセス解析ツール「Research Artisan」
普段のアクセス解析は Google Analytics を利用していますが、もうひとつ「Research Artisan（リサーチ・アルチザン）」という無料解析ツールに登録してみました。 このツールは、Web開発・インターネットサービスのリスタートシステム社が提供しているもので、2005年10月からβ版がリリースされています。「Artisan」とは「職人」を意味します。 「Research Artisan」で気に入ったのは主に下記の通りです。 バナー広告表示不要 無料アクセス解析ツールではバナー広告の表示を義務付けられているものが少なくありませんが、Google Analytics と同様、「Research Artisan」では表示不要です。個人的にはこれが一番ポイント高いです。 リアルタイム解析 アクセス解析情報をほぼリアルタイムに取得することができます。他の解析ツールでもリアルタイム
小粋空間: CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。 仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。 参考にさせて頂いたのは下記のサイトです。ありがとうございました。 1976design.com：Easy CSS drop shadows A List Apart：CSS Drop Shadows nlog(n)：アップロードした画像に影をつけるには POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる 今日の覚え書き：cssの設定で自動的に画像に影を付ける 花と写真とblogと。：画像に影をつけてみる。 最初の1976d
小粋空間: Lightbox JS で画像を表示する
サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。 ということでこのエントリーにてご紹介したいと思います。 2006.10.10 追記：機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。 ０．動作 公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。 表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。 以下、このスクリプトの設定方法です。 １．ファイルのダウンロード 動作に必要なファイル（スクリプト・スタイルシート・画像）をダウンロードします。 まず下記の
JavaScript エラーを解消する
Windows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。 エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。 ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります（後はスクリプト配布元に問い合わせましょう）。 2013/7/31追記：最新ブラウザを使った「JavaScriptエラーを表示・確認する方法のまとめ」をエントリーしました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
