前提

• リモートリポジトリは github
• Fork はしないで、みんな origin で作業をしている場合。
• メインのブランチは master

基本

clone

リモートのリポジトリをローカルに持ってくる。

1

$ git clone git@github.com:XXX/XXXX {ディレクトリ名}

fetch

リモートのリポジトリの全てのブランチをローカルに持ってくる。

1

$ git fetch origin

branch

ローカルにブランチを作る。

1

$ git branch {ブランチ名}

ブランチ名を変更する。

1

git branch -m {新しいブランチ名}

checkout

作ったローカルブランチに移動し、そのブランチで作業する。

1

$ git checkout {ブランチ名}

status

作業をしたがまだコミットされていないファイルを確認。

1

$ git status

add

作業をしたがまだコミットされていないファイルを追加。

1

$ git add {ファイル名}

commit

手元で行った作業内容を保存。

1

$ git commit -m"{作業内容（コミットメッセージ）}"

push

作ったローカルブランチをリモートに送る。

1

$ git push origin {ブランチ名}

masterブランチに戻る

1

$ git checkout master

削除

リモートブランチ削除

1

git push origin :XXXX

ローカルブランチ削除

1

git branch -D product

rebase

ブランチで作業をしている間にその派生元のXXXブランチが更新されたので、XXXブランチの変更を今作業しているブランチに取り込む。

1

$ git pull --rebase origin XXX

コンフリクトが起きた場合

コンフリクトが起きたファイルを開いて、コンフリクトを解消した後、そのファイルを git add して、

1

$ git rebase --continue

今回のコンフリクトが起きた分の更新は取り込まない場合。

1

$ git rebase --skip

rebase を取り止める。

1

$ git rebase --abort

なかったことにする

commit

commit をなかったことにするが、編集内容は残す。

1

$ git reset --soft HEAD^

commit をなかったことにし、編集内容も削除。

1

$ git reset --hard HEAD^

ファイルの追加忘れ。ファイルを追加した後に、

1

$ git commit --amend

コミットメッセージ修正。

1

$ git commit --amend

add

すでに git 管理されていたファイルの場合。

1

$ git reset HEAD {ファイル名}

自分で新規に追加したファイルの場合。

1

$ git rm --cached {ファイル名}

pull

1

$ git reset HEAD^ --hard

rm

1

$ git checkout HEAD -- {ファイル名}

stash pop

1

$ git reset --hard

bootstrap v3

xs （0 〜 767px）

• .visible-xs-block
• .visible-xs-inline
• .visible-xs-inline-block
• .hidden-xs

sm （768px 〜 991px）

• .visible-sm-block
• .visible-sm-inline
• .visible-sm-inline-block
• .hidden-sm

md （992px 〜 1199px）

• .visible-md-block
• .visible-md-inline
• .visible-md-inline-block
• .hidden-md

lg （1200px 〜 ∞）

• .visible-lg-block
• .visible-lg-inline
• .visible-lg-inline-block
• .hidden-lg

print

• .visible-print-block
• .visible-print-inline
• .visible-print-inline-block
• .hidden-print

bootstrap v4

xs

• .hidden-xs-down（0 〜 543px）
• .hidden-xs-up（0 〜 ∞）

sm

• .hidden-sm-down（0 〜 767px）
• .hidden-sm-up（768px 〜 ∞）

md

• .hidden-md-down（0 〜 991px）
• .hidden-md-up（768px 〜 ∞）

lg

• .hidden-lg-down（0 〜 1199px）
• .hidden-lg-up（992px 〜 ∞）

xl

• .hidden-lg-down（0 〜 ∞）
• .hidden-lg-up（1200px 〜 ∞）

print

• .visible-print-block
• .visible-print-inline
• .visible-print-inline-block
• .hidden-print

bootstrap v3

xs - phone（480px 〜 767px）

1
2
3

$screen-xs: 480px
$screen-xs-min: 480px
$screen-xs-max: 767px

up（480px 〜）

1
2

@media (min-width: $screen-xs-min)
  ...

down（〜 767px）

1
2

@media (max-width: $screen-xs-max)
  ...

only（480px 〜 767px）

1
2

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max)
  ...

sm - tablet（768px 〜 991px）

1
2
3

$screen-sm: 768px
$screen-sm-min: 768px
$screen-sm-max: 991px

up（767px 〜）

1
2

@media (min-width: $screen-sm-min)
  ...

down（〜 991px）

1
2

@media (max-width: $screen-sm-max)
  ...

only（767px 〜 991px）

1
2

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
  ...

md - desktop（992px 〜 1199px）

1
2
3

