メディア - 画像の記事一覧
imgproxy - 高速で手軽な変換機能付き画像プロキシサーバ
画像は扱いが難しいメディアです。オンラインでよく使われていますが、同じ写真でも表示する場面によって大きさを変更したいことがあります。常にきれいで、画素の高い画像を使っているとネットワークを圧迫してしまうので、必要に応じたサイズへの変更が必要になります。これがとても面倒です。そこで使ってみたいのがimgproxyです。画...
SteganograhyProject - 画像の中に画像、テキストを隠す
映画などではコンピュータ上に重要なデータを残す際、暗号化しているのが基本です。しかし暗号化はパスフレーズなどによって解かれる可能性があります。さらに暗号化されていたら、そこに重要な物があると教えているようなものです。そこであなたに使って欲しいのがSteganograhyProjectです。画像ファイルの中にテキストや画...
AVIF - JPEG/WebPよりも軽量な画像フォーマット
インターネット上で送受信されるデータ量が増えています。そのため、ファイルはなるべく小さい方が好まれるでしょう。送受信も短くて済みますし、帯域を逼迫しません。今回紹介するAVIFはJPEG/WebPを置き換える新しい画像フォーマットになります。## AVIFの使い方AVIFは執筆時点のGoogle Chrome 84では...
decomoji - テキスト画像を使ってSlackを盛り上げよう
Slackではカスタム絵文字が使えますが、日本でよく見かけるのがイラストではなくテキストになっているものです。4文字だと収まりがよく、漢字だと角印のようで見栄えもよかったりします。そんなテキストベースの絵文字をデコモジというそうです（文字をデコレーションしているからでしょうか）。decomojiではSlackで使えるデ...
XP Paint - 懐かしいWindows XPのペイントアプリをWebアプリケーションとして再現
少し前ではローカルでしか実行できなかったようなアプリケーションが、今ではWebブラウザ上でさくさく動くようになっています。それによってOSの垣根を越えて、自由に使えるようになるでしょう。今回紹介するのは懐かしいWindows XPベースのPaintアプリを再現したXP Paintです。## XP Paintの使い方メイ...
code2img - コードを画像化するコマンド
プログラミングコードをブログの中に差し込んで表示したいと思うことがあります。しかしブログエンジンにコードのハイライト機能がなかったらどうなるでしょうか。酷い、読みづらいコードが表示されてしまうかも知れません。読みづらいものよりは、まだ画像の方がマシなこともあります。そんな時に使えるのがcode2imgです。## cod...
ゆるGIFメーカー - 画像を振るわせてアニメーションGIFを生成
アニメーションGIFは動いていなければ意味がありません。しかし、アニメーションを一から作るのは大変です。動画などの素材をベースにするのはそのためです。コマ撮りで作るのは時間も労力もかかります。そこで一枚の画像からでもアニメーションGIFが作れるゆるGIFメーカーを使ってみましょう。フルフルと震える、新しいかわいらしさを...
Image Scrubber - Webブラウザで上でプライバシーに配慮した写真加工を行う
この記事が一般公開される頃にはBLMも落ち着いているでしょうか。欧米ではBLM運動が活発に行われており、様々な余波が生じています。今はソーシャルの時代であり、デモで撮影された写真があっという間に拡散されています。そうやって撮影された写真には肖像権があり、おいそれとアップロードするのはよくありません。まず最低限の処理をI...
bingo - 壁紙をBingのimage of the dayから取得して自動設定
壁紙は何を設定していますか。こだわりの一枚を使っている人も多いと思いますが、筆者はアプリが全画面のことが多いので、こだわりもなくデフォルトのまま放置しているように思います。これではよくありません。同じように壁紙を何にすればいいか分からない…という方はbingoを使ってみましょう。Bingのimage of the da...
Image Compare Viewer - Web上で2つの画像を比較
変更前のと変更後の画像や動画は見る目を引くものです。何が変わったのか、どう変わったのか分かると、どこに工夫がこらされているのか分かります。ビフォーアフターのようなリフォーム番組でも、前後の動画を効果的に使っています。今回紹介するImage Compare Viewerもそんな比較を効果的に行えるライブラリです。二つの画...
Talking Head Anime - 1枚のイラストから動くアニメーションを作るデモ
Live2Dではイラストなどの画像を動かして、まるでアニメーションのように見せることができます。そして現在、類似の技術が様々に登場しています。それらは機械学習を用いたり、Webカメラの顔と一致させたりと周辺技術と組み合わせて展開されています。今回紹介するTalking Head Animeは一枚の画像を動かすデモで、機...
simpleParallax.js - 画像を使ったシンプルなパララックスエフェクト
パララックスエフェクトは見ている人にちょっとした違和感を与え、注目を集めるのに使えます。しかしスクロール時の処理を実装するのは大変で、後々のメンテナンスも面倒です。そこで専用ライブラリの利用をお勧めします。今回紹介するのはsimpleParallax.jsです。## simpleParallax.jsの使い方デモです。...
Cloudia - 簡単に日本語に対応したワードクラウドを生成
単語をたくさん並べて作成するワードクラウドという表現があります。頻繁に出てくるワードを大きくすることで、重要なワードとそうでないものとをフィルタリングすることもできます。自分のサービスでもワードクラウドを表示したい、そう思った方はCloudiaを使ってみましょう。## Cloudiaの使い方例です。日本語の場合、形態素...
Paint By Wasm - 画像からカラーパレットを生成
デザインを行う際に、色数が多すぎるのはよくありません。数種類の絞り込まれたカラーパレットを作り、そこから選んで使うのが一般的でしょう。そのためカラーパレットを作るのが最も重要な作業になります。写真やイラストなどからカラーパレットを作る場合、便利そうなのがPaint By Wasmになります。## Paint By Wa...
Zoom Web Browser - Zoomのバーチャル背景を変更するコマンド
Zoomではバーチャル背景と呼ばれる機能で、背景画像を別なものに差し替えられます。一般的には画像、または動画を指定できます。画像の場合、設定画面で差し替えないといけないので面倒です。そこで使ってみたいのがZoom Web Browserです。背景画像をコマンド一つで差し替えられるようになります。## Zoom Web ...
midori - 背景画像を格好よくアニメーション
画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行...
Avatarify - 写真1枚であの有名人になれちゃうアバター
ZoomやGoogle Meetなどを使ってオンラインでミーティングを行うことが増えてきました。会社によっては顔を見せないのを基本としているところもありますが、多くの場合は対面としてお互い安心感が得られるようにするようです。そんな中、場の雰囲気を和ませたいならば使ってみたいのがAvatarifyです。機械学習を使って顔...
Smooth Scrolling Image Effects - スクロールを使って画像にアニメーションを起こす
Webブラウザでは様々なユーザアクションを使ってイベントを実行できます。クリックや文字入力はもちろん、ウィンドウのリサイズやマウスオーバーなど細かく指定して、よりユーザビリティの高い仕組みを提供できます。Smooth Scrolling Image Effectsは名前の通り、スクロールを使って画像エフェクトを実行しま...
gifcap - デスクトップの操作をキャプチャ&アニメーションGIF化するWebアプリ
HTML5 APIが拡充されることで、これまでデスクトップアプリケーションでしかできなかったことが、どんどんWebブラウザ上で実現できるようになっています。開発環境だってAtomやVS CodeのようにHTML5で作られたものが主流になってきています。今回紹介するgifcapはWebベースでアニメーションGIFを作成す...
Tabler Icons - 300種類のSVGアイコン集
最近は画像ではなく、SVGでアイコンを表示するケースも増えています。PNGなどのバイナリとは異なり、SVGならば縮小、拡大しても綺麗だというのが利点です。さらにちょっとしたデータ変更であれば（色など）、データを書き換えたり、CSSで変更できます。今回紹介するTabler IconsはSVGで作られた300種類のアイコン...