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

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

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

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

もっと見る

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です。起動しました。スライダーは中央にありま...

List

  • 2012/12/11

便利なQRコードをデスクトップでも活用「JS QRcode」

JS QRcodeはWebカムや画像にあるQRコードを読み取るJavaScriptライブラリです。携帯電話にカメラが搭載されて一気に普及したのがQRコードです。そこで数多あるQRコードをWebブラウザでも活用できるようにしてくれるJS QRcodeを使ってみましょう。トップページです。QRコードの画像を指定しました。瞬...

List

  • 2012/12/08

マウスオーバーで画像にイフェクト「Adipoli」

Adipoliはマウスオーバーで画像に表示イフェクトを加えるJavaScriptライブラリです。jQueryを使って、マウスオーバー時に画像にイフェクトを加えられるのがAdipoliです。ギャラリーや機能の紹介などで使うとインパクトがありそうです。何もしていない時の表示。下の方の画像は色々問題がありそうなのでぼかしてい...

List

  • 2012/12/04

Web上で画像の範囲を指定できる「imgAreaSelect」

imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。一例です。選択されていない場所はグレーになるので...

List

  • 2012/11/25

日本語にも対応したPHP用画像ライブラリ「DmImage」

DmImageはPHP製の画像ライブラリです。GDラッパーとして動作します。サーバサイドで画像を扱うケースは意外とよくありますが、ライブラリの使い方が途端に面倒になったりします。特に日本語を出力したりする場合はそうです。そこでPHP5で画像を扱いやすくするDmImageを紹介します。単なる四角い画像です。DataURI...

List

  • 2012/11/21

ボックスを満たした写真を表示「imgLiquid」

imgLiquidはボックスを満たす形で写真を表示するJavaScriptライブラリです。四角い枠の中に画像を表示する場合、上下左右の大きさが合わないと空白ができてしまいます。それは致し方ないのかと思っていましたが、imgLiquidを使うとかっこうよく解消してくれます。上がTrue、下がFalseにした結果です。いい...

List

  • 2012/11/14

どんなWebサイトもInstagramで撮影したように変化させてしまうGoogle Chrome機能拡張「Browsergram」

Browsergramは任意のWebサイトにInstagramライクなフィルターをかけるGoogle Chrome機能拡張です。Instagramの奇麗なフィルターがかかった写真に慣れてしまって普通の写真が見られなくなってしまったという方はBrowsergramを使ってみましょう。どんな写真(写真に限りませんが)でもす...

List

  • 2012/11/02

LytroのファイルをFinderで閲覧「Lytro QuickLook」

Lytro QuickLookはLytroフォーマットのファイルをQuickLookに対応させるプラグインです。後から自在にフォーカスを変えられる魔法のカメラLytro。そんなLytroで撮影したデータは専用のフォーマットになっていますが、Lytro QuickLookを使えばQuickLook上で閲覧できるようになり...