カテゴリー: デザイン

デザイナーでもgrepコマンドをサクッと使いたい!

 

こんにちは、Vimmerもある程度板についてきたLQヒロシです。

 

コーディング業務で「CSSのクラスがどのファイルでどこに使われているのかざっと知りたい」ってことありますよね。

統合開発ツールなどを使っているとツールそれぞれで検索方法があると思いますが、Vimmerである以上ターミナルで行う必要があります。そこで活躍するのが「grep」コマンド!

 

今回はターミナルで利用するUNIXLINUX)検索コマンド「grep」のご紹介になります。
なお対象がデザイナーなのでMacユーザー(ターミナル)を前提にしております。

 

grepってなんかややこしいイメージ

 

grep 使い方」などでググると結構なリファレンスが出てくるのですが、やたらオプションは多いし説明が分かりにくい!さらにfgrepだのegrepだのがあってLQLow Quallity)な私は敬遠しがちでしたが、エンジニアさんに聞いてみるとよく使うやり方は決まっているようでしたので、デザイナーに最適なgrepの使い方をまとめてみました!

 

結論、「fgrep -rn ‘検索文字列’ ファイルのパス」を使っておけば問題無い!

 

いきなりfgrepが出てきて恐縮ですが、その説明は後でさせてもらうとして、まずは簡単に使い方の説明から。

 

 

grepもfgrepも検索方法が若干異なるだけで基本的な使い方は同じになります。
はじめにコマンド、次にハイフンを付けてオプション。検索したい文字列と検索対象となるファイルパスを入力します。オプションをつけることで検索方法や検索結果の表示方法を細かく指定することができます。

 

[よく利用するオプション(grep、fgrep共通)]

r

再帰的に検索する
要するにサブディレクトリまで全て検索範囲にできるということ

n

検索結果に行番号を出力する
検索結果は、ファイル名だけでなく対象文字列が使われている箇所も抽出されるので、行番号を表示するとより分かりやすくなります

 

例えば以下のようなディレクトリ構成でCSSのクラス名を検索する場合、

 

$fgrep -rn ‘hoge’ home/assets/css/

 

と入力すれば、サブディレクトリがあっても全てのCSSファイル内のhogeクラスを検索できるというわけです。CSSルートにアクセスして以下のようにしてもOKです。

 

$fgrep -rn ‘hoge’ ./

 

例えばプロジェクトルートからだとこのようにすることもできますね。

 

$fgrep -rn ‘.hoge’ ./

 

※「.hoge」とするとCSSクラスである可能性が高いので、プロジェクトルートからでもCSSのみを抜き出しやすくなります。(jsは引っ掛かってきますが。。)

 

 

なぜgrep ではなく fgrepを使うのか

 

grepは正規表現が利用できるので、「.hoge」と「hoge」では結果が異なる場合があるため。

 

正規表現では「.」をワイルドカードと認識します。grepの場合「.hoge」は正規表現を使っていることになり、ahogebhogeという文字列が存在していると一緒に検索されてしまうのでエスケープ処理を行う必要がでてきます。

 

$grep -rn ‘¥.hoge’ ファイル名

 

その点、fgrepは正規表現が利用できないので、エスケープ処理を省くことができます。さらにfgrepの方が抽出速度が早いというメリットもあります。

 

正規表現で検索したい場合はgrepが良いですが、単純な文字列であればfgrepが良さそうですね。(ちなみにgrepで「-F」オプションを使うとfgrepとほぼ同様の機能になります。)

 

 

文字列を「’」シングルクォートで囲むのを忘れずに

 

半角スペースや「*」「?」などはシェル(ターミナル)にとって特別な意味をもつ文字列になります。これらの文字列が含まれる場合に展開されないようにシングルクォート(ダブルクォート)で囲む必要があります。

 

例えば以下の例だと検索結果が変わってきます。

$fgrep foo bar assets/css/   //foobarから検索
$fgrep ‘foo bar’ assets/css/  //foo barを検索


これはシェルにとってスペースは引数の区切り文字として展開されるためです。文字列に半角スペースや記号文字が含まれる場合は注意しましょう。

 

 

少し慣れてきたら…

 

複数の文字列を指定して検索する

$fgrep -e ‘hoge’ -e ‘foo’ /assets/css/

 

指定した複数の文字列を含む行を取り出す

$fgrep ‘hoge’ /assets/css/index.css | fgrep ‘foo’

 

なんてこともできます。

 

 

いかがでしたでしょうか。まとめてみると、そこまで難しくなさそうな気がしてきました!LQな私はこのぐらいでお腹いっぱいですが、他にも便利なオプションがたくさんあるので使ってみても良いかと思います!

 

