メディア - 画像の記事一覧
What Anime Is This? - アニメの画像から作品を検索
アニメやマンガは日本が世界に誇るコンテンツです。その量は膨大で、日々たくさんのアニメが放送されています。気になるアニメの1シーンを見つけても、それがどのアニメなのか、どの話数探すのも大変です。そこで使ってみたいのがWhat Anime Is This?です。アニメのシーン画像から、アニメに関する情報を検索してくれます。...
freezeframe.js - アニメーションGIFの再生/停止を可能にするJavaScriptライブラリ
アニメーションGIFは動画と違ってハイライト部分だけを繰り返したり、YouTubeのように埋め込んだりする必要がないので手軽に扱えます。自動再生されるのが便利ですが、途中で止めたいと思うこともあるでしょう。そんな時に使えるのがfreezeframe.jsです。アニメーションGIFの再生、停止を制御できるJavaScri...
Anime-Face-Detector - Fast R-CNNを用いたアニメ顔認識
人の顔を認識する技術、機械学習はたくさんあります。より小さくても認識したり、横顔でも認識したりとさまざまです。人の顔は分かりやすいのですが、イラスト（マンガ）となるとそうはいきません。人はマンガの顔を見ても人の顔を認識できても、機械にとっては容易ではないでしょう。今回紹介するAnime-Face-Detectorはイラ...
picgen - 画像をパラメータで自由に生成
ソーシャルサービスでURLをシェアすると、OpenGraphに基づく画像が表示されます。この画像は閲覧者の目を引くのに効果的で、適切なものを設定しなければなりません。画像が用意できない…という場合にはCloudinary
JPEG.rocks - WASMを使ってクライアントサイドでJPEG画像を最適化
オンライン上では画像コンテンツが多用されています。その結果、1ページの容量が大きくなり、ネットワーク負荷が高まっています。表示上では不要なデータを削除することで、画像データは大幅に軽減できます。今回紹介するJPEG.rocksはプライバシーに配慮したJPEG最適化ツールです。## JPEG.rocksの使い方トップペー...
js-image-zoom - 外部依存のない画像ズームライブラリ
最近は高解像度な写真が増えたので、元の大きさのまま貼り付けてしまうと、閲覧に苦労するでしょう。かといって、見たい部分は拡大してみたいと思うはずです。この相反するニーズを解決するのがズーム機能です。今回紹介するjs-image-zoomは外部ライブラリに依存しないJavaScript製の画像ズームライブラリです。## j...
imgdiff - 高速な画像差分
テキストで差分を出すのはdiffコマンドなど、多数用意されています。しかしコンピュータ上で扱うメディアはテキストだけではありません。ほかにも画像や動画、音声ファイルなどがあります。それぞれ2つのファイルがあった時に、差分を確認したいと思うのは自然なことです。今回紹介するimgdiffは画像の差分表示に特化したソフトウェ...
Depix - モザイク化されたテキストを復元する
コンピュータの画像を載せる際にパスワードや重要な情報をぼかすことはよくあるかと思います。ぼかしすぎると何があるのかも分からなくなってしまうので、何か大事な情報があるくらいのぼかしにすると思います。いわゆるモザイクの状態です。しかしDepixを使うとそんなモザイク状態を解除できてしまいます。これはなかなか怖いかも知れませ...
Plaiceholder - 画像をぼかしてプレイスホルダー化
Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。## Plaiceholderの使い...
Svg Wave - 綺麗な波のデザインを描く
自然の動きを表現するのはとても難しいです。コンピュータは直線を描いたり、繰り返す動きを描くのは得意ですが、滑らかな曲線を自然に描くのは容易ではありません。しかし自然物のデザインはそうした繰り返しではないところに魅力があります。今回紹介するSvg WaveはSVGで波を描けるソフトウェアになります。## Svg Wave...
Visitor Badge - 現代風に作り直した昔懐かしいカウンター
古き良きインターネットの遺物といえば、Webサイトにあるカウンターではないでしょうか。CGIやSSIなどで設置して「あなたは何番目のお客様です」といった文言を表示していました。ちょうどいい番号をゲットしたら、キリ番ゲットなどと呼ばれて、それを掲示板で報告したりしました。そんな昔懐かしいカウンターを現代風に復刻したのがV...
t-rec - コンピュータ操作をアニメーションGIFにするCLIツール
コンピュータの操作を提示する際にコマンドラインを並べたり、テキストで○○ボタンを押すといった表現があります。しかしGUIの場合、どうにも分かりづらかったり、クリックすべき対象が見つからなかったりします。そんな時、動画はとても分かりやすい表現です。今回紹介するt-recはコンピュータ操作をアニメーションGIFにしてくれる...
Johari - Electron製の画像ビューワー
画像ビューワーにも様々な目的があります。一つ一つの写真を綺麗に見たいというものもあれば、大量の写真を分かりやすくカテゴライズしたい、高速で閲覧したいといった具合です。それぞれ目的に合わせてツールを使い分けると、より生産性が高まります。今回紹介するJohariは大量の写真に向いたソフトウェアです。写真をまとめてフォルダの...
webimgo - 画像をバッチ処理でサイズ変更&最適化
画像をまとめて変換したい時はよくあります。たとえば提案資料を作っていて、Webサイトのスクリーンショットをたくさん取得したものの、それをサイズ変更したい時です。異なる画像フォーマットも合わさったりすると、とても面倒です。今回紹介するwebimgoはバッチ処理で画像サイズの変換、そして最適化をまとめて行ってくれます。##...
markdown-backup - Markdown内のリモート画像ファイルをダウンロード
Markdownファイルはローカルに蓄積されるので、いつまでも手元にあると安心しがちです。しかし、内容によっては突然変わることがあります。それはリモートにある画像の場合です。リモートサーバ上でファイル削除されてしまえば、その表示内容が変わってしまいます。そうした不測の事態を防げるのがmarkdown-backupです。...
Placeholder service - 自分で立てる画像のプレイスホルダーサーバ
画像のプレイスホルダーはWebサイトやアプリのモックアップを作るときに重宝します。情報量が多い画像を使うと本質を見失いがちです。グレー表示などの画像であれば、サイトの構成など、必要な場所だけに目を配れます。今回紹介するPlaceholder serviceは自分で立てるプレイスホルダーサーバです。自由な大きさに画像を生...
Go-Diagrams - Goを使ってネットワーク図を描く
システム用の図を書く場面はよくあります。特にプロジェクトでのネットワーク図であったり、アーキテクチャをまとめたりするのによく書くことでしょう。ドロー用のソフトウェアを使ってビジュアルで描くこともできますが、メンテナンスが面倒だったり、専用のソフトウェアをインストールしないといけません。そこで使ってみたいのがGo-Dia...
glitch-image - 画像にグリッチ加工を行う
グリッチは画像などのバイナリデータをわざと壊すことで、映像に乱れを起こす加工技術です。乱れによってちょっとした不安感を感じさせたり、空気の乱れやSF的な効果を呼び起こせます。そんなグリッチを任意の画像に適用できるライブラリがglitch-imageです。## glitch-imageの使い方適用した画像です。!
Screenshoteer - コマンド一つでWebサイトのスクリーンショット取得
Webサイトのスクリーンショットを撮る際にはどうしているでしょうか。ドキュメントやヘルプ、スライドなどスクリーンショットが必要になる場面は実に多いです。ブラウザをそのままキャプチャしてもよいですが、個人の機能拡張など余計な情報が入ってしまいます。今回紹介するScreenshoteerはスクリーンショットが取得できるCL...
imgproxy - 高速で手軽な変換機能付き画像プロキシサーバ
画像は扱いが難しいメディアです。オンラインでよく使われていますが、同じ写真でも表示する場面によって大きさを変更したいことがあります。常にきれいで、画素の高い画像を使っているとネットワークを圧迫してしまうので、必要に応じたサイズへの変更が必要になります。これがとても面倒です。そこで使ってみたいのがimgproxyです。画...