世の中の流れとしてJSONが多く使われるようになっています。基本的にシステム同士でデータを授受されるものではあるのですが、開発者はその内容を見たり、編集したいと思うこともあります。 手作業でJSONが作れるようになれば、ちょっとしたモックを渡したり外部のサーバにデータ提供しやすくなります。そこで使ってみたいのがJSONMate、JSONエディタです。 JSONMateの使い方 適当なJSONがこのようにツリー表示されます。 Arrayやオブジェクトによって表示が変わります。 データの追加も行えます。そうすると元データにも反映されます。 オブジェクトのツリーも分かりやすいです。 こんな感じのビジュアル化も用意されています。 JSONMateを使えばJSONデータを見た目分かりやすく、容易に編集できます。ちょっとしたJSONを作る場合に便利そうです。手作業でも作れると思って取りかかると意外と構

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 企業や個人のプログラマでQiitaを使っている人が増えてきています。ブログとして使うのはもちろん、ストックを使ってナレッジの蓄積に使うこともできます。社内ブログとして使いたいという人も多いでしょう。 そんなQiitaと似たクローン的なサービスとしてLodgeを紹介します。限られたグループ内で使うと便利そうですよ。 Lodgeの使い方 コメントや通知機能などグループや部署でブログを行うのにぴったりな機能がたくさん備わっています。外部に公開できる内容はQiitaで良いと思いますが、そうではない社外秘含めた日報などはLodgeで構築してみるのはいかがでしょう。 LodgeはRuby/Ruby on Rails製、MIT Licenseのオープンソース・ソフトウェアです。 Lodge m-

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JSONがWeb APIのデータ送受信フォーマットとして活用されるようになると、受け取る側と発信する側でその内容が適切であるかどうか検証する手段が必要になります。それがJSON Schemaです。 2009年頃に登場したようですが、当時は面倒がってあまり使われてきませんでしたが、JSONの普及ともとに注目が集まっています。そんなJSON Schemaを開発者にも優しいフォーマットに変換してくれるのがJdocです。 Jdocの使い方 JdocはRubygemsからインストールできます。 $ gem install jdoc 使い方としてはjdocコマンドにスキーマのパスを渡すだけです。 $ jdoc spec/fixtures/schema.yml # Example API * [

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マインドマップはツリー型の表示を行います。あるポイントが開始ポイントになって、そこから派生する形で子ノードがつながります。それを繰り返して全体のツリーが大きくなっていきます。 あんな感じのインターフェースを作ってみたいと思ったらお勧めしたいのがTreedです。リストとツリー表示を同時に行うライブラリです。 Treedの使い方 ノードの移動は矢印キーまたはhjklキー、インデントはタブキーと鳴っています。さらにiキーで編集モードになったり、EscキーでノーマルモードになったりとVimを踏襲したキーバインドになっています。 自作のマインドマップのベースにしたり、アウトラインエディタに組み込んだりすると面白そうです。 TreedはJavaScript製のソフトウェア（ソースコードは公開さ

これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです（断定）。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方 こんにちは、Excel方眼紙！ うん、まさにExcel方眼紙です。 表はまさにお手の物。 セル3つ分、といった指定も簡単にできます（data-widthで指定）。 従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。 こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja

世の中で最も食されているものが最も美味しいと定義するならば、マックのハンバーガーとコーラは世界で最も美味しいということになるというのは有名です。そんな原理でいくとExcelは世界最高のツールになるのかも知れません。 つまり他の言語でもExcelの関数を実装すれば、誰でもプログラミングができてしまう…そんな世の中になるのかも知れませんね！ということで第一弾としてJavaScriptでExcelの関数を実装したFormulaJSを紹介します。 FormulaJSの使い方 例えば配列系の関数。 テキスト系。 演算系。 例えばASINのような関数はこのようにラッピングで実現しています。 Formula.ASIN = function (number) { return Math.asin(number); }; 全ての関数を実装し直しという訳ではなく、ラッピングで実装しているものも数多くあります。

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

