ロック画面やホーム画面にカレンダーを表示する方法はいくつかありますが、今回はショートカットアプリを使ってみます.
※価格は記事執筆時のものです. 現在の価格はApp Storeから確認ください.
レビュー時のiOSバージョン ： iOS26.2
スポンサーリンク
レシピ
カレンダーとして数字を配置するには、各々のx座標とy座標をうまく決めることが必要です.
ひとつふたつなら具体的な数字を入れて調整すればいいんですが、カレンダーとなるとひと月だけでも30個前後になってしまいます.
横一行分を一括で配置してしまえれば楽なのですが、桁数の違いで位置がズレる問題があります.
なので結果的にひとつひとつ座標を決めて配置するのが無難になります(敢えて左寄せでいい…って人はそれでもいいですが).
しかしここで面倒事があります.
月によって1日の曜日は様々なのでそれを踏まえて座標を決めなければなりません.
都合のいいことに、日付フォーマットを使ってその日付の曜日に対応する数字を取得することができるため、その月の1日の曜日に対応する数字を使うことで各々のx座標を整理することができます(具体的な計算式は該当場所で).
まずは希望の壁紙を決めておきます.
今回は画像の通りbase64エンコード済の壁紙をデコードして変数に置いていますが、カメラロールやファイルアプリなどにあるならそれらに対応するアクションで取得しておきます.
次に当月の1日の曜日に対応する数字を取得します.
「日付をフォーマット」を追加してオプションを開き、「日付の書式」を「カスタム」に、その下にある「文字列をフォーマット」の項目をyyyy/MM/01に書き換えます.
これでこの結果は当月の1日に固定されます.
更に同じ「日付をフォーマット」を追加し、上の結果に対して同じく「日付の書式」を「カスタム」に、その下の項目をeにします.
この結果を適当な変数(今回はmargin)に置きます.
こうして得られた変数marginは、当月1日の曜日に対応する数字となります.
日付フォーマットのeは日曜なら1、月曜なら2、…、土曜なら7に対応します.
次に当月の最終日を取得します.
単純に日付フォーマットで得られればいいのですが少し工夫が必要で、まず「日付をフォーマット」で当月の1日を取得します.
その結果に対して「日付を調整」で1ヶ月を追加、更に同じ「日付を調整」で1日を減算します.
これで例えば記事を投稿した2026/1/20であれば
2026/1/1
→2026/2/1
→2026/1/31
となるわけです.
この結果に対して「日付をフォーマット」を使い、「日付の書式」を「カスタム」に、その下の項目をdにすることで日付だけを取り出すことができます.
これを今回は変数maxという名で置きます.
ここから実際に壁紙にカレンダーとなる情報を書き込みます.
まずは月表示から.
「日付をフォーマット」で「日付の書式」を「カスタム」にし、「文字列をフォーマット」の中身を M月 とします.
これに対して「テキストを重ねて表示」アクションを使います.
重ねるテキストは上で取得した月を、重ねる対象は最初に用意した壁紙の画像を、位置は「カスタム位置」にし、希望の座標にしておきます.
その他フォントの種類やフォントサイズなどもオプションから好みで指定します.
ここから更にメインのカレンダーを書き込むので、「テキストを重ねて表示」の結果に対して壁紙の変数を上書きします.
ここからがカレンダーのメイン部分になります.
先程当月の末日をmaxとして取得したのでこれに対して「繰り返す」アクションを使います.
実際に書き込む日付は「繰り返す」の中で使える「繰り返しインデックス」が使えます.
そして各日付が対応する位置ですが、具体的には以下になります
の2つはカレンダーとなる部分の初期位置です.
[text: x_s,y_s]の2つは各日付の間隔です.
実際にレシピで各場合は画像のようにしてください.
どうしてこんな式になるかは…まあ結果的にこれで合ってたからです.
この4数が具体的にどんな数が適切かは、使用している端末の種類と配置したい場所次第です.
それが決まるまでは壁紙を設定するアクションを配置せず結果だけを見たり、後で前の壁紙に戻せるようにするなどしてください.
これを使って実際に日付を書き込むわけですが、折角なので今日の日付だけは色を変えたりサイズを大きくするなど、他と目立つようにしてみます.
まずは「日付をフォーマット」で「日付の書式」を「カスタム」に、「文字列をフォーマット」の中身をdにします.
これで今日の日付が取得できました.
これを使って場合分けします.
まずは上で取得した今日の日付に対応する数字が繰り返しインデックスと等しい、つまり「今日」の場合です.
「テキストを重ねて表示」で入力するテキストは繰り返しインデックス(結果的にはフォーマットした日付でもいいです)、位置は先程計算したxとyに、オプションを開いてフォントやフォントサイズなど、他と比較して目立つような設定にします.
その他の場合、つまり今日以外の場合は比較して控えめの設定にしておきます.
忘れずに壁紙の変数をこのif文の結果で上書きします.
この操作をmax回行えばカレンダーの各日付の書き込みが出来ているはず.
こうして得た画像をとりあえず確認してみます.
月表示とカレンダー本体の上下がややズレましたがカレンダー自体はうまく書き込めています.
アウトラインテキストの影響か、左下に棘みたいに飛び出てますね.
実用する場合はもうちょっとちゃんと調整が必要そうです.
同じことを繰り返すことで次の月、さらに次の月…と書き込むことも可能です.
〆
壁紙とフォント、フォントサイズ、アウトラインの組み合わせ次第では文字が見えないことがあるので気をつけましょう.
このレシピを作ってる時、なぜか1日の1だけ表示されてない(ように見える)現象に気づくのに少し手間取ってました.
