乐胖代购免代理版

9VAeの画面デザインをきれいにする方法を説明します。作業時間は２分くらいです。iPhone/iPad版9VAeDangla、Android版 9VAeDanglaは、デザインがきれいになりました。

f:id:dnjiro:20201209152136g:plain

他のアニメの作り方はこちらをご覧ください。

内容：

9VAeきゅうべえの画面デザイン（１）
スキン画像を公開してくれたサイト（２）
スマホ版9VAeのデザイン変更（３）
パソコン版9VAeのデザイン変更（４）
元のデザインにもどす方法（５）

■ 9VAeきゅうべえのダウンロード

Android / Chromebook：9VAeきゅうべえAndroid版、 9VAeDangla
Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
Amazon Fire : 9VAeきゅうべえFire版
iPad / iPhone：9VAeDanga 、9VAePro
9VAeのボタン説明

１．9VAeきゅうべえの画面デザイン

9VAeの手描きアイコンはどうも・・という意見をききます。最初メイカーズバザール大阪で披露したとき、かわいいという声もあって、こうなったのですが、確かに見にくいかもしれません。
9VAeは「afa9va.png」という１枚のスキン画像で構成されています。これを描き変えるとデザインが変わります（どのOS版でも共通）。独自のスキン画像を公開、9VAeといっしょに再配布してかまいません。自作してみてください。

２．9VAeのスキン画像を公開してくれたサイト

きれいなデザインを公開してくれたサイトを紹介します。感謝。
mieki256's diary - 9VAeのスキン画像をまた作成：フラットデザイン
「9VAe」のユーザーインターフェイス（スキン背景画像）を作成（2） | PersonWriter's Room：白、ブルーグレイ、ダークグレイ

３．スマホ版9VAeの画面デザインを変更する方法

スマホ版（iPhone / iPad / Android / Chromebook）9VAeは、Ver.0.7.7(201101) から、9VAeフォルダにafa9va.png をいれておくと、背景白のデザインが変わります。

背景黒（iPhone版）は変更できません。表示メニュー「ダークモード」で背景白に切り替えてください。

f:id:dnjiro:20220214002450g:plain

（１）ファイル名が afa9va.png で取得できる場合（上図）

「mieki256's diary - 9VAeのスキン画像をまた作成」では、afa9va.pngファイルが公開されています。
上のサイトの「◎スキン画像とsvg画像」の下にある「afa9va.png（ここでもよい）」「またはこちら」を長押しし、メニューから「コピー」（「リンクアドレスをコピー」）をタッチします。
次に、9VAeきゅうべえを開き、「ツールメニュー＞ネットからダウンロード」を実行し、http 入力欄を長押しして「ペースト（「貼り付け」）をタッチ。
OKをタッチすれば、afa9va.pngが9VAe画面に入力されます。※もし入力できなかった場合、ブラウザで画像をダウンロードし、9VAeで「ツールメニュー＞絵・写真を入れる」で入力してください。
これを「ファイルメニュー＞名前をつけて保存」で適当な名前で保存すれば、9VAeフォルダに afa9va.png 画像がいっしょに保存され、新しいデザインに変わるはずです。（iPhone版の場合、表示メニュー＞ダークモードで見えます）きれいになりました！
mieki256

（２）ファイル名を afa9va.png に変更する場合

「「9VAe」のユーザーインターフェイス（スキン背景画像）を作成（2） | PersonWriter's Room」では別のファイル名で公開されているため、ファイル名の変更が必要です。
9VAeフォルダにスキン画像をダウンロードするのは（１）と同じ方法が使えます。上のサイトにあるアドレス（https://stat.ameba.jp/user_images/20200204/00/personwritep/30/f8/p/o0800052514707395554.png）などを長押ししてコピー。
9VAeきゅうべえを開き、「ツールメニュー＞ネットからダウンロード」を実行し、http 入力欄を長押しして「ペースト（「貼り付け」）をタッチ。
OKをタッチすれば、スキン画像が9VAeに読み込まれます。これを「ファイルメニュー＞名前をつけて保存」で適当な名前で保存すれば、9VAeフォルダにスキン画像が保存されます。ただし、ファイル名が afa9va.png でないため、まだデザインは変わりません。
Andoroid 版でファイル名を変更するには、「Simple File Manager」や「File Manager - Innorriors（Amazon Fire）」のようなファイルマネージャを使うのが簡単です。Simple File Manager では、「内部」ボタン（下図Ａ）をタッチし、「9VAe」（下図Ｂ）をタッチすればフォルダの中身のファイルが見えます。ファイルを長押しして選択（下図Ｃ）し、上の「工」ボタン（下図Ｄ）でファイル名が「afa9va.png」に変更できます。
iPhone / iPad の場合は「ファイル」アプリを使って、9VAeフォルダの中のファイル名を変更できます。「ブラウズボタン＞このiPhone内＞9VAe(Dangla)」でフォルダの中のファイルが見えます。ファイルを長押しして選択すれば、ファイル名が「afa9va」に変更できます。（拡張子 .png は見えません）
表示メニュー＞ダークモードを何回かタッチすれば新しいデザインに変わります。
PersonWriter

f:id:dnjiro:20201016170757g:plain メモ：スマホ版9VAeでは、9VAeフォルダに afa9va.png を入れればデザインを変更できます。

４. パソコン版9VAeのデザインを変更する方法

Windows / RaspberryPi / Linux 版では、afa9va.png ファイルは、9va_data フォルダの中にあります。
Mac版では、9VAe アプリを選んで、右ボタンメニューから「パッケージの内容を表示」を実行。「Contents / Resources」の中にあります。
元のafa9va.pngは名前を変更して同じ場所においておき、いつでも戻せるようにしておくとよいでしょう。
アプリを再起動すればデザインが変わります。

５. 元のデザインにもどす方法

スマホ版は、ファイルマネージャーやファイルアプリで、afa9va.png 画像を消去、もしくは名前を変更し、9VAeを再起動すれば元のデザインに戻ります。
パソコン版は、afa9va.png 画像を元の画像に戻して9VAeを再起動すれば元のデザインに戻ります。

６. デザイン変更のアドバイス

afa9va.png 画像は１ドット単位で元の画像と同じ配置になっていないと、きれいにアプリにはまりません。イラストレータのようなベクトルツールよりドット単位で編集できるアプリのほうが良いかもしれません。乱れを発見したら１ドット横に広げたりして調整します。9VAe開発者はWindows ペイントブラシを使っています。
アイコンがきれいにならんでいるなら、まだ簡単なのですが、上の２つのサイトに書かれているように、手描きの絵に合わせたため、微妙にずれています。ひたすら陳謝。9VAeの元画像を使うより、上のサイトのスキン画像を元にデザインする方が楽です。
このずれた座標値を修正するよりは、ボタンサイズや配置までカスタマイズできるようにしたい。そのためには、各ボタンの機能名を整理する（今はバリエーションを含めると５０００くらい）とか、アプリから画面デザインを完全に分離する（今は各OS版用のパッチがあちこちに点在）とか考えてます。