メディア - 画像の記事一覧
Brunsli - 次世代JPEG、JPEG XL生成ライブラリ
Web上で写真を表示する際のフォーマットとして、今はJPEGが主流です。GoogleはWebP、AppleはHEICフォーマットを次世代のものとして使っていますが、ベンダーロックのせいか、デファクトにはなっていません。そんな中、JPEGから22%ほどロスレスで圧縮できるフォーマットとしてJPEG XLが登場しています。...
Diagrams - システム構成図をコードで書く
開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。#...
Full Page Screen Capture - Webページ全体のスクリーンショットを撮影
スクリーンショットで保存できるのは今見ている情報に限られます。Webページの場合、縦長なことが多いので、見えていない部分も含めてスクリーンショットを撮りたいと思うでしょう。そういったソフトウェアもたくさんあります。今回紹介するFull Page Screen CaptureはGoogle Chrome用の機能拡張として...
KleeneStar - SwiftUI製の4chan画像ビューワー
SwiftUIによって、アプリの作り方が大きく変わっています。ゲームなどには向かないでしょうが、ユーティリティアプリであればSwiftUIを使うのが今後のトレンドになるでしょう。今回紹介するKleeneStarはSwiftUIの使い方について学ぶのにぴったりなプロジェクトです。4ちゃんねる画像ビューワーであり、機能もシ...
WASM-ImageMagick - ImageMagickをWebAssemblyでWebアプリから使いやすく
様々なローカルアプリケーションがWeb化していますが、JavaScriptの実行速度はネイティブアプリケーションに比べて劣ってしまいます。しかしWebAssemblyを用いることで大幅に改善できます。今回紹介するWASM-ImageMagickは名前の通り、ImageMagickをWebAssembly化したソフトウェ...
Compressor.js - Web上で画像を圧縮
スマートフォンやデジカメが高性能化し、作成される写真のサイズがどんどん大きくなっています。数MBで済めばいいほうで、場合によっては10MBを超える場合もあるでしょう。そうした写真を受け取る側のサービスもネットワークが逼迫してしまいます。そこで使ってみたいのがCompressor.jsです。画像をJavaScriptで圧...
ASCIIPlayer - 動画/アニメーションGIFをターミナルで楽しむ
ターミナルでも動画を見たいと思ったことはないでしょうか。私たちには画像をアスキーアート化するテクニックが昔から知られており、さらにASINカラーで色付けすれば、それなりに楽しめそうです。ASCIIPlayerはそんな夢を叶えてくれる動画プレイヤーです。ターミナル上でアニメーションGIFや動画を楽しめます。## ASCI...
CoreUI Icons - 1,500種類を超える多彩なアイコン集
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます...
EscherSketch - タイル状のシンメトリーデザインを簡単に作成
あるパターンを繰り返すシンメトリーデザインは万華鏡などでよく知られています。折り紙を折って、ハサミで切ったりして遊んだ経験がある人も多いでしょう。繰り返すことで新しい魅力が引き出されるのは面白いです。今回紹介するEscherSketchはWeb上でシンメトリーデザインを描けるソフトウェアです。## EscherSket...
linedraw - 画像をSVGに変換
画像を変換する類のソフトウェアは多数あります。例えばアスキーアートに変換したり、グレースケールにする、油絵風にするなど様々です。手法を知っておけば、目的に応じてぴったりなソフトウェアが選べるはずです。今回紹介するlinedrawは画像をSVGにしてくれるソフトウェアです。他では見られないものだけに知っておくと役立ちそう...
Gazo-san - OpenCVを使った画像差分ソフトウェア
開発者であればテキストの差分表示にはお世話になることが多いでしょう。そして同様に画像も扱うことの多いコンテンツです。デザイナーの方であれば画像の変更前と変更後で見比べたい方もいるでしょう。そこで使ってみたいのがGazo-sanです。単純なピクセル単位での比較とは違う画像比較ソフトウェアになります。## Gazo-san...
familytreemaker - 記法に従って家系図を生成
家系図的な表示を使いたい時がたまにあります。組織図であったり、システムのアーキテクチャ、クラス図などでも使えます。そのために専用のソフトウェアを使うのは面倒で、後々のメンテナンスも考えるとプレゼンソフトウェアなどで簡易的に作ってしまったりします。そんなあなたのためのソフトウェアがfamilytreemakerです。記法...
unDraw - 自由に使えるフラットなイラストをダウンロード
最近、海外のWebサイトを見ると、フラットな人やオブジェクトを使ったイラストがよく使われています。日本であればいらすとやと同レベルかというくらい使われています。そんな雰囲気のイラストがSVGで無償公開されています。それがunDrawです。## unDrawの使い方こういう雰囲気、見ますよね。!
Branded QR Ccode - 任意のロゴを載せたQRコードを生成
QRコードは世界中で使われています。特にスマートフォンが登場して以降、その利用範囲が拡大しているように感じます。仕様として多少汚れていても使えるようになっており、エラー率も考慮して生成できます。そんな仕様を使うことで、QRコードの中に本来不要な情報も盛り込ませることができます。それがBranded QR Ccodeです...
tiv - ターミナル用画像ビューワー
ターミナル上でも画像を見たい、と思う機会はそう多くないと思いますが、そんな少ない機会の時に面倒なインストール作業はしたくないでしょう。普段から用意しておくと幸せになれるかも知れません。今回紹介するtivはターミナルでの画像表示ビューワーです。表示方法も様々に用意されています。## tivの使い方表示例です。!
p5.riso - 画像を懐かしさ溢れるリソグラフ風に加工
リソグラフというのは印刷方式の一つで、原版を作ることで高速な印刷ができます。色数を押さえることで高速印刷可能で、新聞の折り込みチラシにあるような風合いの印刷が可能です。そんなリソグラフをWeb上で再現してくれるのがp5.risoです。懐かしい風合いの表現になります。## p5.risoの使い方デモです。ちょっとかすれた...
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなけれ...
MEGAMOJI - Slack用のアニメーションする絵文字を作成
Slackでは絵文字をリアクションやメッセージに含めることができます。そして、それらの絵文字はカスタマイズが可能で、自作した絵文字をアップロードしている人も多いでしょう。今回紹介するMEGAMOJIはSlack用の絵文字を簡単に自作できるWebアプリケーションです。## MEGAMOJIの使い方テキスト、または画像をベ...
Tiler - 画像で画像を表現
風景の写真をモザイクで表現したり、小さな写真をちりばめて大きな写真を作ったりと、同じ素材でも表現の仕方を変えるだけで印象が大きく変わります。画像編集ソフトウェアでもそういった機能を持ったものがあります。今回紹介するTilerはPythonを使って、画像を画像で表現します。## Tilerの使い方元画像。!
webp-hero - WebP非対応ブラウザでも表示するpolyfill
WebPはGoogleがメインで開発を進めている画像フォーマットです。写真やイラストなど用途を区別せずに使えるフォーマットで、とてもサイズが小さく済むのが特徴です。しかし、対応しているブラウザが限られるのが難点です。そこで使ってみたいのがwebp-heroです。WebP非対応ブラウザでも表示可能にするpolyfillラ...