クリスマスな時計を作る！

はじめまして、くれあです！
シャンシャンシャン:bell:
もうすぐクリスマスですね～
――おっとこんな時間、それでは、時計を作ってみましょう笑

## 現在時刻を表示する
Webからカンタンになでしこ使えます:point_down::point_down:

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

現在時刻を表示するには、
「今を表示する」
これだけです！

```
今を表示する
```


簡易エディタで実行すると、現在の時刻が
「12:03:48」
のように表示されます。

## 表示した時刻を更新させる
表示した時刻が動けば時計です。
時計を動かすために、なでしこのラベル機能を使います。
「秒毎」機能を使うと、指定した時間間隔で実行してくれます。
1秒毎だとカクつくので、1/60秒毎にしています。

```
時間ラベル＝今のラベル作成

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで
```


## 飾りつけ
とはいえ、「12:03:48」だけだと味気ない――。
もうすぐクリスマスなので、クリスマスっぽく飾り付けしよう！！:evergreen_tree:

なでしこ3は、主にWebブラウザで使うことを目的とした日本語プログラミング言語。
Webブラウザ関連の機能はお得意なのです。:sunglasses:

ネットに使えるフォントがないか探していると――

https://fonts.google.com/


> **Google Fontsとは？**
Webフォントとして無料で提供されている、プログラミングインタフェースとして利用可能なインタラクティブなディレクトリーサービス。
[Google Fonts - Wikipedia](https://ja.wikipedia.org/wiki/Google_Fonts "Google Fonts")

現在、1300種類を超えるフォントが使える様子。
クリスマスっぽいフォントを探してみると
**「[Leckerli One](https://fonts.google.com/specimen/Leckerli+One)」**
これにしてみました。いい感じです:santa:

GoogleフォントのリンクとなでしこのHTML設定機能を使います。
DOMスタイル一括設定機能を使って、ラベルの文字をクリスマスな味付けにします。
細かいことは、下の例文を参考にして下さい。
文字を中央に揃えたり、いろいろ整えます。

```
#フォントを設定する
DOM親要素に『
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap" rel="stylesheet">
    』をHTML設定

#時間を表示する
時間ラベル＝今のラベル作成

#時間ラベルを飾りつける
時間ラベルに｛
    文字サイズ： 「{1×80}px」、
    色：赤色、
    /*上の余白*/「padding-top」：「{2×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「行揃え」：「中央」、
    ｝をDOMスタイル一括設定

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで
```

設定項目については

https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E5%92%8C%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB&show

日本語の設定項目名わかりやすい！
ここにないものも、CSSでの設定項目名が基本的にそのまま使えます。
（補足：例分で、文字サイズなどを 「{1×80}px」と表記しているのは、だいたい自分のPCで80pxで1cmになるからです。）

ついでに、日付機能を付けて、飾りつけをして、完成！:smiley:

```
#クリスマスな時計
#2021/12/22

#日数を設定する
日数に今日の/*9文字目*/9から2文字抜き出して代入
/*05日を5日にするために*/日数に「{日数×1}」を代入

#フォントを設定する
DOM親要素に『
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap" rel="stylesheet">
    』をHTML設定

#時間、今日の日付、飾りつけを表示する
時間ラベル＝今のラベル作成して改行作成
日付ラベル＝「~ {今年}.{今月}.{日数} ~🎄」のラベル作成
飾りつけラベル＝「❄ Merry Christmas !! > 🦌🎅」のラベル作成

時間ラベルに｛
    文字サイズ：「{1.3×80}px」、
    色："crimson"、
    /*上の余白*/ 「padding-top」：「{1×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

日付ラベルに｛
    文字サイズ：「{0.4×80}px」、
    色："darkcyan"、
    /*上の余白*/ 「padding-top」：「{0.5×80}px」、
    /*下の余白*/ 「padding-bottom」：「{0.5×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

飾りつけラベルに｛
    文字サイズ：「{0.4×80}px」、
    色："silver"、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで
```

完成品がこちら:point_down::point_down:

https://n3s.nadesi.com/id.php?869

実行するとクリスマスな時計の完成です！
フォントや文字色など自分好みにデコって
オリジナリティーあふれる時計を作ってみてください！！:alarm_clock:
🦌🛷:santa::v:

## 参考
https://news.mynavi.jp/techplus/article/nadeshiko-54/

→ラベルの書き方や設定項目など参考になります。


https://nadesi.com/v3/doc/index.php?%E5%91%BD%E4%BB%A4%E4%B8%80%E8%A6%A7%2F%E6%A9%9F%E8%83%BD%E9%A0%86&show

→なでしこ3で使える機能の一覧です。