17 July 2015

「少しだけカラー対応」のハナシ。

最近ようやく重たい腰が上がり
新しいアプリを組み始めているんです。


…ですがここ数日ちょっと行き詰まってしまったので、気分転換に時刻表を表示するアプリをカラー対応させるコトにしました。



こちらが現段階で表示されている画面です。全くの白黒…は実は大好きなんですが、せっかくカラーで表示できるんだから少し挑戦してみようと早速cloudpebbleにアクセスしました。


・メニューレイヤに色をつけてみます

目的の関数はココにあります。カラー表示を適用させる関数は2つあって、"normal"は非選択の項目を指しており、"highlight"は選択中の項目を指しています。
また、第一引数の"MenuLayer *menu_layer"には適用させようとしているメニューレイヤ名、第二引数"GColor background"は文字通り背景に、第三引数の"GColor foreground"はカンタンに言うと表示される文字列に適用する色を指定します。

では実際に組み込んでみましょう。カラー表示は対応デバイスでしか受け付けるコトができないので、"#ifdef〜#endif"の出番です。メニューレイヤを表示させるコードが書いてある部分に、対応デバイスのみ適用させるため"#ifdef PBL_COLOR"を指定してから…

#ifdef PBL_COLOR
 menu_layer_set_normal_colors(start_layer, GColorGreen, GColorRed);
 menu_layer_set_highlight_colors(start_layer, GColorOrange, GColorBlue);
#endif

こんな感じで記述します。ちなみにこの関数を組み込まない場合は、最上段の画像のように自動で非選択部は背景色が白、文字色は黒で表示され選択時には反転されるように動作します。


ここでは適用させたいレイヤは"start_layer"ですね。表示させるコトができる色見本はコチラです。初めて組み込んだトキはどんな感じで表示されるのかわからなかったので、ざっくり目立ちそうな色をザツに選んでカラフルになるよう組み込みました。


cloudpebbleならこんな感じで選択肢が出るので便利ですよ。


・分岐条件について

余談ですが同様に"#ifdef"を打ち込むと以下のような選択肢が出ます。


イロイロ分岐できそうですね。ちなみに"ifdef"のパートに"else"を加えたい場合は

#ifdef PBL_COLOR
 menu_layer_set_normal_colors(start_layer, GColorGreen, GColorRed);
 menu_layer_set_highlight_colors(start_layer, GColorOrange, GColorBlue);
#else

#endif

ココに"#else"を差し込んで…この場合のelseは"カラー対応ではない端末"ですね。白黒しか無いですから、反転させてみましょうか。

#ifdef PBL_COLOR
 menu_layer_set_normal_colors(start_layer, GColorGreen, GColorRed);
 menu_layer_set_highlight_colors(start_layer, GColorOrange, GColorBlue);
#else
 menu_layer_set_normal_colors(start_layer, GColorBlack, GColorWhite);
 menu_layer_set_highlight_colors(start_layer, GColorWhite, GColorBlack);
#endif

という記述で色を反転させることも可能です。ではでは早速コンパイルしてまずはエミュレータで表示してみましょう。


うわぁ…ほぼガチャピンじゃないですか…


・動作確認したので仕上げます

これではツラいので結局白黒とグレーで仕上げることにします。あと、メニューレイヤが何枚かあるのでそれ全てに長々書くのもイヤなので関数を自作します。

static void menucolor (MenuLayer *menu) {
 #ifdef PBL_COLOR
  menu_layer_set_highlight_colors(menu, GColorLightGray, GColorBlack);
 #endif
}

コレで先程書き込んだ場所を含め、同じ処理を行う場所は"menucolor (任意のレイヤ名);"に置き換えるだけでオッケーです。関数って、便利ですねえ。というワケで出来上がったモノがこちら。


あんまり変化はありませんが、別にカラー対応になったからといって何が何でもカラフルにする必要も無いと思うんですよね。自分が使う分にはコレで充分です。明日にでもappstoreにアップロードしておこうと思います。


・初心者ですがのんびり取り組めます

ボクはpebbleを購入して初めて"プログラミング"というモノを知り、スキマ時間を見つけてはほぼ手探りでアプリを組み上げてきました。具体的にはチュートリアルや公開されているコードを参考に少し組んでは実機でテスト、を繰り返して少しずつ組むという手順で組んでいるんですね。
ブラウザ上でアレコレできるので、ドコにいても思いついたトキに試して結果が得られるので出先でテストするコトもしばしばあったりします。

気が向いたトキに取り組んでいるのでなかなか進みませんが、実際やって覚えた方が解りやすく気付きも多いので楽しみながら取り組んでいます。今回はメニューレイヤでのカラー表示に取り組みましたが、コードの組み方次第でその他のレイヤにも応用できそうです。何より今回は関数の仕組みがやっとわかったのでとても理解が進みました。


というワケで今回はここまで。

最後に、先日twitterで声をかけてくださった方がアプリ作成にとても参考になるページを書いてくださっています。興味のある方はぜひご一読ください。
ラベル: