2016/07/25

Rails

Rails で icomoon で作った icon font を使う

よく icon font が欲しいときに、 icomoon というブラウザから icon font が作れるサービスを使ってます。icomoon で icon font を作ると、icomoon が用意した CDN から自作した icon font を使えるようになるのですが、その CDN は確認用で、本番で使うときはダウンロードしてプロジェクトの中に入れないといけないです。で、久々に Rails で icomoon で作った icon font を使うとしたら色々設定を忘れてたのでメモ。

ちなみに、icomoon ってすごく便利なんだけど、どう使うものなのか全然わかりません（画面に説明が無さ過ぎ！）。初めての方はリガチャなアイコンフォントをお手軽に作成するこちらの記事を一読されることをおすすめします。使い方が丁寧に説明してあるので一回読めば使えるようになります。

icomoon で font を生成

font ファイルをダウンロード

ダウンロードしたファイルから font ファイルを移動

その中に icomoon でダウンロードしたファイルを解凍すると、中身がこんな感じになってます。

Rails アプリの vender/assets/ の中に fonts ディレクトリを作成し、

icomoon でダウンロードしたファイルの中の fonts の中身を移動。

ダウンロードしたファイルから css ファイルを移動

icomoon でダウンロードしたファイルの中の style.css を vender/assets/stylesheets の中に移動。

ダウンロードしたファイルから css ファイルを移動

ファイル名が style.css では、何についての css が書いてあるかわかりづらいので、ファイル名を icomoon.css に変更しておきます。

