プログラミング初心者がJavaScriptで時計を作ってみた
こんにちはこんばんは。グラフィックデザイナーのヨシツグシュンペイです。
先日、Pythonの勉強を始めたnoteを書いたのですが
Paizaラーニング Python3入門編 前半を終了したので所感をしたためる
https://note.mu/peishum/n/n136bda059758
最近ちょっとJavaScriptに浮気してました。
何か作って人に見てもらおうと思った時に、Pythonだと作ったものをWebで公開するのがちょっとハードルが高いので、HTMLとの連携が良く、手っ取り早く見てもらうことができるJavaScriptをちょっとかじって、ブラウザで動く時計を作ってみました。
記述の方法は違えど、基本的な考え方や構造はPythonとほとんど変わらないので、意外とすんなり作れました。
作ったのはこれ。
COLOR CLOCK
http://spy.main.jp/clock/
時刻によって背景の色がゆっくりと変化する時計です。
日が昇り、沈むように、時間の経過とともにじわじわと色が移り変わっていき、24時間かけて色相環を一周します。
今回はJavaScriptでの時刻表示が目的の一つだったので、このような形になってますが、眺めているうちに、これ時計表示無くして、色相だけで時刻読み取るようにした方がアートとして尖ってるしミニマルでかっこいいと思い始めたので、そのうち時刻の表示非表示を切り替えられるようにしたいと思います。
構造としてはざっくりこんなかんじ。
何時は何色、と決め打ちで指定するのではなく、取得した時刻を計算式に入れて直接色指定に利用しているのがこだわりポイントです。
ほんとに初心者なのでめっちゃググりました。これらのサイトや記事を参考にさせていただきました。
HTML
HTMLでJavaScriptを使う方法
http://proengineer.internous.co.jp/content/columnfeature/5817
基礎から学ぶ!HTMLにCSSを適用させる方法【初心者向け】
https://techacademy.jp/magazine/9647
コーディングの基礎!HTMLでdivタグを使う方法【初心者向け】
https://techacademy.jp/magazine/12452
JavaScript
現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法
https://www.nishishi.com/javascript-tips/realtime-clock-setinterval.html
onloadイベントの使い方とハマりやすい注意点とはhttps://www.sejuku.net/blog/19754
実数を整数に丸める4パターン
https://ginpen.com/2011/12/07/rounding/
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
https://www.nishishi.com/javascript-tips/onload-page.html
JavaScriptにおける数値⇔文字列の型変換あれこれ
https://lealog.hateblo.jp/entry/2013/02/28/005010
数値→文字列、文字列→数値の変換
https://www.softel.co.jp/blogs/tech/archives/5524
joinや+演算子で配列や文字列を連結・結合する
https://www.sejuku.net/blog/21149
複数の条件式を組み合わせる(if..else if)
https://www.javadrive.jp/javascript/if/index3.html
if~else文
https://www.pazru.net/js/kihon/11.html
JavaScript if文の == と === の違い
https://itsakura.com/javascript-if-equal-diff
letとvarの使い方とスコープの違い
https://www.sejuku.net/blog/58429
Javascriptでhtmlを動的に書き換える方法!
https://qiita.com/n_oshiumi/items/5795de01187d5aafca07
タグ属性やスタイル属性をScriptで変更する
http://manabu.quu.cc/up/6/e61525m0.htm#TxtHelp_target
ウェブページの背景色を動的に変更する方法
https://www.nishishi.com/javascript-tips/doc-bgcolor.html
getElementByIdを完全理解する3つのコツ!
https://www.sejuku.net/blog/27019
JavaScriptで特定の要素やhtml,body要素の背景色を変更するなどの「style属性を追加する」方法
https://www.imamura.biz/blog/26926
ライブラリを使わない素のJavaScriptでDOM操作
https://qiita.com/kouh/items/dfc14d25ccb4e50afe89
Colors HSL
https://www.w3schools.com/colors/colors_hsl.asp
CSS
いつか使うかも?cssのfont-sizeをビューポート-パーセンテージで指定する
https://www.tam-tam.co.jp/tipsnote/html_css/post8935.html
CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう
https://saruwakakun.com/html-css/basic/width-height
回り込みの設定
http://www.webword.jp/cssguide/ref-visible/index4.html
floatとclearの応用
http://sakichin.com/chapter02/chapter02_step05_02.html
CSSで中央寄せの方法いろいろメモ
https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7
【CSS】Vertical-alignとtext-align、margin:autoを極めて上下中央、もう配置に困らないためのまとめ
http://unitopi.com/css-centering-2/
CSSで中央寄せする9つの方法(縦・横にセンタリング)
https://saruwakakun.com/html-css/basic/centering
CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法
http://phiary.me/css-text-vertical-top-middle-bottom/
CSSのmarginとは?paddingとは?余白の指定方法まとめ
https://saruwakakun.com/html-css/basic/margin-padding
HTMLでページ上部の空白、余白を消す方法
http://shiru-web.com/2017/06/26/01-62/
HTML5でHeader上部の隙間を埋める
https://qiita.com/silverskyvicto/items/2c10dc50d80ba89422c8
ページや要素の幅に合わせて文字サイズを変更する方法
https://teratail.com/questions/49808
IDを使った指定
https://www.tagindex.com/stylesheet/basic/format3.html
その他
様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/
正しいfaviconの設定方法を対応ブラウザ別にまとめる
https://glatchdesign.com/blog/web/coding/943
【2018年版】Google Fontsの使い方:初心者向けに解説!
https://saruwakakun.com/html-css/basic/google-fonts
Google Fonts
https://fonts.google.com/
JavaScriptもそうですけど、CSSについてかなり調べました。
記事を書いてくださった方々、ありがとうございます!おかげで時計を作れました。みなさんもよかったら参考にしてみてください。
ちょっと時計づくりにハマり始めて、上記のCOLOR CLOCKと別にあと2つ時計を作ってあるので、またnoteで紹介します。
そして新作も開発中です。完成したらこちらもnoteにて報告します。
最後まで読んでくださってありがとうございます!
それではまた!
この記事が気に入ったらサポートをしてみませんか?