git-remote-dropbox - DropboxをGitリポジトリに
DropboxにGitリポジトリを保存している人は多いかと思います。筆者もそうやって使っています。ただしこの場合、ファイルを下手に編集していると編集中コピーができあがってしまうことがあります。 そこで使ってみたいのがgit-remote-dropboxです。git-remote-dropboxはまさにDropboxをGitリポジトリのマスターにしてくれるソフトウェアです。 git-remote-dropboxの使い方 git-remote-dropboxをインストールすると、次のようにdropbox::が使えるようになります。 $ git clone "dropbox::/Files" これを実行すると手元のディレクトリにリポジトリが作成されます。もしDropboxにディレクトリがない場合は自動的に生成されます。git-remote-dropboxはローカルではなく、Web APIを使って
使えるWebサービス・オープンソース（27）·類自画像検索 MOONGIFT
今回のテーマは類似画像検索です。スマートフォンが流行るのにつれて、写真コンテンツは爆発的に増えています。テキストよりも画像の方が役立つケースも多く、写真コンテンツは今後も増え続けるでしょう。 そこで求められるのは従来のテキスト検索ではない情報提供方法です。その一つ、画像を検索するための技術である類似画像検索を取り上げてみたいと思います。 VisualSeeker - Yahoo!ラボ Yahoo! Japanの実験的プロダクトのサービスです。空間に漂っている画像をクリックし、その類似画像を検索します。ドリルダウンしながら辿っていくので、新しい画像に出会えるかも知れません。精度としては全く同じ画像を並べるのではなく、そこから連想される似たような画像を出すと言った仕組みになっているようです。 TinEye Reverse Image Search 画像またはURLを指定して類似画像を検索できま
JSCapture·こんなことまで！JavaScriptでスクリーンショット&キャストの保存 MOONGIFT
HTML5ではgetUserMediaを使ってWebカムにアクセスできるのは良く知られています。しかしデータの入力元は他にも考えられます。その一つがディスプレイです。画面に表示されている内容は確かに出力データになるでしょう。 そんな画面の内容をキャプチャできる機能が最新のGoogle Chrome（35以上）から登場しています。その実験とも使い方を紹介するのがJSCaptureです。 JSCaptureの使い方 まず最初にGoogle Chromeの設定を有効にする必要があります。 設定を有効にしたら再起動しましょう。 まずはキャプチャです。JSCaptureのサイトで実際に試すことができます。キャプチャをクリックするとダイアログが出ます。 画面共有の確認が出ますので、はいを押します。 見事キャプチャされました。Downloadを押して画像として保存できます。 次にレコーディングです。結構
MangaFilter - Web上で写真をマンガっぽく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ぜひぜひ試して！ 2012年に登場して一気に話題になったマンガカメラ（Android版）。撮影した写真にエフェクトをつけて何となくいい感じにマンガっぽくしてくれるアプリです。 そんなマンガカメラっぽいエフェクトをWeb上でできるようにしたのがMangaFilterです。 何はともあれ、まずは試してみましょう！ MangaFilterは画像に対して二値化してさらにいい感じにフィルタリングすることでマンガに似た雰囲気の出来映えにしています。さらに擬音や効果がつけばそれっぽくなっていくかも知れませんね。ぜひお試しを！ MangaFilterの使い方は簡単で、画像要素にメソッドを実行するのみです。 $('img').mangafilter({'maxWidth': 300, 'maxHei
書籍情報の取得に使えそうなISBNライブラリ·isbnjs MOONGIFT
isbnjsはISBN10/13に対応したJavaScriptライブラリです。 Amazonや紀伊国屋、ヨドバシカメラなど多数のECショップで取り扱われている書籍。その共通コードになるのがISBNです。そんなISBNをJavaScriptで扱うのに適したライブラリがisbnjsです。 デモです。ISBNであるかどうか、10桁と13桁の判定や相互変換ができます。 洋書のISBNを入れるとEnglishと出ており、言語の判定もされています。 こちらも別なデモ。ハイフンも補完されます。 ISBNには10桁と13桁がありますが、その相互変換まで行えるのがユニークです。JavaScriptを使って書籍を検索したり、情報を引き出す際に使えそうです。 isbnjsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Amazonでは取り扱い商
シンプルなフラットを追求したデザインテンプレート·Flat UI MOONGIFT
Flat UIはプラスチック的質感を持った柔らかいデザインのテンプレートです。 格好いいUIのWebサービスを作るかどうかで最初のウケは全く違ってくるでしょう。Bootstrapで作るとどうも臭いがとれなくて…とお悩みの方はFlat UIを使ってみましょう。 基本的なオブジェクト。ボタンやメニューです。 フォーム系。タグやトグル入力もサポートされています。 ベクター画像やアイコン。 サンプル。プラン選択もよさげです。 おお、インスピレーションがわきますね。 Flat UIは何となくプラスチックのような質感で、すっきりと見やすいデザインになっています。色合いもポップで柔らかく、原色系のはっきりとした感じはありません。Webサイトに柔らかさを求める際に良さそうです。とは言えこの手のフラットなデザインは使いこなしも難しいので注意が必要です。 Flat UIはHTML/JavaScript/スタイ
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
ここまでやるか。SQLiteをJavaScriptに変換·SQL.js MOONGIFT
SQL.jsはSQLiteをEmscriptenを使ってJavaScript化したソフトウェアです。 SQL.jsはWebブラウザ上で使えるデータベースです。Emscriptenを使ってSQLiteをJavaScriptに変換した面白いソフトウェアです。 デモです。テキストエリアに書かれたSQLを実行できます。 実行した結果です。最終的な結果だけが出力されています。SELECTの結果はJSONデータとして取得されています。 もちろん普通にSQLが使えます。 日本語は出力時は化けてしまいましたがデータ上は問題ないと思われます。 SQL.jsはSQLiteがそのままJavaScriptになってしまったようなソフトウェアです。慣れた使い勝手でSQLを実行したり、データを取得できてしまうのは面白そうです。なお現状Google ChromeやFirefoxにしか最適化されていません。 SQL.jsは
JavaScriptでJPEG画像を読み込んで表示·jpgjs MOONGIFT
jpgjsはJavaScriptによるJPEG読み込みライブラリです。 JavaScriptによるバイナリハックは今なお熱い分野です。今回はJPEGファイルを解析、表示を行うjpgjsを紹介します。 左から順番に通常のJPEG、プログレッシブ、グレースケールとなっています。 jpgjsでは指定したJPEGファイルを解析し、Canvas上に描画しています。現状のままでは普通に表示したのと変わりませんが、エンコーダーが実装されるとWeb上でJPEGファイルを加工したり生成したりできるソフトウェアが作れるようになります。 jpgjsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザで扱える画像系のリソースとしてはJPEG/GIF/PNG/SVGがあります。SVGやCanvasで描いたものをPNGで出力でき
オフラインでも使えるJavaScriptベースの全文検索エンジン·Fullproof MOONGIFT
FullproofはJavaScriptベースの全文検索エンジンです。高速に動作します。 Webサイトのコンテンツが充実してきたら欲しくなるのが検索機能です。Google検索を使っても良いですが、ここではFullproofを紹介します。何とJavaScriptベースの全文検索エンジンです。 色検索エンジン。 動作は高速です。 動物検索エンジン。 ゲーム検索エンジン。スコアが表示されています。 スコアの高いデータが上に出ます。 FullproofはHTML5のローカルストレージに対応し、WebSQLやIndexedDBにも対応します。Unicodeをフルサポートしています。スコアによって順位が決定します。発音記号に対応しますが、現在は英語とフランス語のみとなっています。JavaScriptだけとあって動作は高速です。 FullproofはHTML5/JavaScript製のオープンソース・ソ
横幅の可変にも対応したPinterest風デザインライブラリ·Freetile.js MOONGIFT
Freetile.jsはカラム幅も可変なPinterest風デザインを実現するライブラリです。 2012年前半の話題を一気にかっさらっていったPinterestはその奇抜なデザインもあり、色々な類似デザインを実現するライブラリを登場させるに至っています。Freetile.jsもその一つですが、高さだけでなく幅も自由に設定できるのが特徴になります。 サンプルです。かなり複雑なデザインでもこなします。 実例です。斬新なデザインがきちっと決まります。 フィルタリングしました。並び変わる時のアニメーションが格好いいです。 要素がない部分もできてしまうのは致し方ありません。 Freetile.jsを使うとかなり自由度の高いデザインが実現できます。とは言え表示はFreetile.jsに任せきりなので、思った通りのデザインになるとは限りません。なおフィルタリング機能があり、絞り込む時にはアニメーションが
Twitter、Facebook、Google、GitHub…多数のプロバイダに対応した認証ライブラリ·HybridAuth MOONGIFT
HybridAuthはFacebookやTwitterをはじめ多数のプロバイダに対応した認証統合ライブラリです。 Webサービスを作っていてたびたび発生するのが認証システムです。ID/PWの他、最近では外部のソーシャルサービスを使うケースも多々あります。そこで多数の認証システム対応を一手に引き受けてくれるHybridAuthを使ってみましょう。 サインインします。多数のプロバイダーに対応しています。 権限の承認が出ます。 Googleアカウントの情報が無事取得できました。 こんな感じにフローティングのウィジェットもあります。 HybridAuthはTwitterやFacebook、Google、Yahoo、MySpace、Windows Live、Foursquare、AOLなどが基本的に対応し、さらにGitHubやVimeo、Tumblrなども追加で対応します。CodeIgniter、C
これがHTML？と言いたくなるようなPDF変換ソフトウェア·pdf2htmlEX MOONGIFT
pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。 PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを紹介します。 これがHTMLだと思えないくらいの再現度です。 計算式にも対応。 段組み、画像埋め込みも問題なし。 白黒に限らず扱えます。 中国語。マルチバイト対応です。 まるで素のPDFを表示しているかのような再現度の高さがpdf2htmlEXの売りです。PDFを一つのHTMLファイルとして出力し、色や文字の装飾も反映します。リンクもそのまま使えます。なお、Type3のフォントには対応しておらず、テキスト以外のオブジェクトは画像としてレンダリングされるようになっています。
RESTfulなWeb APIを素早く構築するためのフレームワーク·Deployd MOONGIFT
Deploydはnode.jsでサーバサイドのAPIを簡単に構築するためのフレームワークです。 WebアプリケーションはJavaScript/Ajaxを多用します。サーバとはRESTfulで通信します。そんなWebアプリケーションとしての枠組みをまとめて提供してくれるソフトウェアがDeploydです。 インストーラーです。 まずコマンドを打ってWebアプリケーションを作ります。 管理画面です。 コレクションを作ります。 できました。ついでプロパティを設定していきます。 文字列、数字、論理値などから選べます。 APIが出来上がりました。 データメンテナンスもできます。 トップにアクセスしました。これは全てのデータを表示しています。 追加、編集、削除にも対応しています。 デモ。投票アプリです。 クイズ。 デモ動画です。 Deploydは最初のベースを作るところはコマンドですが、それ以外はWeb
管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました！アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア（ソースコード
node.js/WebSocketを使った通知プラットフォーム·Keima MOONGIFT
Keimaはnode.jsを使った通知プラットフォームです。 Webサービスを使っていて、新しいメッセージやお知らせをリアルタイムに受け取れる機能を目にしたことはないでしょうか。Gmail、Facebook、Twitterなど様々なサービスが使っています。そんなリアルタイム通知機能を実現するソフトウェアがKeimaです。 まずアプリケーションを作成します。 作成したらGetting startをクリックします。 使い方が出てきます。購読に関する方法も出ています。 購読した後、実際に別なWebブラウザからPublishを実行するとログがリアルタイムに表示されるのが分かります。 Keimaではまず、作成したイベントを購読します（これは自動化できるでしょう）。そして外部からそのイベントに対して発信します。そうするとイベントを購読しているWebブラウザに対して通知処理が走る仕組みです。このイベント
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で提供されているものに加えて色々な場面で役立
高速、セキュアなDjango製ショッピングカート·LFS MOONGIFT
LFSはDjango製のEコマースシステムです。 EコマースはオンラインBtoCにおいて最も成功している市場の一つと言えるかも知れません。それだけに多数のプレーヤが存在します。自分たちの得意とする言語でコマースシステムを立ち上げたい、そう考えるPythonプログラマーにお勧めなのがLFS（Lightning Fast Shop）です。 トップページです。 商品詳細です（画像もないので分かりづらいですが…）。 カート画面です。 配送先を入力する画面です。 管理画面にログインします。 商品管理です。 CMSとしてページを追加する機能もあります。 ショップ設定です。 LFSはDjangoを使って作られています。APIも多数あり、コアに触ることなく拡張ができるようになっています。動作が高速であること、コードがテストされておりセキュアであること、各レイヤーがスケーラブルであることが特徴としてあげられ
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
JavaScriptにもMedia Queryを·Javascript onMediaQuery MOONGIFT
Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。 CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 こちらはデスクトップの場合。 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数が変わります。 Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
