[MooTools, HTML5] ToDoアプリを萌え化してみた

Web Creatros Contest “Q” っていうのがjsdo.itでやってます。
商品がApple製品だったのでまた釣られてしましました(ノω^)

お題を呼んでわが身をふりかえってみると……
仕事のToDoは会社が用意してくれるポストイットに書き、
プログラムに係わることは//TODO で書いている。
プライベートでは使う事がないから……
ほとんどToDoアプリをつかったことがなかった!

……ならToDo管理以外にも使えるものだったら
私みたいな「ToDoアプリ?なにそれおいしい?」ユーザーも振り向いてくれるかもしれない。
などと考えていたら神様がそっと囁いた。

 ノノノノノ
( ○○) < 身近にイイ人材がおるじゃないか…ほれ、脳内に
  (||||)

なるほど!脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか!
具現化するに合う素材を探してみたら素敵な立ち絵素材と巡り会えたので
ニュートリノの速さでレジ直行した勢いのまま作ったのがこれです。

todoll-start

プロジェクト名 はtoDoll
販売中の素材集が男女よりどりみどりだったので
あとでバージョン増やせるようにカスタムできる構造にしました。

デモアシスタントはピチピチの女子高生ですww
覚えたことは確認の時に1つずつ読み上げるので、言わせたいセリフを喋らせることもできます(^q^)

todoll

<デモアシスタントの特徴>

  • 高校1年生。春休み終わったら2年生
  • 英語は苦手(アルファベットも1文字換算)
  • 長い言葉は覚えられない(10文字まで)
  • タスクは10個しか覚えられない
  • 覚えることを拒否することもある

タスク管理アプリだけどタスクを覚えてくれないことがあるのが
このアプリ最大の特徴かもしれない。

とりあえずToDoアプリ的な機能が作り終わった、っていう段階なので、挙動おかしいところがあります。
ブラッシュアップ全くしてないから画像の読み込みとかが激重です。

See the Pen
toDoll
by Tenderfeel (@Tenderfeel)
on CodePen.

jsdo.itがよく死んでるのでCodePenにミラー置きました。

フレームワークはMooToolsを使いました。
jQueryが2つ読み込まれているのは、jsdo.itのエディタに不具合あるらしくて消せなかったのです…。

ソースを読んだらわかる程度のネタバレ

セリフと待ち時間

ふきだしに入るセリフはJSONデータです。

GitHubで見る
jsdo.itで見る

セリフ1つのフォーマットは今のところこうなってます。

{"text":"どうしたの?","face":"normal", "delay":3000,  "pending":1000}

delayが次のセリフに移るまでの表示時間、
pendingがそのセリフを表示するまでの遅延時間です。

配列に入れるとdelayの時間分だけ間隔を置きながら再生します。
キーはアクションに応じてセリフを取り出すために使うんですが、
セリフの処理をしているのはAssistantクラスとScenarioクラスなので
コントローラーをカスタムすれば好きなように追加しまくれるようになってます。

{
    "waiting":[
        {"text":"なにかするの?", "face":"happy", "delay":20000},
        {"text":"まだかな?", "face":"normal", "delay":10000},
        {"text":"どうしたの?", "face":"normal", "delay":5000},
        {"text":"何かしたいんじゃなかったの?", "face":"normal", "delay":10000}
    ]
}

バリデーションと特別な反応

以下の条件をチェックします。

  • 1タスクあたりの最大文字数
  • 空送信
  • NGワード(レベル1~4とスペシャル3種)

エラーになったとき喋らせるセリフが設定できるようになってます。

NGワードの設定はAssistantクラスのオプションで出来ます。
カテゴリはcomplain, dislike, hate, detest, love, cheer, cure の7種類。
各カテゴリに属する単語とヒットした時のセリフによって反応が変えられます。
この条件にヒットした単語を含む文字は保存されません。

デモアシスタントは初々しい女子高生なので、卑猥な単語を嫌がる設定になってます。
detest > hate > dislike > complainの順に嫌悪度が高い反応を示すんですが、
detestの単語を連呼しても嫌われたりすることはないです。(ロジックないからw)

仏の顔も3度までフラグ

ToDo削除と全消去のときに出る確認ボタンは3つあります。
左がYes、右がNoです。

todoll-confirm

じゃこの真ん中のボタンは何をするのかというと、表向きは何もしません。
内部ではクリック数をカウントをしていて、3回を超えるとフラグが立って押すのを拒否するようになります。
また、ボタンを押してから放置してセリフを全部聞いても拒否フラグが立ちます。

Special Thanks

とくだ屋

こちらの素材を使用しています。

他の素材も全部萌え!
この素材と出会わなかったら作ってなかったと断言できる(`・ω・´)

結果

Bronzeでしたー\(^o^)/
物欲で釣られた身としてはAir貰えなかったのは残念なのですが、楽しかったです。

他の真面目な人は絶対やらないだろう要素を盛ったので、作ってる時から悪目立ちするだろうと思ってました。
でも出した当日はサムネイルが真っ白で、タイトルも変えちゃったからなんのアプリなんだかさっぱり分からないw
あのサムネがアプリのアイコンだと思ったら完全にアウト。
まずはクリックして先に進んでもらわなきゃダメだろうと思って、
最初真っ白だったサムネイルになんか喋ってるように見える美少女が出るように変更しました。
結果アクセス8000超えたので、改修は効果あったと思ってます。

kayacブログの先頭にいたり、Hot codeに長いこと鎮座していたのは
縮小されても可愛さが滲み出て止まらない美少女のおかげでしょう。
とくだ屋さん方面には足を向けて眠れません。

セリフは結構さくさくと。脳内で喋らせつつ決めたので
声が聞こえた気がするってつぶやきにはニヤリとしたw
脳内再生が捗るから無音でも悪くないな、と思ったり。

ソースはgitの練習を兼ねてgithubに置いてみました。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください