MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dropboxは各OS向けにクライアントソフトウェアを提供しています。常時Dropboxを使っているならば便利ですが、時々しか使わなかったり、ストレージ容量を使うために躊躇している方もいるでしょう。 そこで使ってみたいのがdbxfsです。FUSEを使ってDropboxをファイルシステム化します。 dbxfsの使い方 利用する際にはDropboxのOAuth認証が必要です。 任意のフォルダにDropboxをマウントします。ファイル操作は普通に行えます。 dbxfsはDropboxを仮想的にマウントしていますので、使っていないファイルは読み込まれていません。大きなサイズのファイルを開こうとすれば時間がかかりますが、小さなファイルであれば気にならないでしょう。Dropboxは最初の同期に

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

現代人は時間が足りない生活を送っています。そのため2時間の映画を悠長に観ていられないかも知れませんし、スポーツなどもずっと鑑賞している暇はなさそうです。そこで必要になるのがサマライズです。 観るべきポイントを押さえてさえいれば良いわけです。Videodigestはそんな動画のダイジェスト版を生成するソフトウェアです。 Videodigestの使い方 Videodigestは動画とその字幕テキストを使って処理を行います。 $ videodigest -i Phonebloks-oDAw7vW7H0c.mp4 -s Phonebloks\ \[Japanese\].srt [MoviePy] >>>> Building video Phonebloks-oDAw7vW7H0c_summarized.mp4 [MoviePy] Writing audio in temp.m4a [MoviePy

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

Webサービスを構築する際にAmazon S3は欠かせない存在になっています。データを無制限に置いておけるサーバはそうそうなく、Amazon S3を使うことで容量制限を気にすることなくどんどんファイルを保存しておけます。 そんなAmazon S3と互換性あるクラウドストレージがnode.js blob service gatewayです。VMWareが開発しているソフトウェアになります。 node.js blob service gatewayの使い方 node.js blob service gatewayを立ち上げるのはserver.jsを実行するだけです。 $ cp config.json.default config.json $ node server.js WebのUIがある訳ではないので、curlなどのコマンドから操作します。まずサーバを叩いてみます。 $ curl http

開発にVagrantを使うのが当たり前になってきており、筆者のPCにも多くのプロジェクトのVagrantfileが存在するようになっています。そうなると各Vagrantの環境を管理するのも大変になります。 そこで使ってみたいのがVagrantBarです。Mac OSXのメニューバーにVagrant管理下のバーチャルマシンを表示してくれるユーティリティです。 VagrantBarの使い方 VagrantBarがあればメニューバーからVagrant環境を立ち上げたり停止させられます。その後SSH接続する際にもVagrantBarから実行できます。ターミナル操作になれていないデザイナーの方などにもお勧めの仕組みです。 VagrantBarはMac OSX用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 BipSync/VagrantBar

今回のテーマは類似画像検索です。スマートフォンが流行るのにつれて、写真コンテンツは爆発的に増えています。テキストよりも画像の方が役立つケースも多く、写真コンテンツは今後も増え続けるでしょう。 そこで求められるのは従来のテキスト検索ではない情報提供方法です。その一つ、画像を検索するための技術である類似画像検索を取り上げてみたいと思います。 VisualSeeker - Yahoo!ラボ Yahoo! Japanの実験的プロダクトのサービスです。空間に漂っている画像をクリックし、その類似画像を検索します。ドリルダウンしながら辿っていくので、新しい画像に出会えるかも知れません。精度としては全く同じ画像を並べるのではなく、そこから連想される似たような画像を出すと言った仕組みになっているようです。 TinEye Reverse Image Search 画像またはURLを指定して類似画像を検索できま

管理画面であれば社内の人くらいしか使いませんので、あまりデザインにこだわる必要がないのでベタなBootstrapを使ってもそんなに嫌がられることはないでしょう。とは言えちょっとは格好よく見せたい場合もありますよね。 そんな時に使ってみたいBootstrapテーマがHierapolisです。フラットなデザインで格好いい管理画面用テーマとなっています。 Hierapolisの使い方 Hierapolisはサイドバーがついていて、一覧性がある管理画面が作れます。デザインはフラットだけにシンプルで、各機能に素早くアクセスできるのが特徴です。使い勝手が良いのではないでしょうか。 HierapolisはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Sign in lab2023/hierapolis

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザで何でもできるといった時代になっていますが、それでもターミナルは必要です。開発者がコマンドを打ったり、サーバ管理でシステム操作をしたりするのにWebブラウザではとても作業していられないでしょう。 しかしそんな壁を乗り越えてしまうソフトウェアがButterflyです。何とWebブラウザベースで動作するターミナルアプリケーションです。 Butterflyのインストール ButterflyはPython製で、pipでインストールできます。 $ pip install butterfly インストールが終わったらサーバを立ち上げます。 $ butterfly.server.py これで準備完了です。 Butterflyの使い方 **http://localhost:57575

MEANはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 PHPでWebサービスを立ち上げる場合にはLAMP構成が有名です。他にもWAMPやMAMP、LNMP、LEMPなんて組み合わせもあるそうです。今回紹介するのはMEAN、MongoDB+Express+AngularJS+Node.jsという組み合わせのシステム開発です。 インストール中。ベースになるシステムがGitHub上に公開されています。 起動しました。簡単なテンプレート（Bootstrapベース）も内包されています。 サインナップ。設定すればOAuthも利用できます。 ログインしました。 記事を作成します。 作成しました。編集もできます。 システム構成はこのようになっています。 MEANではテンプレートエンジンにJadeが使われています。O/Rマッパーもありますし、MVCに分かれ

これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebRTCが手軽に使えるようになります！ WebRTCを使うことでサーバを介さずP2Pでデータの送受信ができるようになります。とは言えその実装については知識が必要で、クライアント同士のID（ピアID）をつなぎ込むための仕組みも必要です。 そうした面倒な部分をまるっと実装しているのがPeerServerです。HTML5の新しい楽しみを知る上でも興味深いソフトウェアと言えるでしょう。 まず使い方としてPeer.jsを読み込みます。 <script src="http://cdn.peerjs.com/0.3/peer.js"></script> 後はAPIを作成（オープンソース版は不要かも？）して、それを読み込みます。 var peer = new Peer('pick-an-id'

igloはGo製のオープンソース・ソフトウェア（MIT License）です。 モバイルアプリやWebアプリケーションなどWeb APIの利用は多くなっています。そこで必要になるのが可読性の高いAPIドキュメントです。これから作成しようと思われている方にはigloをお勧めします。 元々はMarkdown風なドキュメントで、このようなHTMLファイルが生成されます。 レスポンスはクリックすると表示されます。 igloはAPI Blueprintの記法に沿っています。Markdownに似たフォーマットで、テキストファイルとしての可読性も高く、HTMLへ変換した後はさらに表示の制御がされていて必要な部分が追いかけやすくなっています。 どのようなプログラミング言語であってもAPIリファレンスは付き物です。大きなフレームワークや小さなクラスであってもそれは変わらないでしょう。APIドキュメントがない

JavaScript VNCはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近は何でもJavaScriptでやってしまおうという試みが多数立ち上がっています。今回はなんとVNCクライアントをJavaScriptで作ってしまおうという野心的な試みをJavaScript VNCが行っています。 接続前の画面。RealVNCがサーバに使えます。 接続しました。レスポンスはあまり良くありませんのでご注意を。 JavaScript VNCの面白いところは僅か200行で出来ていることでしょう。node向けに既に提供されているWebSocketsなどのライブラリを使って、VNCと通信する部分をサーバが、その結果をWebブラウザでレンダリングする方式をとっています。解説記事も充実していて、これだけで出来てしまうのかと圧巻の作りになっています。 MOONG

OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ

oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド

CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗

easyABはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 ボタンの色が赤であるべきか、青であるべきか、キャッチコピーはどちらの方が良いか。そんなことは正直試してみないと分かりません。そこで必要なのがA/Bテストで、easyABを使えばGoogleアナリティクスを使って容易に測定できます。 使い方です。スロットと呼ばれるのがテスト設定になります。A/Bの2パターンに限らず多数の値で試す事ができます。 テストコードです。valueがGoogleアナリティクスで取得できる値になります。 easyABを使えばGoogleアナリティクスへ渡すデータと、そのデザイン上の変更ポイントを簡単に管理できるようになります。JavaScriptでの指定なので画像を変えてみたり、ラベルを変えたりと様々な項目を変更した結果をテストできるでしょう。 MOONGIF

Node GHはnode.js/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 オープンソースをよく使うプログラマーであればGitHubを便利に使っているのではないでしょうか。そんな方にお勧めしたいのがNode GHです。GitHubのAPIを使ってより便利なコマンドを提供してくれるソフトウェアです。 インストールします。npmを使ってできるので簡単です。 最初に認証が求められます。IDとパスワードを入力します。 GitHubのリポジトリに移動して操作します。isコマンドは課題をリストアップする機能です。 isの後に文字をつけることで新しい課題を登録できます。 そして課題を一覧で確認します。この時の番号がコメントの時に使います。 さらにその課題番号に対して--commentを付ければコメントもできます。 ntでアクティビティを取れます。 その他、Node

webrubyはWebブラウザ上で動作するmrubyです。 mrubyは組み込み用として開発されたミニマムなRuby実行環境ですが、ミニマム故に使いどころが色々とありそうです。今回はなんとWebブラウザ上で動作するmruby、webrubyを紹介します。 WebGLを使うデモ。 結構ぐりぐりと動きます。 FPSも53とあって滑らかです。 こちらはirbです。コードを書いてその場で実行して結果を得られます。 確かにちゃんと記述できます。 普通にmrubyです。 以前に紹介したJsMrubyの場合は機能拡張としてインストールされるものでしたが、webrubyの場合はemscriptenを使ってmrubyのソースコードをJavaScriptに変換しているのが特徴です。まだまだおもちゃレベルとのことですが、今後発展すると面白いプロジェクトになりそうです。 webrubyはJavaScript製のオ