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

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

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

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

もっと見る

List

  • 2015/12/20

ThetaViewer.js - RICOH THETAの画像をアニメーションGIF化

全天球写真、動画は大きな可能性を秘めていると思っています。その可能性を感じさせてくれるデバイスの一つがRICOH THETAです。最新機種では1080pに対応し、高画質な動画を作成できるようになっています。そんなRICOH THETAで撮影した写真をアニメーションGIFで楽しめるのがThetaViewer.jsです。つ...

List

  • 2015/12/15

Instagram JS Filter - JavaScriptを使ったInstagram風フィルタ

Instagramの魅力と言えば撮影した写真に施す多彩なフィルタです。ネーミング含めて格好良く、写真を簡単に加工してくれます。単純に撮影しただけではなく、その後の加工が魅力を増してくれます。以前にCSS3だけでのInstagram風フィルタを紹介しました

List

  • 2015/12/12

Free Icon Set for files - 60種類を越えるファイルアイコン

ユーザにファイルをアップロードしてもらう機能はよくあるかと思います。アップロードした後は画像であればサムネイルを表示すれば良いですが、他の画像フォーマットの場合は難しいでしょう。そこで分かりやすく区別するためにアイコンを使ったりします。ファイルの種類はとても多いので、アイコンも多数のフォーマットに対応している必要があり...

List

  • 2015/11/21

Drop to GIF - 動画をドロップしてアニメーションGIFに変換

アニメーションGIFが流行っています。元になるネタはインターネット上、または自分のスマートフォン上に溢れています。つまり動画です。面白い動画やすごいシーンをアニメーションGIFにすればきっと皆が楽しんでくれます。そこで必要になるのが動画からアニメーションGIFを生成してくれるソフトウェアです。今回はMac OSX、操作...

List

  • 2015/11/20

Cropper - スマートフォンにも対応した画像切り抜きライブラリ

スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介し...

List

  • 2015/11/14

canvid.js - 動画をCanvas上に描画するJavaScriptライブラリ

HTML5のvideoタグによって動画コンテンツが手軽に楽しめるようになりました。そんな中、さらに注目を集めているのがアニメーションGIFです。無音で何度もハイライトシーンだけ繰り返される短い動画は純粋なアニメーションGIFだけでなく、VineやInstagramのようなサービスでも同じようなことができるようになってい...

List

  • 2015/10/21

GoogleGIFs - Google画像検索のアニメーションGIFを動かす

最近プレゼン資料の中でアニメーションGIFを使うようになっています。他にもフォーラムのコメントに使ったり、チャットでも貼り付けたりとアニメーションGIFの活躍の幅は大きいです。そんな面白いアニメーションGIFを探す際に使えるのがGoogleGIFsです。Googleの画像検索でアニメーションGIFが動くようにしてくれる...

List

  • 2015/10/16

gif2txt - アニメーションGIFをテキストアート化

画像をテキストアートにするソフトウェアは幾つかあります。テキストにするとIRCのようなテキストオンリーなチャットで送れたり、テキストファイルの中に埋め込むことができます。そんな画像をテキストに変換するライブラリを一歩先に進めたのがgif2txtです。アニメーションGIFをそのままテキストアート化してくれるソフトウェアで...

List

  • 2015/10/13

OpenSeadragon - こんな細かく!ズーム対応の画像ビューワー

カメラの解像度は年々上がる一方ですが、そこまで高解像度で撮った写真もコンピュータ上で表示するだけではサイズのムダかも知れません。4K、8Kディスプレイになれば違いますが、1080pレベルのディスプレイでは表現し切れていない部分があるでしょう。そこで写真をズームして表示できるOpenSeadragonを使ってみましょう。...

List

  • 2015/09/18

jQuery Animated Screenshots - 縦長のスクリーンショットをスクロールさせながら表示

最近のWebサイトはSPA(シングルページアプリケーション)の流れもあり、縦長になっています。そのため見えているところだけのスクリーンショットではサイトの魅力を存分に出せないのではないでしょうか。とはいえ縦長のスクリーンショットなんて誰も喜びません。そこで使ってみたいのがjQuery Animated Screensh...

