jQuery

文字を円に沿って配置するjQueryプラグイン『CircleType.js』

1文字を円に沿って配置するjQueryプラグイン”CircleType.js”をGUIで試せるサンプルを作ってみました。ニョキニョキ動いて面白いです。

“CircleType.js”はIE9以上に加えモダンブラウザ対応なので使いやすく、Google Fonts+CSS3の組み合わせで、かなり凝った表現も可能になります。プラグインは2.7kbと軽量で導入も簡単でした。 続きを読む

tweetDance.jsをバージョンアップ

当ブログで公開中のtweetDance.jsがTwitterAPI1.0の停止に伴い動かなくなったのを修正しました。手軽に導入できるのが大きな特徴だったtweetDanceでしたが、TwitterAPI1.1のOAuth化のため、PHPにてAPIにアクセスする必要がでてきました。

そのためtweetDance1.1の導入には、jQueryプラグインに加えPHPスクリプトの設置が必要になります。 続きを読む

WordPress Popular PostsにjQueryではてブ数を表示する

hatebu人気記事をウィジェットエリアに表示するプラグイン「Wordpress Popular Posts」に「はてなブックマーク」のブクマ数を表示させたいと思います。画像なので色やフォント変更はできませんが手軽に導入できます。

ブクマ数ははてなのAPIで取得します。Popular Postsはかなり自由にカスタマイズが出来ますが、記事アドレスを挿入できない為、カスタマイズでは対応できません。

よってプラグイン本体の改造もしくはJavaSciptで追加する事になるのですが、プラグインの改造で対応するとバージョンアップでリセットされてしまうため今回はjQueryで対応します。 続きを読む

スマフォ対応してるjQueryカラーピッカー「ExColor」をBootstrap対応する

exタイトルの通りですが、今回カラーピッカーを探した経緯は、愛用していたjQueryの「COLOR PICKER」がiPhoneから操作できなかったので乗り換えの必要性に迫られました。

「COLOR PICKER」はPhotoshopライクな操作が使いやすく、動作も安定しており、かなり気に入っていたんですが、スマフォで動かないのは致命的。スマフォ対応しているjQueryカラーピッカーを探してみるも、それほど数は多くなく、最終的に「ExColor」が見つかりました。今後定番として愛用できる完成度です。

しかし、Bootstrap環境に導入するとCSSの影響で表示不良を起こしてしまうため、修正します。 続きを読む

jQueryもあるWEB屋向けギークTシャツ50枚+α

twitter「ぐだぐだ言ってないでコード書けよハゲ」的なギークTシャツないかなぁと探してたんですが、楽天とかアマゾンには少ししかなくて、「あんま需要ないのかな?」と諦めかけたそのとき、大量のギークTシャツを扱うネットショップを見つけました。

zazzle というサイトなんですが「何を今更」だったらごめんなさい。はじめて知りました。デザインの量とカスタマイズ出来る範囲が半端ない!ギークなのがザクザクある!

オーダーメイドのようで、Tシャツはもちろん、ロンTやパーカーにもプリントできて色も自在。かなり自分好みの一枚を作れそう。ちと高いのは仕方ないか・・・。 続きを読む

個人的に使ってるtableの日本地図をjQueryで叩く

個人的に今でも現役で使うことがあるテーブル日本地図。手軽だし崩れる心配もないから結構好き。

画像に比べて表現が弱いけど、ユーザーが都道府県を選択するっていう基本的な仕事は十分に果たしてくれる。

数年前に色々なサイトを参考にして作ったオリジナルのテーブル日本地図ですが、今回ライセンスフリーで公開します。

海・陸・フレーム・都道府県・地域など、細かくクラス指定してあるので使いやすいと思います。jQueryとCSSを使って簡単に装飾してみたので、参考事例としてご覧ください。 続きを読む

Youtube・ニコ動・楽天モーションウィジェットのiframeがz-indexを無視するのを回避

ググったら沢山でてくるので今さらなんですが、Youtubeなどのiframeがz-indexを無視する問題。これ一部のブラウザのみで発生している現象で、手元のブラウザで調べた範囲ではFFとIEでは問題なし。ChromeとSafari5では発生しました。

いままでWordpressの管理バーが隠れる程度だったので無視してたんですが、当サイト右上の上に戻るボタンが、楽天モーションウィジェットで隠れてしまったのでリサーチしました。 続きを読む

ニコ動風にツイートを表示するjQueryプラグイン tweetDance.js

TwitterAPIのバージョンアップに伴い、tweetDance.jsの設置には専用のPHPスクリプトの設置が必要になりました。こちらの記事をご参照ください。
tweetDance.jsをバージョンアップ

上のサンプルのように、画像にツイッターの検索結果をニコ動風に表示するjQueryプラグインを公開しました。ツイートをクリックでツイッターに、画像には別にリンク指定できます。IE8,FF,Chrome,safariで動作確認済。

新着コメントが表示されるので、普通の画像よりもグッとアピール度が高いと思います。反面、騒がしい印象もするので使い所を選びます。盛り上がっている感の演出に向いてそうです。

上のロックスミスは発売されたばかりゲームで旬ワードなので、コメント鮮度も高いですが、例えば「コマンドー」などは思うように結果が出ない場合があります。そんな時は検索ワードを工夫します。 続きを読む

jQueryコピペ一発でスクロールアウト後も要素を追従させるIE6対応

最近よく見るアドセンスなどの広告がスクロールについてくる機能を、CSSの追加なしjQueryのみで行います。

文字で説明すると分かりにくいですね、百聞は一見にしかず、当ブログのメニュー最下部に実装されてます。 長いページでないと確認できないのでトップページなどで確認してみて下さい。

本来なら空白が表示され続ける場所ですが、広告やソーシャルブックマークボタンなどに有効利用できます。対象はclass指定するだけなので、どんな場所でも固定できますが、性質的に使えるのはメニュー最下部に限られる気もします。 続きを読む

ティルトシフトをCSS3でリアルタイム処理するjQueryプラグイン

写真をジオラマ風に見せることができるティルトシフト。小さく見えて可愛らしいので目を引きますね。

本来はティルトシフトというレンズによって得られるこのエフェクトは、遠近法のパースを補正したりピントが合う範囲を調整できます。

このティルトシフト、フォトショップなどの画像処理で擬似的に同じことが出来るのですが、今回はブラウザだけで再現してしまうjQueryプラグインを紹介します。 続きを読む