黄金比をサイトに取り入れるためのCSSグリッドシステム「Golden Grid System」をご紹介。

黄金比とは、「1:1.618033988..」からなる比率で、最もバランスが取れていると感じられる比率の事を指します。

画面の分割は、
ワイドスクリーン用に16分割、
タブレット用に8分割、
スマートフォン用に4分割しているようです。

メディアクエリを使用し、240〜2560ピクセルの画面サイズに対して、
バランスの取れたページを作れるとの事。

ただ、iPhone用のSafariに一部バグがあるのと、
IE6〜8に対してはIE用のクラスを作らないと行けないようです。

そのまま使えるフレームワークというわけではありませんが、参考にはなると思います。

作者の方はLess Frameworkを作った方のようです。興味のある方は下のリンクからどうぞ。

ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、
そこまで手をかけたくない小規模の案件も多いですよね。

そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。

CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。

CSVの形式

CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。
データは2行目以降でなければいけないようですね。

文字列の中に,(カンマ)を使いたい場合には、;（セミコロン）区切りでもOKなようです。

使い方

使い方はいたって簡単でCSVのパスを指定するだけです。

var members = Csonv.fetch("path/to/csv/family.csv");
var result    = JSON.stringify(members, null, 2);
alert(result);

↑これでJSON文字列が取得できるようになります。

プログラムの知識も殆ど必要なくできるので、ちょっとしたときに活躍してくれそうですね。

詳細&ダウンロードは下のリンクからどうぞ。

HTML5でAudioを便利に使うライブラリ「Buzz」

HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。

それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、
色々なAPIが用意されています。

対応しているファイル形式

ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。

音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。

ブラウザによっては動作しないものもあるようですが、
フェードイン/フェードアウトも実装されていました。

デモも非常に面白いサイトに出来上がっていました。
こういった便利なライブラリは覚えておくといつか使えそうです。

詳細&ダウンロードは下のリンクからどうぞ。

無限にドラッグできるインターフェイスをjQueryで作れる「Infinite Drag」

全体をドラッグで移動できるようになっており、タイル毎にHTMLを設定できるようになっています。

各タイルには自由にHTMLを設定したりできるので
フォームを表示したり、画像にしたり、何でもOKのようです。

移動方向を横だけに限定したりもできました。

使い方によっては面白いものができそうですね。
ポートフォリオとかに良いかも。

興味のある方は下のリンクからどうぞ。

リッチなテキストエディタを使いたい場合にWYSIWYGエディタを導入するサイトが増えてきている。

WordPressなどで使われているTinyMCEは高機能な分、かなり大きなファイル構成になっているため、どうしても容量が大きくなりがちだ。

しかし、本日紹介する「NicEdit」をすれば、わずか30KBの1つのファイルで
WYSIWYGの実装が可能だ。

使い方

実装するには、以下の２行を追加するだけでOKだ。

<script src="nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>

これで、ページ内にあるテキストエリアが自動的にWYSIWYGエディタに様変わりする。

↑実装した様子

必要最低限の機能で良い場合に十分使えるシステムだ。
公式サイトにはデモがあるので、一度触れてみることをお勧めする。

オープンソースのCMSと言えばもはやWordpressがスタンダートですが、本日紹介する「Calipso」はWordPressとDrupalにインスパイアされたCMSだ。

コンテンツのメンテナンスをするのにCMSを使うのは良くあるが、
最近話題のnode.jsを使ってみたいという場合にどうだろうか。

サーバーサイドにnode.jsとMongoDBで動くように作られており、ちょっとしたサイトを構築するのに更新が簡単だろう。

↑プロフィールの編集画面

日本語も問題なく入力することができるようになっているので、サイト内の一部の更新をする。そんな場合にマッチする便利なCMSではないだろうか。

特定の用途だけに特化したフレームワークが必要な場合、シンプルなもので良いのではないだろうか。

「microjs」では、DOM構築後のタイミングで処理を実行したいだけのフレームワークやBase64処理をするだけの物、ブラウザ判別するだけの物など、
ちょっとした時に使えるフレームワークが50以上揃っています。

以下にいくつか気になった物をご紹介。

