buena suerte!

リキッドレイアウトなんかの時、自動でカラム数やカラム幅を調節してくれるなんだか便利そうな jQuery プラグインがあったので MooTools で試しにやってみた。

参考記事

• Smart Columns w/ CSS & jQuery by Soh Tanaka.

基本的に MooTools 用のコードに変換しただけで、参考記事からまんまパクってます。タダ乗りですいません。元のコードも短いし、 MooTools を少し理解して使ってる人なら誰でもできそう。

動作確認

Browser

Firefox 3.0.11, Opera 9.64, Chrome 2.0.172.31, Safari 4.0(530.17), IE5.5(IETester), IE6(IETester), IE7, IE8(IETester)

デモサイト／Demo Site

• Smart Columns with CSS & MooTools

必要なもの／Necessary

• MooTools(1.2.2) Core: All

今回は Core ライブラリだけでいけるんで Google Ajax Libraries API を使ってもおｋ。バージョンは1.2.2と1.2.1でいけました。さらに容量を減らしたい場合は、 Core Builder で以下をチェックしてダウンロード。

• Core: Core, Browser
• Native: Array, Function, Number, String, Hash, Event
• Element: Element, Element.Event, Element.Style, Element.Dimensions
• Utilities: Selectors, DomReady

あ、上記のデモでは無駄に Fx.Tween も使ってます。

HTML

リストは欲しい数だけ増やす。

<ul class="column">
  <li>
    <div class="block">
    <!--Content-->
    </div>
  </li>
  <li>
    <div class="block">
    <!--Content-->
    </div>
  </li>
  <li>
    <div class="block">
    <!--Content-->
    </div>
  </li>
</ul>

CSS

ul.column　{
  width: 100%;
  padding: 0;
  margin: 10px 0;
  list-style: none;
}
ul.column li {
  float: left;
  width: 200px;
  padding: 0;
  margin: 5px 0;
  display: inline;
}
.block {
  height: 300px;
  margin-right: 10px;
  padding: 20px;
  color: #000;
  background: #e7e6f2;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
}

MooTools

指定した要素から getStyle() で width + toInt() で幅の数値を取得しようとすると、うまくいかないようなんで、 getWidth() を使ってます。 getWidth() は1.1のドキュメントには載ってたはずなのに、今のドキュメントには載ってないんですよね。

function smartColumns () {
  $$('ul.column').setStyle('width','100%');
  
  var colWrap = $$('ul.column').getWidth();
  var colNum = Math.floor(colWrap / 200);
  var colFixed = Math.floor(colWrap / colNum);

  $$('ul.column').setStyle('width', colWrap);
  $$('ul.column li').setStyle('width', colFixed);
}

// DOM が読み込まれた時に実行。
window.addEvent('domready', function () {
  smartColumns();
});

// ウィンドウがリサイズされた時に実行。
window.addEvent('resize', function () {
  smartColumns();
});

以上です。

関連記事リンク

