はてなブックマーク

APNGとは？ APNG(エーピング)とはアニメーションするPNG画像のことです。もともとブラウザベンダーのMozillaが提案した規格で、Webサイトでのアニメーション表現に利用できます。従来よりアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなどクオリティ面で悩ましいところが多々あります。その悩みを払拭してくれると期待されるのがAPNG形式です。 最近では、LINEのアニメーションスタンプ(うごスタ)にも使われています。 APNGの詳細はICS MEDIAにて解説してますのでご覧ください。 GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 APNGファイルの作成に必要なものはPNGの連番画像 APNGファイルの作成には、次のようなアニメーションの

拡張機能でWebページのスクリーンショットをとると 今まではChromeの拡張機能を使ってWebページのスクリーンショットをとっていたのですが、ウィンドウ内を全てまるっとキャプチャーされたり、使い勝手が悪かったりと悩みの種でした。そんな中で見つけたデベロッパーツールのキャプチャー機能が個人的にしっくりきたので紹介します。 しっくりきたポイント 拡張機能をインストールしないでいい ウィンドウサイズを細かく設定できる おしいポイント キャプチャーが1クリックでとれない WebページのスクリーンショットをとるCapture screenshot スクリーンショットをとりたいWebページを開いてデベロッパーツールを起動します。 Webページのウィンドウサイズを細かく設定できるようにデバイスツールバーを表示します。デバイスツールバーはデベロッパーツール左上のアイコンをクリックすると表示されます。 Q

ウェブサイトのコーディングはデザイン・アニメーションなど気をつけるべきポイントはたくさんありますが、特にスマートフォンサイトのコーディングには実機の回線速度を意識することが大切です。 読み込みが遅いウェブサイトなんて待ってられないですよね 普段はオフィスの光回線&Wi-Fiを使用したり、ローカルにサーバーを立ててコーディングしている方も多いと思います。読み込みも一瞬で終わって、なかなか読み込み時間を再現しづらいと思います。今回はChromeのデベロッパーツールを使って擬似的に実機の回線速度を再現する方法を紹介したいと思います。 1. 実機の回線速度を計測する まず、実機の回線速度を計測アプリで計測します。SPEEDTESTはAndroid、iOSともにリリースされているのでおすすめです。 実際に手元の端末（Xperia Z5 Premium）とSIM（IIJmio）で計測しました。ダウンロ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

各設定項目について調べてみました ざっとググッてまとめてみました。不備がありましたらコメントにてご指摘いただけると嬉しいです マイコンボード ESP8266をどの状態で使用するのかを指定します。ESP8266に直接スケッチを書き込む場合はGeneric ESP8266 Moduleを選択します。 Flash Mode Flashメモリにデータを書き込むモードを選択します。DIO：Dual I/OでQIO：Quad I/Oのようです(参考記事「What is the difference between QIO and DIO flash mode?」)。名前の通りQuadがDualより速いのでQIOを選択します。 Flash Frequency フラッシュメモリの動作周波数です。80MHzを選択します。 Upload Using スケッチの書き込み方式です。USBで書き込むのでSerial

スイッチサイエンス製 ESP-WROOM-02 Arduino互換ボード スイッチサイエンスからESP-WROOM-02 Arduino互換ボードが発売されました。今まではESP-WROOM-02(ESP8266)をArduinoのスケッチを書き込んで使うためには、モジュールをはんだ付けしてブレッドボード上で使用したりと少々使いづらい部分がありました。それをこの互換ボードが解消してくれます ESP-WROOM-02 Arduino互換ボード ESP8266 Arduino CoreでHTTP通信をサクッとやってしまおう **Arduino IDEでESP8266の開発を行うときに使うライブラリESP8266 Arduino Coreには、HTTP通信にかぎらず便利な機能が用意されています。**Arduino IDEのメニューから[ファイル]→[スケッチの例]にESP8266関連のサンプルが

スイッチサイエンス製 ESP-WROOM-02 Arduino互換ボード スイッチサイエンスからESP-WROOM-02 Arduino互換ボードが発売されました。今まではESP-WROOM-02(ESP8266)をArduinoのスケッチを書き込んで使うためには、モジュールをはんだ付けしてブレッドボード上で使用したりと少々使いづらい部分がありました。それをこの互換ボードが解消してくれます ESP-WROOM-02 Arduino互換ボード ※欲しくなるポイントをこちらの記事「ついにESP-WROOM-02のArduino互換ボードが発売！ 欲しくなるポイントまとめ」にてまとめました。ほしい！ Arduino互換ボードのGPIOの配置図 Arduino IDEでスケッチを書いてる際に、pinMode()でピンのモードを指定したりdigitalRead()で入力値を読み取ったりします。そのと

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

素材が小さい、、、 手元にある画像素材が小さすぎる、、、 スマホ対応で動画の圧縮率をあげないと、、、 という場面は日常茶飯事かと思います。そして無理やり引き延ばすとモワモワに荒れてしまう、、、 素材 2倍に拡大 ひどいもんですね。。 網点を上から重ねてみると 下のような網点画像を作って先ほどの画像に重ねてみます。 説明のために32倍に拡大してキャプチャしてます。実際は1マス1pxです。 よこしま 重ねると ちょっと粗さが目立たなくなりました。画像のトーンも全体的に暗くなっちゃいましたが、Coolになりました。 ななめ 重ねると 先ほどよりも2倍の大きさの網点なのでその分明るくなりました。 動画にも使えます Webコンテンツで背景に動画を埋め込んでいるものもよく見かけます。ですが、そのようなコンテンツはウィンドウサイズによって動画を拡縮してしまうためどうしても荒くなってしまいます。 そういう

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?