実務訓練 2024年度 豊橋技術科学大学

豊橋技術科学大学の佐藤と曽根です。

2025年1月9日～2月21日に行われた実務訓練で、株式会社ウェブインパクト様のお世話になりました。

佐藤

今回の実務訓練では、主に豊橋鬼祭「おにどこ」のプロジェクトに参加させていただきました。

豊橋鬼祭ホームページの作成

2018年から豊橋技術科学大学主体の実証実験としてスタートした「おにどこ」は、今年度より「おにどこ実行委員会」から「鬼祭奉賛会」へと主体を移行しました。それに伴って、豊橋鬼祭のホームページを新設することとなりました。今回の実務訓練では、豊橋鬼祭ホームページの設計、実装に取り組ませていただきました。

ホームページはHTML+CSS、JavaScript、PHPで実装されています。実装の中で特に大変だと感じたのは、CSSの調整です。豊橋鬼祭を代表するホームページとして公開することを考えると、サイト内の情報に加え、見た目にもとても気を遣う必要があります。また、今日ではウェブサイトをスマートフォンやタブレット端末から閲覧するユーザーも多いため、そういった端末で閲覧した際に違和感なく、レイアウトが崩れないように気を付ける必要があり、とても大変でした。

ホームページ内のコンテンツの１つとして、豊橋鬼祭の日程表を作成しました。日程表には豊橋鬼祭の一大イベントである飴・粉を撒くことを予告するアイコンを表示するようにしました。また、日程表の各行事をクリックすると行事の詳細が閲覧できる仕組みも実装しました。カレンダーはFull Calendarというオープンソースのプラグインを利用していますが、こちらもCSSの調整にとても苦労しました。

地図データの作成

豊橋鬼祭の一大イベントである門寄りで、鬼の位置情報をリアルタイムで表示する「おにどこ」アプリで使用する地図のデータを作成しました。このデータにより、鬼が通るルートをアプリに表示し、鬼が各会所（画像では青い四角で表示されている）に到着、出発した際にユーザーに通知を出すことができるようになっています。地図データの作成はQGISというソフトウェアで行いました。GUIから関単にルートやジオフェンスを作成してアプリに反映することができ、面白いと思いました。

豊橋鬼祭当日

鬼祭当日はおにどこアプリが正常に動作することの監視、鬼の位置情報を送信する端末のテストや交換などを行いました。コロナ禍から中止していた出店も今年から復活したようで、鬼祭は多くの人で賑わっていました。

15時から開始した門寄りでは、実際におにどこアプリを使用して鬼を探しに行き、鬼の門寄りを見ることが出来ました。アプリでは自分が作成した地図データやウェブサイトがしっかりと表示されており、少し安心しました。

その他のプロジェクト

豊橋鬼祭のプロジェクトの他に、WordPressを用いるプロジェクトにも参加させていただきました。豊橋鬼祭のホームページを作成する際に調べた知識がこちらのプロジェクトにも活かせてよかったと思います。

まとめ

今回の実務訓練では、いままで学んできた知識が実際の業務でどのように使われているのかを学ぶことが出来ました。また、環境構築や設計・実装・修正の流れ、お客様とのやり取りなども知ることができ、とても興味深かったです。1か月半という短い期間でしたが、とても貴重な経験をさせていただきました。株式会社ウェブインパクト様ならびに関係者の皆様に、この場を借りて御礼申し上げます。ありがとうございました。

曽根

はじめに

今回の実務訓練では，「おにどこ」アプリ開発とWebXRアプリ開発に携わらせていただきました．それらの経験や成果について書かせていただきます．

「おにどこ」アプリ

毎年アップデートされている，豊橋鬼祭を楽しむための「おにどこ」というネイティブアプリがあります．そのアプリの以下の点に携わらせていただきました．

AR門寄り

豊橋鬼祭では，赤鬼が安久美神戸神明社付近を訪ねて周る「門寄り」という催しがあります．それをAR技術によりスマホで手軽に体験できるようにした「AR門寄り」というWebアプリがあり，その開発・改良を行いました．AR門寄りは，ARマーカーを読み込むと赤鬼の3Dモデルが出現し，その撮影をすることができるアプリです．

改良点は，赤鬼の3Dモデルを移動や回転，拡大・縮小操作機能と，ARカメラの撮影・保存機能の追加です．従来はこれらがうまく動作しなかったり，ネイティブアプリに依存したりしていましたが，それをWebアプリ内で完結するようにしました．それにより，ネイティブアプリ側からはWebアプリを呼び出すだけで良くなったため，開発のしやすさが向上しました．また，出現した3Dモデルのリロードボタンを実装したため，ユーザ側の利便性も向上しました．

豊橋鬼祭LP

レスポンシブデザイン対応における，ヘッダーデザインの調整や，ナビゲーションメニューのモーダル化など，細かい修正を行いました．これらにより，ページ全体が見やすくなりました．

豊橋鬼祭当日

当日，おにどこアプリの監視と運営補助を行いました．おにどこアプリは門寄り中の赤鬼の位置情報を確認する機能があり，この機能が正しく動作しているか，また，赤鬼の側近が保持している，位置情報を発信し続ける端末のバッテリー交換を行いました．

また，境内に設置されていたARマーカーをスマホで映して，AR門寄りを楽しんでいる方々の様子を見かけて，自分が携わっていたものを楽しんでいただいているのだと感じて嬉しく思いました．

WebXRアプリ開発

スマホやApple Vision ProによってXRを体験するために，WebXRアプリ開発を行いました．このアプリは，豊橋市のマスコットキャラクターである「トヨッキー」の3Dモデルを表示し，より現実に近い質感を体験できるように開発しました．

このアプリの開発にあたり，既存の3Dモデルを利用しましたが，これにはアニメーションや，それを作成するためのデータが含まれていませんでした．そのため，「mocopi」というモーションキャプチャを自身に装着し，自らのモーションデータを収録しました．そのモーションデータをアニメーションとしてトヨッキーに付与するために，「Blender」を利用してリギング(ボーンやウェイトなどの骨組みを付与すること)を行いました．

このようにして作成したアニメーション付きのトヨッキー3DモデルをWeb上で読み込み，XRを体験するアプリを作成しました．

おわりに

株式会社ウェブインパクトの皆様，この度はアプリ開発を通して様々な経験をさせていただき，ありがとうございました．アプリの開発だけでなく，おにどこアプリにおける多数のユーザによる膨大なリクエストの捌き方や，アプリの開発思想など，これからのアプリ開発において貴重な経験をさせていただきました．実務訓練での経験を活かし，これからも精進してまいります．長期間，大変お世話になりました．食事にも誘っていただき，ありがとうございました．

Apple Vision Proを体験しました

2/20(木)ランチ 淡路島バーガーをご馳走になりました