• Smart Columns w/ CSS & jQuery by Soh Tanaka.
• [JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns | コリス
• Smart Columns with CSS & MooTools
• MooTools で Twitter のメッセージを表示させるサンプル。

今回は MooTools を使って Twitter の JSON 形式のデータを受け取り、メッセージを表示させる方法を、簡単に紹介します。

動作確認

OS

Windows XP

Browser

Firefox 3.0.10, Opera 9.64, Chrome 1.0.154.65, Safari 4 Public Bata(528.16), IE6(IETester), IE7, IE8(IETester)

デモサイト／DEMO Site

• MooTools Twitter Example(Request.JSONP)

仕様を余り把握してないんでよくわかりませんが、 API に実行回数制限があるらしく、短い期間に何度も実行してると、そのうち表示されなくなります。時間が経てばまた使えます。

必要なもの／Necessary

• MooTools(1.2.2) Core: All
• MooTools(1.2.2.2) More: More, Log, Request.JSONP

Core ライブラリの読み込みは Google Ajax Libraries API を使う手も。

(X)HTML

ターゲットの要素を設定。 ul#idname は必須です。 ul の中は、後で空にしてしまうので、何書いてても特に問題ないです。

<ul id="twttr">
<li>Twitter loading...<img src="img/loading.gif" alt="twload" /></li>
</ul>

Javascript

target は上の ul#idname とあわせます。uid は Twitter のユーザ ID もしくは ユーザ名 (UserID or UserName)。 count は表示させるメッセージ(message)の件数。 relative_time 関数は投稿時間(post date)を about 1 hour ago みたいに変換する関数。

<script type="text/javascript" src="js/mootools-1.2.2.js"></script>
<script type="text/javascript" src="js/mootools-1.2.2.2-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
  var target = $('twttr');
  var uid = 'twitter';
  var json = 'http://twitter.com/statuses/user_timeline/'+uid+'.json';
  
  new Request.JSONP({
    url: json,
    data: { count: 5 },
    onComplete: function(twdata) {
      target.set('html', '');
      twdata.each(function(el,i) {
        var name = twdata[i].user.screen_name;
        var img = twdata[i].user.profile_image_url;
        var sid = twdata[i].id;
        var txt = twdata[i].text.replace(/(https?:¥/¥/¥S+)/gi,'<a href="$1">$1</a>').replace(/(^|¥s)@(¥w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|¥s)#(¥w+)/g,'$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
        var date = relative_time(twdata[i].created_at);
        
        new Element('li', {
          'class': 'twline',
          'html': '<span class="twimg"><a href="http://twitter.com/'+name+'"><img src="'+img+'" alt="'+name+'" title="'+name+'" width="24" height="24" /></a></span><span class="twtxt">'+txt+'</span><span class="twdate"><a href="http://twitter.com/'+name+'/status/'+sid+'">'+date+'</a></span>'
        }).inject(target);
      });
    }
  }).send();
});

function relative_time(time_value) { 
  time_values = time_value.split(' ');
  time_value = time_values[1]+' '+time_values[2]+', '+time_values[5]+' '+time_values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset()*60); // GMT+0900
  if (delta < 5) {
    return 'less than 5 seconds ago';
  } else if (delta < 30) {
    return 'half a minute ago';
  } else if (delta < 60) {
    return 'less than 1 minute ago';
  } else if(delta < 120) {
    return 'about 1 minute ago';
  } else if(delta < (45*60)) {
    return 'about ' + (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (90*60)) {
    return 'about 1 hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}
</script>

CSS

スタイルの設定。ここらへんは適当に。

ul#twttr {
  margin: 0;
  padding: 0 1em;
}
ul#twttr li {
  margin: 0;
  padding: 1em;
  list-style: none;
}
ul#twttr li.twline {
  background: #333;
  margin: 0 0 1em;
  padding: 1em 2em;
  line-height: 1.5em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
span.twimg {margin-right: 1em;}
span.twimg img {
  border: 2px solid #eee;
  vertical-align: middle;
}
span.twtxt {
  color: #fff;
  font-size: .9em;
  }
span.twtxt:before {
  content: "¥0022";
  margin-right: .1em;
  }
span.twtxt:after {
  content: "¥0022";
  margin-left: .1em;
  }
span.twtxt a {
  color: #6cc;
  text-decoration: none;
}
span.twtxt a:hover {text-decoration: underline;}
span.twdate {
  font-size: .8em;
  margin-left: 2em;
}
span.twdate a {
  color: #ccc;
  text-decoration: none;
}
span.twdate a:hover {text-decoration: underline;}

変なところがあるかもしれないけれど、大体こんな感じです。

参考記事リンク

• Twitter.com
• [観] Twitter API 仕様書 (勝手に日本語訳シリーズ)
• 第４回：twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる ::: creazy photograph
• MooTools TwitterGitter Plugin - David Walsh blog
• twitterjs - Google Code

正直、いまだに、ついったーの使い方が、よくわかってなかったりする。

