Zooper勉強中:1ヶ月のカレンダーを作る

なにやら2chのZooperスレではカレンダーのことで盛り上がってました。
彼らが作ろうとしているカレンダーは次の月も表示できたり、Gooleカレンダーの予定があったら表示できたりと、ちょっと高度なようです。正直、私にはよくわからなかったので読み飛ばしてました。

とりあえず、元になっているのはここにあるカレンダーとそのスキン…なんでしょうか。

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

やってみた

たぶんアプローチの仕方は違うのですが、私も作ってみました。
131226-1
その月の月間カレンダーが表示され、当日は背景みたいのが付きます。

131226-2
全体的なモジュール構成はこんな感じです。

Rectが当日の背景
RichTextで曜日ごとに数字を表示
もう1つRichTextで一番上の日付表示です。これは、まぁ無くてもいいですけど。

131226-3
1つのリッチテキストで1つの曜日分を縦に並べてます。

1つの曜日ごとの日付群

131226-4
このリッチテキストの中身はこんなふうになってます。

Tu
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=3?
7
14
21
28$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=4?
6
13
20
27$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=5?
5
12
19
26$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=6?
4
11
18
25$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&&#Dl#=31?
3
10
17
24
31$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&&#Dl#!=31?
3
10
17
24$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=1&&#Dl#>29?2
9
16
23
30$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=1&&#Dl#<30?2
9
16
23$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=2&&#Dl#>28?1
8
15
22
29
$$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=2&&#Dl#<29?1
8
15
22

えーっと…ですね、まず「その月の最初の日が何曜日か」というのを調べました。以下のサイトを参考にしました。

このサイトによると

1日の曜日=(今日の曜日+8-今日の日付+7×(今日の日付を7で割った正数))を7で割った剰り

と表すことができるそうです。
これを参考に
(#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)
で1日の曜日を数字化しました。
そして1日が月曜日の場合は…と場合分けして、その月の火曜日の日付を表示しています。

29-31日の、月によって表示されるかどうか変わるものに関しては、Zooperには#Dl#という「その月の日数」というものがあるので、これを使ってまた場合分けしています。

当日の日付に付いてくるRect

131226-5
Rectで当日の日付に背景を作っています。
RectのAdvanced Parametersで、[ox][/ox][oy][/oy]を使って移動させています。
[oy]$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&&#Df#!=1?(63+(22*#DW#))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)=0&&#Df#=1?(42+(22*#DW#))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)!=0&&#Df#!=1?(63+(22*(#DW#-1)))$
$((#Df#+7-#Dd#+(7*floor(#Dd#/7)))%7)!=0&&#Df#=1?(41+(22*(#DW#-1)))$[/oy]
[ox]$#Df#!=1?(5+((#Df#-1)*40)):285$[/ox]

今回作ったカレンダーは月曜始まりとなっていますが、Zooperの#Df#は日曜が1となっており、また#DW#も日曜始まりで数えられます。これがなかなかクセモノです。

なので「日曜始まりの月で、今日が日曜日以外」「日曜始まりの月で、今日が日曜日」「日曜始まりの月以外で、今日が日曜日以外」「日曜始まりの月以外で、今日が日曜日」という4パターンにわけて数字を出し[oy][/oy]でまとめて囲っています。(自分がわかりやすいようにパターンごとに改行を入れていますが、無くても大丈夫です。)

[ox][/ox]は今日が日曜日かそれ以外かで場合分けしています。

ダウンロード

一応、このスキンは以下からダウンロードすることができます。よかったらどうぞ。
http://ux.getuploader.com/orefolder/download/164/calendar2.zw

まとめ

けっこう勢いで作ったので、どこか穴があるかもしれません。
また、フォントの大きさなどを変えると、いろいろ数値の微調整が必要になってきます。なので簡単に自分用にカスタマイズすることはできないかもしれませんが、まぁこんな感じで作れるよ、ということで。

  • 本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。
OREFOLDERの最新情報をお届けします
author icon
orefolder

OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。

スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。

⇨orefolderの記事一覧