珍しい感じだったのでご紹介。軽く
目を惹かせる事が出来そうな感じ。
文章中の特定のキーワードを、
定期的に別のキーワードに置き換える
事が出来ます。アニメーションさせ
るので部分的に目立ちそうですね。

うまく説明できないので動作サンプルをご覧頂ければと思います。

dynamo.jsサンプル

スピードなども調整可能です。用途は限られますけどちょっと面白い。1~2KBと軽量なのもいいですね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script>
<script type='text/javascript' src='dynamo.js'></script>

本体とプラグインを読み込みます。セレクタがプラグイン内に書かれていたので必要に応じて変えてください。

で、設定はdata属性を使います。

<p>今日の天気は<span class="dynamo" data-lines="あめ,曇り,微妙" data-delay="2000" data-speed="100">晴れ</span>です。

インライン要素にdynamoというclassを与えてdata属性を使用。data-linesの中でコンマで切り替えるキーワードを羅列させます。

切り替わるまでの待ち時間はdata-delay、アニメーションスピードはdata-speedを使います。

ただ、シンプルなプラグインなので、文字数が違う場合に幅寄せしてくれる、といった配慮はありませんでした。ご利用は以下よりどうぞ。

dynamo.js

• Post by かちびと.net
• PR:WPデザインギャラリー
• impress.jsライクなダイナミックなプレゼンテーションを作成するjQuery依存タイプのライブラリ・jmpress.js
• 複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin
• jQueryでフォームのlabel要素をinput内に表示し、フォーカスしたらスライド、入力中は非表示にする

説明的なタイトルですが・・input要素
の中にlabel要素のテキストを表示させ、
フォーカス時にはアニメーションで右に
スライドし、入力中は非表示にする、と
いうのを実装できるjQueryのプラグイン
です。

lavel要素をプレースホルダにする事で省スペース化できます。

jQuery.superLabels動作デモ

以下動作サンプルです。IE7等でも動きます。

アニメーションエフェクトはeasingプラグインを使用します。というのを分かりやすくする為にやや派手なエフェクトに設定しています。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="jquery.easing.1.3.js"></script>
<script type='text/javascript' src="jquery.superLabels.min.js"></script>

本体とeasingプラグイン、jQuery.superLabelsを読み込みます。

$('form').superLabels({
       opacity:0.2,
       easingOut:'easeInBack',
       labelLeft:10,
       labelTop:7
});

で、あとはセッティングすれば完了です。labelのテキストの配置もこのオプションで設定します。どんなオプションがあるかはプラグイン内の冒頭にデフォルト値が設定されてるのでその辺をご覧下さい。エフェクトはeasingのデモで確認できます。

ブログとかのコメント欄なんかにも良さそうな気がしましたので紹介してみました。でも項目の多いフォームだと鬱陶しいかもですね。

jQuery.superLabels

• Post by かちびと.net
• PR:WPデザインギャラリー
• アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
• 郵便番号や地名を入力するだけでGoogleマップ検索できる地図コンテンツをjQueryで作る
• jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT

WordPressの関数で検索できて、使い方
も掲載してくれているリファレンスが
あったのでメモ。CODEXの方が情報は
確実ですけど、日本語版は稀に情報が
古い場合もありますので、保険的に
抑えておくことにしました。

関数のみに限定しているのでノイズも少なく、個人的には有用なサイトでした。

QueryPosts.com

hotというのは多分3.3で新たに追加された関数だと思います。右のfunctionsが既存関数のリファレンスページに通じるリンクです。

一覧ページではアルファベット順に関数と引数、戻り値、追加されたときの本体のバージョン、コア内の場所が一覧化されます。

関数の個別ページでは最低限の情報が書かれています。

ご利用は以下より。

QueryPosts.com

• Post by かちびと.net
• PR:WPデザインギャラリー
• jQueryプラグインでクールな表現を可能にしたリッチなフリーのWordPressテーマ「Fullscreen」
• USBメモリ内にWordPress用のローカル環境を5分で構築、持ち運び可能なフリーのソフトウェア・Instant WordPressが超便利っぽい
• 「WordPressのfunctions.phpによく書くコード」から必要なものだけを選べるサイトと、TinyMCE向けのLORUM IPSUMを発行できるサイト

プロパティがどのブラウザに対応
しているかを調べられる、という
検索式のリファレンスサイトです。
バージョン別になっているので、
動かなくて困った、という時に調
べて見ては如何でしょう。

休日なので軽い話題。プロパティで検索するとIE、Firefox、ChromeやOperaなどの対応状況をバージョンまで確認出来る、というリファレンスサイトです。

Browser Support

borderとかcolorといったプロパティで検索すると各ブラウザの対応状況がバージョン別で把握出来る様になっています。

スクリーンショット

↑ こんな感じでバージョンも把握出来る様になっています。緑色の部分が対応ブラウザですね。

また、左下のTEST CASESからデモも確認できます。

↑ かなり古いバージョンも掲載されています。が、IE6はありませんでした。個人的主観？

↑ 一覧ページもあります。

↑ 若干挙動が怪しいですけどオートサジェスト機能付き。

