読者です 読者をやめる 読者になる 読者になる

酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

ASP.NET MVC 5を使ってまるゆさんジェネレーターを5日で作りました

ASP.NET Microsoft Azure

まるゆさんジェネレーターを作って公開しました。股漏さん(@matarou072)が描かれたまるゆさんのイラストの左右にセリフが入ります。

f:id:ch3cooh393:20140827024805p:plain

こちらからアクセスができます。

使い方は簡単で、右か左のセリフを入力して、作成ボタンをクリックするだけで「まるゆさん画像」を作ることができます。

まるゆさんについて

この記事を見られた方は、すでにまるゆさんはご存知かと思いますが、改めて説明を書きます。

元ネタである旧日本陸軍の潜水艦の三式潜航輸送艇を擬人化した「艦これ」に登場する艦娘のまるゆです。通常、艦艇の製造・運用は海軍によっておこなわれますが、陸軍にリソースを割きたくない海軍と海軍にわざわざ依頼したくない陸軍の思惑が一致して製造された潜水艦です。このまるゆが生まれるに至った経緯は面白いので、興味のある方はWikipediaなどで調べてみると良いでしょう。

どちらかというと戦う艦艇ではないまるゆはドジっ子キャラなのです。

がい子くじんさんの二次創作設定を受けて作られた「まるゆさん」は、ドジっ子とはほど遠いハードボイルドな台詞回しであったり、見た目にそぐわない最強者というのが面白いです。

がい子くじんさんはTwitterやpixivでまるゆさん4コマを不定期で連載されています。

まるゆさんジェネレーターを作ったキッカケ

キッカケは3つあります。

まずひとつめ。

なかじさんが、nkd.jpという短いドメインを取得されて「短縮URLサービスを作るぞい」という話をしていたところです。僕も前々から短縮URLサービスって、どうやって作ってるんだろうと気になっていたのでいつものようにパクtt…リスペクトして、保存したデータを A-Z、a-z、0-9までの合計62文字を使ったID に変換する処理を実装しました。

その処理だけを使って、URL短縮サービス[p.tl] - pixivのように短縮URLサービスを作って公開してもよかったのですが、それだけでは物足りない気がしていました。

ふたつめ。

別件でWebアプリにリソースとして組み込まれたフォントをアプリ上で使うことができるのかを調査する必要がありました。

ASP.NET MVCはローカル環境でデバッグ実行することができます。この状態であればPCにインストールされているフォントを自由に使用することができます。ただAzure Webサイトにデプロイすると使えるフォントが激減します。一度、下記の記事で調べました。

これはWebサイトを動かしているのがWindows Server 2012(英語版)だからです。日本語フォントはMSゴシック、MS明朝体くらいしかありません……自分が期待しているフォントを使用するにはアプリに組み込む必要がでてきました。後日書くと思いますが、PrivateFontCollectionクラスを使えば、ASP.NET MVCプロジェクトでも自分の期待するフォントを使用することができました。

最後、みっつめ。

股漏さんが以下のようなツイートをしていたのがRTされてきたのを見ました。

前述したふたつの調査結果と組み合わせて使えば、いつでも好きな言葉をまるゆさんに話してもらえる画像ジェネレーターが作れそうだと確信しました。

まるゆさんジェネレーターのアプリケーション構成

素材があるなら使わないと……と思い、いつもの構成でゴリゴリとコードを書いたので、骨格は1日でほとんど出来上がりました。

  • インフラ
    • Microsoft Azure Webサイト
  • アプリケーション・フレームワーク
    • ASP.NET MVC 5
  • ビュー(CSSフレームワーク)
    • Bootstrap 3
  • ストレージ
    • Azure Storage

やりたいことだけを書いていたら生成される画像がかなり雑になってしまったので、骨格ができた後に2日程かけて画像生成のロジック調整(というか文字列描画の位置合わせ)とHTMLのUIを弄りました。

生成した画像をリクエストがある度に動的に生成するのか、登録時に画像を生成してストレージに保存しておくのか、ストレージに保存するとすればAmazon S3を使用するのかAzure Storageを使用するのか……。これだけで2日間悩みました。結果としては、Azure Storageを採用して画像をBlobとして保存するようにしました。

初めて使ってみましたが、Azure WebサイトからAzure Storageへファイルを保存するのはかなり楽だということが分かりました。これもまた後日記事にしますね。

まるゆさんジェネレーターができあがりました

…ということで、まるゆさんジェネレーターができあがりました。

こんなことをしていたらあっという間に夜が更けていきます。早く寝よう。

f:id:ch3cooh393:20140827114647p:plain