よく 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... に書き換えます。

書き換え前

1
2
3
4
5
6
7
8
9
10
11

@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;
}

書き換え後

1
2
3
4
5
6
7
8
9
10
11

@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

1

@import "icomoon" ;

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

application.css

1
2
3
4
5

/*
 *= 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で詳細を見る

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

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

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

high_voltage のインストール

まずは Rails アプリの Gemfile に、

1

gem 'high_voltage'

を追加して、

1

$ 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 を立ちあげて、

1

$ 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 というファイルを作成して、そこに

1
2
3

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で詳細を見る

ローカルで立ち上げてる、開発中の 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で詳細を見る