Gyazoが配信する画像にContent-DPRヘッダーを付与するようになりました

Gyazoが配信するスクリーンショット画像にContent-DPR ヘッダーを付与するようにする変更を先日行いました。新しくアップロードされた画像に関しては一律でこのHTTPヘッダーが付与されるようになっています。

% curl -I https://i.gyazo.com/a113d75559f81cfbdddfec35354b78b0.png | grep content
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0  106k    0     0    0     0      0      0 --:--:--  0:00:03 --:--:--     0
content-type: image/png
content-length: 108629
content-dpr: 2.0

この記事では今回Gyazoで配信する画像に付与することにした Content-DPR ヘッダーについて紹介します。

(この記事で紹介する情報は記事公開時のものです。)

Content-DPRヘッダーについて

Content-DPRヘッダーはHTTP Client Hintsの1つとして仕様のEditor's Draftが書かれていたものです(先日の第7版HTTP Client Hintから削除されHTMLの仕様に含める方向で進められています)。その名の通り配信するコンテンツのDPR(Device Pixel Ratio)をクライアントに対して通知することが出来るヘッダーになります。

これまで画像をHTML内に含めて表示する際には画像自体のDPRについては考慮されずに表示が行われてきました。例えば、Retinaディスプレイで撮影されたスクリーンショットをHTMLに埋め込んで表示する時には縦横それぞれ2倍のサイズで表示されてしまいます。もちろんGyazoにアップロードしたスクリーンショットも同様でした。

この問題を解決するものがContent-DPRヘッダーです。Content-DPRヘッダーが付与されている画像はブラウザ等のクライアントが対応していれば表示時にコンテンツのDPRをヘッダーから取得し、表示時のサイズの決定等に利用してくれるということが期待されています。実際に対応しているChromeでは、Content-DPRヘッダーが考慮され、naturalWidthnaturalHeightが計算され、表示時に利用されています。

以下にサンプルを提示します。現状ではGoogle Chromeのみが対応済みですので、Google Chromeで御覧ください。

before ( Content-DPR ヘッダーなし)


after ( Content-DPR ヘッダーあり)


Gyazoでの導入について

Gyazoはスクリーンショットを主として扱う画像サービスです。最近においてはMacのRetinaディスプレイに代表されるようなDPRが1より大きい環境でスクリーンショットを撮影されるユーザーさんが多くいらっしゃることを我々は認識していました。そして、それらの画像が皆さんの画面上で意図せず大きく表示されるということをなんとか回避できないかと考えてきました。そのために画像のアップロード時にDPRを付与し、Gyazo上の画像ページでの表示時にはその値を考慮し画像の表示サイズをコントロールするという処理を提供してきました。

ですが、Gyazoにアップロードされた画像はGyazo上での表示に留まらず、(GyazoのようにスクリーンショットのDPRを知ることが出来ず、画像を適切なサイズに縮小表示する術を持たない)Scrapboxや様々なウェブサイト、ブログやチャットなどの上で画像そのものが展開され閲覧されることが多くあります*1。このContent-DPRヘッダーはクライアントにDPRを伝えることができ、またクライアントが適切な大きさで表示をしてくれるというものです。Gyazoの配信する画像にこのヘッダーを付与することはGyazoを利用しているユーザーの皆さんが自由にスクリーンショットを貼ったり、またそれを閲覧することを助けてくれると大いに期待しています。

参考

*1:このような場合でも画像ページのシェアメニューよりコピーできるHTMLを利用することでDPRを考慮したスタイルを適用できるようになっています

リンクを踏まなくてもOK!GyazoのSNSシェアを快適に使う方法

TwitterなどでGyazoでスクリーンショットした画像についてこんなことが書かれていました。
「Gyazoはリンクを踏まないと画像が全部見れないので困る」
「GyazoをTwitterで見るのがめんどくさい…」

Gyazoにはたくさんの便利機能があるので、周りの人にもこの便利さをわかってもらいたいのにどうすれば…?と思ったみなさん。
Gyazoは「SNS連携」を利用することで、それらをすべて解決します!!

Twitter連携だとこんな感じです。