画像をスライドで切り替えていくカルーセル機能は数多くのWebサイトで実装されています。サイトの機能を紹介するのに使ったり、ギャラリーとして画像を切り替えるのにも使えます。アイディア次第で使いところが多い機能です。 便利さゆえに多数のライブラリが出てきていますが、もうこれで十分ではないかと思わせるのがslickです。多彩な機能を揃え、オプションも豊富なカルーセルライブラリです。 slickの使い方 まずはサンプルと一緒に。これが一番ベーシックな使い方です。 $("target").slick() で実現されます。 レスポンシブにも対応しています。 フリック操作で切り替えも可能です。 複数のスライドを同時に見せることもできます。 画像読み込みを遅延させることもできます。 左右からの表示だけでなくフェードインなどのアニメーションもできます。 スライドを追加したり削除するのも自由です。 スライドを

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Amazon Web Services（以下AWS）を使っている企業はとても多いです。元々Web APIだけしか提供していなかったAWSも管理画面を提供するようになって使いやすくなりましたが、それでも数十台、数百台のサーバを管理しようと思ったらまだまだ使い勝手は悪いかも知れません。 少なくとも数千台以上、EC2のインスタンスが動いていているNetflixでは管理画面が使い勝手悪いようで、独自の管理画面を構築しています。それがAsgardです。 Asgardの使い方 スタンドアローンなバイナリが配布されていますので起動は簡単です。起動し終わったら、http://localhost:8080/ にアクセスします。 AsgardはAWSの各種サービスに接続して操作ができます。クラスタリン

