メディア - 画像の記事一覧
RTP.PinchZoom.js - 画像をピンチ操作で拡大
スマートフォンアプリでよく使われるのがピンチ操作です。複数指を使って操作することで、デスクトップではできなかったような操作が可能になります。より直感的で、誰でもすぐに使いこなせるのも利点です。そんなピンチ、ズームと言った操作をWeb上でも使えるようにするのがRTP.PinchZoom.jsです。## RTP.Pinch...
gif-for-cli - コンソールでアニメーションGIFを楽しむ
ここ数年、アニメーションGIFが広く使われるようになっています。動画のように高画質でもありませんし、ファイルサイズも大きくなりがちなのですが、ハイライトシーンだけを繰り返すようなアニメーションはとても面白いです。そんなアニメーションGIFをコンソール上でも楽しめるのがgif-for-cliです。面白いのはこれがGoog...
letter-icon-generator - SVG/画像で一文字のアイコンを生成
最近、プロフィールアイコンを設定していないアカウントは頭文字だけを表示するといったアイコンが増えています。Slackでもデフォルトではチャットの頭文字だけが表示されます。そういったアイコンを生成してくれるのがletter-icon-generatorです。## letter-icon-generatorの使い方lett...
S3 Album Publisher - 静的ホスティングサイト向けにアルバムをアップロード
Webサイトを立ち上げるというのは昔に比べると手間がかからないものになりましたが、逆に手間がなくなりすぎて一切立ち上げる気がなくなってしまっています。ちょっとしたサイトをあえて自分でメンテナンスするのは面倒というものです。例えば写真を他の人に公開したいというだけであればS3 Album Publisherを使ってみるの...
MRISA - Google画像検索を使って類似画像APIを実現
AIや機械学習で良く取り上げられるのが画像の分析です。何や誰が写っているのかを分析したり、タグ付けするような技術が人気です。また、ある写真と似たような写真を探すこともできます。そうした画像検索をGoogle画像検索を使ってAPI化するのがMRISAです。## MRISAの使い方MRISAは以下のようなAPIを呼び出して...
GIFPop - アニメーションGIFを最適化
最近アニメーションGIFが使われる場面が増えていますが、難点としてサイズが大きくなりがちという問題があります。特に動画からアニメーションGIFに変換した場合、FPSが高すぎたりしてWeb上に貼るのに向きません。そこで使ってみたいのがGIFPopです。アニメーションGIFを手軽にリサイズできます。## GIFPopの使い...
geotiff.js - Web/nodeでTIFFを扱う
画像には多彩なフォーマットがありますが、それでもWebブラウザ上で扱われるものは多くありません。JPEG/PNG/GIFくらいではないでしょうか。そんな中、目にする機会の多いフォーマットとしてTIFFがあります。TIFFはタグ情報を持ったビットマップ画像フォーマットです。そんなTIFFをWeb上で扱えるのがgeotif...
qlImageSize - QuickLookで画像のサイズを表示 & WebP/BPGをサポート
QuickLookで画像を表示するのは便利なのですが、画像サイズが分かりづらいのが難点でした。大きな画像でも最適化して表示する一方、小さな画像もそれなりの表示になります。そして画像編集ソフトウェアで表示してがっくりするのです。そんな経験がある方はqlImageSizeを使ってみましょう。QuickLookのタイトルに画...
Isolate - 写真をPinterest風に表示
撮りためた写真を見るのに、一枚一枚見てもいいですが、大量にあると時間がいくらあっても足りません。一覧でざざっと眺めたいと思うこともあるはずです。しかし、せっかくの写真が画一的に整列して表示されるのは何となく味気ないですよね。そこで使ってみたいのがIsolateです。ディレクトリにある写真を読み込んでPiterest風に...
Crunch - PNG画像のサイズを大幅に軽減
PNGは可逆な暗号化が可能で、BMPに比べて大幅に小さくできます。しかし、多くのアプリケーションが作成するPNGファイルが圧縮などは行われず、サイズも大きいものです。Webサイトなどでそのまま使ってしまうと転送量が増えてしまいます。そこで使いたいのがCrunchです。PNG画像ファイルをドラッグ&ドロップするだけでサイ...
blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ
一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...
View Background Image - 背景画像だけを表示させるChrome機能拡張
Google Chromeを使っていて、表示されている画像を保存したいと思うことがあります。そんな時にCSSのbackground-imageとして指定されていたりするとコンテクストメニューから指定できません。開発者ツールのリソースから探すのは面倒です。そこで使ってみたいのがView Background Imageで...
Gifski - 動画を高品質なアニメーションGIFに変換
最近アニメーションGIFを使う機会が増えています。再生を繰り返してくれるのも良いですし、ハイライト部分だけ使うならサイズも小さくて済みます。その大元になるデータは大抵動画になります。今回紹介するGifskiは動画をアニメーションGIFに変換してくれるソフトウェアです。クオリティが高いのが特徴です。## Gifskiの使...
View Image - Google画像検索でなくなった画像表示をブックマークレットで再現
Google画像検索が方針を変更し、画像を直接表示できなくなりました。恐らくコンテンツホルダーに気遣ったのだと思いますが、利用者としては画像に素早くアクセスしたいと考えるはずです。そこで使ってみたいのがView Imageです。フルサイズ画像へアクセスできるブックマークレットになります。## View Imageの使い...
Polacode - コードを画像化するVisual Studio Code機能拡張
コードをブログに載せたいと思ったのに、ブログエンジンがコードのハイライトに対応していない…なんてケースがあります。Gistに貼り付けても、それが埋め込みもできず、泣く泣く変な表示で載せてしまうこともあります。そこで使ってみたいのがPolacodeです。コードを画像に変換してくれるVisual Studio Code機能...
pngquant - PNGをコマンドで最適化
PNGはWebでごく一般的に使われるファイルフォーマットになっています。しかし多く使われている割にサイズが大きいのが難点です。圧縮率を変えたりするとサイズは減るのですが、あまりそういった面倒な操作は行われないようです。そこで使ってみたいのがpngquantです。コマンド一つでまとめてPNG画像を圧縮できます。## pn...
LayerX - 半透明な画像をデスクトップに表示
シンプルなソフトウェアはできることは少ないですが、ピンポイントで刺さるときにはとても便利です。例えばスクリーンキャストで同じロゴを常に表示したいといった時にはどうしたらいいでしょうか。そんな時に使ってみて欲しいのがLayerXです。透明度やサイズを含めて細かくカスタマイズできます。## LayerXの使い方デスクトップ...
STYLE2PAINTS - AIによるイラストの自動彩色
ディープラーニングや人工知能によって、これまでのアルゴリズムベースの機械処理から、学習効果を活かした処理ができるようになっています。その結果、人が判断することなく、機械がベストと思われる判断によって処理できるようになります。今回紹介するSTYLE2PAINTSは線画の色づけをAIによって自動化する、そんなすごいソフトウ...
Instagram.css - CSSによるInstagram風フィルタ
Instagramは今なお高い人気を誇るサービスです。昨年にしてもインスタ映えという新しいキーワードを生み出しており、多くの方が利用しています。その人気の一つが簡単に見栄えのする写真に変身させられるフィルタ機能でしょう。そんなInstagramのフィルタ機能をWebベース、CSSで再現するのがInstagram.css...
WebPonize - 任意の画像をWebPフォーマットに変換
WebPはまだまだ一般化しない画像フォーマットですが、Googleが推しているだけあって注目度は高いです。画像サイズも大幅に軽減されるので、使ってみたいと思っている方は多いでしょう。そんなWebP画像を簡単に作成できるのがWebPonizeです。既存の画像をドロップするだけでWebPに変換できます。## WebPoni...