今までのリポジトリをGitBucketに移行させたりしていました。
本題
ふと最近、物忘れが多く自分が今までどこに行っていたのかを記録とっておきたいと思い6/2から始めました。
今月は緊急な仕事が入って全く進まなかったり何回もデザインをやり直したりとかしていましたがなんとかデプロイできました。
(まだ未完成な部分あるのは後々訂正していきます)
サイトはhttp://about-hiroppy.org
コード汚いし設計ガバガバです。
あとデザインも未完成です。
なぜorgなのか?
gTLDの中で選びたくて自分のメインサイトがPage Not Found :(だったためどうせCompanyでもないのになぜかcomだしならこっちもorgにしちゃえっていうよくわからない理由です。
ドメインはお名前.com、vpsはさくらです。
今回はgenerator-angular-fullstack - npmを使って実装しました。
つまりフロント、バックエンドをすべてJSでやりました。
バックエンドの実装自体は一週間かかったかかからなかったかぐらいですがデザインで二週間近く取られてしまいました><
使ったライブラリやフレームワーク
- Express(MVC)
- Angularjs(MVW)
- mongoDB(DB)
- SASS(CSS Template Engine)
- Compass(CSS Authoring Framework)
- Jade(HTML Template Engine)
- Underscore(神)
- Grunt(task runner)
- Yo(雛形作成ツール)
- Bower(frontend package manager)
- Livereload(ファイル監視)
- Karma(test)
- Bootstrap
- 多すぎるので以下省略...
デザイン面
- レスポンシブデザインに対応させた。
- いつもよりもカッコイイデザインにしてみた。
形式
1. 開始ツイート
指定ワードの場合
出社
— プログラマからデザイナーに転職したい (@about_hiroppy) 2014, 6月 27
Foursquareにも対応している。2. それに対するreturn
@about_hiroppy -53ace3dd90efc16204094deb
— プログラマからデザイナーに転職したい (@about_hiroppy) 2014, 6月 27
これはMongoDBに保存している各ドキュメント(object)のprimary keyである。3. さらに情報の追加をしたい場合は返ってきたリプライに対してさらにリプライをする。
写真(複数枚可)、コメント、場所などの追加情報が可能である。
@about_hiroppy I http://t.co/65GsShLM3E
— プログラマからデザイナーに転職したい (@about_hiroppy) 2014, 6月 27
4. そうすると追加したかのリプライが帰ってくる。
@about_hiroppy change status 53ace3dd90efc16204094deb 473-
— プログラマからデザイナーに転職したい (@about_hiroppy) 2014, 6月 27
以降3->4の流れである。
構造
画像作り終わって思ったがJadeとScssはgrunt buildでやるからそこには入らないです。(ごめんなさい)
将来的な拡張を考えてuserstreamを自分の鯖で流すことにした。
デーモン化させるためにpm2を使用した。
- GET
- calender
- ranking
- photo
- info
- countMonthAndAll
- users.me
- users.show
- POST
- place(各場所に対して発行しているAPI)
- users.create(使ってない)
- PUT
- users.changePassword
Place APIについて
新しい場所が登録された場合のIDの振り分けを8桁のIDとして生成させることにした。
生成方法として4+4で('0000' + (Math.floor(Math.random() * 999) + 1)).slice(-4) + ('0000' + (Math.floor(Math.random() * 999) + 1)).slice(-4)とした。
これで重複したら運が悪かったのだと思います(´・ω・`)
今更思ったが普通に初回のprimary keyでいいと思えてきた。
テストについて
クライアント、サーバー、両方 karmaに任せた。
既存のバグ(時間作って直します)
一回visitedのページにまた戻るとanimationやphoto libraryがバグる(確定)
あとバグではないがPlaceの右2つの円ぐらいどうにかしたいけど案がない
難しかった点
とくにレスポンシブデザインが難しかった。
たとえBootstrapのgridシステムを使っているといえどもwidth:320px までの対応は本当に難しいし自分で実装し直しの部分もあった。
あと320pxまでくるとtableに対してoverflow-xがつくのはどうしようもない。。
結論
このような大規模(?)な開発は久しぶりだったのでとても楽しかったです。
デザインはかなり難しいし一回創りだすと自分の気に入らない点が大量に出てきて終わりが見えなかった(なので期間を設定した)。
自分のセンスのなさを再び思い出した。
最後に
7月は自分はiOS developerでもあるのでSwiftの勉強をします(リリースしているアプリの書き換えの予定)
ただ仕事と研究が忙しくなるころだと思うので時間の効率を良くしないとキツイ感じします。
完成度は70%ぐらいだと思っているので追々更新することになりそうです。
追記
今月の給料(6万over yeah!)がたくさんはいるのでWiiUとマリカ8買いました!
しかし今週の勉強会自分担当なので全くゲームできない。。。!
おまけ