CodeZine(コードジン)

特集ページ一覧

Facadeデザインパターンを利用したオブジェクト指向JavaScriptカレンダーの作成

月ごとの画像表示が可能なJavaScript+CSSによるカレンダー

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/06/05 14:00

年と月を順にナビゲートしていって特定の日付を選択できるWebベースのカレンダーを見たことがある人は多いでしょう。残念ながら、そのほとんどはあまり魅力的ではありません。本稿では、月ごとに別の画像を表示する独自のカスタマイズ可能なカレンダーの作成方法を説明します。

目次

はじめに

 ある日、私は買い物をしていて、かなり多くの小売店がそれぞれに趣向を凝らした画像入りのカレンダーを配っていることに気が付きました。そこでふと思ったのは、表示される画像を月ごとに制御できるWebベースのカレンダーを作成したら面白いだろうなということです。さらに、このカレンダーを画像なしでも表示できるようにして、日付ピッカーコンポーネントの役割も果たせるようにしたらどうかと考えました。

Facadeデザインパターン

 デザインパターンはおもしろい概念です。通常、デザインパターンとは、プログラミング言語で何かを行う一般的な(通常は効率的な)方法を表します。ニュースフィードの統合に欠かせないModel-View-Controllerデザインパターンについては、既に別の記事で取り上げました。デザインパターンは言語に関係なく適用可能です。おそらく皆さんも、これまで知らず知らずのうちにデザインパターンを使用しているのではないかと思います。

 ファサード(Facade)とは、仰々しく飾り立てられた正面の外観――つまり「表の顔」――を指す建築用語で、その裏側にある魅力のない構造および機能を隠蔽する方法です。例えば建築家は、本体はれんが造りの建物なのに、通りに面した側には大理石のファサードを追加したりします。同様に、Facadeデザインパターンは、開発者が複雑なオブジェクトの周囲にラッパー(つまり表の顔)を作成するときに使用する概念です。このようなラッパーは、オブジェクトのメソッドとプロパティを公開しますが、他のほとんどの部分は隠蔽します。一般的には、Facadeパターンを適用することでオブジェクトを扱いやすくし、特定の目的に適した「表の顔」を用意します。

 本稿で紹介するカレンダープロジェクトでは、まさにこのような処理を行います。カレンダーを作成するには、Facadeデザインパターンを使用して、組み込みJavaScriptのDateオブジェクトの周囲にラッパーを作成します。このラッパーは、カレンダーの作成に必要なDateオブジェクトのプロパティを公開します。ただ注意してほしいのは、今回のプロジェクトのラッパーはDateオブジェクトの機能を実際に隠蔽しているわけではなく、ただアクセスしにくくしているだけです。

本稿の課題

 JavaScriptベースのカレンダーを効率的かつ柔軟な方法で作成する。

解決策

 Facadeデザインパターンを使用してJavaScriptのDateオブジェクトの周囲にラッパーを作成し、さらにオブジェクト指向のJavaScriptのトリックを使用する。

CSSファイルの作成

 まず、カレンダー上部に表示される年+月のバナーと、カレンダー下部のナビゲーションバーのためのCSSルールが必要です。カレンダーには、「現在の日付」と「他のすべての日付」という2種類の日付が含まれます。「現在の日付」を「他のすべての日付」とは別の方法で表示するために、これらについても別々のCSSルールを作成する必要があります。また、バナー直下に表示される曜日を書式設定するためのCSSルールも必要です。図1は、完成済みのカレンダーの実行中のスクリーンショットです。ユーザーはカレンダーの下部にある矢印リンクを使用して、月または年を切り替えることができます。

図1 完成済みのカレンダーをブラウザ内に表示した様子
図1 完成済みのカレンダーをブラウザ内に表示した様子

 任意のテキストエディタを開いて、次のような一連のクラスを作成します。このファイルに「calendar.css」という名前を付けて保存します。

calendar.css
.month, .nav{
   background-color: navy;
   color: white;
   font: 10pt sans-serif;
}
.nav{
   cursor: pointer;
   cursor: hand;
}
.dayHeader{
   color: black;
   font: 10pt sans-serif;
   border-bottom: 1px black solid;
   font-weight: bold;
}
.empty{
   background-color: white;
   border-bottom: 1px black solid;
}
.days{
   color: black;
   background-color: rgb(235,235,235);;
   font: 10pt sans-serif;
   border-bottom: 1px black solid;
   border-left: 1px black solid;
   border-right: 1px black solid;
   cursor: pointer;
   cursor: hand;
}
.date{
   color: maroon;
   font: 10pt sans-serif;
   font-weight: bold;
   border-bottom: 1px black solid;
   border-left: 1px black solid;
   border-right: 1px black solid;
   cursor: pointer;
   cursor: hand;
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • Tom Duffy(Tom Duffy)

    DevXのJavaScriptライター。コネチカット州ノーウォークのノーウォークコミュニティカレッジ(NCC)の助教授で、Web開発とJavaを専門とする。学内のWebデザインスタジオ「NCC Ventures Lab」のマネージャでもある。電子メールの宛先はこちら。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5