k2-ikeda’s diary

iOS/Androidスマホアプリエンジニアの雑記帳

Apple WatchのWatch Face開放に備える

時計の文字盤(以降WatchFace)が液晶になっていて、しかもカラーなスマートウォッチが出たとなればオリジナルデザインのWatchFaceを作りたくなりますよね?

私は作りたくなります。そして作成しながらデザインセンスのなさに心のなかで叫び、デザイナーの方への尊敬の念を新たにするのです。

この記事はWatchKit Advent Calendar 2014 14日目の記事になります。大遅刻なうえApple Watchともあまり関係がありません。


WatchKitが開発者向けに公開されたものの、まだまだできることが少ないと話題ですね。(WatchKitで出来ないことまとめ

Android Wearで出来ることが増えてきているとこを見ているので、Apple Watchもできることは徐々に増えていくだろうと私は楽観的に見ています。

Android Wearでも最近に出来るようになり、WatchKitではまだ実現できないものにWatch Faceの作成があります。

Android Wearの仕様を見てApple WatchのWatch Face開放に備えましょう!

Watch Faces for Android Wear デザインガイド

Android WearのWatch Faceに対するデザインガイドを見るとデベロッパに対するいくつかの興味深い要請がされています。

丸型と角型のディスプレイに対応する

Android Wearは Moto 360 や LG G Watch R など丸型ディスプレイを持つ機種があるためにこのような要請がされています。この点はApple Watchでは関係ないままでしょう。

インタラクティブ・モードとアンビエント・モードに対応する

インタラクティブ・モード:ユーザが操作しているときのモードでカラー表示でバリバリアニメーションする

アンビエント・モード:バッテリーの節約のために、画面の表示をほとんど黒色のモノクロ表示にする

上記の要請によりAndroid WearのWatch Faceのデザインは丸型、角型、カラー、モノクロの4種類を作成する必要があります。デザインのコンセプトによってはインタラクティブ・モードとアンビエント・モードで雰囲気がかなり変わってしまうことになり悩みどころとなるかもしれません。

Apple Watchの省電力表示モードは?

現在公開されているビデオからは完全なオンとオフしかないように見えます。Apple WatchはAndroid Wearのアンビエントモードに相当するような機能はつくのでしょうか? 気になるところです。

結局どうそなえる?

なんだかんだでAndroid Wear向けであれば、すでに動くものが作れるので試しに一度作ってみればいいじゃないでしょうか?

ワンライナーでWebサーバを立ち上げる

$ python -m SimpleHTTPServer

ターミナルで実行すると、カレントディレクトリをドキュメントルートにしてWebサーバが立ち上がる。

デフォルトではポート番号8000

無線LAN環境下で同じネットワークにぶら下がっているAndroid端末にapkファイルをダウンロードさせるために一時的なWebサーバを立てたい様な場合に便利

スマホアプリの作成に役立つかもしれないImage Magickの使い方

Image Magickとは

コマンドラインの画像編集便利ツール

インストール

Mac環境の場合

$ sudo port install ImageMagick

または

$ brew install imagemagick

インストールは時間のあるときにするのがよいと思います。Mid 2011のMac miniで大体30分位かかりました。

使い方

ファイル形式変換(単体)

$ convert in.png out.jpg

形式変換(まとめて)

jpg画像をまとめてpngに変換

$ mogrify -format png *.jpg

リサイズ

リサイズの基本

$ convert -geometry 横x縦! in.png out.png

※縦横比を維持する場合は"!"をつけない

こいつを利用するとスマホアプリのアイコンを用意するのが少しは楽になる

iOS用アイコンのリサイズ

変換用シェルスクリプト

使用法:変換元の画像を第一引数に食わせる

#!/bin/bash
# -------------------------
# iOS用のアイコンファイルを出力
# 使い方:第一引数に変換元の画像を指定して実行
# iOS5-7対応でユニバーサルな場合を想定
# -------------------------

sizes=("152" "144" "120" "114" "100" "80" "76" "72" "58" "57" "50" "40" "29")

# アイコンファイルの出力
# -------------------------
for size in ${sizes[@]}; do
    convert -geometry ${size}x${size}! $1 icon${size}.png
done

# iTunesArtworkの出力
# -------------------------
convert -geometry 512x512! $1 iTunesArtwork.png
convert -geometry 1024x1024! $1 "iTunesArtwork@2x.png"

Android用アイコンのリサイズ

#!/bin/bash
# -------------------------
# Android用のアイコンファイルを出力
# 使い方:第一引数に変換元の画像を指定して実行
# -------------------------

# 出力先ディレクトリ名
dirs=("drawable-xxxhdpi" "drawable-xxhdpi" "drawable-xhdpi" "drawable-hdpi" "drawable-mdpi")

# 出力サイズ
sizes=("192" "144" "96" "72" "48")

# 出力先ディレクトリ作成
# -------------------------
for dir in ${dirs[@]}; do
    if [ ! -d ${dir} ]; then
        mkdir "${dir}"
    fi
done

# アイコンファイルの出力
# -------------------------
i=0
for dir in ${dirs[@]}; do
    convert -geometry ${sizes[$i]}x${sizes[$i]}! $1 ${dir}/ic_launcher.png
    let i++
done

切り抜き

$ convert -crop 切りだし横幅x切り出し縦幅+切り出し起点x+切り出し起点y in.png out.png

画像生成

アプリのデザインが流動的などの理由でとりあえず適当な画像を当てておきたい場合などに

指定サイズの単色画像を出力

赤色で塗りつぶし200x200のpng画像を出力する場合

$ convert -size 200x200 xc:"#FF0000" out.png

真ん中に文字列の入った画像

$ convert -size 192x192 -background "#0000FF" -fill white -gravity Center -pointsize 30 label:"text" text.png
  • -background 背景色
  • -fill 文字色
  • -gravity 文字の配置
  • -pointsize 文字サイズ
  • label 文字列

その他画像の加工

透明色の指定

拾ってきたクリップアートに透過色が指定されていなかった場合などに

$ convert -transparent 透明指定色 in.png out.png