2014年11月6日木曜日

河野ゼミのWebサイトを公開しました!

皆さん、こんにちは。

秋も深まってまいりました。情報大では、2年生が来年度の『コース・プロジェクト研究・ゼミ選択』を行う時期になりました。自分が勉強したい分野、研究したいテーマなどをベースに3年生からの2年間を過ごすゼミの選択です。

河野ゼミ Webサイト

さて、特にこの時期に合わせた訳ではないのですが、今月頭に『河野ゼミ Webサイト』を公開しました!これまでの研究成果や活動内容をまとめています。活動記録の整理・発信にはとてもよい機会です。


そもそものきっかけは、2ヶ月ほど前に【会いたい人行脚】でインテックの山森雅文さんに「河野ゼミのWebサイトを作れ!」と言われたことでした。

それから2ヶ月掛けてコツコツと作って来ました。自分で言うのも何ですが、結構な力作ですので是非一度ご覧ください!

ゼミのWebサイトを作ってみて、自分自身でかなり力が付いた実感があります。そこで今回は、Webサイト作成で学んだことをまとめてみます。





運用スキル

まず、何かしらCMS(Content Management System)を使おうとは思っていたのですが、よく利用されるWordPress以外でよいものはないかと探していました。個人的に、WordPressは少し使いにくいように感じていました。

その他にMovable TypeやXOOPS、Drupal、NetCommonsなどを検討する中、たまたまITmediaのコラムニスト仲間である「吉田憲人さん」のブログ記事が目に入りました。そこで吉田さんがご自身のサイトで熱心にお勧めしていた「Joomla!」というCMSを知りました。調べてみると結構よさそうだと感じたので、Joomla!に決めました。
※吉田さんとは面識はありませんが、サイトを見て勉強しました。

Joomla!に決めて最初はローカルPCのXAMPPで試していましたが、すぐに実運用のLinuxサーバに移そうと考えました。PHPやMySQLなどの動作環境の問題で機能しない可能性があるためです。

案の定、ローカルPCで使っていたバージョンが「Joomla! 3.3」だったのですが、PHPとphp-mysqlで引っ掛かりました。今回の構築したサーバは「CentOS 6.5」で、以下の要件を見るとPHPのバージョンを上げる必要があります。しかし、パッケージ管理ツールの「yum」でインストールできるPHPの上限は5.3.3なので、手動でリポジトリを指定して対応する必要がありました。

<Joomla! 3.3.3の動作環境>
・PHP 5.3.10以上(推奨5.4以上)
・MySQL 5.1以上
・Apache 2.0以上

<アップデート前のサーバ>
・PHP 5.3.3
・MySQL 5.1.73
・Apache 2.2.15

依存関係で結構苦戦はしたのですが、試行錯誤の中で環境構築ができました。サーバのディストリビューションを変えたり、Joomla!のバージョンを下げたりといったことはしたくなかったので、この記事を参考に何とかやってみて、以下の環境になりました。

<アップデート後のサーバ>
・PHP 5.4.34
・MySQL 5.5.40
・Apache 2.2.15

ローカルPC上で作成していたサイトのDBやコンテンツ、プラグイン、テンプレートなどもサーバに移行できたところで準備完了です。

開発スキル

サーバでの環境構築が完了すると、いよいよ本格的にJoomla!でのサイト構築です。

まずは、サイトの土台となるテンプレートを探しました。スッキリとした白ベースのデザインがよかったので、「Eximium」というテンプレートを利用しました(図2)。メニューの表示具合や全体的なバランスが気に入りました。

図2.テンプレート「Eximium」の編集画面

次に、メニュー構成については、ゼミのWebサイトとして見せたい情報を「階層的」に分類して項目をまとめることができました。これはWebサイトのデザインコンセプトとして、とても重要な点です。フッタ情報については、管理画面(図3)からは編集できなかったので、該当するPHPファイルを突き止め、コードの修正を行いました。このような作業により、Joomla!のシステム構成の外観を知ることもできました。

図3.Joomla!の管理画面

メニュー構成に加え、ゼミのメンバー紹介や研究テーマについては、これまでの活動内容の棚卸しでもあり、情報を整理することで自分の頭もスッキリしたようです。

メニューのアルバムに関しては、今後の運用面を考慮してFacebookのアルバムから取得できる方式が便利だと考え、「Phoca Gallery」というコンポーネントを利用しました(図4、5)。Facebookに投稿した写真は流れてしまうので、ゼミの思い出を記録しておくにはよい場所ができたと思います。

図4.Phoca Galleryのコントロールパネル

図5.Phoca Galleryで参照するFacebookのアルバム


最後に、TwitterやFacebookのソーシャルプラグインを入れたいと思い、このブログと同様にJavaScriptのコードを記事に書いたのですが、うまく機能しませんでした。どうやら、記事内のスクリプトはセキュリティ対策のため無効化されるようです。そこで、「Mod HTML」というモジュールを利用して解決しました。これで一通り完成です!

問題解決力

今回の河野ゼミのWebサイト作成を通して、自分自身ではかなりスキルが向上したと感じています。Webサイトに関わる作業の全体像を経験・把握することができました。この経験により、以下の自信を持つことができました。

自分のやりたいことを実現できる
 何かをやりたいと思った時、どうすれば実現できるかが分かる。分からないことは、自力で調べて解決できる。
トラブルシューティングの能力が向上した
 何かトラブルが発生した際に、ネットワークの問題なのか、DBの問題なのか、ツールの問題なのか、より正確に分かるようになった。トラブルに対して迅速に対応できる。

今回のゼミのWebサイト公開は、これまでの活動の棚卸しだけでなく、私自身のスキル向上に大きな影響を与えました。途中何度もトラブルはありましたが、諦めずに試行錯誤すれば必ず解決できます。コツコツでも積み重ねて行けば、そのうち大きな成果を得ることもできます。

このような経験は、大学での研究活動にも通じる部分があります。何か活動していれば、壁にぶつかることもあると思います。その時に、諦めずに行動を続けていれば、きっといつか道は開けるはずです。このことは、特に学生の皆さんには伝えたいです。

今回私は、Webサイトを作っただけですが、こういった小さなことでも、諦めないことの大切さを改めて感じることができました。何かやりたいことがあれば、是非皆さんもチャレンジしてください!