大学内ハッカソンの発表資料

1. NUT Hackathon 2014 成果発表
＼ ٩('ω')‫/و‬ ／
@Joe_noh

2. ３つ あります
＼ ٩('ω')‫/و‬ ／
＼ ٩('ω')‫/و‬ ／
＼ ٩('ω')‫/و‬ ／

3. 1. Yakman
● テクノロジーが果たすべき役割とは
– みたいなことを酔っ払って考えたら浮かんだやつ
– 作りかけで放置してたものを仕上げた
– 複合役満は無し
● https://Joe-noh.github.io/yakman

4. 1. Yakman
● つかったもの
– CoffeeScript
– Sass
– Middleman
● CoffeeScript と Sass をよしなに
● gh-pages へのデプロイも
– SVG
● 拡大縮小や色変更など自由自在ﾋｬｯﾎｰ !!
– velocity.js
● js でアニメーション ( 速いらしい )

5. 1. Yakman
● 工夫したとこ
– SVG をどうやって貼るか
● background-image として読ませると簡単
– だけど fill とかの CSS が効かなかった
● DOM として扱わねばならぬ
– 使わない漢字も最初に全部読み込んじゃえ
– display: none で隠す
– 使うときにそこから引っ張ってくる

6. 2. Replace with ＼ ٩('ω')‫/و‬ ／
● Chrome Extension
– クリックしたやつが＼ ٩('ω')‫/و‬ ／になる
– レイアウトがシッチャカメッチャカになるので条件つけた
● 子要素を持たない
● テキストが 4 〜 20 文字
● https://github.com/Joe-noh/replace_with_it

7. 3. くるくる
● Canvas でゲーム
– 反射神経系
– 名前は適当
– 自分で書いたのは 200 行弱
● https://Joe-noh.github.io/kurukuru

8. 3. くるくる
● 使ったもの
– CanvasEngine
● Canvas をつかったゲームのフレームワーク
● あんまり活発じゃないっぽい
● Kinetic.js のほうが有名？
● これの話をあとでするかも
– あとは Yakman で使ったものとほぼ同じ

9. 3. くるくる
● 工夫したとこ
– 回っているのはキャンバス自体
– キャンバスを円い <div> で囲ってる
– 円に内接する正方形のキャンバスがあるけど隠してる
– 座標計算とか回転演算してない

10. 3. くるくる
● まるごと回転の問題点
– まっすぐな状態に戻せない
● できるような気はしてる
– スコア表示するとそれも回っちゃう
● キャンバス２枚連動させられないか？
● その他
– 難易度がマシンスペック依存

11. おつかれさまでした