[JavaScript]デジタル時計つくる desktop用 #JavaScript

テクニカルテスト受けるまで基礎学中心！
個人アプリにはガッリ手を出せない。
でも、何かしら実装したい。。。
と思いプチアプリ作成をすることにしました。
（今回はデスクトップで見るようなので、webページに入れ込んだりできません。
ご了承くださいませ）

環境

Mac　10.14.6
Ruby 2.5.1p57
iTerm2 Build 3.3.7

制作時間

約３〜４時間（qiita書きつつ調べて画像集めつつなので思ったよりも時間がかかりました。
素材揃っていればもっと早く終わると思います）

作成手順

１から全部記述します。1~5は新規アプリ作成部分も含まれている
ので、不要な方は飛ばしてください。

1,任意のディレクトリにいどう(不要な場合はcdのみで○)

2,新規アプリ作成

ターミナル

$ rails new jsClock-simple -d mysql

3, `cd jsClock-simple`で今作成したディレクトリへ移動

4,Gitの管理下に置く

ターミナル

$git init 
$git add .   #.は全部という意味
$git status　#ちゃんと移動したか確認

5,GithubDesktopでリモートにアプリをあげる

参照

6,必須ファイル作成（１つのディレクトリにまとめる）

🌟index.html.haml
🌟style.css
🌟jsclock.js

7,ページの開き方

フォルダからインデックスまで移動し、ダブルクリック

コード

サイズとかは画像に合わせて変更してください
（今回画像がわはサイズ設定していませんが本当はした方が良いと思います；）

index.html

<!DOCTYPE html>
<html>

<head>
    <!-- 文字コードの宣言 -->
    <meta charset="UTF-8">
    <!-- ページのタイトル(ブラウザのタイトルバーに表示) -->
    <title>jsClock-simple</title>
    <!-- スタイルシート(CSS)読み込み -->
    <link rel="stylesheet" href="./style.css">
    <!-- JavaScript読み込み -->
    <script src="./jsclock.js"></script>
</head>

  <body>
    <img src="001.png" name="image">
    <script type="text/javascript">
      img = new Array("001.png","002.png","003.png","004.png","005.png","006.png"); //*1
      count = -1; //*2
      imgTimer();

      function imgTimer() {
        //画像番号
        count++; //*3
        //画像の枚数確認
        if (count == img.length) count = 0; //*4
        //画像出力
        document.image.src = img[count]; //*5
        //次のタイマー呼びだし
        setTimeout("imgTimer()",2000); //*6
      }
    </script>
    <!-- 時計枠 -->
    <div id="clock_frame">
      <!-- 日付部分 -->
      <span id="clock_date"></span>
      <!-- 時刻部分 -->
      <span id="clock_time"></span>
    </div>
  </bod>
</html>

style.css

/* Google Webフォントを利用設定するCSSをインポート どんなフォントがあるか試したのでコメントアウトがたくさん
ありますが、これはなくても動きます*/
/* @import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps); */
/* @import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Lacquer&family=Mansalva&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Lacquer&family=Mansalva&display=swap');

/* body要素(全体) */
body
{
    position: fixed;
    /* 文字色を白に */
    color: rgba(39, 38, 38, 0.904);
    /* 背景色を黒に */
    background-color: white;
}

/* id="clock_frame" のdiv要素 */
div#clock_frame
{
    /* 横幅を親要素であるbodyの100%(同じ幅)にする */
    width: 100%;
}

img{
    margin-left: 85%;
}
/* span要素のデフォルト */
span
{
    /* 本来はインライン要素であるspanをブロック要素として扱う */
    display: block;
    /* ここでは親要素であるdivの内部で右に寄せて配置させる */
    float: right;
    /* 横幅を親要素であるdivの50%にする */
    width: 50%;
    /* フォントの種類を一番上で指定したGoogle Webフォントに設定する */
    /* font-family: 'Lacquer', cursive; */
    /* font-family: 'Oleo Script Swash Caps', cursive; */
    /* font-family: 'Mansalva', cursive; */
    font-family: 'Coiny', cursive;
}