いままでのデザインの雰囲気は残して、ちょっとばかしリニューアルしました。ちょっとと言っても、全体のデザイン考えたり、素材作ったり、ライブラリの整理等々、なんかやればやるほどドンドンやる事が増えていって、すごい時間がかかってしまいました。大体合計で1ヶ月くらいかな。

とりあえず変更点やメモなど書き出してみました。

以前と同じところなど。

横幅が 960px 固定な点やリンクの色など基本的には以前のものと同じになっています。トップページ下にあるナビゲーションもそのままつけたままです。また、一番上の livedoor Blog のヘッダは、表示義務があるのできちんと表示させました。今まですいません。

favicon を変更。

リニューアルにあわせて、さらにシンプルなものに変更しました。今回も @icon変換 というフリーソフトを使いました。

文字を大きく、1カラム化させました。

ずっと2カラムデザインで通してきましたが、読みやすくするため、文字を大きくし、1カラムデザインに変更しました。ただ、個別記事のページだけ、右サイドにポストデータを載せています。今までサイドバーに表示していた、テンプレート等へのリンクは、記事表示部分より下にまとめて移動させてます。

ロゴ・ヘッダーメニューのデザインを変更。

サイトのロゴが今まで以上に控えめに。もっとなにか良い感じのロゴマークを数日間考え悩んだけど無理だった。(センスとスキル的な意味で)
ヘッダーメニューはマウスを乗せると、ふき出しっぽく変化します。クリックすると、下にある、インフォメーション、テンプレート、アーカイブのそれぞれの頭に飛びます。

あちこちでアイコンを使いました。

ポストデータ部分、注意書き他、アーカイブ等々でアイコンを使っています。大きいアイコンは自作できないので、 Function Icon Set を使わせていただいてます。アイコン使っただけで、結構見れるようになるもんなんですね。

CSS の初期化に Yahoo UI Library を導入。

それぞれの要素などの初期化に YUI Reset CSS と YUI Base CSS を使いました。 Base CSS はちょっと混乱したので、リニューアルするには必要なかったかも。

MooTools 最新版の 1.2.2 に対応。

今まで使ってたのはバージョン1.1だったので、1.2に対応させるのはちょっと大変だった。個別には簡単ですが後述します。
はじめ Google AJAX Libraries API で MooTools をロードしてたけど、 More のライブラリとの兼ね合いで、不具合出るんでやめました。

自分は大体はじめから組みなおしましたが、1.1のものから1.2へ対応させる場合は、こちらを参考にすると良いかもしれないです。

• Conversion from 1.11 to 1.2 - mootools-core - GitHub

Lightbox ライブラリは Slimbox を導入。

今までと同様に Slimbox の最新版(1.7)を導入しました。標準の CSS を変更して黒枠バージョンに変えてます。ローディング画像は Load Info を使わせてもらいました。 mediaboxAdvanced や Milkbox もいいかなとちょっと考えましたが、あちこち編集する必要がでてくるのでそのままな感じに。

コードの色分け表示とスライダーの導入。

コードの色分け表示をしてくれるライブラリ (google-code-prettify) を導入しました。こちらは livedoor さんが用意してくれたものを使っています。参考 → DesignTemplate/CommonFile
また、とあるクラスを設定したものに限りますが、コードが長くなる場合、邪魔になるので、ボタンを押して表示非表示を切り替えられるようにしてます。
こちらは主に MooTools(Fx.Slide) を使っています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>example</title>
</head>
<body>
  <h1 id="h1">Header 1</h1>
  <p class="p1">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <p class="p2">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <h2 id="h2">Header 2</h2>
  <p class="p1">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <p class="p2">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <h3 id="h3">Header 3</h3>
  <p class="p1">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <p class="p2">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <h4 id="h4">Header 4</h4>
  <p class="p1">Paragraph, Paragraph, Paragraph, Paragraph</p>
  <p class="p2">Paragraph, Paragraph, Paragraph, Paragraph</p>
</body>
</html>

ページトップに戻るアイコンを追加。