icomoon.css の @font-face の src のパス url('fonts/icomoon... を url('assets/icomoon... に書き換えます。

書き換え前

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?2d5b77');
    src:    url('fonts/icomoon.eot?2d5b77#iefix') format('embedded-opentype'),
        url('fonts/icomoon.woff2?2d5b77') format('woff2'),
        url('fonts/icomoon.ttf?2d5b77') format('truetype'),
        url('fonts/icomoon.woff?2d5b77') format('woff'),
        url('fonts/icomoon.svg?2d5b77#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

書き換え後

@font-face {
    font-family: 'icomoon';
    src:    url('assets/icomoon.eot?2d5b77');
    src:    url('assets/icomoon.eot?2d5b77#iefix') format('embedded-opentype'),
        url('assets/icomoon.woff2?2d5b77') format('woff2'),
        url('assets/icomoon.ttf?2d5b77') format('truetype'),
        url('assets/icomoon.woff?2d5b77') format('woff'),
        url('assets/icomoon.svg?2d5b77#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

application から import して完了

最後に、 application.sass もしくは application.scss 、もしくは application.css （ここは人によってファイル名が違いますちなみに僕は application.sass 派）から icomoon.css を import して作業完了（ファイルの一番最後でOK）。

application.sass

1	@import icomoon

application.css の場合は *= require icomoon.css を追加。

application.scss

@import "icomoon" ;

application.css の場合は *= require icomoon.css を追加。

application.css

/*
 *= require_self
 *= require icomoon.css
 *= require_tree .
 */

application.css の場合は *= require icomoon.css を追加。

さむくないかい [DVD]

posted with amazlet at 16.07.25

アップリンク (2010-03-05)
売り上げランキング: 135,386

Amazon.co.jpで詳細を見る

2016/07/18

Rails

Rails で静的ページを作る簡単な方法

例えば、「利用規約」や「プライバシーポリシー」、ヘルプページなど、毎回サービスをリリースするときに必要になる静的ページがありますが、そういうページを作るときに、Rails の controller や routes をいじるのが面倒。

Middleman はファイルを置けば静的ページが作られるってところが便利で、Rails でもそういう機能が欲しいって思うときがあります。

その機能を実現するのが thoughtbot が作った「high_voltage」っていう Gem。thoughtbot は他にも bourbon や paperclip 、factory_girl など、デザイナでもよく聞く有名な Gem を作ってる会社。

high_voltage のインストール

まずは Rails アプリの Gemfile に、

1	gem 'high_voltage'

を追加して、

$ bundle

コマンドを打ちます。

これで high_voltage が使えるようになりました。

注意

pages という controller をすでに使ってる場合、high_voltage は使えないです。

ページの作成

app/views のディレクトリの中に pages というディレクトリを作ります。

コマンドラインで作る場合はこう。

1	$ mkdir app/views/pages

で、試しに about ってページを作ってみましょう。

app/views/pages/ のディレクトリの中に about.html.erb（もしくは、about.html.haml、about.html.slim など）を作ります。

コマンドラインで作る場合はこう。

1	$ touch app/views/pages/about.html.erb

適当に about.html.erb （もしくは、about.html.haml、about.html.slim など）に何か書いておきます。

作成したページの確認

Rails を立ちあげて、

$ rails s

作成したページにアクセス（http://localhost:3000/pages/about）。

確認できました。

作成したページへリンクを貼る

作成したページのパスは page_path('about') となります。なのでリンクは、

erb

1	<%= link_to 'about', page_path('about') %>

haml、slim

1	= link_to 'about', page_path('about')

と、書きます。

作成したページの URL から /pages を削除

今のままだと http://localhost:3000/pages/about という URL になってますが、この pages がいらない！ http://localhost:3000/about がいい、ってこともあります。

その場合、config/initializers/ ディレクトリの中に high_voltage.rb というファイルを作成して、そこに

HighVoltage.configure do |config|
  config.route_drawer = HighVoltage::RouteDrawers::Root
end

と、書きます。

それから Rails を再起動すると、http://localhost:3000/about に URL が変わります。

URL が変わっても、パスの書き方は page_path('about') のまま。

階層を作る

例えば、http://localhost:3000/help/post や、http://localhost:3000/help/read のような階層を作る場合、静的ページを入れている app/views/pages/ の中に help ディレクトリを作って、その中に post.html.erb（もしくは、post.html.haml、post.html.slim など）、 read.html.erb（もしくは、read.html.haml、read.html.slim など）を入れます。

すると、http://localhost:3000/help/post 、http://localhost:3000/help/read にアクセスできるようになります。

リンクを貼るときのパスの書き方は page_path('help/post') 、 page_path('help/read') となります。

映像夜間中学講義録イエスタディ・ネヴァー・ノウズ(DVD付）

posted with amazlet at 16.07.19

根本敬
K&Bパブリッシャーズ
売り上げランキング: 303,534

Amazon.co.jpで詳細を見る

2016/07/14

プライベート IP アドレスでローカルで立ち上げてる Rails、middleman にアクセスする方法

ローカルで立ち上げてる、開発中の Rails や middleman を使って作ってるアプリをスマホやタブレットの実機を使って動作確認をしたくなるときがあります。

そんなときは、プライベート IP アドレスを調べて、 http://192.168.xx.xx:4567（192.168.xx.xx がプライベート IP アドレス）にアクセスすると、で同じ LAN 内のスマホやタブレットや Windows機、VirtualBox や VMware や Parallels Desktop で入れてる Mac の中の Windows からもアクセスできます。今回はプライベート IP アドレスを調べ方をメモ。

Rails の場合

普段は、

1	$ rails server

で、Rails を立ち上げてますが、プライベート IP アドレスでアクセスする場合は、

1	$ rails server --binding=0.0.0.0

と、--binding=0.0.0.0 というオプションを付けます。

プライベート IP アドレスを調べる方法

ターミナルに ifconfig と打つと、

1	$ ifconfig

ドバーっと文字が出てきます。その中から「192.168.xx.xx」という数字を探します。MacBookPro 、MacBookAir を使っていて wifi でネットにつないでる場合は en0: のブロックにその数字があります（機種によって異なります）。

http://192.168.xx.xx:4567 にブラウザからアクセスすると、Google Photo の画像が表示されてるはず。

ちなみに、先ほども書きましたが、MacBookPro 、MacBookAir を使っていて wifi でネットにつないでる場合は en0: のブロックにその数字があるので、

1	$ ipconfig getifaddr en0

と、ターミナルに打つと、

1	192.168.xx.xx

こんな風にプライベート IPアドレスが表示されます。

システム環境設定から IP アドレスを調べる方法

プライベート IP アドレスを調べるもう一つの方法として、ターミナルを使わないで Mac のシステム環境設定から調べる方法があります。

システム環境設定

システム環境設定を開いて、「ネットワーク」を選択。

ネットワーク

「ネットワーク」の画面の中の、今ネットをつないでいる接続方法のところを見ると（キャプチャでは wifi）、そこにプライベート IP アドレスが表示されています。

電波系

posted with amazlet at 16.07.15

根本敬村崎百郎
太田出版
売り上げランキング: 132,434

Amazon.co.jpで詳細を見る

2016/07/12

rails

Rails でアンカー付きのリンクの書き方

Rails の link_to を使って、<a href="/page#content"></a> のように、ページの途中にリンクを貼る方法をよく忘れるのでメモ。

書きかた

erb

<%= link_to 'aタグのアンカーテキスト', リンク先のページのpath(anchor: 'リンク先のページの途中のID'), class: 'aタグのクラス名' %>

例

<%= link_to '通知設定変更', edit_user_registration_path(anchor: 'notifications'), class: 'edit-notification__link' %>

haml、slim

= link_to 'aタグのアンカーテキスト', リンク先のページのpath(anchor: 'リンク先のページの途中のID'), class: 'aタグのクラス名'

例

= link_to '通知設定変更', edit_user_registration_path(anchor: 'notifications'), class: 'edit-notification__link'

出力されるHTML

<a href="/users/edit#notifications" class="edit-notification__link">通知設定変更</a>

人生解毒波止場 (幻冬舎文庫)

posted with amazlet at 16.07.15

幻冬舎 (2014-12-26)
売り上げランキング: 16,664

Amazon.co.jpで詳細を見る

2016/07/09

GitHub

GitHub Issues を使って見た目に関する報告する方法

普段、仕事では HTML や CSS をいじることが多いので、Sass のフレームワークを一新したりなど、全体に影響する大きい変更があった場合は、社内のインターンの方にデザイン崩れがないかを目視で確認をお願いすることがたまにあります。

そういうとき、デザイン崩れを見つけたら、 Github Issues に登録してもらってるのですが、こういうデザイン崩れなど「見た目」についての報告をしてもらう際に、文章だけで報告されるとつらい。報告をされたほうは「どこのことを言ってるんだろう？」ってなります。

なので毎回、

該当箇所の画像（必要であれば、画像の中の該当箇所に矢印などのマークを入れる）

それが起きているページのURL

必要であれば文章も（例えば、ログインしていて投稿が0の場合、などそれが起こる条件など）

をセットで報告してね、と言ってるのですが、毎回言うのも面倒なので、言う代わりにペッとURLを貼り付けるだけで済まそうと思って、こちらのブログに書くことにしました。

ダメな報告の例

これだとどこのページのことを言ってるのか、どのアイコンのことを言ってるのか全然わからないですね。「これってどこのこと？それが起きてる画面を見せて教えてー」なんてやりとりをしてたら報告する側も、報告される側もお互いに無駄に時間がかかってしまいます。それに「なんか変です。」って、そんな文章を付けるんだったら書いてないのと同じ、いや、むしろ読んでも何の足しにもならない文章を書いた、読んだ時間だけ無駄です。

大体の Web アプリは「一覧ページ」、「個別ページ」があります。例えば、怖話でいったら、怖い話の一覧ページと怖い話の個別ページがあります。「怖い話の」より、「怖い話の一覧ページの」、「怖い話の個別ページの」まで書いてくれるとわかりやすいです。

いい報告の例

ここまで丁寧に書いてくれると報告されたほうも助かります。

GitHub Issues に画像を貼る方法（Mac のみ）

「毎回画像貼るの！？面倒くせーからインターンやめるわ」って思ったかたもいるかもしれないですが、Github Issues に画像を貼るのってすごく簡単だから大丈夫。

command + shif + 4 キーを同時に押す

ちょっと押しにくいですが、 command + shif + 4 キーを同時に押します。すると、マウスカーソルが「+」に変わります。

キャプチャを撮りたい部分を選択

マウスカーソルが「+」に変わったのを確認してから、画像として貼りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲います。ボタンから指を離すと「パシャ」っとカメラのシャッター音が鳴ります。すると、クリップボード（一時的にデータを保存できる共有のメモリ領域）に選択したキャプチャが画像として保存されます。

GitHub Issues にキャプチャを貼り付け

クリップボードにキャプチャが保存された状態で、GitHub Issues の本文を入力するテキストエリアにペースト（ command + v キーを同時に押す）すると、 ![Uploading image.png...]() という文字が出ます。「今、画像をアップロードしてるところだよ」と言ってますね。

少し待つと画像がアップロードが完了して、![image](https://cloud.githubusercontent.com/assets/xxx/xxx.png) と、markdown記法での画像表示のマークアップに変わります。

これで GitHub Issues に画像を貼れました。

矢印や文字を入れた画像を GitHub Issues に貼る方法

先ほどのはキャプチャを貼るだけでしたが、場合によっては、キャプチャ内のこの部分を示したいときもあります。そういった場合は矢印や文字を入れたキャプチャを GitHub Issues に貼るとわかりやすくなります。

Skitch をインストール

まずは、Skitch というツールをインストール。

https://evernote.com/intl/jp/skitch/

Skitch を立ち上げて Evernote アカウントでログイン

Skitch を立ち上げると、Skitch は Evernote のサービスなので Evernote アカウントでログインを求められます。もし Evernote アカウントを持っていなかったら「Evernote 新規ユーザ」から登録をします。Evernote アカウントを持っていたら、「既にアカウントを持っている場合」からそのアカウントでログインをします。ちなみに、Evernote の無料会員で Skitch は使えるのでお金はかかりません（2016年7月9日現在）。