チュートリアル

KLWPでカレンダーその1:2種類の週間カレンダーを作ってみる

20161113-klwp-1

KLWPを使ってカレンダーを作ってみます。カレンダーと言ってもいろんな種類がありますが、今回は週間カレンダー、7日分のカレンダーです。
週間カレンダーも表示方法がいくつかあると思いますが、「今日を中心に前後3日を含めた7日間」と「今日を含む月曜始まりの7日間」という2種類を作ってみます。

今日を中心に前後3日を含めた7日間

20161113-klwp-2

まずこちらが完成形。「今日」は11月13日です。なので13日が中央にきて、その前後3日間が左右に並んでいます。

20161113-klwp-3

今回に限らないのですが、KLWPの「グループ化(並べる)」というのは、こういった複数の要素が規則正しく並ぶものを作る時に非常に便利です。
今回のカレンダーではカレンダー全体を赤枠のグループ化(並べる)で作成しており、その中に1日ごとに青のグループ化(並べる)が7日分あり、その中にそれぞれテキスト2つで日と曜日が収まっています。

今日の表示

20161113-klwp-420161113-klwp-5

1日分の要素は「日」と「曜日」のテキストでできています。まずは「今日」の表示です。
「日」については
$df(dd)$
でOK

「曜日」は英語で表記したいので
$if(df(f)=1,mon,df(f)=2,tue,df(f)=3,wed,df(f)=4,thu,df(f)=5,fri,df(f)=6,sat,sun)$
としました。

20161113-klwp-620161113-klwp-7

ここでポイントですが、「日」も「曜日」もタイプを「幅を固定する」にし、改行が起こらない程度にしておきます。これを揃えておかないと、各曜日で幅がバラバラになってかっこ悪くなってしまいます。

今日より前の日付

20161113-klwp-820161113-klwp-9

次に今日よりも前の日付3日分です。これらについては、日付を表示する$df(dd)$$df(dd, r1d)$と「,r1d」を付けることで1日前のものを表示できます。2日前なら$df(dd, r2d)$です。

曜日の方も同様で、「今日」で書いたものを修正すればOKです。
$if(df(f,r1d)=1,mon,df(f,r1d)=2,tue,df(f,r1d)=3,wed,df(f,r1d)=4,thu,df(f,r1d)=5,fri,df(f,r1d)=6,sat,sun)$

20161113-klwp-1020161113-klwp-12

これで1日前の表示ができたので、3日分作ります。基本的にはコピーして数字を修正するだけです。

今日より後の日付

20161113-klwp-1320161113-klwp-14

続いて今日よりあとの3日間です。これも簡単で、前日までで「,r1d」だったのを「,a1d」に変えます。rからaです。

日:

$df(dd,a1d)$

曜日:

$if(df(f,a1d)=1,mon,df(f,a1d)=2,tue,df(f,a1d)=3,wed,df(f,a1d)=4,thu,df(f,a1d)=5,fri,df(f,a1d)=6,sat,sun)$

完成

20161113-klwp-1520161113-klwp-16

これであとはそれぞれの余白を調整すれば完成です。一応コンポーネント化したものを置いておきますね。

zooper-iconWeek1
制作: orefolder
価格: 無料

ダウンロード

今日を含む月曜始まりの7日間

20161113-klwp-18

次に「今日を含む月曜始まりの7日間」です。こちらは曜日の位置は固定、数字が入れ替わるのも1週間ごとです。

今回のものは、7箇所の表示位置があり、それぞれが「今日の曜日」によって表示位置を変えます。

枠1
MON
枠2
TUE
枠3
WED
枠4
THU
枠5
FRI
枠6
SAT
枠7
SAN
今日の日付 dd ff,a1d ff,a2d ff,a3d ff,a4d ff,a5d ff,a6d
dd,r1d dd ff,a1d ff,a2d ff,a3d ff,a4d ff,a5d
dd,r2d dd,r1d dd ff,a1d ff,a2d ff,a3d ff,a4d
dd,r3d dd,r2d dd,r1d dd ff,a1d ff,a2d ff,a3d
dd,r4d dd,r3d dd,r2d dd,r1d dd ff,a1d ff,a2d
dd,r5d dd,r4d dd,r3d dd,r2d dd,r1d dd ff,a1d
dd,r6d dd,r5d dd,r4d dd,r3d dd,r2d dd,r1d dd

