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

使用上の注意

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

ちょっとじっくりご覧下さいこの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。お値段気になりますよねー？

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

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

dl、ul、olに変換してみるのDemoを見る

tableに変換してみるのDemoを見る

ま、それだけです。最近更新してないから無理やり更新したみたいな感じです。
それにしても今日は春バテしそうなぐらい暑かったですね。僕は欽ちゃんの仮装大賞見ながらペパボの人達コレでればいいのになぁなんて考えてました。そんなGWです。

先週の土曜日、.coder（ドットコーダー）は出来てホヤホヤ勉強会にも書きましたが勉強会に行ってきました。僕自身も発表という機会を頂いてすごく勉強になりました。こういった場で発表するのは初めてだったので結果はグダグダだったのですが、これからの視点や考え方が変わったという点では得るものが多かったです。コレに懲りずにチャレンジし続けたいと思っています。お聞き苦しい発表をして皆さんには迷惑をかけ、そしてこれからもかけるつもりでいますが今後ともよろしくお願いします。成長していく僕をなま暖かく見守っていただければと思います。内容のまとめについては.coderで多分されると思うので僕は書きません。

勉強会後の懇親会ではnoriさんrewさんhilokiさんのお陰で楽しく過ごせました。これからもゆるくみんなでワイワイと末永くやっていけるといいですね。これからもたくさんの出会いがありますように。ではでは。

ファイルをダウンロード

jQueryのプレゼン用スライドプラグインをつくってみました。プラグインといっても何の設定も出来ませんが…。Demoを見てもらえば大体のことはわかると思います。一応以下にも説明をしておきますね。

必要なファイルを読み込む

<link rel="stylesheet" type="text/css" media="all" href="./css/default.css" />
<link rel="stylesheet" type="text/css" media="all" href="./css/base.css" />
<script type="text/Javascript" src="./js/lib/jquery.min.js"></script>
<script type="text/Javascript" src="./js/mukiSlide.js"></script>
<script type="text/javascript">
jQuery(function($){
    // ページからページへ移るときのアニメーションの設定
    // デフォルトはshow、設定出来るのはfadeIn、slideDown
    $.mukiSlide({ motion: 'fadeIn' });
});
</script>

base.cssを変えることで好きなデザインにすることが出来ます。でもmukiSlide.jsは触らない方がいいです。だって書いた本人もよくわかんないから…。

基本的なHTML

// プレゼンのタイトル
<div id="title">
    <h1>jQueryでプレゼン用のスライド作成</h1>
</div>
// ここから各ページ
<div id="content">
    // .sectionのかたまりが1ページ。.coverを指定すると表紙風のレイアウトになる。
    <div class="section cover">
        <h2>表紙タイトル</h2>
        <p>〜 リード文 〜</p>
    </div>
    <div class="section">
        <h2>ページタイトル</h2>
        <p>フォントの色などの細かな調整はCSS出できます。</p>
    </div>
</div>
// コピーライトなど
<address>右下に表示されます。</address>

特殊な動きを指定したい場合

<div class="section separate">
    <p>ここは先に表示<span>ここが後から表示</span>ここは先に表示</p>
</div>

「特殊な動き」についてはDemoを見てもらう方がはやいです。

推奨ブラウザ

• Safari
• Chrome
• Firefox
• Opera

操作方法

Demoにある右上メニューとキーボードでの操作ができます。

キーバインド

↑：最初のページへ

←：前のページへ

→, space：次のページヘ

↓：最後のページへ

説明は以上になります。とても簡単に書きましたがDemoを見て「ふーん、こんなこと出来るんだ。」とか「何をいまさら。」とかそんな感じでいいと思います。

プラグインデビューってことで僕にとっては記念すべき日です！？そしてこんな簡単なものを作るだけで、こんなにも嬉しかった日があったんだってこと忘れないようにしたいですね！

修正報告

2010/03/19

アニメーションの設定を出来るようにしました。これでプラグインらしくなったと思います。

皆さん、こんばんは。
Sugamo.cssを真似してkansai.cssを作ろうとしていたことを覚えておられますでしょうか。関西圏の皆様へという記事も書いてますね。何の進展も無くすみません。正直、僕の人脈や技術力（教えて欲しい方なので）では無理があったようです。

でも今回は素敵なお知らせです。といっても僕は何もしてないのですが関西に僕が思い描いていた勉強会が出来ました。パチパチー。その名もドットコーダーです。名前の通りコーダー向けの勉強会ですね。HTML、CSS、JavaScript、PHP、その他言語と色々発展していくんだと思います。そしてメンバーには素敵な方々がおられます。JavaScriptとかPHPとか初心者で困っちゃってる人はドシドシ来るといいんじゃないかなぁ。5509(+1)のnoriさんとかrewish.orgのrewさんとかに会えるしサインもきっともらえるよ。僕はいらないけどね。

