わすれたあかんえ

Railsのviewにデザインを組み込む人のつぶやき。

インタビュー記事作成のおぼえがき

弊社

最近仕事でインタビューの書き起こしと写真撮影をやるようになりまして。 そのドキュメントをチームのDocBaseに公開したのですが、これ外にも出せるのでは？と思ったので公開した次第です。 「こうしたほうがいいよ」というのもあれば教えてください。

ちなみに私はライティングも写真も素人ですのでお手柔らかに……

本文

書き起こし

  • 「あー」とか「えっと」などの意味のないものは取り除く（バリ取り）
  • 話し言葉をそのまま書くと読みづらいので、文章を整形する（整文）
    • 主語と述語をなるべく近づける
    • 一文が長い場合は分割する
    • 文章はある程度ちゃんとした人が話している雰囲気に書き換える。ただし固くならない程度に話し言葉のラフさは残す
    • 草禁止。どうしても使いたい場合は(笑)にする

整文の細かいところ

  • 〜してる→〜している
  • なので→ですので
  • 〜ですけど→〜ですが
    • 数社に修正されたのでダメらしい

写真

これはかなり私の好みに偏ってる

撮影

  • 開放値はなるべく大きく
  • ピクチャーコントロールはポートレート
  • インタビュー中は立て膝で撮る（同じ目線で話しているように感じられる）
    • 立って撮ると見下ろす感じになる
  • 会社のロゴを背景に撮るときは、なるべく被写体の真正面に立つ
    • 怠ると水平補正するときにどこかが歪む
  • 最初から撮りたいだけ撮っていたほうが後半カメラに慣れてくれる（気がする）

加工

PhotohopのCamera Rawフィルターで、他の写真と見比べつつ調整

  • 露出：上げる↑
  • コントラスト：ちょっと下げる↓
  • ハイライト：ガッと下げる↓
  • シャドウ・黒レベル：上げる↑

その他

  • アスペクト比は3:2
  • 背景に棚や壁に貼り付けたパネルなどがある場合、だいたい斜めになっているので角度補正する
    • Photohopの切り抜きツール→角度補正

おわりに

まだまだいろいろありそうな気がする。 「インタビュー中の写真は立て膝で撮る」はだいぶ見栄えが違ってきますので試してみてください。

SVGのオブジェクトごとにCSSで色を切り替える

SVG

f:id:asachun1209:20160324180832p:plain

デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して……

やってらんないっすよ！

せめて、形が同じなら使いまわしたい……

そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！

「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。

f:id:asachun1209:20160220154000p:plain:w250

このSVGアイコンを使いまわして、

f:id:asachun1209:20160323203804p:plain

こんなかんじでカラフルなアイコンを量産しますよー！

ベクターでアイコンを作成

アイコン作るのがめんどくさい人はicomoonから適当なアイコンを見つくろってDLしましょう。 プロジェクトを新規作成し、フッタの「Selection」からお好みのアイコンをクリックし、「Generate SVG & More」からDLします。

今回はicomoonからDLした場合の手順を説明します。

DLしたアイコンを調整する

今回はこちらの吹き出しがふたつ重なったアイコンを使用します。

f:id:asachun1209:20160220154000p:plain:w250

まずicomoonからDLした状態のままだと、オブジェクトごとに分かれていない場合があるのでその場合はIllustratorで編集します。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="32" viewBox="0 0 34 32">
<path d="M25.132 13.165c0-5.165-5.627-9.352-12.566-9.352s-12.566 4.187-12.566 9.352c0 3.104 2.032 5.854 5.16 7.555-0.009 0.027-2.492 4.545-2.492 4.545s7.582-2.892 7.603-2.904c0.744 0.103 1.511 0.155 2.295 0.155 6.939 0 12.566-4.187 12.566-9.351zM34.385 16.087c0-5.164-5.297-9.314-11.031-9.351 8.22 8.188-1.461 16.912-9.351 16.912 0 0 0.877 1.79 7.816 1.79 0.783 0 1.551-0.054 2.295-0.156 0.021 0.014 7.604 2.904 7.604 2.904s-2.484-4.517-2.492-4.544c3.127-1.701 5.159-4.452 5.159-7.555z"></path>
</svg>

