Web上でデータを表示するライブラリは実に多彩に存在します。それだけニーズはありつつもこれで決まり！というものがないのかも知れません。そのため、多様に存在するライブラリをチェックし、比較検討する必要があります。 vis.jsもそんなデータビジュアル化ライブラリの一つです。ネットワーク図をはじめ、データ同士のつながりを表現するのに向いたライブラリのようです。 vis.jsの使い方 さっそくサンプルを見ていきましょう。 年表のサンプルです。ズームイン、ズームアウトに対応しています。 HTMLを記載できます。 ネットワーク同士の繋がりを表現したグラフです。 ソーシャル。友だち同士のつながりと、その強さをビジュアル化しています。 オブジェクトの用例付き。 Graphvizからサンプルを拝借しています。データはマウスで動かせます。 垂直型のレイアウト。 グルーピングしたデータビジュアル化。 HTML

おお、これを入れておくとかなり捗りそう！ 最近のブラウザは開発ツールが充実しており、JavaScriptやAjaxを使った処理がとても簡単に作ったりデバッグしたりできるようになっています。しかし物足りない…と感じている人も多いかもしれません。 consoleはWebブラウザからデフォルトで提供されている機能なのでそのまま使うのかと思っていたのですが、実際には拡張ができます。その一例として紹介したいのがLumberjackです。 実行例です。色々な表示が行われているのが分かるでしょうか。 例えばこんな感じに書きます。 console.stream('cat').info('I do not like you.'); console.stream('cat').warn('Hiss!'); console.stream('dog').info('The feeling is mutual.')

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連

OJはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Webサイトは自由度が高すぎるのが逆に難点に感じることがあります。そこで試してみたいのがOJです。JavaScriptでコンポーネントを定義し、HTMLを出力するテンプレートです。 例。ボタンやリストなどがオブジェクトとして定義できます。 Backbone.jsとの連携もサポート。 プラグインを使うことでYouTube埋め込みも簡単にできます。 AceEditorプラグインもあります。 GitHubボタンプラグイン。 OJではボタンなどを生成し、そのままclickなどのアクションを定義できるようになっています。よりWebアプリケーションとして開発がしやすいのではないでしょうか。もちろん出力されたHTMLはスタイルシートを使ってデザインできるようになっています。 MOONGIFTはこう見る 今後HTML

LiveDiagはMac OSX用のオープンソース・ソフトウェア（BSD License）です。 Markdownは普及したテキスト記法になっていますが、物足りないと感じることも多いのではないでしょうか。有志による拡張もされていますが、今回はMarkdownエディタにブロック図生成機能を追加したLiveDiagを紹介します。 メイン画面です。左側がエディタ部、右側がプレビューになります。実際にブロック図を表示するためにはblockdiagなどをインストールする必要があります。 ブロック図の例。波括弧でくくられた部分が変換されています。 シーケンス図。より複雑な描画もできます。 アクティビティ図。システムとユーザの関係性などを表現するのに最適です。 ネットワーク図。ブロックで表される簡単な図ですが、構成を表現するなら十分でしょう。 LiveDiagでは波括弧＋図の種類を指定することで各ソフト

StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています

FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。 Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。 デモです。左側にAndroid端末のモックが出ています。 シンプルなタイトルを表示した例。 メニューを追加した例。 メニューアイコンをタップするとメニューが表示されます。 タブ。 ボタン。 リスト。 複数行のリスト。 iScrollにも対応しています。 Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラ

NinjaKitはSafariやGoogle Chromeで使えるYet Another Greasemonkeyです。 Webサイトの表示や動作を自分好みに変更できるUserScript。そんなUserScriptをSafariなどでも使えるようにする機能拡張がNinjaKitです。 インストールします。SafariまたはGoogle Chrome版があります。 設定画面です。 UserScripts.orgでInstallボタンを押せばフローティングが表示されてそのままインストールできます。 スクリプトの編集機能もあります。 タブ幅を変えたりもできます。 ちゃんと動きます！ Google ChromeではデフォルトでUserScriptに対応していますが、Greasemonkeyとの互換性は完璧ではありません。もし動かないスクリプトがあればNinjaKitを使ってみるのも良さそうです。

fresherEditorはcontentEditableを使ったWYSIWYGエディタです。 オンラインでコンテンツを編集する際にはWYSIWYGエディタを使うことが多いように思います。色々なライブラリが存在しますが、今回はfresherEditorを紹介します。jQueryベースのエディタです。 デモです。テキストエリアの枠がないのが印象的です。 編集状態です。枠が出ています。 WYSIWYGなのでその場で反映されます。 画像の追加も行えます。 フォントの選択もできます。 fresherEditorではcontentEditableを使ってコンテンツを編集可能にしています。デザインについてはBootstrapを使っています。まさに見たままに編集できる、そんな感じのソフトウェアになっています。 fresherEditorはjQuery/JavaScript製のソフトウェア（ソースコードは

JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG

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

ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る