以上、簡単ではありますがgrepの使い方のご紹介でした。

なおターミナル・vimの使い方はこちらをご覧ください。

https://blog.splout.co.jp/3249/

 

 


カメラの基本講座 その1 「絞り」編

こんにちは。デザイナーKです。
趣味で写真をやっており、最近は週末になると撮影の旅に出ております。
まだまだアマチュアレベルですが、今回は写真撮影の際の基本となるカメラの「絞り」に重点を置いた記事を書いてみたいと思います。
記事全般を通して、一眼レフを使用した際の事例になるかと思いますので、その点ご了承下さいませ。

「絞り」とは

カメラにおいて「絞り」はかなり重要な役割を持っています。「絞り」は「F値」とカメラの設定では言われています。
「F値」とは、レンズの焦点距離を有効口径で割った値で、レンズの明るさを示す指標として用いられています。

一般的に、「F値」が小さいほど
“レンズを通る光の量が多いのでレンズは明るく写り、シャッタースピードが速く”
「F値」が大きいほど
“レンズを通る光の量が少ないのでレンズは暗く写り、シャッタースピードは遅く”

なります。

よくいう写真の「ボケ」って?

みなさんが普段見られる写真の中でよく言われる「ボケ」や「ボケ味」といった言葉は、この「絞り」の設定を変更することで表現することができます。
被写体の背景などがボケていて、被写体が浮き上がったような表現にした写真のことを「被写界深度の浅い写真」、逆に背景がボケていないクッキリとした写真を「被写界深度の深い写真」と言うこともあります。

以下の画像にF値とボケ方(被写界深度)とシャッタースピードについてまとめてみました。

 

このようにF値を制御することによって、カメラの様々な設定が決まってきます。
一般的な一眼レフカメラだと「絞り優先モード」というモードが付いているはずなので、そのモードで絞りの値を設定して写真を撮るとシャッタースピードなどを設定する手間が省けます。
私は普段、風景写真を撮影することが多いので、絞り優先で撮影することが多いですが、夜景や動くものなどは「シャッタースピード優先モード」や「マニュアルモード」などを使って撮影するほうが思いどおりの写真を撮影することができると思います。

ボケを楽しむ

上記を踏まえて、社内に置いてあったもので何枚かボケを使った写真を撮ってみました。

Canon EOS 5D Mark IV EF 50mm F1.4 USM

絞りをマスターして思い通りの写真を撮ろう!

写真の「絞り」の概念を理解すると、写真の楽しみ方がグッと広がります。
今まで撮りたくても撮れなかったような写真も、意外と撮れるようになったりします。
今回は「絞り」中心の記事になりましたが、次回は他のカメラの基本的なことを記事にできたらと思います。


iPad proでお絵かき頻度向上を目指す

こんにちは。新卒デザイナーのハナです。

 

昨年11月、会社のスマートフォン・タブレット補助を利用し、iPad proを購入しました。

 

私はイラストが趣味なので、iPad proとApple pencilをデジタルイラスト作成に使用しています。

iPad proをイラスト作成のために使用するという観点からの、個人的な感想をご紹介します。

もし購入を迷っている人がいれば、判断材料の一つにしていただければ幸いです。

 

良かった点

どこでも絵が描ける

iPad proはイラストソフトさえ入っていれば、これ単体で絵を仕上げることができます。

パソコンなどにつなげる必要もないので、すごくコンパクトです。

外に持っていって喫茶店などでも使えるのはもちろん、お布団の中で寝転がりながらでも絵を描くことができます。

部屋が寒くて机に座って作業する気が全然起きないときでも大丈夫です。

 

「とりあえず描き始める」ことのハードルが下がる

普段はmac book proとワコムの板タブで絵を描いているのですが、家に帰ってきてからなかなか机に座って絵を描く気が起きず、今日はもういいかぁと寝てしまうことが多くあります。

ですがiPad proを導入した後は、疲れていても毎日少しは絵を描く気力が起きるようになりました。

 

「物事をやり始めるまでのハードルが低いほうが途中で挫折しないので良い」とよく言われていますが、確かに考えてみるとPCで絵を描くとなると、

①部屋に戻る

②机に座る

③PCを起動

④ソフトを立ち上げる

と実際に描き始めるまでに結構工程が多いです。

疲れているときなどはこの工程の途中で挫折してしまっていました。

人間いくら好きなことでもやり始めるまでのハードルが多いと(特に疲れてると)簡単に挫折するようです。

 

iPad proだと

①ホームボタンを押してスリープ解除

②アプリを立ち上げる

と工程が少なく、挫折する前に絵を描き始めることができました。

 

 

残念だった点

Apple pencilの替えのペン先がそこそこ良いお値段