path要素が実際のオブジェクトを表すのですが、こちらはふたつの吹き出しがひとつのオブジェクトになっているので、ふたつのオブジェクトに分けます（もともと分かれていたり、自分で作成する場合は「SVGファイルをエディタで編集」のステップまで飛ばしていただいてOKです）。

ちなみにオブジェクトはpath要素だけでなく、rect要素やcircle要素などさまざまなものがあるので、わからないときはW3Cのドキュメントを見て調べてみてください。

Illustratorで編集

オブジェクトを選択し、「オブジェクト」→「複合パス」→「解除」を選択します。

f:id:asachun1209:20160220152959p:plain

ちなみにオブジェクトが複合パスかどうかはレイヤーパネルを開き、左の▼アイコンをクリックするとわかります。

f:id:asachun1209:20160220153326p:plain

ちなみに複合パスを解除した後はこんなかんじになります。ふたつのオブジェクトに分かれていますね！

f:id:asachun1209:20160220153420p:plain

SVGで保存

「別名で保存」から「ファイル形式：SVG」を選択して保存します。 SVG保存設定はこんなかんじです。f:id:asachun1209:20160220153634p:plain:w500

SVGファイルをエディタで編集

保存したSVGをお好きなエディタで開きます。私はSublime Textを使っています。

Illustratorで保存したままの状態だと余計なコードがついてるので削除します。

保存したままの状態↓

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="34px" height="32px" viewBox="0 0 34 32" enable-background="new 0 0 34 32" xml:space="preserve">
<path d="M25.1,13.2c0-5.2-5.6-9.4-12.6-9.4S0,8,0,13.2c0,3.1,2,5.9,5.2,7.6c0,0-2.5,4.5-2.5,4.5s7.6-2.9,7.6-2.9
  c0.7,0.1,1.5,0.2,2.3,0.2C19.5,22.5,25.1,18.3,25.1,13.2z"/>
<path d="M34.4,16.1c0-5.2-5.3-9.3-11-9.4c8.2,8.2-1.5,16.9-9.4,16.9c0,0,0.9,1.8,7.8,1.8c0.8,0,1.6-0.1,2.3-0.2c0,0,7.6,2.9,7.6,2.9
  s-2.5-4.5-2.5-4.5C32.4,21.9,34.4,19.2,34.4,16.1z"/>
</svg>

余計なコードを削除した状態↓

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="32px" viewBox="0 0 34 32">
<path d="M25.1,13.2c0-5.2-5.6-9.4-12.6-9.4S0,8,0,13.2c0,3.1,2,5.9,5.2,7.6c0,0-2.5,4.5-2.5,4.5s7.6-2.9,7.6-2.9
  c0.7,0.1,1.5,0.2,2.3,0.2C19.5,22.5,25.1,18.3,25.1,13.2z"/>
<path d="M34.4,16.1c0-5.2-5.3-9.3-11-9.4c8.2,8.2-1.5,16.9-9.4,16.9c0,0,0.9,1.8,7.8,1.8c0.8,0,1.6-0.1,2.3-0.2c0,0,7.6,2.9,7.6,2.9
  s-2.5-4.5-2.5-4.5C32.4,21.9,34.4,19.2,34.4,16.1z"/>
</svg>

すっきりしましたね。

注意点

ちなみに、このときpath要素などのオブジェクトにfill属性がついていると、CSSで色を変えられなくなってしまうので注意してください！色が変わらないことが決まっている場合は大丈夫ですが、今回は色を変えたいので消してしまいましょう。

オブジェクトをg要素で囲む

