前回の記事では皆様にご迷惑をおかけしたので、今回はCanvasで星空を描いてみました。

Demoを見る

別にどうってことはないのですが、こんなイメージでyusukenakanishi.comの全体リニューアルをしていこうかなぁと考えてます。確認はFirefoxとかChrome、Safariで見てくださいね。今はIEとか考えず楽しんでるだけですので…。

Demoを見る

Canvasをほっげほげする上で参考になったサイトは以下です。

• 今更聞けないcanvasの基礎の基礎 | tech.kayac.com – KAYAC engineers’ blog
• canvasでキラキラした背景を作る方法 | tech.kayac.com – KAYAC engineers’ blog
• Canvas – HTML5.JP
• Canvas チュートリアル – MDC

小学校の時、先生に人の嫌がることを進んでしなさいと言われ、好きな女の子に虫を見せて本当に嫌がられた記憶ありませんか？あの感じを何歳になっても味わいたいという少年の心を持った素敵なあなたのために、「人の嫌がることを進んで出来るプラグイン jDTGnoKyouhu.js【グロ注意】」をつくりました。好きな女の子のサイトに実装したらそれはもう嫌がられること間違いないしです！

使用上の注意

1. グロテスクな表現があるので注意して下さい
2. お食事中はお避け下さい
3. 心臓の弱い方はおやめ下さい
4. 未成年の方は保護者同伴で御覧下さい
5. ところでゴキブリ好き？

Demoを見る

ファイルをダウンロード

導入方法

// head内の記述
<link type="text/css" rel="stylesheet" href="css/jdtgnokyouhu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jDTGnoKyouhu.js"></script>

jdtgnokyouhu.cssとjQueryとjDTGnoKyouhu.jsを読み込みます。画像を使っているので画像データもお忘れなく！導入するのはすごく簡単ですね！あとこのプラグインにオプションなんてものはありません。

jQueryがシェアを拡大しそれに比例して素敵プラグインが世にはびこっていますね。困ったものです。

本日ご紹介するのはですね。タブが画像になっているjQueryのプラグイン。
タブがテキストになってるのはたくさんありますよねぇ。「私、タブが画像になってると嬉しいんだけど。」「テキストが画像になればねぇ。」という多くのお声をいただきまして開発させていただきましたのがこちらimageTabs.js。

ちょっとじっくりご覧下さいこのDemo。

Demoを見る

imageTabs.js

Demoを見たり触ったりで大体わかっていただけたかと思うのですが簡単にご説明をします。jQueryプラグインですから、jQueryを読み込んでからimageTabs.jsを読み込むようにするんですねー。

// head内の記述
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/Javascript" src="js/imageTabs.js"></script> 

そして見てください。以下のようにオプションを設定することができるんです。
かなり無理してます。これ、ものすごいです。

animate

タブが切り替わるときのアニメーション。show、slideDown、fadeInの3つが設定できてデフォルトはshow。

duration

タブが切り替わるときのアニメーションの時間。slow、fastや1000（1秒）とする数字での設定も可能。

opentab

これもつけます。最初に開いておきたいタブの設定。開いておきたいコンテンツのidを設定する。

<script type="text/javascript">
// <![CDATA[
jQuery(function($){
    $('div#tabArea1').imageTabs({
        animate: 'fadeIn',
        duration: 'slow',
        opentab: 'tab1-2'
    });
});
// ]]>
</script>

HTMLのbody内の記述は以下に。注意点といたしましては、ロールオーバー画像はオフのものとオンのもの同じディレクトリにということと、オフのものがtab_01.gifの場合オンのものはtab_01_on.gifというルールに従って下さい。お願いしますー。

// body内の記述
<div class="tabArea" id="tabArea1">
    <ul class="tab">
        <li><a href="#tab1-1"><img src="img/tab_01.gif" alt="tab_01" /></a></li>
        <li><a href="#tab1-2"><img src="img/tab_02.gif" alt="tab_02" /></a></li>
        <li><a href="#tab1-3"><img src="img/tab_03.gif" alt="tab_03" /></a></li>
        <li><a href="#tab1-4"><img src="img/tab_04.gif" alt="tab_04" /></a></li>
        <li><a href="#tab1-5"><img src="img/tab_05.gif" alt="tab_05" /></a></li>
    </ul>
    <div class="tabPanelGroup">
        <div id="tab1-1" class="tabPanel">
            // tab1-1のコンテンツ
        </div>
        <div id="tab1-2" class="tabPanel">
            // tab1-2のコンテンツ
        </div>
        <div id="tab1-3" class="tabPanel">
            // tab1-3のコンテンツ
        </div>
        <div id="tab1-4" class="tabPanel">
            // tab1-4のコンテンツ
        </div>
        <div id="tab1-5" class="tabPanel">
            // tab1-5のコンテンツ
        </div>
    </div>
</div>

ここまで来るとこちらのimageTabs.js。お値段気になりますよねー？

なんとタダ！
ええー！驚きですねぇー。ここまでの機能がついてタダですよー。
皆様これはチャンスですよー。この機会に是非お使い下さいー。

調子に乗ってすみませんでした。
ということで今日はジャパネットた◯た風味にしてみました。ばいならー。