PositionStrategyの開発振返り(slim, sass)

先日リリースしたPositionStrategyの開発の振り返りをします。
(PositionStrategyはこれです ⇛ http://position-strategy.ffab-0.com/

※数日前に開発メンバーの友人Hがブログに記事を書いているので、
その内容とは被らないような内容にしてます。(主にHTML,CSS担当として)
(そのブログ記事⇛http://tech-mr-myself.hatenablog.com/entry/2013/11/04/224842

■ PositionStrategyの概要

企業情報をグラフ化し、企業間での比較を視覚的にできるサービス。
具体的には、売上高や経常利益、時価総額、平均年収や平均年齢などの指標をグラフで見れます。
企業単体の業績推移はもちろんですが、A社とB社の業績比較や☓☓業界のトップ5企業なども見れます。
検索できる企業は東証一部、二部、マザーズ上場企業です。

f:id:kiiita:20131106134543j:plain

■ 今回自分が担当したこと

主にフロントエンドを担当しました(ただしJS除く。つまりHTMLとCSSだけ汗)。
HTMLはSLIMで、CSSはSassで書きました。

■ 開発の手順

今回のプロジェクトのスタートは特殊でした。
というのも、このサービスはもともと友人Hとその友人で企画したものだったからです。
その後色々あったらしく(仲間割れとかネガティブなものではない)、Hから声を掛けてもらって、
アサインさせてもらうことになりました。

その頃は丁度RubyRailsを勉強し始めて2ヶ月弱の頃で、
「ちょうどRubyRailsの勉強できるからいいか」と思っていた。
が、担当は上述のようにデザインが主・・・。
なぜそうなったかというと、①フロントとバックを分担することで開発スピードを上げるため、②自分がデザインが好きで一応の得意分野であったため、です。

で、ワイヤーフレーム(手書き)⇛モック(Cacoo)⇛Slim,Sassで実装という手順で進めました。
今振り返ると、この手順の重要性は大きかったと感じます。
なぜかというと、半年ほど前、友人Hとあるサービスを開発していて、そのときもデザインを担当していたんですが、
そのときはHTML,CSSをほぼ初めて触るレベルだったので、モックとかも作らず、とにかく試行錯誤して作っていきました。
しかも、CSS3に感動して「こんなことできるんや」ってので色々手を出してしまい、無駄な時間が多かった。

これに対して、今回はばっちりPixel数まで詰めてモックで描き上げたから、
あとはそれをSassで実装するだけだったので、余計な回り道がなかったです。

■ デザインをする上で意識したこと

KISSの法則を常に意識するようにしました。
KISSの法則とは、Keep It Simple, Stupid!の略です。
AppleのThink Simpleと共に念頭に置いて開発を進めました。

よく言われることですが、
「アメリカのデザインはとてもシンプルで、日本のデザインは野暮ったくごちゃごちゃしている」、
というのが通説です。

ですが皮肉なことに、
「日本人はCoolなデザインよりもごちゃごちゃしている方が好む傾向にある」、
という現実があります。
(何故なのかは全く理解できないけど・・・)

自分はごちゃごちゃしているのは嫌いなので、
PositionStrategyの機能が最低限理解できるようなデザインを心掛けるようにしました。

ただ、「Simple」と「単調でつまらない」というのは紙一重で、
今回のデザインは自分なりにはSimpleかつCoolを目指しましたが、傍から見れば後者に属するかもしれません。

■ この一ヶ月間で感じたこと、反省したこと

①全然RubyRailsの知識がついてない
これはホンマにやばかったです。
相方はばりばり書けるので、そのレベルの差に愕然としました。
今後も2人で月1でのサービス開発を目指しているので、ずっとフロント開発にならないようにスキル向上させていかんとアカンです。

②東京−大阪間でも開発は全然できる
Googleハングアウトを多用しました。Skypeは色々終わってます(ビデオ通話の面で)。
でも、やっぱり数回は直接会って話をしないと伝わらないことも多いと感じました。

■ おわりに

このサービス開発の途中で、友人Hとffab0(ファブゼロ)というチームを作る決意をしました。
これからもいっぱい開発していくので、よろしくです。
サービスについてのフィードバックとか頂けると嬉しいです。


PositionStrategy、一度見てみてくださいねー。

http://position-strategy.ffab-0.com/

f:id:kiiita:20131106140856j:plain

ナツ22:Webアプリできた!

やっとこさ、練習用のWebアプリが公開できるレベルまでに仕上がった〜!!٩(๑- -๑)۶

http://seed4inspi.herokuapp.com/
f:id:kiiita:20130905235925p:plain

作ったこのWebアプリは、孫正義発想法をWebでやろうってやつです。
同じようなのあるだろうなーって思って作る前に検索かけたらiphoneアプリとかもあって、
でもまあ練習用ってことで作ることにした。

単語登録して、ランダムにそれ取り出せるよんってだけなのに、
全て仕上がるまでに時間かかりすぎた。。。

一番時間かかったのがHerokuにデプロイできなくて、
デプロイできる状態にしてから一から作成済みのものをコピーしていったこと。
すげーめんどくさかった。。。

いやいや何とかしてデプロイできる策探せやって話ですが、
結構やってもダメで折れちゃった。

それで結局git push heroku masterできる状態で、rails newして、
そっからMVC作っていった。
めんどくさかったけど、二回目でもやっぱエラー出る所もあったり、
Devise認証どうやるんだっけか?とか、Facebookログインどうやるんだっけか?
みたいに忘れまくってたから、いい練習になったということでOKかな!!笑

今度は本当に使ってもらえるようなん作れるようにがんばるぜかお٩(๑- -๑)۶

ナツ20:heroku run rake db:migrateがrake aborted!された時の対処法

新しくscaffoldしたり、MVC作ったりして、ローカルでrake db:migrateしたものを、

$ heroku run rake db:migrate

したら

Multiple migrations have the name Createhoge

ってエラーが出てくるので、そのときは、

$ git status

を入力すると、

# On branch master
# Changes not staged for commit:
# (use "git add/rm ..." to update what will be committed)
# (use "git checkout -- ..." to discard changes in working directory)
#
# deleted: db/migrate/20130904005538_create_hoge.rb
#

ってな感じで表示される。

なので、

$ git rm db/migrate/20130904005538_create_hoge.rb

して、

$ git commit -m 'resolve multiple migrations problem!'
$ git push heroku master

したら、無事

$ heroku run rake db:migrate

できやした。

ナツ19: Deviseのsign_outエラーと、:deleteのエラーへの対処

Deviseで認証機能を実装し、その関係で:deleteの関するエラーを吐きまくってて対処できなかっため、備忘録。

f:id:kiiita:20130903200739p:plain

f:id:kiiita:20130903200849p:plain

Devise導入当初、ユーザーのサインアウト処理で、

No route matched [GET] "/user/sign_out"

と出てくる問題が発生した。

それを対処するために、サイトを検索した結果、
config/initializers/devise.rb

config.sign_out_via = :delete

config.sign_out_via = :get

に変えればOKってことで、変更してた。
(だいぶ前にやってたからこんなことしてたの忘れてたわ)

これによってサインアウトはバッチリできるようになったけど、
「ポストとかのDeleteができなくなってる」ってことに気づいた。

Deleteのリンクは、

<%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?"} %>

という記述をしてて、ここには間違いがないことを確認できた。

次に確かめたのが、
app/views/layout/application.html.erb

<%= javascript_include_tag :defaults %>

となっている所。
これを、

<%= javascript_include_tag "application"%>

と変更した。
そしたらpostの削除ができるようになった!!

これで万事OK!って息巻いてたら、
今度はユーザーのサインアウトが再びできなくなってる(T_T)

原因は、

<%= javascript_include_tag :defaults %>

を消したことだと思う。

なので、

<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "application" %>

を両方記述したけど、もちろんダメ。

それで最初のところに戻って、
config/initializers/devise.rb

config.sign_out_via = :delete

に戻す。
そして、
app/views/layout/application.html.erb

<%= javascript_include_tag "application" %>

のみ記述する。

これで記事の削除も、サインアウトも両方できました。
やれやれ・・・(๑- -๑)

ナツ18:環境音めっちゃ良い!

環境音を流してくれるサービスに最近はまってる٩(๑- -๑)۶

この記事にもあるように、いい感じに脳みそをスパークさせてくれるらしい。

実際にカフェに行くと、本物の環境音があるわけやけど、
隣がおばちゃんとかだと煩いし、作業の邪魔になることが多い(- -๑;)
かと言ってイヤホンで音楽聴くと、環境音はなくなるし。。。

だから家で環境音サービス流しつつ、iPhoneで音楽流しながらだと最高である٩(๑- -๑)۶
おすすめ٩(๑- -๑)۶

上のサイトにはないrainycafeってのがお気に入り。

ナツ17:OmniauthのSQLite3::SQLException: no such column: users.provider問題(facebook, twitter)

前回の練習用アプリでOmniauth, DeviseによるFacebook, Twitter認証を断念したんやけど、
今回の練習用アプリでSNS認証はクリアしたいので再チャレンジ。

参考にしたサイトは前回と同様、deviseでfacebook,twitter認証-Qiitaってところで、丁寧に書かれてる。

ただ、多分この通りやると、FacebookTwitterへ認証画面が飛んで、元のサイトに戻ってくるときに

SQLite3::SQLException: no such column: users.provider: SELECT "users".* FROM "users" WHERE "users"."provider" = 'facebook' AND "users"."uid" = '929272' LIMIT 1

ってエラーが出るんじゃないかな?
(前回も出てて、このエラーの意味が全くわからず断念した)

で、今回は、

$ rails db
$ sqlite> .alter table users add column provider[string];

で解決できた。必要なカラム足りてなかったのね。

上記の参考サイトで、

$ rails g migration AddOmniToUser uid:integer
 migrationファイルにて、omniauth認証用カラム追加

って書いてあって、多分ここで

$ rails g migration AddOmniToUser uid:integer provider:string
 migrationファイルにて、omniauth認証用カラム追加

ってやっとかないと、俺の場合はエラー出た。

おそらく次のアプリでもSNS認証は入れるから、備忘録!
最近徐々にエラーの意味がわかってきた٩(๑- -๑)۶

【追記】
twitter認証から戻ってきたら、
CookieOverflowというエラーが出たので、その対処法もメモっとく。

config/initializers/session_store.rb

(App)::Application.config.session_store :cookie_store, :key => 'xxx'

(App)::Application.config.session_store :active_record_store

に変更。

このままだと、sessionってのが見つからないよ〜ってエラーが出るので、

$ rake db:sessions:create
$ rake db:migrate

ってして、もう一度サーバー立ち上げる。そしたらOK。

※認証画面から戻ってくるのはTwitterFacebookもできたけど、
一回パスワード登録してログアウトして、再びSNSログインしてもまたSignupの画面に飛ばされる。
既存ユーザーの認識されてないっぽいんやけど、なぜだ。

【追記2】
上記のSignup画面に飛ばされる問題をFacebookの方では解決できた。

models/user.rb

 def self.create_with_omniauth(auth)
  create!do |user|
   user.provider = auth["provider"]
   user.uid = auth["uid"]
   user.name = auth["user_info"]["name"]
   user.screen_name = auth["user_info"]["nickname"]
  end
 end

を追加すればFacebookログイン完了。