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

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

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

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

もっと見る

List

  • 2014/10/20

Gifshot – Webカム/動画/画像からアニメーションGIF生成

アニメーションGIFは今なお人気です、というかここ数年さらに人気が高まっているのではないでしょうか。動画とは違いプラグインもCPUパワーも殆ど使わずに再生できますし、音がないのが逆に創造性を働かせてくれます。そんなアニメーションGIFを各種リソースから生成してくれるソフトウェアがGifshotです。Yahoo! Inc...

List

  • 2014/10/14

ユーザのケアレスミスを防止しよう。業務で使えるオープンソース(136)「ローディングアイコン」

今回のテーマはローディングアイコンです。最近はWebアプリケーション化が進んでおり、JavaScript/Ajaxを多用した開発が多くなっています。アプリのように画面遷移しないケースも増えており、スピーディーになっているものの、処理状態がわかりづらくもなっています。そこで使っていきたいのがローディングアイコンをはじめと...

List

  • 2014/10/06

jQuery Image Comparison Slider – ドラッグできるスライダーを使った画像比較

GitHubでは画像の差分を見る際に垂直なスライダーが表示されます。それによってどの部分が違うのか一目で分かるようになっています。二つの画像を比較したいというのはバージョン管理に限らずあることでしょう。そんな時に使ってみたいのがjQuery Image Comparison Sliderです。スライダーを使って二つの画...

List

  • 2014/10/01

thumbor - 画像加工はお任せなWebサーバをどうぞ

画像の加工は面倒で、それが数千にも及ぶ画像ファイルであったり、ユーザがアップロードするような画像を自動で加工したいと思ったら何らかのシステムを考えるでしょう。その選択肢の一つとして考えてみたいのがthumborです。## thumborの使い方thumborはURLのパラメータを使って画像加工を行います。リサイズはもち...

List

  • 2014/09/28

GifDeck – SlideShareのスライドをアニメーションGIF化

スマートフォン、タブレットなどのデバイスを使う際にはアプリケーションを移動するというのがとても面倒に感じます。そのため、リンクなどを辿ることなくその場で見られるというのはとても嬉しかったりします。今ではYouTubeをはじめ埋め込みに対応したサイトも多いですが、動作が重たく感じるのが難点です。そこで登場したのがGifD...

List

  • 2014/09/25

Static-google-Maps - Googleマップの静的画像取得を簡単に

GoogleマップはWebサイト内に埋め込んで使えるのが便利ですが、Ajaxに対応していないデバイスや動かす機能を無効にしたい場合静的な画像として出力してくれる機能があります。しかしあえて使うのが面倒で何となく避けていたという方はStatic-google-Mapsを使ってみると良さそうです。## Static-goo...

List

  • 2014/09/17

TremulaJS – 多彩な表示方法をサポートした画像表示ライブラリ

多くの写真をいかに格好よく見せるか、Webデザイナーとしてはこだわりがあるでしょう。単純なグリッドに人気が集まる中、Pinterestのように縦に並べていく方式が人気になりました。見せ方にはまだまだ変革の余地があると言えます。そんなグリッド表示を様々なパターンで表示し、切り替えられるライブラリがTremulaJSです。...

Missing

  • 2014/09/14

FocusPoint – レスポンシブの画像表示に。注目して欲しいポイントを残して表示。

レスポンシブWebデザインを取り入れたサイトは増えていますが、HTMLはフレキシブルに変更できても画像リソースはそう簡単ではありません。そのため幅ごとに数パターン画像を用意しているケースもあります。同じ画像の場合、単にサイズを小さくしてしまうと見るべき場所も小さくなって分かりづらくなります。そこで使ってみたいのがFoc...

List

  • 2014/09/02

jquery-hex-gallery - 六角形に画像を表示するギャラリー

ギャラリー系ライブラリではコンテンツ(主に写真)の見せ方にこだわりが感じられます。単純に並べるだけではダメで、大きさを変えたり、Pintrest風に高さを変えたりして効果的な見せ方をします。今回紹介するjquery-hex-galleryもその一つです。面白いのは四角ではなく、六角形になっているという所です。## jq...

List

  • 2014/08/29

Gretro – レトロなグラフィックスを描き出すJavaScriptライブラリ

最近は綺麗なグラフィックスばかり見ますが、そんな時代だからこそ逆に懐古的にレガシーなグラフィックスが楽しい場面もあります。しかし十分に高機能化した現在においてレガシーな状態を作り出すのはそうそう簡単ではありません。再現のためにはレガシーな環境を十分に調べなければならないでしょう。そうやって完成したのがGretroです。...

