こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
※ ソースコードは 2020/11/20 時点の canary ブランチを参照しています。 Next.js 10 では next/image から提供されるコンポーネントを使用することで、開発者が特別に意識することなく画像を最適化することができるようになりました。リリースのタイミングで Next.js Conf が開催されていたこともあり、この機能は大きく話題になりました。 今回はコードを読みながら最適化の裏側を紐解いて next/image の理解を深めようと思います。 何を調べるのか 目的を持たずに読んでいると露頭に迷いそうなので、最初に何を調べるのか決めました。 今回は最適化の仕組みを紐解くことを目的として、コードを読みながら次の 2 つについて調べます。 最適化された画像の出し分け 画像最適化処理 結論 最適化された画像の出し分け img 要素の srcset 属性を利用して画面サ
Adobe Spark Postは、スマホでソーシャル投稿用の見出しを作れるアプリ。noteの見出しとかも、サクッと作れてオススメです。上の見出しもSPARKで作成しました。 とりあえずアプリを起動したら、色んなテンプレが一覧されるので、好みに合うもの選んで遊んでみると楽しい。 文字を流し込んだり、画像を変えたり、色を変えるだけで、それっぽいポスターやバナーを簡単に作れる。 noteの見出し画像も、テンプレサイズをFacebookサイズにするとぴったり（noteとFacebookの見出し画像は、同じサイズ）。 個人ユースや、企業だけでデザインチームを稼働できないときにはかなり便利。オススメです。
最近「どうやってスライドを作ってるの？」と聞かれる機会も増えてきたので，普段 Keynote を使っていて，特に意識しているポイントをベストプラクティスとしてまとめた．参考になれば！ Keynote Best Practice コーポレート・ロゴ モダンな「コーポレート・ロゴ」フォント無料ダウロード | 転職サイト情報のLOGOTYPE.JP Unsplash 背景画像を選ぶときは Unsplash を使っている．高解像度でクオリティも高く，様々なバリエーションの背景画像をダウンロードすることができて便利！ unsplash.com 脱 Azusa Azusa は本当に素晴らしく，僕も今まで何度も使わせてもらった．今もまだ勉強会に参加すると少なくとも1人は Azusa を使っているような気がする．ただし，個人的にはどの資料も似てしまうという点が気になっていて，Azusa の次のステップとし
だいぶお決まりな処理な気がするのでまとめてみる。 iOS8 からは Photos Framework という画像を扱うフレームワークがあり、これを利用していく。 UIImagePickerController を使えば、画像選択まではそれなりにうまくいくのだが、 S3 へアップロードとなるとそのファイルパスが必要になってきて、そのファイルパスをどうやってとってくればいいのかが難しいところ。 画像は特に、自前のサーバへアップロードするんじゃなくて、S3に直接アップロードしたほうが負荷的にも優しいし、マルチパートのPOSTを実装する必要もなくなるので、基本的には採用すべきだと思う。そのURLだけを自前サーバにポストすればいいだけにしよう。 画像をリサイズして色々なサイズの画像をS3に保存したいというようなケースも多くあると思う。その時は自前サーバのAPIで、アプリから渡したS3のURLにある画
広告のコンセプトを明確に伝えるために欠かせないビジュアルイメージ。 最近では、デザインの現場だけでなく、 営業や企画提案用のプレゼン資料においても、ビジュアル活用が広まっています。 テキストや数値がただ並んでいるだけのスライドが続くと、相手につまらない印象を与えるだけでなく 結局伝えたいことが曖昧（あいまい）になってしまうこともありますよね。 文字や数値をできるだけビジュアル化して分かりやすくすることで、 相手に強い印象を与え、コンセプトが伝わりやすくなります。 でも、いったいどんなビジュアルを選べば、 コンセプトが伝わりやすくなるの？と、誰もが疑問に思うはず。 そこで今回、ビジュアルの違う2パターンの広告を用意しました！ どっちが「コンセプトが一目で伝わるビジュアル」か、くらべてみましょう。 さあ、こんなシチュエーションのとき、 あなたならどちらのビジュアルを選びますか？ 1. 優秀な人
Gyazo、便利ですよね。大変便利なので、社内でプライベートなGyazoサーバを用意して使っている会社も多いと思います。 うちでもサーバのパフォーマンスは特に必要ないので社内に適当なVMを立てて運用していたのですが、数年単位で運用していると画像ファイルが増えていくためdiskをなんとかする必要に迫られました。 ここでどんどん増えるファイルはAmazon S3に逃がそう、という自然な発想に至るわけですが、Gyazoサーバアプリが投稿を受けたときにS3にアップロードするような改修をするのは年末の忙しい時期に面倒。楽したい。 ということで S3 と nginx を組み合わせていいかんじに運用できるようにしてみました。 Gyazoに限らず、 ローカルに書き込んだファイルをhttpで閲覧する 一度書き込まれたファイルには変更がない ファイルは消えないでどんどん増える ようなものには応用できると思いま
内容：「TinyPNG」は、PNGフォーマットの画像を圧縮できるオンラインツールだ。スマートフォンのスクリーンショットなどPNGフォーマットを用いた画像をドラッグ＆ドロップすれば、画質を極力保ったまま、ファイルサイズを約7割削減してくれる便利なサービスだ。 「TinyPNG」は、PNGフォーマットの画像を圧縮できるオンラインツールだ。スマートフォンのスクリーンショットなどPNGフォーマットを用いた画像をドラッグ＆ドロップすれば、画質を極力保ったまま、ファイルサイズを約7割削減してくれる便利なサービスだ。 使い方は簡単で、サイトのトップページに指定されているエリアに、PNGファイルをドラッグ＆ドロップするだけ。すぐさまアップロードおよび圧縮され、完了するとダウンロードのリンクが表示されるとともに、元のサイズに対してどの程度圧縮されたのかがパーセンテージで表示される。 中央上の指定されたエリア
思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。
The document describes TOFU (Tofu on the Fly), a system for dynamically generating and caching image thumbnails on Amazon S3. It works by installing an Apache module that generates thumbnails using ImageMagick when images are requested, then caches them on S3 for future requests. This avoids hitting application servers for every image and provides scalability. The document discusses the TOFU archi
チルト(ティルト)シフトという、カメラのレンズを操作して被写界深度を調整することで、まるでミニチュア模型を撮影したような写真にしてしまう技法を用いて撮影された、ヴァン・ゴッホの絵画。 マットな線の太いゴッホの画風とのミスマッチ感覚を楽しむことができるんだ。 Tilt-Shift Brings Van Gogh Back to Life The Harvest, 1888 Starry Night Over the Rhone, 1888 Sunset: Wheat Fields Near Arles, 1888 Landscape at Auvers after the Rain, 1890 Pont de Langlois, 1888 Wheat Field with Rising Sun, 1889 The Painter on His Way to Work, 1888 The Re
概要 ちょっと前に話題になったUNIQLO CALENDERの動画(以下UNIQLOの動画)と同じようなものが作れそうなので作ってみた。 サンプル UNIQLOの動画の特徴は端的に言うと以下の2点。 インターバル撮影した写真をつなげて、さらに再生時間を短くしている(微速度撮影) 写真はミニチュアを撮影した写真のよう見えるように、撮影されたか加工されている(Tilt Shift Fake) この2点を再現すればそれっぽいものになるはず。ということで以下解説。 微速度撮影 ちょっと前に話題になった微速度撮影の例 Nature Time Lapse 2 from mockmoon on Vimeo. 微速度撮影とは、雲がすごいスピードで流れていく動画とか、花が開く瞬間とか、蝉の脱皮とか、を現実より高速にみせる技術。 実際に見るには長時間が必要でしかも時間変化が少ないために変化がわかりにくいものの
レイヤー効果で 多彩な表現が可能 PictBearには画像を重ね合わせて写真と写真を合成したりカラーを変更したりできる、レイヤー機能が備わっています。レイヤー効果の組み合わせ方法を変えて使用すると、幅広い表現が可能になります。 レイヤー＆ レイヤー効果 レイヤーとは透明なシートのようなものです。 絵を描いたり写真を配置して重ね合わせることで簡単に合成加工ができます。 また、レイヤーに様々な効果を加えるレイヤー効果で表現の可能性がぐっと広がります。 充実の フィルタセット フィルタを利用すると画像に様々な効果を簡単に加えられます。 また、このフィルタを組み合わせることで、本格的な加工や編集が可能になります。 アルファ チャンネル アルファチャンネルに対応しているので、 透過画像や半透過画像の重ね合わせなどが表現できます。 ウェブ用の画像を作成する場合にも非常に便利です。
“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to
個人的なMagickWand for PHPのメモ。 画像をリサイズして小さなサムネイルを作る場合、ただリサイズしただけだとJpegのEXIFデータとかが残ってしまう。不要な場合、次の関数で削除できる。 MagickStripImage 画像のヘッダに含まれるプロファイル情報とコメントを除去 <?php $wand = NewMagickWand(); MagickReadImage($wand, 'foo.jpg'); MagickResizeImage($wand, 120, 90, MW_TriangleFilter, 1); MagickStripImage($wand); MagickWriteImage($wand, 'bar.jpg'); MagickRemoveImageProfiles 画像のヘッダに含まれるプロファイル情報を削除 <?php $wand = NewMag
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ＆保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
こんにちは、プチデンソーよしだです。 みなさんは、ホームページに使う画像(写真)の編集にはどんなソフトを使っていますか。 PhotoshopやFireworksなどの高機能なソフトは、使いこなせるようになればとても便利ですが、なかなか敷居が高いですよね。 そこで今回は、初心者にも優しい画像編集ソフトをいくつかご紹介します。 どれも、ひとつの機能に特化したシンプルな作りですので、気軽にお使いいただけるのではないでしょうか。 ● 画像のリサイズ(拡大・縮小)とトリミング(切り抜き) 「 デジカメール (Win・MacOSX・MacOS9) 」 (Click!) このソフトは以前モリさんがプチユーザーさんにオススメしてたもので、ご存知の方もいるかと思います。 保存時に選択できる画質が5段階とアバウトですが、リサイズとトリミングに関しては細かな設定が可能です。 最近のデジタルカメラは普通に撮って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
