KMCアドベントカレンダー用のブログ

毎年12月に1記事書きます。書けなければ100円貯金します。

GIUを支える技術

この記事は KMC Advent Calendar 2019 - Adventar 7日目の記事です。

adventar.org

6日目の記事は id:dnek さんの推し絵文字・キャラデザ・モデラー・グループから探せるVTuber検索サイトを作った - DNEKです。

www.dnek.app

これからVTuber界隈をウォッチしてみたい!という人にはオススメのサイトとなっています。是非足を運んでみてください*1

ごあいさつ

こんにちは。kmc-id: kata です。普段はゲームを開発したり、絵を描いたり、研究は大変だなあって思う事をしています。

本日は、部内専用のイラスト共有アプリケーション、God Illust Uploader(GIU) についてのお話をします*2

あまりこういった記事を書く機会が無いため少し読み辛いかもしれませんが、お付き合いいただけると幸いです。

God Illust Uploader

Image from Gyazo

God Illust Uploaderとは、3年前の2016年に僕が開発したWebアプリケーションであり、イラストをサーバー上にアップロードし、また、サーバー上のイラストをWebブラウザ上から簡単に閲覧できるアプリです*3。 主に部員が利用する事を想定しており、現在部内で動作している物は実際に部員しかアクセスできないようになっています。

Image from Gyazo

現在では約80名の部員がイラストを実際にアップロードしており、アップロードされたイラストの総数は約1400枚にのぼります。

このアプリによって部内でのイラストの投稿や、イラストを介したコミュニケーションが盛んになると良いなと思って開発を行いました。

構成

GIUは次のような構成で開発されています。

また、このサービスが立ち上がっているサーバーや、部員である事を確認する認証基盤は部内で既に使用されている物に乗っかっています。

jQuery

jquery.com

jQueryは言わずと知れた有名javasciptライブラリですが、フロントエンドの話をしている記事だとよくレガシーだのもう捨てようだのとやたらこき下ろされている印象です。

僕もどこかのタイミングで何らかのフレームワークを導入したい*4なと思ったまま、気づいたら3年が経っていました。とはいえ現在のこのアプリの規模だとわざわざそういったフレームワークを導入せずとも十分に書けるという所もあり、難しい所です。この辺りはただ勉強したいから、というような別のモチベーションで組み替えても良いかもしれませんね。

sinatra + ActiveRecord

github.com

sinatraRubyで動作するWebアプリケーションフレームワークです。

類似の物で有名な物としてRuby On Railsというものもありますが、このsinatraというフレームワークRoRと比べて構造を気にせずサクッと書けるのが特徴(のハズ)です。開発当初あまりその辺の知識が無かった僕に kmc-id: nonylene くんがオススメしてくれた事が使用したきっかけです。この場を借りて感謝申し上げます。

github.com

ActiveRecordは後述のSQLiteMySQLといったSQLを用いたデータベースをRuby上から操作する際、あまりSQLの事を意識せずに操作できるRuby用のライブラリです。Ruby On Railsとの兼用が有名だと思いますが、sinatra上でも機能します。便利。

SQLite

www.sqlite.org

部員のGIU上での情報だったり、イラスト毎の様々な情報を永続的に記録する為のデータベースとして、SQLiteを採用しました。この辺は特にこだわりが無く、当時の僕が知ってただけという感じのノリで採用を決めています。こちらも現在の規模感だとここまで厳格にする必要はなく、MongoDBのようなイマドキの気軽にイジれるDBの方が良いかもしれません。

KMCのサーバーと認証基盤

正直な所僕が書いた箇所はやればできるといった感じでそんなに重要では無く、こっちの方がよっぽどGIUを支える技術と言えます。気になる方は是非入部をご検討下さい。

KMCではSlackというチャットツールを用いて部内のコミュニケーションを図っているのですが、GIUにはイラストをアップロードすると任意でSlackの指定したチャンネルに自動的に投稿できるという機能があります。

Image from Gyazo

これによりアップロードされたイラストに対してコメントをすぐ書いたり、SlackのReaction機能で"よさ"を表明したりと、イラスト周りのコミュニケーションが盛んになりました。 実はGIU本体にもコメント機能やいわゆる"いいね!"機能があるのですが、Slack上でのやり取りの方が気軽で素早いので、全く使われなくなってしまいました。まあSlackを用いるなら要らないかもしれません。

ちなみに、投稿の際にはGyazo gemを用い、Gyazo経由でサムネイルの投稿を行っています。

また、現代では当然と言っても良いかもしれませんが、バージョン管理サービスとしてGitGitHubを利用しています。

github.com

Image from Gyazo

ずっと僕一人が管理しているようなリポジトリでしたが、ここ最近になって先輩部員の方や後輩部員の方からPRが飛んでくるようになり、様々な問題を抱えていたこのサービスも少しずつ改善されていっています。とても嬉しいですね。

あとがき

さて。これまでは僕がそんなGIUを管理*5していたのですが、気づけば僕も6年目という事で卒業が近づいてきております。 卒業後もスキを見つけてGIUを管理していく事はできなくもないかもしれませんが、せっかくなのでさっさと後輩に委譲したいなあと思い、この記事を書くに至りました。

KMCの後輩の皆様には是非この記事を読んでいただき、GIUの維持、あるいは新たな部内専用イラスト共有アプリを開発していただけたらなあと思います。現代では参考になるサイトはいくらでも見つかりますし、周りには頼れる部員もいますので、初心者でももっと良い物を十分に作り上げる事ができると思います*6。是非挑戦してみてください。

今年の記事は以上になります。

KMCM

KMCの入部資格に制限はありません。受験生や社会人でももちろん入部できます。遠方にお住まいの方でも入部できます。Slackでおしゃべりするだけでも大丈夫です。コミュニケーションしませんか? 興味がある方はメールやDMで入部希望の旨を連絡してください。見学もできます。

www.kmc.gr.jp

あと、Slackの共有チャンネルのお誘いもお待ちしております。 優秀な人材が集まる学生団体とコネクションを張りませんか?

次回予告

次回は kmc-id: kyp さんの「何か書けるはず……」です。この方は部員の中でも屈指の人生経験の持ち主ですので、記事の内容が楽しみです。よろしくお願いします。

あわせて読みたい

KMCでは今年、他にも二つのアドベントカレンダーを進行中です。

adventar.org

adventar.org

是非ご覧下さい。

*1:僕はゲーム実況系が好きなので、よく鈴原るるさんの動画を見ています。こんるる~。

*2:GUIの話ではありません。ごめんなさい。

*3:簡単に言えばpixivみたいなものです

*4:Reactとか。え、もしかしてもう古いですか……?

*5:GIUが落ちた時に落ちたなぁとSlackに投稿する仕事

*6:ここに「かつての僕のように。」と書こうとしましたがあまりにもクサすぎたのでやめました