ics-creative / 160609_animation-image-generator

APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」

アニメ画像に変換する君

ユーザー向け

• ユーザー向けヘルプ

開発者向け

• ビルド方法

160609_animation-image-generator's Issues

Microsoftストア(Windows)に最新版を公開する

FPS・ループ回数の入力欄が空にでき、その状態で保存するとwebp出力がエラーになる

■事象

• FPS・ループ回数の入力欄でdeleteキーを押して入力内容を空にする
• そのまま保存を実行するとエラーになる

v2からの既存バグのようです

Angularを13に更新

12→13に移行

Windows 11で、表示倍率の文字が少し見切れている

バージョン4.2にて確認しました。

エディション Windows 11 Pro
バージョン 21H2

v2.1.7以降エラーのログが送信できていない

■ 原因
シリアライズ対象のプロパティを絞る処理に誤りがあり、何も送れなくなっている。
受け取り側ではactionパラメータがないため、そのまま終了している。

160609_animation-image-generator/product/src/app/error/send-error.ts

Lines 54 to 60 in 5ed15d5

	private encodeHTMLForm(data: any) {
	const params = [];
	for (const name in data) {
	if (!name.hasOwnProperty(name)) {
	continue;
	}

■ 修正

• 必要なパラメータを正しく送れるよう、型付けを含めて対応する
• v2.2.0でXMLHttpRequestがメイン側に移動しているが、そのままだと動作しないのでnode-fetch等を導入して対応する必要あり

AppStore(Mac)に最新版を公開する

エラーチェックUIの強化

LINEスタンプの形式チェックエラーが保存完了後まで表示されないため、表示を強化する

• 画面上部にラベルの色としてエラーが示されているので、具体的なエラー内容をツールチップや追加のUIによって表示する

ファイルサイズ（ピクセル数）不一致のエラーが読み込み・保存時のダイアログとしてしか表示されないため、表示を強化する

• 画面上部のサイズラベル部分でエラーを示す等、表示方法を改善したい

[連番画像を再選択]ボタンが動作しない

手順

1. アプリを起動し、任意の画像を選択する
2. [連番画像を再選択]ボタンを押す
3. 任意の画像を選択する
4. コマ画像プレビューに1で選んだ画像がそのまま表示され、[連番画像を再選択]で選んだ画像が表示されない

期待する結果

[連番画像を再選択]で選んだ画像がコマ画像プレビューに表示されること

Apple Silicon対応

Apple Silicon対応版をリリースする

• Electron本体のArmビルド
• 画像変換モジュールのArm対応
  • apngasmのarm版をどうするか
  • libwebpのx86/arm版の切り替えをどうするか？
    • 予めlipoでユニバーサルにしておく？
• ビルド後のx86/arm版のユニバーサルバイナリ化
  • @electron/universalでできる
  • これもlipoでくっつけるだけなのでサイズは倍になる

Windows環境でフレーム数が多いとwebp保存がENAMETOOLONGで失敗する

フレーム数が480程度で発生

webpmux実行時に引数として全てのフレームのパスを渡しているため、これがWindows環境でコマンド長の上限に引っ掛かっているものと思われます。

保存処理中に時間がかかる場合フリーズしたように見える

■ 事象

• 保存処理が同期的に呼び出されているため、保存に時間がかかると画面が固まる

■ 期待値

• 正常に動作していないような印象を与えるので、処理中はローディング等のUIを表示するようにする

アイコンの更新処理をスクリプトにする

LINEスタンプの保存実行時にエラーが表示される

エラー内容

Uncaught Exception:
TypeError: Cannot read properties of undefined (reading 'VALIDATE_amount')
at Function.LineStampValidator.validate (/Users/matsumoto/Documents/git/160609_animation-image-generator/product/dist-config/common-src/validators/LineStampValidator.js:18:41)
at /Users/matsumoto/Documents/git/160609_animation-image-generator/product/dist-config/main-src/file.js:589:87
at ChildProcess.exithandler (node:child_process:397:7)
at ChildProcess.emit (node:events:394:28)
at maybeClose (node:internal/child_process:1067:16)
at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)

出力するhtmlの内容が古い

出力されるhtmlの内容が、最新のブラウザ環境から見ると古いため、更新したい

• IEのサポートを外してAPNGのポリフィルを消す
• SafariのWebPサポート・ChromeのAPNGサポートに対応する

画像生成用ライブラリを最新バージョンに更新する

画像生成に使用しているライブラリ（バイナリモジュール）の更新要否を調査・対応する

対象

• product/resources/
  • apngasm-2.9.1-bin-macos / apngasm-2.9.1-bin-win32
  • libwebp-1.0.0-mac-10.13 / libwebp-1.0.0-windows-x86
  • pngquant-mac / pngquant-win （※ ver 2.7.1）

方針

• 大きな非互換がなく差し替え可能なら更新する
• 対象のOS,アーキテクチャを確認する
  • MacはARM対応の有無を確認する
  • このタスクではARMへの切り替えは必須ではない（別途チケット化する）

新しいLINEスタンプの形式に対応する

通常のアニメーションスタンプ以外のサポートを追加する

• ポップアップスタンプ
• エフェクトスタンプ

主な違いはサイズ等のチェックルールのみなので、設定パネル内で使用用途を選択し、用途に合わせたチェックを行うなどのUIを追加を検討する

保存時まえに入力ファイルが削除されていた場合のエラーが分かりにくい

■ 前提

• アニメ画像に変換する君では、ドラッグして登録した入力画像は保存が完了するまで削除やリネームをしてはいけない
  • 普通のデスクトップアプリだと、読み込んだものはオンメモリで処理するため、入力ファイルは削除してしまっても問題ないものが多い
• 保存処理実行時に入力ファイルにアクセスできないと、テンポラリにコピーする処理が失敗し「一時ファイルの作成に失敗しました」というエラーが表示される

■ 対応したいこと

• エラー表示がわかりにくいので、保存処理の前に一度ファイルの存在チェックを行いたい

Windowsでのアイコンの表示が小さく、背景が透過していない

アニメ画像に変換する君のWindows版において、アイコンが綺麗に表示されていないようです。
バージョン 4.1 で動作確認しました。

Windows 11 : アイコンが小さい

Windows 11: タスクバー上のアイコンが透過しているっぽい？

Windows 10 : アイコンが小さい

Windows 10: タスクバー上のアイコンが透過しているっぽい？

■期待値

• プログラムメニューのアイコン： 視認できる大きさで表示されていること
• タスクバーのアイコン： アイコンの●の外側が不自然のない透過背景で表示されていること。周りのアイコンに比べて同じぐらいの●で表示されていること。

容量最適化の「？」の配置が不自然

「容量最適化」の右側の「？」の位置に違和感を持ちました。

■課題
「容量最適化」の右側に「？」マークが存在することで、「容量最適化」のチェックボックスと「圧縮方式」が連動しているような印象をもちました。

■前提

• 「容量最適化」のチェックボックスは、一時ファイルのPNGにpngquantを使うかどうかの指定
• 「圧縮方式」の指定は、APNGの圧縮に対する指定

■解決案
「？」マークは2箇所に掲載する。

1. 容量最適化 - 容量最適化とは、ファイルを圧縮し容量を最適化します。気付かない程度に画質を落としています。
2. 圧縮方式 - 圧縮方式により処理時間や容量が代わり……（以下同じ）

※社内Slack（2023年2月6日）より転載

メインプロセス側のコードをバンドルする

メインプロセス側のコードは現状tscを通してJSコンパイルしているだけでバンドルを行なっていない。
このままだと外部モジュールをimportして使用する際にそのままだとelectron-packagerのパッケージング対象に含まれず実行できない（個別に対象を指定する必要がありかなり煩雑）ため、バンドラーを導入してビルド時にバンドル処理を挟むことを検討する

Windowsでエラーダイアログが文字化けしている

Windows版でエラーダイアログ表示時の左上のウィンドウパネル部分が文字化けしていました。