{php} dlリスト生成ツール。 – html css, javascriptに面白そうな題材があったのでJavaScriptでやってみた。

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

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

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

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

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

Demoを見る

ファイルをダウンロード

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

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