Progressive Image.js - ぼかし画像を使う画像遅延読み込み MOONGIFT
写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。 今回紹介するProgressive Image.jsはFacebookやMediumにインスパイアされた画像表示ライブラリになります。 Progressive Image.jsの使い方 表示直後です。画像はボケています。 スクロールしたりすることで画像がはっきりと表示されます。 実際の動きはこんな感じです。アニメーションしながらなのでより印象的です。 スクロールして画像が表示される場所までくるとぼかしが解除されてはっきりと表示されます。最初から普通に表示されている場合に比べて画像に目が引かれやすくなるはずです。遅延読み込みの一種ですが、ダミーの画像を表示する訳では
Frame Player - 画像を使った動画風プレイヤー MOONGIFT
Web上で再生できる動画と言えばMPEG4やWebM、さらにアニメーションGIFがあげられます。基本的に流れている動画はそのまま使われ、制御できるのは再生や音量くらいとなっています。 もっと細かく制御できる動画（のようなもの）を使いたい時にはFrame Playerを使うというテクニックがあります。 Frame Playerの使い方 こちらがプレイヤー。一見すると普通に見えます。 再生しているところです。じつは画像です。 画像なのでリアルタイムの変換もできます。こちらはセピア版。 こちらは色の反転。 さらに動画の形も自由です。 Frame Playerは画像をパラパラ漫画のように差し替えて動画のように見せます。そのため、音声は出ません。再生と停止ができる程度ですが、開発が進めばもっと多機能になっていくことでしょう。動画やアニメーションGIFとはまた違う魅力が提供できそうです。 Frame
Maggie - 画像アップロード前のチェックを簡単に実装
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、ファイル選択した際にファイルの内容を取得したり、サイズや画像の種別をチェックしたりできるようになりました。しかしその実装については面倒というイメージがあります。 そこで使ってみたいのがMaggieです。指定された画像ファイルを柔軟に扱えるようになります。 Maggieの使い方 使い方です。getInfoという関数を使います。 getInfo('#my-input', info => { const preview = document.getElementById('img-preview'); preview.src = info.src; }); infoという変数の内容は次のようになっています。 srcをそのまま画像のsrcプロパティに当てはめて使えたり、
jQuery Select Areas - 一つの写真から複数の範囲を指定
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クロップ（切り抜き）をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。 今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。 jQuery Select Areasの使い方 デモです。2つの範囲が表示されています。それ以外の部分はぼかしてあるのが面白いです。 さらに追加できます。重なった範囲は共通して使われます。範囲はピクセル情報で取得できます。 範囲は幾つでも追加できます。追加した場所は左上の場所と幅、高さで取得できます。 jQuery Select Areasは表示も特殊なので、使い方を考える必要がありそうです。クロッ
image-diff - 画像の差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であれば差分表示に普段からお世話になっているでしょう。コードのどこを直したのか、どこが削除されたのかなどはDiffを使わなかったら目で探すことになってとても大変です。そして、それはテキストだけではありません。 今回紹介するオープンソース・ソフトウェアはimage-diff、画像で差分表示を行ってくれるライブラリです。 image-diffの使い方 一つ目の画像です。 二つ目の画像です。 差分を取ると、このような画像が生成されます。 image-diffは二つの画像と、その差分となる画像の3つの引数で実行されます。プログラムの中に組み込むこともできます。異なる部分が赤く表示されるので、どこが変わっているのかは一目瞭然でしょう。デザイナーの方などは必須のツールになるのではないでし
ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ
最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。 そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。 ZooMoveの使い方 最初の表示です。3つとも同じサイズです。 Image1はマウスオーバーするとちょっとだけ大きくなります。 Image2は一気に拡大されます。 Image3は枠を飛び出して拡大されます。 実際にマウスオーバーしているところです。 ZooMoveで見ると単にズームと言っても色々あるのが分かります。Image2は一気にズームするので、虫眼鏡のような使い方が良さそうです。Image3のズーム方法は面白いですが、使い方が難しいかも知れません。 ZooMoveはjQuery/JavaScript製のオ
Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ MOONGIFT
HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。 しかし縮小した時の画像の品質はブラウザに依存してしまいます。それを防ぎ、より高品質にリサイズできるのがPicaです。 Picaの使い方 Picaの例です。細かくリサイズ時の設定ができます。 任意の画像で試せます。 独自の縮小アルゴリズムによって、高速かつ高品質なリサイズが実現しています。処理はWebGLとWebWorkerを利用について指定できます。Canvasで単純に縮小すると潰れてしまったり、シャギーが目立つような部分もPicaを使うと滑らかに縮小されているのが分かるはずです。 PicaはHTML5/JavaScri
grafi.js - JavaScriptで画像加工 MOONGIFT
サーバサイドで画像加工を行う場合、ImageMagickを使うのが基本になるでしょう。しかし先日ImageMagickの中にセキュリティホールがあったり、サーバの負荷を考えると使うのを控えてしまう人もいるのではないでしょうか。 そこで使ってみたいのがgrafi.jsです。JavaScriptで画像加工を行えるライブラリです。 grafi.jsの使い方 元の画像です。 ネガポジ逆転。 暗くしたり。 グレースケールも。 ぼかし。 シャープ加工。 grafi.jsを使えばクライアントサイドで画像加工ができます。元の画像はそのままなので、何度も加工できるのが魅力でもあります。なお、一部の加工（ぼかしなど）は使えないブラウザもあったので注意してください。 grafi.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 grafi.js
youtube-to-gif - YouTube動画をアニメーションGIFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました YouTubeには面白い動画がたくさんアップロードされています。その一部を抜き出してアニメーションGIFにしたいと思ったことはないでしょうか。動画をダウンロードし、一部を切り出してアニメーションGIFに変換する…考えただけでも面倒です。 そこで使ってみたいのがyoutube-to-gifです。一連の手順を一発で行ってくれるコマンドです。 youtube-to-gifの使い方 使い方は簡単で、URLと開始時間そして録画時間を指定するだけです。 youtube-to-gif -u https://www.youtube.com/watch?v=NqxSgp385N0 -b 30 -d 5 実行すると、下記のようにアニメーションGIFが生成されます。画像の大きさも変更できますが、これくら
Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT
imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る
タブレット、スマートフォンでの写真閲覧に使える無限スクロールビュー·Inflickity MOONGIFT
Inflickityは写真群の左右をつなげて無限に左右へスクロールできるようにするJavaScriptライブラリです。 写真は見せ方次第でインパクトが大きく変わりますが、10程度の写真をスムーズに見せる際に使えそうなのがInflickityです。 二つの帯が表示されています。 マウスでドラッグして左右に動かせます。 二つの帯は独立して動きます。 スマートフォンやタブレットの方が動きがスムーズです。 デモ動画です。動かした後に惰性が残ります。 Inflickityはリストでまとめた画像を横並べにして、その上で左右をつないでロールできるようにします。繋がっているので限界なく回転できます。お勧め写真を並べたりするのに使えそうです。何より猫が良いです。 InflickityはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIF
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像に簡単にぼかしをかけられるプラグイン「Background Blur」 | ライフハッカー・ジャパン