ブロックチェーンを武器にハッカソンに参加！(チームD)

こんにちはバックエンドエンジニアのzawaです。今回始めてハッカソンに参加して、アイデアの出し方やそれを実装で形にしていく過程を初体験できてめっちゃ楽しかったです。

個人的に開発について語っても仕方ないなと思ったので、アイデア出しパートを後輩からぶんどりまして書こうと思います。

一応僕の出したアイデアが割と採用してもらえたので、どんなことを考えながらコンセプト化したのかを当時のメモを振り返りながら説明しようと思います。

ハッカソン開始前に考えていたこと

プレイヤーかマネージャーとしての未経験をしたい
少し案件を意識して、案件入口体験みたいな場として新入生に学んでほしいとはいえ楽しさ優先
夏って広すぎるし逆にむずいな
アイデアのテーマと切り口のバランスを意識したい

ハッカソン前には、個人的な立ち回りのことばかり考えていて夏と開発が全く結びついていませんでした。むしろ考えれば考えるほど今年の夏に何もしていないという事実に苦しんでいました。

開始後、メンバーを見て

@massun がいたのでブロックチェーンでなにかやりたいな。他の班を見る限りブロックチェーンの切り口は特殊なので、普遍的なテーマを探す。
ブロックチェーンからPOW, POSなどコンセンサスアルゴリズムの概念が面白い
ビットコインのマイニングで電力やスペックの戦いになってたけど足で稼ぐみたいなのがあっても面白いな
Po努力な世界であって欲しい
個人的流行→登山
でも山登る意味ってなんだろう、、
世間的流行→NFT
でも大金過ぎて萎えるし価値がわからん

よっしゃ、山登ったらNFT貰えるようにしよう(詳細は作ったもの参照)

当時のメモを少し補足したものですが、メンバーにブロックチェーンエンジニアがいたので一気にやりたいことが決まって行きました。切り口がブロックチェーンと、かなり特殊性が担保されていたので、テーマをなるべく普遍的なものにしました。ちなみに、逆に特殊なテーマを取り扱いたいときは切り口は普遍的なものにしておいたほうが馴染みやすいらしいです。

少々こじつけが目立ちますが、「これはハッカソンだし早く形にしちゃったほうがええやろ」みたいなテンションで行きました。

Ryuさんが褒めてくれたのでよっしゃって感じでした。

作業中のエピソード

yuto:私はフロントの部分を担当したのですが、yoshiharu君が初心者であったため、1人で進めるのではなく教えながら進めました。人に教えたことがなかったため、専門単語を覚えてなくことができた良い機会でした。

yoshiharu:本当に初心者で迷惑かけました。けど、色々勉強になり、かつメンバーとの交流を深めることができたのでとても良い経験になったと思います。ありがとうございました。

開発中のエピソード

###フロントエンド

yoshiharu

初めてのハッカソン参加で、ほとんどyuto先輩に教えてもらいながらやりました。HTML、ブートストラップを用いて、NFT発行ページなどを作りました。よりリッチにするにはジャバスクリプトを書けるようにならないといけないと感じました。その前にHTMLとCSSの基礎を固める必要があり、位置関係を決めるコードの書き方がとても苦手だと気づいたので、そこは改善していきたいです。

yuto

バックエンドとの協業をしたことがなかったため、フロントエンドが書いたものに対してバックエンドの人がサイトの遷移を書いてくれるというのが新鮮でした。

初日に参加できなかったため、Dockerの設定が出来ませんでした。なので、部品ごとのつなぎを自分で作業できなかったので今度はそこの部分もやりたいです。

バックエンド

zawa

ルーキーが多かったので、dockerを使った実装やGitの運用など用いて実際の案件に近い形での実装を経験できるようにしました。

Windowns ユーザーがDocker入れるのに大苦戦していて、kpppnさんにぶん投げてしまいました。謝りに行ったら「また一つ強くなってしまった。」とか言ってたので良かったです。メンバーも次からDockerで苦戦しなくて済むのでヨカッタね！

TAK848

