リーディングビュー
Google Colab、AIファーストとなった新バージョンをすべてのユーザーに提供開始 ——ターミナル機能も開放
#02 今だから聞きたい「ダイバーシティ&インクルージョン」パネル、「遊び」の大切さを説くキーノート ーPyCon USカンファレンス2日目レポート
3DPでキューブパズルを自作してみる(1) ~構造の理解~
第868回 UbuntuでAMD Radeon RX 9060 XTを使用する
Linux Foundation、Agent2Agentプロジェクトを始動 ——GoogleがA2Aプロトコルを寄贈
本日(6/25)限り、国産ノーコードツール「Studio」の解説書「Studio Webサイト制作入門」が80%オフのワンコイン!
アニメーションPNGの作成
最終更新日 2026年1月17日

Webサイトでのアニメーション表現としてアニメーションPNGの作成をしてみることに・・
まず出来上がったものを… 24枚のPNG画像を10fpsでアニメーション化している。

稚拙な作品で申し訳ない感だが、ここではそのアニメーションPNGのひとつの制作手順を記述することが主な目的ということで、そのクオリティには触れない。
アニメーションPNGとは?
アニメーションPNG(APNG)はPNG画像をベースに開発されたグラデーションや透過処理も可能な形式。古くからWebサイトのアニメーション表現に利用されてきたGIFと比較すると、より滑らかできれいに表現できる形式です
制作手順
ここでは、APNGファイル(アニメーションPNGファイル)を書き出すためのフリーウェアである「APNG Assembler」を使用することに。
ツールをダウンロードする。

「APNG Assembler」のページから「Download APNG Assembler」のリンクをクリック。SOURCEFORGEのページへ遷移して「apngasm_gui-2.91-bin-win32.zip」がダウンロードされる。
連番画像の用意
アニメーションを作成するためのPNG画像を連番で用意する。ここでの作例では、24枚の連番画像(01.png~24.png)を用意した。
連番画像を読み込む
ダウンロードしたツール(ZIPファイル)を展開してファルダ内にある「apngasm_gui.exe」を起動して連番画像をドラッグ&ドロップする。

各種設定
書き出すための設定を行う。

ループ回数の設定
「Playback Settings」でループ回数を入力する。デフォルトでは無限ループするようになっている。
フレームレートの設定
「Delays – All Frames」でフレームレートを入力する。デフォルトでは10fps(1/10)になっている
圧縮形式の設定
「Compression Settings」で圧縮形式を選択する。「zlib」「7zip」「Zopfli」の3種類から選択する。
出力ファイル名、出力先の入力
「Output file」のテキストボックスに出力先とファイル名を入力する。
書き出す
「Make Animated PNG」ボタンをクリックする。
画面の色情報(HEX,RGB,HSL)の取得
最終更新日 2026年1月17日

画面の色情報を知りたいことなどがある。
Webページなどを制作していると画面の色情報を知りたいことなどがある。
Chromeの拡張機能「ColorPick Eyedoropper」でブラウザ上の色情報を便利に取得していたが先日、サポート終了により機能がオフにされた。

な、なんだ… 終了か…唐突の感
これを機に「PowerToys」をインストールしてブラウザ上だけではなく、PCディスプレイ上の色情報を取得してみることにする。
PowerToysとは
Microsoftが開発するユーティリティソフトウェアでWindowsの使い勝手を向上させるさまざまなモジュール(機能)を追加することが出来ます。今回はこのPowerToysのモジュールのひとつ「Color Picker」を取り上げています。
PowerToysのインストール
Microsoftストアからインストールします。
Microsoftストアの「PowerToys」のダウンロードページ


PowerToysのダッシュボード。「Color Picker」を有効にしておく(デフォルトで有効になっています)
Color Pickerを使う
PowerToysが起動していれば(デフォルトではWindowsログインと同時に自動起動している)ショートカットで「Windowsキー」+「Shift」+「C」で「Color Picker」が使用できるようになる。

ディスプレイ上のマウスポインタの置かれている位置のHEX値が表示されるようになります。ここでは当ブログを開いて適当な位置の色を取得しています。(上画像の赤枠部分)

そのままクリックするとRGB値やHSL値も表示されます。
仮想プリンターで画像出力
最終更新日 2025年5月6日

