年の瀬も押し迫り、すっかり寒くなりましたね。今年最後のお役目をつとめます、セガゲームス開発統括部アート＆デザイン部TA（テクニカルアーティスト）セクションの宮下です。
普段はUnityでアーティストとプログラマを繋いだり、Mayaプラグイン（C++）やスクリプトを書いたり、たまにデザインデータを作ったりしてます。今回は、TAの業務でも少し変わったネタとして、Webアプリ作成についてお伝えします。とくに最新のネタというわけでもないので、プログラマの方には退屈な記事かと思いますが、ご容赦ください。
そもそもWebアプリって？
ブラウザ上で動く、サーバーを介したアプリケーション、みなさんも普段から使ってますよね。GoogleやFacebook、Twitter、Slackなど、インターネットを通して提供されているサービスは、ほぼWebアプリと呼んでいいでしょう。あのような有用なサービス、そこまでいかなくてもちょっとしたサービスをプロジェクトや部署の中で提供できたら楽しくないですか？もちろん会社内でのWebアプリなので、インターネットではなく、イントラネットを使ったサービスということです。
Docker
その方法の１つは、オープンソースのWebアプリを探してインストールし運用することです。最近はDockerというものがあって、簡単にWebアプリをPCにインストールできます。
docker run --name mattermost-preview -d --publish 8065:8065 mattermost/mattermost-preview
Dockerがインストールされていれば、このコマンドを実行するだけでSlackのようなチャットサービスMattermostを提供できます。
もしかすると、これぐらい当たり前のように感じられるかもしれませんが、まともにWebアプリをインストールしようとすると面倒なことになるので、このDockerはなかなか画期的です。
ニーズにマッチしたオープンソースのWebアプリが見つかればいいですが、探しても見つからない…。そんなときは、もう１つの方法、自分で作るしかない！TAだから！（昔はデザグラマって言われてました…。今はいい言葉があります。）
今回は、アセットライブラリとボット管理ツールなど３例、紹介します。
アセットライブラリ
2015年に作った部内用のWebアプリで、アーティストの作成したデータの共有を目的としています。具体的には、psdやtgaなどの画像ファイル、UnityのスクリプトやPrefabなどを格納できるUnitypackageファイルなどを共有しています。基本的に誰でもブラウザからアップロード、ダウンロード可能で、検索やタグ付け、フォルダのような階層構造も持っています。合わせてgifサムネイルを自動的に作成しUnity上からアップロードできるUnityスクリプトも用意しました。モーションやエフェクトは、gifアニメで視覚的にどのようなアセットかを確認できます。
ファイルをアップロードする機能を作って公開した直後に、誰かがアップロードしていると、他の人がアクセス不能状態になることが判明し、あわてたことを覚えています。1人で開発とテストをしているときには分からなかった問題だったのですが、原因はアップロードした画像のサムネイルを生成するなどの後処理がメインプロセスを占有してしまうためで、後処理を非同期にすることで対応しました。
ボット管理ツール
私たちの組織では、Cisco SPARKというチャットツール（チャットワークやSlackのようなものです）を導入しています。それにはボットを組み込む機能があり、何らかの情報をボットから提供することができます。ただし、APIが公開されているだけで、使うにはハードルが少々高い。そこで、ボット管理ツールをWebアプリとして作りました。
このWebアプリでは、ボットのスケジュールや発言内容、週替わりや日替わりの当番の指定ができます。たとえば、特定のメッセージを決まった時刻に発言させる、毎週水曜日のミーティングの議事録当番を知らせる…といったことが可能になります。
もともとは今参加しているプロジェクトの朝会当番を、ボットに教えてもらうために作ったのですが、現在では他プロジェクトやセクションのミーティング告知など、幅広く活用してもらっています。
面白かったのは、本来当番のメンバー名を入力すべき箇所（上のスクリーンショットでぼかしの入っているところですね）に、カレーやラーメンなどの食べ物名を入れて、ボットに今日食べる昼ごはんを日替わりでつぶやかせているプロジェクトがあったことです。遊び心のある思いもよらなかった使い方に驚かされました。
アーティストアサイン管理ツール
プロジェクトがいくつも平行している中、アーティストのアサインの調整がスピーディに求められていませんか？私たちの組織では求められています。エクセルでの管理もいいのですが、もっと効果的に管理はできないものかと突貫で作り上げたのが、このWebアプリです。リーダーがメンバーのスケジュールを入力し、どういったスキルのアーティストを求めているのか、また、いつアーティストがプロジェクトからリリースされるのかを視覚的に分かるようにして管理しています。まだまだ発展途上のWebアプリで現在も作成中です。
それでは、次にこのようなWebアプリの作成方法を簡単に説明します。
Ruby on Rails
私、個人的にRubyが大好きで処理の自動化などに使っています。でも、MayaなどのDCCツールのスクリプトに採用されている言語はもっぱらPythonなので、実はあまりアーティストには勧められません。
Webアプリを作るためのフレームワークとして、とても有名なものがあります。それが、このRubyで作られたフレームワーク「Ruby on Rails」です。「Ruby on Rails」の思想は、ほかのフレームワークにも大きな影響を与えていて、Pythonなら「Django」、phpなら「CakePHP」というフレームワークがあります。「Ruby on Rails」は2004年の誕生でなかなか歴史があり日本でも人気です。それゆえ、Web上での日本語の情報も豊富でビギナーにもお勧めできるフレームワークです。大抵の問題や要望は、Webで検索すれば解決できます。
「Ruby on Rails」はActive Recordが有名で、この機能により簡単にデータベースにアクセスできます。具体的には、オブジェクトのインスタンスが、そのデータベースの1つの行を表すような仕組みです。
a = Game.new a.name = "sonic the hedgehog" a.price = 5000 a.save
このコードで、新しい行を追加できます。すばらしい！
「10分で Rails」とWebで検索するとたくさんヒットするように、とても簡単にWebアプリのひな形を作ることができます。ここでは「セガ」というWebアプリを新しく作ってみますね。
rails new sega cd sega rails generate scaffold game name:string price:integer rake db:migrate rails s
これらを実行したのちに
http://localhost:3000/games
にブラウザでアクセスすると、
のような画面が出てくると思います。
New Gameをクリックすると、
このような画面に遷移して、ゲーム名と値段を入れることができます。先ほどActive Recordでの例をブラウザから入力して、「Create Game」ボタンを押してみます。
どうですか？簡単ですね！
上記のアセットライブラリやボット管理ツールは、この「Ruby on Rails」のバージョン4で作成し、このようなひな形から肉付けして発展させたものです。そして、その作業を助けてくれるのがRubyGemsです。
RubyGems
Webアプリの機能を作る上で、すべてを１から書くのはとても時間がかかります。RubyGemsはRubyのパッケージ管理システムで、世界中のスペシャリストたちが作ってくれた便利機能を簡単にインストールできます。ここで、さきほど紹介したアセットライブラリを作る上で組み込んだパッケージを紹介します。
devise
アカウント管理のためのGemです。ユーザーアカウントとパスワードにまつわる部分を簡単に実装できます。
github.com
CarrierWave
ファイルのアップロード機能を組み込むためのGemです。
github.com
kaminari
ページ切り替え機能を提供します。こういう名前が日本語由来のGemを見ると、ちょっとうれしくなりますね。
github.com
rmagick
画像フォーマットを扱うのに便利です。psdやtgaのサムネイルをブラウザで表示させるためにjpegに変換するのに使っています。ただ、psdをうまく処理できないケースがあって、それに対応するため、「psd.rb」というGemも使っています。
github.com
psd.rb
psdファイルを読み込んだり、サムネイルを作成するためのGemです。
github.com
ransack
便利な検索機能を提供してくれます。
github.com
最後に
アセットライブラリのWebアプリ（サービス）と言えば、このサイトが良くできてます。
sketchfab.com
こんなの作ってみたいですね。ブラウザさえ動けば、もはや何もいらない時代は意外と近そうです。
ここまで読んでくださった方、ありがとうございました。
TAセクションではこのようにアーティストの制作に役立つ環境を提供できるよう力を注いでおります。Unityの登場でTAの活躍できるフィールドは格段に広がり、シェーダーやポストエフェクトなど面白い表現を生み出せないかと日々切磋琢磨しております。そんな中でお仕事したい方はぜひ下記の弊社グループ採用サイトをご確認ください。いっしょに働きましょう！