参加表明はATENDで！

.coder Session1 JavaScript

公式サイトはこちら！

dotcoder.net

twitterももちろんあるよ！

twitter

詳細は上記リンク先で確認して欲しいのですが、簡単に紹介します。3月20日（土）の18:00〜21:00に記念すべき第一回が行われます。今回はJavaScriptについて語られるようです。ひとり500円ぐらいでいけるそうなので学生さんや主婦の味方！スピーカーとしても出れるようですので、何か発表しちゃいたいなって方も是非。僕もいつになるかわかりませんがスピーカーの立場も経験してみたいなぁと思ってます。

ではでは、当日会場にてお会いできるといいですね！

追記

2月23日（火）11時の段階で残り1名と超絶人気勉強会であることが実証されました。でも皆さんご安心を。今週までなら25名MAXに出来るそうなので.coder Session1 JavaScriptのコメント欄に「いれてー」って書き込めばいいと思うよ。

牧野工房さんの「XHTML&CSS超高速コーディング術」を読んだので感想を。

1. 第1章 コーディング専門サービス 牧野工房
2. 第2章 ムダな作業は可能な限り発生させない
3. 第3章 サイトの設計と情報の管理
4. 第4章 コーディングの基本と作業の順序
5. 第5章 例題で学ぶコーディング作業の流れとポイント
6. 第6章 実戦向けコーディング・テクニック
7. 第7章 ツールの活用
8. 付録

この本を読んで、一番スッキリしてある意味ホッとしたのは、牧野工房さんのコーディングの速さと値段の安さの秘密？がわかった点です。まぁ、中身は読んでくださいとしか言えないのですが、超高速コーディングのきっかけになりそうなものは正直少なかったです。牧野工房さんの仕事を受けるスタンスが速さの鍵なのかなと。同じスタンスで仕事できればいいのですが、自分が求められているものとは大きく違うしそういうコーダーになりたいかと言われると違うとしか言えませんね。ただ仕事を受ける際の意識や工程管理には素晴らしいと思うものがたくさんありました。あと中の人は仕事しやすいだろうなぁと感じました。

今後の仕事で1〜3章の内容は意識して行きたいところです。僕がやってる仕事ってデザインは小出しにしか来ないし、色々と「出戻り作業」だらけって感じで悩ましいです！たまにはデザイン一式まとめて欲しいなぁ。あと出戻りも少ないと良いなぁ。おっと愚痴じゃないですよ。「そうして頂けると速い・安い・綺麗をご提供出来ますよ」という提案です。

この本を読んで良かったと思える対象は、コーディング愛に溢れる実務経験2年未満までの人かな。コーディングのスケジュールを短く、金額は安くしたいというディレクターさんなんかも読めば良いキッカケが掴めるかもですね。

「馬鹿野郎、MySQL4.12以上でないとWordPress2.9にアップグレードできねぇよ！」ってことらしいのです。データベースアレルギーな僕は早速ググったわけです。すると参考になりそうな2つのブログを見つけ無事完了しましたよ。ま、以下のブログを見ればわかるしココで終わっても良いんだけど。

• MySQLを4から5へ（さくら+WPの場合） « Waviaei
• 馬鹿ラッチ2.0 — WordPress2.9のシステム要件がMySQL4.12以上になった為、慌ててデータベース移行。

でもね。キャプチャーないとやる気しないよね？そこで僕の登場です。
以下に書くけど自己責任でお願いします。

1. データベースのエクスポート

heteml管理画面の「データベース」からPHPMｙAdminへログインし、データベースをエクスポート。注意すべき点として「言語 – Language」の項目をutf-8としてログインすること（文字化けするらしいっす）。

ログインしたら該当のデータベースを選択し、エクスポートをクリック。上記の「構造」欄の「DROP TABLE / DROP VIEWを追加」と「IF NOT EXISTSを追加」にチェックを入れ、圧縮無しで「ファイルに保存する」→「実行する」。ここまで出来たらPHPMyAdminは閉じてね。

2. MySQL4のデータベースの削除とMySQQL5のデータベースの作成

heteml管理画面の「データベース」に戻ります。今まで使っていたデータベースの削除。ここまで来ると後戻り出来ないらしいです。人生と一緒ですね。hetemlでは新規作成したデータベースはすべて 「MySQL5」 となるらしいので、「データベース作成画面へ」ボタンを。データベース名とかパスワードとか忘れないでね。サーバー名も変わってるからね。

3.データベースをインポートする前のMySQLの設定

僕の場合デフォルトでutf8_general_ciになっていたのでこれについてはよくわからんのですが、MySQLを4から5へ（さくら+WPの場合） « Waviaeiの「5. DBをインポートする前のMySQLの設定」を見てね。要はエクスポートした時のデータベースの照合順序に合わせてあげる作業ですね。

