今回が、このブログ最初の投稿になります。ご覧になられた方は、今後共よろしくお願い致します。
今回は、当方が作成管理している「空手道場」のサイトの構造を紹介します。
つまりは、「見た目の割に中身はちょっとすごいんです」ということなのです。
基本的には、「なるべくプログラムを組まないで、なるべく機能は流用して使用する」というコンセプトで、作成されています。ですから、現状はサーバ側のプログラムは無く(※)、HTML5とCSS3、若干のJavascriptと、Googleのリソース（API）を利用しています。
（※必要があれば、いずれサーバサイドのプログラムも作成するかも知れません。）
流用がそんなに凄いことかといえば、確かに凄いことでは無いのですが、当方からすると一つの挑戦だったのです。それは末尾に書きます。
まず、このサイトはスマフォに対応しております。CSS3の技術（Media Queries）を使い、画面のサイズに応じて、配置や大きさを調整するようになっています。
ブラウザの幅をマウスでドラッグして、小さくしてみましょう。
私は普段使っていないのですが、一般的な例として、今でも比較的にメジャーなIEをあえて使います。
それに合わせて、内部のボックスもバランスを保ったまま縮小されます。
スマフォで見るとこんな感じです。これは私のスマフォの写真です。横幅が狭いので、それに合わせて配置されます。
さて、トップ画面に戻りましょう。
各コンテンツは、Googleさんの技術をふんだんに利用しています。
これは、この空手道場の代表の方の作成されているブログと、この道場の活動記録ブログの最新記事５件のリンクがそれぞれ表示されています。
RSSリーダを使っていますので、ブログが更新されれば、自動的にココも更新されます。
さらに、下の方にある水色の部分。これは「お知らせ」の概要が書いてあります。
当初は、更新の度にHTMLを編集し、FTPでサイトにアップしていたのですが、現在は「Googleドキュメント」の文書（のアクセス用リンク）をここに貼り付けてあります。
次の画像は、そのGoogleドライブの「文書」というワープロ機能なのですが、
ここを編集すると、ほぼリアルタイムにサイトの方も表示も更新されるので、手間がかからないだけでなく、緊急連絡もしやすいわけです。（リアルタイム過ぎて、編集中でも反映されてしまうところが、長文を書く場合など、少し不都合ですが、そういう場合はテキストエディタなどなどで作成してから張り付ければ良いわけです。）
背景色も反映されます。Googleドライブで作成した文書の背景を水色にしているので、サイトにも水色で表示されているわけです。
「Googleドキュメント」は、Googleのクラウドなサービスの一つなのですが、ブラウザで文書や図形、表計算やプレゼンと言った所謂「オフィス」なソフトを使うことが出来て、ファイルはそのgoogleドライブに保存されて、出先のPCやスマフォなどから、場所を問わずアクセスできるというものです。
この画面は、その「文書」の編集画面で、ワープロソフトのひと通りの機能を揃えていて、しかもとても軽いところが魅力です。
専用のソフト以外の画像や、その他のファイルも保存することが出来ます。
しかもWindowsなどPC用の専用ソフトを使えば、ファイルエクスプローラから保存されているファイルにアクセスする事ができます。
しかも利用料は、5GBまでは無料で、さらに、搭載されているソフトで作成したファイルなら上限無しです。（2012年12月現在）
グーグルドライブについては→こちら
さて、別な画面にいきましょう。
道場の「活動記録」のページです。
ここには、TOP画面同様、RSSリーダを使い、Blogger（グーグルが運営しているブログ）にある内容をまるごと表示しています。RSSリーダなので、別にBlogger以外のブログサービスでも、基本的これはできます。私がたまたまBloggerを利用しただけです。
ただ、一つのページに際限なくブログが表示されたら、ブログの内容が増えると大変重くなってしまいます。ここは少しJavascriptのプログラムをいじって、先頭５件だけ表示し、それ以降はブログへのリンクという形で表示しています。
そして、これが大本のブログのページです。ここの内容を、道場のサイトに表示させているのです。
続きましては、入会案内のページにある道場の地図です。
これは、Google Mapを利用しています。
学校の武道場や、市の施設を利用していますので、会場として使う場所にマーカーをつけました。マーカーにマウスを乗せると、説明も出ます。
このマーカーは、かなり頑張って、正確な緯度と経度でマークしました。
Google Mapなので、私の意志や能力、実績とは関係なくストリートモードにすることもできます。
次にスケジュールのページです。
その下には、カレンダがあります。これもGoogleのカレンダを貼り付けました。このカレンダー機能は、ひとつのカレンダーの中に、いくつかのカテゴリのカレンダを持つ事ができます。
私自身のカレンダに、道場のカテゴリでカレンダを作成して、そのカテゴリのカレンダーだけを、サイトに貼り付けています。これもいつでも編集できて、すぐに反映されるので、とても便利な状態になっています。
次に問い合わせのメールを送る画面です。
Mailtoを使うとあまりよろしくない（※）ので、このように入力フォームを置くわけです。流石にコレぐらいは自作しようと思いましたが、やはり「あるものを使おう」これも伝統的な”POST MAIL”という、Perlで作成されたCGIを利用しています。
POSTMAILのサイト
（※ 言うまでも無い話ですが、WEBページ内にメールアドレスを、半角英数字で原文通りに記述すると、それを自動収集され、悪徳業者などより、困ったメールが大量に届く事になります。）
拡張計画としては、イベント登録と出欠管理みたいな機能を搭載してみたいとは思っています。
終わりに、
当方は日本的表現で言うと、SEなので、ウェッブサイトを作れ（※）と言われれば、ガリガリ、サーバサイドとかに、プログラムを組みたくなりますし、それを改めようとも思わないのですが、世の中には大変便利なアプリケーションや、パーツがあります。種類も内容も多岐に渡り、複雑さを増しています。一人で出来る事の限界も感じます。それを解消するには、人を増やすか、既存のものの再利用という手段を取ることになるかとも思い、今回はそれらを最大限に利用するという試みで作成してみました。
（※ 偉そうな事を書いていますが、当方の得意技はアプリケーションで、WEB関連が一番ではありません。）
ちなみにこのケースの場合「どんだけGoogleが好きなんじゃ！！」という感じの内容になってしまいましたが、特にアフリエイトとか、宣伝とかではありません。確かに現状はGoogleさんのやり方は好きではあります。
それでは、今後も、いろいろなテーマで、IT関連の雑記を書いて行こうとおもっていますのでよろしくお願い致します。
