ハッカソンの概要

僕の所属している名古屋工業大学(以降名工大)では前部長key5さんのはたらきで去年初めてピクシブさん協賛のハッカソンが開催されました！(全10チーム)
前年度のハッカソンを知っての後輩達、また同期のやってみたいという強い希望があり今年も第二回としてc0de部内ハッカソンwith pixivを開催する流れになりました。

HTMiL ～作ったアプリの話～

このアプリを作る前、初めに解決したい問題と提供したい価値について考えていきました。

以下はアプリの簡単な動作説明です！

最初に参加するチームを選択

パブリックのチームに参加する際はユーザー名とアイコン画像をアップロード
プライベートチームに参加する際はパスワードが追加で必要
自身でチームを作ることも可能

チーム参加画面	ニックネームとアイコン選択ダイアログ

毎日変わるミッションに対してイラストを制作！

ミッションをクリアするとeggポイントを獲得
イベントミッションや合作ミッションをクリアすると高eggポイント！
投稿した画像はチームTLと公開TL両方に投稿される(鍵はチームTLのみ)

ミッション表示画面	ミッションに対する回答選択ダイアログ

タイムラインスクリーンでチーム内や公開のイラストにいいね

イラストは自分の描いたものを使用しているので著作権は問題なし！

タイムライン画面1	タイムライン画面2

ショップでeggポイントを消費して報酬をチームで共有

報酬はチームTL内でのみ公開される
協力してたくさんの報酬を仲間と獲得しよう！

ショップ画面

工夫した点・苦労した点

工夫した点

タイムラインといえば同じデータ形式(クラス)で構成されていると思われがちですが、今回は ソシャゲ風 創作支援アプリということでチームで共有するデータもタイムラインであらわす仕様を考えていました。チームで共有するものの最初の想定としては

clip studio paintというペイントツールのassetsの新作の上位をスクレイピングした結果を表示する(公式への連絡やメンターさんへの質問の結果の末未実装)
カラーパレットの配布
新しいミッションの開放

e.t.cを考えていましたが、ほかにも増やそうと思えばいろいろなデータ表示する必要が出てきます。そういったところで 本当に将来を見据えた 実装にできたという点が開発中よかったところかと思います。

interface Post(
    val postId: String,
    val createdAt: Date,
)

data class PostModel(
    override val postId: String = "",
    override val createdAt: Date = Date(),
    val user: String = "",
    val imageUrl: String = "",
    val iconUrl: String = "",
    val mission: String = "",
    val comments: List<String> = emptyList(),
): Post

data class RewardModel(
    overrideval postId: String = "",
    val createdAt: Date = Date()
    val rewards: List<String> = emptyList(),
    val iconUrl: String = "",
    val source: String = "",
)

postLazyPagingItem?.let {
    when(it) {
        is PostModel -> {
            PostCard(
                postModel = it,
                modifier = Modifier.padding(...),
            )
        }
        is RewardModel -> {
            RewardCard(
                rewardModel = it,
                modifier = Modifier.padding(...),
            )
        }
    }
}

※FirebaseのCloud Firestoreを使用していたためデータ取得の際にrepository層で型の変換をするとなった時簡単に記述するとit.toObject(Hoge::class.java)となるが、これは二つの型へのシリアライズが不可だったため 一度Postインタフェースを実装したクラスに変換 ということにして対処していた。
こうすることで柔軟かつ少ないコード量でTLを実装できたと思っている。そう思いたい...

苦労した点

シンプルにスクレイピングの部分ですね。

スクレイピングするのに規約やrobots.txt?だったかな？でスクレイピングが禁止されていないかを確認
スクレイピングに使うwebViewでJSを書かなければならなかった(web知識皆無状態でwebページの::after、::beforeとか書いてある部分がアセットに対応しているという地獄、なんだこれ)

結果発表

限界開発し過ぎでハッカソン最終発表日寝込みました...
(だから当日の記事が書けない涙)

だるさと闘いながらスライドを作成し発表を仲間に任せ、気になる最終結果は

kobakenn(pixivのメンターさん)賞！！！

最優秀賞は逃しましたが、Android開発のプロフェッショナルにもらえたメンター賞はとてもうれしかったです。
解発を手伝ってくれた二人に感謝と、こんなふがいないリーダーで申し訳ない謝罪を！
まだまだ未実装だったり気になる点が残る部分は自分で一つのアプリとして仕上げていきます。

最後に

このような催しに協賛していただいたpixivさんには感謝でなりません。これからの世代にもこのハッカソンの文化を受け継いでいってほしいと思います！
この駄記事を読んでくださっている学生の皆さんもどうぞ学内学外問わずハッカソンにかかわってみてください！行動したもの勝ちです！

最後の最後にpixivさんのインターンの紹介です～
現在アルバイトとして働いていますが、とてもよくしてもらっていて学べることも多いです！
創作の文化を自分の大学や専門で学んでいる知識を使って盛り上げていきたい方など向いていると思います(アルバイトの分際ですが笑)

↓技術者申し込みのサイト
https://hrmos.co/pages/pixiv/jobs/2070452727360933888?utm_source=x&utm_medium=social&utm_campaign=pixiv_xcorp_202502