Web・コンピュータ > まるごとGoogleで作る、勉強会・イベントサイト

先日、運営に携わっているJavaScriptの勉強会、Kanasan.JSのサイトをリニューアルしました。

運営スタッフで集まって、Google GroupsからGoogle Sitesに移行したのですが、 Google Sitesがとても便利だったので、Google Groupsと併せて少し紹介してみます。

こんな人にお勧め

• ブログとかCMSの設置は面倒、簡単にサイトを構築したい
• 複数人でサイトを編集したい
• 好きなようにカスタマイズしたい。でも面倒なのは嫌
• 簡単に申し込みフォームを作りたい

主に勉強会やイベントを運営されている方、これから開こうとしている方を対象にしています。

ケース1）Google Groupsを使う

Kanasan.JS : JavaScript Workshop in Kansai | Google グループ

リニューアル前はKanasan.JSでも利用していたのですが、Google Groupsを利用すると 手軽にコミュニティサイトが作成出来ます。

長所

• 手軽に作成出来る
• メーリングリストが利用出来る

短所

• カスタマイズ出来る箇所が少ない
• 申し込みフォームが別途必要
• 時々スパムが来る

出来る事

Google グループ

WYSIWYGを利用した、簡単なページ作成、メーリングリスト

cotocoto: 京都のイベントならコトコト！

勉強会の申し込みに利用

Google ドキュメント

Google フォームを申し込みフォームとして利用

申し込みフォームを別途用意する必要があり、Kanasan.JSでは cotocotoを利用していましたが、後述するGoogle フォームを利用するという手もあります。

簡単に作成出来るので、始まったばかりのイベントにはとても使いやすいと思います。
規模が大きくなったり、イベントの回数を重ねると使いにくく感じる面もあり、 Kanasan.JSではGoogle Sitesに移行しました。

ケース2)Google Sitesを利用する

長所

• 最初の構築は時間が掛かるが、慣れると簡単
• Googleガジェットで自由自在にカスタマイズ出来る

短所

• メーリングリストがない
• 下書きが出来ない
• RSSが提供されていない

Kanasan.JSでの利用例

さて、ここからが本題です。Google Sitesはカスタマイズ性が高く、簡単かつ自由に作成出来るのが最大の特徴です。 構築例として、Kanasan.JSでの使い方を紹介したいと思います。

まずは実際のサイトご覧下さい。

Home ( Kanasan.JS : JavaScript Workshop in Kansai)

出来る事

Google Sites

ページ作成用のCMSとして利用

次項からのコンテンツをページ内に埋め込み

Google フォーム

Google ドキュメントのフォームを利用

申し込みフォーム

参加者が書いた記事の投稿フォーム

Google Spreadsheets

Google ドキュメントのSpreadsheetsを利用

フォームからの申し込み結果

会計管理

参加者一覧の表示

Google Calendar

開催日程の表示

RSSを利用して開催日程の告知

Google Maps

開催会場の地図表示

Google ガジェット

多くのガジェットが提供されているので様々なコンテンツを追加出来る

コードを書けば大抵の機能は自作可能

Kanasan.JSではGoogle SitesでLingrとUstreamの表示するガジェットを作った

コンテンツ内容

• 勉強会の告知等のページ作成
• 申し込みフォーム
• 申込者一覧の表示
• 申し込み者に併せた自動会計
• 開催場所の地図を埋め込んで表示
• 開催日程の表示
• オンライン参加者用の、LingrとUstreamの中継ページ

Google Sites

• CMS寄りのwiki（といってもWYSIWYG）のようなサイト作成ツール
• 複数人で編集が可能

ここまでなら、他にもASPサービスが色々あると思うのですが、 最大の特徴は、

Googleガジェットの埋め込みが可能

な事に尽きます。

Google ガジェットはiGoogleでも利用されている、Googleのサービスに埋め込み可能なガジェットです。

これを利用して、Google Sitesでは標準でGoogleの各サービスと連携が出来るだけでなく、 ユーザーが作成したガジェットを埋め込む事で、 作成したページに様々なコンテンツを追加出来ます。

さらにHTMLとJavaScriptが書ければ、自作のガジェットも簡単に作成出来ます。