Windows 8のアプリはHTML5/JavaScript/CSS3といったWeb技術で開発できます。そこでマイクロソフトでは元々、UIをWindows 8風にしてコンポーネントを組み合わせる形で開発を進められるライブラリ、Windows Library for JavaScript（以下WinJS）を提供していました。 そしてWinJSがオープンソースとして公開されることになりました。Windows 8だけでなく、多彩なコンポーネントを用いたWebアプリケーションが開発できるようになるでしょう。 WinJSの使い方 主なコンポーネントを見ていきます。 WinJSでは特にアニメーションに注力して実装されているように見えます。アプリはこれまでのソフトウェアと異なり、流れるような操作性が重視されます。さらに多彩なコンポーネントを用意することで全体のバランスが維持されるようになっています。 G

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 筆者の環境では試せていないのですが面白そうなのでご紹介。 NoSQLも一定の認知度をもつようになってきました。特に有名なものとしてはMongoDBが知られています。JavaScriptが書けるのが便利で、MongoDB内でMapReduceを使ったりすることができます。 そんなMongoDBに強力なライバルが出現するかもしれません、というのがEnosqlになります。何とベースになるエンジンにV8を使った埋め込み型NoSQLエンジンです。 Enosqlの使い方 例えばこんな感じのコードになるようです。 public class Tasks { public string _id { get; set; } public string task { get; set; } public

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルや社内では問題なく動作するのに、外部やネットワークが細い環境下ではエラーになってしまうといったケースは良くあります。光ファイバなどが当たり前な現在、高速なネットワークではない環境を再現するのは難しくなっています。 単純にネットワーク速度を遅くするソフトウェアもありますが、clumsyは任意のパケットを廃棄したりしてネットワーク状態の良くない場合を再現するのに最適なソフトウェアです。 clumsyの使い方 設定は幾つかあります。遅延を再現するラグ、任意のパケットを廃棄するドロップ、ブロックトラフィックを単一のバッジとして送信するスロットル、パケットをクローンして送信、パケットの順序変更、パケットの内容を変更など様々な処理が行えます。 ネットワークがごくごく当たり前に全く問題な

最近はカレンダーというとWebアプリケーションで提供するケースが多いように思いますが、今回はGUIアプリケーションを紹介します。しかもJava製とあって、Windows/Mac OSX/Linuxとマルチプラットフォームで動作します。 Raplaは単独のクライアントアプリとしての動作も、サーバモードとして立ち上げて他のRaplaから接続することもできます。カレンダーサーバとして社内で共有するのも良さそうです。 Raplaの使い方 メイン画面です。左側に種別、右側がカレンダー表示になっています。 マウスのドラッグで時間の幅が指定できます。 イベントを作成します。 Java製だからでしょうか…ちょっと表示が残念な感じです。 エクスポートはCSVまたはiCalでできます。 設定画面です。 デイビュー。一日だけのスケジュールが確認できます。 アポイントメント。予定だけをリストアップします。 マンス

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dropboxの手軽さは修正したら自動で同期されるという点にあると思います。この変更したら自動という点が重要で、作業が終わったら手作業でアップロード…なんて手間をかけているから作業を忘れてしまったり面倒に感じるのです。 ということで今回はAuto SFTPを紹介します。ファイルを追加、修正したら自動でSFTPを使ってアップロードしてくれる、そんなユーティリティです。 Auto SFTPの使い方 ヘルプは次のようになっています。 $ ruby sftp.rb -h -f: sftp.yamlに書かれているファイルを呼び出してSSHで接続します。 example: $ ruby sftp.rb servername servernameはyamlに記載されている上位のキーになります。

今までの書き方からどう変わるのか見てみましょう。 HTML/JavaScriptそしてスタイルシートはここ数年で代替記法がたくさん登場しています。個人的にはHamlやJadeはきついなぁと思ってしまうのですが、CoffeeScriptのようにコーディングがとても楽になる言語もあります。 スタイルシートにおいてはSassおよびScssが有名ではないかと思います。始めてみたいなと思う方はまずは自分の書いたCSSをSass/Scssにするとどういう記述になるのか確認してみるのが良いでしょう。それがcss2sassです。 css2sassの使い方 css2sassではデモのWebサイトが用意されています。 CSSをScssに変換しました。ミニファイされていた内容が綺麗になるのも良いですね。 こちらはSass。括弧がなくなるので読みやすくなりますね。 スタイルシート全体の内容を変換するのはもちろん、

おお、これは格好いいぞ！ サーバのステータスを知りたかったら打つコマンドがtopです。リアルタイムに刻々と変わるサーバのステータスを“テキストベース”で確認できます。しかし時代はどんどんグラフィカルになっている中、未だにtopで良いのでしょうか。 そんな疑問を解決してくれるソフトウェアがScout Realtimeです。サーバのステータスをリアルタイムに、かつグラフィカルに表示してくれる新世代のtopコマンドです。 Scout Realtimeのスクリーンショット 表示例。CPU、メモリ、ディスク、ネットワークがグラフになり、さらにプロセスの一覧でもグラフが出ています。 Mac OSXでは/proc系の出力がないのでグラフが完全には出ません。 Scout Realtimeのインストール インストールはRubygemsで行います。 $ gem install scout_realtime 起

これだけ色々出てくるとどれを使おうか迷ってしまいますね！ UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。 UIkitのスクリーンショット 今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。 トップページ風デザイン。 画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。 ポートフォリオ風。 マウスオーバーで拡大するための虫眼鏡表示。 モーダルもあります。 ブログ風。 ドキュメント表示。 コンタクトやチームメンバーの表示。このレイアウトいいですね！ フォーム付き。もちろんメンバ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。 HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れた部分を補正してくれるのがFluidityになります。しかもたった115 bytesで。 Fluidityのスクリーンショット Fluidityの使い方 使い方は簡単でスタイルシートを読み込めば良いだけです。 <link rel="stylesheet" href="css/fluidity.min.css"> 115 bytesな訳で特別なことはしていないのですが

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 自由に組み込めるのは良さそうですね！ WebベースのWYSIWYGエディタと言えばCKEditorやTinyMCEなどが思いつきますが、大型なものは組み込みは手軽でもカスタマイズが難しかったり、サイトの色に合わせて見た目を変更するのも困難だったりします。 かといってシンプルなものだと機能が足りないなどと、どっちつかずになってしまいます。そこで紹介したいのがScribe、カスタマイズ前提で作られているWYSIWYGエディタです。 Scribeのデモ デモがあるので試してみましょう。 Scribeの使い方 実装としては次のようになります。jQueryは使っていないようです。 require(['scribe'], function (Scribe) { var scribeElemen