List

  • 2014/08/15

Giraf – Web上で動画をアニメーションGIFに変換

アニメーションGIFは魅力的なメディアフォーマットです。動画が上位互換という訳ではありません。レガシーなブラウザでも表示ができ、プラグインもいらず、ループ再生もできるメディアはアニメーションGIFをおいて他にありません。そんなアニメーションGIFを動画から作成できるのがGirafです。Webベースなのでインストールもい...

List

  • 2014/08/10

iCropper – JavaScriptを使って画像を四角く切り抜き

Webサイトでユーザにプロフィールアイコンをアップロードしてもらうというのはよくある機能だと思います。そんな時にユーザがちょうど良くアイコンサイズ(大抵正方形)の画像を持っているとは限りません。そこで使ってみたいのがiCropperです。JavaScriptを使ってWeb上で画像のクロップを行うライブラリです。## i...

List

  • 2014/08/08

All The GIFs – アニメーションGIFがどんどん集まる専用クライアント

なんでこんなにアニメーションGIFは面白いのか。一つ一つは長くないですし、繰り返し何度も楽しめる。音もないので安心できますし、256色という今だと貧弱過ぎる仕様もノスタルジックでいい感じのエッセンスになっています。そんな魅力的なアニメーションGIFを日々探している方に使ってみて欲しいのがAll The GIFsです。R...

List

  • 2014/07/30

js-emoji - JavaScriptを使ってどのブラウザでも絵文字を表示

iOSで正式に使われるようなった絵文字による効果はとても大きく、GitHubやBasecampなど様々なWebサービスで採用されるようになっています。デスクトップのブラウザではCSS Spriteによって表示されることが多いようです。しかしデバイスによって表示方法が異なるというのは調整が面倒です。そこで使ってみたいのが...

List

  • 2014/07/28

Filtrr2.js – クライアントサイドで画像加工を行うJavaScriptライブラリ

写真は撮影したそのままでなく、加工すると印象が変わるものです。セピアやグレースケールなどはよく使われるところで、コントラストや明るさを変更しても様変わりするでしょう。そういった加工をローカルで行ってもいいですが、オリジナルを常に残しておかないといけません。それが面倒という方はFiltrr2.jsを使ってみましょう。##...

List

  • 2014/07/28

jQuery Photoset Grid - Tumblrでも使える写真グリッド表示ライブラリ

写真は見せ方一つで大きくインパクトが変わります。単純に並べているだけではダメで、数多くのサービスが写真の見せ方に苦心しています。そんな中、一つのシンボルになっているのがTumblrではないでしょうか。大きく一つの写真を見せるUIは写真を好む人たちに受け入れられ、今なお写真コンテンツが多く投稿されています。そんなTumb...

List

  • 2014/07/26

Stitches - HTML5でクライアントサイドだけでスプライト画像作成

スプライト画像を作るのって意外と面倒ですよね。たくさんのアイコン画像を並べて、そのピクセル位置を測りながらスタイルシートに設定していくのはとても根気のいる作業です。それで指定がミスっていたら目も当てられません。そこで使ってみたいのがStitchesです。アイコン画像をアップロードするだけで一気にスプライト設定を生成して...

List

  • 2014/07/21

jQuery.GI.TheWall.js - Google画像検索ライクな表示/アニメーションライブラリ

Googleの画像検索をよく使うのですが、一覧に並んだ画像に加えて、それをクリックした時のアニメーションや説明表示など使い勝手がとてもいいです。さすがGoogleといった所ですが、そのUIを真似ると色々な場面で使えるかも知れません。そこで使ってみたいのがjQuery.GI.TheWall.jsです。jQueryベースで...

List

  • 2014/07/16

Intense Images – クリックで写真拡大、マウスで動かすビューワー

スマートフォンが流行るのにともなって写真コンテンツが爆発的に増えています。そして次に求められるのは何かと言えば、写真のビューワーに他なりません。たくさんのコンテンツをいかに見せるかが大事になってきます。今回はその一つ、Intense Imageを紹介します。写真をフルスクリーンで拡大してみせる、そんなビューワーになりま...

List

  • Premium_s 2014/07/14

使えるWebサービス・オープンソース(31)「アニメーションGIF」

今回はアニメーションGIFがテーマです。動画全盛の時代になってなお、アニメーションGIFの魅力は衰えていません。Twitterでサポートを開始したアニメーションGIFは実際には動画にしているようですが、Vineと同様に無音で繰り返し再生される動画というのはインパクトもあって面白いものです。使う人たちが多いということは、...