/* id="clock_date" のspan要素 */
span#clock_date
{
    display:none;
    /* この要素の中におけるテキストを右詰めにする デフォルト値のtext-align:leftを上書き */
    text-align: right;
    /* フォントの大きさを親要素であるdivで設定されたサイズ(px)の0.5倍にする */
    font-size: 0.5em;
    /* 右のパディングの幅を親要素であるdivで設定されたフォントサイズ(px)の0.5倍にする */
    padding-right: 0.5em;
}

/* id="clock_time" のspan要素 */
span#clock_time
{
    /* フォントの大きさを親要素であるdivで設定されたサイズ(px)の2倍にする */
    font-size: 2em;
}

jsclock.js

// 時計のメインとなる関数
function clock()
{
    // 曜日を表す各文字列の配列
    var weeks = new Array("Sun","Mon","Thu","Wed","Thr","Fri","Sat");
    // 現在日時を表すインスタンスを取得
    var now = new Date();
    // 年
    var y = now.getFullYear();
    // 月 0~11で取得されるので実際の月は+1したものとなる
    var mo = now.getMonth() + 1;
    // 日
    var d = now.getDate();
    // 曜日 0~6で日曜始まりで取得されるのでweeks配列のインデックスとして指定する
    var w = weeks[now.getDay()];
    // 時
    var h = now.getHours();
    // 分
    var mi = now.getMinutes();
    // 秒
    var s = now.getSeconds();

    // 日付時刻文字列のなかで常に2ケタにしておきたい部分はここで処理
    if (mo < 10) mo = "0" + mo;
    if (d < 10) d = "0" + d;
    if (mi < 10) mi = "0" + mi;
    if (s < 10) s = "0" + s;

    //　HTML: <span id="clock_date">(ココの日付文字列を書き換え)</span>
    document.getElementById("clock_date").innerHTML =  y + "/" + mo + "/" + d + " (" + w + ")";
    //　HTML: <span id="clock_time">(ココの時刻文字列を書き換え)</span>
    document.getElementById("clock_time").innerHTML = h + ":" + mi;
    // document.getElementById("clock_time").innerHTML = h + ":" + mi + ":" + s;
    //　HTML: <div id="clock_frame"> の内部要素のフォントサイズをウインドウサイズの10分の1ピクセルに設定
    document.getElementById("clock_frame").style.fontSize =  window.innerWidth / 10 + "px";
}

// 上記のclock関数を1000ミリ秒ごと(毎秒)に実行する
setInterval(clock, 1000);

完成

秒数はチカチカして見ずらかったので、画像が２秒毎で変わるように変更しました。

参照ページ

・おてがる！JavaScriptでシンプルなデジタル時計をつくってみよう(Webフォント使用/サイズ自動調整)
・にししふぁくとりー
・JavaScript で簡単に時計を作ってみた
・【2019年版】Google Fontsの使い方：初心者向けに解説！
・Google Fonts + 日本語
・Google Fonts
・Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
・一定時間で画像を切り換える
・【CSS】floatで横並びした文字・画像を中央寄せする方法！
・ferret

終わりに

プチアプリとしてサクッとつくる予定が思いの外、時間がかかりました。
何事も初めてのことは時間がかかります。
今回の記述は、Railsの全体の流れを考えず、Desktop用として作ったものですので
Web実装となるとコード丸々は使えないですね。
とはいえ、全く役に立たない訳ではありませんので、活かせる部分はweb実装の際に
役立て得られればと思います。
初学者のため、記述の不備やアドバイス、ご指摘をいただければ幸いです。
最後まで読んでいただき、どうもありがとうございます。

[JavaScript]デジタル時計つくる desktop用

環境