Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょう そこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.jsを紹介します。 GPU.jsの使い方 GPU.jsを使った一例です。Canvasが4つに分かれており、それぞれが連携してアニメーションしています。 実際の動きです。60fpsでています。 グリッドやボールは増減できます。 GPU.jsを使わないCPUでの計算処理モードもあるのですが、動きがとても遅くなります。GPU様々と言ったところでしょう。Web上でスムーズなアニメーション処理を実現したい時にはぜひチェックしてください。 GPU.jsはJavaScript製のオープンソー

ソーシャルサービスやコミュニティサービスはいつ連絡がくるか分かりません。そのため、多くの人たちは常駐ソフトウェアを使って通知を受け取れるようにしています。しかし、多くのソフトウェアを立ち上げているととても邪魔になります。 そこで使ってみたいのがBirdDropです。Mac OSXのメニューバーに常駐するTwitterクライアントです。 BirdDropの使い方 ログインしていない場合。メニューバーのアイコンをクリックすると表示されます。 ログインしている場合。WebベースのTwitterのサイトを表示しているようです。 メンションも表示できます。 BirdDropは普段はメニューバー上にあるので、殆ど気にならないでしょう。ウィンドウが見ているとついつい気になってしまうので、BirdDropを使えば仕事に集中できるようになるかも知れませんね。 BirdDropはMac OSX用、BSD Li

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Mac OSXではVirtualBoxやVMWareなどを使ってDockerを使えるようになっています。開発する際などに便利なのですが、若干の問題点もありました。特にファイル共有周りの問題が大きかったように思います。 そこで使ってみたいのがdinghyです。Mac OSX上でのDocker利用を便利に、簡単にしてくれるソフトウェアです。 dinghyの使い方 dinghyのインストールはHomebrewを使って行います。 $ brew tap codekitchen/dinghy $ brew install dinghy $ brew install docker docker-machine そしてcreateサブコマンドを使ってVMを作ります。 $ dinghy create

