Designerでウォッチフェイスを作ってみる。Labo029Labo029日々暇つぶし。Designerでウォッチフェイスを作ってみる。Designerでウォッチフェイスを作ってみる。Designerでウォッチフェイスを作ってみる。Designerというものがあります。オリジナルのウォッチフェイスを作れるものなのですがこのソフトが中々に優秀で、GUIで非常に簡単ですし、凝ったことにもチャレンジ出来るので非常に楽しいです。日本語のローカライズはされておらず、最初は若干の操作方法等が分かりづらかったので、若干解説してみようかなと思った次第です。ちなみにインストールまでは下記サイトを参考にしました。Javaとかをインストールしないといけないですね。http://newgadget3mai.com/archives/1064268945-2.htmlとりあえず自分は、ウォッチフェイスを新規作成する当たりからを書いてみようかと思います。■新規作成とりあえず、ソフトを開くと下記のような新規作成ウィンドウが立ち上がります。1.今回はゼロから作るので「NEW」を選択します。ちなみここでサンプルを選択すると、出来上がったものも見れるので一度サンプルを見てみるとより参考になるかもしれません。2.対象となる端末(画面サイズ)の選択します。今回はGearS3向けに作るのでそれを選択します。サイズは縦横360pxです。プロジェクト作成が終わると、実際の作成画面になります。下記のように、まったく日本語化されてないですが、シンプルなUIなのでそこまで難しい感じはありません。(Adobe系のソフトウェアに近い印象)ざっくりとよく使う機能の構成は下記のような感じです。実際に要素を配置していくステージです。背景や針等をここに設置していきます。設置する「要素」を選択出来ます。基本的な時・分・秒の他にBatteryの針や曜日系の針、もっと進んでムーンフェーズといった要素の動きを設定する際は基本的にこれを選択します。WatchHandはアナログな要素でしたが、こちらはデジタル表示です。背景とかぶるのですが、針等に関係の無いイメージ要素を設置する際に選択します。ジャイロセンサに対応したイメージのアニメーション(回転とか)っていうものもこちらに属します。DesitalClockに近いですが、こちらはその他の要素の情報を返してくれるものです。こちらも後述しますが、アニメーションPNGを取り込んで表示する事も出来ます。APNGを作成出来るのは限られていますがAdobeAnimate(旧Flash)とかなら書き出し出来ます。出来合いの機能?という感じでしょうか。バッテリーサークルだったりステップ計とかでしょうか。自分でゼロから設定しようとすると結構時間がかかる要素が最初からサンプルで入っています。メニューから選択した「要素」の詳細な設定はコチラの「プロパティ」から行います。WatchHandで選択した要素が「時」なのか「分」なのかといったような設定です。ここはモロFlashな感じですが、例えば時間(お昼とか)によって表示するものを切り替えたりといった事を設定出来ます。実際に作成したモノをプレビューさせたり実際の時計に転送したりといった事を行うメニューです。デザインを起こしてみる画面の大まかな説明が済んだ所で、デザインを起こしてみましょう。デザイン自体は書き出せればなんでも良いのですが、おおよそPhotoshopでの作業になると思います。デザインの作成は特に説明する事はありませんが、気をつけなければいけないのはサイズと中心に気を付ける事でしょうか。円を書く動作が基本になるので、例えば、回転する中心点がずれたりしていると間抜けな動きになってしまいます。数値や要素の配置等も、デザインの段階できっちり計算して置かないと上手くいかないと思います。曜日を針で表す場合は360÷7で出た数字で確度をつけて行くとかでしょうか。デザインを起こし終えたら、動かす要素毎に書き出しましょう。いう感じでレイヤーをフォルダ分けを行い書き出しましょう。※レイヤーで拡張子をつけ、ファイル>生成>画像アセットにチェックで保存時に特定のフォルダに画像が自動で書き出されます。実際に配置していくまずは「Background」から文字盤を選択し、配置しましょう。デザイン上できっちり図って起こしたならば、後はもう置くだけみたいな所はあります。With」からMinutes、second等設定すればその周期で回転してくれます。何に同期して動く針か。Device」で問題無いと思いますが例えば、2国間の表示とかをやりたい時に使うのかもしれません。どこを中心に回転するか。どの範囲でどんだけ動くかといった事をココで指定するのだけれど算数苦手マンの自分なんで、結構ここで苦戦する。実際にプレビューしながら調整するのが良いか。始まりとなる値は何か?例えばバッテリーレベルならばここは0がスタート。終わりとなる値は何か?バッテリーレベルならばここは100。基本的に容易された値をそのまま使えば良いと思われますが何か独自な事をしたい時はここも変更の必要があるかも。オーソドックスなデザインなら、background、Watchhand(時・分・秒)の透過PNGを準備すれば後はGUIで設定していけばいいだけです。難しいのはムーンフェーズだったりバッテリー情報だったりを絡めた針の動きでしょうか。最近のアップデートでついに天気情報も取り扱えるようになったみたいですがまだ試せていません。難しい部分のTips等はまた時間を見つけて作りたい。関連する記事コービー・ブライアント関連商品の価格高騰。それの批判ニュースを見て思う事。2020.01.30ニュース記事より。いう[...]メモリの価格に変動ありそう。ビビって買ってしまう。2019.07.19半導体界隈が色々とあって、その影響がメモリの価格にも出るかも?みたいなニュースが出てきました。2017.07.06Mate9を購入して2周間程経ちました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。=プロフィールLabo029管理人のzaki(ざき)です。現職ウェブデザイナーです。ガジェットやゲーム、映画だったりのレビューやTIPSを書いています。ガジェットはスマホやスマートウォッチ等のデジモノが多め。ゲームに関しては、周辺機器レビュー等も含めて書きます。映画に関しては観た自分なりの感想などの垂れ流しです。WordPress.。