Android(アンドロイド)特集記事

2014/07/25 Android(アンドロイド)特集記事

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


Zooper Widget
価格:無料

AppStore_Badge_JP_135x40


曜日を英語で表示

zooper-05-4

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

zooper-05-5

$#Df#=1?Sunday$$#Df#=2?Monday$$#Df#=3?Tuesday$$#Df#=4?Wednesday$$#Df#=5?Thursday$$#Df#=6?Friday$$#Df#=7?Saturday$

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

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

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

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

当日と前後3日間の日付を表示するカレンダー

zooper-05-6

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

zooper-06-1

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

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

zooper-06-2

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

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

zooper-06-3

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

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

日曜から土曜の今週1週間表示のカレンダー

zooper-05-10

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

zooper-06-4

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

$#Df#=1?[b]sun[/b]:sun$
[sr=1.2]$#Df#=1?[b]#Ddd#[/b]$$#Df#=2?#D-1440dd#$$#Df#=3?#D-2880dd#$$#Df#=4?#D-4320dd#$$#Df#=5?#D-5760dd#$$#Df#=6?#D-7200dd#$$#Df#=7?#D-8640dd#$[/sr]

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

$#Df#=1?[b]sun[/b]:sun$

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

$#Df#=1?[b]#Ddd#[/b]$

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

$#Df#=2?#D-1440dd#$

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

zooper-06-5

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

まとめ

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

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





Zooper Widget
価格:無料

AppStore_Badge_JP_135x40


QRコード
(Google Playストア検索)
qrcode
アプリ名 Zooper Widget
価格 無料
対応OSAndroid 3.2 以上
バージョン 2.50
デベロッパー名 MYCOLORSCREEN
レビュー日


関連記事




タグ: , , , , , , ,

※お手持ちの端末や環境によりアプリが利用できない場合があります。
※ご紹介したアプリの内容はレビュー時のバージョンのものです。
※記事および画像の無断転用を禁じます。


お気軽に一言お願いします

 

Facebook

トップヘ戻る