4. データベースをインポート

新しく作ったデータベースのPHPMｙAdminにログインして「インポート」タブをクリック。「インポートするファイル」の「参照」から、先ほどエクスポートしたファイルを選択。「実行する」をクリックして問題なければよかったね。問題あっても僕はなかったのでわかんないよっと。エクスポートしたデータベースの容量が大きくてインポート出来ない方はheteml管理画面の「php.ini 設定」の中にupload_max_filesizeってのがあるからサイズを大きくしてあげれば出来るんじゃないかな？違うのかな？僕は軽すぎるぐらい軽いので問題なかったっす。

5. wp-config.phpの編集

この時点でブログをブラウザで開くとおぞましいメッセージの画面があらわれます。
データベースが変わったから当然っちゃ当然なんですけどね。

上記のキャプチャー画像はサーバにアップしているwp-config.phpです。「DB_NAME」や「DB_USER」、「DB_PASSWORD」、「DB_HOST」のhogeとなっているところを2の項目で設定した内容に書き換えてあげます。編集したwp-config.phpファイルをアップロードし再度ブログにアクセスするといつも通りのブログが見れるはずです。見れなくても僕はわかんないや。

6. チェック

チェックして問題なければMySQLは大丈夫ですね。後は自動アップグレードのボタンをポチっとすればWordPress2.9の世界が広がってるはずさ！

テキトーでごめんなさい。

追記

inkdesign：Wordpress2.9へのアップグレードメモ（hetemlでのお話）にも素敵な記事がありましたよ。

大分前にやったやつだけど、ネタが無いので書いておきます（以下に紹介するフィルタリングはfactory.yusukenakanishi.comでも使ってます）。元ネタはこちらにQuick and Easy Filtering with jQuery – Nettuts+。そのままやっても勉強にならないので自分なりに改良を。

HTML

<ul id="list">
    <li><a href="hoge" title="PHP HTML">PHP and HTML/XHTML</a></li>
    <li><a href="hoge" title="PHP">PHP</a></li>
    <li><a href="hoge" title="JavaScript HTML">JavaScript and HTML/XHTML</a></li>
    <li><a href="hoge" title="JavaScript">JavaScript and jQuery</a></li>
    <li><a href="hoge" title="JavaScript CSS">javascript and CSS</a></li>

    // 中略

</ul>

JavaScript

$(function(){
    // フィルタリングのメニュー
    var filteringMenu = '<ul id="filtering"> <li class="selected"><a href="#New">最新の10件<\/a><\/li> <li><a href="#ALL">ALL<\/a><\/li> <li><a href="#HTML">HTML/XHTML<\/a><\/li> <li><a href="#CSS">CSS<\/a><\/li> <li><a href="#JavaScript">JavaScript<\/a><\/li> <li><a href="#jQuery">jQuery<\/a><\/li> <li><a href="#PHP">PHP<\/a><\/li> <\/ul>'
    $('#list').before(filteringMenu);

    // #list liのtitle属性にALLを追加
    $('#list li a').each(function(){
        $(this).attr('title',$(this).attr('title')+' ALL');
    });

    // 最初に10件のみ表示させる
    $('#list li').hide();
    $('#list li:lt(10)').fadeIn('slow').removeClass('odd').filter(':odd').addClass('odd');

    // フィルタリング
    $('#filtering li a').click(function() {
        $('#filtering li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        $('p.notes').remove();

        var filterTitle = $(this).attr('href').replace(/#/, '');

        // Newの場合は最新の10件だけを表示
        if (filterTitle == 'New') {
            $('#list li').hide();
            $('#list li:lt(10)').fadeIn().removeClass('odd').filter(':odd').addClass('odd');
        }
        else {
            // この条件に合うものを表示する
            $('#list li').hide().filter(function () {
                var listTitle = $(this).children('a').attr('title');
                var filterList = listTitle.indexOf(filterTitle);
                if (filterList >= 0) {
                    return filterTitle;
                }
            }).fadeIn().removeClass('odd').filter(':odd').addClass('odd');
            // 該当するものが何も無いときにメッセージを表示する
            if (filterList = $('#list li:visible').length == 0) {
                $('#list').before('<p class="notes">0件：該当するものがありません。<\/p>');
                $('p.notes').hide().fadeIn();
            }
        }
        return false;
    });
});

JavaScriptがOFF環境の時フィルタリングするメニューがあっても何の意味もなさないため、わざとJavaScriptで書き出すようにしています。元ネタではclass属性をフィルタリングしてるんだけど僕は何となくtitle属性に変えました。そして該当するものが無いときは何も無いとメッセージを表示させてます。

ここの書き方ダサいよとかあったら教えてくださいな。