g要素とはオブジェクトをグループ化するための要素です。g要素でオブジェクトを囲んでクラスをつけることで、CSSからg要素を操作できるようになります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="32px" viewBox="0 0 34 32">
  <symbol id="IconComments">
    <g id="#IconComments-back">
      <path d="M25.1,13.2c0-5.2-5.6-9.4-12.6-9.4S0,8,0,13.2c0,3.1,2,5.9,5.2,7.6c0,0-2.5,4.5-2.5,4.5s7.6-2.9,7.6-2.9
        c0.7,0.1,1.5,0.2,2.3,0.2C19.5,22.5,25.1,18.3,25.1,13.2z"/>
    </g>
    <g id="IconComments-front">
      <path d="M34.4,16.1c0-5.2-5.3-9.3-11-9.4c8.2,8.2-1.5,16.9-9.4,16.9c0,0,0.9,1.8,7.8,1.8c0.8,0,1.6-0.1,2.3-0.2c0,0,7.6,2.9,7.6,2.9
        s-2.5-4.5-2.5-4.5C32.4,21.9,34.4,19.2,34.4,16.1z"/>
    </g>
  </symbol>
</svg>

まず、path要素をg要素で囲みます。↑のコードではそのg要素2つをさらにsymbol要素で囲んでいます(symbol要素で囲むのは、参照するための要素として定義するためです)。今回このSVGコードは別の場所から参照します。

これでSVGファイルの準備が整いました！次から実際にCSSでオブジェクトごとに色を切り替えます。

インラインSVGで記述

SVGはimg要素やobject要素で読み込むことができますが、今回解説する方法はインラインSVGで記述する必要があります。 なのでhtmlに直接SVGコードを書きます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'>
    <title>SVGテスト</title>
    <link href="/stylesheets/application.css" rel="stylesheet" />
  </head>
  <body>
    <!-- htmlに直接svgを書く -->
    <svg class='SvgIcon' viewbox='0 0 205.2 145.4' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'>
      <symbol id='IconComments'>
        <title>comments</title>
        <g id='IconComments-back'>
          <path d='M150,55.8C150,25,116.4,0,75,0C33.6,0,0,25,0,55.8c0,18.5,12.1,34.9,30.8,45.1c-0.1,0.2-14.9,27.1-14.9,27.1&#x000A; s45.2-17.3,45.4-17.3c4.4,0.6,9,0.9,13.7,0.9C116.4,111.6,150,86.6,150,55.8L150,55.8z'></path>
        </g>
        <g id='IconComments-front'>
          <path d='M205.2,73.2c0-30.8-31.6-55.6-65.8-55.8c49.1,48.9-8.7,100.9-55.8,100.9c0,0,5.2,10.7,46.6,10.7c4.7,0,9.3-0.3,13.7-0.9&#x000A;  c0.1,0.1,45.4,17.3,45.4,17.3s-14.8-27-14.9-27.1C193.1,108.2,205.2,91.8,205.2,73.2L205.2,73.2z'></path>
        </g>
      </symbol>
    </svg>
  </body>
</html>

.SvgIcon {
  position: absolute;
  width: 0;
  height: 0; 
}

上記のSVGは直接描画したくないので、CSSで非表示にしておきます。ちなみに非表示にするのにdisplay: none;を使用するとグラデーションなどは打ち消されてしまうため、それ以外の方法で非表示にしたほうがベターです。

そして定義したSVGを使い回すため、新たなsvg要素の中にuse要素を追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'>
    <title>SVGテスト</title>
    <link href="/stylesheets/application.css" rel="stylesheet" />
  </head>
  <body class='index'>
    <svg class='SvgIcon' viewbox='0 0 205.2 145.4' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'>
      <symbol id='IconComments'>
        <title>comments</title>
        <g id='IconComments-back'>
          <path d='M150,55.8C150,25,116.4,0,75,0C33.6,0,0,25,0,55.8c0,18.5,12.1,34.9,30.8,45.1c-0.1,0.2-14.9,27.1-14.9,27.1&#x000A; s45.2-17.3,45.4-17.3c4.4,0.6,9,0.9,13.7,0.9C116.4,111.6,150,86.6,150,55.8L150,55.8z'></path>
        </g>
        <g id='IconComments-front'>
          <path d='M205.2,73.2c0-30.8-31.6-55.6-65.8-55.8c49.1,48.9-8.7,100.9-55.8,100.9c0,0,5.2,10.7,46.6,10.7c4.7,0,9.3-0.3,13.7-0.9&#x000A;  c0.1,0.1,45.4,17.3,45.4,17.3s-14.8-27-14.9-27.1C193.1,108.2,205.2,91.8,205.2,73.2L205.2,73.2z'></path>
        </g>
      </symbol>
    </svg>

    <!-- svg要素の中にuse要素 -->
    <svg class='Svg01'>
      <!-- use要素のxlink属性で先ほど定義したg要素を参照。use要素にクラスを指定しておきます -->
      <use class='Svg01-front' xlink:href='#IconComments-front'></use>
      <use class='Svg01-back' xlink:href='#IconComments-back'></use>
    </svg>
  </body>
