feature image

2021年1月26日 | ブログ記事

2020冬ハッカソン 2班 「Qtheme」

こんにちは、20Bのtarariraです。traPでは主にSysAd班とGraphic班で活動しています。
2020年の12月に開催された冬ハッカソンに参加しました。2班の制作物は「Qtheme」です。

「Qtheme」 is ... ?

group-210-2

部内SNS traQ のカスタムテーマを、プレビューしながら作成、公開、共有ができるサービスです。traQでは、スキン変えのようにカスタムテーマを決めることができるのですが、カスタム画面ではどこの色がどの部分であるかをつかみにくく、結局標準テーマを使うというメンバーが多い状態でした。そのため、もっとカスタムテーマが流行ってほしいという想いがありました。

traQでの実際の設定画面

----------2021-01-14-3.07.48
jsonでのインポート/エクスポート機能が最近実装され、カスタムテーマの配布が後ひと押しで流行りそうな雰囲気でした。

メンバー

サーバーサイド

@mazrean, @Ras

クライアントサイド

@annin, @tararira, @SSlime

今回のテーマは?

ハッカソンでは、与えられたお題に関係した制作物を作ることになっています。
気になる今回のテーマは、「いし」「かみ」「はさみ」でした。

まず、

「はさみ」 → 「チョキ」 → 2
「かみ」 → 「パー」 → 5
「いし」 → 「ロック」 → 6

→ 256 になります。

さらに、256といえば16進数です。

そして、16進数といえば、カラーコードですね。

なにかカラーコードを使った制作物を作ることにしました。

このこじつけはRasが考えてくれました。

「カラーコードって何?」

カラーコードとは、「#FF863E」のように、#(シャープ)に続く16進数(0~9+A~F)6桁の英数字で色を表したものです。2桁ごとに赤・青・緑の濃淡が表され、16進数(0~F)の0が最も薄く、Fに近づくほど濃い色となります。例えば白は「#FFFFFF」、黒は「#000000」、のように表されます。上の画像にもたくさん登場していますね。

使用技術

Golang, OAuth2.0, Vue.js(Vuetify), TypeScript, Sass

進行

最初の1,2 日目は、サーバーサイドはDBスキームを設計し、クライアントサイドはデザインをつくっていました。その後はサーバーサイドとクライアントサイドに分かれて、それそれ同時進行で開発が進んでいきました。
最終的にサーバーサイドの開発が早く終わり、クライアントサイドの実装がぎりぎりまで行われました。

完成

テーマの編集画面

プレビュー側のCSSに苦労しました。

-4

カラーピッカー

こちらで選択した色が、左側にリアルタイムで反映されます。

----------2021-01-14-3.35.52

テーマギャラリー

部員が投稿したテーマが並びます。気に入ったものを選択, エクスポートして自分のtraQにインポート, 適用することができます。

-5

結果

最多コミット賞をいただくことができました! ありがとうございます。

現在40個近いカスタムテーマが公開されています。部員の人は是非気軽に追加してみてください!
いいカスタムテーマライフを!

tararira icon
この記事を書いた人
tararira

SysAd班とGraphic班で活動しています。デザインが好き

mazrean icon
この記事を書いた人
mazrean

SysAd班で活動したり、百合漫画の布教をしたりしている人。

Ras icon
この記事を書いた人
Ras

20B。工学院。 アライグマです。

annin icon
この記事を書いた人
annin

広く浅くをモットーに生きています。

SSlime icon
この記事を書いた人
SSlime

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2018年3月17日
traPのゲーム制作ってどんな感じ?
Saltn icon Saltn
2018年12月5日
ハッカソン2018Winter参加記 - チームFoRd「WFF」 -
Facish icon Facish
2018年6月12日
ハッカソン2018参加記 – チームFeSt「かえるます」 –
eiya icon eiya
2020年12月17日
一人でゲームを作ったハッカソン【AdC2020 34日目】
Komichi icon Komichi
2019年7月15日
2019春ハッカソン参加記 チーム1 「Emotterers」
oribe icon oribe
2018年12月17日
ハッカソン2018Winter参加記 - チームSeek Tracks -
Saltn icon Saltn
記事一覧 タグ一覧 Google アナリティクスについて