emojify.jsはテキストから絵文字に一括変換してくれるWebサービスです。 様々なWebサイトで使われている絵文字。単なるテキストでは伝わりづらい感情を表現するのに役立ちます。そんな絵文字を自分のサイトでも手軽に導入できるのがemojify.jsです。 ずらっと並んだ絵文字。これが全て使えます。 実際のソース。単なるテキストです。 emojify.jsはテキストとして書かれている絵文字のテキスト（emoji-cheat-sheet.comで定義されているもの）を絵文字に変換してくれます。実に500種類近くのアイコンが使えるようになります。emojify.run()を実行するだけでテキストから画像に自動変換してくれます。 emojify.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 絵文字の持つ威力はとても大きいで

HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手

Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。 インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。 例。単純にビューを表示しています。中央がコード、右側がその結果です。 アニメーションもできます。 ボックス。スタイル指定を行っています。 イベントももちろん取れます。 こんな表示も短いコードで実現します。 Framerはビューを基本単位として表示設定を行います。どの場所に表示するかを指定し、貼付けていくイメージです。単色の他、画像を入れることもできます。さらに簡単にアニメーションの指定もできたり、CSSのスタイル設定も追加できます。イベントとアニメーションを組み合わせれば、動作が分かりやすく確

PupergrepはWebブラウザ上でリアルタイムにログデータを閲覧したりGrepで検索できるソフトウェアです。 開発を行っている際にログファイルをtailして眺めているといった人は多いかと思います。しかし複数のファイルを同時に監視したり、その中から必要なものだけを抽出したり…というのは面倒です。そこでPupergrepを使ってみましょう。 Webブラウザ上でtail風にリアルタイムにログが確認できます。 ハイライト指定もできます。 機能としてはGrepによるマッチした行だけの表示、ログファイルの表示切り替え、テキスト/HTMLのサポート、ANSIカラー対応、コードを変更してのカスタマイズとなっています。Pupergrep単体で動く訳ではなく別途server.jsを記述（といってもサンプルコードあり）するので自由にカスタマイズできるのが魅力と言えそうです。 Pupergrepはnode.j

iPictureはIKEA風に画像にツールチップを表示するJavaScriptライブラリです。 IKEAのカタログアプリを見ると、写真の一部がクリックできるようになっており説明が表示されます。あれに似た効果を実現してくれるのがiPictureです。 サンプルです。お弁当の一部にボタンがついています。クリックすると説明が表示されます。 こんな感じに。クリックすると別タブでおにぎりの作り方が表示されました。 動画も対応。インラインで再生されます。 こちらは洋服。とてもマッチします。 車。動画で機能を説明する…とても良いのではないでしょうか。 こちらはIKEA風。まさにそのままといった感じです。 文字だけの説明もできます。 iPictureは画像に対してJSONデータで表示するツールチップを指定します。画像に対する絶対位置で指定するのですが、ドラッグ&ドロップでコードを生成できるエディタもありま

Analytics.jsは多数のアクセス解析、トラッキングサービスを一元管理するためのJavaScriptライブラリです。 Webサイトのアクセス解析と言っても色々な分析が求められます。Google Analyticsは優秀ですが、それだけで十分という訳ではありません。そこで使ってみたいのがAnalytics.jsです。 実行の定義です。多数のサービスを一元管理できます。 ユーザを特定してアクションを取得する場合です。 Analytics.jsではGoogle Analytics、Mixpanel、Intercom、Customer.io、Olark、Chartbeatといった解析エンジンを一つにまとめて使えるようにします。アクションやユーザデータ、商品の価格などをトラッキングしておいて解析に役立てると言ったことも可能です。 Analytics.jsはJavaScript製のオープンソース

Visual Eventはイベントが設定されているDOMをビジュアル化するライブラリです。 最近のWebサイト開発においてJavaScriptを使わないということは殆どなくなりました。jQueryなどを使って様々なイベントを設定しているサイトも多いでしょう。そこで使ってみたいのがVisual Eventです。 実行しました。色がついた部分がイベントを設定しているところです。 フローティングでアクションの内容が分かります。 Yahoo! Japanで実行しました。意外と色々なアクションが設定されています。 表示の切り替え系が多いようです。 Visual Eventを使うとjQueryで設定したり、onClickで指定したりしたアクションが一目で分かるようになります。jQueryで開発中に設定したイベントが正しく実装されているかどうか確認するのにも使えそうです。 Visual EventはJa