リファレンスサイトとしてはものすごく便利って訳でも無いですけど、かなり細かく調べてあるみたいですし、覚えて置いて損はしないかな、とは思いました。ただ、色的な意味でもう少し見やすいと嬉しいな。ご利用は以下よりどうぞ。

Browser Support

• Post by かちびと.net
• PR:WPデザインギャラリー
• WebサイトのソースやWhoisを確認→メール送信が可能な無料iPhoneアプリ・iSource Browser
• Webフォントを使ってみよう！@font-face 関連の情報いろいろ
• レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid

土曜日なので軽い話題。天気
アイコン型のWebフォントです。
スマートフォンのアプリ向け
に作られたみたいです。見た目
が可愛いのでアプリ以外にも
何かに利用したいですね。

天気アイコンフォント、というニッチなニーズに応えたフリーフォントです。スマフォのアプリなんかに良さそうな感じ。Webフォントにも利用できますが、PSDやEPSも用意されています。

Climacons

可愛らしい天気アイコンです。UNIQLO CALENDARにも似たようなテイストのアイコンが使われていましたね。

結構揃ってます。

フォトショやイラレで使えるデータもあります。

商用でも使っていいみたいですけど直に販売したりするのはやめてくれ、との事です。下部に規約あるので目を通してくださいませ。

Climacons Font

• Post by かちびと.net
• PR:WPデザインギャラリー
• TTFファイルから新しいWebフォントのWOFFファイルを作成する@FONT-FACE GENERATOR
• Webフォントを使ってみよう！@font-face 関連の情報いろいろ
• ブラウザにドラッグ&ドロップしたフォントでWebフォントの表示をテストできるブックマークレット・font dragr

クライアントワーク向けのWordPressの
プラグインです。管理画面のメニュー
はWebに疎いクライアントさんには世辞
にも使いやすいものではありません。
そんな管理メニューを使いやすくする、
という目的で作られたプラグインです。

同じような物は作ってあるんですけどこちらの方が作りが良かったので利用させて頂く事にしました。

CMS Dashboard

こういうやつです。こういう配慮があるのと無いのとでは大きく管理モチベーションが変わってきます。僕も未だに使いにくい管理画面のサイトは使う気になりません。初心忘れるべからず。思いやりとは相手の身になる事ではなく、自分の物差しを相手に押し付けない事ですよね。相手の身になる、って結局自分の考えの押し付けでしょうし。

表示するメニューも選択する事が出来るので、一度作れば使い回しが利くのでは。

英語ですけど、ソース見れば簡単に変更できるのが分かりますので全く問題ないと思います。こういうのを自由に使えるのがオープンソースの利点ですね。

CMS Dashboard

• Post by かちびと.net
• PR:WPデザインギャラリー
• Postやリプライ、メッセージやFavをダッシュボードで確認、Postも可能なプラグインWordPress Dashboard Twitter
• 1つの記事に対して、執筆者を複数ユーザー割り当てられるWordPressプラグイン・Co-Authors Plus
• WordPressの管理画面や投稿画面を使いやすくする７つのプラグイン

個人的に使いそうなのでメモ。
よくあるページ内スクロールを
固定させてドロップダウン式に
するjQueryプラグインです。
これはなかなか実用性があると
思います。

プラグインとしてはちょっと今更感あるかもですけど。

fixedTOC

位置固定+ドロップダウン+アコーディオン+ページ内スクロール、みたいなやつです。結構いいんじゃないかなと感じました。

サンプル用意しました。

Sample

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.fixedTOC.js"></script>
<script>
$('#toc').fixedTOC({
	menuOpens: 'click', // or 'mouseenter'
	scrollSpeed: 1000,
	menuSpeed: 300,
	useSubMenus: true,
	resetSubMenus: true,
	topLinkWorks: true
});
</script>

本体とプラグインを読み込んで設定。見れば分かると思うので説明は割愛します。

時間が無いので今日はこの辺で。

Fixed Table of Contents Drop-Down Menu (jQuery Plugin) | Impressive Webs

• Post by かちびと.net
• PR:WPデザインギャラリー
• 省スペースで印象的なプレゼンができる・Presenteer.js
• 複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin
• ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly

昨日知ったWebサービスに久々に感激
したので勢いでシェアします。Web制作
で必ずと言っていいほど必用になる
ダミー画像を生成してくれるサービス
なんですが、これが個人的にかなり
便利でした。

PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。

PLACEHOLD.IT

ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。

使い方

使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。

例えば350×150ピクセルの画像が欲しいなら

http://placehold.it/350×150

にアクセスすれば指定したサイズの画像が表示されます。

なので、

<img src="http://placehold.it/350x150" />

これで以下のようにダミー画像を表示させる事ができます。

