「Widgy」の使い方ちょこっと説明する
はじめに
最近なんかiPhoneをカッコよくする「Widgy」なるものを使ってみようとしたのだけれど、案外日本語で作り方を解説してくれている記事が見つからなかった*1ので、詰まった所とかを残しておこうと思う。設定難しい。
リハビリがてら書いてます。
Widgyとは
こんな感じのオリジナルウィジェットを作ってくれるやつ。カスタマイズ性が恐ろしく高いのだが、その分自分で作ろうとするとちょっと大変かも。 普通に世の人が勧めてるように、既存のやつ使うのが幸せだとは思う。
でもやっぱ自分だけのウィジェット作りたいやん。
使い方……というか作り方
まず「+Create New」から、作りたいサイズを選ぶ。自分の使い方だと、ミディアム（2×4）か大（4×4）が良さそうだった。今回は大で。 ウィジェットの名前と作成者名はお好きに。
レイヤー足してく
他の「折れ線グラフ」とか「ゲージ」とかも使いこなしたらスタイリッシュになりそう。
気温表示するやつ作る
まずは公式のウィジェットで表示される、現在の気温と最低・最高気温が分かるやつを作る。
「Apple Gauge」を選択すると、とりあえずボーン！となにか表示されるのだが、とりあえず自分は一回ここでフリーズした。
ここで、今「フレーム」と表示されている部分の右にある箱を押すと、「データ」タブに行き、どの項目を表示させるかを選択できる。
ここで「天気」→「毎時 気温」を選択する。とりあえずウィジェットを追加する時は、データを最初に選ぶのが良い。
するとなんか現在の気温っぽいのが表示されるのだが、データの範囲が「0～100」となってしまっており、何の役にも立たない。自分はここで二回目のフリーズをした。
そこで落ち着いて、タブの中の時計？ っぽいマークを押す。するとここでまた英語でバーっと色々表示されるのだが、とりあえず一番下までスクロールする。
すると、「排他的セグメント」の設定ができる。ここを弄る。*2
上から2項目目の「Auto」をONにする。*3するとなんかめっちゃいい感じになる。ちなみに、モードは「セグメント30」にしないと数値関係がめちゃくちゃになる。ここ凄く注意。*4
ここでやっと最初の「フレーム」に戻る。ここでウィジェットのサイズや場所を弄ることができる。基本的には「ステップ」の項目を弄ると移動幅を選択できるので、それを使っていい感じにグリッドに合わせよう。
一つの正方形が100×100（ピクセル？）で、基本的には400×400をベースに扱っていくことになる。ただウィジェットのサイズを400×400ピッタリで作ってしまうと、なんだかキツキツになるので360×360くらいがいいかも？
「Apple Gauge」タブ内の「Color」を変えることで、色々と色を変えることも出来る。
「バックグラウンド」タブでは、背景色も設定できる。当然グラデーションも可能。 その他フォントも変えれたりするので、拘る人はそこも設定していこう。
「Apple Gauge」タブだが、基本的には「Current Value（現在値）」「Min. Value（最低値）」「Max. Value（最大値）」の3セットで構成されている。英語がばーっと並ぶが、気にしすぎないように。
天気取得について
基本的には現在地の天気を取得してくれるっぽいのだが、一応その設定方法も。
一旦ウィジェット設定画面を抜けて、「管理」タブに行く。そこから「More Setting」で「天気予報の位置」に入る。そこで「位置情報を自動取得に戻す」を押せば良さそう。
実際の天気アプリと、ウィジェット内の数字を見比べてみて一緒だったらOK。
ちなみに、気温を小数点以下まで表示することも可能。「Current Value Decimals」を弄る。公式では小数点以下出ないので、Widgyの方が上かも。
歩数表示するやつ作る
次に、現在の歩数を表示するやつを作る。
先ほどと同じ流れで、
「新しいレイヤーを追加」→「Apple Gauge」 で、「データ」から「歩数計」→「歩」を表示する。
なんだか「100」と出てきたが、これは百歩しか歩いていない訳ではなく、やはり排他的セグメントの設定が効いているせいである。
先ほどと同様にAutoにしてもいいのだが、自分は手動で「最小を0」「最大を6,000」に設定している。最大値は一日の目標歩数に設定。
さらにここで、「Apple Gauge」タブの上の方にある「形状」を「Closed Ring」にする。するとだいぶいい感じになるでしょ？
ただ、この設定をしてしまうと問題があって、設定した最大歩数を超えても、超えた分が表示に反映されなくなってしまう。そこで、今回はひと工夫*5を加える。
まず「Current Value Hide Text」をオンにすると現在の歩数が消える。
ここで新しく「テキスト」レイヤーを作る。「データ」タブからテキスト[カスタムテキスト]をタップし、先ほどと同じく「歩数計」→「歩」を選択する。
ここで「テキスト」タブから「水平方向の位置揃え」を中央にしておく。また、「単位の表示」はNOにしておく。そしてこのテキストを円の中央に持っていくと、いい感じの歩数計ができる。（目標を超えても、しっかり数値が表示される） ちなみに、カンマのあるなしも選べたり。
ここで「グループ」レイヤーを作って、これら「Apple Gauge」レイヤーと「テキスト」レイヤーを入れて纏めておくと後々良いかも。ちなみにレイヤーの移動は、右上の緑の・・・をおして、「Reorder」から。（これもちょっと悩んだ）
更にここで、見やすくするためにアイコンを足す。「歩数計」グループ内の「新しいレイヤーを追加」から「シンボル」を追加する。「カラー」から青色にし、レイヤーの重ね順をシンボルが上に来るようにする。
あとはグループごと*6に拡大縮小をして、いい感じに配置する。ほら、もうなんかそれっぽいのできてきたでしょ。
現在の使用中ストレージを表示する。
今iPhoneのストレージをどれくらい使っているかって意外と確認しないですよね？それもウィジェットに入れちゃいましょう。
新しいレイヤーで「テキスト」を追加。「テキスト[カスタムテキスト]」をタップし、「システム メモリ」→「ディスク使用中」を選択。
その後「＋新規データ追加」で「カスタムテキスト」→「テキスト」で「/」を入れて更新。更に新規データ追加で「システム メモリ」→「ディスク使用中（％）」を選択。
多分ここまでで良いと思うけど、自分はさらにカスタムテキスト「(」＋「システム メモリ」→「ディスク総容量」＋カスタムテキスト「)」まで入れている。
あとは文字色を変えたり、サイズを変更したり、見やすくシャドウを入れたりして完成！
多分文字で読んでも分かりにくいと思うけど、やったらピンと来ると思う。プログラミングの文字列出力に似てる。
背景を透過（っぽく）させる
このウィジェット、背景色を透過（っぽく*7）させる設定がある。これだけで一気にホーム画面に馴染むようになるので、設定推奨。
「管理」タブの「Setup Transparency」を押す。そしたらなんか色々書いてあるので、その通りにして欲しい。
そしたらレイヤー編集画面で「新しいレイヤーを追加」から、「画像」レイヤーを追加し、更に画像タブから「Widgy」→「透明用背景」を選択する。なんか注意が出るが、「今後このメッセージを表示しない」にする。
そうするとバーンと出る。
とここで、ウィジェットの配置箇所次第では背景がズレてしまうのだが、実際の配置をする時にこの画面が出るので、配置したい場所に設定する。するとぴったりになる！
当然だがこのレイヤーは、あくまで画像レイヤーなので、一番下に置いておくように。←これ結構忘れる。
タップでリロード
色々と駆け足で説明してきたが、他の項目も基本的にはこの応用で全て配置できる。そんな中で一つおすすめしたいのが、「タップアクション」のレイヤーだ。
ここで「Widget Action」を「ウィジェットをリロード」に、Vibrateを「YES」にして、押しやすい位置に配置する。
実はこのウィジェット、常に最新の情報を反映してくれるわけではない。色々APIの制限だかで、リアルタイム更新ができず、そもそもウィジェット自体が一日に60～70回程度しか更新できないらしい？
なのでウィジェットをリロードできる透明の判定を用意しておいて、最新の情報を見たくなったらここを押す！ という訳。バイブレーションを入れておくと押したことが分かって安心。自分はウィジェットの右下に置いてる。
背景にちょっと色をつける。
完全に透明でもいいんだけど、逆にウィジェット感が無くなってしまって寂しいので、ちょっとだけ背景をつける。
まずレイヤー最下部の背景透過用の画像レイヤーの上に「画像」レイヤーを作る。「画像」は「なし」にする。画像サイズはウィジェット幅いっぱいに。
そして「バックグラウンド」タブで好きな色（今回は黒）を選択肢、透明度を下げる。すると、なんか超いい雰囲気になる。
これもオススメ。ただこれをするとレイヤー編集画面が酷いことになってしまうので、目のマークをタップして編集中は見えないようにしておく。*8
描画モードでオシャレに
プラスアルファで、レイヤーやグループのエフェクトから「描画モード」を弄ることができる。Adobeのソフトを使っている人には非常に馴染み深い設定項目なのではないだろうか。
これを色々弄るだけで、ぐっと雰囲気が増す。ちなみに自分は基本的に「Plus Lighter」にしている。
まとめ
とまあ、ここまで色々説明していたが、これだけできたら後はいくらでも自分でカスタマイズできると思う。表示できる項目も案外色々あったりするので、隅々まで見てみるのもアリ。
自分が作ったもののURLを置いておこうと思ったんだけど、個人情報ダダ漏れになりそうだからやめておく。
気温や体感気温、3時間後までの天気や、（無駄に）秒針、現在のIPアドレス、接続中のWi-Fi名、月齢、カレンダーなどを表示している。
てかこれ、多分動画の方が分かりやすいと思うんだけど…… 動画作るの大変なんだよねぇ。動画にして！ のコメントが10件くらい来たら考えます。（かまってちゃん）
質問あったら分かる範囲で答えるので、コメントどーぞ。
ではでは
グリッドマン ユニバース1周年 pic.twitter.com/NLLxY3pDl9
— 望月けい (@key_999) 2024年3月24日
*1:ほぼほぼ見つからなかった。導入方法解説とかはまあまああるんだけど、オリジナルを作るのを解説してるのがあまり見当たらなかった。
*2:正直ここの排他的セグメントはだいぶ分からないことが多い。雰囲気で設定してる
*3:数字の表示範囲が「最小」から「最大」まで表示され、Autoにすると＠以降の数字が使われるみたい。手動設定も可。
*4:ここだいぶ悩んだ。歩数だと、別の日のデータを持ってきたりするけど…… 活用方法がムズい
*5:今回はもう一つレイヤーを足したのだけれど、1レイヤー内で完結できるのかな？ 分かる人いたら教えて下さい
*6:グループ単位で操作ができるのが、グループを作るメリット。Photoshop使ってたら絶対伝わるよね
*7:厳密に透過になるわけではなく、その位置の壁紙を表示させることで擬似的に背景透過してる
*8:この手間が意外とウザったいのでいい方法を知ってたら教えて欲しい
