undefined

bokuweb.me

【WEBサービス】youtubeを使った音ゲー×タッチタイピングサービスを作ってみた【つくってみた】

CoffeeScript enchant.js wordpress WEBサービス

あけましておめでとうございます。 2015年は頭にあるサービスをいくつか形にしたいと考えているbokuwebです。

早速ですが、2014年の秋から作っていたサービスをβ版ですが公開しましたので告知いたします。

つくったもの

f:id:bokuweb:20141231232902p:plain

無料タッチタイピング音ゲー typebeatscloud

どんなもの?

「typebeats」はタッチタイピングを楽しく学ぶことを目標に作成した、youtube動画の音楽に合わせてタイピングする音ゲー×タッチタイピングサービスです。

いわゆる「BEATMANIAシリーズ」や「太鼓の達人」のような音ゲーとタイピングゲームを合わせてものです。

使用技術

  • 言語 PHP、CoffeeScript(JavaScript)
  • フレームワーク enchant.js、 jQuery
  • CSSフレームワーク Flat UI(Twitter Bootstrap)
  • データベース MySQL
  • CMS wordpress
  • バージョン管理 Git
  • WEB API YouTube Player API

制作経緯

自分はPCのを触る仕事にもかかわらずブラインドタッチが苦手です。 ゲームで練習したこともありますが、いまいち続かなかったため、楽しく続けられるものをイメージして作成しました。”これじゃタイピングの練習になんねーよ”ってつっこみは無しでお願いします。。

また、実はhttp://typebeats.com/という、２年ほど前に作成していて今回の http://cloud.typebeats.com/は次期バージョンという位置付けになっています。

開発に関して - デザイン編 -

ゲームの実装などより、デザインに多くの時間を割いています。(というかデザインができないため時間がかかてしまった、という言い方が正しい) そのわりにこれかよって気もしますが、素人なりにそれっぽくがんばったつもりです。 ゲームなのであまり地味地味にならないように気をつけました。

ただ、細かい部分などは匙を投げてしまったり、見てみぬふりをしてしまっている部分がありますので、そのあたりは目をつぶってください。（僕はゲーム部分がほぼほぼ実装されると急にモチベーションが下がってしまうようです。）

背景画像

知らない人は少ないかもしれませんが背景はhttp://graphicriver.net/で買いました。 クオリティの高い背景やゲーム用のキャラクタなどが安値で販売されています。

Design Templates - Fonts - Logo - Icons | Customizable | GraphicRiver

CSSフレームワーク

CSSフレームワークはFlat UI - Free Bootstrap Framework and Themeを使用しました。 フラットデザイン自体賞味期限が怪しいですが、やはりこういったフレームワークを使用するだけで見た目をなんとかごまかすことができます。

Flat UI - Free Bootstrap Framework and Theme

フォント

知らないひとはいないかもしれません。 M+ OUTLINE FONTS | WEB FONTSを使用させてもらっています。

M+ OUTLINE FONTS | WEB FONTS

アイコン

アイコンはFont Awesome, the iconic font and CSS toolkitを使用しています。 種類が豊富で使いやすい。

Font Awesome, the iconic font and CSS toolkit

ロゴデザイン

ロゴデザインにはSquarespace Logo — Squarespaceを使用しています。 簡単にそれっぽいロゴができる素晴らしいサービス。 低解像度であれば無料です。

Squarespace Logo — Squarespace

開発に関して - 技術編 -

クライアントサイド

ゲーム部の言語はCoffeeScriptを使っています。最高です。 1人でjavascriptを書くならCoffeeScriptを使わない理由はないかと思っています。(あくまで個人的な意見ですが)

javascriptで以下の記述が

$(function() {
  // hoge
});

CoffeeScriptならこうなる

$ ->
    # hoge

また、フレームワークにはenchant.jsを使用しました。 以前のhttp://typebeats.com/ではフレームワークを使用せずに実装したんですが、今回enchant.jsを使用することでこんなに簡単になるのか！と驚きました。 この辺りの詳細についても機会があったら記事にしたいです。

'15.1.18 記事にしました

100行で書けるブラウザで動作するyoutube音ゲーの作り方 - ぼくのかんがえたさいきょうのうぇぶさーびす

サーバサイド

wordpressを使用しています。 ほんとはRuby On RailsやPythonなどを使用してみたいところですが、今回の本題はそこではないので使い慣れたwordpressを使用しています。oAuthやコンタクトフォームもボタンひとつで導入できるのも素敵なポイントです。

読んでませんが以下のような書籍もでていますね。

WordPressによるWebアプリケーション開発

WordPressによるWebアプリケーション開発

  • 作者: Rakhitha Nimesh Ratnayake,プライム・ストラテジー株式会社(監訳),長尾高弘
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2014/11/27
  • メディア: 大型本
  • この商品を含むブログ (2件) を見る

使用プラグインやカスタマイズなどは読んでくれる方がいそうであれば記事にしたいです。

WEB API

Youtube Player APIを使用しています。 javascriptから非常に簡単にyoutube動画を操作することができます。

iframe 組み込みの YouTube Player API リファレンス - YouTube — Google Developers

TODO

  • コメント、評価機能を付ける
  • パフォーマンスの改善 現状FPSが24程度しかでておりません。 公開後分かったんですが、ガベージコレクションが頻繁に走るようなつくりになってしまっているようです。 この辺の詳細もできれば記事にしたいです。
  • 人気譜面一覧の追加
  • コード整理して、コア部分をコードレシピ - 初心者のための簡単プログラミングレシピサイトにまとめてみたい

初心者向け簡単プログラミングレシピ投稿サイト『コードレシピ』を公開しました - あのねノート。

  • 譜面作成時のタイミング調整機能の追加

ひとまず以上です。 技術部の詳細や公開後の話など機会があれば記事にしたいですね。

それでは本年もよろしくお願いいたします。