zawaさんに作ってもらったモデルを元に，massunさんに作ってもらったNFTの発行用のpythonコードを実行した上で，画面遷移するあたりのコードを書きました。そして，フロントエンドの2人が作ってくれたコードを，今回はDjangoのテンプレートに組み込む形で使わせてもらいました。フロントエンドのおしゃれなアニメーションが合わさった上で，バックエンドとブロックチェーンのコードが繋がって実際に動き，動作しててくれたというのがとてもうれしく面白かったです。

ブロックチェーン

Massun

ハッカソン最終日は成果物の発表が20:00予定でした．どうやら発表の順序は15:00までに申告を出さないといけないようでしたが，僕たちのチームは何の申告もしていませんでした．気付いた時には時すでに遅し，発表順が一番最初になっていました！！「これは，ミスった！」と思いました．発表までの残り時間が刻々と迫ってきており，成果物の提出期限ギリギリまで，バックエンド側でNFT発行のトランザクションを起こした後の画面遷移部分をTAKくんと仕上げていました．まだ白紙だった「使った技術」や「技術構成の図」などの部分のスライドを作り始めたのは，発表まで残り15-20分というギリギリの時間でした！矢印や使用したフレームワークやライブラリのロゴを集めて，チームメンバーが同時にスライドを編集して一気に完成させました！
普段，自分はバウンティなどにしばしば参加するのですが，いつもはバックエンドやフロントエンドは簡単に済ましてしまいます．今回は，フロントエンドやバックエンドのメンバーが居たので，いつも自分が作るものより全体的に完成度が高くできたと思うので，うれしかったです．

作ったもの

NFTのコントラクト

誰でもこのリンクから，Tokenのコントラクトとソースコードを自分の目で確認できます！！

用いた技術について

実装について

ブロックチェーン

EthereumでNFTを発行しました．Ethereumの強みとしてはサードパティのマーケットプレイスが充実しているというエコシステムの強さやチェーンの安定性でしょう．コントラクト一つで全ての山に対応するNFTを作成することも可能ですがシンプルな設計にするため，山一つに対して一つのコントラクトを作成しました．この実装の問題はデプロイのコストが大きいことです．これを緩和するために，Minimal Proxyというパターンを用いました．Minimal Proxyとは，実装コントラクトとして機能するコントラクトを一つデプロイし、それをバックに複数のプロキシを生成する手法です．Minimal Proxyのコントラクトのバイトコードは，0x363d3d373d3d3d363d7346e2bd0f2e34832ec9ce95dc79865a42ac14b8975af43d82803e903d91602b57fd5bf3だけになるので，コントラクトのインスタンスを2個以上デプロイする場合にはコストが抑えられます．注意点としてはdelegatecallの呼び出しが加わるので1回の関数呼び出しあたりのガスが少し増えます．（確か+700gas/call？）しかし，今回のような思い出を表すNFTはその思い出のある人が所有することに意味があり，頻繁に売買されるものとは考えにくいでしょう．そのためデプロイコストの減少が関数呼び出しのコスト増加を上回るはず，と考えてこの設計を採用しました．

バックエンド

Dockerを用いて環境構築をし，バックエンド環境としてDjangoのサーバーを立て，データベースにはPostgreSQLを使うという形で構築しました。

まず，ユーザー登録などの最低限の機能を実装しました。その上で，NFTのトランザクションに必要なモデル（データベースの型）を作成した上で，このデータを基に処理を行うコードを作成しました。

具体的なメインの処理としては，ユーザーがある特定のリンクを踏み，NFTの発行をリクエストされると，バックエンド側でコントラクトを呼び出し，NFT発行のトランザクションを送信するというものです。NFT発行時，ユーザーの代わりにガス代を支払うところがポイントで，ユーザーはETHを用意する必要が無いというのが，このサービスの大きな特徴です！

今回は複数の山の実装までは至りませんでしたが，データベースに登録するだけで実装可能な状態まで持って行けたのは良かったです。

ちなみに，特定のリンクを踏ませるのに，QRコード，NFCタグや，GPSを組み合わせる案は出ましたが，この辺の実装になると手間がかかる，もしくはモバイルアプリ開発が必須になるなどの理由から，今回はQRコードを用いて最低限の形にするようにとどめました。この状態では，一回URLが拡散されると誰でも取得ができてしまう状態になってしまうため，実際にサービスとしてリリースするとしたら，（ネットワーク接続がある前提で）QRコードをディスプレイに表示させ，一回読み込まれるごとにURLとQRコードを動的に変更したり，GPSでの確認を行ったり（位置の詐称はできてしまいますが…）する改善策が挙げられます。