私は描き心地を紙に近づけるために若干表面がザラザラしたペーパーライクフィルムを画面に貼っています。

それが原因ですごい勢いでペン先がすり減っていきます

11月末にiPad proApple Pencilを購入してから1月半ばまでに二回交換しました。

板タブのペン軸は金属製のものに替えてすり減りを防止したりパスタや綿棒で代用が効くという話もありますが、Apple pencilのペン先は専用のものなので代用品がありません。

ペン先はそこそこ良いお値段なので、この調子で使い続けると出費がわりと痛いことになりそうです。

その代わり描き心地は上々なので、ペン先がすり減るのはもう仕方のないことだ、これは必要経費だと割り切ることにしました。

 

充電が必要

当たり前の話ですが、iPad proもApple pencilも充電が必要です。

PCにペンタブだと、PCに電源コードを差しっぱなしの状態で作業を始めた場合、充電切れによって作業を中断させられることはありません。

iPadで作業をしていると、たとえiPadに充電器を接続しっぱなしの状態で作業を始めたとしても、連続で作業し続けているとApple pencilの充電が切れて作業が中断します。

また、Apple pencil単体では残充電量が見られないため、気がついたら電池が減っていて、集中しだしたタイミングで充電切れにより強制的に作業中断、ということが何回かありました。

 

ですがこれも仕方がないので、「毎晩ちゃんと充電する」「休憩しているときは必ず充電する」といった習慣をつけ、お絵かきがノッてきたタイミングで強制中断しないように気をつけることが大切だなと思いました。

 

 

まとめ

私の個人的な感想の結論としては、絵を描く頻度とスピードが上がったので買って大正解でした!(スマートフォン・タブレット補助、本当にありがとうございました)

 

ですが相性などもありますし、iPad proが全人類のお絵かき技術をすぐに上げてくれるわけではありません。

(そもそも液タブを所持していて、かつ、ちゃんと机に座って毎日絵を描く習慣をつけている人は別にiPad proが無くても良いような気もします…)

ですが私のように基本性質がなまけものでめんどくさがり屋で、寝転がりながら落書きしたりするのが好きな人にはとてもおすすめします。

 

2018年は、パソコンを使って本格的に描くのは休みの日の元気がいっぱいあるときにして、平日などはiPad proで毎日「とりあえず描き始める」ことを目標に、もっとお絵かきの練習頻度を上げて技術向上を図れたらいいな!と思いました。


CSS Grid Layout を使ってみよう!(基本編)


 
webページでレイアウトをするとき、今まではfloat、最近では、Frexboxを使ったりしているかと思いますが、「CSS Grid Layout」も今後導入を考えてもいいかもしれません。
まずは、簡単に3×3のマスを作ってみましょう!
 
.grid-containerにグリッドの要素を内包する要素として
「display: grid;」を記述します。

item1
item2
item3
item4
item5
item6
item7
item8
item9
.grid-container{
  display: grid;
  height: 300px;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

このままだと、divタグが並んでるだけなので、.grid-itemにそれぞれ位置を追記します。

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.item6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.item7 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.item8 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.item9 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

これで、要素が3x3に並んだと思います。

CSSが長くなりましたが、内容はほとんど共通でシンプルです。
「.grid-item」に指定してある、
grid-columnは横の開始点と終了点、
grid-rowは縦の開始点と終了点を指定しています。


ちなみに分割する線のことを「グリッドライン(grid line)」と呼んでいます。

アイテム間に余白を入れるgrid-gap

アイテム間に余白を入れたい場合があると思います。
その場合、親要素「.grid-container」に「grid-gap」を追記しましょう。

.grid-container{
  display: grid;
  grid-gap: 5px;
}

アイテム間に5pxの余白が出来たと思います。

共通のアイテムの幅と高さの指定

ここまでで、「item1」〜「item9」まで個々にアイテムの幅と高さを指定していましたが、共通の幅と高さである場合「grid-template-columns」「grid-template-rows」で省略できます。
grid-template-columnsで横幅の指定、grid-template-rowsで縦幅の指定ができます。

次のように書くと、「横幅が150px 100px 50px」「縦幅は150px 100px 50px」の縦横共通のアイテムができます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;
  grid-template-columns: 150px 100px 50px;
  grid-template-rows: 150px 100px 50px;
}

「fr」という値について

さらに「1fr」「2fr」などの様に指定すると残りの長さを分割出来ます。

.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}

個別のアイテムの大きさの変更

これらを応用すれば下記のようなレイアウトが出来ます。
(item4,item5の大きさを変更しています。)

item1
item2
item3
item4
item5
item6
item7
.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;