domReady

DOM構築後のタイミングで処理を実行場合に使えます。0.2KB。

domReady(function () {
  // dom is loaded!
});

Base64.js

Base64処理ができます。0.9KB。

Bowser

ブラウザ判別したい時に。0.2KB。

if (bowser().msie && bowser().version <= 6) {
  alert('hello China');
}

Micro-Templating

JSで使えるテンプレートエンジン。0.2KB。

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

jQuery や Prototype のような フルスタック なフレームワークは必要ないという場合良さそうですね。

使ってみたい方は下のリンクからどうぞ。

RSSをサイトに表示する際に使えるプラグインを見つけたのでご紹介。

「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。

Webサイトとは別にブログを持っている方に良さそうですね。

使い方

HTML

JavaScript

$("#feed").PaRSS(
  "http://www.your-blog.com/feed",  // feed url
  5,  // 取得するアイテムの数 (optional)
  "M jS g:i a",  // 日付のフォーマット (optional)
  true  // descriptions (optional)
);

日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。

見た目の変更方法

RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。

出力されるHTML

・タイトルが囲まれるタグ

・日付が囲まれるタグ

・画像が囲まれるタグ

・descriptionが囲まれるタグ

追加するCSS

以下のようなCSSを作成します。

span.parss-title {
  /* title style definitions here */
}
span.parss-date { 
  /* date style definitions here */
}
span.parss-image {
  /* image wrapper style definitions here */
}
span.parss-image img {
  /* styles for the actual image element */
}
div.parss-description {
  /* description style definitions here */
}

これで見た目の変更が可能です。

シンプルなスクリプトですね。
興味のある方は下のリンクからどうぞ。

「Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。
#以降のアドレスを利用してURLルーティングを実装されており、
簡潔に記述することを目指したフレームワークとなっています。

RubyのSinatraというフレームワークにインスパイアされたみたいですね。

わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。

使い方

jQueryを読み込んだ後に、sammy.jsを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
  <script src="sammy.js" type="text/javascript"></script>

URLに対して実行するアクションを設定します。

JavaScript

(function($) {
    //アクションの設定
    var app = $.sammy(function() {
        //TOPにアクセス
        this.get('#/', function() {
          $('#main').text('');
        });
        //TOP以外のアクションを追加していきます。
        this.get('#/test', function() {
          $('#main').text('Hello World');
        });

    });

    $(function() {
        app.run()
    });
})(jQuery);

html

Hellow Worldを表示
TOPページ

jQueryがベースになっているので、既存のプラグインを使って処理を実装する事も簡単です。
ちょっとしたWEBアプリケーションを作る際に便利そうです。

※jQueryのバージョンは1.4.1以上が必要です。

Githubにはサンプルコードもアップされていますので、
興味のある方は下のリンクからどうぞ。

JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。

出力したいメッセージを指定するだけできれいに整形して表示してくれます。

例えば、以下のようなJavaScriptを実行してみます。

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

↑すると、こんな感じで素敵に表示してくれちゃいます。
アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。

使い方

使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。

<html>
  <head>
    <script type="text/javascript" src="blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="blackbird.css" />
  </head>

ほとんどのメジャーなブラウザで動作するようになっています。
IE6にも対応していますので、あのブラウザだけ動かないんだけど、、、
と言った時にも使えそうです。

便利なキーボードショートカット

ライブラリにはショートカットも含まれており、F2で表示非表示の切り替え、
Shift + F2でボックスの位置を変更、 Alt + Shift + F2でログメッセージをクリアしてくれます。

サイトには各ショートカットを実行するブックマークレットも有りますので、いちいち覚える必要もありません。

名前空間の変更も！

とは言っても既存のサイトでlogという名前をすでに使っているよ！という場合もあるかと思いますが、心配いりません。

簡単に名前空間を変更できるようになっています。

blackbird.jsを開いて11行目を変更すればOKです。

var NAMESPACE = 'log';

↑変更前

var NAMESPACE = 'myCustomLog';

↑これでmyCustomLog.debug(‘hoge’);が実行できるようになります。

ダウンロードは下のリンクからどうぞ。