• Blog.37to.net
    • home
    • blog
    • labs
    • about
    • contact
  • Web・コンピュータ > まるごとGoogleで作る、勉強会・イベントサイト

    • Google
    • Kanasan.JS
    • Web
    • 勉強会
    作成:
    2008-10-19T12:37:27+09:00
    更新:
    2009-04-29T01:09:53+09:00
  • 先日、運営に携わっているJavaScriptの勉強会、Kanasan.JSのサイトをリニューアルしました。

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

    こんな人にお勧め

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

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

    ケース1)Google Groupsを使う

    kanasan_js_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を利用する

    kanasan_js_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_form_result

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

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

    Google Spreadsheets

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

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

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

    google_form_account

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

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

    google_form_list

    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が終了したので、新しい企画を検討しています。
    こんな事が知りたい!こんな事すれば面白いのでは?という意見がありましたら、 コメントで結構ですのでご意見頂けると助かります。

    追記:Google フォームを作りました。
    次期Kanasan.JSの企画募集

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

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

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

  • 同一カテゴリのエントリ

    • クラウド時代のホームメディアネットワーク
    • Kanasan.JSの運営体制が変わります
    • JavaScriptでイベントをエミュレートする(From Kanasan.JS 読書会#8)
    • Kanasan.JS JSDeferred Code Reading
    • Kanasan.JS JavaScript第5版読書会#7& 懇親会の告知
  • 関連エントリ

    • JavaScriptでイベントをエミュレートする(From Kanasan.JS 読書会#8)
    • Kanasan.JS JSDeferred Code Readingが終了しました
    • Kanasan.JS JSDeferred Code Reading
    • JavaScriptでCSSとイベントを扱う from Kanasan.JS
    • Kanasan.JS JavaScript第5版読書会#7& 懇親会の告知
  • 関連商品

  • コメント

    ______ _______ hub73 1
    2014年11月15日 03:13

    I visited multiple web pages except the audio feature for audio songs current at this web site is actually marvelous.

    nissan ____ ___
    2014年11月21日 13:34

    Greetings from Florida! I'm bored at work so I decided to check out your blog on my iphone during
    lunch break. I enjoy the information you present here and can't wait to take a look when I get home.
    I'm amazed at how quick your blog loaded on my cell phone ..
    I'm not even using WIFI, just 3G .. Anyhow, great site!

  • トラックバック

    本エントリへのトラックバックURL http://blog.37to.net/mt/mt-tb.cgi/106

    勉強会の参加・開催に関する情報
    Kanasansoft Web Lab.
    2008年10月19日 16:20
    勉強会に関する情報が恐ろしい勢いでネット上に充実してきています。 はなずきんさん... 続きを読む
    [Android] 勉強会のツール
    Project Hews by 木南英夫
    2008年10月24日 21:35
    運営スタッフで集まって、Google GroupsからGoogle Sitesに移行したのですが、 Google Sitesがとても便利だったので、Go... 続きを読む
    [Python]Google Sites に梅.pyを作った
    mitszoの日記
    2008年11月18日 17:56
    こちらを見て、すごく便利そうだったので梅田Pythonごはんの会のサイトを作ってみました。 運営スタッフで集まって、Google GroupsからGoo... 続きを読む
  • About

    about

    Name
    37to (minato)
    Job
    Web Developper
    Community

    Kanasan.JS

    関西を中心に活動するJavaScriptの勉強会

    ...more about

    Twitter Updates

      follow me on Twitter
    • Categories

      • Web・コンピュータ(24)
      • お知らせ(1)
      • コンピュータ・ガジェット(3)
      • プログラミング・開発(39)
      • 雑記(12)
    • Tags

      • (X)HTML
      • CSS
      • del.icio.us
      • Firefox
      • JavaScript
      • Kanasan.JS
      • MovableType
      • PHP
      • Python
      • RSS
      • SBM
      • Web
      • はてな
      • イベント
      • オブジェクト指向
      • テンプレート
      • デザイン
      • フォーム
      • 雑記
      • 勉強会
    • Archives

      • 2012年1月(1)
      • 2009年12月(1)
      • 2009年10月(1)
      • 2009年6月(3)
      • 2009年4月(2)
      • 2009年3月(1)
      • 2009年2月(1)
      • 2009年1月(1)
      • 2008年12月(1)
      • 2008年11月(2)

      ...more archives

    • Feeds

      • blog feedBlog.37to.netBlog.37to.netのフィード
      • 37to's reading new feedlivedoor Readerの新着フィード - k_37to
      • 37to's New Bookmark Feeddel.icio.us - 37to's Bookmark Feeds
    • Sorcial Bookmarks

      • livedoor クリップ - k_37tolivedoor クリップ - k_37to
      • はてなブックマーク - k_37toはてなブックマーク - k_37to
    • Copyright © Since 2006-2014 37to
    • Home | blog | labs | about | contact | feed