AppInventorで独自カラーの作成を簡単にする

AppInventor Advent Calendar

この記事はAppInventor Advent Calendarのエントリのひとつです。

日本App Inventorの会Google Groupに投稿されたメッセージ「ラベル、ボタンカラー黄色を作りたい - Google グループ http://bit.ly/sfLNcj 」を参考にして、App Inventorで使えるWeb Safe Colorのカラーチャートと独自カラー計算のアプリを作りました。

「簡単だが難しい」色指定の方法

App InventorでLabelなどの文字やCanvasなどの背景の色指定をしたい場合、図のように通常App Inventor Designer（デザイナ）やApp Inventor Blocks Editor（ブロックエディタ）を使って、Propertiesなどでメニューを指定するだけです。簡単です(^-^)/

App Inventorは色指定もラク！なはずだけど…。

ただし、これではNone（なし）を含めても１4種類 しかありません。自分の好きな色を作る場合、以下のサイトで紹介する独自カラー計算アルゴリズムを使って「大きい負数（マイナスの数）」を算出する必要があります。難しい(-_-;)ってか何の計算？

4.2.7 カラーブロック - ソフトウェア技術ドキュメントを勝手に翻訳

その中のアルゴリズムの部分を抜粋してみます。

カラーは  4 つの数字で作成され、それぞれが 0 から 255 までの範囲で変化します。最初の 3 つの数字は、色における赤、緑、そして青の量を表します。ウェブでも R、G、B 仕様のたくさんの色を提供しているカラーチャートを見つけることができ、R, G, B を混ぜてカラーを試したりすることもできます。4 番目の番号は、重なった部分に作用する Opacity ( 不透明度 ) を特定します。Opacity が 255 では完全に不透明で、そのカラーは完全にその下にあるものすべてを隠してしまいます。Opacity が 0 では完全に透明で、カラーはまさに画面で見えなくなります。その中間の値で、下にある画面が透ける度合を決定します。

App Inventor 用のカラー番号を得るには、以下のアルゴリズムに従って、4 つの数を組み合わせます。

1. Opacity からはじめる。
2. これを 256 倍して R を加える。
3. 結果を 256 倍して G を加える。
4. 結果を 256 倍して B を加える。
5. 結果を取り出し 16⁸ = 4294967296 を引く。
6. その結果の ( 負の ) 数が App Inventor で使用する値となる。

ひとつの例として、パープルの暗い影の R、G、B の値は、R = 160、G = 32、B = 240 です。Opacity を 255 にしてこれらの値にアルゴリズムを適用すると、−6283024 という値が得られます。 If you set the background color of a canvas to −6283024, you'll see a purple patch on the screen.

これは R、G、および B で指定したカラーの数を計算するブロックプログラムです。Opacity は 255 に固定されていますが、これをグローバル変数に変更することも可能です。

不透明度（＝アルファ値）、R、G、Bの値を256倍しては加算を繰り返しています。いったい何をしているのでしょう？最後に16の8乗の値である4294967296を引いて大きなマイナスの値を出しています。
この計算によって色の値は64ビットであるということが推測できます（16^8は33ビット目が1となり32ビットを超えたビット長を持つため）。
javaで取り扱われているColorクラスのint（32ビット）の色の値とは違うようです。

という訳で、独自カラーのアルゴリズムの手順をまとめてみました。

App inventor独自カラー

View more presentations from 吉田研一

いかがでしょうか？だいたい256倍する意味とか大きい負の数にすることとかがわかりましたでしょうか？（ちなみになぜ上位32ビットを0xFFFFFFFFで埋めるのか理由はわかっていませんorz）

ちなみに上記スライドは、12月18日（日）に行われた「京都GTUG 2011年忘れ勉強会」でのLT「AppInventorの色指定アルゴリズムを理解し色指定しやすくしてみる」発表時のスライドを元にしました。
スライドPDF 20111218_kyotogtug_lt_yoshida.pdf

スライド中にでてきたアプリとカラーチャートは以下の通りです。

• アプリ「RGBvalue」…プログラムのzipファイルです。
• App Inventorで使えるWeb Safe Colorのカラーチャート

 アプリ「RGBvalue」 は、単純すぎるのでプログラムファイルのままです。アルゴリズムを少し書き換えて、比較的理解しやすいようにしています。是非ブロックエディタでプログラ ムをご覧になってください。procedureWithResultブロックの「colorNumber」の計算処理を少し変えてあります。

アプリ「RGBvalue」

Web Safe Colorのカラーチャートは、すぐに使えるApp Inventor用の「大きな負の数＝マジックナンバー(^-^;;」を一覧にしたものです。プログラム内で使いたい色の「大きな負の数」を選んで「Number」ブロックに貼付けて使ってみるといいでしょう。

App Inventor用カラーチャート

最後に

App Inventorは使いやすいものですが、少し手の込んだ事をしようとすると、この「大きな負の数」のように訳のわからない呪文を唱える（！）必要が出てきたりします（もしくは手の込んだ事をしようとすると「できない！」…というのがちらほら）。

Java のように「作法に従った記述法で通さなければならない」プログラミング言語なら、呪文のように覚えないといけないものも受け入れざるを得ない（修行みたい…）かもしれませんが、楽しいプログラミングであるApp Inventorでは、そういったマジックはなるべく避けたいと思っています。

App Inventorがオープンソースになったなら、procedureWithResultブロックの「colorNumber」をBuilt-Inブロックにしてしまって、マジックナンバーをプログラム上に入れないようにできたらと思っています。

以上