漢塾ホームページリニューアル奮闘記

リニューアル着手

前回リニューアルから約10年。やっと第二次リニューアルにたどり着くことが出来た。

前回リニューアル直後から、今回のリニューアル構想はすでに始まっていた。何故なら、今までの漢塾ホームページは、俺しか更新作業が出来ないという大きなデメリットがあったこと、また、徐々に増えたページ数は数百にも及び、リニューアル時には各ページを作り直すこととなるため作業が膨大になってしまうこと、これらを大きな問題として捉えていたからである。

故に、今回のリニューアルにあたっては、いわゆるCMS（Content Management System：専門知識を必要とせず、誰でもブラウザ上でホームページの作成ができるシステム）の構築を大命題とした。CMSを構築すれば、掲載情報とデザインのも分離できるため、ページデザインのリニューアルも簡単に一気に出来てしまう。CMSはインターネット上でフリーで配布されているものもあるので、これを活用させてもらおうと簡単に考えていた。

しかし、ネット上でCMSを検索するが、主に「Guidance」、「Report」、「漢塾通信」といった構成の漢塾ホームページに相応しいシステムが見つからない。システムに合わせて漢塾ホームページの構成を変えるつもりもないので、漢塾専用CMSを自分で0から構築する道を選択することとした。

システム構築準備

システム構築とは、サーバー上で動くプログラムを組む作業である。

前回リニューアルではParlという言語を使用して一部プログラムを組んでいたが、今回の物は相当な規模のプログラミングが必要となることが想定されるため、最近人気が高いためネット上に情報量が多く、将来性もありそうなPHPという言語を採用することにした。

次に、PHPでプログラミングするためのIDEを選択する。IDEとは、プログラムを書いたり、書いたプログラムを管理したりとプログラミング作業を快適に行うためのソフトウェアである。フリーで配布されているEclipseやAptana等いろいろと実際に試用してみるが、この辺りは使い方が難しい。そしてたどり着いたのがNetBeansだ。扱い方が簡単で、必要な機能は全て揃っている。

最後に、サーバーと同じ環境をApachで自分のパソコンに構築する。漢塾ホームページはレンタルサーバー上に置いているが、このレンタルサーバーは、漢塾同様他の人もレンタルしている。言わば間借りだ。なので、おかしなプログラムをサーバー上で動かしクラッシュさせてしまうと大迷惑なので、自分のパソコンでしっかりと動作を検証してからサーバー上にアップロードしなければいけない。

さて、簡単に書いたが、ここまでたどり着くだけでも素人には困難の極みであった。分からない言葉だらけであり、一つ一つ調べて確認していく作業に莫大な時間を要した。しかし、これでやっと準備が整っただけである。

プログラミング開始

CMSの機能として、主に次のように考えた。

• ユーザー認証機能（新規登録、パスワードの変更、ユーザーレベル（管理者・使用者）の登録、ログイン・ログアウト　など）
• Guidanceの編集機能（新規登録、編集、削除）
• Reportの編集機能（新規登録、編集、削除）
• 漢塾通信の編集機能（新規登録、編集、削除）

そしてまず、ユーザー認証機能の構築から開始する。IDとパスワードでログインすると、サーバーと各ブラウザのCookieとで認証する仕組みを理解し、PHPでのコーディングに着手した。事あるごとにPHPの言語仕様を確認しつつ一つ一つ機能を構築して行き、部分部分の動作を確認する。この作業を繰り返していく。

一方、この時期仕事が忙しく、二、三週間以上全く作業ができない期間もよくあった。久しぶりにシステム構築を再開すると、今までに書いた自分のコードを忘れてしまっていて、思い出すためコードを見直すのに時間を要し、これが大きなストレスとなってきていた。作業を進めれば進めるほど作成したコードの量は当然増えるため、月単位で作業できない時は、作業の再開が苦痛で仕方なかった。

