「ウェブ自習室」の要素
自習室をつくってみました。 既存サービス・技術の寄せ集めです。便利な世の中ネ
勉強時間タイマーの部分
1.経過時間（秒数）をリアルタイムに表示する方法
javascriptのsetIntervalを使って1000ミリ秒（1秒）毎にカウントアップしていく方法が書かれていた。わかりやすい。ただ時刻に関する処理は行っておらず、1秒ごとに変数に+1していくだけなのでCPUの処理速度等によって誤差があるかもとのこと。なるほど～
2.経過時間を表示する（1）
スタート時刻と現在時刻を比較してカウントする方法が載っていた。そのものずばり！ タイマーを一時停止する方法がわからなかったのでまた検索し始める……
3.[むだ][HTML][JS] 時間経過を表示させるいい感じのなかったから作った
お！と思って紹介されているサイトにいく
4.【動画・サンプルコード付き】JavaScriptでつくる簡単ストップウォッチ
おおお～！まさに。中を見ると、1のカウントアップと同じ感じ。2の現在時刻とスタート時刻を比較する形式だと経過時間の処理がどうすれば良いかわからない。ということでここにあったコードを参考にさせていただきました。
リアルタイム閲覧者数の表示
これが結局自分で出来なくて忍者ビジターなるサービスを利用しました。そのうち自作したい機能です。googleのreal time reportのAPI利用には申請が必要だったみたいで一応申請はしたのですが、使い方がわからない（泣）。
あと、忍者ビジターhttpsだと使えないことがわかった！やっぱりgoogleのapiちゃんと使えるようになって自前でやりたひ……。
tweetボタンの作成
1.公式サイトのジェネレーター
ページ下部に行って選択すればボタンのコードが生成されるのでそれをコピペするだけでボタンが作れる。URLやハッシュタグ、メンション、テキスト等は予め設定できるけれどもテキストの内容に勉強時間を入れたかったのでもうちょっと検索することに……。
2.オリジナルのツイートボタンの呟き内容をjavascriptsで動的に変える方法
こちらを参考にしました。jQueryだったのでjavascriptの形にしてオンクリックで動作するようにしました。
見かけの部分
1.Google Fonts
htmlのhead部分にgooglefonts使うよ～として、CSSの方で使うフォントをあてていく感じです。
2.Bootstrap v4
レスポンシブデザインの便利なCSSが使えちゃう。class名を公式サイトで確認してhtmlに書き足せばおーけー。
便利な世の中
そんな感じで寄せ集めて公開した「ウェブ自習室」です。そもそもこれを作ろうと思ったきっかけ等は次の記事で書こうと思います。