ドロー系のアプリケーション(花子など)は、印刷を前提、基本としているためかペイント系のキャンバスのようにピクセルで用紙設定をすることが出来ないものが多い。
ドロー系のアプリケーション
ドロー系のアプリケーション(花子など)は、印刷を前提、基本としているためかペイント系のキャンバスのようにピクセルで用紙設定をすることが出来ないものが多い。(同じくドロー系のAdobe Illustratorのようにピクセルで用紙(キャンバス)設定が出来るものもあるが…)

上画像は、花子を使用してA4の用紙にさまざまな文字や画像を配置して資料のようなものを作成。このままJPEGなどに出力したい…
コンピュータディスプレイ上で扱う画像の出力
たとえば基本的にはドロー系のグラフィックアプリケーションである花子の場合、Web用の素材などを作成するには、用紙上で範囲の指定をするかオブジェクトを選択することによってピクセルによる解像度を指定して出力することは出来るが、この用紙そのものをプリンターで印刷するように画像で出力することが出来ないのは困る場合もある。
仮想プリンターを使用する
仮想プリンターとは、Adobe Acrobatに代表されるような印刷イメージをファイルとして出力するコンピュータ(ネットワーク)上の仮想的なプリンター機能だが(一般的にはPDFを出力。WindowsにはMicrosoft Print to PDFが標準搭載されている)JPEGやPNGに変換して出力出来る仮想プリンターもある
CubePDFをダウンロードする
印刷イメージをJPEGやPNGに変換できる「CubePDF」を公式サイトからダウンロードする。

「無料でダウンロードする」をクリックして広告を30秒間視聴することによってダウンロードされる。

CubePDFで印刷する

プリンタ名を「CubePDF」にして「OK」をクリックして印刷へ…

次に上のような画面が出るのでファイルタイプをJPEGやPNGに変更する。解像度は150~300ぐらいがいいだろうか(ここでいう解像度はppiを単位とした解像度)
出力(印刷)されたファイルを確認する

A4(210mm x 297mmで上下左右に10mmのマージン)の用紙に文字や画像を配置した制作物をCubePDFで150ppiの解像度でJPEG出力してみる…「1754 x 1240」ピクセルの画像が出力された。
9/19~21開催「iOSDC Japan 2025」チケット販売開始
「描き続けること」の小さな闘い ——『それっぽく描くコツ』誕生前史 著者96こげさんに聞く
参加総数2500名超え! 世界一のTypeScriptカンファレンス「TSKaigi 2025」レポート
Java on Azure Day 2025 基調講演レポート――Oracleとの戦略的協業、AI時代のJava開発生産性向上・レガシーモダナイズ・AIアプリ基盤の最新動向
第248回 知っておくと得するかもしれないMySQLの組み込み関数
商用利用OKの無料版と有料版が同時リリース! 万年筆で一文字ずつ手書きされた、やさしい雰囲気のフォント「ノエリーフ」
“次のディナーもあるかもね” - Linus、Bill Gatesと「歴史的」初顔合わせ
オープンソースのEメールマーケティングプラットフォームBillionMaill V3.0がリリース ―“スパム判定を避ける機能”をベータ版実装
セール初登場もたくさん! 年に一度のKindle本プライムデーセールが開催、Web制作・デザイン・イラストの良書が最安値です
Ubuntu 「Bing」の壁紙を設定する
最終更新日 2026年1月17日

前回の記事でデスクトップ背景を単色にしたが、今回はBingの高画質画像をデスクトップ画像に設定して毎日更新する。
Microsoftの検索サイト「Bing」のWebページの背景に使用されている画像を自動的にダウンロードしてUbuntu(Linux)の壁紙に設定できるアプリをインストールします。
BingWallをインストールする

アプリセンターより「bingwall」を検索。「BingWall – Bing wallpaper of the day」の検索結果をクリックして

「インストール」をクリックします。完了して「起動」に変わったらクリックして「BingWall」を起動します。

右上の設定アイコンをクリックして設定画面を開きます。

「Choose Location」を「Japan」に変更。今回は「Set wallpaper of the day on System StartUp」(ログイン毎に壁紙を更新)をチェックしました。
「Show image detail on wallpaper」をチェックすると画像の右下に撮影場所の情報も表示されます。
再起動します。

Bingの画像が壁紙が設定されました。Dock(タスクバー)って透過処理されてたんですね


