2012年12月7日金曜日

サイト作成事例・空手道場

今回が、このブログ最初の投稿になります。ご覧になられた方は、今後共よろしくお願い致します。

今回は、当方が作成管理している「空手道場」のサイトの構造を紹介します。
作成といっても元々あったサイトの管理を依頼され、それをカスタマイズしました。
(※該当道場のサイトはこちら→http://www.jka-nakahara.org/


 見た目はご覧のとおり、デザイナさんに頼んだわけでもありませんので、非常にシンプルで普通なサイトなのですが、実は中身は、あまり手間とお金を掛けず、できる限りの機能を盛り込んでいます。
つまりは、「見た目の割に中身はちょっとすごいんです」ということなのです。

基本的には、「なるべくプログラムを組まないで、なるべく機能は流用して使用する」というコンセプトで、作成されています。ですから、現状はサーバ側のプログラムは無く(※)、HTML5とCSS3、若干のJavascriptと、Googleのリソース(API)を利用しています。
(※必要があれば、いずれサーバサイドのプログラムも作成するかも知れません。)

流用がそんなに凄いことかといえば、確かに凄いことでは無いのですが、当方からすると一つの挑戦だったのです。それは末尾に書きます。

まず、このサイトはスマフォに対応しております。CSS3の技術(Media Queries)を使い、画面のサイズに応じて、配置や大きさを調整するようになっています。

ブラウザの幅をマウスでドラッグして、小さくしてみましょう。
私は普段使っていないのですが、一般的な例として、今でも比較的にメジャーなIEをあえて使います。
それに合わせて、内部のボックスもバランスを保ったまま縮小されます。
さらに幅を狭くしてみます。
流石にもう幅が狭いので、自動的にページ内の各ボックスを縦に配置します。スマフォや携帯の画面は、専用の画面を作成するわけでは無く、このように横幅で判断して調整しています。

スマフォで見るとこんな感じです。これは私のスマフォの写真です。横幅が狭いので、それに合わせて配置されます。


さて、トップ画面に戻りましょう。

各コンテンツは、Googleさんの技術をふんだんに利用しています。
中央のクリーム色の右側(サイドバー?)に、リンクリストがあります。
これは、この空手道場の代表の方の作成されているブログと、この道場の活動記録ブログの最新記事5件のリンクがそれぞれ表示されています。
RSSリーダを使っていますので、ブログが更新されれば、自動的にココも更新されます。

さらに、下の方にある水色の部分。これは「お知らせ」の概要が書いてあります。
当初は、更新の度にHTMLを編集し、FTPでサイトにアップしていたのですが、現在は「Googleドキュメント」の文書(のアクセス用リンク)をここに貼り付けてあります。

次の画像は、そのGoogleドライブの「文書」というワープロ機能なのですが、
ここで作成した内容がそのまま、トップページの下部に表示されます。

ここを編集すると、ほぼリアルタイムにサイトの方も表示も更新されるので、手間がかからないだけでなく、緊急連絡もしやすいわけです。(リアルタイム過ぎて、編集中でも反映されてしまうところが、長文を書く場合など、少し不都合ですが、そういう場合はテキストエディタなどなどで作成してから張り付ければ良いわけです。)

背景色も反映されます。Googleドライブで作成した文書の背景を水色にしているので、サイトにも水色で表示されているわけです。

「Googleドキュメント」は、Googleのクラウドなサービスの一つなのですが、ブラウザで文書や図形、表計算やプレゼンと言った所謂「オフィス」なソフトを使うことが出来て、ファイルはそのgoogleドライブに保存されて、出先のPCやスマフォなどから、場所を問わずアクセスできるというものです。
この画面は、その「文書」の編集画面で、ワープロソフトのひと通りの機能を揃えていて、しかもとても軽いところが魅力です。
専用のソフト以外の画像や、その他のファイルも保存することが出来ます。
しかもWindowsなどPC用の専用ソフトを使えば、ファイルエクスプローラから保存されているファイルにアクセスする事ができます。
しかも利用料は、5GBまでは無料で、さらに、搭載されているソフトで作成したファイルなら上限無しです。(2012年12月現在)
 グーグルドライブについては→こちら


さて、別な画面にいきましょう。
道場の「活動記録」のページです。
ここには、TOP画面同様、RSSリーダを使い、Blogger(グーグルが運営しているブログ)にある内容をまるごと表示しています。RSSリーダなので、別にBlogger以外のブログサービスでも、基本的これはできます。私がたまたまBloggerを利用しただけです。

ただ、一つのページに際限なくブログが表示されたら、ブログの内容が増えると大変重くなってしまいます。ここは少しJavascriptのプログラムをいじって、先頭5件だけ表示し、それ以降はブログへのリンクという形で表示しています。


そして、これが大本のブログのページです。ここの内容を、道場のサイトに表示させているのです。


続きましては、入会案内のページにある道場の地図です。
これは、Google Mapを利用しています。
学校の武道場や、市の施設を利用していますので、会場として使う場所にマーカーをつけました。マーカーにマウスを乗せると、説明も出ます。
このマーカーは、かなり頑張って、正確な緯度と経度でマークしました。

Google Mapなので、私の意志や能力、実績とは関係なくストリートモードにすることもできます。

次にスケジュールのページです。
上の方の薄緑色の部分は、例によって、グーグルドライブの文書を貼り付けてあります。トップ画面のとは別な文書です。トップ画面の内容の詳細が書かれています。これもリアルタイムに更新できます。

その下には、カレンダがあります。これもGoogleのカレンダを貼り付けました。このカレンダー機能は、ひとつのカレンダーの中に、いくつかのカテゴリのカレンダを持つ事ができます。
私自身のカレンダに、道場のカテゴリでカレンダを作成して、そのカテゴリのカレンダーだけを、サイトに貼り付けています。これもいつでも編集できて、すぐに反映されるので、とても便利な状態になっています。


次に問い合わせのメールを送る画面です。
Mailtoを使うとあまりよろしくない(※)ので、このように入力フォームを置くわけです。流石にコレぐらいは自作しようと思いましたが、やはり「あるものを使おう」これも伝統的な”POST MAIL”という、Perlで作成されたCGIを利用しています。
POSTMAILのサイト

(※ 言うまでも無い話ですが、WEBページ内にメールアドレスを、半角英数字で原文通りに記述すると、それを自動収集され、悪徳業者などより、困ったメールが大量に届く事になります。)



拡張計画としては、イベント登録と出欠管理みたいな機能を搭載してみたいとは思っています。


終わりに、
当方は日本的表現で言うと、SEなので、ウェッブサイトを作れ(※)と言われれば、ガリガリ、サーバサイドとかに、プログラムを組みたくなりますし、それを改めようとも思わないのですが、世の中には大変便利なアプリケーションや、パーツがあります。種類も内容も多岐に渡り、複雑さを増しています。一人で出来る事の限界も感じます。それを解消するには、人を増やすか、既存のものの再利用という手段を取ることになるかとも思い、今回はそれらを最大限に利用するという試みで作成してみました。
(※ 偉そうな事を書いていますが、当方の得意技はアプリケーションで、WEB関連が一番ではありません。)

ちなみにこのケースの場合「どんだけGoogleが好きなんじゃ!!」という感じの内容になってしまいましたが、特にアフリエイトとか、宣伝とかではありません。確かに現状はGoogleさんのやり方は好きではあります。

それでは、今後も、いろいろなテーマで、IT関連の雑記を書いて行こうとおもっていますのでよろしくお願い致します。

2 件のコメント:

  1. 安ファミリー2013年2月20日 20:23

    いつも大変お世話になっております。安ファミ(母)です。
    PCに詳しくない私ですが、HPが本当に素晴らしいっ!!
    と、感動です。陰ながらお疲れ様でございます。

    支部一覧から各々のHPを拝見するのですが、中原宿舎のHPが
    一番!!すごくて、師範からの更新も頻繁だと思います。

    夫ともども、毎日(笑)、拝見しております。

    今の心配の種は、
    いつもkazuサン宅付近で遊ぶ長男が、
    ピンポンダッシュしないか(困)・・・・・です(涙)。

    これからも、末永く、どうぞよろしくお願いいたします。

    返信削除
    返信
    1. わーコメントありがとうございますっ。ここにコメントが付くとは....あまり更新していなくてどうもスミマセン。道場のサイトは、師範がかつて作成されていたものを、外面を残しつつ、中身をリフォームした感じです。プロ級のデザインが出来ればもっと良いのですが、それは苦手なので、中身を強化したのです。

      今の心配の種につきましては、そう、よく考えたら同じ町内なんですよね。先日当人から「何号室?」と聞かれましたが、回答を拒否ておいてよかったです。ピンポンダッシュに成功された暁には、頭に拳槌打ち(平版初段の4挙動目)するとお伝え下さい(冗談です)。

      それでは、こちらこそ今後共よろしくお願いいたします。

      削除