Portholeはiframe内のコンテンツと相互にメッセージを授受できるライブラリです。 最近はFacebookアプリやブログパーツのようにiframeを使って外部サイトのデータを表示するケースが増えています。そんな中、親ウィンドウと子フレームの中でデータを授受できるPortholeはきっと役に立つはずです。 親ウィンドウと子フレームは別ドメインになっています。 子フレームからのアクションで親ウィンドウにおけるiframeの高さが変わりました。 親ウィンドウの色を子フレームから変更しました。 別な色に変更。 別ドメインなのが分かります。 親ウィンドウから子フレームの色を変更しました。 Portholeでは親ウィンドウと子フレームとで相互にメッセージをやり取りできます。iframeは複数作成して、それぞれに別なメッセージを飛ばすことができます。子フレームでは受け取ったメッセージを処理分けし

tools-osxはMac OSX用の便利なコマンド群です。 Mac OSXはUnixベースなので多様なコマンドが用意されていますが、さらに小粒ながらも便利なコマンドを追加してくれるのがtools-osxです。 インストールします。 qlコマンドはQuickLookを立ち上げます。 trashコマンドはrmとは異なりファイルをゴミ箱に入れます。 tools-osxではclipcat（クリップボードの出力）、dict（辞書検索）、eject（ボリュームの取り出し）、ql（QuickLookでの表示）、swuser（ユーザスイッチ）、trash（ゴミ箱に移動）、with（アプリケーションで開く）が用意されています。どれも便利なコマンドになるでしょう。 tools-osxはMac OSX用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ターミナル上で入力

JuniorはBackbone.jsやRatchetを使って スマートフォン向けにコンテンツを提供する方法は主に二つあります。一つはネイティブアプリ、もう一つはWebアプリです。Juniorはネイティブ並みのWebアプリを開発するためのフレームワークを提供します。 右側にあるのがデモアプリです。横スクロール可能なスライドはflickable.jsを使っています。 こんな感じで写真が切り替わります。 ネイティブ風のUIはRatchetを使っています。 Pushstate APIを使っているのでBackボタンなどがちゃんと動きます。 Juniorはその他、ビューやルーティングについてBackbone.jsを使うなど単体で特別な機能を提供するのではなく優れたライブラリを上手に組み合わせて提供しています。しかしこれらのライブラリを組み合わせることで手早くスマートフォン向けのWebアプリが開発できる

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

SlickGridはWebベースで動作する多機能なグリッド、表計算ライブラリです。 Webベースで業務系システムを作っていると必ず要望に挙がるのがリッチな表計算（グリッド）表示ライブラリです。 こちらは通常の表示。縦横スクロール対応。 表示形式も色々指定できます。 スライダーでの入力。 カレンダー。 チェックボックス。 長い場合はフローティング。 縦スクロールをなくすこともできます。 Ajaxでデータの取得も可能です。 途中の集計も可能。 行を選択式にすることもできます。 入力方式の設定や、行を選択してといった機能はExcelにもないので便利ではないでしょうか。また、プラグインによってExcelとコピー&ペーストでデータの授受もできるようになっています。 SlickGridはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グリ

JS QRcodeはWebカムや画像にあるQRコードを読み取るJavaScriptライブラリです。 携帯電話にカメラが搭載されて一気に普及したのがQRコードです。そこで数多あるQRコードをWebブラウザでも活用できるようにしてくれるJS QRcodeを使ってみましょう。 トップページです。 QRコードの画像を指定しました。瞬時に読み込まれてその結果が下に表示されています。 JS QRcodeはWebカムからの入力またはファイルのアップロード（実際にはアップロードされません）を使って画像を読み込み、QRコードの内容を出力します。出力系は数あれど、読み取り系は多くないので諜報しそうです。 JS QRcodeはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る 個人的にスマートフォンになってからQRコードを良く使います。デ

jqはターミナル上で使えるJSONパーサーです。 JavaScriptの台頭に伴ってJSONを共通のファイルフォーマットに使うことが増えてきました。システムから取得したJSONファイルの内容を調べる時に使いたいコマンドがjqです。 元のJSONです。 resultsの1つ目だけを出力。 2つ目だけ。 一つ目、さらに項目を指定して出力。 全ての結果、ただし項目を指定して出力。 さらに情報を追加して出力もできます。 jqはMac OSXやLinux向けのコマンドであり、標準出力されたJSONファイルを読み込み、加工した上で出力できます。かつインデントを含めて成形してくれるのでデータの見やすさが格段にあがるはずです。プログラミング言語のライブラリから扱うよりも手軽ではないでしょうか。 jqはC製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web AP

XLSX.jsはJavaScriptでExcelファイル（Base64エンコード）を読み込んだり、ダウンロードさせられるソフトウェアです。 Googleスプレッドシートをはじめ、Webブラウザ上で表計算表示を行ったり、編集したりするWebアプリケーションがあります。しかし最も有力なのはExcelでしょう。そこで試したいのがExcelファイルを読み書きできるJavaScriptライブラリ、XLSX.jsです。 ダウンロードされたファイルです。ちゃんとXLSXとして認識されます。 ファイルを読み込む処理のデモです。Base64エンコードされたデータが解析されています。 XLSX.jsはbase64のXLSXファイルを読み込み、JavaScriptオブジェクトに変換できます。後はいかようにも表示できるでしょう。また、シート名と各セルの値をHTMLテーブルから読み込んでXLSXファイルに変換してダ