/*幅150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-columns: 150px 1fr 2fr;

/*高さ150px 残りの1/3 残りの2/3 のグリッド*/
  grid-template-rows: 150px 1fr 2fr;
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

/*「grid-template-columns」「grid-template-rows」で指定した以外の大きさのレイアウト*/
.item4 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

グリッドラインに名前

ちなみにグリッドラインに名前をつけることができます。
最初や最後、キーポイントとなるグリッドに名前を付けることで管理がしやすくなるかと思います。

.grid-container{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: [c1] 150px [c2] 1fr [c3] 2fr [c4];
  grid-template-rows: [r1] 150px [r2] 1fr [r3] 2fr [r4];
}
.item1 {
  grid-column: c1 / c2;
  grid-row: r1 / r2;
}

spanキーワードを使う

グリッドラインの代わりにいくつ先のラインに伸ばすか記述する方法もあります。
下記の「grid-row」だとグリッドライン2から2つ目までという意味です。

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / span 2;
}

ここまでのサンプルです。

簡単にですが、CSS Grid Layoutの基本的な使い方をお伝えすることができたでしょうか??

グリッドの指定が独特ですので、「GRID GARDEN」というゲームを触りつつ、慣れてみるものありかもしれません。

対応ブラウザについて

https://caniuse.com/#feat=css-grid
Edgeも対応され、これから徐々にグリッドレイアウトのサイトが増えてくるかもしれませんね。

次回は、具体的レイアウトを元に使い方をお伝えしようと思います。


デザイナーとエンジニア間のデザインもろもろを助けてくれるツール「Zeplin」

こんにちは。デザイナーのKです。
最近アプリのUIデザインを手がけることが多いのですが、その際にエンジニアと「デザインのもろもろのやりとり」問題が生じることが多々あります。

 

完成したアプリを確認すると、

・画像の比率が違う
・余白がバラバラ
・フォントサイズがバラバラ
・思っていた画面遷移じゃなかった

などなど…

 

デザイナーが思っていたものと少し違ったデザインで、アプリが出来上がることがありました。
アプリにとってUIは非常に重要な要素であり、出来る限りアプリの完成形はデザイン通りに完成することが求められます。
何かアプリ側のデザインに間違いやズレなどがあったときに、その都度エンジニアにデザインの画像を送って見ながら調整するのは、とても手間がかかり工数も圧迫します。
そこで今回、私が担当しているアプリのUIデザインで導入しているツール「Zeplin」をご紹介します。

 

『Zeplin』とは?

『Zeplin』
https://zeplin.io/

『Zeplin』は一言で言うと、「デザイナーとエンジニアのUIコミュニケーションツール」です。
「UIコミュニケーション?」と思われる方もいるかと思いますが、要は『Zeplin』を使うことによって、デザイナーとエンジニアのUIの認識を共通化させることが可能になります。

『Zeplin』のインストールや使い方は、調べるとすぐに見つかりますのでここでは書きませんが、以下の画面のようなイメージで、

 

・オブジェクト間のマージン情報
・オブジェクトのサイズ、角丸のサイズ

などがクリック一つでわかるようになります。

 

特にエンジニアの方に役立つのは、「マージン情報」や「フォント情報、カラー情報」などではないでしょうか?
それらも『Zeplin』ならひと目で情報を瞬時に知ることができます。
また、Swift3のコードもクリック一つで自動生成され、使用することもできます。

 

 

他にも便利な機能として、「コメント機能」があります。
以下の画面のように、デザイン画像にコメントを残すことができ、さらにそのコメントに返信することができます。

各イメージ画像は弊社サービスの『Sportare』のデザインになります。

 

『Zeplin』を導入してみてわかったこと

現在進行中の弊社の案件でも、私とエンジニアとの間で『Zeplin』を導入してプロジェクトを進めています。

 

導入してみてデザイナー側から思ったことは、

・デザインの細かい数値がひと目で見えるのでエンジニアに伝えやすい
・コメントを付けて返信も見ることができるので、確認漏れが減った
・Sketchとの相性が良いので、最新のデザインをすぐにアップロードできて共有しやすい

など、非常にメリットが多いです。

 

コメントや履歴の検索ができないことがデメリットとしてありますが、今後改善されればと思います。
しかし、そういったデメリットを上回るメリットが『Zeplin』にはあるので、今後もバシバシ使っていこうと思います!

無料版は1プロジェクトまでしか対応していないので、実務で使うとなると厳しいですが、試しに使うには十分ですので、ぜひ一度使ってみてはいかがでしょうか?
 

さいごに

ということで、今回は「デザイナーとエンジニアのUIコミュニケーションツール Zeplin」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい!という方は、ぜひこちらからお気軽にお問い合わせください^^