ITエンジニア/デザイナ向けにオープンソースを毎日紹介

メディア - 画像の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2013/05/18

PhotoshopでのRetina対応リソースの生成を自動化「Retinize It」

Retinize ItはPhotoshop用アクションで、Retina対応のリソースを作成する作業を自動化します。iPhone 4S以降、Retinaディスプレイに対応したリソースの作成が求められるようになりました。都度2倍にして@2xをつけて保存が面倒に感じているデザイナーの方はRetinize Itの利用をお勧めし...

List

  • 2013/04/26

嫌なことがあってもGoogle Chromeを使って癒されよう「Chrome Tumblr Tile」

Chrome Tumblr TileはGoogle Chromeの新規タブをTumblrの画像をタイル表示にしてくれる機能拡張です。仕事をしていたり、プライベートでWebブラウジングをしていた時にショックな出来事に見舞われることもあるでしょう。そんなとき、自分の好みの写真を見ればすぐに立ち直れるかも知れません。そのため...

List

  • 2013/04/12

CanvasタグからアニメーションGIFを生成「jsgif」

jsgifはCanvasタグに描画した内容をアニメーションGIFに変換するソフトウェアです。簡易的なアニメとしてよく使われているのがアニメーションGIFです。まだまだ意外と人気で、動画をあえてアニメーションGIFに変換して楽しむようなサイトも数多く存在します。そんなアニメーションGIFを発展させてくれそうなのがjsgi...

List

  • 2013/04/10

アニメーションする天気アイコン群「Skycons」

SkyconsはCanvasタグで描かれるアニメーションする天気アイコンです。天気サイトにはつきものの天候を指し示すアイコン。晴れや曇り、雨などが見るだけで簡単に分かります。それをもっと見やすくしてくれたのがSkyconsです。全アイコンです。Canvasタグで描かれており画像ではありません。使い方です。とてもシンプル...

List

  • 2013/04/04

スクリーン上の任意の場所をキャプチャしてOCR/音声読み上げ「Capture2Text」

Capture2Textは画面上の任意の部分をOCR処理できるソフトウェアです。オンラインにあるのはテキストだけとは限りません。テキストを埋め込んだ画像コンテンツもたくさんあります。そこから効率的にテキスト情報を素早く抽出できるソフトウェアがCapture2Textです。コンテストメニューに常駐します。利用はショートカ...

List

  • 2013/03/12

Canvas+JavaScriptを使って画像解析「Resemble.js」

Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble...

List

  • 2013/03/08

すっきりしたデザインのギャラリーライブラリ「Galleria」

GalleriaはレスポンシブWebデザイン対応を謳ったJavaScriptイメージギャラリーです。デジカメで撮影した多量の写真も見せなければHDDの肥やしでしかありません。そこでWebサーバ、Flickr、Picasaなどにアップロードした後はGalleriaを使ってギャラリー化してみましょう。サムネイルが下に並び、...

List

  • 2013/02/18

Webページ内の画像をまとめて一つのタブで閲覧「img2tab」

img2tabはWebページ内にある画像をまとめて一つのページで見せてくれるGoogle Chrome/Firefoxアドオンです。キュレーションサイトなどでよくあるのが画像まとめです。そこにある無数の写真を順番に選んでいくのは面倒なので、img2tabを使って一気に表示させましょう。インストールします。例えばMOON...

List

  • 2013/02/17

Font Awesomeからサイズや色を指定して画像出力「Font Awesome to PNG」

Font Awesome to PNGはFont Awesomeの情報を画像アイコンとして出力するソフトウェアです。Web Fontを多数使えるようにしてくれるFont Awesomeはとても便利ですが、一つのアイコンのために全体のWeb Fontを読み込むのでは非効率的です。そんな時にはFont Awesome to...

List

  • 2013/02/16

面白い!Webサイトが出来上がっていく様子を再生「Time Machine」

Time MachineはGitを使ってHTMLコーディングが仕上がっていく様子を画像、動画にするソフトウェアです。Webデザイナーの方がHTMLをコーディングしていく中で、後でその過程を見せたいと思ったことはないでしょうか。そこで使ってみたいのがTime Machineです。Time Machineを使うとphant...

List

  • 2013/02/12

