日付を表示するWidget

iPod Touch Widget Theme

当日の年月日を表示する。

適用画像



ファイル構成

Touch Date/ Wallpaper.html ホーム画面を構成するHTML
Touch Date/js TouchDate.js javascript
Touch Date/css TouchDate.css スタイルシート

ソース

Wallpaper.html
<?xml version="1.0" encoding="UTF-8"?>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="JavaScript" src="js/TouchDate.js" ></script>
    <link rel="stylesheet" href="css/TouchDate.css">

  </head>
  <body>
    <div id="Date_Year">
    </div>
    <div id="Date_Day">
    </div>
    <script language="JavaScript"> UpdateTouchDate();setInterval('UpdateTouchDate()', 5 * 1000 )</script>
  </body>
</html>
TouchDate.js
/**
 * 曜日の表示設定値(変更しない)
 */
var WEEKDAY_LONG_EN  = 0;    /* 英語 完全表記 */
var WEEKDAY_SHORT_EN = 1;    /* 英語 短縮形 */
var WEEKDAY_LONG_JP  = 2;    /* 日本語 完全表記 */
var WEEKDAY_SHORT_JP = 3;    /* 日本語 短縮形 */

/**
 * 月の表示設定値(変更しない)
 */
var MONTH_LONG_EN    = 0;    /* 英語 完全表記 */
var MONTH_SHORT_EN   = 1;    /* 英語 短縮形 */
var MONTH_LONG_JP    = 2;    /* 日本語 完全表記 */
var MONTH_SPECIAL_JP = 3;    /* 日本語 陰暦 */

/**
 * 曜日の表示設定
 */
var WEEKDAY_NAME_TYPE = WEEKDAY_LONG_JP;
/**
 * 月の表示設定
 */
var MONTH_NAME_TYPE   = MONTH_LONG_JP;

var WEEKDAY_NAME = [
  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  ["Sun",    "Mon",    "Tue",     "Wed",       "Thu",      "Fri",    "Sat"],
  ["日曜日", "月曜日", "火曜日",  "水曜日",    "木曜日",   "金曜日", "土曜日"],
  ["日",     "月",     "火",      "水",        "木",       "金",     "土"]
];

var MONTH_NAME = [
  ["January", "Febuary", "March", "April", "May",  "June",    "July", "August", "September", "October", "November", "December"],
  ["Jan",     "Feb",     "Mar",   "Apr",   "May",  "Jun",     "Jul",  "Aug",    "Sep",       "Oct",     "Nov",      "December"],
  ["1月",     "2月",     "3月",   "4月",   "5月",  "6月",     "7月",  "8月",    "9月",       "10月",    "11月",     "12月"],
  ["睦月",    "如月",    "弥生",  "卯月",  "皐月", "水無月",  "文月", "葉月",   "長月",      "神無月",  "霜月",     "師走"]
];

function UpdateTouchDate()
{
  SetCurrentDay();
  SetCurrentYear();
}

function SetCurrentDay()
{
  var curTime = new Date();

  var curWeekday = curTime.getDay();
  var curDate = curTime.getDate();
  var curMonth = curTime.getMonth();

//var ret = WEEKDAY_NAME[WEEKDAY_NAME_TYPE][curWeekday] + " " + curDate + ", " + MONTH_NAME[MONTH_NAME_TYPE][curMonth];
  var ret = MONTH_NAME[MONTH_NAME_TYPE][curMonth] + curDate + "日 " + WEEKDAY_NAME[WEEKDAY_NAME_TYPE][curWeekday];

  document.getElementById("Date_Day").innerHTML = "";
  document.getElementById("Date_Day").innerHTML = ret;
}

function SetCurrentYear()
{
　　var curTime = new Date();

　　var curYear = curTime.getYear();

　　if (curYear < 1000) curYear += 1900;
　　if (curYear == 101) curYear = 2001;

　　var ret = curYear;

　　document.getElementById("Date_Year").innerHTML = "";
　　document.getElementById("Date_Year").innerHTML = ret;
}
TouchDate.css
div#Date_Year {
  position       : absolute;            /* 位置決め */
  top            : 20px;                /* 位置(上) */
  left           : 20px;                /* 位置(左) */
  font-family    : Helvetica;           /* フォント */
  font-size      : 70px;                /* 文字の大きさ */
  font-weight    : bold;                /* 文字の太さ */
  letter-spacing : 0.0em;               /* 文字の間隔 */
  color          : #C0C0C0;             /* 文字の色 */
  text-shadow    : #FFFFFF 1px 1px 1px; /* 文字の影(色 縦方向 横方向 影の幅) */
  opacity        : 0.4;                 /* 透過 */
}
div#Date_Day {
  position       : absolute;            /* 位置決め */
  top            : 60px;                /* 位置(上) */
  font-family    : Zapfino;             /* フォント */
  font-size      : 12px;                /* 文字の大きさ */
  font-weight    : bold;                /* 文字の太さ */
  letter-spacing : 0.0em;               /* 文字の間隔 */
  color          : #00bfff;             /* 文字の色 */
  text-shadow    : #6495ed 1px 2px 1px; /* 文字の影(色 縦方向 横方向 影の幅) */
}

ポイント

  • 更新周期は5秒なので、最大5秒の遅れがある。
  • javascriptの最初の方を変更すると表示方法を変更できるが、並びを変えようと思うと「var ret = …」の部分を変えないといけない。