これをそれぞれの枠に設定していけばいいのです。

20161113-klwp-1920161113-klwp-20

枠1:

$if(df(f)=1,df(dd),df(f)=2,df(dd,r1d),df(f)=3,df(dd,r2d),df(f)=4,df(dd,r3d),df(f)=5,df(dd,r4d),df(f)=6,df(dd,r5d),df(dd,r6d))$

枠2:

$if(df(f)=1,df(dd,a1d),df(f)=2,df(dd),df(f)=3,df(dd,r1d),df(f)=4,df(dd,r2d),df(f)=5,df(dd,r3d),df(f)=6,df(dd,r4d),df(dd,r5d))$

枠(曜日)ごとに少しずつズレていくので、コピーして修正ということになります。ちょっと面倒ですね。

20161113-klwp-2120161113-klwp-22

これでまた余白の調整などでとりあえずは完成です。

図形を使って「今日」を示す

20161113-klwp-2320161113-klwp-24

表現の仕方はいくつかありますが、「今日」の日付を図形で囲ってみます。

20161113-klwp-2520161113-klwp-26

それぞれの曜日の枠(グループ化したもの)の幅をテキストのタイプで「幅を固定する」にしておけば、枠ごとの幅が分かります。なのであとは曜日ごとにその幅を移動するように今日を現す図形の位置余白を調整する式を書けばOKです。

こちらもコンポーネント化しているので、詳しく知りたい場合はダウンロードしてどうなっているのか見てみてください。

zooper-iconWeek2
制作: orefolder
価格: 無料

ダウンロード

まとめ

基本的には日付と、その過去未来を表示する方法(a1dとr1d)を使えば、あとはコピペで作業となります。簡単ですね。面倒ですけど。
今回はグループ化で並べてみましたけど、1つ1つバラバラにできるのでレイアウトも自由自在です。今回のものはあくまで基本ということで。

次は月間のカレンダーに挑戦して見たいと思います。これもまた少々ややこしい&実際に作ると面倒なのですが、まぁ勉強ですね。


KLWPの使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

Random Posts

OPPO AX7が4800円!IIJmio、「夏トク!スマホ第二弾大幅割引キャンペーン」開始!
Mi Band 4 レビュー:カラーで見やすくなりバッテリーもちもいい、まさにスマートバンドの王者!
Xiaomi、画面内部埋め込み型インカメラを公開 – とうとうフルディスプレイの時代が到来か
シンプルタコさん【ホーム画面コンテスト2020】
アプリセール情報:平成の超名作クロノ・トリガーが半額の600円! ほか無料アプリなど
Google Pixel 5を購入!開封の儀とファーストインプレッション
GEVO ネックバンド型ワイヤレスイヤホン GV28 レビュー:クリアな音質とやさしい装着感がグッド
LINEモバイル「選べる5,000円相当!冬の選べるキャンペーン」開始!音声SIM契約で5000円相当もらえる!
Twitter、ツイートごとに返信できる人を3パターンから選択できるように!クソリプ防止に有用?
全額返金保証の影響か!?HUAWEI P40 Proが初ランクイン!今売れてるSIMフリースマホTOP10【BCNランキング 8/24~8/30】
楽天モバイルが下取りサービスを開始!下取り金額の支払いは楽天キャッシュで
Twitterが米大統領選期間にあわせRTの基本を引用リツイートに変更!
画面保護フィルムも貼ってもらえちゃう!「ファーウェイサービスデー 夏の感謝祭」を開催!
Amazonの「本を聴く」サービス、Audibleでライフスタイルの新しい形を試す
格安SIM歴10年、契約SIMは24枚…そんな今のスマホ料金を改めて確認してみる