LINEスタンプでPebbleのウォッチフェイスを作ってみた

１　スクリーンショットを取る

まずは原始的に、iPhoneでLINEアプリのスクショを取ってPCに取り込みます。

２　画像を加工する

次にIrfanviewを使って、適当に正方形に切り取ります。このソフトはCTRL+Yで選択した範囲だけを切り出しできるので楽。

続いてCTRL+Rでリサイズし、144×144にします。Pebbleの解像度は144×168なのに、なんで正方形にするかって？　それは、残りの144×24の部分に時計を表示するためです。

Shift+Vで「外枠の追加」を行い、topかbottomの好きな方に24ピクセルを追加します。さらにオリジナルの配色そのままだと64色のPebbleではぼんやりした画像になってしまうので、コントラストと彩度をどぎついぐらいに上げてメリハリのある画像にします。

ウォッチフェイスに組み込む

これを読む人はキホンのウォッチフェイスは作れる人だと思うので、以下はざっくりと。時間を表示する部分は通常、以下のように書いてあります。

static void update_time(){
  //tm構造をいただく
  time_t now = time(NULL);
  struct tm *tick_time = localtime(&now);
	
  //バッファを作っておく
  static char buffer[] = "00:00";
  
  //バッファの中に時間と分を書き出す
  if(clock_is_24h_style() == true){
    strftime(buffer, sizeof("00:00"), "%H:%M", tick_time);
  } else {
    strftime(buffer, sizeof("00:00"), "%I:%M", tick_time);
  }
  //テキストレイヤに時間を表示する
  //テキストレイヤがふたつあるのは、重ね合わせで表示することで浮き上がっている効果を狙ったもの
  text_layer_set_text(s_time_layer, buffer);
  text_layer_set_text(s_time1_layer, buffer);
}

これの最初のあたりに、以下の部分を付け加えます。

	//先にビットマップをデストロイしないと新しい画像をクリエイトできない
	gbitmap_destroy( s_background_bitmap );
	//寝てる間は見ないので、7時～23時までケースして0時以降はデフォルトで取る
	switch(tick_time -> tm_hour){
		case 7:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_07 );
		break;
		case 8:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_08 );
		break;
		case 9:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_09 );
		break;
		case 10:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_10 );
		break;
		case 11:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_11 );
		break;
		case 12:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_12 );
		break;
		case 13:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_13 );
		break;
		case 14:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_14 );
		break;
		case 15:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_15 );
		break;
		case 16:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_16 );
		break;
		case 17:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_17 );
		break;
		case 18:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_18 );
		break;
		case 19:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_19 );
		break;
		case 20:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_20 );
		break;
		case 21:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_21 );
		break;
		case 22:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_22 );
		break;
		case 23:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_23 );
		break;
		default:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_00 );
		break;
	}
	//最後にビットマップをレイヤにセットする
		bitmap_layer_set_bitmap( s_background_layer, s_background_bitmap);

完成！

かわいくできました(^^)

これを応用すると、例えばtick_time -> tm_minuteで分ごとに画像を変えることも可能です。分で10で割って余りでスイッチしてみたり、とか。

作業時間の約半分は画像をきれいに縮小する方法を思い出すことだったので、備忘録があると今後もサクサク作れるかな。久しぶりに作ってみて、Pebbleの魅力は簡単にウォッチフェイスを作れちゃうだな、と再認識しました。