kaminari + bootstrap によるデザイン崩れに対応する
なぜか分からないけどデザインが崩れる。
ので、twitter-bootstrap-kaminari-views を使わせていただきました。
使い方は本当に簡単で、app/views/kaminari の中身をそのままコピーしてくるだけ。
すごいんですけどどどどど。
ありがとうございますありがとうございます。
わたしによる、わたしのためのブログサービスで使うのでi18nを使って日本語にしました。
ja:
views:
pagination:
first: "«"
last: "»"
previous: "‹ 前"
next: "次 ›"
truncate: "..." 
こんな感じになります。
まんぞく!!
デザインが崩れる理由 と twitter-bootstrap-kaminari-views でどうやって直しているのかの調査が宿題です。
つづく
herokuで環境変数を定義する
Omniauthを使ったときに CONSUMER_KEY と CONSUMER_SECRET は環境変数を使いました。
(.env) CONSUMER_KEY=xxxxxxxxxxxxxxxxx CONSUMER_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
(config/initializers/omniauth.rb) Rails.application.config.middleware.use OmniAuth::Builder do provider :twitter, ENV['CONSUMER_KEY'], ENV['CONSUMER_SECRET'] end
これをherokuでも動かしたい。
herokuで環境変数を定義するのはとっても簡単でした。
heroku config コマンドで定義されている環境変数一覧を表示。
heroku config :add で環境変数の値を定義。
heroku config :add CONSUMER_KEY=xxxxxxxxxxxxxxxxx heroku config :add CONSUMER_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
ちなみに定義した環境変数を削除するときは、heroku config :remove <キー>
おしまい。
かんたんべんりー。
サイトストラクチャを作ろう！
という宿題が出ておりまして。
ざっくりお題は旅行系のサイト。
今日がんばってやってたんだけど、画面遷移図みたいになっちゃった。
むつかしい（´・ω・｀）
Oauth認証の仕組みをまとめてみる
1. 最初に必要なのが、Consumer_KeyとConsumer_Secret_keyという2種類の鍵。
認証を行いたいサービスから取得する。(twitterだったら twitter developers)
2. この2つの鍵を使って、サービス先からrequest_tokenとrequest_secret_tokenを取得。
3. これらの鍵から認証用URLを作り、認証したいサービスへ遷移させる。
4. ユーザが認証を許可する(または、しない)を選択すると、アプリ側で設定したコールバックURLへリダイレクトされる。
5. このとき一緒に渡されるoauth_verifierと、先ほどのrequest_tokenを使って、このユーザが本当にリクエストしてきたということを証明するために、もう一度サービス先へアクセスする。
6. ユーザが認証を許可していれば、サービス先からAccess_TokenとAccess_Token_Secretが返ってくる。
この2つの鍵が本認証鍵となり、認証プロセスは終了。
だいたいこんな感じかなぁ。
細かいところを突っ込まれると分からないけど、なんとなくイメージは掴めました。
Omniauthでcallbackされなかった事件
omniauth-twitterを使ってみよーということで、Gemfileに
gem 'omniauth'
gem 'omniauth-twitter'
と記述してbundle install
config/initializers/omniauth.rbファイルを作って、以下のように書きます。
Rails.application.config.middleware.use OmniAuth::Builder do provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET' end
ここのCONSUMER_KEYとCONSUMER_SECRETは https://dev.twitter.com/ のCreate an app から取得。
必要な情報を書いていくのですが、赤いアスタリスクのとこはきっと必須だから書くよね。
で、それ以外は書かないで進めてしまったのがダメだったみたい。
1番下の Callback URL に何かしら記入しないとcallbackされないらしいです。
(と小さく英語でも書かれているみたいなんだけど、完全無視してました。)
ここを書いてあげたら、ちゃんとcallbackされましたよ。
手元のアプリ側に間違いがないわけだから、原因探すのも大変だったー。
結局先輩に見てもらって、教えてもらったのだけど。
こうゆうとこ気付けるようになるといいなと思いました。
おしまい。
HTML+CSSの研修に行ってきました
基本的な文法とレイアウトを作るときの考え方を学んできました。
ブラウザ戦争の話とか、ちょっとした余談も面白かったな。
わたしがポイントと思ったのは、基本中の基本だけど、
ブロック要素とインライン要素の区別
これはブロック、これはインラインってあんまり意識してなかったけど、これあやふやにしてると後から辛いぞって。
ブラウザで100％広がるのがブロックで、広がらないのがインラインという分かりやすい違いを教わりました。
本当は見た目と文書構造は分けて考えるべきなので、見た目の特徴でブロックとインラインを区別するのはおかしいんだけど、
初心者には分かりやすい。
margin
marginって思うように反映されないときあるじゃないですか。(わたしはある)
2個続いているボックスにborderやpaddingが存在しない場合、上のボックスのmargin-bottomと下のボックスのmargin-topの
大きい方しか評価されないからなんだけど、なんてややこしいんや。
で、講師の方はmargin-bottomしか使わないと言ってました。だいたいみんなそうでしょ？って。
初めて知りましたわー。
line-height
これはノートの罫線みたいなもので、日本語だとだいたいフォントサイズに1.5かけるとちょうど良いみたい。
float
floatの使い方初めてちゃんと分かりました。
使いづらいと思ってたけど、ちゃんと分かればちゃんと使えるね。
floatはテキストがない場合、高さがないものとみなされてしまう。ややこしいけど、そうゆうものだからしょうがない。
clear: both; を使うと回り込みをしなくなる。overflow: hidden; を使うと高さを算出する。
どっち使っても同じように見えるけど、背景画像があるときははっきり違う。
clear: both; は回り込みをさせなくするだけなので、テキストがあるところまでしか高さがないのです。
背景画像がある場合はoverflow: hidden; を使わないと、変になってしまうのでした。
基本的なこと分かってなさ過ぎたので超良かった。
CSSのレイアウトはもうちょっと練習しないとアレだけどアレだ。
つづくー。
RailsCast勉強会
最近Ruby5をよく聴いているのですが、英語の難易度が高いということで、RailsCastを紹介してもらいました。
社内での勉強会も週1で開催。わーい。
今日の題材はTwitterBootstrap
http://asciicasts.com/episodes/328-twitter-bootstrap-basics
ビデオの内容がまとまった英文が載っているので、読んで理解。
内容をふまえた上で、さあ聴いて(見て)みましょーというのが出来ていい感じ。
帰ってきてからもう1回見たけど、意識して聴かないとだいぶ映像に持ってかれるわー。
(映像見てると何してるのか分かるから、分かった気になってしまう)
だいたい話の流れは掴んだので、次は目を閉じて聴きながら、頭の中でビデオ流す。
次回の社内勉強会の題材は、わたしのリクエストが通ってOmniAuthです。
予習していくじょー
