billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
STREAMA - 自分で立てるストリーミング動画配信サーバ
動画配信サービスがたくさん出てきました。NetflixやAmazonのような大手から、Disney+やDplay、DAZNのような特定ジャンルに特化した配信サービスもあります。日々動画を見ている人も多いでしょう。 しかし開発者としては見ているだけでは面白くありません。配信側になりたいという方はSTREAMAを見てみましょう。 STREAMAの使い方 トップページ。Netflixっぽい画面です。 動画一覧。 動画再生画面です。 ジャンルごとの一覧もあります。 動画管理画面。 STREAMAは個人や家庭などでの利用を想定しているようです。そのため、ファイル一覧のような画面がありますが、カスタマイズすることでNetflix風の配信サービスにもなり得るでしょう。動画をたくさん持っている方はSTREAMAで管理、閲覧するのも良さそうです。 STREAMAはnode/JavaScript製のオープンソ
JavaScriptグラフライブラリHighchartsをPHPから使いやすくする·HighRoller MOONGIFT
HighRollerはJavaScriptのグラフライブラリHighchartsをPHPでラッピングしたソフトウェアです。 非商用であれば無料で使えるCanvasタグベースのグラフ表示ライブラリがHighchartsです。そんなHighchartsをPHPから使いやすくしてくれるライブラリがHighRollerになります。 グラフのサンプルです。円グラフ。 棒グラフ。円グラフの項目にマウスを当てるとフローティングが表示されます。 横および縦の棒グラフ。 折れ線グラフと曲線のグラフ。 エリアグラフも折れ線および曲線でも。 プロットだけのグラフもできます。 タイトルに日本語を使うこともできます。 jQuery版の他、Mootools版も。 利用法。requireするファイルが多数あります。 円グラフの描き方。とても簡単です。 折れ線グラフ。こちらも同じくらいシンプルです。 HighRoller
WebベースのVisioと言えそうな·Diagramo MOONGIFT
DiagramoはWebベースのフローチャートアプリケーションです。 個人的にCacooというサービスを好きでよく使っているのですが、機密性の高いドローなどではクラウドサービスが使えないかも知れません。そんな時に試してみて欲しいのがDiagramo、Webベースのフローチャートソフトウェアです。 インストールします。ウィザードで進めていくだけです。 メイン画面です。左側にステンシル、中央が実際に配置する部分です。 日本語も使えます。 ネットワークやUMLも作成できます。 ステンシルがドラッグアンドドロップではなくクリックベースなのはちょっと残念ですが、操作性は悪くありません。画像エクスポートは有料の範囲になっていますが、フローチャートをはじめとする図面の共有目的であれば十分ではないでしょうか。 DiagramoはPHP製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう
Webカムを使って頭を認識し、オブジェクトを動かす·headtrackr MOONGIFT
headtrackrはWebカメラの映像からリアルタイムに顔認識を行うJavaScriptライブラリです。 Webカメラは動画チャットで使われることが多かったですが、最近ではもっと違う分野への利用も試みられています。その一つとして今回は顔認証技術を使ったheadtrackrを紹介します。 Webカメラへのアクセスが必要です。 フェイストラッキングはこのように顔を傾けても追従してきます。 デモ1。顔を動かすとサークルがダイナミックに移動します。 こちらはゲームのデモです。顔で操作するゲームというのはなかなか斬新。 ボールを避けて飛びます。 こちらは別なデモ。顔を傾けると3D空間を移動できます。 headtrackrはWebカムの映像をリアルタイムに解析し、顔を認識します。そしてその動きに合わせて別なオブジェクトを動かします。顔で操作するという感覚はとても面白いです。 headtrackrはJ
スマートフォンに特化したWebアプリケーションフレームワーク·Emy MOONGIFT
Emyはスマートフォン向けのWebアプリケーションフレームワークです。 スマートフォン向けのWebアプリケーションフレームワークは幾つか存在します。有名なところではjQuery MobileやSenchaでしょうか。その土俵に乗り込まんとするEmyを紹介します。 良くあるiPhoneアプリ風のUIです。 色々なデモが用意されていますので試してみて下さい。 パネル系UI。 キーワード検索用ボックス。 ボタン。 リスト。 音楽アプリのデモ。 実際に音楽が流れます。タブを切り替えてもちゃんと音楽は流れ続けます。 コンタクトリストアプリのデモ。 ノートアプリデモ。 ちゃんと追加できます。 マップアプリ。マップは色々な表現でデモが用意されています。 Instagram連携。表示のみですが。 テーマを変更して。こちらはAndroid風。 Windows Phone風。 拡張もできます。 拡張の一つ。ア
Googleリーダーからこっちへ。シンプルで使い勝手の良さそうなフィードリーダー·CommaFeed MOONGIFT
CommaFeedはJava製、Webベースのフィードリーダーです。 2013年7月でサービス終了になるGoogleリーダー。既に移転先は決まっているでしょうか。まだ、という方はCommaFeedをチェックしてみて下さい。 トップページです。 Googleリーダーへのアクセス権限を求められます（オプションです）。 Googleリーダーに似たUIです。シンプルでいい感じ。 Jキーで読み進めます。この辺りもGoogleリーダーに似ています。 ?キーでヘルプ表示。まだスター機能はなさそう。 設定画面です。カスタムCSSを使えばよりGoogleリーダーに似せられるはず。 インタフェースはGoogleリーダー風で使い勝手が良さそうです。自分で立てる分には広告もなく使えるでしょう。個人的に足りないのはスター機能くらいですが、カスタマイズして追加すれば十分と言えそうです。 CommaFeedはJava製
Webカムの映像を認識してイベント実行·oflow.js MOONGIFT
oflow.jsはWebカム映像を認識してイベントを実行するソフトウェアです。 最近では生体系のガジェットに人気が集まっています。脳波を読み取ったり、体温を読み取ったりするデバイスを装着しても良いですがPCであればWebカムを使うのが手軽です。今回はoflow.jsを紹介します。 最初にカメラへの接続許可を求められます。 左にWebカムの映像、右側にそれを解析したアスキーアート化（？）したグラフィックスが描かれます。 Webカムの下にボールの顔の向きなどによって動くようです。 こちらはピンポンゲーム。手の動きによってバーが上下します。 oflow.jsを使うことでWebカムから映像を読み込み、そこから意味のある情報を抜き出すことができるようになります。眼球の動きと言った細かい動きは難しそうですが身振り手振りによる操作レベルであれば十分ではないでしょうか。 oflow.jsはJavaScri
セカイカメラ風ARを実現するフレームワーク·PanicAR MOONGIFT
PanicARはiOS向けのセカイカメラ風ARフレームワークです。 セカイカメラで賑わったスマートフォン+ARですが、今はあまり盛り上がっていません。しかしAR自体の使い道はまだまだ模索されるべきでしょう。そこで使ってみたいフレームワークがPanicARです。 スプラッシュ画面です。 最初に位置情報の確認が入ります。 カメラ上にフローティングで説明が表示されます。 カメラを下向きにするとレーダー風表示になります。 地図はiOSデフォルトの地図を使っています。 ローマは9851km先…。 PanicARはiPhone用のフレームワークで、全体で4MB以下、シンプルで高速になっています。CocoaPodにも対応しています。スマートフォン、タブレットの双方で使えます。 PanicARはObjective-C製のソフトウェア（非商用に限り無料）のソフトウェアです。 MOONGIFTはこう見る デジ
小説家になろうからコンテンツをダウンロード&電子書籍化·Narou.rb MOONGIFT
Narou.rbは小説家になろうに掲載されているコンテンツをePub化し、電子書籍リーダーで読めるようにするソフトウェアです。 ラノベの隆盛や携帯小説など、ライトな小説がオンラインには溢れています。それらを紹介、掲載しているサイトとして小説家になろうがありますが、そのサイトにある小説を電子書籍リーダーで快適に読めるようにしてくれるツールがNarou.rbです。 インストールが完了しました。まず任意のディレクトリでnarou initを実行します。 次にセットアップです。AozoraEpub3のディレクトリを指定します。 完了です。さっそく使ってみます。 コマンドヘルプです。 デフォルトのデバイスを設定しました。 ダウンロードしています。 さらにコンバートです。 Narou.rbは小説家になろうから小説をダウンロードし、縦書きで読みやすいように校正、整形を行います。そしてePub3フォーマッ
何に使えるかな。シンプルなWebベースの年表ライブラリ·Chronoline.js MOONGIFT
Chronoline.jsは左右に展開するシンプルな年表ライブラリです。 万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。 日ごとの年表。左右への移動はスムーズです。 今日の日付部分が四角く囲まれています。 こちらは月ごと。メモリが大きくなっています。 Chronoline.jsは月、四半期、年といった単位で表示できるようになっています。プロットしたデータにはフローティングを使って情報を追加できます。イベントは日付とタイトルという形でハッシュを作り、それを配列としてJSONデータにするだけです。複雑な情報は表示できませんが、時間軸に沿って何が起きたのかといった表現に良さそうです。 Chronoline.js
PHPでもリアルタイムWeb。node.php·React MOONGIFT
node.jsの魅力はノンブロッキングシステムにあります。そんなnode.jsの魅力をPHPで実現するソフトウェアがReactです。 サンプルコードです。読み込むたびに数字が繰り上がります。 同時に二つのファイルをダウンロードするデモです。パラレルで処理されています。 サーバを実行しているところです。 読み込むと数値が繰り上がっていきます。 ReactではApacheなどを使うのではなく、独自のWebサーバを立ち上げて実行します。また、そのままPHPを使うというよりはReactのライブラリでラッピングしながら作っていく形になります。そのため専用の作法を覚える必要がありそうですが、使い慣れたPHPを使ってノンブロッキングシステムを実現できるというのは魅力的かも知れません。 ReactはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る node.
PDFをPDFのまま差分チェック·DiffPDF MOONGIFT
DiffPDFはPDFファイル同士のテキスト、描画の差分を表示するソフトウェアです。 プログラマーが開発中によく使うのがDiffです。行や単語単位で比較し、どこが違うか分かるので修正したり相違点をチェックしたりするのにとても便利です。そんなDiffをPDFでも使えるようにするのがDiffPDFです。 メイン画面です。 二つのファイルを指定して比較しました。異なるテキスト部分がハイライト表示されています。 こんな感じです。 線の表示の違いも取れます。 こうするとぐっと分かりやすくなります。 この手のソフトウェアとしてPDFをテキスト化して、それを比較するものはありましたが、PDFのまま比較してくれるという点においてDiffPDFは非常に便利です。なお日本語には対応しておらず、PDFとして表示した時点でも内容が抜け落ちてしまっています。 DiffPDFはWindows/Mac OSX/Linu
CSVやJSONデータを管理、ビジュアル化·Miso Dataset MOONGIFT
Miso Datasetはクライアントサイド、node.jsで利用できるデータ変換&管理ライブラリです。 データのビジュアル化（グラフ化）をする際に書かせないのが元データです。DBに入っていたり、XMLだったりと形式は色々考えられますが敢えてCSVを使ってグラフを描くのがMiso Datasetです。 デモです。CSVデータをグラフにプロットしています。 データはこのようなCSVです。 コード部です。デリミタを指定したり、フォーマットの指定もできます。 Miso DatasetはCSVやJSONを取り込んで自由に操作が出来ます。カラムの定義をしておくことで行をオブジェクトとして扱えるようになります。その他ソートしたりカウントやグルーピングしたりとSQL的な操作もできるようになっています。なおコードはnode.js/クライアントサイドのどちらでも動作します。 Miso DatasetはJav
ポータブル版で手軽に使えるPuTTY·portaPuTTY MOONGIFT
portaPuTTYはポータブル版のPuTTYです。設定をファイルに書き込みます。 Windows用のターミナルソフトウェアとして有名なPuTTY。そんなPuTTYをポータブルに持ち歩いてどこでも使えるようにしたのがportaPuTTYです。 ファイル構成です。 セッション情報がファイルとして保存されています。 portaPuTTYはPuTTYの設定やセッションデータに書き込み、レジストリを汚さないようになっています。USBメモリに入れたり、Dropboxなどで同期するようにしておくと便利そうです。 portaPuTTYはWindows用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ポータブルなソフトウェアの利点は、持ち歩ける他に同じ環境を構築するのがとても簡単であるというのが挙げられます。フォルダのままバックアップしておけば、PCを入れ替えた時
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
開発時に。送信内容が確認できるダミーのSMTPサーバ·smtp4dev MOONGIFT
smtp4devはWindowsローカル上に立てるダミーのSMTPサーバです。 システム開発においてメール送信を行う時はよくあります。SMTPサーバを立てたとして、間違って送信してしまうと大変な事態につながるかも知れません。そこで使ってみたいのがローカルで使えるダミーのSMTPサーバ、smtp4devです。 起動しました。まずはセキュリティ警告が出ます。 メイン画面です。この時点でポートは開いています。 オプションです。UIに関する設定です。 サーバ設定です。ポート番号はデフォルトで25です。 アップデートチェッカーもあります。 こんな感じで常駐します。 こんな感じでPHPからメールを送ってみます。 送信しました。すぐに反映されます。 さらに日本語件名のメールを送ってみました。文字化けせずに送信されています。 メーラーでメールの内容を確認できます。 さらに詳細を確認できます。 メッセージソ
面白い！位置情報データベースをクラウド提供·CartoDB MOONGIFT
CartoDBは位置情報データベースをクラウド提供するソフトウェアです。 地図を使ったWebアプリケーションは常に人気があります。そんな中、位置情報を格納できるDBをクラウドで提供するのがCartoDBです。 OSS阪の他、Webサービス版も提供されています。こちらはWebサービス版です。 まずサインアップします。 アカウントを作成します。サブドメインも決めます。 マッピングが終わってDNSに反映されるまでは少し時間がかかります。 ログインしました。これはダッシュボードです。 まずテーブルを作成します。 行を追加します。位置情報を入力します。 入力しました。 地図表示に切り替えると登録した位置にマーカーが立ちます。 マーカーに対応した情報も表示できます。 マーカーの色設定です。 SQL APIが用意されています。 マップ APIの説明です。 CartoDBはベースとしてPostGISを使っ
企業で便利。バグ予測システムのBugSpotsをSubversion対応·BugSpots-Svn MOONGIFT
BugSpots-SvnはBugSpotsをSubversion対応させたソフトウェアです。 個人プログラマーの中では普及しているGitですが、企業ではまだまだSubversionが主流でしょう。そこでバグ予測システムであるBugSpotsのアルゴリズムをSubversionに対応させたソフトウェア、BugSpots-Svnが登場しました。 インストールです。Gemを作成してインストールします。別途SubversionのRubyバインディングが必要です。 結果です。リポジトリに関する情報やHotspotsが一覧されます。 こちらもまた結果がカラーリングされていて見やすいです。 BugSpots-Svnを使えばバグがなくなるという訳ではありませんが、更新を続けているとバグが起こる可能性は高くなってきます。ということでSubversionをリポジトリとして開発している企業は使ってみることをお勧
未来の技術が目の前に。ついにオープンソース化·SixthSense MOONGIFT
SixthSenseは現実世界にデジタルデータを照射し、操作を行うARデバイスです。 SixthSenseという未来的デバイスが発表されたのは2009年のことでした。ARとは異なり、現実世界にプロジェクターを通してデジタルデータを配信し、そこに対するアクションを感知するシステムです。元々オープンソースにする予定でしたが、ついにその実態が出てきました。 現実とデジタルが見事に融合しています（公式サイトより）。 空中で構えるのが特徴的です（公式サイトより）。 カメラとプロジェクターそしてカラーマーカーが基本構成になっています（公式サイトより）。 紹介動画 TEDでの発表 SixthSenseはハードウェアとソフトウェアの二つが合わさって提供されるテクノロジーです。近い将来、設計図を元に汎用化されるかも知れませんね。 SixthSenseはGPL v3のオープンソース・ソフトウェアです。 MOO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
