mov2gif - 手持ちの動画をさくっとアニメーションGIFに変換 MOONGIFT
最近、アニメーションGIFを使ってソフトウェアの操作を表現することが多くなっています。YouTubeなどに比べると簡単に、繰り返し見られる動画が作れるのが利点です。その際の素材として、動画から変換するというケースはよくあります。 今回紹介するオープンソース・ソフトウェアはmov2gif、動画をアニメーションGIFに変換してくれるコマンドです。 mov2gifの使い方 mov2gifはCLIなソフトウェアなので、引数として動画ファイルを渡すだけです。他にも幾つかのオプションがあります。 $ mov2gif --help Usage: mov2gif [options] <inputfile> オプション: --optimize Optimization level [デフォルト: 1] --output-file, -o Converted gif file --frame, -f fram
aalib.js - 画像や動画をアスキーアートに MOONGIFT
画像をテキストに置き換えるのは昔から行われている面白い試みです。様々なアルゴリズムや描画方法が存在し、緻密に再現するものもあれば、なるべく簡素に表現しようとするものもあります。 今回はJavaScriptで画像をテキスト化する、aalib.jsを紹介します。さらに画像だけでなく動画まで変換できるのがポイントです。 aalib.jsの使い方 モナリザの画像。 カラーにも対応しています。 マリリン・モンロー。かなり細かく、グラデーションまで再現されています。 動画をリアルタイムにテキスト化します。 実際に動かしているところ。ずれはフォントによるものと思われます。 aalib.jsはWebブラウザだけで画像をテキスト化できます。わざわざサーバを立てたりする必要はありません。ユーザがアップロードした画像をその場でテキスト化するなんて使い方もできるでしょう。 aalib.jsはnode.js/Jav
Rucksack - スタイルシートの面倒なところを簡単に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SassやLESSは一旦覚えてしまえば手軽に使えますが、最初の覚えるまでが面倒というイメージがあるかも知れません。また、デファクトがまだ定まっていない雰囲気もあり、どちらかだけを使っているとプロジェクトによっては別な方を選択する可能性もあります。 そこで試してみたいのがRucksackです。ほぼ素のスタイルシートながら、関数的に特定の書き方を展開してくれるツールです。 Rucksackの使い方 rucksackはいわばスタイルシート用の関数のようなものです。例えば文字サイズをレスポンシブにしたい場合は次のように記述します。 .foo { font-size: responsive; } これは次のように展開されます。 .foo { font-size: calc((12px - 4
node.js blob service gateway - VMWare社製のAmazon S3互換サーバ MOONGIFT
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
PeerServer – WebRTCを使ったWebベースのP2Pサーバ
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'
おすすめ！サーバサイドのログをGoogle Chromeのデバッグツールで確認·Chrome Logger MOONGIFT
Chrome LoggerはPython/PHP/Ruby/node.jsに対応したGoogle Chromeでサーバサイドのログが表示できるChrome機能拡張です。 Google Chromeを使ってWebシステムを開発している時に、サーバサイドはログを見て、JavaScriptなどのクライアントサイドはコンソールを見ます。しかしこれでは面倒、という人にお勧めしたいのがChrome Loggerです。Google Chromeのデバッグツールにサーバサイドのログが出力できるようになります。 こんな感じのコードを書きます。 コンソールにサーバからのデバッグメッセージが出力できるようになります。 PHPの連想配列もJSONとして取得できています。 オプション画面です。 こんな感じに行数を出力することもできます。 Chrome Loggerの面白い点は、ツールとしてはChrome Logge
BootstrapベースのWebアプリケーションウィザード·Bootstrap Application Wizard MOONGIFT
Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。 Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstrap Application Wizardを紹介します。 フローティングでウィザードが表示されます。 次へを押して順番に進めていきます。 左下のステータスバーが徐々に進んでいます。 完了しました！ Bootstrap Application Wizardではwizardというメソッドを使って一つ一つをスライド風に切り替えながら処理を選べるようになります。入力チェックも内蔵されています。そして最後にデータが飛んでくるのでサーバ側で処理して返却すれば良いだけです。とても手軽です。
Androidアプリを開発する際のベースにどうぞ！·Android Bootstrap MOONGIFT
Android Bootstrapは多彩な機能が実装されたAndroidアプリ開発ベースです。 Webサービス開発時においてBootstrapが活躍しています。そういったベースがあると開発がとてもスムーズになるのではないでしょうか。そこで今回はAndroid Bootstrap、Androidアプリ開発のベースを紹介します。 ログイン画面。 ユーザ一覧。 ニュース。 タイトルをタップすると記事詳細が表示されます。 チェックイン。 タップすると地図が表示されます。 メニューはログアウトのみ。 紹介動画です。 Android Bootstrapはフラグメント、ページャー、アカウント管理などの実装に加え、Android Mavenプラグイン、RoboGuice 2、ActionBarSherlock 4、ViewPagerIndicator、http-request、GSON、Robotiumと
Bootstrapを使おう！様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
裸体カモン！ヌードを追い求める男子は実行すべし·nude.js MOONGIFT
nude.jsは画像をCanvasで読み込んでヌード画像か否かを判定するソフトウェアです。 裸が見たい！たくさんの画像の中からとにかく裸を見たい！と思う人はnude.jsを自動実行してみると幸せになれるかも知れません。 デモ画像です。もちろん裸ではありません。Scan Imageボタンを押します。 No nude判定です。当然です。 続いて二つの画像です。水着もありますが、やはりNo nude判定です。当然です。 おっ！ということでボタンを押すと見事Nude判定です（黒塗りはどうかと思う訳ですが、そこは致し方ありません）！イヤッホウ！ nude.jsはHTML5を使って画像をスキャンし、それが裸であるか否かを一定のアルゴリズムで判定しています。裸であれば残し、でなければ消してしまうスクリプトを書くと幸せになれそうです。nude.jsはHTML5をサポートしたWebブラウザで飲み動作しますが
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
CoffeeScriptがWebの世界を制する？HTML/CSS/JavaScript生成·coffee-world MOONGIFT
coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。 最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきました。そんなCoffeeScriptは既にJavaScriptだけの壁を越えて動き始めています。そんな人にお勧めなのがcoffee-worldです。 インストールはnpmからできます。コマンドにしないといけないので実際には-gをつけます。 コード例。これはCoffeeScriptでCSSを生成するccssフォーマットです。 後はcoffee-worldを起動すると現在のディレクトリまたはパスを指定してそのパス以下のファイルをコンパイルしてくれるようになります。 CoffeeS
Puttyをパワーアップ！タブ化に加えてTelnetやSCPにも対応させる·SuperPutty MOONGIFT
SuperPuttyはPuttyをタブ化し、さらにTelnet接続やSCPでのファイル転送をサポートできるようにするソフトウェアです。 SuperPuttyはWindowsのターミナルソフトウェアとして最も良く使われているソフトウェアの一つであるPuttyをさらに便利にしてくれるソフトウェアです。 SuperPuttyを利用する際にはまず、Puttyのパスを設定する必要があります。 立ち上がった時のウィンドウです。Puttyの各セッションがタブで管理できます。複数のセッションをSuperPutty一つで管理できるようになります。 新しい接続の追加も簡単で、右クリックしてNewを選択します。その際にはSSHの他にもTelnet/Raw/RLogin/Serialが選択できます。 3dsearch6.png接続を作成したら後はコンテクストメニューからConnectを選べば接続が開始されます。後
テキストサイトに。JavaScript製のテキスト差分表示·jsdiff MOONGIFT
jsdiffはJavaScript製の文字、単語、行単位の差分チェックツール。 jsdiffはnode.js/JavaScript製のオープンソース・ソフトウェア。Webサイトは様々な種類が存在するが、最も多いのはテキスト系サイトではないかと思う。フォーラム、Wiki、ブログ、Q&Aなどテキストは日々どんどん追加されていく。 比較 そんな中、みんなで一つのコンテンツを作り上げていく中で欲しくなるのがテキストの更新前と後を比較するための差分ツールではないかと思う。Webブラウザ上で手軽に使えるjsdiffを使ってみよう。 jsdiffはテキスト差分表示ライブラリで、複数の差分表示に対応しているのが特徴だ。一つは文字単位の比較で、もう一つが単語単位、そして最後に行単位の比較となっている。通常のDiffと違ってブロック単位で調整が入ることなく、表示されているそのままの行を比較する仕組みになってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