</html>

f:id:asachun1209:20160323211959p:plain:w250

ブラウザで開くとこんなかんじで表示されていると思いますー。 ここから楽しい楽しいスタイリングですよ👐

CSSでスタイリング

use要素にクラスをつけたので、普通にクラスを指定してCSSを装飾していきます。 SVGの場合はfill属性に色を指定します。

.Svg01-front {
  fill: #42AFE3; 
}
.Svg01-back {
  fill: #97CD76; 
}

f:id:asachun1209:20160323212506p:plain:w250

じゃーん！ カラフルになりましたね。

同じように量産していけば……

<svg class='Svg01'>
  <use class='Svg01-front' xlink:href='#IconComments-front'></use>
  <use class='Svg01-back' xlink:href='#IconComments-back'></use>
</svg>
<svg class='Svg02'>
  <use class='Svg02-front' xlink:href='#IconComments-front'></use>
  <use class='Svg02-back' xlink:href='#IconComments-back'></use>
</svg>
<svg class='Svg03'>
  <use class='Svg03-front' xlink:href='#IconComments-front'></use>
  <use class='Svg03-back' xlink:href='#IconComments-back'></use>
</svg>

.Svg01-front {
  fill: #42AFE3; 
}
.Svg01-back {
  fill: #97CD76; 
}

.Svg02-front {
  fill: #97CD76; 
}
.Svg02-back {
  fill: #FCE473; 
}

.Svg03-front {
  fill: #ED6C63; 
}
.Svg03-back {
  fill: #42AFE3; 
}

f:id:asachun1209:20160323203804p:plain

じゃじゃじゃーん！ いろんなカラーバリエーションのアイコンができました。

しかもSVGなので、Retineディスプレイでも綺麗です！@2xや@3xで書き出す必要もありませんやったね！

たとえば、デザインテーマごとにアイコンの形は一緒だけど色だけ変わる、みたいなときに大変便利です。 試してみてください〜

El Capitan以降のヒラギノ角ゴシック指定のCSS

更新してなさすぎわろた。

最近フロントエンドかけこみ寺というコミュニティに参加することになりまして、そのSlackチームに自分専用チャンネルを作って気になったことや困ったことを呟く分報をやっているのですが、そちらに書いた呟きが増えてきたのでちょこちょこブログにメモっていこうと思います。

唐突に始まるので前提をちょっと書きます。 El Capitanで使えるフォントの種類が増え、ヒラギノ角ゴシックは９種類にウェイトが増えました。 最近デザイナーさんからいただいたデザインにさっそくヒラギノ角ゴシック W4が指定されていたのでcssのfont-familyに反映させようと思ったのですが、そのとき意外とハマったのでフロント寺のSlackに呟いたものが以下です。

デザインでヒラギノ角ゴシックw4が指定されてたからcssのfont-familyでどう指定するのか「ヒラギノ w4 css」でぐぐってたけど意外と苦戦してしまった…

「ヒラギノ El Capitan css」であっさり出てきた。そうだねEl Capitanだね

El Capitanからは「Hiragino Kaku Gothic ProN」ではなく「Hiragino Sans」で指定するそうで。weightはfont-weightで指定するっぽい。 http://qiita.com/puzzel/items/1e3e9da37e83cc913343

font-family: 'Hiragino Sans'
font-weight: 400

しかしfont-familyでウェイト指定したいときはどうするんだこれ

このあとも少し探したんですがfont-familyで指定する方法が見つからなかった…… どなたか知っていたら教えてください。

