メディア - 画像の記事一覧
Sanscadre - スクリーン共有に最適なメディアプレイヤー
リモート会議などで画面を共有する時、ツールバーなど余計な情報が出てしまうのを嫌ったことはないでしょうか。なるべくなら見せたい部分だけ共有したいものです。しかし多くのソフトウェアにおいて、ツールバーを消せるのは全画面表示した時くらいです。そこで使ってみたいのがSanscadreです。動画や画像に対応したメディアプレイヤー...
JS IMAGE CARVER - イメージカービングをビジュアル化
イメージカービングという技術があります。元々Adobe社が発表したものですが、画像の中のメインオブジェクトは残したまま、画像を縮小する技術です。今ではPhotoshopなどで使われています。そんなイメージカービングをビジュアル的に確認できる面白いソフトウェアがJS IMAGE CARVERです。## JS IMAGE ...
Hashvatar - ハンドル名からアバターを生成
昔のサービスではプロフィールアイコンを設定していないと同じものを表示していましたが、最近はユーザ名のハッシュからアイコンを生成したりします。GitHubのアイコンもそうです。ちょっとだけでも違うとアイデンティティとして確立できるので良いです。今回紹介するHashvatarはそんなハッシュベースのアバターを生成するサービ...
twemoji-image-picker - twemojiをmacOSの絵文字ピッカー風に選択
絵文字は色々な場面で使われます。時には画像として利用したくなるかも知れません。しかしAppleなどが提供している絵文字は著作権もあるのでおいそれと使えません。そういう時にはオープンな絵文字アイコンを使うのが良いでしょう。今回紹介するtwemoji-image-pickerはTwitterの提供するtwemoji
image2csv - 画像のデータをCSV化するPythonスクリプト
画像から情報を取り出すのは面倒です。テキストならばコピー&ペーストできるのに、画像の場合は目で見ながら書き写したりします。同じコンピュータ上の画面でそんなことをやるのはアホくさいと思ってしまうでしょう。そこで使ってみたいのがimage2csvです。グリッド上に並んだデータをCSVに取り出します。## image2csv...
Browser Image Compression - Webブラウザで画像サイズを軽減
Webサービスでユーザに画像をアップロードしてもらう機能を付けることは良くあります。最近ではスマートフォンカメラの解像度が上がり、ファイルサイズも大きくなっています。プロフィールアイコンのために数MBのアップロードをしてもらうのはサービス、ユーザ双方にとって負担です。そこで使ってみたいのがBrowser Image C...
svgasm - アニメーションGIFをSVGに変換してサイズ軽減
アニメーションGIFを作成したり、利用してWebサイトのコンテンツに使っている人たちは多いです。しかしアニメーションGIFは画像をつなぎ合わせたもので、長い時間や大きい画像だと、あっという間に肥大化してしまいます。そこで使ってみたいのがsvgasmです。アニメーションGIFをSVG化することで、サイズの小さくできます。...
placeholders - ダミー画像やテキストを生成するWeb Components
Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的（ロゴなど）の文字を書いていたりします。プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、plac...
LogoMor - UCBLogoのプレイグラウンド
Logoは1960年代にMITで作られたプログラミング言語で、グラフィックスなどをプログラマブルに描ける言語です。拡張版が色々とあるようですが、バークレー大学製のUCBLogoもその一つです。今回紹介するLogoMorはUCBLogoをWeb上で記述して、その結果（グラフィックス）を描画できるプレイグラウンドになります...
Gifuct-js - アニメーションGIFの再生と停止&簡易編集
アニメーションGIFは一番面白いポイントだけを繰り返し楽しめるので、とても楽しいメディアです。しかしWebブラウザで表示すると強制的に繰り返し再生になってしまうので、いきなりオチを見てしまう可能性もあります。そうした悲劇を避けるために用意しておきたいのがGifuct-jsです。アニメーションGIFの再生と停止、簡易的な...
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...