WordPressので使えるアイキャッチ画像。みなさん使っていますか？

アイキャッチ画像とは、投稿にサムネイル画像を追加する機能なんですが、
設定しておくと、記事のヘッダー画像としてなかなか便利に使えます。

しかしながら、プラグインで携帯・スマートフォン対応すると標準では表示されません。

ktai styelやwp touchというプラグインでも表示するように対応したのでやり方をご紹介します。

Canvasを使ってスタイリッシュなテキストが描画できる「CanvasText」

HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、
テキストをリッチに表示したりするなどの細かな使い方もできたりします。

CanvasTextというJavaScriptライブラリを使うと、
HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。

使い方

//インスタンスを作成
var CanvasText = new CanvasText;

//共通の処理を記述
CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

//blueクラスを作成して、属性を指定
CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

//pinkクラスを作成して、属性を指定
CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

//Canvasに描画するテキストを指定。ここでblueクラスとpinkクラスを使用します。
var text = 'I like <class="blue">blue</class> color but I also like <class="pink">pink</class> color!';
text += '<br />Nevermind, I prefer <class="blue">blue</class> to <class="pink">pink</class>... !'; 

//ここで描画します。
CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

HTML5構文のスニペットを使う時に便利なバンドルがあったので自分用にメモです。

TextMate使いの方は入れておいても良いかもしれません。

以下のコマンドで登録できるようになりました。

cd ~/Library/Application\ Support/TextMate/Bundles
git clone http://github.com/johnmuhl/html5.tmbundle.git
osascript -e 'tell app "TextMate" to reload bundles'

吹出し型ツールチップを設置できるjQuery「grumble.js」が面白そうだったのでご紹介します。

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。

吹出しには背景画像が指定されているので、
CSSを変更してオリジナルの吹出しにする事も簡単そうでした。

使い方

以下のようなスクリプトを追加する事で表示する事ができました。

$('h1').grumble({
	text: 'ここにメッセージを入れます!',
	angle: 85,
	distance: 100,
	showAfter: 500
});

オプションの説明

• text:表示する文章
• angle:角度
• distance:距離
• showAfter:指定した秒数後に表示（ミリ秒）

オプショには他にもコールバック処理なんかもありました。
詳細&ダウンロードは下のリンクからどうぞ！

クレジットカードの入力フォーマットをチェック出来るjQueryプラグイン「Smart Validate」

以下のようなコードで簡単にチェックが出来るようになりました。

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
    if (!isValid) {
        alert('クレジットカードのフォーマットを正しく入力してください。');
        return false;
    }
}

ドロップダウンもいい感じにカスタマイズされています。
実際にカードが有効かどうかのチェックはできませんが、商品を購入する前にこういったチェックがあれば親切ですよね。

興味のある方は下のリンクからどうぞ。

ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、
そこまで手をかけたくない小規模の案件も多いですよね。

そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。

CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。

CSVの形式

CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。
データは2行目以降でなければいけないようですね。

文字列の中に,(カンマ)を使いたい場合には、;（セミコロン）区切りでもOKなようです。

使い方

使い方はいたって簡単でCSVのパスを指定するだけです。

var members = Csonv.fetch("path/to/csv/family.csv");
var result    = JSON.stringify(members, null, 2);
alert(result);

↑これでJSON文字列が取得できるようになります。

プログラムの知識も殆ど必要なくできるので、ちょっとしたときに活躍してくれそうですね。

詳細&ダウンロードは下のリンクからどうぞ。

WordPressで画像をアップする際に、標準では画像に直リンクされるようになっていますが、
これを解除する方法を自分用にメモしておきます。

オープンソースのGoogle Readerクローン「Tiny Tiny RSS」

個人的にはRSSリーダーにGoogle Readerを使用しているが、
自前でフィードリーダーを構築したい場合もあるかもしれない。

データを外部に置きたくない場合や、Googleが嫌い（？）という方、
または自前でフィードリーダーを構築して様々なデバイス用にカスタマイズしたい場合にどうだろうか。

機能

マルチユーザモード、国際化、コンテンツフィルタ、記事のスコアリング、モバイル用のインターフェースなど多機能な作りになっている。

ソースコードはPHPで作られており、データベースにはMySQLやPostgreSQLを使用できるようになっている。

実際の動きはデモを見ていただくのが早いだろう。
デモ

Google Readerからエクスポート、インポートも出来るので、移行も簡単だ。

気になった方は試してみてはどうだろう。

カラーピッカーをお手軽に設置できるJSライブラリ「JSColor」をご紹介。

色情報をフォームに入力する際に、ピッカーがポップアップして
簡単に指定する事が可能になります。

テキストエリアの背景が指定の色になるので、見た目にも分かりやすく出来ています。

使い方はとっても簡単で、
JSを読み込んでテキストエリアにclassを指定するだけになっていました。

<script type="text/javascript" src="jscolor.js"></script>
<input class="color" value="66ff00">

対応ブラウザもIE6やFF2からiPhoneのSafariまで、クロスブラウザ対応されています。

詳細&ダウンロードは下のリンクからどうぞ〜。

スマフォでの動画再生の際に、キューポイント（再生開始位置）を指定できるライブラリが良さそうなのでメモ的にエントリー。もちもんPCもOKですよ。

「Cuepoint.js」はHTML5のビデオに、
字幕とキューポイントを追加するためのオープンソースのJavaScriptです。

デモサイトを訪れると動画が埋めこまれているのですが、
画面の下にあるサムネイルをクリックすると、
それぞれに対応した箇所から再生が開始されるようになっています。

長い動画を見せたい時に、見て欲しいポイントを分かりやすくできて良いですよね。

とても単純な処理なのですが、何回かお仕事でこういうものを探していたので
そのうち使いそうです。

興味のある方は下のリンクからどうぞ。