ある程度下にスクロールすると、ウィンドウの右中頃に、ページトップに戻るアイコンが表示されます。たぶん今も右側に出てると思います。クリックするとページトップに移動し、上に戻ると消えます。 IE6 だと display: fixed; が効かないので若干ガタガタする。
こちらは主に MooTools(Fx.Scroll) 使っています。

Delicious のポスト数カウンタを導入。

画像で Delicious の被ブクマ数を取得するサービスは、負荷が大きくなって大変なようなので、 Delicious から JSON 取得してテキストリンクで表示させるようにしました。ちゃんと本家と同じ色になってます。
こちらは主に MooTools(Request.JSONP) を使ってます。 JSON の扱い方の勉強になった。

コメント・トラックバックはふき出し風に。

ヘッダーメニューのデザインにあわせて、ふき出し風なデザインに変更しました。クリップのコメントはそのままのスタイルです。

livedoor クリップのコメント表示。

データの扱い方をちょっと覚えたので、調子に乗って、前に作ったものじゃなく自力でやってみました。ただ、こちらはローカルでテストした分ではうまく表示されてたのに、 IE7 以下でエラーが出て表示されません。もうちょっとちゃんとしないと……
こちらは主に MooTools(Request.JSONP, Date) を使ってます。

Gravatar に対応。

今までと同じように Gravatar に対応させてあります。メールアドレスを入力してコメントすれば設定したアバター画像が表示されます。コメントフォーム部分にもその旨記述しました。メールアドレス自体は表示されませんが、タグ内の title 属性に入るようになります。
Gravatar の登録で必要なものは基本メールアドレスと画像だけで簡単なのでどうぞやってみてください。

フォームを巨大化し、初期テキスト設定してみた。

フォームのサイズ、文字をだいぶん巨大化。これくらいでも良い気がしてきた。
それと jQuery Form Tips を参考に、 MooTools を使ってフォームの初期テキストを設定してあります。これは MooTools(Core) さえあればいけるはず。

Quicktags Plus とコメントプレビュー機能を削除。

必要性が感じられなくなってきたので、 Quicktags Plus とコメントプレビュー機能を削除しました。タグ変換部分は残してあるので、隠れ機能として使えない事は無いですが、重い原因になってるようなんで、そのうち変換部分も削除するかも。

絵文字機能を削除。

テストしてた所、これが一番重くなる原因だったようで、 Firefox と IE だと余裕で1分くらい固まることがありました。確認に使ったネットブックが貧弱な所為もあるだろうけど、このままだと駄目なので、ちょっと寂しいですが、絵文字機能を削除しました。既存の絵文字が挿入されたコメントがちょっとかっこ悪くなってます。

トラックバック元のサムネイル表示サービスを変更。

今までは サムネイルAPI を使わせていただいてましたが、 HeartRails Capture に変更しました。カスタムの幅も同じくらい出来ますし快適です。

YUI Compressor を使ってみた。

javascript と CSS を圧縮化してくれる YUI Compressor を使ってみた。2割ほど減ってくれますが、コマンドラインでやらないといけないのが面倒ですね。

java -jar yuicompressor.2.4.2.jar --charset UTF-8 -o foo.min.js foo.js

ページによっては重すぎる。

上でも触れてますが、酷く重くなるページが有るかもしれません。特に、コメントが多い個別記事ページで重くなる様子。前はそうでもなかったのに、色々と組み込んで増やしたからでしょうか。 Chrome, Safari, Opera ではそれほどストレスなく表示されるのに Firefox と IE だと駄目だった。まだ重いからもう少し調整しないといけいないかも。

ほかに細かいところで、書いていないところがあるかもしれないけれどこんなもんで。

以下の条件で表示・動作確認しました。

OS

Windows XP

Browser

Firefox 3.0.10, Opera 9.64, Chrome 1.0.154.65, Safari 3.1.1(525.17), Safari 4 Public Bata(528.16), IE6, IE7, IE8Beta(IETester)

関連記事リンク

• 30 Days of Mootools 1.2 Tutorials - Day 1 - Intro to the Library -- consider: open blog
• MooTools1.2.1日本語｜高橋文樹.com
• デザインを大幅にリデザインしました！