GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
zoomwall.js·写真コンテンツを並べて楽しむビューワー MOONGIFT
写真は見せ方がとても大事です。単純にタイル状に並べたのでは誰の目を引くこともできません。強弱をつけたり、アニメーションして表示させることで印象づけられるようになります。 今回はそんな写真コンテンツを一覧、拡大表示するzoomwall.jsを紹介します。大量の写真を使った素敵なコンテンツができるはずです。 zoomwall.jsの使い方 zoomwall.jsの初期表示です。写真がぴったり重なって表示されています。 写真をクリックするとズームして表示されます。次の写真、前の写真へはキーボードで切り替えられます。 実際に動かしてみたところです。 写真を隙間なく並べると大量の写真をぶちまけたようなインパクトがあります。スクロールしながら気に入った写真を細かく見て、さらに別な写真にいくと言った具合に多くの写真をまとめて楽しむのにぴったりではないでしょうか。 zoomwall.jsはJavaScri
テーブルの情報をJSON化·Table-to-JSON MOONGIFT
Table-to-JSONはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 先日、JSONからテーブルを自動生成するTablerを紹介しましたが、今回はその逆です。テーブルタグからJSONを生成するTable-to-JSONを紹介します。 デモのテーブルです。Convertボタンを押します。 ダイアログが表示されます。確かにJSONデータで取り出せています。 Table-to-JSONではオプションとして指定したカラムを省く（またはそれだけにする）ことや、非表示な行は省くといった指定ができます。テーブルタグのデータを再利用する際に役立つのではないでしょうか。 MOONGIFTはこう見る Table-to-JSONの面白い点としては任意のテーブルに対して使える点です。うまく使えばテーブルのデータをJSONとして扱いやすく取得できます。この手
JSONデータを使ってテーブルを表示·Tabler MOONGIFT
TablerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。 基本的な使い方。カラムを定義してJSONデータを当てはめるだけです。 全てを表示するのではなく、指定したキーだけを表示させる事もできます。 Ajaxデータで取得したデータを使って表示をよりダイナミックに。 ページネーション付き。ページ番号またはnextボタンで次のリストに遷移します。 Tablerでは元々データがJSONであり、レンダリングはTablerに任せる事ができます。システム側から出力されるリストに合わせてテーブルの表記を変更する事も簡単でしょう。ベタにHTMLタグを書くよ
Googleアナリティクスを使ったA/Bテストを簡単に実現させる MOONGIFT
easyABはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 ボタンの色が赤であるべきか、青であるべきか、キャッチコピーはどちらの方が良いか。そんなことは正直試してみないと分かりません。そこで必要なのがA/Bテストで、easyABを使えばGoogleアナリティクスを使って容易に測定できます。 使い方です。スロットと呼ばれるのがテスト設定になります。A/Bの2パターンに限らず多数の値で試す事ができます。 テストコードです。valueがGoogleアナリティクスで取得できる値になります。 easyABを使えばGoogleアナリティクスへ渡すデータと、そのデザイン上の変更ポイントを簡単に管理できるようになります。JavaScriptでの指定なので画像を変えてみたり、ラベルを変えたりと様々な項目を変更した結果をテストできるでしょう。 MOONGIF
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
他のjQueryライブラリと組み合わせよう。手軽に使える物理エンジン·box2d-jQuery MOONGIFT
box2d-jQueryはbox2dをjQueryに対応させたライブラリです。 最近は素のJavaScriptを書くことが減っているように思います。大抵jQueryを使ってしまいます。既にある他のライブラリもjQueryに対応してくれるとさらに利便性が高くなりそうです。そこで今回はbox2dをjQueryに対応させたbox2d-jQueryを紹介します。 デモ。動画が落下していきます。落下しながらも再生しています。 マウスで飛ばしたりできます。 101個のボールが落ちてくるデモ。 ぼんぼん飛びます。 使い方はシンプルで、重力の影響を与えたいDOMに対してbox2dメソッドを呼び出すだけです。その影響度合いは数値で指定が可能です。既存のコンテンツをいきなりばらばらにしたりもできる面白いライブラリです。 box2d-jQueryはjQuery/JavaScript製、zlib/libpng L
Webサイトのモックアップ開発にもRailsばりのパワーを·Serve MOONGIFT
ServeはERBやSassなどを取り込んだワイヤー開発フレームワークです。 Ruby on RailsはWebシステムを素早く開発できますが、それでもモデルやコントローラーを作っていたらモックアップを作成するよりは時間がかかります。とは言えテンプレートを使ったり、Sassは使いたい…そう思う方におすすめなのがServeです。 サーバを起動します。 Serveの公式サイト自体、Serveでできています。 ファイル構成。コントローラやモデルはありません。 ServeはRailsからコントローラやモデルを抜き取ったようなソフトウェアです。ERBやHamlを使い、SassやCompassを使ってCSSを組みやすくします。テンプレートを使えば繰り返し部分の処理などがとても容易になるでしょう。Railsアプリケーションのモックアップに最適と言えます。 ServeはRuby製のオープンソース・ソフトウ
シェアボタンを手軽にカスタマイズ·Sharrre MOONGIFT
Sharrreは各種ソーシャルサービスに対応したシェアボタンのカスタマイズライブラリです。 最近ではソーシャル系サービスが人気とあって、大抵のWebサイトにシェアするためのボタンが設置されるようになっています。しかしサービス側から与えられるボタンをそのまま設置するのでは面白くありません。自分なりのカスタマイズを施したい、そう思う方はSharrreを使ってみましょう。 デモ1。すっきりとしたデザインです。 デモ2。まず集計された数字が表示されています。 マウスオーバーで横に広がります。 デモ3。こちらもまずは集計された数字が出ています。 マウスオーバーで各サービスのシェアボタンが表示されます。 デモ4。Google Chart APIとあわせて円グラフ化するデモです。 デモ5。一気に横に並べています。 デモ6。ボタンが3D表示で格好いいです。Google+だけアイコンがないのがちょっと寂しい
ああ素晴らしき才能の無駄遣いよ。Gistをスライドに変身！·GistDeck MOONGIFT
GistDeckはGistをスライドに変身させるブックマークレットです。 プログラマーがちょっとしたコードを共有したりするのに便利なのがGitHubのGistです。そんなGistの新しい使い方、なんとスライドに変身させてしまうのがGistDeckです。 使い方です。ブックマークレットをコピーするだけで準備は完了です。 スライドになる元データ。Gist上に書かれているのがポイントです。 ブックマークレットを実行しました。スライドに変身です！ 左右キーでスライドが切り替わります。 ちゃんとスライドとして使えます。 GistDeckはどんなGistでも良いという訳ではなく、ルールに則って作成されている必要があります。とは言えオンラインでテキストを編集し、それをスライドに使ってしまおうというアイディアは秀逸です。なおフォーマットはMarkdownとなっています。 GistDeckはJavaScri
既存のHTMLやURLからMarkdownへ変換·html2text MOONGIFT
html2textはHTMLをMarkdownフォーマットに変換するPythonスクリプトです。 html2textを使うと普段見ているWebサイトや既存のHTMLページをMarkdownフォーマットに変換できます。Markdownの練習にも良さそうです。 実行しました。引数にURLを渡すだけの簡単実行。確かにMarkdownのテキストが出力されています。 ちょっと余計な情報も出ていますが、きちんとテキスト化されています。 コマンドオプションです。画像やリンクを除いたりすることもできます。 html2textを使うとHTMLをシンプルなテキストにしてくれるのはもとより、Markdown記法であるために可逆的にHTMLにすることもできます（class指定などは飛んでいるのでデザインは戻りませんが）。HTMLで書いてしまったためにメンテナンス性が悪くなった文書を再利用したりするのにも使えそうで
Gitリポジトリに蓄積された歴史を可視化、グラフ化する·GitStats MOONGIFT
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT
Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの
JavaScriptによるバイナリハックの世界へようこそ·jDataView MOONGIFT
jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M
個人的に便利。Markdown記法をQuickLookで表示する·QLMarkdown MOONGIFT
QLMarkdownはMarkown記法で書かれたファイルをマークアップして表示するQuickLookプラグイン。 QLMarkdownはMac OSX用のオープンソース・ソフトウェア。HTMLは柔軟なレイアウト設定ができるマークアップ言語だが、一般ユーザが使うにはちょっと冗長的だ。さらにコンピュータに慣れた人が使うにしても普通のドキュメントをHTMLで書きたいとは思わないはずだ。 表示している所 そこで使われるのが特殊な記法で、一定のルールに沿って書くことでHTMLや別なフォーマットに変換したりする。個人的にはMarkdownが気に入っていて、通常のドキュメントもMarkdown記法で書くようにしている。そんな筆者にはぴったりなソフトウェアがQLMarkdownだ。 QLMarkdownはMac OSXのQuickLookでMarkdown記法を表記するプラグインだ。Markdown用の
30分で開発マシンに変身させる魔法のスクリプト·Laptop MOONGIFT
LaptopはUbuntu、Mac OSXのRuby on Rails開発環境をまとめてセットアップします。 これからRailsの勝発をはじめてみたい、そう思ったMac OSX/Ubuntu利用者にお勧めなのがLaptopです。30分であなたのマシンが開発マシンに様変わりします。 例えばこれがMac OSX用。 こちらはUbuntu用。 インストールされるソフトウェアです。 Laptopはたった一行のコードを実行するだけで多種多様なソフトウェアが一気にインストールされます。Homebrew（Mac OSXの場合のみ）/QT/Ack/Tmux/Postgres/Redis/ImageMagick/RVM/Ruby 1.9.2/Rails/Heroku/Tapsなどがインストールされます。ネットワーク状況によりますが、だいたい30分はかかるとのことです。 LaptopはBashスクリプト製、M
ヘッダーとフッターを常時表示するjQueryライブラリ·Keep-in-View MOONGIFT
Keep-in-Viewはヘッダーやフッターを常に画面上部（または下部）に表示し続けるjQueryライブラリです。 最近のWebサイトではヘッダーがスクロールしても常に表示され続けるUIが人気です。同様にフッターも表示し続ける、そんなjQueryプラグインがKeep-in-Viewです。 最初の表示です。ヘッダーとフッターに注目です。 一番下までスクロールしました。ヘッダーが残っています。 途中までのスクロールの場合は普通に上に上がっていきます。 表示されない状態までいくと自動的に上に張り付きます。フッターは常に下にあります。 Keep-in-ViewではオフセットやCSSのz-indexがオプションとして指定できます。 Keep-in-ViewはJavaScript/jQuery製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になります。 MOONGIF
これは便利！Mac OSX/Linuxで動くIE7〜9のVirtualBox用仮想イメージを作成·ievms MOONGIFT
ievmsはMicrosoftが提供するIE動作検証用Virutal PC向け仮想イメージをVirutalBox向けに変換するソフトウェアです。 IEで見たWebサイトの確認をしたいと思ったらWindows機が必要です。さらにIE7/8/9と各バージョンを用意しなければなりません。そんなのは面倒だ！というMac OSX/Linuxユーザの方は今すぐievmsを実行しましょう。ievmsはIE7〜9のVirtualBox用の仮想イメージを作成してくれるソフトウェアです。 インストール中です。数GB以上あるものばかりでかなりの時間を要します。 とりあえずIE7とIE8の仮想イメージができあがりました。VirtualBoxで確認できます。早速起動してみます。 Windows7が使われています。なお最初の起動時にライセンスが切れていましたがオンライン認証で通りました。 アクティベート後、再起動すれ
GitHubに載せるHTMLファイルをコードから生成·Paige MOONGIFT
PaigeはコードやREADMEからGitHub向けの静的なHTMLファイルを生成するソフトウェアです。 インストールは簡単で「npm install paige」のみです。実行は「paige path/to/config」になります。 実際にPaigeを使って作られたインデックスページです。 元になっているのはREADMEファイルです。Markdown記述のファイル（恐らくそれ以外も可）からHTMLを生成しています。 ソースファイルごとに説明ページが生成されます。左に説明、右にソースコードが表示されます。結構見やすいです。 元になったコードです。コメントがそのままテキストとして説明文に使われている形になります。 このような設定を記述する必要があります。 この手のジェネレータは色々ありますが、Paigeはかなりシンプルに使える印象です。GitHub向けと銘打たれている通り、GitHub向け
RubyスクリプトでHTMLファイルからePubを生成·EeePub MOONGIFT
EeePubはHTMLファイルを組み合わせてePubファイルを生成するRubyライブラリです。 電子書籍フォーマットと言えばePub。そんなePubを自分で作ろうと思うとフォーマットの形式を覚えたり、専用の記述方式を習得しなければなりません。しかしEeePubを使えばHTMLファイルからePubファイルを作成できます。 インストールはとても簡単です。「gem install eeepub」のみです。 まずサンプルを試します。スクリプトを実行するとePubファイルが生成されます。 実際に開いたePubファイルです。テキストオンリーですがきちんとePubとして読めます。 元ファイルになったHTMLです。普通にHTMLとして記述されています。HTMLファイルは複数指定できます。 実際のコードです。ePubのヘッダー情報と、実際のコンテンツを渡しています。後は目次にあたる部分を指定しています。最後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