そもそも、近年、ソフトウェアや業務システムの構築はチームで行っており、CMSをほぼ素人の俺が一人で作り上げようとすること自体が大間違いだったかもしれない。しかし、漢塾においてホームページの存在意義は大きくなっており、そこにある課題に対応しなければ前へ進めない。前に進むには塾長に期待できるわけもないので、俺がやるしかない。俺がやるからには一定レベル以上のクオリティで仕上げてやる！

そうこうしながらも、ユーザー認証機能を作り上げ、GuidanceやReportの編集機能も構築した。あとは漢塾通信の機能を付加し、新着情報や掲示板などの細かな機能を整えていけば完成する。この時点で着手から５年を超えていた。

サイトデザイン

プログラミング作業を行いながら、サイトデザインも並行して検討していた。

このようにデザインを試行錯誤していると、塾長が「田村覚志っちゅうヤツがスゲーかっこええ絵を書くんじゃあや。」と、よい情報を持ってきた。早速、二人で田町商店街の田村君のショップに足を運んだ。

絵を見せてもらい塾長も俺も一目で気に入り、塾長は「ホームページで使うけぇ、何個か書いてくれ！金は払うから。」と即契約。

これで一気にデザインは片が付いた。この絵を使うのであれば、やっぱり「漢塾」の字も毛筆で欲しいところだ。

ということで、同僚の山本幸司君に急遽書いてもらい、素材は全て揃った。あとはこれらの素材のイメージの範囲でレイアウトを整えていけば、基本的には完成だ。

時代の変化

さて、前回リニューアルから約10年の年月が経過した訳だが、ちょうどこの間、Webの世界においては激動の時代だった。

インターネットの普及を実感したのは、2000年頃だったが、当時はブロードバンドなど一般家庭には普及しておらず、近年は当然のように数GHzであるパソコンのCPUクロック周波数も500MHz程度でだった。この頃のホームページ作成は、画像やクライアント（HPを見る人）側で動かすプログラムであるJavaScriptは多用せず、負荷の小さいページ作りが美徳であるといった風潮であった。

しかし、パソコンの処理能力はどんどん上がり、ブロードバンドも普及してきた2005年、画像やJavaScriptを多用したGoogleマップが登場した。それまでのHPは固定的な情報表示であったが、GoogleマップはAjaxと呼ばれる非同期通信技術を使う”動的”なページで利用者を驚かせた。この頃からWeb上では、競うようにAjaxを採用したリッチなサービスが溢れ始め、インターネットの世界は一変し、この状況を人々は「Web2.0」と呼んだ。そして、負荷の小さいページ作りの風潮は、いつの間にか消え去ったのだった。

10年前は、ホームページを作るに当たって、情報を整理するためのHTMLと色や配置を決めるCSSが分かればなんとかなったが、現在では、それだけでは相対的につまらないページに見えてしまう。このため、画像編集技術の向上やJavaScript及びそれを使って組まれたフレームワークであるjqueryの習得など、時代の流れに伴う課題も追加されていった。

そして2008年、日本でもiPhoneが発売され、これを契機にスマートフォン時代に突入し、facebookやLINEなど参加型WebサービスであるSNSが浸透した。このことでは、ホームページを開く端末も多種多様になったためあらゆる画面サイズに対応できる必要性、そして、一方的な情報発信ではなく、コミュニケーション可能な機能を付加し、双方向性のページにする必要性がそれぞれ生じたのだった。

Webの世界の激変は、重ね重ね俺に試練を与え続けた。

転機

これらの試練を克服しつつ、ホームページリニューアルは徐々にゴールに近づきつつあった。しかしまだまだ作業量は残っている。”早く仕上げて解放されたい。一体何年間苦しみ続けなければいけないのだろうか。”

そんな中、”仕事も忙しくあまり自分の時間をとれない、自分の時間は漢塾ホームページに集中したい。”という時なのに、塾長の野郎が言ってきた。「おぉ。城下町マラソンのホームページ作ってくれーや。」と。軽～いタッチで言ってきた。このバカ野郎に俺は殺意を覚えたことを今でも思い出す。