https://gyazo.com/settingsからもTwitter連携の設定ができます。

この手順で、投稿したいアカウントと紐付けしておくと、リンクを踏まなくても画像が見れるし、画像も全部見ることができます。  SNSに快適に投稿できて、スクリーンショットした画像は全部Gyazoに保存されるのでスクショした画像がデスクトップにいっぱいあって散らかっている…ということもありません!便利ですね!

そんなシェア機能に新機能が出ました

Gyazoではredditという英語圏で主に利用されているソーシャルブックマークサイトへのシェアボタンを追加しました。先ほどの画像にも出てきた、これです! gyazo.com

redditシェア以外のSNS連携もこれから増やして行く予定です。SNSシェアを快適にできるようにどんどん改良をしてきますので、どうぞご期待ください!

Gyazoを使って画像管理を便利にしましょう!(新機能のお知らせつき)

https://gyazo.com/capture に検索という窓があるのをご存知でしょうか。

gyazo.com

この検索機能は、過去にGyazoでスクリーンショットをとった画像を検索することができる機能です。

タイトルとか名前とかつけてないのにどうやって検索できるの!?

GyazoにはOCRスキャン機能があり、アップロードした画像の文字を、テキストとして読み取ることができます。

過去にスクショした気がする…と思って検索したいとき、そこに書かれているであろう文字を入力すると検索できます!便利ですね! もちろん、画像の属性(アプリケーション名、キャプチャ元のURL、アップロード日時)でも検索できるので、このアプリを使っている時に撮ったスクリーンショットなんだよな…ということさえわかれば検索できます!

※検索機能については詳しくはこちらもご覧ください!

そんな検索機能に最近登場した機能がこちら

gyazo.com 一括選択が可能になりました!この機能は、ユーザーからのお声がとても多かった機能です。

一括選択が可能になったので、過去に撮った画像が整理したくなったら、新しいカテゴリを作成→この機能を使って一括選択して移動がとても素早くできます! また、画像を消したい時なんかにも便利ですね。

Gyazoで画像管理を便利にやってみたくなった人向け情報

gyazo.com

画像の検索機能はGyazo Proでご利用いただけます。検索機能以外にもたくさんの機能があるので、是非利用してみてください!

Gyazo新機能リリース第2弾!フォント選択機能を追加しました

スクリーンショットした画像に、文字を入れられたらもっとわかりやすく相手に伝わるのに…と思ったことはありませんか? Gyazoならそれがお手軽にできちゃいます!

このように、文字の大きさや色を変更できたりするので、元の画像に合わせた文字入れが可能です。便利ですね!

さて、今回の新機能はこの文字に関する新機能、フォント選択が可能になりました!!!

フォント選択が可能になったことで、時には楽しい雰囲気で、時には真面目な雰囲気でメッセージを伝えられますね!

選択できるフォント一覧

  • Impact
  • Avenir Next
  • Verdana
  • HG創英角ポップ体
  • ヒラギノ角ゴシック StdN
  • 游ゴシック(Windowsのみ)

デフォルトはArialです。上記のフォントがユーザーの環境にインストールされている場合のみ利用することが出来ます。 利用にあたっては環境にインストールされているフォントのライセンスに従ってください。

フォント選択をしてみたくなった人向け情報

こちらの機能はGyazo Proに加入されている方のみご利用できます。 Gyazo Proには、スクリーンショットした画像に文字を入力できるほか、モザイクをかけたれたり矢印を入れられたり、様々なドロー機能があります。 Gyazoをより便利に、より楽しく活用してみてください!

gyazo.com

現在選択可能なフォント以外でもこのフォントを使いたい!というご要望がございましたら、コメントやツイートをしていただけると嬉しいです!

 Gyazo 新機能リリース!シークバーとフルスクリーンボタンを追加しました

Gyazo開発チームは2019年を新機能リリース強化年として、いつもご利用のみなさまがより便利に、より楽しくGyazoを利用できるためのたくさんの新機能をリリースしていきます!

その第一弾としてGyazo GIFにシークバーとフルスクリーンボタンを追加しました!

gyazo.com

