Bigegg Lab

2011年 4月 11日

QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」。 通常QRコードというとサーバ側で画像にして画像を送信するというのが一般的ですが、このプラグインはブラウザ上で描画するタイプです。

というマークアップがあったとして、次のようにすることでQRコードを埋め込みます。 jquery(‘#qrcode’).qrcode(“this plugin is great”); カメラ等で読み取れば、「this plugin is great」がテキストとして読み取れます。 canvasを使っているので、canvas対応ブラウザでしか動作しない点に注意。

QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」:phpspot開発日誌

jquery.qrcode - jquery plugin for a pure browser qrcode generation
http://notes.jetienne.com/2011/04/07/jquery-qrcode.html

10ヶ月前 | 固定リンク | 2011年 4月 11日 |

2011年 4月 5日

Custom YouTube Player Reload ? Scripts and Code

Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。
これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。



更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。



このコントロールバーは、JavaScript + CSS + 画像でデザインされており、ファイルをいじれば好きにカスタマイズすることも可能です。



サイトに動画を埋め込みたい、でも一目見ただけで、Youtubeとわかるあのインタフェースはちょっと・・・、という方はこちらを試してみるとよさそうですね。

JavaScript と CSSさえいじってしまえば、あとは、 $(element).customYtPlayer() ってやるだけで初期化が完了します。

また、こちらのチュートリアルでもカスタマイズ方法について触れられています。動画の上にオーバーレイしている再生ボタンもカスタマイズ出来るみたいです。



関連エントリ

• YoutubeのAPIをPHPから簡単に使える「PHPTube」
• 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」
• YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」

Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌

実は、ニコニコ動画も初期はこのようなAPIを組み合わせてyoutube上に字幕を流していました。

10ヶ月前 | 固定リンク | 2011年 4月 5日 |

2010年 11月 9日

Snippet jQuery Syntax Highlighter

多数の言語に対応して色合いも選べるシンタックスハイライト用jQueryプラグイン。
メジャーな以下の１５の言語は標準サポートしていて、他にも多数のフォーマットに対応できます。
このプラグインのユニークなところは、３９のカラースキームから選べるという部分。



実に多数の色合いから好きなものを選べるので、様々なタイプのデザインのマッチさせることが出来るでしょう。



実装は必要なライブラリを読み込んで、$(element).snippet(“pascal”) といった感じでハイライト言語を引数で渡してあげるだけです。
実装もかなり簡単です。

.snippet(“php”,{style:”navy”,showNum:false});

styleで色合いを簡単に指定。行番号のあり・なしも指定可能です。
技術系のサイトを運営している人は覚えておくとよさそうですね。

関連エントリ

• コードハイライトを実装するための各言語用の仕組み色々
• コードハイライト用PHPライブラリ:GeSHi
• C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」

多数の言語に対応して色合いも選べるシンタックスハイライト用jQueryプラグイン:phpspot開発日誌

1年前 | 固定リンク | 2010年 11月 9日 |

2010年 8月 13日

グルーポン系サイトでよく見られる「終了までなんとか！」というカウントダウンタイマーを実装してみました。jQueryのプラグインもあるのですが、そこまででもないのでちゃちゃっと書いちゃいましたよ。

実際のコードはこんな感じですが、その前にjQueryの読み込みを忘れないようにね（最近はもっぱらGoogle様に頼りっぱなし）。

なお、HTMLの方では#TimeLeftを表示部分のIDとして指定しておきます。

<script type="text/javascript">
$(function() {
  countDown();
});
function countDown() {
var target = new Date("August 26,2010 11:00:00");
var today = new Date();
var h = Math.floor(((target-today)%(24*60*60*1000))/(60*60*1000))
var m = Math.floor(((target-today)%(24*60*60*1000))/(60*1000))%60
var s = Math.floor(((target-today)%(24*60*60*1000))/1000)%60%60
$("#TimeLeft").text(h+'時間'+m+'分'+s+'秒');
  setTimeout('countDown()', 1000);
}
</script>

もうちょっと簡単に書けそうな気がしないでもないですが、まぁ、ご参考までに。jQuery使わないでもかけそうですが、どちらにしろjQuery使っていたのでお許しをば。

グルーポン系サイトでよく見られる「終了まで○時間○分○秒」をjQueryで実装してみる - IDEA*IDEA ～ 百式管理人のライフハックブログ

1年前 | 固定リンク | 2010年 8月 13日 |

2010年 2月 3日

submitボタンを押した瞬間にそれをdisabled（グレイアウト）にすることで二度押ししようにもできなくする、jQueryを使ったスクリプトである。おすすめする理由は次のとおり。

1. jQueryだから。どうせ他の部分でもjQuery使っていることがあるので、そのついででシンプルなスクリプトで済むのなら、気分的にもラクだ。
2. オリジナルにスクリプトを書こうとして素直に disabled=true とやるだけだと、次にいったページから「戻る」ボタンで戻られるとdisabledになったまま（Firefoxの場合）というワナがあるのだが、こいつはその点も考慮されている。
3. どのformに作用させるかを、html側のデザイン次第でどうにでもできる。ページ内の全てのformではなく特定のformにだけ使いたいという場合もあるだろう。
   • 例えばform id=”foo”とform id=”bar”の二か所だけに絞りたければ、
     $(‘#foo’).disableOnSubmit();
     $(‘#bar’).disableOnSubmit();
     と2行書けばいい。
   • HTMLでは、id属性はwebページ内での重複が許されない。同一ページ内に複数のformがあって、それらにいちいち違うid属性を与えるのが面倒だというのであれば、class属性を使うのがいいだろう。form class=”foo” というclass属性を与えたformタグすべてに対して作用させたければ
     $(‘.foo’).disableOnSubmit();
     の1行で済む。また、cssではclass属性はタグに複数個設定できる。つまり form class=”aaa bbb” みたいにできるのだから、なんだったらデザイン(見栄え)制御用のclass属性とは別にdisableOnSubmit()専用のclass属性を追加してしまえばいい。
4. form onSubmit=”hogefunction()” のようにonSubmit属性でJavascriptを呼び出す手法をよく見かける。しかしこれはちょっと危険で、ブラウザの種類によってはJavaScript関数どころかform全体が動かなくなるケースがあるらしい。少し古いケータイ向けフルブラウザに多い。これはinput type=”submit” value=”hoge” onClick=”hogefunction()” のようにonSubmitではなくonClickでやっても似たような危険が伴う。ケースバイケースなのでなんとも言えないが、少なくとも formタグにはid属性やclass属性を指定するだけという手法ならその部分は普通のHTMLに過ぎない。よって、特殊なブラウザであっても動作不良を起こす可能性が低くなるんじゃなかろうかと。
5. すぐにやめられる(笑)。「やってみたけど気にいらなかった」というときは、headタグ内のJavaScriptを消すだけだ。使わないid属性やclass属性をformタグに残したところで、どんなブラウザであれ動きにも見栄えにもまったく影響は残らない。

二重submit防止のjavascriptをjQueryで。

使いやすそうな2重送信防止JavaScript(jQuery)です。

2年前 | 固定リンク | 2010年 2月 3日 |