～ 目次 ～

• 1. 今回やりたいこと
• 2. アプリのデザイン変更
  • 2.1. スイッチの色を変える
  • 2.2. スライダの色を変える
  • 2.3. ボタン形状を変更
  • 2.4. ボタン背景画像の追加
  • 2.5. 画面背景画像の追加
• 3. 完成！
• 4. 補足：背景画像を作るときのコツ
  • 4.1. 画像を作る前に ～ピクセルとは～
  • 4.2. ボタン背景
  • 4.3. 画面背景
• 5. サンプルファイル
• 6. 関連記事

1. 今回やりたいこと

　前回まではボタンやスライダを配置しただけなので無垢な感じでした（笑）

　せっかくアプリを自作しているので、自分好みのデザインに改良したいものです。

　今回はデザインの変更例を紹介します！

2. アプリのデザイン変更

　MIT App Inventorでは、アプリのデザインを変更する機能が豊富に用意されています。今回はその中のいくつかの機能を紹介します！

　今回の作業は Happy_RC_Driver_7b のApp Inventor プロジェクトファイルを使って行いました。こちらのリンクからプロジェクトファイル（.aia）をダウンロードできます。

　ダウンロードした .aia ファイルをApp Inventorで「プロジェクト＞ローカルコンピューターからプロジェクト（.aia）をインポート」とすれば、デザイン作業から始めることができます。

2.1. スイッチの色を変える

　ST.REV、TH.REV の部分の色を変えます。設定項目は、

• ThumbColorActive：スイッチがONのときのつまみの色
• ThumbColorInactive：スイッチがOFFのときのつまみの色
• TrackColorActive：スイッチがONのときの溝の色
• TrackColorInactive：スイッチがOFFのときの溝の色

　の4つです。カスタムの色を選ぶと、自分の好みの色に細かく調整できます。

　また、 Ctrl キーを押しながらボタンをクリックすると、複数のボタンに同じ設定を適用できます(‘ω’)

2.2. スライダの色を変える

　スイッチと同じ感じで、スライダの左右で色を変えることができます。今回はスライダの色をすべてシアンにしました。

　ステア（ST）のスライダだけでなく、スロットル（TH）のスライダも同様の設定を行いました。

2.3. ボタン形状を変更

　ST.TRIMのボタンが四角形（少しダサいと感じましたw）なので、丸いボタンにします。

　テキストが1文字の場合、外形を楕円に設定すると丸い形になります。

2.4. ボタン背景画像の追加

　ボタンに背景画像を入れることで、好きなデザインと形のボタンを作ることができます。ここでは、以下の画像ファイルを作ってボタンの背景にしました。

• 接続（CONNECT）ボタン：connection_button.png
• 停止（STOP）ボタン：stop_button.jpg

　ボタンをクリックしてイメージのところに好きな画像をアップロードすれば、好きなデザインのボタンになります。

画像の大きさ（ピクセル数）に注意してください。ボタンの作り方は 4.補足： 背景画像を作るときのコツ に書きました。

2.5. 画面背景画像の追加

　アプリの画面全体にも背景を入れることができます。背景用の画像ファイル background.jpg を作ってアプリ背景にしました。

3. 完成！

　こちらが完成したアプリになります。背景が無かったときに比べると、かなりオシャレな雰囲気になりました(‘ω’)

4. 補足：背景画像を作るときのコツ

4.1. 画像を作る前に ～ピクセルとは～

　スマホやPCの画面に表示されている映像は、ピクセル (pixelなのでpxと略す場合も) という小さなドット（点）を集めて表現しています。

　ピクセルの明るさや色を場所によって変化させて、画像や動画を表示しています。

　下のイラストはスマホでよくある解像度 FHD+（フルHD¹＋、ピクセル数が 2412×1080 ）、アスペクト比※ 20:9の画面の例です。私が現在使っている、OPPO Reno8 Pro 5G はこの解像度とアスペクト比です。（以前は Moto g proというスマホを使っていて、アスペクト比が19.5:1でした）

※ アスペクト比
　画面の縦と横の長さの比です。19.5:9、21:9など色々なアスペクト比があるみたいですが、現状（2023年4月時点）では20:9が主流みたいです²。

4.2. ボタン背景

　ボタンの大きさは、MIT App Inventor のデザイン編集タブに表示されているスマホを基に決めます。このスマホは、解像度が 505×320 px です。

　どこの部分が 505×320 px なのかというと、時刻などは表示されている画面上部から、戻るボタンなどがある画面下部までの範囲になります。

　ここでは、Snipping Toolを使ってその範囲を切り取っています。Windows＋Shift＋Sを押すとSnipping Toolを起動できます。

　Windows 11の場合は、スクリーンショットが自動的に「スクリーンショットフォルダ」に保存されます。

　ただ切り取っただけでは 505×320 px になっていないので、横幅が 320 px になるようにリサイズしています。（LibreOffice Draw を使用。ペイントやWeb上のリサイズツールなどでも良い）

　次にボタンの設計に入ります。どのソフトを使っても良いと思いますが、ここでは LibreOffice Drawを使います。作業手順は、

1. LibreOffice Drawを開き、リサイズした画像（505×320 px）を貼り付ける
2. その画像の上に図形を配置して、ボタンの大きさと形を決める
3. ボタンを1個ずつ画像（基本的には.png形式）としてエクスポートする

となります。

　◆ 覚えておくと便利　「Shift」「Alt」キーの操作
　・Shiftキー：図形を選んだ状態で、「Shiftキー」を押したまま、「矢印キー（↑、↓、←、→）」を押すと図形が１グリッド間隔で動きます。
　・Altキー：図形を選んだ状態で、「Altキー」を押したまま、「矢印キー（↑、↓、←、→）」を押すと図形の位置を微調整できます。また、グリッドにくっついて欲しくないときは「Altキー」を押したまま操作するとよいです。

4.3. 画面背景

　下の図のような手順で作成します。作成方法をまとめると、

1. アプリのスクリーンショットを撮る（背景画像がない状態で）
2. 撮影したスクリーンショットをトリミングする（上下の黒い部分がなくなるように。図の緑枠部分だけ残すように）
3. トリミングしたスクリーンショットに重なるような大きさ（ピクセル数が同じになるように）で、背景の画像を作成する
4. 作成した背景画像を保存する

　という流れです。

5. サンプルファイル

　作成したアプリのデータはこちらになります。前回のアプリと中身は同じですが、今回作成したデザイン入りです！

～ MIT App Inventorプロジェクトのファイル(.aia) ～

• Happy_RC_Driver_7b_ex1.aia

～ ビルド済み Androidアプリのファイル(.apk) ～

• Happy_RC_Driver_7b_ex1.apk

6. 関連記事

• 前回 →→→ Bluetooth モジュールでRCサーボ・ESCを制御したい [第11回-接続状態表示のバグ修正]
• 次回 →→→ Bluetooth モジュールでRCサーボ・ESCを制御したい [第13回-ラジコンアプリに車速を表示]