メディア - 画像の記事一覧
imgpush - オープンソースの画像共有サーバ
ImgurやGyazoなど画像アップロードサイトは多数あります。そうしたサイトを使うことで友人やコミュニティサイトなどで画像共有を簡単に行えますが、コンテンツの公開制限をはじめ、自分で制御できないことに不安を感じる人もいるでしょう。そこで使ってみたいのがimgpushです。画像を簡単にアップロードできるサーバを手軽に設...
photoEditor - Web上で簡易的な画像編集
ユーザに画像をアップロードしてもらう機能はよくありますが、そのままでは使いづらいことが良くあります。例えばサイズが大きすぎたり、回転してしまっていたりといった具合です。そんな時に簡易編集機能を提供できるのがphotoEditorです。## photoEditorの使い方写真を開いたところ。この状態では、まだサーバに送信...
gosimimg - 画像が似ているかチェック
Googleでは検索した際に「もしかして」と出ることがあります。多少の打ち間違いであったり、文字が繋がっていても良い感じに分割して検索してくれます。しかしバイナリデータの場合はそう簡単ではありません。今回紹介するgosimimgは画像同士が似ているかどうかを判別してくれるソフトウェアになります。## gosimimgの...
OpenMo - どこでも使えるオープンな絵文字
絵文字は様々なサービス、アプリで使われるようになっています。AppleやAndroid、Slack、Facebook、Twitterなどが各社独自の絵文字を作っており、完全に統一されている訳ではありません。また、それらは各サービスのものであり、自由に使える訳ではありません（Twitterの絵文字はオープンソースです）。...
COCO Annotator - 機械学習用に画像のタグ付け
機械学習で面倒なのは最初のデータセット作りでしょう。画像のタグ付けを行う場合、まずトレーニング用のデータをアノテーションしなければなりません。この結果によって精度が変わるのでしっかりやらないといけませんが、手間がかかります。そんなアノテーションを少しでも楽にしてくれるのがCOCO Annotatorです。## COCO...
glfx.js - JavaScriptで画像を加工
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。そこで使ってみたいのがglfx.jsです。JavaScriptを使...
kromo - 画像にレンズぼけ、色収差加工を施す
写真を撮影したそのまま使うのではなく、ちょっとした加工をするだけで全く見え方が変わったりします。しかし慣れていないと、ちょっとした加工でも時間がかかってしまいます。加工法の多くはパターン化されており、それであれば自動化もできるはずです。今回紹介するkromoは画像にレンズぼけ、色収差といった加工を施すソフトウェアです。...
Audio GIF - 無茶しおる…アニメーションGIFに音声を埋め込む
アニメーションGIFの良いところは何でしょう。動画とは異なり、同じ場面を繰り返してくれること、音声がないことが挙げられます。制約も多いので、利用場面も異なってきます。しかし、技術の力で乗り越えられる壁もあるのです。それがAudio GIFです。その名の通り、アニメーションGIFの中に音声を詰め込むという無茶なソフトウェ...
ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント
ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。そんなケン・バーンズ効果を手軽に実現できるWeb...
Medium Zoom - Medium風に画像をズーム
Mediumは人にとって読みやすい、使いやすいUI/UXにこだわっています。様々な工夫がされており、それははっきりと分かるものもあれば、細かすぎて気付かないものもあるでしょう。しかしそういった細部にこそ神が宿るものです。今回紹介するMedium Zoomは画像のズーム表示をMediumライクに表現してくれるライブラリで...
JS Cloudimage 360 View - 自由に360度させられる商品ビューワー
正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成しま...
Guetzli.js - Webブラウザ上でJPEGエンコーディング
デジカメやスマートフォンの普及によってデジタル画像コンテンツが爆発的に増えています。さらに、その画質は年々向上しており、サイズも肥大化しています。撮った写真をそのまま載せると数十MBあるということも少なくありません。そこで必要なのがリサイズであったり品質を変更した画像サイズの縮小処理です。今回はJavaScript/W...
Resemble.js - JavaScriptで画像の解析/比較
画像はテキスト以上に情報量が多いコンテンツです。テキストが細かく説明するよりも、写真を見た方が伝わるケースはとても多いです。そのためオンライン上には写真コンテンツが無数に存在します。そんな画像コンテンツをより深く楽しむのに使えるライブラリがResemble.jsです。Web上で画像を解析できます。## Resemble...
vr360 - Webベースの360度VRビューワー
ARやVRに注目が集まっています。Nintendo SwitchでもVRが実現できるようになり、さらにコンテンツの拡充が望まれるでしょう。そしてWebにはWebVRという標準技術も用意されています。今回紹介するvr360は360度のVRビューワーを簡単に作成できるソフトウェアです。## vr360の使い方デモです。デス...
corrupter - CLIでグリッチ画像を生成
グリッチは特定の層に人気の高い画像処理です。グリッチされて乱れた画像は昔のコンピュータ上で起きたエラー画像のようで、または古い写真を連想させる雰囲気があります。今ではなかなか発生しないために、敢えてグリッチされた画像を作るのが面白いです。今回紹介するのはcorrupterです。コマンド一つでグリッチ画像を生成します。#...
gombine - 画像を縦または横に連結
Twitterなどでは一つのツイートに対して貼れる画像の数に制限があります。そこで複数の画像を連結したりする技が使われます。しかし、そのために画像編集ソフトウェアを立ち上げるのは面倒です。そこで使ってみたいのがgombineです。コマンド一つで画像をつなげてくれます。## gombineの使い方縦に連結した版。!
ArchiveBox - Webコンテンツをアーカイブ
オンライン上には二種類の情報が存在します。一つは未知の情報、一つは既知の情報です。未知の情報を探す際にはWeb検索が便利なのですが、既知の情報は意外とうまく探せません。一度見た情報がフィルタになってしまい、キーワードがうまく出てこなかったり間違ったりしてしまいます。そこで既知の情報をローカルにバックアップしておくと便利...
Epitactic Cloud Browser - クラウド上にあるWebブラウザ
スマートフォンやタブレットでもPC版のWebブラウジングが必要な場面があります。そんな時、便利なのがクラウド上にあるWebブラウザです。しかしHTMLをそのまま返してしまったのでは意味がありません。そこで使ってみたいのがEpitactic Cloud Browserです。クラウドブラウザの名に恥じない動きをしてくれます...
gif2xlsx - アニメーションGIFをExcel化
訳分かんねぇ…。アニメーションGIFが好きな方、大勢いますよね。そしてExcelが好きな方もきっとたくさんいるはず。つまりその両方が好きな方達も多い訳です。だからこの二つが一緒に楽しみたいという方も少なくないはずです（？）。そんな方に使ってみて欲しいのがgif2xlsxです。アニメーションGIFをExcelにしてくれる...
marker.js - Web上の画像に注釈を追加
写真にマーカーを付けたり、注釈を入れたいと思うことがあるでしょう。通常は画像編集ソフトウェアを使って行います。Webブラウザからであれば一度画像をダウンロードした後、編集しなければならず面倒です。そこで使ってみたいのがmarker.jsです。Webブラウザ上から手軽に画像への注釈追加が可能です。## marker.js...