web上で使用するアニメーションは、楽をしてgifで作成していたのですがapingがかなり使えるという記事を発見し、早速使用してみた。 gifは輪郭がなめらかにならなかったり、透過に難ありだったり(アルファチャンネルがサポートされていない?)、色数に制限があったりするため、実際に使用する際はある程度の画質劣化を覚悟した上で使用していたのだが、そういった枷をぶちとばして使用できるのがapngである。 LINEスタンプでもアニメーションのあるものが出ているが、これらもapng形式にて作成されているらしい。 ということで実際に使用してみるとおどろき、データサイズも軽いので今後はapngでいくしかねえ〜と思った。 が、safariで動作チェックをしてみると「画像の色が時たま反転する・色がおかしくなる」という不具合が…。 同様の事象がないかと検索をかけてみたが、特に困っている方のページは出てこず。
APNG(エーピング)とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい人 コードを書くテクニックを知りたい人 VsCodeチートシート はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。 VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカット
はじめに 今回は今まで自分が受講してきたUdemy講座の中で良かった講座を厳選してまとめました。 自分は新しい技術を学ぶ時はUdemyを中心に基礎をインプットし、何かしらの制作物を作って学んだ知識をアウトプットするように学習をしています。 そのためUdemy講座を選ぶ際は、基礎から網羅的に学べるものを受講するようにしています。 今回は自分が実務でも担当している「Web制作系」「フロントエンド系」「サーバーサイド系」で実際に受講して学びになった講座を解説も加えて紹介します。 今回紹介する講座は下記です。 1. ちゃんと学ぶ、HTML+CSS & JavaScript入門講座 2 .【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践 (Web制作) 3. CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 (Web制作) 4. WordPress開発
初めてAPNGを使用したときに起きたバグ?に対応した備忘録です。 APNGとは Animated Portable Network Graphicsの略でアニメーションするPNG画像のこと。 Mozillaによって最初に導入されたファイル形式で、 PNG規格を拡張してアニメーション画像の対応を追加された。 アニメーションGIFと比べて、色数の制限や輪郭のジャギーなど品質面の制限が少ない。 APNGのサポート環境 2022/3月 現在 ほとんどのブラウザでサポートがされてきましたが、IEなどでは使用できません。 実際に起きた現象 APNGを使用してみるとSafariで問題が起きました。 サイトにアクセスした1回目は正常にアニメーションしますが、2回目以降やリロード時にアニメーションが発生しませんでした。 スーパーリロードすれば動いた時もありますが、一般ユーザにスーパーリロードをお願いするわけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く