GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を公開しました。
▲ デスクトップアプリケーション「アニメ画像に変換する君」。無料で公開
主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe Animate CCやPhotoshop CC等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。
従来、macOSではコマンドラインを使ってAPNGを作成する方法しかなかったため、コマンドラインに不慣れなユーザーにとってはAPNG化は難しい作業でした。このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。
▲「アニメ画像に変換する君」でのAPNG画像を書き出す操作手順。たった40秒でAPNG作成が完了
アニメ画像に変換する君でできること
APNG形式やWebP形式への変換を中心に、LINEアニメーションスタンプのガイドラインの適合チェックや、APNGの容量最適化機能を備えています。ウェブ制作用途にも利用でき、APNG・WebPファイルを表示するHTMLファイルの作成も行えます。
デスクトップアプリケーション「アニメ画像に変換する君」はmacOSとWindowsに対応し、無償で提供しています。インストール方法と使い方を紹介します。
アプリケーションのインストール方法
次のURLからソフトウェアをダウンロードください。
※Windows 7の場合はMicrosoft Storeを利用できないため、こちらからダウンロードください。
※Windows 7以上、macOS 10.9 Mavericks以上のOSでのみ利用できます
「アニメ画像に変換する君」の使い方
①素材の作成
PNGの連番画像（画像シーケンス）を用意ください。PNGの連番画像の作成方法は次の記事「LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説」を参考にするといいでしょう。
連番画像とは、ファイル名に数字が振られている複数のファイルを指します。例として、次の図板のようにframe0001.png〜frame0015.pngという名前にします。
※お試し用の連番画像のサンプルファイル（ZIP）を用意しました。手元で試したい方はダウンロード後に展開してご利用ください。
②連番画像の読み込み
「アニメ画像に変換する君」を起動し、[ファイルを選択]ボタンを選択します。
ファイルダイアログでは、ファイルを[Shift]キーを押しながら複数枚選択し、[開く]をクリックします。
すると、「アニメ画像に変換する君」の画面内に複数の画像が読み込まれ、自動的にアニメーションが再生されます。
③用途を選択
「アニメ画像に変換する君」の[用途]は「LINEアニメーションスタンプ」と「ウェブページ用アニメ」から選択できます。今回は「LINEアニメーションスタンプ」を選択します。
[フレームレート]と[ループ回数]を設定しましょう。
④アニメ画像を保存
[アニメ画像を保存する]ボタンをクリックして、ファイルの保存先を選択します。
⑤PNGファイルの確認
LINEアニメーションスタンプのAPNGファイルは拡張子は.pngです（.apngではありません）。出力したAPNGファイルをFirefoxブラウザを使って開き、アニメーションの再生を確認しましょう。
⑥LINEアニメーションスタンプのルールのチェック
LINEアニメーションスタンプのガイドラインには難しいルールが掲載されてます。このソフトウェアではルールに適合しているかチェックする機能があります。ファイルの保存後に、ルールに適合してない点があったらアラートで教えてくれます。
チェックしているのは「フレームサイズ」「コマ数」「再生時間」「ファイル容量」などガイドラインの一部ですが、少し安心してファイル保存できるようになると思います。
「アニメ画像に変換する君」はAPNGだけでなく、WebPの出力にも対応しています。APNGやWebPはアニメーションGIF形式に比べて透過が美しいため、ウェブページ内のデザインにレイヤーとして重ねることに適しています。
ただし、どちらの画像形式もすべてのブラウザに対応していないため、ブラウザごとに適した画像ファイルを参照するよう指定しなければなりません。HTML5のpicture要素を使えば、ブラウザが自動的に適したファイルを読み込むため、幅広いブラウザでアニメーション画像の再生が可能となります。
WebP画像の書き出し方
アプリケーションの左上の［用途］を「ウェブページ用アニメーション」で選択します。すると［画質設定］タブ内に、「APNG」「WebP」「HTML」の複数の書き出しオプションが表示されます。
HTMLファイルはクロスブラウザ対応するためのコードが出力されます。次は出力したHTMLコードの一部ですが、Microsoft EdgeやInternet Explorer、Chrome、Safari、Firefox、Operaに対応したコードとなっています。
<!-- Chrome と Firefox と Safari で再生可能 (IE, Edge ではアニメは再生できません) -->
<picture>
<!-- Chrome 用 -->
<source type="image/webp" srcset="index.webp" />
<!-- Firefox, Safari 用 -->
<img src="index.png" width="749" height="516" alt="" class="apng-image" />
</picture>
※Microsoft EdgeやInternet ExplorerはAPNGもWebPの両方の形式をサポートしていないため、ポリフィルとしてJavaScriptライブラリで再生可能にしています。
開発者について
株式会社ICSというウェブ制作プロダクションが開発してます。主に池田と野原が開発を担当しました。二人ともwebのインタラクションデザイナー/エンジニアなので、webのテクノロジーを使って開発しています。
生成物のライセンスについて
このアプリケーションを利用して作成したAPNGファイルやWebPファイルは個人・商用利用ともに無償でお使いいただけます。著作権はそれらを制作した方に帰属します。
使用条件＆免責事項
- 本ソフトウェアをダウンロードし、インストールすることによって生じる問題について、その責を負えませんのでご了承ください。
- 本ソフトウェアのすべてまたは一部を複製・再配布することを禁じます。
アプリケーション開発に使用した技術
「アニメ画像に変換する君」はHTML5を使って開発しました。HTML5をデスクトップアプリケーションとして変換できるElectronという技術を使用してます。本サイトでも「Electronの入門記事連載」を公開してますが、このアプリケーション開発で得たノウハウは勉強会で紹介したいと考えています。勉強会開催の情報はぜひFacebook公式ページや開発者をフォローしてチェックくださいませ。
また、フレームワークとして「Angular」を利用しています。弊社プロダクトの「WebP画像を作成できるアプリ「WebP画像を作る君」を公開」や「HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上」で紹介したとおり、とても便利なフレームワークです。HTML5でSPA（シングル・ページ・アプリケーション）開発に挑戦する方は、Angularを検討するといいでしょう。
最後に〜アプリケーション化について
従来のLINEアニメーションスタンプの制作にはコマンドラインを使う必要があり、多くのLINEクリエイターがコマンドラインでの制作に困っているのを目の当たりしました。コマンドラインには優秀なツールが数多くありますが、ターミナルやコマンドプロンプトに不慣れな方が多いのが現状です。GUI（グラフィカル・ユーザー・インターフェイス）のアプリケーションに組み立てることで、コマンドライン用のツールを多くのクリエイターに届けることができる、それがHTML5とElectronの良い点だと開発を通じて感じました。
今後も開発を続けていく予定なので、もし不具合がありましたらお気軽に次のリンクからお寄せください。また、機能要望もお待ちしています。
なお、今回のアプリケーション開発にあたり、多くのテストユーザーからの協力を得ました。この場を借りてお礼を申し上げます。