以降はGoogle Sitesにガジェットとして埋め込む為に利用しているものを紹介していきます。

Google フォーム

アンケートや申し込みフォームを簡単に作成出来るのが、Google フォームです。 Kanasan.JSでは勉強会の申し込みに利用しています。

フォームの項目は自由に作成出来るので、とても便利です。

申し込みの結果はGoogle Spreadsheetsに保存されて見ることが出来ます。

詳細は以下が参考になります。

アンケートフォームが超簡単につくれるようになったGoogleドキュメント | Google Mania - グーグルの便利な使い方

Google Spreadsheets

あまり知名度は高くないのかも知れませんが、オンラインで使える表計算ツールです。 Excel程ではないですが、一通りの事は大抵出来ると思います。

Kanasan.JSでは、Google フォームで作成されたSpreadsheetsにカスタマイズを加えて、 会計の自動計算、参加者一覧を表示出来るようにしています。

Google フォームで作成されたSpreadsheetsに新しいシートを追加して、申込者のシートを参照しています。

Kanasan.JSでは参加費の金額を社会人と非社会人で分けているのですが、申し込みの際にどちらの区分かを入力してもらい、 その結果に応じて自動で計算出来るようにしています。

また、参加者から見て申し込み出来ている事が確認出来るように、 参加者一覧シートを追加してGoogle Sitesに埋め込んでいます。

Google Spreadsheetsは特定のシートだけ外部に公開出来るので、 この参加者一覧シートだけを公開して、Google Sitesに埋め込んでいます。

Google Calendar

Kanasan.JSの日程を書き込み、トップページに埋め込んでいます。

また、Google Sitesでは勉強会の開催を告知する手段がないのですが、 Google CalendarのRSSを利用する事で、開催告知も兼ねる事が出来ます。

Google Maps

勉強会の会場を示した地図を作成し、トップページに埋め込んでいます。

ここでは詳細を省きますが、公式で提供されているGoogle Mapsのガジェットは動かないようで、 地図を埋め込むには一工夫必要です。
その内改善されると思いますが、それまではガジェットを自作する方が簡単そうです。

Google ガジェット

iGoogleでも利用出来るガジェットを、Google Sitesでも埋め込む事が出来ます。

自作も簡単で、HTMLとJavaScriptを使い、簡単に作成が出来ます。

Kanasan.JSでは主催者のkanasanがLingrとUstreamを同時に見れるガジェットを作成しています。 現在はFirefoxとSafariなら問題なく動作していると思います。
中継 ( Kanasan.JS : JavaScript Workshop in Kansai)

ガジェットの作成はとても簡単です。

• XMLのファイル形式で作成し、Web上に設置、そのURLをGoogle Sitesで指定する
• XML内にHTMLやJavaScriptを書くと、その内容がGoogle Sites内でIFRAMEとして表示出来る
• ガジェットのAPIを利用する事で、クロスドメインを気にせず外部と通信可能

詳細は公式のドキュメントが参考になると思います。

Google ガジェット - Google Code

まとめ

Google Sitesはガジェットを利用する事で様々な事が出来ます。 加えて独自ドメインでの運用が可能な事も良い点です。

JavaScriptを使ってガジェットが作成出来るので、 告知用ページを簡単に作成する機能を作ったり等、コードを書く事で運用の負担を減らす事が出来ます。

さらにGoogle Spreadsheetsも、うまく使えば運用の負担が減ると思います。

短所も存在するのですが、少しずつアップデートされているので、今後の更新に期待を持ちたいと思います。

最後に

Kanasan.JSの宣伝も兼ねたエントリになっていますが、最後にもう少しだけ告知です。

Kanasan.JSでは、先日prototype.js Code Readingが終了したので、新しい企画を検討しています。
こんな事が知りたい！こんな事すれば面白いのでは？という意見がありましたら、 コメントで結構ですのでご意見頂けると助かります。

ここまでKanasan.JSにおけるGoogle Sitesの利用例を紹介してきましたが、イベントを主催者されている方々の参考になれば幸いです。

• 動的なscriptタグの読み込みを同期的に行う
• ページ上部へ戻る
• Kanasan.JSの運営体制について

Posted at 37to : commetns(2) : trackbacks(3)