入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
JavaScriptの正規表現で文字列を抜き出す「グループ化」
JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます（他に適切な方法があるようでしたらすいません）。 １．特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
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 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
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」を公開します。 １．機能 現在の記事の直前または直後の記事情報を出力するには、previous_post_link()タグまたはnext_post_link()タグを使えばいいのですが、たとえば「現在の記事の前後5件ずつの記事を表示」といった場合、このテンプレートタグでは実現できません。 本プラグインを利用すれば、スクリーンショットのような現在の記事の前後記事のリストを出力することができます。 記事「test6」の前後記事を最大5件表示（test1が最も古い記事、test11が最新記事） 記事「test5」に移動した前後記事一覧の表示 記事「test7」に移動した前後記事一覧の表示 プラグインの動作はWordPress3.5で確認しています。古いバージョンでは正常に動作しない可能
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
Thunderbirdの返信時に引用文の上から入力できるようにする方法
Thunderbirdの返信時に、引用文の上から入力できるようにする方法を紹介します。 １．問題点 元メールを引用して返信する際、スクリーンショットのように、引用文の下にキャレット（カーソル）が表示されることがあります。 実際には引用文より前に挨拶などを書くことがほとんどだと思うのですが、これではキャレットを毎回引用文の前に移動しなければなりません。 私の場合、自宅だけでなく、会社でもThunderbirdを使っています。 で、自宅のPCにインストールしているThunderbirdでは、返信時に引用文の上にキャレットが表示されるのですが、会社のPCにインストールしているThunderbirdでは引用文の下にキャレット）が表示されてしまうため、調べてみました。 ２．引用文の上から入力できるようにする 引用文の上から入力できるようにするには、メニューバーの「ツール」→「アカウント設定」をクリッ
レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレイアウトになったときに、サイドバーを縦1列に並べるというものです。 また、メインコンテンツの高さが、サイドバー（上）の高さより低い場合でも、サイドバー（下）がメインコンテンツ側に回り込まないようにします。 さらに、各レイアウトは固定・リキッドのいずれも実現し、レイアウト全体はセンタリングさせます。 上記のレスポンシブWebデザインのサンプルを作るにあたってウェブを検索したのですが、同様のサンプルが
WordPressのTwenty Elevenテーマ解説：メインインデックスのテンプレート (index.php)
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 ２．「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用 例として、次のtable要素を利用します。
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」を紹介します。 最近ベータ版がリリースされた「Recommendations Bar」もさくっと表示できました（下のスクリーンショットは空記事のブログで試したものなので何も表示されてなくて正常です）。 １．機能 このプラグインを利用すれば、WoprdPressにソーシャルプラグインを簡単に表示できるようになります。 具体的には次のものが設定できるようです（バージョンは1.0.2）。 Social Publisher（タイムラインやFacebookページへの投稿） Like Button Subscribe Button Send Button Comments Recommendations Bar 以下、設定方法です。 ２．インストール WordPress管理画面
WP-DBManager プラグイン
WordPress のバックアップや復元を行なう WP-DBManager プラグインの使い方を紹介します。動作は WordPress 2.8.2 で確認しています。 １．プラグインのダウンロード lesterchan.net のサイトにアクセスします。 ページの少し下に、WP-DBManager があるので、 その右側にある「Download」をクリックして、プラグインアーカイブをダウンロードします（2009年7月現在のバージョンは2.50）。 ２．プラグインのアップロード・インストール アーカイブを展開し、wp-dbmanager フォルダを、wp-content/plugins ディレクトリにアップロードします。 そして、WordPress 管理画面の「プラグイン」より、「WP-DBManager」の「使用する」のリンクをクリックします。 設定後、次のように「Your backup
WordPressの「Wordbookerプラグイン」を使ったFacebookウォール投稿とタイトル・画像を自由に設定できるようにするためのカスタマイズ
WordPressでFacebookと連携させる「Wordbookerプラグイン」を使って、記事投稿と連動してFacebookページにウォール投稿を行う方法と、その際にタイトルと画像を自由に設定できるようにするためのカスタマイズを紹介します。 下のスクリーンショットの例では、「WordPressのTwenty Elevenテーマについて解説します。」という部分と本文左のTwenty Elevenテーマの画像について、記事ごとに自由に設定できるようになります。 あわせて、Wordbookerプラグインの簡単な設定についても解説します。 １．Wordbookerプラグインとウォール投稿時の問題について 「Wordbooker」はWordPressとFacebookの連携を行うためのプラグインです。主に次のような機能があります。 記事投稿や固定ページ投稿投稿と同時にFacebookにウォール投稿
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> １．プロトコ
プログラミング初心者がJavaScriptを1分で実行する方法
プログラミング初心者がJavaScriptを1分で実行する方法を紹介します。 JavaScriptはブラウザ上で実行できるので、ブラウザを利用します。ブラウザはIE8/IE9またはGoogle Chrome、Firefoxのいずれかを使います（FirefoxはFirebugのインストールが必要です）。 プログラミング初心者にプログラムのサンプルを見せるときにも使えるかもしれません。 １．IE8/IE9で実行する WindowsであればIE8/IE9がデフォルトでインストールされていると思うので、もっとも手っ取り早いです。 ブラウザを起動して任意のページを表示します。この状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリック。 （画面をクリックすれば拡大します。以下同様） 一番下の行に実行したいJavaScriptを記述してリターン。ここでは「document.wr
phpMyAdminでインポートできない大きなファイルを一気にインポートできる「BigDump」
phpMyAdminを使ったSQLファイルのインポートにはファイルサイズの制限があり、サーバ環境によってはサイズの大きいSQLファイルをインポートできない場合があります。 これを解消してくれるのが「BigDump」です。 BigDump BigDumpは、PHPベースのMySQLインポートツールです。 先日行ったサーバ移転で、100MBほどあるSQLファイルのインポートにこれを利用しました。約100MBほどあるSQLファイルを分割もせず、わずか1分ほどでインポートすることができました。 ということで以下、BigDumpによるSQLファイルのインポート手順を解説します。1つのSQLファイルサイズがかなり大きくても大丈夫なようですが、エクスポートするSQLファイルは７項の手順にしたがって出力したものを利用することを推奨します。 １．BigDumpのダウンロード BigDumpのページの右にある
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders １．サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル ２．プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 ３．HTML H
Movable Type 5を始める前に設定しておきたい10の項目
Movable Type 5を始める前に設定しておきたい10の項目を紹介します。 このエントリーは、「Movable Type 4を始める前に設定しておきたい10の項目」のMT5版です。MT4から機能が拡張・改善され、画面構成も変更されており、以前の記事では対応できなくなったので、全ての記述をこのエントリーで見直すことにしました。Movable Type 5を利用する場合の参考になれば幸いです。 掲載順序は、ブログ作成－サイトの設定－記事投稿－記事公開－コメント投稿という流れに沿って並べています。全ての項目が必須という意味ではありません。不要と思われる項目は適宜スキップしてください。 このエントリーではMTの基本機能だけを使った項目に絞っています。プラグインを利用した設定については別途エントリーしたいと思います。 また、ここに掲載していることよりも大事なことがあれば適宜追加しますので、ご連
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
