入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」を紹介します。 JSON2HTML １．概要 「JSON2HTML」はJSONデータをHTMLにマッピングするためのHTMLテンプレートエンジンです。 次のようなJSONデータがあるとします。 var data = [ { 'name': 'A', 'value': 10 }, { 'name': 'B', 'value': 20 }, { 'name': 'C', 'value': 30 } ]; たとえば、このJSONデータから次のようなHTMLを出力することができます。 <ul> <li>A (10)</li> <li>B (20)</li> <li>C (30)</li> </ul> jQueryプラグインとnode.jsパッケージの2種類が配布されています。 ２．ダウンロード JSON2HTML
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
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-
Googleの「良質なサイト」を分析してみた
2012年9月7日、Googleウェブマスター向け公式ブログで「良質なサイトを作るためのアドバイス」が投稿されていました。 良質なサイトを作るためのアドバイス 記事の中では、いわゆる「Pandaアップデート」で検索結果の掲載順位の見直しを行ったことに加え、掲載順位を改善するための「良質なサイト」の指標が挙げられています。 「良質なサイト」の指標 内容は抽象的なものが多く、具体的にどのような改善を行えばいいかは各人の判断に委ねられていますが、その中からいくつかピックアップして、個人的な見解をあげておきたいと思います。 認識誤りがありましたらどこかでつぶやいてください。 １．サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか 重複した記事が同一サイト内にあるのはNGと思いますが、テンプレートや記事のコピーを使い、類似した記事
Facebookが新しいタイムラインの機能をテスト
ブログヘラルド経由の情報で、Facebookが新しいタイムラインの機能をテストしているようです。 Facebook、新しいタイムラインの機能をテスト Facebook Begins Testing Redesigned "Timeline" View（元記事の原文） スクリーンショットは元記事に掲載されている新旧タイムラインです。上がテスト中の画面です。下のリンクをクリックすれば、さらに拡大した画面を確認できます。 変更前の画面 変更後の画面 ユーザー名やユーザー画像下に表示されているユーザー情報（生年月日・職業など）は情報がカバーに表示されるようです。また、「友人」「写真」「地図」「いいね！」はサムネイルからアイコンに変わってユーザー画像右に並ぶようです。 「Summary」にはユーザータイムラインの重要なイベントが掲載されるようです。 テストはユーザータイムラインのみのようですが、いず
iPhone4Sでバッテリーを節約・長持ちさせる方法のまとめ
いまさらな感じですが、iPhone4S（iOS5.0.1～5.1.1）でバッテリーを節約・長持ちさせる方法をまとめました。 かなり後発な記事なので既出の多くの記事を参考にさせていただきました。他の記事で紹介されている方法はこの記事にほぼまとめられていると思います。最近iPhone4Sを購入した方、これからiPhone4Sを購入する方の参考になれば幸いです。また、iPhone5でも効果はあると思います。 なお、２～１３項で説明する操作は、下のホーム画面の赤枠で示した「設定」をタップした状態で開始してください。 また、私はWiFiのみで利用しているのですが、ここに掲載した方法で改善しなかった「使用時間」と「起動時間」が同じになり、バッテリーが異様に消費されるという件があり、これについては別エントリーします。 １．起動中のアプリを終了させる iPhone4/4Sはマルチタスクなので、一度起動した
新しいデザインのFacebookページでカスタムタブ画像を変更する方法
新しいデザインのFacebookページでカスタムタブ画像を変更する方法です。「カスタムタブ画像」とはカスタムタブ（下）に表示する画像を指します。 １．サンプル 下のスクリーンショットで変更前後のサンプルを示すます。 変更前のカスタムタブ画像はアプリの編集画面で登録したものがそのまま利用されており、正方形でかつ左右に隙間が残っています。 変更前 変更後はカスタムタブ画像のエリアにぴったりおさまっています。サイズは幅111px、高さ74pxです。 変更後 以下、新しいデザインのFacebookページでのカスタムタブ画像の変更方法を紹介します。2011年3月時点の情報なので今後変更になるかもしれませんがとりあえず。 ２．カスタムタブ画像の変更 Facebookページの「管理者用パネル」をクリック。 「管理」→「Facebookページを編集」をクリック。 「アプリ」をクリック。 該当アプリの「設定
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
FacebookページへのIFrameタブ追加方法が変更
Facebookの開発者ブログで、「2012年2月1日にすべてのアプリケーションのプロフィールページを削除します」というアナウンスがありました。 Removing App Profile Pages この関係で、2011年12月10日以降に新しく作成したアプリケーションについては、「アプリのプロフィールページを見る」というリンクが表示されなくなりました。 2011年12月10日以前に作成したアプリケーションのメニュー 2011年12月10日以降に作成したアプリケーションのメニュー また、このリンクがなくなったことでFacebookへのIFrameタブ追加方法も変更されています。 ということで、FacebookページへのIFrameタブ追加方法および、アプリのプロフィールページの作成方法を紹介します。アプリの作成手順については省略しているので、「Facebookのタイムラインにアプリを追加す
Facebookが2012年1月1日に予定している変更点について
Facebookが2012年1月1日に予定している変更点について、開発者ブログの以下の記事で告知がありました。その中からいくつかの項目について情報展開します。 Platform Updates: Operation Developer Love １．FB.Data.* JavaScript SDK APIの以下のAPIが2012年1月1日からサポート対象外となり、新しいアプリケーションで利用できなくなります。 FB.Data.query FB.Data.waitOn ２．FB.Canvas.setAutoResize 以前もこのブログで情報展開しましたが、スクロールバーを非表示にする「FB.Canvas.setAutoResize」が「FB.Canvas.setAutoGrow」にリネームされ、「Fb.Canvas.setAutoResize」はAPIとして削除されます。 関連記事：Fac
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
新しくなった公式Twitterボタン（ツイートボタン）のデザインを修正する
Twitterのリニューアルに伴い、公式Twitterボタン（旧ツイートボタン）の機能とデザインが変更されたようです。Twitterボタン作成ページもリニューアルされています。 新しい作成ページでは、これまでの「リンクを共有する」ボタンの他に「ハッシュタグ」「フォロー」「@ツイート」が作れるようになりました。 Twitterボタン これにより、これまでブログに設置していた公式Twitterボタンのデザインも変わっています。 本エントリーではデザインを修正する方法をいくつか紹介します。レイアウトの崩れ具合によっては他の修正が必要かもしれませんので予めご了承ください。 １．ボックスタイプの幅を修正する（その1） リニューアル前からブログなどに設定しているボックスタイプ（垂直タイプ）はリニューアル後に次のような表示になっています。 これを次のようにコンパクトなサイズに修正します。 修正するには次
WordPressにFacebookのOGP（Open Graph Protocol）を簡単に設定できる「WP-OGP」プラグイン
ご存知の方も多いと思いますが、WordPressにFacebookのOGP（Open Graph Protocol）を簡単に設定できる「WP-OGP」プラグインを紹介します。 ブログにOGP（meta要素）を設定することで、例えばFacebookのウォールなどからブログをリンクされたときに、ブログの情報をFacebookのプログラムに正しく伝えることができます。 以下、設定方法です。 １．プラグインのダウンロード・インストール 管理画面の「プラグイン」→「新規追加」をクリック。 キーワードに「WP-OGP」を入力して「プラグインの検索」をクリック。 「いますぐインストール」をクリック。 インストールが完了したら「プラグインを有効化」をクリック。 これでサイトの(X)HTMLにmeta要素が追加されます。 自動インストール機能が使えない場合は、WP-OGPのページの「Download ver
Facebook開発者向けツール「Graph API Explorer」徹底解説
先日、Facebookから開発者向けツールGraph API Explorerがローンチされました。 Graph API Explorer 本エントリーではGraph API Explorerの使い方を、ウォールにメッセージを投稿する方法を中心に解説します。 １．Graph APIとは Graph APIはFacebook上のデータにアクセスするためのAPIです。実際にはプログラム上でGraph APIを起動するのですが、Graph API Explorerを使えばプログラムを作成する前にGraph APIの動作確認を行うことができます。 Graph APIの詳細は以下の公式サイトを参照してください。 Graph API ２～５項でウォールにメッセージを投稿する手順を説明しますので、Graph API Explorerにアクセスした状態にしてください。 ２．アクセストークンの取得とパーミッ
Facebookのiframeタブ用ページをモジュール化する
Movable Typeでiframeタブ用ページを管理する場合のモジュール化について紹介します。 １．モジュール化とは モジュール化とは「部品化」という意味で、テンプレートで共通的に利用できる部分をMovable Typeのテンプレートモジュールとして切り出し、部品化します。 iframeタブを使ったページでは、HTML5のヘッダ・フッタ部分、JavaScriptの読み込みや「fb-root」のdiv要素など、共通化できる部分があるので、本エントリーではそれらをモジュール化してみます。 ２．iframeヘッダーモジュール まず、次のような「iframeヘッダー」というテンプレートモジュールを作成します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf
HTML5+RDFaについて
このブログをHTML5に変更してみました。最近流行のFacebookのOGP（Open Graph Protocol）も設定しました。 HTML5に変更した理由は、OGP（Open Graph Protocol）を設置したときにvalidなHTMLにしたかったからなのですが、そもそもproperty属性はHTML5の属性ではなく、RDFaの仕様のようでした。勉強不足ですいません・・・。OGPを設置するにあたってHTML5にする必要はないようです。 ただしOGPを設置する場合、html要素に「xmlns:prefix」というネームスペースに対応した属性を設定する必要があります。FacebookのOGPに対応する場合は「prefix」に「og」を設定します。この設定はhtml5とかxhtmlには依存しません。 <html lang="ja" xmlns:og="http://ogp.me/ns
FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する
Facebookアプリを利用して、FacebookページにMovable TypeやWordPressのCMSを使って最近のブログ記事を表示する方法を紹介します。 以下はサンプルページです。最近のブログ記事5件の概要とブログ記事1o件のタイトルを表示しています。 サンプル 「FacebookページにブログのRSSフィードを表示する」ではRSSフィードを表示する方法を紹介しましたが、本エントリーの方法であればより自由なデザインでページをカスタマイズすることができます。 １．Facebookにブログ記事を表示する仕組み イメージを図に示します。 Facebookにブログ記事を表示するには、まず利用しているCMSでFacebookに表示したいページをテンプレート等を使ってhoge.htmlなどのファイル名で出力します（①）。 次に、Facebook側で出力したページを表示するためのFaceboo
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
Movable Type 4 を始める前に設定しておきたい 10 の項目
Movable Type 4 を始める前に設定しておきたい 10 の項目を紹介します。 このエントリーは、バージョン3 の時代に投稿した「Movable Type を始める前に設定しておきたい 10 の項目」のMovable Type 4 版です。今でもそちらのエントリーにトラックバックやブックマークが寄せられ、大変嬉しいのですが、バージョン3 から Movable Type の機能が大幅に拡張・改善され、画面構成も変更されており、以前の記事では対応できなくなってしまったので、全ての記述をこのエントリーで見直すことにしました。Movable Type 4 を利用する場合の参考になれば幸いです。 設定が重要と思われるものから順番に並べています。前回同様「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 また、項目によっては運営中に設定するものもあります（２項後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
