はじめに
2019 年 3 月、ET ロボコン公式サイトをリニューアルしました。それに伴い、サイト自体を Azure にデプロイしました。今回のリニューアルは「第 1 フェーズ」として位置づけ、今後 1 年くらいかけて Azure への完全移行 (すべて Azure というわけではないが) を目指します。
今回のリニューアルは、個人的に「ノンコーディング」をテーマに、ET ロボコン実行委員 (以下、実行委員) であれば誰でも管理者となれるサイトの構築を目指しました。
以下より、ETロボコン実行委員会のみなさんにお話しした内容をかいつまんで記そうと思います。
イマドキでイケてるサイト
新しい ET ロボコン公式サイト (以下、新公式サイト)では、WordPress を採用することにしました。
決め手となったポイントは以下のとおり。
- テーマやプラグインで簡単に (手軽に) 機能拡張できる
- ユーザー権限を管理し、複数人でサイト運用できる
- ナレッジが豊富
- レスポンシブデザイン対応
サイト運用するための利便性の向上や見た目の拡張などを実行委員自ら実施できるのが素敵です。先人の方々のナレッジも豊富なので、やりたいことをググれば手順や解決方法もすぐ見つかります。
あと、旧公式サイトでは実現できなかったスマホでも最適な形で閲覧できるのもグーです。
WordPress はデータベースとして MySQL を利用していますが、筆者は MySQL がとても疎いので、慣れ親しんでいる Azure SQL Database や SQL Server に最適化された WordPress のソリューションである ProjectNami をデプロイしています。
Azure へ ProjectNami のデプロイは、ダウンロードページの「Deploy to Azure」をクリックし、遷移先のウィザード画面に従って操作することでカンタンにデプロイすることができます。素晴らしい。ありがとう。
デプロイ後は、これまた先人様の記事を参考に文字化け対策を施しておきましょう。
参考：ProjectNami で Unicode 文字列を扱う
WordPress そのもののアップデートは、Azure ポータルでポチポチと操作することで GitHub のリポジトリから最新バージョンをカンタンに取得できます。
誰でもできるコンテンツ作成
旧公式サイトはとてもレガシーな作りで、コンテンツを更新するにも生の HTML を編集してアップロードしていたようです。よって、コンテンツを編集するにもそれなりのスキルが求められ、そして時間もかかってしまいます。
(ちょっとした文言を載せるにも保守ベンダー様にお願いしていたようです)
WordPress には Web ページを作るためのエディターが搭載されています (もうご存知ですよね)。画像などもドラック＆ドロップでアップロードできます。すべてブラウザー上で操作できます。これにより、「作りたいときにすぐ作れる」、「特殊なスキルは不要」であるため、実行委員なら誰でもサイト管理者になれます！
ET ロボコンは、半年くらいかけて技術教育、試走会、地区独自イベント、各地区大会、チャンピオンシップ大会と様々なイベントが各地区で催されています。そこで大事なのが「年間スケジュール」。新公式サイトでは、この情報はすべて Google カレンダーで管理し、それを埋め込んで表示しています。(ノンコーディング！)
また、参加チーム一覧、実行委員一覧は、Google スプレッドシートの内容をプラグインを介して表示しています。(ノンコーディング！)
加えて、旧公式サイトでの参加チームの集計情報は「表」のみでしたが、新公式サイトのほうではプラグインによって「表」だけでなく「グラフ」で分かりやすくしてみました。(ノンコーディング！)
ところで、参加者のみなさん、実行委員のみなさんに入力していただいた内容をそのまま表示するととても気になることがありました。一例を紹介すると、
- 「姓名の間のスペース」が半角スペースだったり、全角スペースだったりとバラバラ
- 所属の「株式会社」を「株式会社」と書く人もいれば、「(株) ←半角カッコ」、「（株）←全角カッコ」と書いたりとバラバラ
このような体裁を整えるなどの処理を手作業で行うのはとてもたいへんです。ほっとくわけにはいきません (とても気になるから)。
このたいへんな作業をラクして実現させるために、Azure Logic Apps でワークフローを作って実現させました。(ノンコーディング！)
Logic Apps はノンコーディングで、直感的なデザイナーでワークフローが作れるため、コード書くの疲れちゃう筆者でもカンタンに作ることができます。既存のサービスと接続するためのコネクタも豊富にあるため、システム連携も自由自在。課金は実行した分だけ。
カンタンなお手入れだけでメンテナンス不要
ET ロボコンは、各委員および委員所属企業・団体のご協力による、ボランティア・ベースで企画運営されています。
※ETロボコン 実行委員の募集より引用
よって、新公式サイトを運用するために、四六時中、見ることができません。
なので、以下のとおり Azure 環境上はすべて PaaS のサービスでシステムを構成しています。
インフラ部分の運用・管理を Azure に任せることによって、運用にかかる作業がかなり軽減されています。これにより、コンテンツを充実させることに注力することができます。
サイト運用での主な作業は以下のとおり。
- アプリケーションレイヤ
- WordPress 自体のアップデート
- テーマ・プラグインのアップデート
- など
- データレイヤ
- コンテンツの管理 (追加/更新/削除)
- など
目的に沿ったメニュー構成に刷新
旧公式サイトでは、はじめて訪れた方から「トップページにリンクがたくさんありすぎて、どこから見たらいいのかわからない」というご意見をいただいたそうです。
また、メニューのカテゴライズもちゃんとできていないイメージ (つぎ足し感が否めない) がありました。
そこで、はじめて訪れる方でも、参加者のように常に訪れる方も、迷うことなく目的のページを見つめることができるように (という思いで) メニューを再構成しました。
これで、訪問者が本来見たかった情報にカンタンに辿り着けることができるでしょう。
ひとつのところに情報を集約
ET ロボコンは、参加者のみなさんが開発したソフトウェアの優劣を競い合うだけのイベントではなく、参加者へ「教育の機会」も提供しています。
技術教育機会の提供。
5年後、15年後に世界をリードするエンジニアの育成を目指し、若手、初級エンジニア、および中級エンジニア向けに、分析・設計モデリング開発、製品サービスの企画開発にチャレンジする機会を提供する。
※ETロボコン 目的・競技内容 より引用。
よって、各地区ではさまざまなイベントが開催されています。
以前までは、各地区で催されるイベントの情報が分散されていたため、気軽に情報を得ることができませんでした。参加者にとってはせっかくの機会を失う恐れがあり、また主催者にとっては伝えたいことが多くのオーディエンスに伝えられない (思ったより参加者が少ないとか) というジレンマがあったかもしれません (筆者の想像ですけど)。
お互いの機会損失を無くすために、新公式サイトでは各地区のイベントなどの情報を気軽に得られるようにするために、「情報発信をひとつの場所」に集めることにしました。一か所に集めることによって、参加者にとってもイベントの主催である ET ロボコン実行委員会にとっても恩恵を得られることができるでしょう。
(各地区の実行委員のみなさん、積極的な情報発信、ありがとうございます!!)
まとめ
ということで、「旧公式サイトでの問題点」と「新公式サイトでの解決策」を以下のようにまとめてみました。
ET ロボコン公式サイトを Azure に持っていく...積年の想いだったこのプロジェクトを実現できたことに興奮しています。
まだよちよち歩きな状態ではありますが、これから訪問していただく方には的確な情報を提供し、ET ロボコン実行委員会のみなさんにはコンテンツを今まで以上に管理しやすいように整備してまいります。
(まだまだやること、やりたいことが盛りだくさんなので...つづく)