None

  • 2015/09/17

Spritesheet.js - Cocos2dやCSS、Easel.jsに対応したスプライト画像ジェネレータ

ゲームやWebサイトで使っている細かいアイコンなどを集約してくれるスプライト画像は便利な仕組みなのです。しかし作るのはもちろんのこと、その後の更新まで考えると非常に面倒で次第にスプライト以外の画像が増えてしまっていたりしないでしょうか。Spritesheet.jsはそんなスプライト画像の生成を一手に行ってくれるライブラ...

List

  • 2015/09/13

Smoothslides - ケン・バーンズ効果を使ったカルーセル

最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。## S...

List

  • 2015/09/06

fisheye.js - 写真に魚眼レンズ風エフェクト

カメラのレンズは様々な種類があります。とにかく正確に記録しようとするものもありますが、中にはちょっとしたぼかしが入ったり、変わった印象を与えることで味が出るレンズもあります。魚眼レンズもそんな味の出るレンズの一つではないでしょうか。fisheye.jsは任意の写真を魚眼レンズで撮影したような雰囲気に変えてくれます。##...

List

  • 2015/08/31

Convert Video to GIF on OSX - 動画をアニメーションGIFに変換するツールキット

最近はソフトウェアを紹介する際に動画ではなくアニメーションGIFを使うようにしています。そちらのが自動で動き続けますし、手軽です。そしてその半数くらいは一旦動画で動きを撮った後、アニメーションGIFに変換しています。変換はLossy GIF compressor

List

  • 2015/08/21

JiGyazo - ワイプ風Gyazoアップローダー

Gyazoは有名な画像アップロードサービスです。様々な関連ソフトウェアが作られており、ごく手軽に写真の共有、公開ができるようになっています。多くの場合、画像ファイルをドロップしたり、コンテクストメニューで指定するだけでアップロードできます。JiGyazo

List

  • 2015/07/26

makeAppIcon - iOSアプリ用の画像を一気に生成

iOSの種類、解像度が増えるのに伴って予め用意すべきアイコンのサイズが多種多様になっています。しかもデバイスの種類によってアイコンのデザインを分けるのは推奨されていないので、基本的に一つの大きな画像を作ってサイズを変更する必要があります。そうした自動化できそうな手間はぜひとも減らしていきましょう。そのためのソフトウェア...

List

  • 2015/07/18

SVG PORN - 各種サービスロゴをSVG化

SVGはHTML5になって標準化されているメディアフォーマットですが、まだあまり広く活用はされていません。ただし、現在の高解像度化であったり、幅広い画面幅に対応していこうと考えるとSVGのようなベクター画像はとても大事になっていくでしょう。今回はそんなSVGを使って各種サービス、ソフトウェアのロゴを描いたSVG POR...

List

  • 2015/07/07

comic.js – 画像を手書きイラスト風に変換

コンピュータは実際のものをそのままに表現するのは得意です。3pxの線を引けば3pxになりますし、マウスで辿った通りに正確に線が引けます。逆に人が書いたようにちょっと乱れた感じというのは苦手です。今回は画像をほんの少し崩した感じ、イラストっぽい雰囲気に仕上げてくれるライブラリcomic.js

List

  • 2015/07/01

Imagenie - 画像の上に載せるテキストの位置を最適化

写真コンテンツの上に文字を載せて表示しているケースは多々あります。大抵は選び抜かれた写真と文字の配置になっており、写真と文字どちらかを変えるとテキストの配置も考え直さなければなりません。そうしないと写真のメインコンテンツと重なってしまって写真を台無しにしたり、テキストが見えづらくなったりします。そこで使ってみたいのがI...

List

  • 2015/06/25

OnionRing - ボタン画像の切り出しに使えるRubyスクリプト

Web向けにボタンなどの画像を作る場合、角丸部分が左右2つと中央部分は1px幅で繰り返して表示します。そのため画像を切り出す必要があるのですが、これが意外と面倒な作業になります。そこで使いたいのがOnionRingになります。画像を指定すると自動的に繰り返し部分を認識してそれを除外した画像を生成してくれます。## On...