【Zooper Widgetの使い方】第6回 : 条件分岐を使って1週間カレンダーを表示する

投稿日:2014/07/25 更新日:2014/07/25[PR記事]

Zooper Widgetの使い方、第6回目は前回扱った条件分岐を使って、1週間分の日付と曜日を表示するカレンダーを作ります。
Zooper Widgetの機能としてどんなことができるのかを理解し、それをどう使えば思うような表現になるのか、そこに頭をひねるのがまた本アプリの面白さでもあります。

Zooper Widget

価格：無料
開発：MYCOLORSCREEN

カレンダーを作る前に、普通に今日の曜日を表示してみましょう。高度なテキスト編集で「#DEEEE#」と入力すれば曜日が表示されます。
ただし、Zooper Widgetを日本語表示で使っている場合、曜日も日本語で表示されてしまいます。まずはこれを英語で表示できるようにします。

これで曜日が英語で表示されます。ポイントは2つ。

#Df#というのは、曜日を数字で表示するものです。日曜日が1、月曜日が2、土曜日が7です。

そして$#Df#=1?Sunday$は#Df#の数字が1の時にSundayを表示、ということなので、日曜日ならSundayと表示、という意味になります。そのあとも数字と言葉が変わっているだけで、#Df#が2ならMondayを表示、#Df#が7ならSaturdayを表示、ということです。

曜日を数字で現して、それを英語に置き換える、というわけです。無論、英語ではなく、ひらがなで「にちようび」と表示することも可能です。

上図のような、当日を中心に、前後3日間ずつ、計7日間の日付を表示したカレンダーを作ります。

これは1日ごとに別のモジュールを使って作成しました。

まずは中心の「本日の曜日と日付」です。前項でやったようにして、曜日を3文字の英語表現に直します。そして今日の日付#Ddd#も表示させます。
[b][/b]を使って、太字で表示、[sr=1.2][/sr]で日付部分は1.2倍の大きさで表示されるようにしています。

「昨日の日付」については、#D-1440d#を使います。D-1440というのは、現在から1440分前を、そのあとの日付書式で表示する、というものです。#D-1440MM/dd#なら、昨日の日付、#D-1440EEEE#なら昨日の曜日です。この数字は分単位で変えることができるので、#D-10HH:dd#なら10分前の時間を表示します。

あとはこれを先ほどの「今日の日付」に加えて、「昨日の日付と曜日」を表示します。

同様に、#D+1440f#とすれば現在から1440分後ということになるので、明日の日付などを表示できます。

これを前後3日間分数字を変え位置調整しながら作れば、現在時刻を中心とした前後3日間ずつのカレンダー表示が完成です。

次は似たようで少し違うカレンダーを作ってみます。
今度は本日が属する日曜から土曜の1週間を表示するカレンダーで、それぞれの曜日の位置は固定、「今日」の部分は太字で表示する、というカレンダーです。

まずは日曜日の部分です。

ちょっとややこしいですね。項目ごとに切り分けて考えましょう。

これは曜日部分です。今回は曜日は固定なので、本日が日曜日なら太字で、それ以外は普通に「sun」と表示します。

#Df#=1、つまり日曜日なら本日の日付を太字で表示します。

#Df#=2、つまり月曜日ならこの位置（その週の日曜日）は1日前の日付なので、#D-1440dd#として1日前の日付を表示します。
この後の#Df=3?#D-2880dd#$と続くものも、同様に考えて火曜日なら2日前の日付、水曜日なら…と続きます。

日曜から土曜まで、すべて同じようにして作ります。
現在の日付が月曜日の時は、木曜に該当するテキストは3日後ということで#D+4320dd#となります。

今回の2つのカレンダーは、見た目は似ていますが作り方や考え方は少し違います。
最初の方はモジュールごとに曜日を変化させ、2番目の方は日付を変化させています。

どうやって作ったらいいのか、それを導き出すまでが大変ですが、頭を柔らかくして思いついたときはなかなかの快感です。また、同じ結果でもやりかたは1つではありません。
いろいろチャレンジしてみてください。

Zooper Widget

価格：無料
開発：MYCOLORSCREEN