jQueryプラグイン 『jQuery blrblrTumblrImage』

投稿日: 2012年3月7日 作成者: ethertank

Tumblrの画像ポストをブログパーツ的に表示するjQueryプラグインを作りました。

ダウンロード

DEMO

jQuery blrblrTumblrImage – jsdo.it – share JavaScript, HTML5 and CSS

基本的な使用方法

  1. jQueryと当プラグインを読み込む。
  2. htmlに以下のコードを記述。 
    <div id="tumblrSlideShow"><div>
    ※対象ボックスのコンテンツ幅は250px 以上になるようにして下さい。 
    <script>
$(function() {
    $("#tumblrSlideShow").blrblrTumblrImage({
        username : "Tumblrのアカウント名（※必須）",
        num : 10
    });
});
</script>
  3. 楽しい。

オプション

プロパティ 説明
username 読み込みたいTumblrのアカウント名を文字列として（引用符で括って）指定（※必須）
start 最新ポストからの取得開始位置を数値で指定(初期値 : 0）
num 取得件数を数値で指定（初期値 : 10 / 最大値 : 50）
interval スライドショーの実行間隔を数値(ミリ秒)で指定（初期値 : 6000）
speed アニメーション（slideDown / slideUp）のスピードを数値(ミリ秒)もしくは “slow”、”fast”、”normal”の何れかのキーワードで指定（ 初期値 : “slow”）
minHeight 表示領域に確保する最低限の高さを指定（初期値 : 200px / ※v0.1.1より）

※username 以外のプロパティは任意です。指定が無かった場合は表に記載されている初期値が適用されます。

注意点として、例えば２カラムレイアウトのサイドバー等に貼る場合で、サイドバーの高さがメインカラムと同じかそれ以上の高さが有る場合、ウィンドウのスクロールバーを下に下げてメインコンテンツ下部を閲覧している時にスライドショーに縦長の画像が表示されると、ページスクロールが発生してしまい閲覧の妨げになる事があります。その場合、対象要素に以下の様なスタイルを指定しておくといいでしょう。

#tumblrSlideShow {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}

これにより、250px以上の縦長画像が表示された時には対象ボックスに縦スクロールバーが表示され、ページのスクロールの発生を抑える事が出来ます。元々、プラグイン内で min-height に 200px を指定しているので、これにあわせ、max-height を 200px、もしくはmax-height の代わりに height を 200px としておくのも良いでしょう。その場合、かかる問題は完全に発生しなくなります。表示用の要素の幅が 250px(+スクロールバーの幅) しかない場合、オーバーフロー発生時に縦スクロールバーの幅のせいで横スクロールバーも表示されてしまうので、overflow-x: hidden としてこれも回避します。

他の投稿種別を含むとポストごとの内容量の差異が大きくなり、スライドショーには適切では無いと思ったので画像限定にしました。もっともニーズがありそうなのが画像なので、これでもいいかなと。また、全種別に対応したプラグイン、選択可能なプラグインはどうしてもファイルサイズが大きくなるので、作るとしたら別プラグインとして作った方がいいかなーと。

使ってね(｀・ω・´)

gradient は HSL で書いて HEX に変換するといい

投稿日: 2012年2月25日 作成者: ethertank

複雑なCSSグラデーションは、より直感的に書けるHSLで記述し、コード量の少ないHEXに変換するといい。好みによってはRGBからHEXでもいいかもしれないが、RGBは彩度・明度をコントロールしにくいのが欠点。

CSSを適用したページをChromeで表示。gradientが適用された要素上で右クリックから「要素を検証」を選択。インスペクタ内の歯車のアイコンをクリックすれば、「元の記述」、「HEX」、「RBG」、「HSL」の相互変換が可能。

簡単にHSLからHEXに変換できる。
ここを右クリックしてみてやってみて！（・∀・）

後はCSSファイルに複数回コピーアンドペーストし、ベンダープレフィックス部分を書き換えればいい。注意点としては、意図を以って記述した「rgba(255,255,255,0)」や「hsla(0,100%,100%,0%)」などが 「transparent」に書き換えられてしまう事。アルファチャンネルが 0 なので単体色では 「transparent」 と同じ様に透明として表示されるが、グラデーションの場合は途中の色に影響がある。ここは修正する必要がある。

以前に、linear-gradient の方向の指定が「top」から「to bottom」のように変更されている。プレフィックス無しのものを併記する場合はこれも注意。ちなみに、多くのオンラインジェネレーターなどもこの変更に対応していない。上記の方法などで作成したコードから、SASS / LESS の mixin や、自作ツールなどでうまく変換するのもいいかもしれない。

小ネタでした。

jQueryプラグイン『jQuery RollCake』

投稿日: 2012年2月23日 作成者: ethertank

またロールオーバー用のjQueryプラグインを作りました。前回のものと何が違うかというと、対象セレクタを 「img要素」に指定しても、「img要素の親要素」に指定しても動作する点。また、a要素に指定した場合はTABキー操作によるフォーカス時にも動作するように改良。やや多目的になったので、別プラグインとしました。

つかいかた

  1. 通常時のものとマウスオーバー時のものを作成し、それらを使用してマークアップ。マウスオーバー時の画像のファイル名は、通常時のものに接尾辞として “_on”（或いは任意の文字列）をつけたものにし、これらのセットをそれぞれ同ディレクトリに格納。
  2. jQueryと当プラグインを読み込む。
  3. HTML内に以下のコードを記述。 
    <script>
$(function(){
    $("対象img要素、またはその親要素を示すセレクタ").jQuery_RollCake("任意の接尾辞※省略可");
});
</script>
  4. ロールケーキ食べたい。

リンク画像など、フォーカス時の動作が必要なケースでは親となるa要素を示すセレクタを。単なるギミックである場合などは対象にしたい img要素を指し示すセレクタを指定すればいいでしょう。セレクタをa要素などにした場合は、子要素のimgを探し、そのsrc属性を変更するという動作になっています。

現在閲覧中のページを指し示す為にhover時の画像にしたい場合は、予め接尾辞付きの画像を指定しておきます。この画像に対しては動作しないようになっています。

対象をa要素、或いはimg要素に絞った同種のプラグインと比べ、理論上はやや動作は遅くなりますが、体感上は特に問題となるレベルでは無いと考えます。

対象イメージを先読みする為のコードも仕込んであります（これは前回のものも同様）
これにより、初回 hover/focus 時に画像の読み込みが発生し一瞬画像が消えるいったありがちな問題が発生しないようになっています。

jQueryプラグイン『jQuery et_ImageRollOver』

投稿日: 2012年2月11日 作成者: ethertank

マウスオーバー時に指定画像の src 属性に指定した suffix（接尾辞）を付与する、所謂「ロールオーバー」用の jQueryプラグインを作ってみました。まだ色々と満足に出来てないけど、とりあえず。

ダウンロード: jQuery_et_ImageRollOver.js

基本的な使い方

  1. 通常時のものとマウスオーバー時のものを作成し、それらを使用してマークアップ。マウスオーバー時の画像のファイル名は、通常時のものに接尾辞として “_on”（或いは任意の文字列）をつけたものにし、２つを同ディレクトリに格納。
  2. jQuery と、このプラグインを読み込む。
  3. 以下のコードを HTML に記述。 
    <script>
$(function(){
    $("対象とする画像を示すセレクタ").jQuery_et_imagerollover("任意の接尾辞");
});
</script>
  4. 楽しい。

オプションは現段階では省略可能な suffix(※文字列リテラルで指定) のみ。省略すると “_on” になります。画像へのパスは、相対パスでも絶対パスでも動作。但し適切な拡張子の無いものはアウト。通常時とマウスオーバー時の画像のファイル名及び拡張子は、大文字/小文字 含めて一致させておいてください（※接尾辞部分以外）

v0.0.1

…ソース中のあやしげなマジックナンバー “5″ は、画像のsrc属性から「ドット + 拡張子」を抜き出すためのもの。jpeg、webm は４文字で、ドットと合わせて５文字になるけど、gif、png、jpg はそうならない。そのままでも動作はするけど、気持ち悪いので trim を喰らわせて取りすぎた部分を削ってる。根本的にダメなやりかただろうけど、後で改良予定。まだ人様のは見ない。フォーカス時にも動作させたいけど、まだ書き方が分かってないので、これも後で。

…まぁ確実に、他所のを使ったほうがいいですｗｗ（・∀・）

…現段階ではな…（　- ∀ -）

v0.0.2

ちょっと変更。

// v0.0.1
var _on = _off.substr(0, _off.lastIndexOf(".")) + _suffix + $.trim(_off.substr(_off.lastIndexOf("."), 5));

// v0.0.2
var _on = _off.substr(0, _off.lastIndexOf(".")) + _suffix + _off.substring(_off.lastIndexOf("."), _off.length);

substr は「どこから何文字」だけど substring は 「どこからどこまで」で、引数が違う。「substring の第二引数（どこまで）に対象文字列の文字数を突っ込めば対象の文字長や拡張子の文字数にかかわらずフレキシブルに最後の文字までとれるじゃんね〜」という事でそうした。trim子君（26歳・事務職・趣味＝プラモデルのバリとり）は有給をとって彼氏とデートに。

substr は広く使われてるけど、非推奨みたいなので、本当は全部 substring に置き換えたほうがいいのかも。ただこっちのが短くかける事が多いので、どっちも有ってもいい気がする。まぁだから無くなってないし、無くしにくいって事なんだろうな。
根本的に間違ってる（正規表現の方がいいよ〜等）可能性もあるので、また変わるかも。

jQueryプラグイン 『jQuery Simasimaizer』

投稿日: 2012年2月7日 作成者: ethertank

並列の要素を簡単にしましまカラーにするプラグイン『jQuery Simasimaizer』を作りました。

jQuery_Simasimaizer.js – jsdo.it – share JavaScript, HTML5 and CSS

ダウンロード : jQuery_Simasimaizer.js

基本的な使用方法

  1. jQuery 本体と jQuery_Simasimaizer.js を、script要素などで、読み込む。
  2. HTMLに以下のコードを記述。
    3. <script>
$(function(){
    $("対象とする要素").jQ_Simasimaizer();
});
</script>
  3. CSSに以下のコードを記述。 
    対象とする要素.odd { background: yellow; color: purple; }
対象とする要素.even { background: purple; color: yellow; }
  4. 対象とする要素にクラス名が付与され、CSS に記述したスタイルが適用される。
  5. 楽しい。

オプション

step
いくつおきにクラス名をループさせるかを整数で指定（無指定の場合は 2 となる）
prefix
step オプションを指定した場合と、oddeven オプションを false に設定した場合に必須。クラス名の先頭に付与する接頭辞を指定する(引用符で括って指定。初期値は空文字列)
oddeven
step が 2 の場合のクラス名の書式を真偽値(true/false) で指定。true の場合は「odd、even」で。false にした場合は、「接頭辞 + 番号」の書式で出力される(初期値：true)

…CSS には 『nth-child()』というセレクタがあり、 例えば li:nth-child(2n) { background: #eee; } 等と記述すれば、それでしましまになります。しかし古めのブラウザはこれに対応していないので、このプラグインはそれを救済するためのものです。また以下のように、オプション付きで実行する事で、偶数番目・奇数番目のみでなく、３つおき等のクラス指定も可能となります。

$(function(){
    $("li").jQ_Simasimaizer({
	prefix: "x_",
	step: 3
    });
});

これで、３の倍数のリストアイテムに “x_3″ というクラス名が付与されるので、同様にスタイルリング可能です。prefix オプションを省略すると数字から始まるクラス名が付与されてしまい、これはCSSではエラーとなる為ご注意ください。エラー処理などもしておりません。

oddeven オプションがあり、これを false に設定する事で、２つおきの時に odd・even でなく、接頭辞 + 数字 の様なクラス名を出力することも可能です。以下に具体例を記述します。

$(function(){
    $("li").jQ_Simasimaizer({
        prefix: "x_",
        step: 2,
        oddeven: false
    });
});

このプラグインを使用しなくても jQuery を使用すれば手書きで簡単に同じ事が出来ます。が、同じ処理が何箇所かで必要であれば、この軽量なプラグインを使用する事で、よりシンプルな記述が可能となる筈です（たぶん）

ブロック要素の背景をしましまにするのはあくまで最も代表的と思われる使用方法であり、アイデア次第では他にも様々なことが出来ます。

  1. margin-left を ずらして階段状ブロック！
  2. 見た目は変わってないと見せかけて、hoverがバラバラ！

なにか面白い例が思い浮かんだら、是非聞かせてください(・∀・)ノ