machida

マチダのブログ

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

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

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

icomoon で font を生成

icomoonでfontを生成 image md

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

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

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

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

ダウンロードしたファイルを解凍すると、中身がこんな感じ

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

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

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

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

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

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

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

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

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

icomoon.css@font-facesrc のパス 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]
さむくないかい [DVD]
posted with amazlet at 16.07.25
アップリンク (2010-03-05)
売り上げランキング: 135,386

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

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

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.hamlabout.html.slim など)を作ります。

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

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

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

about.html.erb

作成したページの確認

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.hamlpost.html.slim など)、 read.html.erb(もしくは、read.html.hamlread.html.slim など)を入れます。

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

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

映像夜間中学講義録 イエスタディ・ネヴァー・ノウズ(DVD付)
根本敬
K&Bパブリッシャーズ
売り上げランキング: 303,534

プライベート 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: のブロックにその数字があります(機種によって異なります)。

IPを調べる

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 のシステム環境設定から調べる方法があります。

システム環境設定

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

システム環境設定 image md

ネットワーク

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

ネットワーク IP

電波系
電波系
posted with amazlet at 16.07.15
根本 敬 村崎 百郎
太田出版
売り上げランキング: 132,434

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

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

書きかた

erb

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

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

haml、slim

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

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

出力されるHTML

1
<a href="/users/edit#notifications" class="edit-notification__link">通知設定変更</a>
人生解毒波止場 (幻冬舎文庫)
幻冬舎 (2014-12-26)
売り上げランキング: 16,664

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

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

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

なので毎回、

  • 該当箇所の画像(必要であれば、画像の中の該当箇所に矢印などのマークを入れる)
  • それが起きているページのURL
  • 必要であれば文章も(例えば、ログインしていて投稿が0の場合、などそれが起こる条件など)

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

ダメな報告の例

ダメな報告の例

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

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

いい報告の例

いい報告の例

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

GitHub Issues に画像を貼る方法(Mac のみ)

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

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

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

GitHub Issues に画像を貼る方法(Mac のみ) image md

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

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

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

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

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

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

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

GitHub Issues にキャプチャを貼り付け完了 image md

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

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

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

Skitch をインストール

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

Skitch というツールをインストール image md

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

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

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

Skitch を立ち上げて image md

ログインをすると、Skitch がこのような画面になります。

Skitch ログイン完了 image md

Skitch でキャプチャを撮る

ログイン後、Skitch の画面の上部にある「画面キャプチャ」ボタンをクリック。

Skitch 画面キャプチャ image md

すると、画面にオーバーレイがかかって、カーソルが「+」になります。

Skitch 画面キャプチャを撮る image md

先ほどの command + shif + 4 ときと同じように画像として貼りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲い、ボタンを離します。

すると、選択した部分のキャプチャが Skitch の画面に表示されます。

Skitch 画面キャプチャを撮った image md

Skitch の画面の左にあるツールを使ってキャプチャに矢印や文字を書き込みます。

Skitch 画面キャプチャに書き込みをした  image md

書き込みが完了したらいよいよ Github Issues に貼り付けます。まずは、Skitch の画面の下にある「PNG」と書いてあるファイルの絵のアイコンの上でマウス、トラックパッドのボタンを押します。すると、Skitch の画面の枠がなくなり、キャプチャの部分が小さくなります。

Skitch pngアイコンをクリック image md

マウスやトラックボードのボタンを押した状態をキープしたままキャプチャ画像を GitHub Issues のテキストエリアまで持ってきて、ボタンから指を離すと、画像のアップロードが始まります。

GitHub Issues の textare で離す image md

Skitch からアップロードをすると、markdown ではなく、HTML タグが書き出されますが、問題なく画像が貼り付けられます。

png でアップロードされた image md

これで、矢印や文字を入れた画像を GitHub Issues に貼れるようになりました。

動画を GitHub Issues に貼る方法

サイト内の動く部分を人に伝えるときは動画を使うと便利。
例えば、JavaScriptを使って動くところの動きの不具合や、クリックなどアクションをした後に起きる不具合などは、それを再現させる動作を動画で伝えたほうがわかりやすいです。

キャプチャ動画を撮るツールのインストール

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

https://gyazo.com/ja

「今すぐGyazoをはじめる」をクリック。

「今すぐGyazoをはじめる」をクリック。 image md

「簡易版」の「ダウンロード」をクリック。

「簡易版」の「ダウンロード」をクリック。 image md

すると、ファイルがダウンロードが始まり、「Gyazo」と「Gyazo GIF」という2つのアプリのインストール方法が表示されます。そのインストール方法に従って、「Gyazo」と「Gyazo GIF」をインストールします。

Gyazo と Gyazo GIF をインストールします。

これで、キャプチャ動画を撮る準備ができました。

キャプチャ動画を撮ってみる

先ほどインストールした「Gyazo」と「Gyazo GIF」のうちの「Gyazo GIF」のほうを立ちあげます。すると、画面にオーバーレイがかかって、カーソルが「+」になります。

キャプチャ動画を撮りたい箇所でマウスやトラックボードのボタンを押し、押した状態をキープしたままカーソルを引っ張って囲い、ボタンを離します。

キャプチャ動画を撮りたい箇所 image md

ボタンを話すと録画が始まりますので、画面を操作して動かします。ちゃんとマウスのカーソルも録画されます。最長7秒間録画することができます。録画が始まると3つのボタンと横棒が表示されるので、それらの操作方法も載せておきます。

Gyazo GIFの操作方法 image md

録画が完了して、キャプチャ動画が Gyazo のサーバにアップロードされると、

Gyazo GIF アップロード完了 image md

こういうページがブラウザで表示されます。ちゃんと動画が撮れました。

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

このページのキャプチャ動画の上で右クリックをし、「名前を付けて画像を保存」を選択します(ブラウザはChrome)。一旦画像をMacに保存します。

右クリック image md

保存をしたら、GitHub Issues のテキストエリアにドラッグ&ドロップ(画像ファイルの上でマウスやトラックボードのボタンを押し、押した状態をキープしたまま GitHub Issues のテキストエリアの上に持って行って指を離す)。

GitHub Issues のテキストエリアにドラッグ&ドロップ image md

画像のアップロードが始まって、しばらく待つとアップロードが完了します。動画はGIFアニメなので、拡張子が .gif ならOK。

Upload中 image md

アップロードが完了したら GitHub Issues のテキストエリアの上にある、「Write」、「Preview」のタブの「Preview」をクリックしてプレビューを見てみます。

タブを切り替え image md

動画によっては表示されるのに時間がかかるときがありますが、少し待ってちゃんと動画が貼り付けられてるのが確認できたら動画貼り付け完了。

プレビューの確認 image md

特殊まんが-前衛の-道
特殊まんが-前衛の-道
posted with amazlet at 16.07.15
根本 敬
東京キララ社
売り上げランキング: 507,282