$screen-md: 992px
$screen-md-min: 992px
$screen-md-max: 1199px

up（992px 〜）

1
2

@media (min-width: $screen-md-min)
  ...

down（〜 1199px）

1
2

@media (max-width: $screen-md-max)
  ...

only（992px 〜 1199px）

1
2

@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
  ...

lg - wide desktop（1200px 〜 ∞）

1
2

$screen-lg: 1200px
$screen-lg-min: 1200px

up（1200px 〜）

1
2

@media (min-width: $screen-lg-min)
  ...

down（〜 ∞）

1

//メディアクエリの指定無し

only（1200px 〜 ∞）

1
2

@media (min-width: $screen-lg-min)
  ...

bootstrap v4

xs - portrait phones（0 〜 543px）

up（0 〜）

1

//メディアクエリの指定無し

1
2

+media-breakpoint-up(xs)
  ...

down（0 〜 543px）

1
2

@media (max-width: 543px)
  ...

1
2

+media-breakpoint-down(xs)
  ...

only（0 〜 543px）

1
2

@media (max-width: 543px)
  ...

1
2

+media-breakpoint-only(xs)
  ...

sm - landscape phones（544px 〜 767px）

up（544px 〜）

1
2

@media (min-width: 544px)
  ...

1
2

+media-breakpoint-up(sm)
  ...

down（0 〜 767px）

1
2

@media (max-width: 767px)
  ...

1
2

+media-breakpoint-down(sm)
  ...

only（544px 〜 767px）

1
2

@media (min-width: 544px) and (max-width: 767px)
  ...

1
2

+media-breakpoint-only(sm)
  ...

md - tablets（768px 〜 991px）

up（768px 〜）

1
2

@media (min-width: 768px)
  ...

1
2

+media-breakpoint-up(md)
  ...

down（0 〜 991px）

1
2

@media (max-width: 991px)
  ...

1
2

+media-breakpoint-down(md)
  ...

only（768px 〜 991px）

1
2

@media (min-width: 768px) and (max-width: 991px)
  ...

1
2

+media-breakpoint-only(md)
  ...

lg - desktops（992px 〜 1199px）

up（992px 〜）

1
2

@media (min-width: 992px)
  ...

1
2

+media-breakpoint-up(lg)
  ...

down（0 〜 1199px）

1
2

@media (max-width: 1199px)
  ...

1
2

+media-breakpoint-up(lg)
  ...

only（992px 〜 1199px）

1
2

@media (min-width: 992px) and (max-width: 1199px)
  ...

1
2

+media-breakpoint-only(lg)
  ...

xl - large desktops（1200px 〜 ∞）

up（1200px 〜）

1
2

@media (min-width: 1200px)
  ...

1
2

+media-breakpoint-up(xl)
  ...

down（0 〜 ∞）

1

//メディアクエリの指定無し

1
2

+media-breakpoint-down(xl)
  ...

only（1200px 〜 ∞）

1
2

@media (min-width: 1200px)
  ...

1
2

+media-breakpoint-only(xl)
  ...

between

between md and lg（768px 〜 1199px）

1
2

+media-breakpoint-between(md, lg)
  ...

bootstrap v3

xs - phone（480px 〜 767px）

1
2
3

$screen-xs: 480px
$screen-xs-min: 480px
$screen-xs-max: 767px

up（480px 〜）

1

@media (min-width: $screen-xs-min) { ... }

down（〜 767px）

1

@media (max-width: $screen-xs-max) { ... }

only（480px 〜 767px）

1

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { ... }

sm - tablet（768px 〜 991px）

1
2
3

$screen-sm: 768px
$screen-sm-min: 768px
$screen-sm-max: 991px

up（767px 〜）

1

@media (min-width: $screen-sm-min) { ... }

down（〜 991px）

1

@media (max-width: $screen-sm-max) { ... }

only（767px 〜 991px）

1

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }

md - desktop（992px 〜 1199px）

1
2
3

$screen-md: 992px
$screen-md-min: 992px
$screen-md-max: 1199px

up（992px 〜）

1

@media (min-width: $screen-md-min) { ... }

down（〜 1199px）

1

@media (max-width: $screen-md-max) { ... }

only（992px 〜 1199px）

1

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }

lg - wide desktop（1200px 〜 ∞）

1
2

$screen-lg: 1200px
$screen-lg-min: 1200px

up（1200px 〜）

1

@media (min-width: $screen-lg-min) { ... }

down（〜 ∞）

1

//メディアクエリの指定無し

only（1200px 〜 ∞）

1

@media (min-width: $screen-lg-min) { ... }

