日直地獄

小学校では事件が起きる

WiiUブラウザ用イラストサイトを作った

ここ最近ずっと作っていたWiiU用のイラストサイトの体裁がだいたい整ったので公開しました。
Drawu - WiiUブラウザで描けるイラストサイト

機能紹介

編集画面

編集画面は以下のように、全く素っ気ない感じですが、
f:id:AirReader:20130216164756p:plain

  • スクリーントーンっぽいもの
  • 謎のキラキラペン*1*2
  • カラーパレット
  • レイヤー3枚
  • undo/redo(デジタル十字キーにも割り振られています)
  • 一時保存機能

など、結構絵を描くのに必要な機能は盛り込んだつもりです。PCからは絵を描くことはできませんが*3 http://drawu.net/illust から動く編集画面を触れるので興味がある方は見てみてください。WiiUWiiUブラウザが優秀なおかげで大変描き味よく仕上がっております。WiiUをお持ちの方はぜひお試しください。

ユーザーページ

続いて、ユーザーページは以下のような感じで、特筆すべきことはありません。
http://drawu.net/user/AirReader/illust

パーマリンク

また、パーマリンクページも以下のように、特徴的な機能はないですね。
http://drawu.net/user/AirReader/illust/46daebdf186ab413

トップページ

トップページはいわゆるタイムラインになっていて、フォローしているユーザーの投稿を見れます。じっくり見れるように1枚1枚めくっていくUIにしてみました。また、その場でFavoriteもできます。
それから、下のMessageにはFavoriteやフォローの通知が流れてくるようになっています。
f:id:AirReader:20130216165858p:plain

以上でサービスの説明は終わりです。
(ここまで説明を書いて気づきましたが書きかけを永続的に保存しておく機能がないですね…)

利用したもの

サーバーサイドは node.js でミドルウェアは express を使っています。DBはredisを利用しています。また、javascriptフレームワークには angular.js を利用し、デザインはGoogleっぽいBootstrapことtodc-bootstrapを利用しました。どれも大変便利でした。

hoge~

開発からデザインも含めて全部一人でやるのは自由にできて良かったけど大変だった。

*1:右スティックを倒すと角度によって色が変わる使い所のないペン

*2:右スティックに色変更が割り当てられているのは私が左利きだからで、右利きの人には輪をかけて使えない機能、ということが後に判明しました

*3:WiiUブラウザ拡張機能を使用しているため