でザイナーらしからぬ

でなりの雑記。ツイッターで済ませたくないこと書くとこ。

忘年会を助けるクソを生み出した。

この記事は「クソアプリ Advent Calendar 」11日目の記事です。

みなさんのクソを諸事情あってまだ見れていないので、今月末手が空くタイミングがとても楽しみです。


ちなみに、

今日、2015年12月11日は私の勤めるj社の忘年会です。私は幹事の一人として参加してきます。皆さんがこの記事を見ている頃、もしかしたら僕は忘年会でワイワイやっているかもしれません。

ちなみに、今年の忘年会は洒落た感じのバーを貸しきって「好きに使っていいよ」と言われています。ということで、僕はいつもイベントをやる時と同じのりで、スライドを作ったりプロジェクターを使ったり する予定です。

で、これが、11日目のクソだよ。

早速ですが、こちら!!

http://denari.xyz/toshiwasure/

(リポジトリ : https://github.com/denari/toshiwasure/)

これなーに??

弊社の忘年会では、今年2つの企画を行います。

  1. スリッパリレー(リンク先は参考動画)
    • 動画のとおりで、足だけでスリッパを横の人に繋いでいくリレー形式のゲームです。
    • 絵面以上になんか面白かったです(幹事のMTGのテストプレイでは)
    • 参加人数やもろもろの都合で、5人5チームとしました。
  2. 社員○×クイズ
    • 社員一人ひとりにまつわる○×クイズです。
      • たとえば、「○○さんの家は木造住宅だ!」みたいな、その人に関係する、多分その人しか正解を知らないであろう問題を出すものです。
    • 問題文は予め幹事が考えます。が、それが正解か不正解かは、参加している社員にその場で教えてもらいます。
    • 参加社員全員分問題があり、例年全員分なんだかんだ表示してるらしいとの噂を小耳に挟んでいました。

しかし、やれ「5人5チームに参加者を分けるくじ引きつくらなきゃ」だの「クイズの出す順番はランダムがいいけど、どうやってやろっかな」だの「プロジェクターがせっかくあるなら問題文映したくない!?」だのと、僕自身が忘年会を楽しみにしていたが故に、自分の中での問題意識や妄想は膨らむのです。

そこで、今回はAdvent Calendar申込時に作ろうと思った「かしこいかわいい俺メーカー(後述)」を直前で取りやめて、忘年会を楽しむ手助けをするアプリをつくりました。

欲しい物リスト

忘年会で、プロジェクターをせっかく使うなら、やっぱりPCでできることをいろいろしたくなってしまうのが、我々オタクの性といいますか。ドゥフフ

  • 進行状況(何時からイベント開始ね!とか)をプロジェクターで表示したい
    • ここの部分は既存のツールに頼ったほうが都合良さそうです。一旦パス。
  • チーム分けをうまくしたい
    • 特にこだわりなくランダムに決めていいとのこと。ランダムであることを明示的にする意味でも、アプリが役に立つ場かもしれない
  • スリッパリレーはトーナメントで行うが、そのトーナメント表がみたい。もっというと線が引きたい
    • 面倒臭そうなのでパス。僕のスキルセットならAdobe illustratorのパスを直接触ったほうが100倍速い!!
  • クイズをランダムな順番で出したい。
    • 次の対象の社員が分かるようなインタフェースにすべきか、次の対象社員を伏せたインタフェースにすべきか、一長一短ありました
      • ちゃんとランダム感アピールする意味と、幹事的には残り何問あるか見るという意味もこめ、今回は見えるようにしています。
      • どっちがよかったのか今のところわかっていませんが、忘年会を通して周囲のリアクションでなんとなく見えるものがあるかもしれないと思っています。
  • クイズを出した人と出していない人をちゃんと区別できるようにしておきたい。
  • もしかしたらブラウザのリロードをうっかりしちゃうかもしれないから、そういう時に焦らず最低限の対処ができるようなアプリにしておきたい
  • 出欠管理をしたい
    • ついでに言えば、欠席の人のクイズはなかったことにできるようにしたい。

だいたいコレぐらいはかんがえてました。ごちゃごちゃしてるって?? 僕もアプリ作っている時にいろいろ迷走したんすよ、ちょうどこの欲しい物リストのように。

つくる

そう、これを着手したのが月曜日。 僕は一旦、学生のころからすこしずつ触ってきた、慣れてる jQueryを使ってアプリを書くことにしました。

そして、きっと忘年会までに余裕ができるだろうから、その隙にちょっと別のjsライブラリを触ろうと、意気込んでいました。

しかし、とある用事(後述2)があってそれはかなわず、jQueryで、しかもめちゃめちゃ読みにくいプログラム が完成しました。ここは、本アプリのネガティブなクソさ。非常によろしくないので、どっかのタイミングで書き直したいなあと思っています。

なんとなくさわった技術

HTML / CSS / JS

割と当然さわっています。 最近iOSDjangoしか触ってなかったので、なんかいつもより手がスムーズに動いた気がしました。 それだけ、Webの知識に比べてiOSDjangoの知識が足りないのかとちょっとショック...精進します。

Emmet

開発時に、久しぶりにつかいました。久々の素のHTMLで、シフトキーレスを謳っている自分としてはちょっと抵抗がありましたが、快適なコーディングができました。でもやっぱJadeのがいいわ。

Local Storage

初めてちゃんと真面目につかいました。便利ですね。 JSON.stringifyしたものをLocal Storageにつっこみ、引き出すときはJSON.parseして、オブジェクトが元通りになる、そんなことは当たり前なのですが、いいね! ただ、Chromeの開発者ツールからめっちゃ中身が見えたので、その方法で収納・取り出しをすると、思わぬところでセキュリティホールが開くんだろうなという妄想が...気をつけます...

総括

ああ、これ、くそだぁ。でも何もないわけじゃないな。

よかった部分

  • 自分のためのプログラミングができたのでモチベーションは高かった。
  • あした使えるクソアプリができた。
  • 久々にお家コーディングして楽しかった
    • 最近デザイン案件を家でやることが多く(後述2)家でエディタと戯れる機会がすくなかったので、iOS / Djangoのなれないプログラミングの息抜きになった(気がする!!)

よくなかった部分

  • 目新しい技術を触るきっかけとして期待していた分物足りない
    • スケジュール上の取捨選択の結果なので自分は間違っていないといえる、ものの、もっと上を目指したいなあ。
    • スケジュール把握超大事
  • デザインもこだわれていない

明日役立つクソアプリ、モチベーションは上がるけど、計画的にやりましょう...!!

後述って言った所

かしこいかわいい俺メーカー

エリーチカ!! お名前.comととラブライブのコラボのときの画像 こんな風に、任意の画像を自分のほっぺたにペタッと貼った感じの画像を作成するツールが作りたかった

これとかつかえるんじゃね

  • SkyBiometry
    • 顔の角度判定に
  • Three.js
    • 画像回転に使えそうだけど、Three.js以上に軽いやつがいいよなあとは思っていた。こいつすごすぎ。

最近デザインで忙しかった

kosenconf-100tokyo のデザイナーやってます!!

100カンファのロゴ!!

100カンファのイケメンデザイナーさんはこんな人です。皆さん仕事早いし積極的でクレイジーなサイコーなイケメンデザイナー@denari01に会いに来てくださいね!!!(当日は受付スタッフやってます)

※ 実はこのイベントとSPAJAMの忘年会が被っちゃって、SPAJAMの方が本当顔出して終わりか、最悪行けないんだよなあ...

余談だけど来年以降のいろんな場所でのプレゼンはどんどんフロントエンドエンジニアリングによせて行こうかな。あくまでデザイン寄りで攻めるけれども。