画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」
JavaScriptでフォーカスのあたっている要素を取得できるHTML5の新機能「document.activeElement」について紹介します。 １．document.activeElementとは 「document.activeElement」からの引用です。 document.activeElementは冒頭に記したとおり、フォーカスのあたっている要素を取得するためのdocumentプロパティで、HTML5で策定された新機能みたいです。 HTML5 - 6.5.3 Document-level focus APIsより The activeElement attribute on DocumentHTML objects must return the element in the document that is focused. If no element in the Do
Github を Windows で利用する（Git GUI編）
Github を Windows で利用する方法を紹介します。このエントリーではGit GUIというツールを利用して、 リモートリポジトリの作成 ローカルリポジトリの作成 ローカルリポジトリのコミットとリモートリポジトリへのプッシュ ファイル更新時のコミットとリモートリポジトリへのプッシュ 等について紹介します。「githubの使い方が分からない」というビギナー（私も含め）のためのエントリーです。GUIのオプション設定など詳細な設定は割愛していますので予めご了承ください。 なお、以降の操作を行う前にgithubのアカウント取得は完了させておいてください。 １．ダウンロード githubのサイトにある「Help」をクリック。 右側のメニューから「Intermediate」の中にある「Install Git HTML help」をクリック。 Windowsの説明にある「Msysgit」をクリッ
jQueryでクリックした要素が何番目かを調べる方法
jQueryでクリックした要素が何番目の要素かを調べる方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．問題点 次のようなHTMLを想定します。 <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> たとえば、「ccc」のli要素をクリックしたときにli要素の中の3番目の要素であることを知りたいのですが、調べる方法が分かりません。 ２．クリックした要素が何番目かを取得する（その1） クリックした要素が何番目かを取得するには、index()を利用します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> jQuery(function
jQueryで新しい要素を作成する方法
jQueryで新しい要素を作成する方法を紹介します。 ここでは新しい要素を作成方法と、新しく作った要素にコンテンツを加える方法、そしてウェブページに追加するまでの手順を解説します。 このエントリーはビギナーの方向けの内容です。 １．新しい要素を作る jQueryで新しい要素を作る場合、たとえばp要素を作るには、次のように作りたいタグを直接記述します。 var paragraph = $('<p>'); 次のように記述してもOKです。 var paragraph = $('<p></p>'); 空要素で記述してもOKです。 var paragraph = $('<p />'); jQuery1.3以前では要素を必ず「/」で閉じていなければいけなかったため、一番最初の書き方はNGでしたが、1.4以降では閉じなくても大丈夫になりました。 ２．新しく作った要素にコンテンツを追加する 新しく作った要
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
Pocketボタンの設置方法
にわかに「Pocketが流行っている」ということで、当ブログにもPocketボタンを設置してみました。 １．Pocketとは 「Pocket」はクラウドブックマーキングサービスです。分かりやすくいえば「あとで読むサービス」で、Pocketのアカウントを取得してURLをクラウド上に保存することで別のPCやタブレット端末などで読むことができます。 Pocket 「Pocket」は老舗サービス「Read It Later」が改名したものです。 ということでPocketボタンの設置方法を紹介します。Pocketのアカウントと取得しなくても設置可能です。 Pocketボタンを設置することで、Pocketユーザーが簡単にブックマークできるようになります。それと同時に自分のブログがどの程度読まれているか知ることができるようになります。 冒頭のスクリーンショットは、当ブログで一番ブックマークが多いと思われ
JavaScriptでCSSの擬似クラスを設定する方法
JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。 １．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく（というか、そもそもプロパティではない）、 a:link a:visited a:hover a:active などの設定方法が不明です。 注：jQueryは使わない前提とします。 ２．擬似クラスを設定する 調べるとい
画像から類似画像や名前を調べる方法
画像から類似画像や名前を調べる方法を紹介します。 １．はじめに ネットで何かを調べるときに、調べたい単語や固有名詞が分かっていればある程度の情報が得られると思いますが、単語や固有名詞が分からない、あるいは名称そのものを調べたい場合、目的の情報にたどりつくことが難しいケースがあります。 が、調べたい対象の元情報として画像が手元にあれば、ある程度調べることが可能です。 ということで、近所で撮影した花の名前が実際何か分からなかったので、この写真だけを元情報として、ネットで花の名前を調べてみました。 ２．類似画像を検索する まず、この花と同じ画像がどこかのウェブサイトにアップロードされていないか検索します。Googleの画像検索ページにアクセス。 Google画像検索 カメラアイコンをクリック。 ネット上の画像で検索する場合、テキストフィールドに画像のURLを貼り付けます。 （クリックで拡大） ロ
YouTube動画にテキストを表示させる方法
ご存知の方も多いと思いますが、YouTube動画にテキストを表示させる方法を紹介します。 練習で作った動画として、Movable Typeプラグインのデモ動画をおいておきますのでよければご覧ください。タイトルやふきだしなどが表示されます。 １．アノテーション YouTubeでは自分のアップロードした動画に、タイトルやコメント、ふきだしなどのテキストや動画へのリンクを表示させることができます。 この機能は「アノテーション（annotation：あるデータに関連する情報（メタデータ）を注釈として付与すること）」と呼ばれるものです。 アノテーションでは次の5種類のオブジェクトを設定できます。 吹き出し メモ タイトル YouTube MUSIC WEEK ラベル ２．アノテーションの設定（吹き出し） ここではアノテーションを設定する簡単な例として、吹き出しを追加してみます。 まず、動画の管理画面
WindowsでEmacsが簡単に使える「gnupack emacs」
WindowsでEmacsが簡単に使える「gnupack emacs」の紹介です。 「gnupack emacs」の編集画面（クリックで拡大） １．Emacsとは EmacsはUNIX/Linux環境における高機能なスクリーンエディタです。UNIXやLinuxでの標準エディタといえばviですが、以前はEmacsを愛用していました。 WindowsでもEmacsを使いたいと思って、以前インストールしようと試みたのですが、cygwinのインストールなどが必要で、結構面倒だった記憶があります。 本エントリーで紹介する「gnupack emacs」は、ダウンロードしたアーカイブを解凍するだけでEmacsが使えるようになるという、かなりお手軽なツールです。 デフォルトでもある程度使えますが、Lispという言語で環境や動作をカスタマイズすることで、さらにさまざまな制御を行えるようになります。 ２．ダウ
「Important Notice Regarding Your Domain Name(s)」というメールについて
「Important Notice Regarding Your Domain Name(s)」というタイトルのメールの対応方法について紹介します。 １．メールについて 「Important Notice Regarding Your Domain Name(s)」という件名で、次のような内容のメールが届きました。SPAMメールではありません。 （クリックで拡大） 利用しているドメインに関する内容らしいのですが、英語が苦手な方はどのように対応していいのか分かりません。 メールの和訳は４項に掲載しています。 ２．メールが送信される理由 このメールは、次のような理由から送信されているものです。 正規の手続きを踏んで取得したドメインは、使用料を払い続ければ継続して使えそうな気がしますが、実はレジストリ（ドメイン名の登録申請を受け付け、データベースの管理やアクセス手段の整備などを行う管理組織）から
jQuery UI Soatableでソートしたテーブルの並びを保存する方法
jQuery UI Soatableでソートしたテーブルの並びを保存する方法を紹介します。 先日「jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする」をエントリーしましたが、実際には並び替えた順序を保持して使いたいケースも少なくないと思います。 ネットで検索するとjQuery UI Soatableの解説はヒットしますが、cookieに保存するまでの記事はみつかりませんでした。 ということで、ここではcookieを利用して並びを保存する方法を紹介します。 １．サンプル まず、cookieで並び順を保存するテーブルのサンプルを示します。 サンプル テーブルを並び替えたあと、リロードすれば並び順が保持されていることが分かります。 ２．解説 サンプルのコード（抜粋）は次のとおりです。赤色部分が「jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるように
小粋空間
現在販売中のWorkflowプラグイン（MT7版すべてのグレード）について、コンテンツタイプ別の権限設定に対応しました。 １．追加機能 ロール編集画面に「コンテンツデータの作成（承認つき）」および「コンテンツデータの承認」権限を追加しました。 ロール編集画面 この権限を選択した場合、すべてのサイトに適用されます（注：他のユーザーのコンテンツデータも一覧に表示） また、ロール編集画面のコンテンツタイプ別の権限設定欄にも、「コンテンツデータの作成（承認つき）」および「コンテンツデータの承認」権限を追加しました。 ロール編集画面のコンテンツタイプ別の権限設定欄 この権限を利用した場合、適用したコンテンツタイプのみがユーザーの左メニューに表示されます。 また、「コンテンツデータの作成（承認つき）」を適用したロールのユーザーは、コンテンツデータ一覧には自分のコンテンツデータしか表示されなくなります。
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($){ 直感的に「エラー防止用かな？」と思って調べてみたらそのとおりだったのですが、以下調べたことについ
ExcelやWordの起動が遅くなる問題の対処
ExcelやWordの起動が遅くなる問題と対処方法について紹介します。 １．問題点 数ヶ月前から、会社のPCでExcelやWordの起動が遅くなり、見たいファイルをダブルクリックしてからファイルが参照できるまでに数分ほどかかるようになってしまいました。 あまりに時間がかかるので開いたことを忘れてしまい、開いたときには何で開いたのか分からなくなることもありました（笑）。 解消しようと「Excel 開く 遅い」などのキーワードで色々調べたのですが、調べ方がよくなかったのか、本エントリーで紹介する対処方法がヒットしませんでした。 結局、社内で同じ事象になった方から対処方法を教えていただきました。 ということで、本エントリーで原因と対処方法を紹介しておきます。 ２．原因 起動が遅くなった原因は、「Office File Validation Add-In（Officeファイル検証アドイン）」です。
jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法
jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。 jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。 １．jQueryのslideToggle()でスライドさせる まず、jQueryのslideToggle()と使った
JavaScriptの正規表現で文字列を抜き出す「グループ化」
JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます（他に適切な方法があるようでしたらすいません）。 １．特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
iPhone/iPad/iPodとパソコン間でファイル転送が可能になる「iFunBox」
iPhone/iPad/iPodとパソコン間でファイル転送が可能になる「iFunBox」の紹介です。 iFunBox １．iFunBoxを使うきっかけ 先日、ボイスメモを使って長時間録音（1時間以上）をして、録音データをPCに転送しようと思ったのですが、ボイスメモの転送機能には「メール送信」または「メッセージ送信」しかなく、しかも送信可能な容量が数分と限られているようです。 iTunesを使って同期すれば転送できると思いますが、ネットで検索したところiFunBoxをみつけ、便利そうだったのでこれを使うことにしました。 ２．iFunBoxの機能 iFunBoxはiPhone/iPad/iPod用のファイルマネージャで、iTunesを介さずにデータ転送が行えます。PCからiPhone/iPad/iPodへの転送も可能です。 また、iTunesでは管理可能なデータが限られていますが、i-FunB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