iPhone6では3D Touchという機能が追加され、さらに新しいMacBookなどでもForce Touchと呼ばれる感圧タッチパッドが採用されています。これにより、単純なクリックに奥行きを持たせることができるようになっています。 そこで紹介したいのがPressure.jsです。Webブラウザ上でForce Touchや3D Touchを感知できるJavaScriptライブラリです。 Pressure.jsの使い方 実際に使っているところです。押し込むようにクリックすることで画像のぼかしが解除されます。 こちらもぐっと押し込んだ場合だけ出てくるツールチップです。 対応機種が限られるので実用的かと言われると難しいところですが、どれくらい深く押し込んでいるかが数値として取得できるのは面白いです。Pressure.jsの面白い使い方を考えてみてください。 Pressure.jsはHTML5/

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 収益になるとは思えないし、いつか終わると冷や冷やしていたYahoo Pipesですが、ついに終了のアナウンスが流れました。一度設定するとほぼそのままなので、作成してそのまま放置しているなんて人も多いのではないでしょうか。 そんなYahoo Pipesのデータを取り出して自前で使い続けたいという方も多いのではないでしょうか。そんな方に使ってみて欲しいのがpipes2jsです。 pipes2jsの使い方 pipes2jsはYahoo Pipesのデータをnodeのライブラリにしてくれるライブラリです。まだ開発中のようで、npmではインストールできませんでした。 $ git clone git@github.com:neyric/pipes2js.git $ cd pipes2js $

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はアイコンを画像で提供することが少なくなってきています。バイナリなのでサイズの可変に弱く、サイズも大きくなりがちです。そこで使われるのがWeb Fontなのですが、こちらもちょっとした内容なのにサイズが大きくなってしまいがちです。 そこで使ってみたいのがlittleboxです。スタイルシートだけで作られたシンプルなアイコン集です。 littleboxの使い方 littleboxは一つのクラスですべてを表現しているのではなく、例えばカメラの場合は .lb-camera で四角を描き、:beforeと:afterで他の部品を描いています。そのためアイコンの色を変える場合は、 .lb-*, .lb-*::before .lb-*::after { border-color: /*YO

Firefoxといえば元々IEに対するアンチテーゼな存在として登場し、表示の高速さやコミュニティベースのアドオンによって一気にシェアを広げました。その後、Google ChromeやSafariの登場によってシェアは伸び悩んでいますが、今なお重要なブラウザです。 そんなFirefoxから原点回帰とも言えるバージョンが登場しました。それが開発者向けFirefox、Firefox Developer Editionです。 Firefox Developer Editionの使い方 Firefox Developer Editionはまさに開発者（プログラマ、デザイナー）向けのブラウザになっています。普段使いもさることながら、Webアプリケーションを開発するときに使ってみてはいかがでしょう。 Firefox Developer EditionはWindows、Mac OSX、Linux用Mozi

q はCSV形式やTAB区切りのテキストファイルを入力として、コマンドラインでSQLに似たクエリを指定し実行することができます。また、標準入力を使った入力やパイプで接続して利用することができるソフトウェアです。 q の主な特徴 1) ZIP形式で圧縮したテキスト・ファイルも指定可能 コマンドラインオプション -z もしくは --gzipped を指定することで、ZIP形式ファイルを入力することができます。解凍せずにファイルを使用できるのは便利です。拡張子が .gz であれば、ZIP形式であると自動認識します。 -z, --gzipped Data is gzipped. Useful for reading from stdin. For files, .gz means automatic gunzipping 2) すべての文字エンコーディングをサポート 入力と出力の両方で、すべての文

Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。 Handsontableの使い方 Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。 HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Handsontable - jQuery gri

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザ向けに提供されるプログラミング言語はJavaScriptのみです（プラグインを使えばActionScript、.NETもありますが）。それが嫌で多数の代替言語が生み出されています。CoffeeScript/TypeScript/JSXなどが代表です。 さらに別な切り口として、すでにあるプログラミング言語で実装するというものもあります。今回はその一つ、Go言語をWebブラウザ上で動作させるGopherJSを紹介します。 GopherJSの使い方 GopherJSではGo言語で書いたコードをJavaScriptに変換します。様々なライブラリを読み込むので効率的かは分かりませんが、大型なWebアプリケーションになるほど、開発効率における優位点は出そうです。 変換効率が気にな

プロジェクトマネージャやリーダーがよく使うソフトウェアにVisioがあります。ネットワーク図、システム概要図などをまとめる際にはVisio Professional以上のステンシルが必要で、ちょっとした図を描くために購入するのを控えてしまう人も多いのではないでしょうか。 そんな方にお勧めしたいのがdraw.ioです。Visioライクに使えるWebアプリケーションになります。 draw.ioの使い方 最初に保存先を聞かれます。ローカルの他、DropboxやGoogle Driveへの保存が可能です。 テンプレートが多数用意されています。 組織図。 移動や削除はドラッグ&ドロップで。 様々なステンシルが用意されています。 画像出力の結果。左上のは筆者がドロップしたステンシルです。 他のテンプレートです。ビジネスプロセス。 チャート。 draw.ioはフローチャートなどをはじめとして、Visio

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5やRetinaディスプレイの登場があって、SVGに注目が集まっています。ベクターベースなので拡大しても綺麗なままで表現できます。しかしWebブラウザでも表示できますが、良いビューワーがなく再利用性が高くないのが現状です。 そこで使ってみたいのがsvgexportです。SVGファイルを画像やPDFにエクスポートできるソフトウェアです。 svgexportの使い方 インストールはnpmでできます。 $ npm install svgexport -g 使い方は次のようになります。 svgexport <input file/> <output file> <options> svgexport <datafile> <options> [<format>] [<quality

先日行われたHTML5 Japan Cupで個人的にひと際目を引いたのがjThreeです。WebGLコンテンツを作るというのはとても大変で、なかなか量が増えていかないのですが、jThreeを使えば一気に増えていく可能性があります。 jThreeの使い方 こちらはデモです。YouTubeのように見えますがWebGLで動的に作られています。 フルスクリーンで再生もできます。初音ミクなどはベクターなので拡大されても綺麗です。さらにマウスでズームイン/アウトや視点移動もできます。 ヘルプです。 Oculusにも対応しています。 jThreeはWebGLコンテンツをjQueryを使って作れますので、WebプログラマーがWebGLという新しい世界に飛び込むのにぴったりではないでしょうか。 jThreeはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 2014/12

最近では外部ライブラリを積極的に使って開発するのも珍しくなくなってきました。そのため、見慣れないオブジェクトがあった時にそれが内製なのか、外部ライブラリなのか分からないこともあります。 そんな時に使えるのがSourcegraphと言うソースコード解析サービスで、それをGoogle Chromeから扱えるようにする機能拡張もSourcegraphという名前でリリースされています。 Sourcegraphの使い方 適当なGitHubリポジトリを見てみます。 こんな感じにマウスオーバーすると関数名とその呼び出し方、返却値が出てきます。 オブジェクトやメソッドが対象になります。 解析が終わっていない場合はこんな感じに出るようです。 Sourcegraphは公開されているリポジトリのみ対象としているため、非公開のリポジトリに対しては使えません。ただ、オープンソースのライブラリであればSourcegr

最近のCMSはユーザ画面と管理画面を分けるのではなく、ユーザが見ている画面上で直接コンテンツを編集できるようにしています。その方が実際に反映された時にどのように表示されるのかが分かりやすく、管理画面にログインして修正したいコンテンツを探す必要もありません。 そんなCMSの機能を独自のWebシステムでも実装してみたいと思ったら使ってみて欲しいのがEtch.jsです。 Etch.jsの使い方 こちらが編集画面です。背景色が違う場所が編集できます。 文字をクリックするとツールバーが表示されます。 太字の装飾を消しました。 コンテンツによって使える機能を制限できます。 リストを追加しました。 Etch.jsには保存ボタンがあるので、それを押すとコンテンツをAjaxでサーバに飛ばせるようになっています。実際の保存処理などは作らないといけませんが、インライン編集機能を提供する上で使っていると便利ではな

Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。 そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたEpochを紹介します。 Epochの使い方 エリアグラフ。滑らかな曲線がいいですね。 棒グラフ。 複数のグラフを比較もできます。 線グラフ。滑らかに描けます。 こちらも複数描画できます。 円グラフ。 分布図。 ヒートマップ。リアルタイムにデータを描画していきます。 ゲージ。こういうのも面白いですね。 棒グラフの積み上げ版。 エリアの積み上げ。 折れ線グラフの比較。 Epochはデベロッパーフレンドリー、リアルタイムグラフ、Canvas/SVG両方への対応が特徴となっています

他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。 しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使えるようになります。 Octiconsの使い方 OcticonsはSVG、TrueTypeフォントで公開されています。そのためWebFontとしてプロジェクトに組み込めるようになっています。 16px/32pxの両方で表示できるようになっています。アイコンはユニコードとして設定されています。実際に使われているものなので、どういったアイコンがどういった意図で作られているのかも分かりやすいですね。 OcticonsはSIL Open Font Licenseのオープンソース・ソフ

ルビというのは東アジア（たぶん日本くらい？）の文化で、HTMLでもrubyタグとしてサポートされています。しかしブラウザによって表示が違ったり、そもそもルビが使えなかったりとむしろストレスになるかも知れません。 やはりルビ文化を理解できていない海外に任せるのではなく、日本で実装すべきなのかも知れません。そこで使ってみたいのがruby_enabler.jsです。 ruby_enabler.jsの使い方 古いFirefox/Operaでの素の表示とruby_enabler.jsを使った時の違いです。 Safari/Chromeでも書き方によっては表示が乱れるようです。しかしruby_enabler.jsを使えば改善します。 ruby_enabler.jsを使えばvalidなHTML構造は維持しつつ、綺麗なルビ表示が行えるようになります。誰がどんなブラウザを使っているか分からないので、公共系や海

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebデザインの面倒なところは同じような設定が散見されることではないでしょうか。上の方で幅の定義があるものの、実際のクラス定義はどの幅に対するものなのか分かりづらいことがあります。 そこで使ってみたいのがaltclassです。JavaScriptを使いますが、幅によってクラスを付け替えてくれる便利なライブラリです。 altclassの使い方 ブレークポイントは設定を使って自由に指定できます。 <div data-altclass="[less than 320] 320 [at least 320 & up to 479] 480 [at least 480]"> altclassは幅の変化を見てクラスの付け替えを行っています。スタイルシート側は widget-* とい

頻繁に使うアクセスキーなどの文字列をどこに保存していますか。パスワードなどはちゃんと暗号化された場所に保存しつつも、プログラムから使うようなキーは設定ファイルに直接書いたり、環境変数に平文で定義してしまったりしていないでしょうか。 システムで扱う文字というのは漏洩するとパスワード以上に被害を被る可能性があります。そのため保存に際してもっと慎重になるべきです。そこで使ってみたいのがenvchainです。 envchainの使い方 envchainは環境変数をキーチェーンアクセスに保存するMac OSX用のソフトウェアです。インストールはGitリポジトリをクローンしてmake && sudo make installで行います。 使い方としてはまずは環境変数の定義をします。 $ envchain --set aws AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY