体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

【Googleカレンダー活用術】Webページに埋め込んで表示させる方法

【Googleカレンダー活用術】Webページに埋め込んで表示させる方法

Googleカレンダーの「埋め込みコード」を使うと、他のWebサイトでもGoogleカレンダーを表示することができます。Gmailのアカウントにログインする手間が省けるため、Webサイト上で会議室の空き状況や予定をすぐに確認できる便利機能です。今回はGoogleカレンダーのWebページへの埋め込み方法、他のWebサイトに埋め込む際のGoogleカレンダーのデザインのカスタマイズ方法についてご紹介します。

GoogleカレンダーをWebサイトに表示させる方法~基本~

Webサイト公開用カレンダーを作成

Googleカレンダーを開いて画面左側にあるマイカレンダーの右上にある「他のカレンダーを追加」(+マーク)をクリックして「新しいカレンダー」を選択。 カレンダー作成画面が開いたらカレンダー名に任意の名前を入力。「カレンダーを作成」をクリック。

下部に表示される「設定」または、左側から作成したカレンダーをクリックし「一般公開して誰でも利用できるようにする」にチェック。「一般公開してもよろしいですか?」と警告メッセージが表示されるので「OK」をクリック。左上の「戻る」(←マーク)をクリック。 2で作成したカレンダーがマイカレンダーに追加されます。 カレンダーから日時をクリックして予定を登録します。

Webサイトへの埋め込み方

マイカレンダーで新しく作成したカレンダーの右横のオーバーフローメニュー(…が縦に並ぶマーク)をクリックして「設定と共有」を選択。 「カレンダー設定」画面の「埋め込みコード」をコピー。※画像参照

WebサイトのHTML編集ページを開いて2でコピーした埋め込みコードを表示したい箇所に貼り付け。 WebサイトにGoogleカレンダーが表示されます。

Webサイトに埋め込むときの注意点

Webサイトの埋め込みコードは、パソコンのGoogleカレンダーでしか設定できません。スマホアプリには埋め込みコードを生成する機能はありません。また、Webサイトに公開させるカレンダーのアクセス権限が「一般公開」でないとWebサイトに埋め込みコードを貼り付けてもGoogleカレンダーは表示されないので注意しましょう。他のWebサイトに表示させるときは「Webサイト公開用カレンダーを作成」の手順2で「カレンダー作成」をクリックした後に「設定」をクリックして「カレンダーを一般公開する」に必ずチェックを入れるようにしてください。

GoogleカレンダーをWebサイトに表示させる方法~応用~

Googleカレンダーのデザインをカスタマイズ

gcalendar-wrapper.php」というスクリプトを使うとGoogleカレンダーの背景色、文字の色をカスタマイズできます。ただしFTPソフトでファイルをアップロードするためのレンタルサーバーが必要です。 gcalendar-wrapper.phpのダウンロードページにアクセス。

http://www.unitz.com/u-notez/2009/04/color-customization-for-embedded-google-calendars/ Installation and Usageの「Download the wrapper script」をクリック。 「ダウンロード」フォルダーに「gcalendar-wrapper-20101115」というZIPファイルが保存されたらファイルを解凍。 gcalendar-wrapper.phpをメモ帳などのテキストエディタで開きます。 23行目から30行目の「Set your color scheme below」の該当項目を任意の色に変更して保存。

1 2次のページ
リクナビNEXTジャーナルの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。