› 田舎のITコンサル社長ブログ › コンテンツとアプリその他 › Googleカレンダーをホームページに貼り付ける方法

2013年03月04日

Googleカレンダーをホームページに貼り付ける方法

先日、ホームページの件でお客様をご訪問した際に、
トップページにカレンダーを表示出来ないかとご相談を受けました。

いわゆる定休日など表示したいと、
そういったご相談です。

やり方は色々ありますが、
大きくはデータベースから値を取るか、
ベタにHTMLやJavascriptで組むか、
そのどちらかになると思います。

恐らく、15年前ならベタにHTMLで書いてましたし、
10年前なら、CGIやJavascriptでそれなりに表示してました。

でも今なら、
Googleカレンダーを表示させる方法が無難かと思います。
UIもスッキリしていて分かりやすいですし、
何より値をDBに持っているので、メンテナンスもしやすいです。

Googleカレンダー
https://www.google.com/calendar/render?hl=ja

ご存知、Googleカレンダーは、Googleの無料サービスです。
ログインアカウントがあれば、自由にカレンダーを使えるのですが、
結構知られていないは、複数のカレンダーが使えることです。

つまり、ご自身のアカウントがあれば自社カレンダーが作れます。

マイカレンダーにて、
新しいカレンダーを作ります。
今追加したカレンダーを表示しつつ、
以下の設定を選択します。

---

---

以下のような埋め込みツール画面が表示されますので、
左側に並ぶパラメータを好みに応じて調整していきます。
色やサイズも変更できますので、限られた機能で宜しければ、
とても無難な仕組みです。

---

---

そのパラメータに応じて、HTMLタグが編集されていきますので、
画面中央に表示されるビューを見ながら調整し、
気に入ったところでHTMLタグをコピーし、
ホームページへ貼り付けます。

すると、例えば以下のような感じになります。




こんな感じで大きさも変更出来ます。




ご注意いただきたいのは、
権限のところです。
誰でも書き込めるようにするのか、
ご自身だけなのかなど。

この部分は仕組みをご理解した上で設定を行わないと、
とても怖くて公開出来たものではありません。
是非、セキュリティーのキモを抑えつつ、
ご活用ください。



同じカテゴリー(コンテンツとアプリその他)の記事画像
スマホアプリで無党派層へリーチ
Google Analytics で検索キーワード確認方法
「EvernoteとDropboxの活用法」勉強会
Google Reader サービス終了通知
インターネットを安全に使うためのアドバイス
同じカテゴリー(コンテンツとアプリその他)の記事
 スマホアプリで無党派層へリーチ (2013-06-27 16:08)
 Google Analytics で検索キーワード確認方法 (2013-04-22 11:30)
 「EvernoteとDropboxの活用法」勉強会 (2013-04-18 23:59)
 Google Reader サービス終了通知 (2013-03-20 23:28)
 インターネットを安全に使うためのアドバイス (2012-05-17 23:56)
 IE7とIE8で小さく表示される記号がある (2012-05-03 02:56)

※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。