動画の好きなところへすぐにジャンプしたり、好きなところで一時停止したり…とお気に入りの場面がより確認しやすくなりました!フルスクリーン再生も可能になったので、より詳細に撮影したGIF動画を確認できるのも嬉しいですね。

新機能をより便利に使ってみたいと思ったみなさま向け情報

Gyazo Proの場合は無料版より長い60秒の動画を撮影・投稿でき、よりシークバーが便利に活用できます。Gyazo Proには、テキストや矢印、ぼかしやスタンプによる編集やパスワードによる画像の保護ができたりなど様々な機能があります。Gyazoを利用されたことのある方もそうでない方もこの機会にぜひGyazo Proを使ってみてください! gyazo.com

それでは、次の新機能をお楽しみに!!

Gyazoはe-Sportsチームの支援を積極的に行います

gyazo.com

スクリーンショット撮影・共有ツール「Gyazo」はサービスの無償提供等で支援するe-Sportsチームの公募を開始いたします。 昨年度よりプロゲームチーム「Pro esports team Next Generation(PNG)」の公式スポンサーとなり支援を行ってまいりましたが、今後より多くの方にGyazoを知っていただき利用していただくことで、e-Sportsの発展と活性化を支援していきたいと考えております。

プロゲームチーム「Pro esports team Next Generation(PNG)」の公式スポンサーに関する発表は下記をご覧ください。

blogja.gyazo.com

支援の背景

現在、Gyazoは世界中で利用されており、中でもゲームに関するスクリーンショットは多く撮影されています。そのような背景からGyazo開発チームといたしましては、今後ゲーマーの方により使いやすく、充実した機能を追加していく予定です。そういった中で、近年、世界中で人気と認知度が高まっているe-Sportsのチームの支援としてチームの皆様にサービスを利用いただくことは、Gyazoを知らない方にも知っていただく機会になると思います。そしてより多くのフィードバックをいただき、さらなるサービス向上を目指していきたいと考えております。

主な支援内容

  • Gyazo Proの無償提供

※Gyazo Proについてはこちらをご覧ください。

  • コラボグッズの作成
  • イベント開催での支援

※支援内容については、定期的に見直す可能性があります。

応募条件

  • e-Sportsチームとしての活動実績があること

 応募方法

下記のGoogleフォームよりご応募ください。 内容を確認させていただきたのち、審査させていただきます。

goo.gl

e-Sports支援に関してのご質問はお気軽にpr@notainc.comへ送ってください。よろしくお願いします!

キャプチャした画像に絵文字や好きな画像を貼ってみよう

Gyazoを使えば、高速でスクリーンショットを撮影し、あとから画像を簡単に見つけ出せますが、相手にメッセージを伝えるにはどこか物足りません。

Gyazo Proを使えば、キャプチャした画像をブラウザ上で簡単に編集できます。

絵文字ステッカーの使い方

  • 編集したい画像を https://gyazo.com/captures から選びます。
  • 編集アイコンをクリックし、絵文字のアイコンをクリック。
  • 好きな絵文字ステッカーを選び、キャプチャした画像の上にドラックアンドドロップで置いてみましょう。
  • あなたが過去にGyazoにアップした画像も絵文字ステッカーのように使うことができます。
  • サイズを調整して保存ボタンを押せば完了。元の画像も残るので安心です。

小さいステッカー、大きなインパクト😎

  • もしあたながブランディングに力を入れたいと思っているなら、ぜひあなたのオリジナルのステッカーを貼ってメッセージを発信しましょう。
  • キャプチャした画像に自分の感情を載せたいときは、絵文字ステッカーをつけるのがおすすめですよ。

わかりやすさや、プライバシー保護にも

  • 要点をわかりやすく伝えたい場合は、矢印や図形を追加したり、矢印を挿入してみましょう。
  • また、共有したいキャプチャの中にセンシティブな内容はある場合は、モザイク機能を使ってぼかすことも可能です。

過去にキャプチャした画像に無限にアクセスしたり、ブラウザ上で簡単に画像を編集したい場合はぜひGyazo Proをお試しください。既にProをご利用いただいていて、まだ編集機能を使ったことがない場合は、ぜひこの機会にご利用ください。