bootstrap v4

xs - portrait phones（0 〜 543px）

up（0 〜）

1

//メディアクエリの指定無し

1

@include media-breakpoint-up(xs) { ... }

down（0 〜 543px）

1

@media (max-width: 543px) { ... }

1

@include media-breakpoint-down(xs) { ... }

only（0 〜 543px）

1

@media (max-width: 543px) { ... }

1

@include media-breakpoint-only(xs) { ... }

sm - landscape phones（544px 〜 767px）

up（544px 〜）

1

@media (min-width: 544px) { ... }

1

@include media-breakpoint-up(sm) { ... }

down（0 〜 767px）

1

@media (max-width: 767px) { ... }

1

@include media-breakpoint-down(sm) { ... }

only（544px 〜 767px）

1

@media (min-width: 544px) and (max-width: 767px) { ... }

1

@include media-breakpoint-only(sm) { ... }

md - tablets（768px 〜 991px）

up（768px 〜）

1

@media (min-width: 768px) { ... }

1

@include media-breakpoint-up(md) { ... }

down（0 〜 991px）

1

@media (max-width: 991px) { ... }

1

@include media-breakpoint-down(md) { ... }

only（768px 〜 991px）

1

@media (min-width: 768px) and (max-width: 991px) { ... }

1

@include media-breakpoint-only(md) { ... }

lg - desktops（992px 〜 1199px）

up（992px 〜）

1

@media (min-width: 992px) { ... }

1

@include media-breakpoint-up(lg) { ... }

down（0 〜 1199px）

1

@media (max-width: 1199px) { ... }

1

@include media-breakpoint-up(lg) { ... }

only（992px 〜 1199px）

1

@media (min-width: 992px) and (max-width: 1199px) { ... }

1

@include media-breakpoint-only(lg) { ... }

xl - large desktops（1200px 〜 ∞）

up（1200px 〜）

1

@media (min-width: 1200px) { ... }

1

@include media-breakpoint-up(xl) { ... }

down（0 〜 ∞）

1

//メディアクエリの指定無し

1

@include media-breakpoint-down(xl) { ... }

only（1200px 〜 ∞）

1

@media (min-width: 1200px) { ... }

1

@include media-breakpoint-only(xl) { ... }

between

between md and lg（768px 〜 1199px）

1

@include media-breakpoint-between(md, lg) { ... }

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

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>

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

posted with amazlet at 16.07.15

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

Amazon.co.jpで詳細を見る

普段、仕事では 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日現在）。

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

Skitch でキャプチャを撮る

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

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

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

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

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

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

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

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

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

動画を GitHub Issues に貼る方法

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

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

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

https://gyazo.com/ja

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

特殊まんが-前衛の-道

posted with amazlet at 16.07.15

根本 敬
東京キララ社
売り上げランキング: 507,282

Amazon.co.jpで詳細を見る

普段、僕はsass記法を使っています。「sass記法 vs. scss記法」の話は「Vim vs. Emacs」みたいなややこしいことになりそうなので、ここであまり多くを書かないですが、僕はsass記法派というより、なんでscss記法があるのかわからない派、ってくらい圧倒的sass記法派。だって、sass記法の方が短く書けるし、見やすいし、誰が書いてもスペースやインデントは同じになるし….。デメリットは、ネット上にあるSassのtipsなんかの例のほとんどがscss記法で書かれてるので、それを毎回脳内でsass記法に変換しなくてはいけない、という手間があるくらい？

さてさて、「sass記法 vs. scss記法」の話はどうでもいいんだけど、普段sass記法を使ってるので、.scss を .sass に変換したくなるときがたまにあります。例えば、scss記法で書かれたCSSフレームワークのコードを読むときに、sass記法の方が慣れてるから読みやすいので変換したりなど。

Sassが使える環境でコマンドラインを使って、

1

$ sass-convert {変換したいファイル "例:test.scss"} {変換して生成するファイル名 "例:test.sass"}

とやれば、.scss を .sass に変換することができるんだけど、ブラウザで見てるGithub上のコードなんかをいちいちローカルに持ってきて変換するのは面倒。

ブラウザからそれを出来るWebサービスはないかなぁ、と探していたところ、ブラウザ上でSassをCSSに変換できるサービス、SassMeisterで出来ました。SassMeister を使って .scss を .sass に変換するってのはイレギュラーな使い方なのですが、便利なのでその手順を紹介。

手順 1

Options > Syntax > SCSS を選択。

手順 2

左側に変換したい .scss のコードをコピペ。

手順 3

Options > Syntax > SASS に変更する。

変換完了！

sass記法に変換されました。