城下町マラソンのホームページは、固定的な情報が多く、あまり多くの情報の追加を重ねるものではない。よって複雑なシステム構築とは異なり、作成時間は少なく済む。しようがないので、漢塾ホームページを一時中断して、城下町マラソンのページ作成に取り掛かった。そしてほぼ出来上がった段階で、あのバカ野郎がまた言ってきた。「おぉ。ブログの機能も付けとってくれーのー。」「てぇ～めぇ～！簡単に言いやがって！・・・・・・・・・・・・・・・。ブログね・・・。」ニワトリレベルの頭のゴリラに何を言っても理解できないだろう。そう思って黙ってブログ機能も付加することにした。

俺の脳内には「ブログならWordPress」という古い情報があった。”城下町マラソンのホームページにWordPressをくっ付ければいいか。”と思い、改めてWordPressについてネットで調べてみた。

調べて見て驚かされた！昔は単なるブログソフトであるWordPressだったが、大きく進化している。これはもうCMSではないか！しかもクオリティは高く、そして何よりカスタマイズ性の高さが素晴らしい！興奮しながら調べれば調べるほどに愕然とさせられた。漢塾ホームページで実現したいと思っていたことが99％可能ではないか！と。

俺は、今まで数年かけて築き上げてきたもの全てを捨て、WordPressで漢塾ホームページを再構築することを決意した。

WordPress

WordPressはもともとブログシステムである。それに固定ページを作成できる機能が付加されている。簡単に言うと以上だ。

しかし特筆すべきはそのカスタマイズ性の高さだ。カスタマイズすることを前提にベースのシステムが作られており、PHPの知識さえあればどうにでもできる。しかも、ベースのシステムは一切改変せずに、カスタマイズ部分だけを別ファイルにまとめてコーディング出来るため、WordPressのバージョンアップをそのまま行える。これが何を意味するか。それは、セキュリティ対策など自分でやらずとも、常に最新の状態に出来るのだ！

また、WordPressには「テーマ」と言うものがあり、「テーマ」を変更することでホームページのデザインを一瞬で変更することができる。この「テーマ」もネット上に多くの種類が溢れているのだ。その上、「プラグイン」という仕組みで追加したい機能を簡単に追加できる。

テーマやプラグインを活用しWordPressをカスタマイズすれば、短時間でハイクオリティなCMSを構築できる！こんなに素晴らしく完成度の高いシステムがフリーで配布されていることに感謝しなければならない。

完成

WordPressの導入で、カスタマイズ及びページの文章と写真の移植に時間は要したものの、かなりの時間短縮と高いクオリティで構想どおりのCMSを構築し、完成の時を迎えることができた。

今回のページは、IDを持っていれば誰でも、インターネットに繋がった端末さえあればどこからでも、簡単に情報の更新が出来る。また、PCはもちろん、あらゆる画面サイズのスマートフォンやiPad等のPDA(携帯情報端末)にも対応したレスポンシブデザインであり、コメント欄等閲覧者が書き込み可能な機能も付加し、我ながらこの上なく満足する仕上がりとなった。

随分と遠回りをしたようにも感じるが、遠回りがなければ、WordPressを自由自在にカスタマイズすることも出来なかっただろう。永い時間を要したが、無駄なことなどは何一つ無かった。きっと。

漢塾の活動では、寒中水泳、長距離ラン、無人島サバイバル、四国88ヶ所巡礼など、辛く苦しい経験を重ねてきたが、今回のHPリニューアルほど辛く苦しいものはなかった。永かった。

リニューアル

この度、やっとリニューアルの時を迎えた。旧ページでは最近更新も滞っていたので、塾生や関係者には、漢塾の活動停滞や自然消滅の可能性すら感じさせていたかもしれない。大変ご迷惑をかけた。

だが、漢塾は不滅である。このリニューアルを機会に、より一層面白さ、そしてバカバカしさを提供していくつもりだ。

さぁ、「漢塾2.0」時代の幕開けだ！