font-family:HiraginoSans-W4 でできるそうです！というか↑のQiitaの記事に書いてありましたね。失礼しました。

Ligature Symbolsが崩れてしまうときの対処法

Ligature Symbolsとは

Ligature Symbolsとは、webフォントとして使えるアイコンフォントです。 http://kudakurage.com/ligature_symbols/

Ligature Symbolsは、リガチャ（合字）という複数の文字列を組み合わせ、１つの文字としてブラウザで表示されるシステムを使っています。 Wikipadia - 合字

下記のように.lsfというクラスをつければ、中の文字列がアイコンに変換されます。

<span class="lsf">gear</span>

↑こんなかんじ

が、なぜか崩れてしまう……

ここからが本題です。 普通に

<span class="lsf">gear</span>

と書いているだけなのに、アイコンになってくれないのです。

f:id:asachun1209:20150303190242p:plain

↑こうなってほしいのに

f:id:asachun1209:20150303190250p:plain

↑こうなってしまう……（「right」という文字列がアルファベットのまま残っています）

原因がよくわからず、とりあえずspan要素の幅が「gear」の文字が入るぶんあれば崩れないことがわかったので、文字列を囲む要素に大きめのwidthをつけて対応していたのですが、widthを広げたぶん不自然な隙間が空いてしまうのでレイアウト的にすごくやりづらい。。。 短い文字列ならいいのですが、「alignadjust」とかけっこうきつい。

そして「なんでダメなのかなー」と思いつつインスペクタをいじっていたら、ふっと気づきました。

.lsf をつける要素に word-wrap: break-word が指定されていると崩れる

word-wrapというプロパティは「box内の文字列がboxからはみ出したときの扱いをどうするか」を指定するプロパティなのですが、word-wrap: break-wordは「boxからはみ出した文字列は単語単位で改行する」という指定です。

デフォルトのword-wrap: normalではURLなどの文字列がboxからはみ出してしまうので、このときはbodyにword-wrap: break-wordを指定していました。 どうもそのせいで、要素からはみ出た文字は改行されてしまってアイコンにならないといったことが起きているようでした。 改行されたらそらダメだわな。。。

対処法

Ligature Symbolsのフォント設定をしている.lsf、.lsf-icon:beforeに

word-wrap: normal;

を指定したら、widthを調整しなくても崩れずにアイコンになってくれるようになりました。 そもそもword-wrap: break-wordをbodyではなく個々の要素に指定すればいいのですが、個々となると指定する箇所が多かったのでアイコンのクラス側にword-wrap: normalを指定する形で対応しました。疲れた…

Railsのviewの中でCSSクラスを複数出し分けたい

Rails だと、ひとつのテンプレートファイルを複数の controller で使いまわすことがよくあります。

その場合にテンプレートの中で、CSS のクラスを呼び出すページによって出し分けしたいときがよくありますが、だいたいこういうふうにやってますよね。

// 現在表示しているページが /hoge/foo/ だったら .bar をつける
%div{ class: current_page?(controller: 'hoge', action: 'foo') ? 'bar' : nil }

このときに、条件分岐したい要素にすでにこんなクラスがついてたりします。

%div{ class: "bar #{@nya.name}" }

こうなったときに上記のcurrent_page?をこの中に一緒に書く方法がわからず、何度か諦めてたのですが、先日ふと以下のように書いてみたらできました。

%div{ class: "bar #{@nya.name} #{current_page?(controller: 'hoge', action: 'foo') ? 'bar' : nil}" }

普通に#{}で囲めばいいだけでした。

今思えばなんで気付かなかった、と思うんですがあやふやな知識で"#{}"を使っていたからですねc⌒っ.ω.)っ
（そして"#{}"をなんと呼ぶのかわからない……）

知ってる人には当たり前かもしれませんが、ググろうにもググるワードがわからず諦めてきたのでメモ。

はてなブログはじめました

以前 Wordpress でブログを書いていたのですが、（ほとんど書いてなかったけど。。）メンテするのがめんどくさくなってきたのではてなブログに移行しました。

主に Rails のフロントエンドに関していろいろ書くと思います。 よろしくお願いします。