Swift Playgroundsで学ぶiOSプログラミング

万年日めくりカレンダー を制作する

文●柴田文彦 編集●吉田ヒロ

2018年01月15日 17時00分

とりあえず日付だけでも表示できるようにする

 もちろん、今日の日付からのオフセットを表示しているだけではカレンダーとして機能しません。そこで次に、オフセットではなく絶対的な日付を表示するようにしてみましょう。そのためには、今日が何日かを知る必要があります。また、当たり前のようですが、今日から1日後の日付、つまり明日の日付も計算によって求める必要があります。月の変わり目を考えれば、単純に1だけ足せばいいわけではないことはわかるでしょう。また、大の月や小の月、うるう年などもあるので、話は複雑です。

 このような目的のためには、iOSの最も基礎的なFoundationフレームワークに定義されているCalendarとDateを使います。前者は元はNSCalendarという名前でしたが、SwiftからはCalendarとして使います。これはクラスではなく構造体(Structure)です、後者は元はNSDateと呼ばれていたクラスですが、同様にSwiftからはDateとして使えます。

 CalendarとDateの違い、それぞれの役割は混同しやすく、すぐには把握できないかもしれません。そのあたりについては、次回以降で基本的なところから解説するので、安心してください。簡単に言うと、Dateは過去から未来永劫続く時間の流れの中のある1点を表す概念的なデータです。それだけでは、それが何年何月何日何時何分であるかを言うことができません。それを決めるのがCalendarです。これは「暦法」のことだと考えられます。Calendarが違えば、年や月日の数字も違ってきます。例えば江戸時代の太陰太陽暦による年号、月日時の表現と、同じ時代でも西暦による表現はまったく違います。

 ここでは、CalendarViewControllerに手を加え、iPadの「設定」の「一般」の「暦法」で選択されているカレンダー(通常はグレゴリオ暦)を取得し、それに則って今日が何日かを調べて、その数字を表示するようにします。その際に、offsetの値を考慮しているので、今日からoffsetだけ離れた日の日付も求められます。

 とりあえず変更が必要なのは、CalendarViewControllerクラスのviewDidLoadメソッドだけです。

今日からのオフセットの数字を実際の日付の表示に変更するために、CalendarとDateを導入します。とりあえず現行のカレンダーで今日が何日かを調べ、その日付の数字をビューの中央に表示します

 このプログラムを動かすと、「今日」の日付がビューの中央に表示されます。

プログラムを動かすと、ここでは最初から「5」が表示されました。これは今日が5日であることを表しています

 この例で「5」と表示されているのは、今日が5日だからです。当然ながら、この数字は、このプログラムを起動する日によって異なります。

 このページを前にめくっていくと数字は増え、後ろにめくれば減ります。こんどは日付なので、「1」の前は「31」になります。

「1」が表示された状態でページを前にめくると「31」が表示されます。これは前月の月末の日付が「31」だからです。それがいわゆる小の月であれば「30」になります

 これはもちろん、前の月の最後の日付が「31」だったからで、月によって「30」だったり、「28」や「29」だったりします。もし日付だけわかればいいのなら、とりあえずこれで日めくりカレンダーとして機能していることになります。

年、月、日、曜日を表示できるようにする

 表示するのか日付の数字だけでも寂しいので、年、月、曜日の表示も加えてみましょう。今回は詳しく説明しませんが、Dateのオブジェクトから日付の数字を取り出したのと同様にして、年、月の数字を取り出し、それを文字列に変換して表示します。その際、年の数字の後には「年」を付けてから表示しています。

日付だけでなく、年、月、曜日も表示しましょう。それぞれのラベルを用意し、「今日」のオブジェクトから、まず月を表すコンポーネントの数字を取り出して文字列に変換し、月のラベルのテキストに代入します

 月の数字の後ろには、もちろん「月」を付けています。

月のコンポーネントについても、年のコンポーネントと同様の処理を実行します。日のコンポーネント部分は、上の例のままで手を加えていません

 一方、曜日については、数字そのままではなく、そこから曜日の呼び名(日、月、火、水、木、金、土)に変換してから表示します。その際に、日曜日は赤、土曜日は青、その他は濃いグレーの文字色を指定しています。

曜日に関してはほかのコンポーネントとはちょっと違う処理が必要です。曜日を表す数字(1~7)を、曜日の名前に変換する必要があるからです。またついでに土曜日と日曜日には、それぞれ特別な色を付けています

 レイアウトは簡単に言うと、年が左上、月が右上、日は相変わらず中央、曜日は右下を基準に配置しています。

レイアウトは、やはりviewWillLayoutSubviewsメソッドで設定します。中心の日付を囲んで、左上に年、右上に月、右下に曜日を配置しています

 今回も、その他の部分は変更の必要がありません。プログラムを実行すると、その日の年月日、曜日が表示されます。

このプログラムを動かすと、一般の日めくりカレンダーを模した画面が表示されます。CalendarViewController以外の部分には一切手を加えていません

 カレンダーをめくっていくと、土曜日は青、日曜日は赤で、曜日の名前が表示されることも確かめられます。

月曜日から金曜日までの曜日の名前が暗いグレーで表示されるのに対し、土曜日は青、日曜日は赤で表示されます。土曜日の青が薄く裏写りしていることがわかります

 また、一日から前の月の最終日に戻ると、月の表示や、場合によっては年の表示もしっかりと更新されます。前後にめくって、あれこれ確かめてください。

2018年1月1日の前は、しっかりと2017年12月31日なっています。月の境目では、日付だけでなく月も繰り下がったり、繰り上がったりするのです。もちろん年も同様です

次回の予定

 今回は、ページビューコントローラーの応用例として、iOSのカレンダー機能と組み合わせ、永遠に使える日めくりカレンダーを作ってみました。その際、iOSの基本的なカレンダーや日時の扱いについては詳しく説明できませんでした。次回は、そのあたりを、簡単なプログラムを動かしてで確かめながら、基礎的なことから詳しく解説する予定です。

mobileASCII.jp TOPページへ

mobile ASCII

Access Rankingアクセスランキング