フロントエンド

主にHTML、ブートストラップを用いて、開発を行いました。私たちはまだ歴が短いということもあり、あまり凝った開発をすることができませんでしたが、見た目は上手くサイト構築できたのではないかと考えています。よりリッチなサイトを作るには、デザインと配置の技術とJavaScriptのスキルが必須だと考えたので、そちらも今後は力を入れていけたらよいなと感じています。

最終発表

最終発表のデモでは、Massunが解説、TAK848が実演しながら本番さながらのNFT獲得場面を再現しました。

①頂上について、バーコードを読み込んで...

②QRコードを読み込むと、発行ボタンが現れる。

③発行ボタンを押すと、NFTのカードが現れ、登頂の証を手に入れる！

コンセプトとして、登山をただ登るのではなく記憶に残るものとして、価値を見いだすため、私たちはブロックチェーンを用いたNFTの技術に着目し、サミットハントNFTを制作しました。

それぞれメンバーの感想, 学んだこと

Massun

僕はよくEthereum関係のバウンティや小規模のハッカソンの類にいつも一人で参加します．今回は開発する仲間がいるという点で自分にとっては新鮮なハッカソンでした！，むしろチームで参加するのが普通だとは思いますが...

いつもは自分ではそれほど上手く作れないバッグエンドやフロントエンドの部分は，簡単に済ましてしまうのですが，他のコースのメンバーのおかげで個人開発のクオリティより全体的に完成度が高いものができたと思い嬉しかったです．

Yoshiharu

自分自身はこのメンバーの中でも、一番技術力がなく、全くの初心者という感じで参加しました。メンバーの技術力がすごすぎて、全く力になれませんでしたが、今回のハッカソンを通じて、ギットの使い方やフロントエンドの技術について知ることができたのと、自分自身が伸ばさなければならない点を知れて良かったです。ですが、ハッカソンはやっぱり技術力が伴ってより楽しさを感じれるのだと思います。留学に行く時に国内である程度喋れるようになって行くのと、全く英語がしゃべれない状態で海外へ行くのとでは、積める経験値の差は歴然です。次参加することになったら技術力をもっと上げた状態で参加したいと思います。

yuto

発表会があること、webサイトがメインではないことよりインパクトを与えることのできるサイトを作ろうと思いアニメーションを多く使ったのですが、コピペで使える面白いギミックのものがウェブに非常に多く転がっていることを知り面白かった。

zawa

とりあえず考えてみて、手動かしながら追加修正していく。
技術的な知識から発想、説明できるので、「なんかすごそう」に見せやすい。

のような、エンジニアならではの強みを押し出せて楽しかったです。時間が限られているからこそ最小限を意識して実装できたのも良かったな。

はじめましてのルーキーとも交流できたし、Ryuさんとも絡めたので当初の目的はかなり果たせたと思います。逆に次はいつものメンバーで案件のキツさがない中でゆるっとしてみたらどうなるかやってみたいな。

どの班見ても「お前全然できないからそこで黙って見てろよ」みたいな声は少ししか聞こえなかったので、案件にまだ参加していない人でもすでに参加している人でもそれぞれの楽しみ方があって、それを探すのもいい経験になりました。

TAK848

GitやGitHubを用いた共同開発が初めてだったのですが，各人がブランチを切り，プルリクエストを出して合わせていく作業が，とても面白かったです。さらに，なんだかよく分からなかったDockerを実際に使うことができたのが良い経験でした。zawaさんにご指導いただきつつ，チーム全員で協力し合ってアイデアを形にすることができてよかったです。皆さんありがとうございました！

今回，バックエンドコースで学習していった内容を存分に活かすことは出来たと思っています。これからコースの最終課題を早く終わらせて，案件などに入り，実務経験を積んでいきたいなと思います。そしてまた機会があれば，このようなハッカソンに挑戦していきたいなと思います！

まとめ

今回のハッカソンを通じて、1人1人が新しい発見をし、交流関係も持つことができたと思います。これからも日々みんなで成長していきましょう！