ページめくりを実現するためのjQueryプラグイン集 先日のHTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 では多くの反響を頂きましたが、他にも同様のページめくりライブラリがあるようです Booklet 個人的にコンパクトなインタフェースがいいなと思うライブラリです。 HTML5がなくともIE8でも動きます Create a page flip effect with HTML5 canvas | Tutorial | .net magazine 以前紹介した、HTML5を使ったページめくりUIの作成チュートリアル。独自に作る場合は参考にできます jFlip なめらかなページめくりを表現できるjQueryプラグインです。 カーソルを合わせるとめくり部分が微妙にアニメーションしているあたりも芸が細かいです Simple Page Peel Effect with

W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」

h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう

Plivo 電話を使ったWEBサービスを構築する際に使えそうなフレームワーク「Plivo」。 マイクなどを使って録音し、WEBに簡単にアップロードしてシェアできたりする「こえ部」が面白かったりしますが、Plivoを使えば電話とアプリケーションを絡めたサービスを作る際に使えそうです。 システムとの対話にはREST APIを使い、RESTの仕様を覚えれば内部について深く知らなくてもある程度使えるようなものになっているみたい。 例えば、スカイプやGTalk等からのリクエストを自分のアプリケーションに流した後、何らかの処理を行い、mp3音声を返すみたいなことが出来るようです。 Amazon EC2に登録したりすると電話がかかってきたりしますが、おんなじような仕組みなんでしょうかね。 各種言語用のヘルパーライブラリもあるみたい。PHPでいうとこちら 実際に試してみたわけでもなく、なんとなく面白そう、

もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記）じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日本語環境を前提には、考えていないように思われます。 ・ＡｃｔｉｏｎＳｃｒｉｐｔ の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした！ 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い

長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 2011年02月03日- Multi-column lists | jQuery Plugins 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」。 <ul><li>1</li><li>2</li> ....... </ul> と、長い ul リストを、jQuery("ul").columns(5, true);のようにすることで、5行に勝手に分割してくれます。6行にしたければ6を指定 次のようになります。 通常これをやろうとすると、数値で割って、規定値にきたら一旦</ul>で閉じてみたいなことをする必要がありますね。 これをたった1行で出来るというのはかなりHTML出力側のプログラムが楽ちんになり、頭を使う必要がないですね。 行

XRegExp: JavaScript regex library ブラウザ標準の正規表現を拡張し、差異もなくしてくれるJavaScriptライブラリ「XRegExp」。 各種ブラウザで共通に使えるよう設計されており、追加機能やプラグインも実装できるみたい。 たとえば、次のように、分かりやすい正規表現でURLを分割したりすることができる模様。 APIのドキュメントはこちら。 標準の正規表現では満足いかないという方は参考にしてみるとよいかも。

サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io

VexFlow - HTML5 Music Engraving HTML5とJSでWEB上に綺麗な楽譜が書けるライブラリ「VexFlow」。 Canvas+SVGで描画され、次のように綺麗に描画できます。 たとえば、次のようにテキストで表現します。 tabstave notation=true notes 4-5-6/3 10/4 次のように描画されます。 チュートリアルをみると結構複雑なものも描画できるみたいです。 私自身、楽譜は全く読めませんが、面白いライブラリですね。

5 Ways to Make Money Blogging ブログでマネタイズする方法が５つまとまっていました。 既にみなさんご存知な事ばかりだと思いますが、まとまっていると便利なのでご紹介です。 1. アフィリエイトマーケティング 2. Google AdSense 3. ペイパーポスト（いわゆる記事広告） →ペイパーポストによる問題も参照しておきましょう 4. バナー広告・純広告 5. 独自プロダクト or サービスの販売 他にも、次のようなものが考えられますね。 6. 寄付・カンパ 7. 月額プレミアム記事（Moongiftさんがプレミアム記事を提供してる例） 8. RSS広告 ブログで小銭を稼いでやろうという方は参考にしてみましょう。 関連エントリ 第3回マネタイズハックス議事録 - yukawasaグループ

zepto.js ? the aerogel-weight mobile javascript framework jQueryライクに使えて2KBしかないスマートフォン用JSフレームワーク「zepto.js」。 それなりにスマートフォンでも速度がでるとはいえ軽いに越したことはないというところで、jQueryのminify版が26KB (1.4.3) というところで、１０分の１以下のサイズでjQueryと同じように使えるのはいいかもしれませんね（当然機能は落ちますが） 詳細については以下のSlideShareも参考に出来ます

20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする

jQuery color plugin xcolor - Website and Application Intelligence HTMLの色の操作が素晴らしく簡単になるjQueryプラグイン「xcolor」。 出来ることは豊富にあるのですが、以下に使えそうなものを列挙してみます。 ２つの色を混ぜ合わせて新しい色を作ることができる $.xcolor.combine('#800000', '#0000fa'); 特定の色を明るくすることができる $.xcolor.lighten('#ff0000'); 特定の色を暗くすることができる $.xcolor.darken('#ff0000'); 類似の色を生成することが出来る $.xcolor.analogous('#ff0000'); getRGBメソッドでRGBのオブジェクトに分解できる WEBセーフカラーに補正することが出来る 応用すること

IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js... 次の記事 ≫：JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」 Supercharged Javascript Pre-compression also doesn't solve a multiple connection issue. 複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法。 HTMLでの読み込みタグも次のようにスッキリできます。 <!-- Namespace source file --> <script src = "yahoo.js" ></script> <!-- Dependency source files --> <script src = "dom.js" ></script> <script

ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」 2009年10月26日- PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」が本家PEARにあがってます。 bitly, tr.im以外にも、is.gd, short.ie、digg、tinyurl の短縮サービスが現状では使えて、今後もプラグイン形式で簡単に増やすことができるクラス構造になっています。 alpha版という位置づけなので注意が必要ですが、簡単にURLの短縮ができるのでとても便利です。 サービスで、URLを短縮したい、そしてその短縮URLに好きなサービスを使いたいので選択できるようにしたい、というニーズに応じる際に非常に便利なライブラリとなっています。 では、それぞれのサンプルコード

JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript

WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」 2009年08月17日- UrlParams :: Firefox Add-ons WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」。 もうご存知の方も多いかもしれませんが、知らなかったのでご紹介。 Yahoo! などの検索エンジンにアクセスすると、「http://search.yahoo.co.jp/search?p=test&ei=UTF-8&fr=moz2」のように色々と引数がつきますが、これを分かりやすく解析してくれます。 さらに解析するだけでなく、独自パラメータを定義して送信するといったことも可能です。 上記GETによるアクセスで、以下のようにパラメータを分かりやすく表示してくれます。 POSTの場合は別のペインにパラメータが表示さ