円や棒グラフをサポートしたCanvasによるグラフライブラリ·Chart.js MOONGIFT
Chart.jsはHTML5/Canvasを使ったグラフライブラリです。 Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。 折れ線（曲線）グラフです。 棒グラフ。 レーダーチャート。 円のエリアグラフ。 円グラフ。 ドーナッツチャート。 Chart.jsはHTML5/Canvasで表示されているのが特徴です。なおサポートブラウザとしてはIE7から対応しています。対応しているグラフは折れ線、棒、レーダー、円のエリア、円、ドーナッツの6種類になります。表示の際にはアニメーションが実行されますが、その後はマウスクリックなどには反応しないようです。 Chart.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフト
要注目！PHP製のWeb IDE·ICEcoder MOONGIFT
ICEcoderはPHP製のWeb IDEです。JavaScriptやHTML、Rubyのコードに対応しています。 Webブラウザを使った開発環境もそろそろ本格化しそうな雰囲気です。今回紹介するのはICEcoder、PHP製のWeb IDEです。 最初にパスワードを登録します。 トップページです。 コード表示です。ハイライト処理されています。 コンソール機能があります。ターミナルとして使えます。 catなどのコマンドを打てばそのまま出力が返ってきます。 DOMを選択するとその中のタグ全体が選択状態になります。 MySQL管理も付属しています。 主な機能はタグの構造チェック、テーマによるカラーリング、検索/置換、コマンドを使ったタグの高速入力、JavaScriptのヒントおよび構文チェックとなっています。対応している言語はHTML/CSS/JavaScript/Less/CoffeeScri
Web上でのプログラミングがさらに便利に。JavaScriptを使った開発補助·Tern MOONGIFT
Ternは入力補完や関数の引数表示と言った機能がついたJavaScript用プログラミング補助ライブラリです。 そろそろWebブラウザ上でコーディングを行える環境が整ってきたのではないでしょうか。プログラミングするためのエディタ環境として必要なのはハイライターなどの他にもたくさんあります。その幾つかを提供してくれるのがTernです。 入力補完。 文字を打つと絞り込まれていきます。 変数、クラスの定義を探します。 オブジェクトの種類を下に表示できます。 変数名を変更します。 名前空間に対応しているので余計なところは変更しません。 関数の引数を表示します。 デモ動画です。 Ternでは入力補完、変数やオブジェクトの定義元検索、関数の引数表示、変数名の一括変更と言った機能がサポートされています。いずれもローカルアプリケーションのプログラミングエディタには備わっている機能と言えるでしょう。しかしそ
自分で立てるInstagram風サーバ·ownStaGram MOONGIFT
ownStaGramは独自に立てられるInstagram風サーバです。 Instagramは格好いい写真が並んでいて良いんだけど、Facebookに買収されたり規約の変更問題があったりして自分のデータがちゃんと自分のものであり続けられるか心配…といった方はownStaGramを使って独自のInstagramサーバを立てちゃいましょう。 写真ページ。写真が大きく表示されていい感じです。 一覧ページ。地図にマッピングされているのが良いです。 個人のページももちろんあります。 ownStaGramではAndroidアプリも配布しており、サーバのアドレスを自由に変更した上でログインできるようになっています。Androidアプリの方はオープンソースではないようですが、写真を撮影してフィルターをかけてといった操作はできるようです（筆者が試した限りではログインでエラーになってしまうのですが…）。 own
日本語、Ajax対応のメールフォーム·ZeroMail MOONGIFT
メールフォームと言えばWebサイトによくある機能です。よくあるものだけに改めて作成するというのは意外と面倒に感じてしまいます。そこで使ってみたいのがZeroMailです。 入力フォームです。エラーチェックが行われています。 確認画面を挟むことができます。こちらはエラーがあった場合。 こちらはエラーがなかった場合。 送信完了です。 Ajaxによるフォーム送信もできます。 管理画面です。 ダウンロードもできます。 ZeroMailはPHP製のメールフォームで、入力チェックやAjaxでの送信に対応し、さらに管理画面を使ってメールの一覧を確認することもできます。添付ファイルの追加も可能です。文字コードもUTF-8の他、EUCやShift-JISでも動作します。 ZeroMailはPHP製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る DRYの法則に則って考えるならば
時間によって発信する内容を変える·Aware.js MOONGIFT
Aware.jsは時間によってデザインやテキストを変えるJavaScriptです。 昔、JavaScriptと言えばWebサイトの表示をちょこっと変えるアクセントのような位置づけでした。訪問した時間によって「おはようございます！」といったメッセージを出すのに使われたりしていました。同様のことを、さらに今風にしたのがAware.jsです。 デフォルトは表示した時間によります。 朝8時に訪れるとこんな感じ。ちょっと朝焼け風。 朝6時。 夜9時。 夜11時。 Aware.jsが行っているのは訪問した時間によってテキストの色や背景色、メッセージを変えるという操作です。まさにresponds to timeなデザインとなっています。使いどころは難しいですが参考にどうぞ。 Aware.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
400種類を越えるカメラに対応したJavaScriptによるRAWファイルビューワー·rawson.js MOONGIFT
rawson.jsはデジタルカメラのRAWファイルを読み込み、描画するJavaScriptライブラリです。 デジカメで撮影した際のフォーマットではJPEGが最も一般的ですが、よりこだわる人はRAWファイルとして保存して自分で加工するのではないでしょうか。そんなRAWファイルをWeb上で閲覧するためのソフトウェアがrawson.jsです。 デモです。RAWファイルをドロップします。RAWファイルはソニーのRAWデータダウンロードよりお借りしました。 読み込み中…かなり待たされます。 読み込まれました。超巨大です。 もちろんメタデータの読み込みにも対応しています。 RAWファイルは特に統一された規格はなく、メーカーによってまちまちな構造になっています。そのためrawson.jsでは各社の仕様に対応し、なんと400以上のカメラに対して対応しています。サイズはそれなりで、500KBもある凄いJav
覚えるパスワードは一つだけ。サービスごとのパスワード生成はお任せ·password.ly MOONGIFT
password.lyはマスターパスワードを使ってサービスごとのパスワードを生成するWebサービスです。 ID/パスワードの組み合わせによる認証の仕組みはあまり好きではありませんが、現状のWebでは主流になっています。せめてセキュアなパスワード管理を行うためにもpassword.lyを使ってみるのを検討してみましょう。 トップページです。最初にマスターパスワードを決めます。 次にサービスを選択します。自分で決めることもできます。 そうするとパスワードが生成されます。マスターパスワードとサービス名の組み合わせによって同じパスワードが生成される仕組みです。 つまりpassword.lyを使えばあなたが覚えておくのはマスターパスワード一つで良いということです。後はpassword.lyがサービス名に応じてパスワードを生成してくれます。password.lyでは有料サービスも提供していますが、もち
画像のサムネイル表示にも対応したWebブラウザへのD&Dアップロードライブラリ·Dropzone MOONGIFT
Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。 Gmailではじめ（恐らく）見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。 トップページです。 ファイルをドロップしました。画像はサムネイルが表示されます。 画像をアップロード中。平行して実行されます。 ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。 DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
すっきりしたデザインのギャラリーライブラリ·Galleria MOONGIFT
GalleriaはレスポンシブWebデザイン対応を謳ったJavaScriptイメージギャラリーです。 デジカメで撮影した多量の写真も見せなければHDDの肥やしでしかありません。そこでWebサーバ、Flickr、Picasaなどにアップロードした後はGalleriaを使ってギャラリー化してみましょう。 サムネイルが下に並び、上で写真の表示を行います。 フローティングで説明も表示できます。 縦の写真も問題ありません。 大きな写真もぴったり表示されます。 Picasa/Flickrといった外部リソースの表示も行えます。 Galleriaはレスポンシブなイメージギャラリーとなっていますが、MIT Licenseの範囲で公開されているテーマでは対応していないように見えます。また、プレミアムなテーマは販売されており、より多様なデザインのギャラリーが展開できるようになっています。 GalleriaはJa
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
多機能さが売りのダイナミックスライド·jmpress.js MOONGIFT
jmpress.jsはImpress.jsライクなダイナミックプレゼンテーションを実現するjQueryライブラリです。 一つのWebページ上でダイナミックなスライドを展開するimpress.jsを先日紹介しましたが、さらにすごいプレゼンテーションを展開できるかもしれないスライドライブラリがjmpress.jsです。 トップページです。 Impress.jsライクにぐるぐる動き回ります。 画像も表示できます。 プレゼンノートも出せます。 ズーム対応です。 スライド内でのアニメーションも可能です。 こちらはボックス。立体のボックスが回転します。 自動的にレイアウトを調整してくれるサンプル。 動的にスライドを生成するサンプル。 上に並んだサムネイルが回転しながら順番にスライド表示されます。 画像をメインコンテンツにしたスライドサンプル。 写真のサムネイルが並んでいます。 こんな感じでサークルにな
社内で立てられるGistサーバ·Gistub MOONGIFT
GistubはGitHubの提供するGistのクローンです。 GitHubの提供するスニペットサービスのGist。便利に使っている人も多いと思いますが、何となく会社で使うのは控えてしまっている…そんな人も多いでしょう。そこで社内で立てられるGistクローンGistubを使ってみましょう。 パブリックなGist一覧。 ソースコードハイライト付きです。 編集画面です。 編集すると履歴がつきます。 新しいGistの追加画面。 プライベートなGistも作成できます。 Gistubはエディター画面こそ単純なテキストボックスで、ハイライトする言語指定ができないものの他はGistと変わらず普通に使えるようになっています。社内で立ててチームで使ったりするのに良いのではないでしょうか。 GistubはRuby/Ruby on Rails製、MIT Licenseのオープンソース・ソフトウェアです。 MOON
node.jsとGoogle Chromeによるローカルアプリケーション開発·node-chrome MOONGIFT
node-chromeはnode.jsをバックエンドに、フロントエンドをChromeを使ってローカルアプリケーションを開発します。 node.jsを使っていると何でもJavaScriptで完結したい気分になってきます。そこでターゲットになるのがローカルアプリケーションです。Gtkなどを使うことなく、何とChromeを使ってしまうソフトウェアがnode-chromeです。 デモアプリを立ち上げたところ。 デモのコードです。 node-chromeではGoogle Chromeのパスを指定し、普段使っているプロセスとは別でWebブラウザを立ち上げます。後はnode.jsのサーバとして動くのみです。ローカルでWebアプリケーションを立ち上げて利用するという新しいスタイルが実現しそうです。 node-chromeはnode.js製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
ページ内に埋め込めるカスタマイズ可能な表計算テーブル·Handsontable MOONGIFT
HandsontableはjQuery製の小さな表計算風ソフトウェアです。 Webブラウザ上で表計算を行えるサービスは増えてきましたが、大抵全画面で表示されるものです。Handsontableはごく小さなグリッドをページ内部に埋め込んで使えるソフトウェアです。 こんな感じで簡易的な表が描けます。 選択したグリッドをコピーできます。 選択から入力もできます。 バリデーションや入力値の変換もできます。 行の削除やカラムの非表示などのアクションを追加します。 コンテクストメニュー。 コンテストメニューのカスタマイズも可能です。 リードオンリーなセル。 HandsontableはJSONでデータを定義します。データは編集も可能で、Ajaxを使うこともできるのでユーザビリティ高い編集画面を提供できます。ごく小さなマスタ編集を行ったりするのにぴったりではないでしょうか。 HandsontableはjQ
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
iOSアプリのユーザビリティテストに。操作を動画として保存·ScreenRecorder MOONGIFT
ScreenRecorderはiOSアプリの操作ログを動画として保存するソフトウェアです。 iPhoneアプリのユーザビリティテストはWebに比べると大変です。しかしその操作ログがあれば改善すべきポイントが見つかりやすそうです。そのためのソフトウェアがScreenRecorderです。 実際に使ってみたデモです。 操作は動画として記録されます。 タップしたところは赤い丸で表示されます。 ScreenRecorderは既存のiOSアプリに仕込んで利用します。操作は逐次動画として保存されます。FPSは設定で変更可能です。さらに自動でファイルに保存し、ローテーションも行います。App Storeへの提出にも対応しています。 ScreenRecorderはiOS用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ユーザビリティテストを行う手法は幾つかあります
ユーザ動向をトラッキングしサイト改善につなげる·Analytics.js MOONGIFT
Analytics.jsは多数のアクセス解析、トラッキングサービスを一元管理するためのJavaScriptライブラリです。 Webサイトのアクセス解析と言っても色々な分析が求められます。Google Analyticsは優秀ですが、それだけで十分という訳ではありません。そこで使ってみたいのがAnalytics.jsです。 実行の定義です。多数のサービスを一元管理できます。 ユーザを特定してアクションを取得する場合です。 Analytics.jsではGoogle Analytics、Mixpanel、Intercom、Customer.io、Olark、Chartbeatといった解析エンジンを一つにまとめて使えるようにします。アクションやユーザデータ、商品の価格などをトラッキングしておいて解析に役立てると言ったことも可能です。 Analytics.jsはJavaScript製のオープンソース
Web SQL Databaseと一緒に使いたいライブラリ·WebSQL.js MOONGIFT
WebSQL.jsはWeb SQL Databaseを使いやすくするJavaScriptライブラリです。 惜しくもHTML5の仕様からはもれていますが、新しいWebブラウザの機能にWeb SQL Databaseがあります。そんなWeb SQL Databaseをより使いやすくしてくれるライブラリがWebSQL.jsです。 デモです。データを追加したり、削除したりできます。 さらに追加しました。再読み込みしても再現します。 WebSQL.jsはデータベースの作成、テーブルの作成、データのCRUD操作、テーブルの削除が行えます。さらにトランザクションやSQLの実行も可能です。各メソッドはチェーンでつないで実行させることも可能になっています。 WebSQL.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web SQL Da
Markdownで書いたメモをWebブラウザで閲覧、検索·mamemose MOONGIFT
mamemoseはMarkdownを使ったメモサーバです。 Markdown記法は個人的に気に入っていて、色々なテキストをMarkdownで記述しています。同じように自分のメモをMarkdownで書いている人におすすめなのがmamemoseです。 例です。 数式やコードのハイライトに対応しています。 テーブルも使えます。 検索機能もあります。 mamemoseは設定ファイルを使ってメモフォルダを指定し、そのフォルダの中にあるファイルを一覧表示します。ファイルはMarkdownのUTF-8で書かれている必要があります。細かな表示カスタマイズも可能です。全文検索機能もあるので、個人のメモ環境として使ってみると便利ではないでしょうか。 mamemoseはRuby製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Markdownというのは書き手と読み手が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