面白い!動画を編集した上でアニメーションGIFに変換「rokuga」

rokugaは動画を読み込んでアニメーションGIFに変換するソフトウェアです。VineはアニメーションGIFのような動画を撮影、共有できるのが特徴ですが同じように動画からアニメーションGIFを作れるのがrokugaです。動画をドロップします。動画解析中。解析されました。フレーム単位で下に画像が表示されています。ランダム...

List

  • 2013/01/22

移動できるマーカーを使って画像を多角形に切り抜き「JBCroppableView」

JBCroppableViewはiOS上で画像を多角形に切り取るライブラリです。写真を撮影して気に入った部分だけを切り抜くと言った操作はよく行われます。特にカジュアルに撮影できるスマートフォンではそうです。そこで使ってみたいのが多角形に切り抜けるJBCroppableViewです。iPhone5の縦長の画面に合わせてあ...

List

  • 2013/01/19

JavaScriptでJPEG画像を読み込んで表示「jpgjs」

jpgjsはJavaScriptによるJPEG読み込みライブラリです。JavaScriptによるバイナリハックは今なお熱い分野です。今回はJPEGファイルを解析、表示を行うjpgjsを紹介します。左から順番に通常のJPEG、プログレッシブ、グレースケールとなっています。jpgjsでは指定したJPEGファイルを解析し、C...

List

  • 2013/01/09

画像の上に華麗なツールチップを「iPicture」

iPictureはIKEA風に画像にツールチップを表示するJavaScriptライブラリです。IKEAのカタログアプリを見ると、写真の一部がクリックできるようになっており説明が表示されます。あれに似た効果を実現してくれるのがiPictureです。サンプルです。お弁当の一部にボタンがついています。クリックすると説明が表示...

List

  • 2013/01/04

iPadで使えるシンプルなペイントアプリ「Simple Paint iOS」

Simple Paint iOSはiPad対応のシンプルなペイントアプリです。iPadは様々な目的に利用されています。ゲームで遊んでいる人もいますし、写真を閲覧するのにも良い大きさです。そしてもう一つ、絵を描くのに使っている人も多いでしょう。そこで見て欲しいのがSimple Paint iOSです。起動しました。色を変...

List

  • 2013/01/01

リアルタイムに画像を抽象化「flowabs」

flowabsは画像やWebカムからの映像をリアルタイムに抽象化するソフトウェアです。単なる写真も加工を行うことで驚くほどの変身を遂げることがあります。今回はその一つ、写真の抽象化を行うflowabsを紹介します。面白いのは画像のみならず動画も抽象化できることです。メイン画面です。パラメータを変更すると印象深い画像にな...

List

  • 2012/12/24

レスポンシブに画像の表示“場所”を切り替える「Focal Point」

Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。デスクトップの場合。幅を少し小さくした場合。特に変わっていないと思いま...

List

  • 2012/12/15

カスタマイズが容易なWebベースのペイント「Sketch.js」

Sketch.jsはCanvasを使ったWebベースのイラストソフトウェアです。Web上でお絵描きをしようと思ったらCanvasタグを使うのが良さそうです。そのためチュートリアルとしても役立ちそうなのがSketch.js、超シンプルなお絵描きソフトウェアです。中央に真っ白なキャンパスがあります。マウスで書けます。こちら...

List

  • 2012/12/14

Photo BoothのようにWebカムの画像をリアルタイムイフェクト「Photobooth.js」

Photobooth.jsはMac OSXのPhoto Booth風にWebカムの映像をイフェクトするライブラリです。Mac OSXにはPhoto Boothというソフトウェアが付属しています。iSight(Mac OSX用のWebカム)で取り込んだ映像にイフェクトを加えるソフトウェアですが、Webブラウザ上でそれを実...

List

  • 2012/12/12

どこが違うか分かりやすいObjective-C製の画像比較ライブラリ「WCBeforeAfter」

WCBeforeAfterはスライダーを使って二つの画像の表示範囲を切り替えるObjective-Cライブラリです。GitHubのDiff表示で画像もスライダーを使って比較できるようになっています。同じような表示をiOS上で実現する面白いライブラリがWCBeforeAfterです。起動しました。スライダーは中央にありま...