ソーシャルボタンの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
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は使わない前提とします。 ２．擬似クラスを設定する 調べるとい
「jQuery」という名称が本当は「JSelect」だった件
ふと思い立って、「jQuery」という名称の由来・語源を調べてみました。 １．jQueryの由来について ネットで検索してみると、jQueryの開発者であるJohn Resigさんの2006年1月16日のブログ記事「BarCampNYC Wrap-u」のコメント欄に、それらしきコメントが残っていました。 BarCampNYC Wrap-up 以下、コメントのやりとりの要約と原文を引用します。要約が間違っていたらつぶやいてください。 Kris De Volderさんのコメント（2006年1月19日12:02） Johnさん、あなたは「jQuery」を命名するときにウェブでその名称が使われていないか調べましたか？すでに2つのことで使われていて、その1つは私と私の学生が開発したEclipseのプラグイン「JQuery」で使っています。 Did you do a websearch before
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
TwitterのAPI 1.1で取得したユーザーのJSONデータからAtomフィードを作成する
Twitter API 1.1で取得した、任意のユーザーのタイムライン（JSONデータ）からAtomフィードを作成する方法を紹介します。 Twitter API 1.1で取得したJSONをAtomに変換したサンプル １．Twitterアプリケーションの作成 Twitterアプリケーション開発のページを開き、Twitterのアカウントでサインイン。 右上にある「Create a new application」をクリック。 「Application Details」のName、Description、Websiteを設定。Callback URLの設定は不要です。 下の方にある「Yes, I agree」をチェックし、CAPTHCAを入力して「Create your Twitter application」をクリック。 次の画面の下にある「Create my access token」をクリ
jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ
jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。 １．機能 名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。 JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。 ２．プラグインのダウンロード githubの「jquery-cookie」のページにある「ZIP」をクリック。 これでアーカイブをダウンロードできます。 ３．基本的な使い方 jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jqu
はてなブックマークでタイトルを一覧表示するブックマークレット
はてなブックマークでタイトルを一覧表示するブックマークレットを作りました。 １．作った理由 2013年1月8日、はてなブックマークのデザインがリニューアルされました。 リニューアル前 リニューアル後 個人的に、はてなブックマークを読むときは、「人気エントリー一覧」のページをスクロールしながらタイトルだけをざっと見て、読みたいと思ったものを別タブで開いていき、あとでそれらをゆっくり読む、というスタイルをとっています。 リニューアル後は、ページに表示されるタイトルの数が減ってしまっていて、スクロール量が増えました。 また、順序なしリストをinline-blockで横並びになり、タイトルだけの表示もできないようなので、タイトルを追うための視線の移動が以前より大きくなりました。 ２．ブックマークレット ということで、タイトルを一覧表示するためのブックマークレットを作ってみました。 一覧表示 上のリ
Amazonの梱包を評価する方法
Amazonで商品を発注すると、ちょっとした小物でも大きなダンボールに入ってきたり、1つの箱に収まるものが複数の箱に分かれてくる、いわゆる「過剰包装」があります。 サービスがすさまじい『Amazon』の梱包 それが解消できるかどうか不明ですし、むしろ現状のままでいいんじゃないかという意見もあると思いますが、Amazonの梱包状態を評価する方法を紹介します。 １．梱包の評価方法 Amazonでやや大きめのダンボールで荷物が届いた場合、ダンボールのどこかに、次のように「梱包状態はいかがでしたか？」という表記があります。 その横に表示されたQRコードを読み取ってサイトにアクセスすると、注文した商品について、梱包された単位で評価を行うことができます。 QRコードが掲載されていない梱包についても、アクセス先で評価対象になっていると思います。 ２．評価用QRコード 評価用のQRコードを掲載しておきます
WordPressテーマ（レスポンシブWebデザイン対応）
レスポンシブWebデザイン対応のWordPressテーマの配布を開始します。 １．レスポンシブWebデザイン対応 今回配布するテーマでは、レスポンシブWebデザイン対応として次の6つのレイアウトを提供します。カッコ内の英文字はカラムレイアウトを切り替える文字列になります。カラムレイアウトの変更方法については６項で解説します。 3カラム固定レイアウト（layout-three-column） 3カラム固定レイアウト・右サイドバー（layout-three-column-right） 2カラム固定レイアウト・左サイドバー（layout-two-column-left） 2カラム固定レイアウト・右サイドバー（layout-two-column-right） 3カラムリキッドレイアウト（layout-three-column-liquid） 3カラムリキッドレイアウト・右サイドバー（layout-
jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
CSSでoption要素を非表示にするときの不具合について
CSSでoption要素を非表示にするときの不具合について紹介します。 タイトルでは「不具合」としていますがブラウザの仕様かもしれません。認識誤りでしたらどこかでつぶやいてください。 １．option要素を非表示にするケース フォームの動作によっては、option要素の一部を非表示にしたい場合があると思います。 たとえばフォームに2つのselect要素があり、1つめのselect要素を選択した結果によって2つめのselect要素のoptionの表示を変更したいときなどです。 このエントリーでは事象の紹介だけにとどめ、解決方法は別エントリーしたいと思います。 ２．サンプル 事象を発生させるサンプルを作りました。 サンプル サンプルでは次のHTMLマークアップを用いています。 <select name="foo"> <option value="" selected="selected">-選
ノンプログラマーのためのjQuery生成ツール
変更履歴 2013.03.13 toggleClassが2つ表示されていたため、1つに修正しました on/offを追加しました（1.7）※イベントには追加していません。別途対応します addBackを追加しました（1.8） finishを追加しました（1.9）
PayPalの本人確認が意外に面倒な件
PayPalアカウントを利用されている方には、2012年の4月頃からPayPalからメールで本人確認の通知が順次届いていると思います。 本人確認が必要な理由は、PayPalが新たに「資金移動業者」として事業を展開していくにあたって「犯罪による収益の移転防止に関する法律」に基づき、本人確認を行うことが義務付けられているためです。 ということで、私にもPayPalから本人確認の連絡がきました。意外に面倒だったので、このエントリーで実際に行った作業をまとめておきます（2012年11月時点でまだ完了していませんが）。 なお、PayPalを支払いだけに利用している方は不要のようで、支払いを受け取る人だけが本人確認が必要なようです。 １．本人確認手順 本人確認を行う手順は以下の2つのみです。 ステップ1：本人確認書類をPayPalに提出（アップロード）する ステップ2：本人確認書類確認後、PayPal
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
ブログ記事に対するTwitterの全ツイートを一発で見れるブックマークレット
ブログ記事に対するTwitterの全ツイートを一発で見れるブックマークレットを紹介します。エゴサーチ用にどうぞ。 １．正規の手順でブログ記事のすべてのツイートを見る 正規の手順でブログ記事に対するすべてのツイートを見るには、まずブログ記事に設置したツイートボタンの数字の部分をクリック。 これで最近のツイート一覧が表示されますが、すべてのツイートが表示されるわけではないので、ページ一番下までスクロールして「すべてのツイートを見る」をクリック。 これですべてのツイートが見れます。 なお、「すべてのツイートを見る」はリアルタイム表示のものらしく、過去のツイートは参照できないようです。が、経験上、直近の記事であればすべてのツイートが表示されると思います。 ２．ブログ記事のすべてのツイートを一発で見るブックマークレット １項の手順で目的のページにたどり着くのはちょっと面倒です。ということで簡単なブッ
レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレイアウトになったときに、サイドバーを縦1列に並べるというものです。 また、メインコンテンツの高さが、サイドバー（上）の高さより低い場合でも、サイドバー（下）がメインコンテンツ側に回り込まないようにします。 さらに、各レイアウトは固定・リキッドのいずれも実現し、レイアウト全体はセンタリングさせます。 上記のレスポンシブWebデザインのサンプルを作るにあたってウェブを検索したのですが、同様のサンプルが
Googleトレンドの使い方
Googleトレンドが、Insights for SearchとGoogleトレンドの統合により、2012年9月にリニューアルされました。 Googleトレンド ということで、基本的な使い方も含めて各機能について紹介します。 リニューアルに関する参考記事： Insights into what the world is searching for -- the new Google Trends Insights for SearchとGoogleトレンドの統合 １．使い方 Google検索と同様、トレンドを調べたいキーワードをフォームに入力します。 新しい検索結果画面は次のようになっています。グラフ類はHTML5ベースのものに変更されているようです。 グラフのA～Gはニュースのヘッドラインで、点線は今後の予測です。それぞれチェックボックスで表示・非表示を切り替えられます。 A～Gの部分を
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
あらゆる種類のファイル形式を変換できるサービス「Zamzar」
あらゆる種類のファイル形式を変換できるサービス「Zamzar」を紹介します。 Zamzar 「あらゆる」というのはちょっと言い過ぎかもしれませんが、３項に示すように、非常に多くのフォーマットに対応しています。 例えば、メールで添付ファイルを受信したけれども、専用のアプリケーションをインストールしていないと表示できないフォーマットだった場合などに有効です。 また、ネット上のファイルをダウンロードする際に形式を変換したり、サイズの大きなファイルを送信するときにも使えます。 １．サンプル ここではオープンソースのオフィススイート「Libre Office Writer」で作成したODT形式のファイルをPDFに変換する例で示します。厳密にはLibreOffice WriterからはPDFエクスポートが可能ですが、サンプルなのでツッコミなしで。 なぜ、このケースをサンプルにしたかという理由ですが、会
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