勿論、細かいサイズ(http://placehold.it/649×226)でも問題なし。

※幅が狭いとサイズが見えなくなります。

かなり大きなサイズでも大丈夫そうでした。

http://placehold.it/3000×5000

※画像サイズが大きすぎるとエラーが出るっぽいです。

オプション機能:色の指定

オプションとして、カラー設定も出来ます。ドメイン→サイズ→カラーコード指定でOK

http://placehold.it/649×226/fdd5d5/333333

と書けば以下のように生成出来ます。

オプション機能:テキストの指定

また、テキストを変更する事も可能。

http://placehold.it/649×226/ef4343/ffffff&text=kachibito.net

ドメイン→サイズ(→カラー)の後に「&text=foo+bar」といったパラメーターを入れればいいだけ。

ただし、日本語は文字化けします。でもサイズが表示されてるのが個人的にはありがたい。

オプション機能:フォーマットの指定

フォーマットもpng、gif、jpgから選べます。何も指定しなければgifになります。

サイズより後方に拡張子を入れればOK。

http://placehold.it/649×226.png

http://placehold.it/649×226/fdd5d5.png/333333

http://placehold.it/649×226/fdd5d5/333333.jpg

以下のように生成されます。※jpgで作ってみました。

直リンクしてもいいらしいのですが、PLACEHOLD.ITが落ちたら表示されないのでDLさせてもらった方がいいかな。とにかく久々に個人的に膝を叩いたWebサービスでした。同じようなサービスがあるかどうか分かりませんが、僕は初見です。

以下よりどうぞ・・・というかいちいちサイトにアクセスせずとも生成できるのが利点ですね。(語弊ありますが)

素晴らしい。

PLACEHOLD.IT

【追記】
・同じサービスで、Dynamic Dummy Image Generatorというのもあるみたいですー！
・Ruby製のOSSとして同じ機能のアプリケーションを公開してくれた方がいらっしゃいました！→sig

• Post by かちびと.net
• PR:WPデザインギャラリー
• JPEG画像を劣化させずにサイズダウンし保存、ワンクリックでサクッとFlickrやPicasaに投稿できるWebサービス・JPEGmini
• HTMLファイルをアップロードすると、使われているclassやidを取り出してcssの雛形にしてくれるWebサービス・Bear CSS
• 色を指定すると、トーン表や同系色など、その色に関連した情報を抽出してくれるカラー提案サービス・colllor

カウントダウンタイマーの実装と
終了後に任意のイベントを発生
させられるjQueryのプラグイン、
jquery-countdownのご紹介です。
たまに見かけるやつですね。使用
頻度は高くは無さそうですけど。

ローンチ前のComing soonページなんかでたまに見かけるやつです。スクリプトも軽量です。

jquery-countdown

カウントダウンアニメーションを実装します。終了後にコードを実行させる事も出来ます。時計部分はCSSスプライトを利用した画像を使用しているようです。

動作サンプル

サンプルです。再生ボタンで動作テスト出来ます。

日をまたぐようなカウントダウンならもう一工夫必要ですね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

本体とプラグインを読み込みます。

$('#foo').countdown({
    image: 'img/digits.png',//時計の画像
    startTime: '00:10',//スタート時間。02:05:24:15なら2日と5時間24分15秒
    timerEnd: function(){ alert('bar!'); },//終了後に実行したいコード
    format: 'mm:ss'//時間のフォーマット
});

で、セッティング。コールバック処理はtimerEndオプションを使います。

用途はアイデア次第ですね。結構昔のプラグインみたいですが、初見だったのでメモ的に記事にしました。ライセンスはApache License 2.0だそうです。

jquery-countdown(via:webappers)

• Post by かちびと.net
• PR:WPデザインギャラリー
• 自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular
• ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch
• キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid

その場でサクッとUAを切り替える
事が出来るChromeエクステンション
User-Agent Switcherのご紹介です。
iPhoneやiPad、Androidだけでなく、
FirefoxやIEなどのブラウザにも
スイッチできます。

FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。

User-Agent Switcher

閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。

使い方

使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを選択するだけで直ぐに切り替えられます。

当ブログはUAでテーマを切り替えるようにしています。上記のようにiPadにすると別のテーマで表示されています。

エクステンションが嫌なら

エクステンションが嫌ならインスペクタからUAを変更できます。F12で開いて右下のギアアイコンをクリック→Override User Agentにチェックを入れるとUAを選択できますので選択してリロードすればOK。（17よりビルトインされたみたいです。詳しくは5509さんでどうぞ）

5509さんでは「インスペクタが開いている状態でのみ有効」とありましたが、Win Chromeでは閉じても有効になったままでした。僕が確認したChromeはVer.18ですので17から変更されたのかな。

UAで条件分岐みたいな施工をする際や、他サイトの調査等、簡単な表示確認の際に如何でしょう。インスペクタからでもいいんですけどリロードが面倒なのでエクステンションのほうが楽かなと思いました。どちらでもさほど変わりませんのでお好みでいいんじゃないでしょうか。ご利用は以下よりどうぞ。

User-Agent Switcher

• Post by かちびと.net
• PR:WPデザインギャラリー
• 100以上ものソーシャルサービスで「空いてるユーザー名」を一気に調べるCheck User Names
• ユーザーからの記事の寄稿を簡略化するWordPressプラグイン・User Submitted Postsと文字化けの直し方
• 見た目がFacebookのLikeboxっぽいTwitterウィジェットを作成出来るjQueryプラグイン・Twitter Follow Box