HTMLの基本、Webページにカレンダーを設置する方法
  • facebookページ
  • twitterページ
  • 2020.03.30

    HTMLの基本、Webページにカレンダーを設置する方法

    フォームで日付を入力してもらったり、スケジュールをチェックしてもらう時など、Webページに設置されたカレンダーは、利用者にとって便利な機能です。HTMLを扱うエンジニアなら、ぜひ、知っておくべきでしょう。そこで、Webページでカレンダーを設置する方法について解説します。

    Webページにカレンダーを設置するには

    Webページで日付を入力する場合、カレンダーが表示されて、日付をクリックするのが常識と言えます。しかし、Webページのデザインに合わせたカレンダーを表示することは簡単ではありません。まずは、HTMLでカレンダーを設置する際に検討したい内容を紹介します。

    どんなカレンダーが必要なのか

    Webページに表示されるカレンダーには、クリックする日付の数字だけを表示する小さなものから、簡単な予定も表示できる、ある程度の大きなサイズなど、目的に応じていろいろなタイプが使われています。

    また、枠と数字だけの簡単なものから、ページ全体に合わせてデザインされたカレンダーなど、デザインを考慮して作り込んだカレンダーを設置することも可能です。

    さらに、ゼロから作ることもできますが、WordPressのプラグインを活用すれば、プロがデザインしたカレンダーを簡単に使えるなど、設置方法もいろいろ選べます。

    まずは、どのようなカレンダーが必要なのかを明確にしましょう。そのうえで、どうやって作るか、どんなデザインにするかなどを検討しましょう。

    どうやって作るか

    Webブラウザにカレンダーを設置する一般的な方法は、HTMLのテーブルタグを使って枠を作り、表示する月に合わせて数字を配置します。なお、表示する月の固定ページを用意して表示することもできますが、指定した月のカレンダー用のテーブルをその都度合成するのが一般的です。そして、合成する方法としては、phpやJavaなどのサーバー側のプログラムを使ったり、Webブラウザ側のJavaScriptを使う方法など、用途に合わせて選べます。

    例えば、サーバー側のデータベースに格納された予定を表示したいなら、サーバー側のプログラムを使う方法が良いでしょう。WordPressのカレンダーは、これに当たります。

    一方、Webシステムの利用者に日付を入力してもらうなら、年や月を切り替えるを、それに合わせたカレンダーが表示できなければなりません。その場合、Webブラウザ側で表示を切り替えられるJavaScriptを使ったカレンダーが向いています。

    HTML5ならタグだけでも使える

    もし、日付を入力できれば、簡単なカレンダーでも構わない、というのであれば、HTMLのバージョン5の機能により、Webブラウザが持っているカレンダー機能も利用できます。なお、使い方は簡単で、inputタグでdate属性を指定するだけです。

    なお、このタグで表示されるのは、Webブラウザに予め組み込まれているカレンダーです。Webブラウザによって、表示されるカレンダーのデザインが違うので、デザインを重視するWebページではおすすめできません。

    Googleカレンダーを利用する

    Webページにカレンダーを設置する方法として、HTMLの知識があれば誰でもできる簡単なやり方が、Googleカレンダーを埋め込む方法です。この場合、このカレンダーに予定を登録するための専用のGoogleアカウントが必要になりますが、プログラムの知識が無くても本格的なカレンダーを設置できます。

    なお、設定方法は、Googleカレンダー埋め込みを解説しているページがあるので、そちらを参照してください。

    Googleカレンダーをウェブサイトに追加する

    また、この方法ではiframeタグを使い、Googleカレンダーのサイズに合わせた埋め込み窓を使っています。そのため、サイズの調整はできないので、Webページ全体のGoogleカレンダーサイズに合わせて調整してから、利用してください。

    カレンダーをJavaScriptで作成する

    利用者に日付を入力してもらう際、Webページのデザインに合わせてたカレンダーを表示するには、ボタンを押した際にJavasScriptでカレンダーを生成し、クリックした日付をフォームに反映させます。

    なお、JavaScriptのプログラムと聞くと、難しいと思わる方がいるかもしれません。しかし、カレンダーは、ネットを検索すれば多くのサンプルが見つかるくらい、比較的簡単につくれる機能です。次から、JavaScriptで作るHTML用のカレンダーの特徴と作り方を紹介します。

    カレンダーはtableで作るのが基本

    先ほど簡単に紹介したように、カレンダーはテーブルタグで作ります。具体的には、まず、7×6のテーブルを作り、1行目に曜日を表示し、その下に曜日に合わせた一か月文の日付の数字を表示します。

    なお、JavaScriptのDateオブジェクトのメソッドを使えば、日付に対応する曜日が取得できます。また、ちょっと面倒ですが Google Calendar APIを使えば、祝日を表示させることも可能です。

    そして、タグを追加するcreateElementメソッドなどを組み合わせて、テーブルに必要なtrタグやtdタグを合成します。さらに、カレンダーの大きさや、数字の修飾、色などは、スタイルシートで準備してください。

    翌月や前月へのボタンを配置する

    カレンダーを設置する場合、今月のカレンダーだけではなく、来月やそれ以降のカレンダーへの切り替えも必要です。また、過去の記事を選んでもらうカレンダーなら、前の月を表示する機能が必要になるでしょう。

    このように、カレンダーには翌月や前月への切り替えタンが必要です。そして、ボタンを押した際に、翌月または前月のカレンダーを表示するように、JavaScriptに引数を設定し、それを使ってDateオブジェクトのメソッドで呼び出す日付を調整し、曜日を合わせる機能を用意します。

    日付をクリックした際の処理

    カレンダーが表示できたら、日付をクリックした際の処理を追加します。具体的には、日付の数字をクリックしたらinputタグに日付のテキストを入力したり、該当する記事を表示するなどの機能で、これもJavaScirptで用意します。

    また、大きなサイズのカレンダーなら、日付の枠にアイコンを用意し、それをクリックするとJavaScriptで用意した機能が動作する、といった機能を作ることも可能です。

    サーバーとの連携など

    これまで説明したように、日付を表示するだけのカレンダーをJavaScriptで作ることは、それほど難しいことではありません。しかし、サーバーに格納されたデータをJavaScriptの機能を使ってカレンダーに表示させることは、非同期通信の処理を準備したり、サーバー側でデータを送信する機能を作るなど、かなり手間がかかります。

    そのため、必要なら専門の業者やプログラマーに依頼しなければなりません。また、もし複雑な機能が必要な場合は、どんな機能が必要かを明確にし、関係者に説明できるように準備しておきましょう。

    カレンダーをサーバー側で作る

    予めサーバーに登録されたスケジュールなどを表示するカレンダーを作る場合、それらのデータにアクセスできるサーバー側でカレンダーを含むHTMLを合成するのが一般的です。次から、サーバー側のプログラムでカレンダーを作成する方法について紹介します。

    WordPressのプラグインを使う

    Webサイトにカレンダーを設置する最も簡単な方法は、フレームワークを使い、そのフレームワークで使えるカレンダーを使う方法です。そして、Webサイトのフレームワークとして最も多く使われているのがWordPressであり、WordPressの標準のカレンダーの他、プロがデザインした多くのプラグインも利用できます。

    なお、WordPressにカレンダーを設置するのは簡単で、管理者でログインしてウィジェットの中からカレンダーを選んで設置するだけです。また、管理画面からプラグインの管理画面から新規追加でカレンダーを検索し、気にいったプラグインをインストールし、それを利用することも可能です。

    ただし、プラグインで導入できるカレンダーをWebページのデザインに合わせられるとは限りません。また、WordPressのバージョンアップなどで、プラグインのカレンダーが使えなくなることもあります。

    サーバー側のプログラムとして作成する

    Webページのデザインに合わせたカレンダーを設置するなら、サーバー側で動作するプログラム言語などでカレンダー表示処理を作成するのが最適です。カレンダーに組み込む機能によっては、複雑なプログラムが必要なケースもありますが、基本的なカレンダー機能だけなら、それほど難しいプログラムではありません。

    なお、ネットで検索すると、phpなどのプログラム言語で作られたカレンダーの例が幾つも見つかります。そして、もしスキルがあれば、そういったプログラムを参考にオリジナルのカレンダーを作ることも可能です。また、プログラムスキルが不十分な場合は、イメージ図を渡して業者に作成を依頼する、といった手段もあります。

    Webページに設置するなら利用者が使いやすいカレンダーを

    検索エンジンの評価が高まる利用者が使いやすいWebページには、カレンダーが欠かせません。そして、HTMLのバージョン5なら、フォームで簡単にカレンダー機能が使えます。また、JavaScriptを使えば、Webページのデザインに合わせたカレンダーの設置も可能です。

    これまで紹介したようにWebページにカレンダーを設置する方法は幾つもあります。それぞれの作り方を学び、目的に合わせて、利用者が使いやすいカレンダーを設置しましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア

    関連ワード

    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE