勉強会 資料 Google Developer Group 京都 yotogtug lt yoshida

吉田研一

App Inventor の色指定アルゴリズムを

理解し色指定しやすくしてみる

京都GTUG 2011年忘れ勉強会

2011/12/18 _（日）

自己紹介

吉田研一 (44 years old)

奈良在住（来年中に姫路）

ECCコンピュータ専門学校(大阪)講師

JAG神戸 & GTUG神戸メンバー

近況 11/12 KOF

「勉強会＆イベント

探訪記」より

App Inventor って?

前説

GUI _{プログラミング}

ブロックを配置してプログラミング

ブラウザでレイアウト

コードレス ^code-less 開発環境

最近起動時にこんなダイアログが

なんスか？

今年いっぱいで終了orz

This serverって…

Google サーバ側でビルドしてた

誰でもAndroid開発できるApp Inventorの基礎知識（1/3） - ＠IT http://bit.ly/ur8mNa

オープンソース化に期待

MITに移管されます。2012年3月から。

その間は日本App Inventorユーザ会で 

互助会的なサーバをたちあげる。準備中

で、Google Technologyじゃなくなっ

ちゃうけど。このLTはします。

本題

App Inventorの独自カラー指定

プリセット色は１５色

それ以外の色は計算する

ひとつの例として、パープルの暗い影の R、

G 、B の値は、R = 160、G = 32、B = 240 で

す。Opacity を 255 にしてこれらの値にアルゴ

リズムを適用すると、−6283024 という値が得

られます。

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

こんな感じです。

ホントいわゆるMagic Number… ^{(ﾟДﾟ¦¦¦)}

独自カラーアルゴリズム

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

1.Opacity _{からはじめる。}

2.これを 256 倍して ^R を加える。 3.結果を 256 倍して ^G を加える。 4.結果を 256 倍して ^B を加える。

5._{結果を取り出し 16}⁸ = 4294967296 _を引く。

6.その結果の ( 負の ) 数が App Inventor で使用する値となる。

#AARRGGBB

形式らしい

Opacity=α _値

計算してみる（１）準備

Opacity _{を 255 = (} FF)

R = 160 = (A0)

G = 32 = (20)

B = 240 = (F0)

計算してみる（２）

1.Opacity _{からはじめる。}

_{Opacity を 255 = ( FF)}

2.これを 256 倍して ^R を加える。

^R = 160 = (A0)

これを 256 倍して

(FF)

_{× (100)}

= (FF00)

 ∵ 256 = (100)

^{= 16 ^ 2} 桁シフト

R _{を加える。}

_(FF00)

_{＋ ( A0)}

_{= (FF A0)}

計算してみる（３）

3.結果を 256 倍して ^G を加える。

^G = 32 = (20)

(FF A0)

_{× (100)}

= (FF A000)

(FF A000)

_{＋ (} 20)

= (FF A020)

4.結果を 256 倍して ^B を加える。

^B = 240 = (F0)

(FF A020)

_{× (100)}

= (FF A02000)

(FF A02000) _{＋ (} F0) = (FF A020F0)

計算してみる（４）最後

5._{結果を取り出し 16}⁸ = 4294967296 _を引く。

16 ⁸ = 4294967296 = (100000000)

(FF A020F0)

- (100000000)

_の計算は

FFA020F0

-) 100000000

FFFFFFFFFFA020F0

… _{になります。え (ﾟДﾟ;)}

桁借り(borrow)

65 ビット目の桁を借りて減算

10

100000000FFA020F0 10

-)0000000100000000 -) 1

FFFFFFFFFFA020F0 F

オーバーフロービット

One-Padding _{（1埋め）}

5._{結果を取り出し 16}⁸ = 4294967296 _を引く。

(FF A002F0)

- (100000000)

= (FFFFFFFFFF A020F0)

_{#FFFFFFFF AARRGGBB 形式！}

上位32ビットはAll 1ビットでPadding

2 _の補数

6.その結果の ( 負の ) 数が App Inventor で使用する値となる。

(FFFFFFFFFF A020F0)

最上位ビット（64ビット）が1のためsigned longの場合２の補 数（反転して1を加算）をとれば、数値が取り出せる

_。

２の補数は (00000000005FDF10)

= 6283024

まぁ、面倒くさい

アプリ作った

・公開します（後述）

ちょっと改良版

そんでも面倒なんで

カラーチャート作って公開します。

12 月20日（火）当番に！

オープンソースになったら

colorNumberの Built-inブロックを実装したいね

ご清聴ありがとうございました！