JavaScriptを読み込むだけでリアルタイムコラボレーション·TogetherJS MOONGIFT
TogetherJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 Webアプリケーションをリアルタイムコラボレーション化しようと思うとサーバサイドの様々な仕組みを開発しないといけません。そこで頓挫してしまう人も多いでしょう。しかしTogetherJSを使えばチャット及びコラボレーション機能があっという間に手に入ります。 Todoアプリの例。右側に出ている部分がTogetherJSです。 マウスボタンにユーザ名が出ています。 チャットもできます。 複数人の表示に対応しています。 TogetherJSではテキストチャットの他、動画や音声チャットも提供しています。さらに同じドメイン中における別なURL閲覧を確認したり、コンテンツの変更をリアルタイム同期もできます。何よりTogetherJSを読み込むだけで実現できるという手軽さが良いで
Webサイト開発にパワーを与えるデザインテンプレート·Semantic MOONGIFT
SemanticはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapはとても人気がありますが、より実践的に使われるであろうUIコンポーネントを多数提供してくれるデザインフレームワークがSemanticです。 ID、パスワード入力フォーム。 チェックボックス。 ローティング。これは良くある処理だけに便利ですね。 入力エラーも項目毎の表示がサポートされています。 ボタン。 押せる/押している/押せないといった各ステータスごとの表示ができます。 Bootstrap並に様々なカラー設定が用意されています。 こんなフィード表示も。 日付を表示したり、下に追加の画像を表示したり。 コメント。カード型で格好いいです。 多段のコメント。 アイテム。こういう表示も良くありますよね。 さらに複数並べた形。左右はつながっています。 最近多い背景を
70を越えるOAuthプロバイダに対応した認証デーモン·OAuth daemon MOONGIFT
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
Canvas+JavaScriptを使って画像解析·Resemble.js MOONGIFT
Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。 Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble.jsを紹介します。 一例。写真のRGB解析と明るさを解析しています。 二つの画像を比較しています。 色を排除した比較。 サンプル。これで間違い探しが快適になりますね。 Resemble.jsではresembleという関数を提供します。これにファイルデータを渡すと、RGBと明度の値が返ってきます。さらに二つ目の画像を渡すと差分のパーセントやその差分となる画像データが返却されます。そのまま使うのはもちろん、画像解析の手法として参考になる部分も多そうです。 Resemble.j
まさにWebサイトを見たままに編集できるWYSIWYGエディタ·fresherEditor MOONGIFT
fresherEditorはcontentEditableを使ったWYSIWYGエディタです。 オンラインでコンテンツを編集する際にはWYSIWYGエディタを使うことが多いように思います。色々なライブラリが存在しますが、今回はfresherEditorを紹介します。jQueryベースのエディタです。 デモです。テキストエリアの枠がないのが印象的です。 編集状態です。枠が出ています。 WYSIWYGなのでその場で反映されます。 画像の追加も行えます。 フォントの選択もできます。 fresherEditorではcontentEditableを使ってコンテンツを編集可能にしています。デザインについてはBootstrapを使っています。まさに見たままに編集できる、そんな感じのソフトウェアになっています。 fresherEditorはjQuery/JavaScript製のソフトウェア（ソースコードは
JSONを使った開発のお供にどうぞ·jq MOONGIFT
jqはターミナル上で使えるJSONパーサーです。 JavaScriptの台頭に伴ってJSONを共通のファイルフォーマットに使うことが増えてきました。システムから取得したJSONファイルの内容を調べる時に使いたいコマンドがjqです。 元のJSONです。 resultsの1つ目だけを出力。 2つ目だけ。 一つ目、さらに項目を指定して出力。 全ての結果、ただし項目を指定して出力。 さらに情報を追加して出力もできます。 jqはMac OSXやLinux向けのコマンドであり、標準出力されたJSONファイルを読み込み、加工した上で出力できます。かつインデントを含めて成形してくれるのでデータの見やすさが格段にあがるはずです。プログラミング言語のライブラリから扱うよりも手軽ではないでしょうか。 jqはC製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web AP
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
Gitリポジトリに蓄積された歴史を可視化、グラフ化する·GitStats MOONGIFT
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
Gitを使っているWebデザイナー必見。DreamweaverからGitを使える·GITWeaver MOONGIFT
GITWeaverはDreamweaverとTortoiseGitを連携させるDreamweaver機能拡張。Gitコマンドが使えるようになる。 GITWeaverはWindows/Dreamweaver用のオープンソース・ソフトウェア。企業ではまだまだSubversionがメインのリポジトリ管理システムになっているようだが、個人を中心にGitを使うケースが増えている。プログラマーが使っているケースが多いが、デザイナーの方も使い始めている。 メニュー そんなGitとWindowsを組み合わせて使う際にはTortoiseGitが便利だが、さらにDreamweaverを使ってデザインをしているならお勧めなのがGITWeaverだ。 GITWeaverはTortoiseGit必須のDreamweaver拡張なのでWindows版向けのソフトウェアになる（筆者はMac OSX版しかないためスクリー
これは便利！Mac OSX/Linuxで動くIE7〜9のVirtualBox用仮想イメージを作成·ievms MOONGIFT
ievmsはMicrosoftが提供するIE動作検証用Virutal PC向け仮想イメージをVirutalBox向けに変換するソフトウェアです。 IEで見たWebサイトの確認をしたいと思ったらWindows機が必要です。さらにIE7/8/9と各バージョンを用意しなければなりません。そんなのは面倒だ！というMac OSX/Linuxユーザの方は今すぐievmsを実行しましょう。ievmsはIE7〜9のVirtualBox用の仮想イメージを作成してくれるソフトウェアです。 インストール中です。数GB以上あるものばかりでかなりの時間を要します。 とりあえずIE7とIE8の仮想イメージができあがりました。VirtualBoxで確認できます。早速起動してみます。 Windows7が使われています。なお最初の起動時にライセンスが切れていましたがオンライン認証で通りました。 アクティベート後、再起動すれ
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
エラーやインフォメッセージの通知に使いたい。jQuery製通知ライブラリ·Notifier.js MOONGIFT
Notifier.jsはGrowl風通知を行うjQueryプラグインです。 Mac OSXではGrowlという有名な通知ソフトウェアがあります。バックグラウンドでの処理結果や、何か問題があった際に通知が出るのは慣れると手放せません。そんなGrowlに似た通知をjQueryで実現するのがNotifier.jsです。 リンクをクリックすると通知が右上に表示されます。この通知は一定時間が経つと消えます。 複数を同時に表示させることもできます。アイコン、タイトル、内容がカスタマイズできます。 いくつも出せます。 表示するコード。success、info、warning、errorを指定できます。 Notifier.jsを使えば見た目のデザインを変えずにエラーメッセージやお知らせを通知できるようになります。 Notifier.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公
データベースの差分表示·DiffKit MOONGIFT
DiffKitはデータベース/CSVファイル間の差分を抽出する。 [/s2If] DiffKitはJava製のオープンソース・ソフトウェア。適切なデータベース管理を行っていない状態で運用を続けていると、いつの間にか開発環境と実行環境で構造の不一致がおこる。カラムの順番が違う程度ならいいが、なぜあるのか分からないカラムが出てきたりすると厄介だ。 データベースの構造不一致は様々な問題を引き起こす可能性がある。早めの対処が必要だ。そのためにはまず現状分析を行う必要があるだろう。手作業で行う必要はない、DiffKitを使えば容易に知ることができる。 DiffKitは二つのデータベース間における構造不一致を表示するためのツールだ。Diffツールのデータベース版ともいえる。特徴としてJDBCによるデータベース接続をサポートする他、CSVファイルにも対応していることが挙げられる。片方がCSV、片方がデー
Seleniumを使ったリアルタイムのデザイン確認·Cqstyle MOONGIFT
CqstyleはWindows用のオープンソース・ソフトウェア。Webサイトのデザインでターゲットブラウザになることが多いのはIE、そしてFirefoxだろう。さらにSafariやGoogle Chromeも考えるべきだが、シェアを考慮するとこの二つがまず大事になる。 IEとFirefox向けのデザインを同時に確認 各ブラウザによってレンダリング結果が多少異なるため、その調整作業が必要になる。だがFirefox向けに徹底的に調整した後、IEで確認したら思い切りずれていたなんてこともある。そんな悲惨な結果を避けるために使ってみたいのがCqstyleだ。 Cqstyleはいくつかのパターンがあるが、まずWindows向けのプログラムが基本になる。CqstyleがSeleniumサーバとなり、IEとFirefoxを立ち上げる。さらにデフォルトブラウザ向けにCSS編集ウィンドウが開くので、そのテキ
スクリーンキャストと合わせて使うと便利そうなキーストローク表示·KeyCastr MOONGIFT
KeyCastrはMac OSX向けのオープンソース・ソフトウェア。Webサイトやソフトウェアの説明にスクリーンキャストを使って説明するケースが増えている。画面のオブジェクト（ボタンやチェックボックスなど）であれば見た目にも分かるが、キーの入力の場合はどうだろう。 フローティングウィンドウでキーストロークを教えてくれる キーボードショートカットを使った操作を行う際に、言葉で説明するなんて面倒くさい。そこで使ってみたいのがKeyCastrだ。これはキーストロークをフローティングウィンドウで表示するソフトウェアだ。 見せ方は二種類あり、キー入力があった際に画面の右下に表示するモード（デフォルト）と、常時表示されているフローティングウィンドウに入力されたキーを表示するモードとなっている。利用目的によって切り替えれば良いだろう。 設定画面 全ての入力を表示することもできるし、キーボードショートカッ
Pythonで拡張できるクリップボード履歴管理·ClipboardExtender MOONGIFT
ClipboardExtenderはWindows用のオープンソース・ソフトウェア。クリップボードにコピーした内容をそのまま使うというのは希で、大抵何らかの加工をしてから利用する。例えばメールの引用風にテキストを加工したり、コピーした内容からHTMLタグを取り除くと言った具合だ。 ツールから操作できる 一つしか枠がない、使い勝手の悪いクリップボードを拡張しつつ、そんな加工まで行ってくれるソフトウェアがClipboardExtenderだ。加工するターゲットは主にテキストになると思われるが、普段行っている処理が自動化できるようになりそうだ。 ClipboardExtenderにはクリップボードの履歴管理機能がある。デフォルトで最大100個まで管理できる。管理している内容はCtrl+Shitf+Vで表示できる。そこで貼り付ける内容を切り替えたり、内容を加工することが出来る。 スクリプト例 加工
バージョン管理の履歴をビジュアル化·Gource MOONGIFT
GourceはWindows/Mac OSX/Linux向けのオープンソース・ソフトウェア。ソフトウェア開発とはクリエイティブな作業であり、まるで生き物のように成長していく。自作のソフトウェアを我が子のように可愛がる人がいるのも理解できる。 バージョン管理をビジュアル化 そんなソフトウェアの歴史を管理するのがバージョン管理だ。そしてそこに残されたコミットログを使ってビジュアル化するソフトウェアがGourceだ。GourceはGit/Mercurial(Hg)対応のバージョン管理ビジュアル化ソフトウェアだ。 ビジュアル化に何の意味があるかと言われればたいした意味はない。だが一度実行すると時系列に沿ってどんどん成長していく様が面白く、飽きさせない。なお追加のステップを踏めばCVS/Subversionにも対応するらしい。 爆発的に開発の輪が広がっていく まるで木のように成長していくのは、まさに
)
Java用デコンパイラー·JD MOONGIFT
JDはJava製のフリーウェア。Javaはコンパイルする言語なので（コンパイルされるのは中間言語だが）、コンパイルされた内容は基本的には見られない。だが以前の担当者が作ったプログラムを修正しないといけない時に元のコードがなくなっていたら惨事になってしまう。 Java向けのデコンパイルツール そんなときに役立つのがデコンパイラーだ。コンパイルの逆、コンパイルされたコードを元のソースに戻してくれるソフトウェアだ。使い方を誤ると問題になりかねないが、使い方によってはとても役立つ。その一つがJDだ。 JDはGUI版とEclipseのプラグイン版の二つが存在する。GUI版についてはWindows/Mac OSX/Linuxそれぞれ用に実行ファイルが提供されている。使い方は簡単で、ただコンパイル済みのjar/classファイルを開けば良いだけだ。 検索ウィンドウ コードはハイライト表示され、階層も分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
