17班ブログ
@manyato, @irori, @grkon, @tesso, @dan_dan, @Fourmsushi でAR年賀状を制作し, pixiv賞と技術賞をいただきました！
アプリの紹介
VRoid Hub の3Dモデル と「お絵かき」機能を使ってあなただけの年賀状を作り、QRコードで年賀状を共有できます。
トップ画面はこんな感じです。「よむ」を押すとAR年賀状を楽しむことができます。「つくる」を押すと、AR年賀状を作成することができます。 年賀状を作る機能と、見る機能があるのでそれぞれ紹介します。
つくる
画面全体はこんな感じです。AR年賀状では様々な機能を用いて、年賀状を制作することができます。
お絵描き機能
指で絵を描く
あなたの好きな色（黒）で絵を書くことができます!
画像を読み込む
透過PNGの画像素材を使って、年賀状をデコレーションをします！
クリスタやイラレで描いた絵をPNGで出力して、読み込むこともできます！
3D機能
キャラクターを追加する
好きなモデルをVRoid Hubから取得し、年賀状に使うことができます。
ポーズを指定する
モデルにポーズを取ってもらえます
パラメーターを調節する
モデルや画像、文字の位置や大きさを調節したり、回転させたりできます。
その他
見る
つくった年賀状を確認できます。
共有する
QRコードを作成し、 
で共有できます
もちろんダウンロードして、印刷することもできます
あなただけの年賀状を見てもらいましょう！
よむ
先程のQRコードをアプリで読み込みます。
こんな感じで、いろいろな角度から年賀状を楽しむことができます!
やったこと
- tesso
プログラム担当でした。基本的にはUnityとShowcase（部内PaaS）との通信部分の実装をしていきました。普段はバックエンドを書かないので、かなり勉強になりました！ VRMモデルをそのまま小さくすると、モデルやテクスチャが崩れてしまうのをうまく調節するのが難しかったです。 - dan_dan
グラフィックを担当しております。
UIです。技術はともかく、アプリの機能や流れ自体はシンプルなので、文字はなるべく使わずにアイコンから先を想定できる形で作りました。文字フォントは「スマートフォントUI」、映像制作でも使っているお気に入りのものです。
https://www.flopdesign.com/freefont/smartfont.html
ロゴは立体的な年賀状を表現しています(初日の出は実装されていません)。ハッカソンで初めて来年の干支が虎であることを知りました。
僕は凄いことは何もしていないのでこのあたりで
- irori
バックエンドの雛形づくりと使い方説明のHTMLを担当しました。
バックエンドを一から構築するのは初めてだったので、非常に勉強になりました。
特にDB周りの環境構築に苦戦しましたが、tesso先輩がサポートしてくれたおかげで、何とかやり遂げることができました。
週の後半に用事があったので、雛形だけ作って他の人に実装を丸投げすることに... - manyato
プログラムではペイントツールとQRコードの生成を担当しました。といってもほぼネットにある誰かのコードをほぼそのままもってきただけですが...
グラフィックでは後半技術不足でできることがなかったのでQRコードの真ん中の富士山のアイコンをfigmaで作ってました。
あと:@Fourmsushi:君を途中からチームに引き入れました。 - grkon
プログラムをやりました。
お世辞にも貢献できたとは言えない結果でした。:gomen:
実力不足により、QRコードの読み取り部分しか取り掛かれませんでした。(これも先輩に修正してもらってという感じでした。) 他にやったことを無理やりあげるならば、一応ARの情報をちょっとだけ集めたりしました。 - Fourmsushi
:@manyato:君に誘われてUnity側のプログラムをやりました。
担当した画面・機能は年賀状のエディット画面と、QRコードの保存・シェア画面です。
年賀状のエディット画面はどうしても機能が多くなってしまうため、作業量が多くなってしまい思っていたよりも時間がかかってしまいました。
カメラ操作などの機能も付けてもう少し作りやすくできたらよかったのですが、ピンチイン・アウトのようなスマートフォン特有の操作をUnityで扱う方法に知見がなく、間に合いませんでした。
感想
- dan_dan
前回参加時は散々だったので、今回は人に見せても怒られない進捗のようでほっとしています。プログラム勢のお零れを頂いてしまった。
自分のスマホがAR非対応なのが残念です。
最後に2週間早いですが、あけましておめでとうございます。 - tesso
アイデア出しと仕様策定をほどんどしないままスタートしたので、正直完成するか不安でした。いい感じに完成してうれしかったです。
ARアプリ制作が初めてだったのでかなり新鮮でした。2冠を達成してめっちゃ嬉しいです！ - irori
至らない点が多数ありましたが、他のメンバーの方々に支えていただき、楽しく作ることができました。本当にありがとうございます。
特にtesso先輩には圧倒的感謝 - manyato
始めは自分一人が他の人よりも2年以上学年が上だったことや、チームのそれぞれが互いに面識がなかったこともあり、始めは積極的にコミュニケーションを取っていこうと意識していました。開発の面では技術力が他の人よりもないことは自覚していたのでできる範囲で頑張りました。途中でチームに入ってくれて圧倒的進捗を生んでくれた:@Fourmsushi:君には多大なる感謝を... - grkon
ほとんど貢献はできなくて、申し訳なさが大きいです...。ただ、Unityのセオリーというか基本的な使い方が学べました。また、先輩方がすごい速度で進捗を生んでいくので、すごいなぁと思いながら作業してました。
次のハッカソンこそは、頑張ってチームの力になりたいと思います。 - Fourmsushi
Unityの開発経験はあったのですが、ふだんは2Dのゲームなどを作っていて、3Dを扱う作品を作るのは初めてでした。わからないことも多く苦労しましたが、なんとか形にできて良かったです👻
traPのハッカソンではマネジメント的な立場に立つことが多かったので、今回がっつり開発に関われて新鮮な体験でした。
開発の途中で、作成した年賀状を見ようとすると異様に下からのアングルで見てしまうというバグがあり、いくつかの面白い絵面が生成されました。
またこのような機会があれば、ぜひ参加したいです！
最後に
いかがでしたでしょうか？
ぜひ、他のチームのハッカソンブログも読んでみてください！
今回のハッカソン記事一覧はこちら：https://trap.jp/post/1454/
