jClocksGMT.jsを活用して世界各国の時間をリアルタイム表示する方法｜DAD UNION

今回は、jClocksGMT.jsを使ってグリニッジ標準時（GMT）から各国の時間を時計で表示する方法を紹介します。
このライブラリを使うと、簡単に複数のタイムゾーンの時計をウェブページに表示できます。分かりやすいように、詳細な手順を解説します。

Contents

jClocksGMT.jsとは？
ステップ1：CSSの設定
ステップ2：HTMLの設定
ステップ3：JavaScriptの設定
- jClocksGMT.jsの詳細設定
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するデモページ
ソース元：jClocksGMT
まとめ

jClocksGMT.jsとは？

jClocksGMT.jsは、jQueryベースのプラグインで、グリニッジ標準時を基準にして各国の時間をアナログまたはデジタル時計で表示することができます。多くのオプションが用意されており、簡単にカスタマイズ可能です。

ステップ1：CSSの設定

まず、時計表示のエリア（.jcgmt-container）のスタイルを設定します。以下のCSSを追加して、時計の見た目を整えましょう。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 20px;
}
.clockarea{
    width: 230px;
    margin: 0 auto;
}
.jcgmt-container {
    float:left;
    padding: 3px;
}
.jcgmt-container .jcgmt-lbl {
    font-size:10px;
    color: #333333;
    line-height: 22px;
    background: url(./images/jcgmt-clock_label.png) no-repeat;
    text-align: center;
    padding-bottom: 5px;
    width: 108px;
    margin: 0 auto;
}
.jcgmt-clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
    overflow: hidden;
}
.jcgmt-sec,
.jcgmt-min,
.jcgmt-hour {
    display:block;
    position:absolute;
}
.jcgmt-rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
}
.jcgmt-digital,
.jcgmt-date {
    font-weight:bold;
    font-size: 12px;
    color: #444444;
    text-align:center;
    margin-left:8px;
}
</style>

ステップ2：HTMLの設定

次に、HTMLを設定します。ここでは、東京の時間を表示する時計を2つ作成します。
グリニッジ標準時から東京の時間を時計で表示するエリアを2パターン「id=”clock_tokyo”」「id=”clock_tokyo2″」を用意しました。

<h1>jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示</h1>
<p>以下のは日本の東京時間を時計で表示してます。</p>

<div class="clockarea">
    <div id="clock_tokyo"></div>
    <div id="clock_tokyo2"></div>
</div>

ステップ3：JavaScriptの設定

最後に、JavaScriptを設定して時計を動かします。jquery.min.js（1.7.2）、jClocksGMT.js、jquery.rotate.jsファイルを読み込みます。
時計を表示するためのコード
$(‘時計表示エリア’).jClocksGMT({オプション})
を記述し、オプションは時計タイトル、グリニッジ標準時からの時差、時間表示形式、時計パターン等を設定します。

<script src="jquery.min.js"></script>
<script src="jClocksGMT.js"></script>
<script src="jquery.rotate.js"></script>
<script>
    $(document).ready(function(){

        $('#clock_tokyo').jClocksGMT(
        {
            title: 'Tokyo, Japan',
            offset: '+9',
            skin: 5
        });

        $('#clock_tokyo2').jClocksGMT(
        {
            title: '東京, 日本',   
            date: true, 
            dateformat: 'YYYY/MM/DD', 
            offset: '+9',
            skin: 4
        });

    });
</script>