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

20Bシステム制御系 広く浅くをモットーに生きています。

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

24M 生きてます

この記事をシェア

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

関連する記事

2023年11月21日
School Breakin' Tag -新感覚おにごっこ-
s9 icon s9
2024年9月20日
2024年 1-Monthonを開催しました!!
Synori icon Synori
2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2024年6月21日
ハッカソン参加記 4班"Slide Center"
Alt--er icon Alt--er
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記