vol.61 CSS肥大化を抑える Sassを使ったコード設計の実践

f:id:BOEL:20170428124700j:plain

こんにちは、Webエンジニアの佐藤です。


前回は CSS肥大化を抑える 破綻しないコード設計とSassの導入についてご紹介しました。


今回は、私が業務で使っているCoda2でのSassのインストールコンパイル方法と、
また前回を踏まえて、実際に業務での実践で意識した点やその結果、改善ポイントなどをあげていきます。

 

Sassのインストール方法
Codaでの使い方、コンパイルについて


CodaへのSassのインストール方法

Codaの公式サイトへアクセスします。


Coda公式サイト
メニューの[ Plug-ins ]を選び、検索フォームから「Sass」を検索すると
Coda用のSassのプラグインが表示されます。


黄緑色の[ Install ]をクリックすることでCodaが立ち上がり、
Sassが自動でCodaにインストールされます。
Coda「環境設定」のプラグインタブ内の一般の欄に「Sass」が追加されていれば
インストールの完了です。


CodaでSass(scss)をコンパイル

拡張子が「.scss」のscssファイルを作成し、
css、scssの記述方法に合わせてコードを書いて保存をします。
Codaでは、scssファイルを保存すると、同階層に同じファイル名のCSSファイルが自動で吐き出されます。


scssでコードを書いて、上書き保存をするたびにcssファイルを更新していってくれるので
コンパイルをするたびにコマンド実行などの手間がなく便利です。


今回実践したポイント

・scssファイルをページごとに分け、importでひとつのcssにまとめる


・クラスの共通化


・mixin、extendの使用


・入れ子(ネスティング)をしすぎないこと

 

実践した結果


よかったこと

・ページごとに分けているので見やすい、それぞれのファイルのコード量が少なく軽い


1ページごとにscssファイルを分けたため修正の際などに作業するファイルが明確になった。


1ページのscssファイルをさらにPC用とレスポンシブ用の2ファイルに分けたため、
それぞれのファイルサイズが格段に小さくなり、作業効率が良くなった。


・同じコードが減り、無駄な記述がなくなった


共通のクラスを使用、またmixinやextendを使用するなど
同じコードを何度も繰り返し書かず済んだことですっきりしたコードになった。

 

・多量なインデント、深すぎる階層のセレクタがなくなった


scss内で入れ子をしすぎ、エディタ画面の半分がインデントで埋まるということや
必要以上に深い階層の、強いセレクタがなくなった。


よくなかったこと

・importでファイルを細かく分けたためコードが見つからないことがある


ページごとにファイルを分けたため、一部で使っていたコードを後から共通化したあと
その記述を特定ページのscssファイルにそのまま残してしまうなど、
編集したい記述を探すのに手間取ってしまった。


・extend継承のしすぎ


ボタンなどの記述にextendを使用したが、共通化するセレクタの数が増えすぎてしまい
コンパイル後、大量のセレクタが羅列してしまった。


またextendを使用したセレクタを入れ子にして別の場所で使った場合、
そちらでもグループ化されて、いらない上書きが発生してしまった。


//extend)

.btn1{border:1px solid #000000; width:120px; font-size:14px;}
.btn2{@extend .btn1; border:1px dotted #cccccc;}
.box{
.btn1{border-color:#ff0000;}
}

 


//extendコンパイル後)

.btn1,.btn2{border:1px solid #000000; width:120px; font-size:14px;}
.btn2{border:1px dotted #cccccc;}
.box .btn1,.box .btn2{border-color:#ff0000;}

 

改善するには

・共通の記述はもとより共通用scssに書いておく
これはもちろん大前提の話ではありますが、製作中のレイアウト変更はつきものです。


あとからコードを共通化する必要がでてきたなら、すぐに共通用のscssに移動させること、
また、記述位置の問題などですぐに記述の移動ができない場合は
検索してすぐ見つけられるようコメントアウトを残すなどの対策をしましょう。


・同じextendの記述を使いすぎない


extendはmixinと違い、同じコードにセレクタがグループ化されます。


自動でグループ化され、同じ記述が増えないので簡単かつ便利ですが
extendを使用する分だけセレクタの羅列が膨大になっていきます。


それを防ぐためには使用回数を数回に決めておくか、共通のクラスをひとつ作っておくべきでしょう。


プレースホルダセレクタを使ったグループ化


extendにはプレースホルダセレクタが専用で設けられています。
プレースホルダセレクタは「#」や「.」ではなく「%」で定義し、
通常のセレクタとは違ってmixinのような扱いになり、呼び出さないと使えず、コンパイルもされない要素です。


これなら別の記述から予期しないグループ化がなくなり、必要な記述を呼び出して使うことができます。


//プレースホルダセレクタを使ったextend)

%btn-extend{border:1px solid #000000; width:120px; font-size:14px;}

.btn1{@extend %btn-extend;}
.btn2{@extend %btn-extend; border:1px dotted #cccccc;}
.box{
.btn1{border-color:#ff0000;}
}

 


//プレースホルダセレクタを使ったextendコンパイル後)

.btn1,.btn2{border:1px solid #000000; width:120px; font-size:14px;}
.btn2{border:1px dotted #cccccc;}
.box .btn1{border-color:#ff0000;}


今回実践してみて


前回の記事でまとめたポイントや注意点を意識し、今回業務で実践してみた結果として、 最終的に吐き出されたCSSは今までより容量を抑えることができたのではないかと感じます。
今回はCSSのサイズを抑えることを意識してのコード設計だったため、リファクタリングなどと違い、比較対象がないので憶測ではありますが、Sassの活用・記述の共通化などで大きく変わった部分が多いと思いました。
しかし、今回の実践では改善するべき箇所がいくつも見つかり、
CSSを最小限に抑えるための効率的なワークフローにはまだまだ至らないこともわかりました。
この記事で紹介しきれていない、まだ使ったことのないSassの機能などもあるので、
それらも駆使し、CSSの容量を抑え、よりよいコード設計を目標に精進していきたいと思います。

vol.60 node.jsに触れてみよう サーバーサイドJSとは

f:id:BOEL:20170222131848j:plain

 

こんにちは。ウェブエンジニアの毛利です。
私がウェブ制作に携わるようになった2013年頃から2017年にかけて、ウェブ開発を取りまく環境が目まぐるしく変化していると感じます。
PCブラウザの急速な進化、マルチブラウザ化、非Flash化、スマートフォンサイト、レスポンシブデザイン、HTML5、CSS3、javaScript ES6など、ウェブに関するキーワードはたくさんあります。
ブラウザのシェアはInternet Exprolerが大多数を占めていた頃から比べると2017年現在では様々なブラウザが使用されるようになり、シェア率もGoogle ChromeIEを抜いてしまいました。
iPhoneの販売により、スマートフォンが急速に普及し、今やスマートフォンを持っているのが当たり前になっています。

マルチブラウザ化、進む非Flash

現在ではいわゆるレガシーブラウザ(IE6やIE7などシェア率の高かった古いブラウザ)の対応より、レスポンシブ、クロスブラウザ、マルチブラウザ対応が大きな割合を占めます。
インターネットを閲覧するための環境が変わったのに合わせて、それを開発環境も変化をしていきました。
iPhoneに搭載されているiOSはPCブラウザで当たり前だったFlashを非採用にし、Android OSも段階的にFlashを廃止していきました。スマートフォンの普及により、それに合わせたWeb設計が基準となったため、ウェブコンテンツの非Flash化が急速に進みます。

注目されるJavaScript

そこで注目を集めるようになったのがJavaScript。元々リッチコンテンツの表現を担っていたFlashが廃止になり、JavaScriptでその代わりを行おう、という方向にシフトしていきました。
そこで登場したのが数々のJavaScriptライブラリです。現在ウェブ制作の現場では当たり前のように使うようになったjQueryが最も有名です。
そのjQueryも2016年に3.x系にメジャーアップデートし、そのコンセプトも以前とは異なり、レガシーブラウザの対応廃止し軽量化、パフォーマンス重視と大きく方向性がシフトしました。
最近では制作をより効率化するかつパフォーマンスをよくするために様々なライブラリ、フレームワーク、実行環境が開発されています。その中でも「サーバーでJavaScriptを実行できる環境が作れる」node.jsに注目しました。

「サーバーサイドJS」と呼ばれるnode.js。
それは一体何なのか、どんな特徴を持っているのか、Apacheを始めとしたいわゆるWebサーバーとはどう異なるのかをキーワードに注目します。

 

node.jsとは

f:id:BOEL:20170222131850j:plain

 

サーバーでJavaScript実行するための環境のひとつです。
現状ではサーバーサイドJSといえばnode.jsといっていいほど代表的なものとなっています。
「サーバーでJavaScript実行するための環境」というのがいまいち要領を得ない部分があったのですが、個人的にはApacheやnginxといったWebサーバーを比較対象にして考えました。

・node.jsを使えば、サーバー側でjavaScriptを実行することができるようになる。
javaScriptでWebサーバーを立てる事ができるので、ウェブサイトを公開する環境としても使える。

捉え方によっては、少し乱暴ですがひとつの機能として「Apacheの代わりのようなことができる」という理解です。
実際には特徴や得意なことが全く異なるため、完全な代替とは少し異なります。

 

node.jsが台頭した背景

C10K(クライアント1万台)問題

サーバーのハードウェアスペックの問題なくても、サーバーパンクを起こす現象のことです。
問題としてはこれが大きく、解決策のひとつとしてnode.jsが登場しました。
C10K問題(外部リンク)

ノンブロッキングI/O

これまでのApacheではリクエスト処理は1つのクライアント処理に対し1つのスレッドを立てて処理をしています。
これではクライアントが大量になったとき、スレッドもクライアントの数だけ立ち上がり、メモリを大量消費します。(同期I/O)
対策としてイベント駆動型構造にすることでシングルスレッドのまま処理を行うことにしました。
イベント駆動型とは、1つのスレッドで多数のリクエストをループして処理をすることです。
これはNginxにも取り入れられている方法です。(非同期I/O)
今度は負荷の大きな処理をした時、それを待つために処理が遅くなってしまいます。
その処理を待っている間別の処理をしてしまおう、というのがノンブロッキングの考え方です。
Node.jsは非同期、ノンブロッキングI/Oを採用しています。

Node.jsとは 公式サイト(外部リンク)
初心者向け!3分で理解するNode.jsとは何か?(外部リンク)
ブロッキングI/O ノンブロッキングI/O(外部リンク)

 

node.jsでできること

では、node.jsは何ができて何が得意なのか、何が苦手なのか、
どういう使い方ができるのかに触れていきます。

メリット

・言語間の壁がない
フロントエンド、バックエンドを同様の言語で扱えることで習熟コストを下げることが可能です。
フロントエンドエンジニアがサーバを扱う敷居が下がったともいえるでしょう。

・リアルタイム処理(非同期)に長けている
ノンブロッキングI/Oを採用しているため非同期処理が得意です。
スペックの低いサーバーでもシングルスレッドで性能を十分に発揮できます。
リアルタイムアプリケーション(チャットアプリやリアルタイム通知など)に向いています。

デメリット

・導入コスト
有名な共用サーバーなどではデフォルトでnode.js環境を提供していないことがほとんどです。
導入にはVPSなどの環境でサーバーを構築する必要があります。

・サーバースペックが余る
シングルスレッド駆動のため、デフォルトのままでは
マルチコアのサーバーの性能をフルに活かせません。

 

node.jsの利用例

・リアルタイムWeb、通知
ソーシャルゲームなど更新や通知などをリアルタイムで行うような処理。

[大図解]ピグライフはこう動いている(外部リンク)

・チャットWebアプリ
Socket.ioを利用して簡単にチャットシステムを構築

チャットを作りながら学ぶSocket.IO(外部リンク)

 

node.jsを使うフレームワーク「Express」

f:id:BOEL:20170222131852j:plain

 

node.jsにはExpressというフレームワークがあります。node.jsを使った開発を最小限かつ高速に実現することができます。
View Engineを使うことができるため、HTMLで見た目をつくりながらnode.jsを使ったWebアプリケーションを構築することができます。

Express 公式(外部リンク)

 

node.jsを取り入れている企業

PaypalNASAはバックエンドにnode.jsを取り入れています。
これだけ大きな企業、組織が実際に取り入れているということは、今後Webにおいてこれがメインフレームになる可能性を秘めていると考えられます。

PayPal社がバックエンドをJavaからJavaScriptへ移行(外部リンク)
NASA Open API(外部リンク)

 

まとめ

今回はnode.jsについて知識を得るために大事なポイントに触れていきました。
C10K問題から、それを解決するためのひとつとしてnode.jsが出てきましたが、それも既に3〜4年ぐらい前の話で、今ではもう開発選択肢の1つとして当たり前のように取り入れられているという実感があります。
次回はnode.jsをnginxで動かしているサーバで実行できる環境を構築していきます。

vol.59 WebライティングでUIデザインの 品質を高める

f:id:BOEL:20170216120340j:plain

こんにちは。デザイナーの寺田です。

ここ最近、UI/UXという言葉を当たり前に聞くようになりました。

UIデザインが増えて、ユーザーはWebサイトをより直感的に

操作することができるようになりました。

 

最近ではGUI(グラフィックユーザーインターフェース)に比重をおき、Webライティングについて、細部まで考えられていないものもちらほら見かけます。

Google のマテリアルデザインでも「Writing」と項目を設けて言葉選びがUIにとって重要であることを公開しています。

 

今回はライティングについて考え、ユーザー中心設計のWebサイトにするために押さえたいポイントを紹介します。UX(ユーザーの満足度・体験)の質を高めるためにも、ライティングが重要であることが伝わればと思います。

 

UIとはコミュニケーションのこと

UIはユーザーインターフェースUser Interface)の略です。

インターフェースとは、接点のことで、ユーザーインターフェースは、ユーザーとWebサイトが上手くコミュニケーションできるようにすることです。

 

Webサイト上で情報の発信者と閲覧者が上手くコミュニケーションすることは、簡潔かつ的確に、そして瞬時にユーザーが情報をキャッチでき、不自由なくWebサイト内を行動できることです。

Webデザインと比べ、使いやすさや操作感の設計をデザインすることになります。

 

 GUI(グラフィカルユーザインタフェースだけでは、コミニュケーションが不十分

Webサイトにおいて、文字や単語・キャッチコピー・文章は、Webサイトがユーザーに対して情報伝達をするうえで基本的な要素です。

そのため、簡潔でわかりやすい言葉は、Webサイトの価値を高めるために不可欠です。

 

冒頭でここ最近はGUIに比重があり、Webライティングについて細部まで考えられていないといいましたが、

ライティング、言葉選びの重要性について2枚の画像を比べます。

f:id:BOEL:20170216120500j:plain

比べてみると、言葉がないとグラフィックの意味を正確に読み取れないものや、グラフィックよりも文字の方が意味が明確な場合があります。

言葉はユーザーとのコミュニケーションをすばやく的確に助けてくれます。

 

Webライティングの重要性についてご理解いただけましたでしょうか?

 

ユーザーのリテラシーレベルを常に考える

デザインをするときにターゲットは誰か、どんなサイトにするかを決めていても、ライティング、言葉選びをUIとしてデザインすることは難しいです。

 

「言葉」は内容を伝える「記号」です。

たとえユーザーが文章を読むことができたとしても、正確に内容を理解したことにはなりません。 専門用語が乱用されたWebサイトを、専門知識のないユーザーが訪れた場合に内容を理解するのに苦労するでしょう。

見て欲しいユーザーに届く適切な言葉選びは、私たちがテキストを書く際に気をつけなければいけないことのひとつです。 ユーザーのリテラシーレベルはどうかを考えるとき、現在のマーケティングで一般的となりつつある、理想の顧客像を設定するペルソナなどを用いて言葉選びをするのがとても重要です。

 

表記のルールを決めること世界観を作り出し、エラーを防ぐことができる

「ワーディング」というスキルがあります。ワーディングとは、言葉遣いや言い回しを決めることです。 前述のペルソナにあった言い回しでテキストを統一することで世界観をつくりだすことができます。 また、表記の統一をすることは、エラーを防ぐことにもつながります。

 

ただ、日本語の文法は情報伝達において欠点があります。それは結論が最後にくることです。 文章の末尾が「します」なのか「しません」なのかといった、わずかな違いで文章全体の意味が正反対になることです。 できるだけ、短く簡潔な内容にすることで、言葉によるエラーは防げます。 次の例文にあるYesかNoで答える場合の問いを見てみましょう。

 

例1

「このページで処理ができませんでした。再起動を行います。よろしいでしょうか。」

例2

「問題が起きました。再起動を行います。」

 

より短い文章の方がユーザーによる内容の理解が早いため、エラーも防げます。

Webサイトの価値を高めるため、

ライティングにも注目して参考サイトを見てはいかがでしょうか。

 

まとめ

ユーザーは流し読みや見出し読みなど、詳細に文章を読んでいないという調査結果がありますが、

文字情報がいかに情報伝達において重要な要素であるかを理解して頂けたと思います。

ユーザーがより使いやすく、ストレスなく使用でき、ポジティブな体験や満足の得られるWebサイトをつくることを目指して、サイトに載せる要素を吟味していきたいです。

 

参考

言葉はグラフィックより大事なインターフェイス : could

言葉も重要なUIの要素!言葉で高めるUIデザイン | Creive【クリーブ】

 

CSS肥大化を抑える 破綻しないコード設計とSassの導入

f:id:BOEL:20170215183058p:plain

こんにちは。Webエンジニアの佐藤です。
小規模なWebサイトや単体ページならいざ知らず、大規模Webサイトなどを開発する際、CSSが必要以上に肥大化し、気付けば構造が破綻してしまっていることはありませんか?

Bootstrapに代表されるCSSフレームワークの選択肢もありますかライセンスのことや、ファイルサイズ、またはコードの拡張性などの課題に直面し、業務では推奨されないのが現状です。

 

WebデザイナーマークアップエンジニアをはじめWebサイトの開発に携わる人にとって、CSSの記述が膨大に増えてしまった経験があるのではないでしょうか。

 

今回は、どうしたらCSSの最終的なファイルサイズを小さくできるかを考え、CSSを最小限におさめることを目標に効率的なワークフローを構築するためのいくつかのポイントをあげていきます。

 

CSSの肥大化を抑える5つのポイント

・Sassを活用
CSSの優先度を考える
・スタイルの共通化、グループ化
・scssによるファイルの分割
・クラスの命名方法

 

Sassの活用

Sassとは

CSSの言語を拡張した、「メタ言語」です。
CSSの書式をベースとし、様々な機能を追加し、よりプログラミングに近い感覚でコード構築ができます。書き方により多様性が出せるため工夫次第で可読性、メンテナンス性、拡張性を大きく向上することができる可能性があります。
CSSメタ言語と呼ばれるものは「Less」など、他にもいくつかありますが、Sassの「SCSS記法」がわかりやすいです。
CSSの書き方をそのまま踏襲しているので、機能追加的な側面が強く、CSSの延長線上で直感的に書くことができます。

Sassでできること

Sassで特によく使うものを紹介します。

 

・変数化
値を変数にすることができます。


//変数

$color1 : #ffffff;
.hoge {color : $color1;}

 

・入れ子(ネスティング)
プロパティを入れ子形式で書くことができます。

//入れ子

body {
       nav {
               ul {
                       li {color : #ffffff;}
               }
       }
}

 

・@mixin
引数をつかうことができます。


//mixin

@mixin font($fontColor:#ffffff) {
color : $fontColor;
}

.hoge{ @include font; }

 

・@extend
継承することができます。


//extend

.box{width : 300px; height : 240px; }

.hoge{@extend .box; display : inline-block ;}

 

CSSの優先度に気をつけよう

CSSの優先度

CSSには優先度があります。セレクターを入れ子していくことでより優先度の高い記述となります。
それぞれの記述が入れ子しすぎて優先度の高い記述同士になり打ち消し合わないよう工夫が必要です。

特に気をつけたいポイントは以下の3点です。

 

・!important
全ての優先度を無視して、この記述を最優先にします。
レスポンシブデザインなどになると、media queryで上書きするような構造になる事があると思いますが、その場合、同じようにimporantを使わないと上書きできない記述になり、 構造によってはより優先度を高めた状態で!importantで打ち消す、と言った非常に編集しにくい記述となってしまう場合があります。

 

・HTMLへのインラインCSS
現在、CSSを別ファイルにして管理することがほとんどです。
HTMLへのインラインCSSは、CSSでの記述より優先となってしまい、上書きするためには!importantを使うしかなくなるなど、上記を誘発する原因にもつながります。 また、レスポンシブサイト構築時に上書きがしづらくなります。
特別な理由がない限りインラインで記述することは避けましょう。

 

・IDセレクタ
IDセレクタはclassより強い優先度を持ちます。
サイト設計にもよるのですが、最初に想定していない、後からの追加や、 ブロックの使い回しが発生した時にclassへの変更を余儀なくされる、といったことが発生します。
サイト構築の初期段階で使い方の規則を決め、その範囲以上で使わないことを推奨します。

長過ぎる入れ子(ネスト)は避けよう

ネストはコンテンツごとのまとまりを作る感覚で書いてしまいがちですが
必要のない記述を増やしてしまいます。
更にそれを打ち消すための長いセレクタがはびこるCSSは、
メンテナンス性、可読性ともに悲惨なことになります。

ネストは3つまで、など決めてしまうのが良いでしょう。


/* 無駄なネスト例(SCSS) */

.contents1{
        .box{
                ul{
                        li{
                                a{font-size : 12px; color : #ff0000;}
                        }
                }
        }
}

 

スタイルデザインの共通化し、再利用する

同じクラス、スタイルを使う

同じレイアウトの部分は、コンポーネント化して共通のクラスなどでCSS記述を使いまわせるようにしましょう。
コンポーネント化とは、部品にするという意味です。

上記の「無駄なネスト例」のように一箇所でしか使えない記述の仕方では
他の場所に同じスタイルを当てたい場合、同じ記述を改めて書くことになります。
サイト構造全体を見て共通のスタイルを部品にし、使いまわせるようにすることで同じ記述をもう一度書かなくて済みます。

共通化しすぎに注意

ここが似ているから、などと安易にクラスの共通化をしすぎてしまうと
かえって共通でない部分を上書き、打ち消しなどで記述を増やしてしまうことがあります。
レスポンシブの場合であれば尚更、共通プロパティのみの記述を作っておき、
@extendを使用するなど適度に共通・分離をしましょう。

 

scssファイルの分割

「最終的なCSSを最小限におさめる」ことが今回のCSSの肥大化を防ぐ目標ですが、
実際に作業するファイルが肥大化してしまっていたら元も子もありません。
そこで、scssファイルを分割し、importをつかってマスターのscssに読み込みます。

reset.scss
animation.scss
responsive.scss

それぞれ「リセット用」「アニメーション用」「レスポンシブ用」とファイルを分割しています。
編集ファイルが分割化することで、1ファイルのコード量が減らせるため、コードの見通しが良くなるのと同時に 大きいファイルを扱うときエディタなどで、表示や操作がもたつくといった現象を避けることができます。 マスターにしたいstyle.scssなどに@importすることで、最終的に1つのcssにまとめることができます。


//外部化したscssの読み込み方(拡張子.scssは付けない)

@import "reset","animation","responsive";

 

クラス名について

クラスの命名規則にはいくつか種類があり、よく耳にする名前といえば以下の3つがあげられます。

キャメル mainTitle
スネーク main_title
パスカル MainTitle

個人的な意見としては、命名規則に大きな差はないと思います。
キャメルやパスカルなら短さ、スネークなら見やすさが重視されます。
また、組み合わせる言語(javaScript)の規則に合わせたり、チームで慣れ親しんだ言語にあわせるのも統一基準となります。

 

キャメル、スネーク、パスカルについて

いまさら聞けない「変数の命名規則」(外部リンク)


CSSコーディングルール 基盤となる考え方(参考)

命名規則にはいくつか考え方があります。
これらを元にCSS設計を考えることも1つ、CSSの肥大化の対策を考える事もできると思います。
詳しい説明は今回割愛させていただきますが、代表的な規則の名称とキーワードを載せておきます。
・BEM(Block Element Modifier)
classを3つ(ブロック、要素、修飾)に分類し、命名します。命名は長くなりがちですが、どこのスタイルかがわかりやすくなります。block__element-modifier

・SMACSS(Scalable and Modular Architecture for CSS
5つのカテゴリ分類(ベース、レイアウト、モジュール、ステート、テーマ)をして設計します。体系化することでメンテナンス性に長けている書き方とされています。

OOCSS(Object Oriented CSS
オブジェクト指向の考え方でCSSを命名、設計します。構造と装飾をわけ、記述する考え方です。

BEM SMACSS OOCSS
OOCSS BEM SMACSS FLOCSS 違い(外部リンク)


BEMの命名規則についての参考
BEMに基づいたCSS命名規則について考えてみた(外部リンク)


SMACSS
SMACSSを利用したCSS設計について(外部リンク)


OOCSS
すぐに実践できるCSS設計 OOCSSの基本を理解しよう(外部リンク)


まとめ

いかがでしたでしょうか。
今回はSassを中心にCSSの肥大化を防ぐためのポイントを絞った紹介しましたが
原因や対策が分かっていても実践ではうまくいかないもので、私もまだまだ手探り状態です。
次回は、今回あげたポイントを意識して行うために、まず本TIPSで重要視しているSassを導入、インストールするところから紹介していきます。
より見やすくかつ使いやすいCSSにするために一つずつ実践していきたいと思います。

vol.57 Raspberry PiにUbuntu Mateを入れてみよう

f:id:BOEL:20170106124217j:plain

あけましておめでとうございます。2017年最初のTIPSです。

Raspberry Piラズベリーパイ)という小型のコンピューターを入手したため、何かできないか?と、すぐにできそうなことを実践してみました。

 

www.raspberrypi.org

 

Raspberry Pi」とはイギリスのラズベリーパイ財団というところで開発された小型のコンピューターだそうです。

元々教育用途などで使うことを目的として開発されたものですが、安価で触れやすい、小型のサイズながらコンピュータの基本構成を網羅しているためやり方次第で様々なモノが作れる可能性を秘めています。

 

今回はまず何かを入れて動かしてみたい思いが強く、Linux OSをインストールしてみることにしました。

手順は様々なサイトで紹介されているため、基本的にはそれらに沿って進めていきます。

その上でつまずいたポイントなどを書いていきます。

 

組み立て

f:id:BOEL:20170106124316j:plain

 

今回使うのは「Raspberry Pi Kit for DUMMIES」というものです。

本体はRaspberry Pi3です。

ちなみに「for DUMMIES」は「サルでもわかる」という意味とのこと。

それだけ簡単だと前向きに捉えて組み立てていこうと思います。

 

組み立てるといっても特殊な手順はなく、付属していたケースに基盤をはめ、ヒートシンクを取り付け、4箇所をネジでケースに固定し、ケースの裏側にすべり止めを付けるのみです。

 

f:id:BOEL:20170106124337j:plain

 

本体基盤に接続できるものは以下のようになっています。

 

USBポート2.0 × 4

LAN 10/100 Mbps イーサネット

HDMI端子

3.5mmジャック

MicroSD

USB Micro B(電源用)

 

これに加え(これがメインかもしれませんが)、GPIO 40ピン(基盤にある針山のような部分)があるのですが、今回はOSインストールのみで使わないため、触れないこととします。

なお、Raspberry Pi3からは無線LANBluetoothもついています。

 

Linuxのインストール

f:id:BOEL:20170106124356j:plain

 

こんな小さいユニットにOSが動かせるのかと少々疑いつつもLinuxが入るとこのことなのでインストールしてみることにしました。

調査を進めてみるとUbuntu Mateをインストールしている参考記事が数多くヒットします。

なんでUbuntu Mateなんだろう?と調べていくとRaspberry Pi用のインストールイメージを提供していることが大きいみたいです。

手っ取り早く、GUIでOSを動かしてみたい思いが強かったため、早速入れてみることにしました。

Raspberry Pi用のOS「Raspbian」というのもあります。こちらを入れるのが正道みたいですが、いったんUbuntuを入れてみることにしました。

 

Download Ubuntu MATE | Ubuntu MATE

 

まず、公式サイトからインストールイメージをダウンロードします。

Ubuntu MATE 16.04.1 LTS」を選択すると、右端に「Raspberry Pi」の選択肢がありますのでそれを選択します。

ダウンロード方法がいくつか用意されていますが、Via Direct Downloadからダウンロードしました。

ダウンロードできるサーバーはいくつかあるのですが、場所によっては時間がかかるようです。

 

ダウンロードが完了したらインストールを進めていきます。

基本的な流れは下記サイトを参考とし、進めています。

 

Raspberry Pi3にUbuntu Mateをインストール - Desktop Linux のススメ

Raspberry PiのOSをSDカードに焼く - Qiita

 

本TIPSではMacで行ったので、参考サイトと異なるところや、実際につまずいたところを中心に書いていきます。

 

f:id:BOEL:20170106124508j:plain

 

基本的にはターミナルを使ってインストールを進めます。普段何気なく操作しているデバイスのマウント解除などもコマンドで行っていきます。

ターミナルを開き、まずダウンロードしたイメージファイルを展開します。 形式はxzというものですが、展開するためのソフトウェア「xz」が入っていない場合、homebrewを使ってインストールします。

 

$ brew install xz

 

※もし万一、homebrewがエラーで実行できない場合は下記TIPSに修復方法をまとめていますのでこちらを参考に修復を試みてください。

 

boel.jp

 

xzファイルを展開します。

下記コマンドはダウンロードしたディレクトリにcdコマンドで移動してから展開をしています。必要に応じてディレクトリを指定してください。

 

$ unxz ubuntu-mate-16.04-desktop-armhf-raspberry-pi.img.xz

 

展開したイメージをMicroSDに書き込みますが、ここで1つポイントがあります。

・コマンドを使ってマウントの解除する

 

手順の問題かもしれませんが、デバイスを選択し、右クリックから「ディスク取り出す」でマウント解除して手順を進めてももうまく行きませんでした。

そのため参考サイトで紹介されている手順を踏むことにしました。

 

もう1点、最初わからなかったことが、ドライブのパスです。

マウントを解除しようにも、Volumesから辿ってもうまくいかず、ではどこで?という疑問に陥りました。

これを解決するのにはdiskutilというコマンドを使います。

 

$ diskutil list

 

こちらを実行すると、ディスクパーティション一覧を出すことができます。

ここでのリストを見ていくと

/dev/disk◯

の表記で一覧されます。

今回は16GBのMicroSDを使っていたためそれを探します。

 

コマンドでマウントを解除(SDカードのパスがdisk4の場合)します。

 

$ sudo diskutil umount /dev/disk4

 

次に下記のコマンドでMicroSDにイメージを書き込んでいきます。

 

$ sudo dd if=ubuntu-mate-16.04-desktop-armhf-raspberry-pi.img  of=/dev/disk4 bs=1m

 

ポイントは「bs=1m」ブロックサイズを指定することです。

小さすぎると書き込みに時間がかかり、また大きすぎてもエラーになったり、転送速度が落ちるなど設定が難しいようです。

また、書き込み側のディスク指定を間違えると、ファイルが破損する場合がありますので、書き込むディスクはよく確認してから行いましょう。

 

ddコマンドの注意点は下記サイトで説明されています。

Mac OS X で Raspberry PiのOSイメージを焼く - @ledsun blog

 

書き込みが完了したら起動してみましょう。

 

起動してみる

f:id:BOEL:20170106124700j:plain

 

スイッチなどは無く、コンセントをつなぐと電源が入ります。

電源を入れる前にMicro SDスロットにカードを挿入します。

SDカードを挿入し、HDMI端子からモニタを接続します。

一通り線の接続が終わったら、いよいよACアダプターをMicro USB端子に接続し、コンセントに差し込みます。

しばらく待っていると起動するはずです。

初期設定を済ませ、apt-getをインストールしOSを最新に更新して完了です。

 

使用してみて

 

操作をしているとエラーが何度か出てくるのですが、それによってフリーズしたり、動作がおかしくなったりなどはなく基本的には動作しています。

使っている中で1つだけ問題があったといえば、Macのキーボードで日本語入力がうまくできなかったことでしょうか。

日本語入力の対応にはMozc(Google日本語入力)をインストールしました。

ですが、まだうまく使えているとはいえず、こちらは少し調査が必要です。

 

まとめと展望

 

今回はRaspberry PiLinuxをインストールしてみました。

最終的にはAIを入れたロボットにしたいというようなことが社内から声があがっていますが、道のりは長そうです。

次回はソフトだけではなく工作してロボットに近づけていくような試みができればと思います。

それにはパーツや工作道具を調達しなくてはなりませんね。

 

やりようによっては様々なものが作れる可能性を秘めているRaspberry Pi

値段も大変安価で、この値段でコンピューターが使えて、しかも制作できてしまうのは正直驚きです。

たいへん勉強にもなるため皆さんもものの試しにいじってみてはいかがでしょうか。

vol.56 Adobe Premiere Pro 初めてのカラーグレーディング

f:id:BOEL:20161115112527j:plain

こんにちは。ディレクターの白子です。


最近Youtubeやvimeoなど高画質で動画の配信が可能となりました。


これまで動画を撮ったことのある人は「せっかく高画質でアップロードできるのだから、色味も自分の思うように補正してみたい!」と思ったこともあるのではないでしょうか?


でも「色補正なんてはじめてで難しくてできない」と断念したことはありませんか?


特にPhotoshopと違い3カラーの色補正が主なため、やりづらいと感じたりします。


今回ははじめて色補正をする人にも、時間がないからカンタンに補正したい!という人にも、とても便利な色補正の方法をご紹介します。

 

そもそも色の補正とは…

試しに桜の映像をLumetriカラーで補正してみました。


そのままでも桜の色は綺麗だったのですが、花びらのピンク色を印象づけたかったので、全体的にマゼンタを強くする補正をしました。


色の補正は、映像そのものの色を整えるだけでなく、「この映像をどう見せたいか」を考えながら補正すると迷いが少ないかもしれません。

f:id:BOEL:20161115112622j:plain


Lumetriカラー

映像の色補正のアプリケーションには、プロ仕様のカラーグレーディングの「SpeedGrade」や「After Effects」が挙げられます。


Dynamic LinkやDirect Linkによって連携させて補正することができます。

カラーグレーディング、色調補正ソフト | Adobe SpeedGrade CC無償体験版をダウンロード


しかし、Premiereに慣れている私にはわかりづらく、また作業時間を考えるとPremiereで効率的に作業を完結させたいということがあります。


そんなときに大変便利なLumetriカラーが、新しい機能としてPremiere Pro CC 2015から登場しました。

Photoshopのようにできるだけ細かく補正したいというときにも役立つ機能です。


ウィンドウ>Lumetriカラーでウィンドウを表示します。

 

f:id:BOEL:20161115112714j:plain


Lumetriカラーには以下の項目があり、まるでPhotoshopのようで慣れたやり方で色補正が行えます。


基本設定


LUTの設定、ホワイトバランスやトーンの設定

 

クリエイティブ


LOOKの適用やシャープ・フェード、サイドの設定

 

カーブ


RGBカーブ、色相・彩度カーブを設定

 

カラーホイール


シャドウ、ミッドトーン、ハイライトの設定

 

HSLセカンダリ


カラー/ルミナンスキーを分離して二次カラー補正を適用するためのカラーツール

 

ビネット


エッジのサイズ、形、明るさを制御

 


次でよく使う項目をご紹介します。


Lumetriカラー「基本設定」

ここでは「露出量」で明るさを調整したり「コントラスト」や「ハイライト」「シャドウ」で 映像のトーンを決めていきます。


露出量


映像の明るさを調整できます。スライダーを右にするとハイライトが増え、スライダーを左にするとシャドウが強くなります。


コントラスト


コントラストの調整は動画のカラーのミッドトーンに調整がかかります。コントラストを上げると、中間から暗い箇所がより暗くなり、コントラストを下げると中間から明るい箇所がより明るくなります。


ハイライト


明るい領域を調整します。スライダーを左にドラッグすると、ハイライトが暗くなります。右にドラッグすると、ハイライトが明るくなるとともにクリッピング量が最小限になります。


シャドウ


暗い領域を調整します。スライダーを左にドラッグすると、シャドウが暗くなるとともにクリッピング量が最小限になります。右にドラッグするとシャドウが明るくなり、シャドウ部のディテールが再現されます。


白レベル・黒レベル


これはあまりなじみがないかもしれません。スライダーを調整して、ハイライトの増減やシャドウがより黒に近くに調整します。


彩度


動画の全体的な色の彩度を調整します。

 

f:id:BOEL:20161115112952j:plain


基本設定「LUTの設定」

 

色空間を変換するためのプロファイルです。
Logデータ(非圧縮データ)の出力をする際にカメラのイメージセンサーのスペックに近い形に復元できます。


基本設定>LUT設定のプルダウンから設定できます。


オリジナルでLUTを作成した場合は、LUT設定のプルダウンの「参照」からLUTファイルを読み込みます。


特に指定がなければ「なし」を設定します。

 

f:id:BOEL:20161115113023j:plain

 


Lumetriカラー「クリエイティブ」

「LOOK」をプリセットから選んで適用すると、プロが撮影したフィルムのように見せることができます。


「強さ」で適用の強弱も変えられるので、それぞれの動画に合った色味を設定できます。
色味を決めるというよりは、印象を決めるイメージです。


自然な彩度


全体的なカラーの彩度が最大値になるにつれクリッピングが小さくなり、彩度を調整します。この設定は、彩度が高いカラーへの影響を抑えながら、彩度が低いカラーの彩度を全て変更します。


自然な彩度を使うと、肌の色の彩度が極端に上がるのを調整することもできます。


彩度


動画のすべてのカラーの彩度を、モノクロ~彩度2倍の範囲で調整します。

 

f:id:BOEL:20161115113120j:plain

 

Lumetriカラー「カーブ」

映像全体の色味を調整できます。

Photoshopでいう「トーンカーブ」のようなものです。RGB カーブと色相/彩度の曲線を使用して、明るさとコントラストを調整します。


RGB カーブ


1.選択すると、赤、緑または青のカラーを調整


2.輝度を制御するマスターカーブ


3.クリックすると、コントロールポイントを追加


RGB カーブでは、カーブを使用するクリップ全体のルミナンスと階調範囲を調整できます。


マスターカーブでは輝度を調整します。


マスターカーブを調整すると、3つのRGBチャンネルの全てが同時に調整されます。


赤、緑、青それぞれのチャンネルのいずれかのみを選択して調整することもできます。

 

色相・彩度カーブ


1.クリックして、コントロールポイントを手動で追加


2.白い円を内側または外側にドラッグして、彩度を調整


色相・彩度のホイールでは特定の色相の彩度を増減することができます。


 

f:id:BOEL:20161115113247j:plain

 

さいごに

いかがでしたでしょうか。


今回後紹介した「Lumetriカラー」だけでも、細かいところまで色補正ができるようになると思います。


色補正をすることで、理想の映像に近づけられるため、どんどん試してみましょう。

vol.55 人気フレームワーク LaravelをMacにインストールするときの注意点

f:id:BOEL:20160930203836j:plain

こんにちは。エンジニアの毛利です。
Webサイトやアプリケーション開発にフレームワークを使うことがあります。

直書きでなんとかなってしまう分量であれば、あえて使う必要はないかもしれません。

ですが中規模・大規模プロジェクト、または長期にわたるプロジェクトで開発をする場合、フレームワークという決められた枠組みの中で開発を進めることで、記述コードの削減や、機能を効率よくまとめ、管理することができます。


また、枠組みを使うことでプログラムのセキュリティが担保できるなど、開発時間・作業工程の効率化や省力化する手段となります。

今回LaravelというPHPフレームワークに注目し、Macにインストールすることにしてみました。


その手順が私自身が使っているMacだと、スムーズに行かずインストール完了までが意外と複雑だったので、そのときの対策をご紹介します。


Larvalとは

オープンソースPHPフレームワークの一種です。


近年その人気が急上昇しており、すでによく知られているCakePHPSymfonyに並び、その人気度から将来的にはシェアがこれらを越え、世界的に標準になるのでは?と推測されています。


インストールする前に

テスト環境を構築するためにMacにインストールしていきます。

Mac OS 用パッケージマネージャー「Homebrew」というのを用いますが、Mac OS X Mavericks 10.9.5以下のバージョンからYosemiteにアップグレードした際に、「Homebrew」に不具合が出るケースがあります。


今回まさにそのケースにあたってしまいました。


まず「Homebrew」を使えるようにする必要がありました。

Macの環境は以下の通りです。

環境

OSバージョン:Mac OSX 10.11.6 El Capitan
本体:Mac Pro (Mid 2012)
※Mountain Lionから順にアップデートしていっています。

 

「Homebrew」の修復

エラー1

まず、brewコマンドを実行してみます。

$ brew update
コマンドを実行すると下記のエラーが出現します。

 

/usr/local/bin/brew: /usr/local/Library/brew.rb: /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby: bad interpreter: No such file or directory
Rubyへのリンクにエラーが出ています。これを修復するために下記ファイルを修正します。

 

$ vi /usr/local/Library/brew.rb
viエディタ、もしくはMacの標準appのテキストエディットで編集します。
viエディタで行う場合は下記コマンドを実行します。
1行目の

#!/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby -W0

#!/System/Library/Frameworks/Ruby.framework/Versions/current/usr/bin/ruby -W0
へ変更します。

 

エラー2

次にbrewを実行すると次のようなエラーがでます。

 

Homebrew requires Leopard or higher. For Tiger support, see:
https://github.com/mistydemeo/tigerbrew


このエラーを解決するためには下記を実行します。

 

$ git fetch origin master:refs/remotes/origin/master -n
$ git checkout origin/master -- Library/brew.rb


gitからリモートリポジトリの最新情報を取得し、チェックアウトします。
※gitをMacにインストールしている必要があります。

 

エラー3

次に出るエラーはパーミッション関連のエラーになります。

 

/usr/local/bin/brew: line 21: /usr/local/Library/brew.rb: Permission denied
/usr/local/bin/brew: line 21: exec: /usr/local/Library/brew.rb: cannot execute: Undefined error: 0


コマンドを入力してパーミッションを変更します。

 

$ chmod 754 /usr/local/Library/brew.rb


エラー4

次で最後のエラーです。

 

/usr/local/Library/brew.rb: line 1: syntax error near unexpected token '('
/usr/local/Library/brew.rb: line 1: `std_trap = trap("INT") { exit! 130 } # no backtrace thanks’


このエラーを解決するためには再びGitコマンドを使います。
ローカルリポジトリの内容をリモートリポジトリの内容に強制的に合わせるコマンドになります。

 

$ git reset --hard origin/master


これで全てのエラーをクリアしました。

 

Laravelのインストール準備

composerのインストール

Laravelのインストール準備をしていきます。
まず、PHPのパッケージ管理ツールをインストールします。

インストール方法は基本的に下記のサイトを参考にしています。
本記事ではMAMP環境にインストールする際のポイントを書いていますが、全体を網羅する場合は下記サイトも合わせてご確認ください。

[PHP]Laravel5をOS X(Mac)のローカルサーバーにインストールする | PHP Archive

 

$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer


パスを通します。

 

$ vi .bash_profile

 

#下記を入力し保存


export PATH=$PATH:/usr/local/bin

$ source ~/.bash_profile
$ composer -V
Composer version 1.2.0 2016-07-19 01:28:52


バージョン情報が返ってくればインストール完了です。

 

Laravelのインストール

Laravelをインストールします。今回はMAMPでの使用を想定しています。

MAMP & MAMP PRO

 

MAMP内のPHPを使うためにまずパスを通します。
PHPバージョンはMAMPのインストールバージョンや、使いたいPHPバージョンによって変更します。

 

$ vi ~/.bash_profile
#下記を追記し保存
export PATH=$PATH:/Applications/MAMP/bin/php/php7.0.10/bin

$ source ~/.bash_profile


次に最新版のLaravelのプロジェクトをインストールします。
本環境ではMAMPのドキュメントルートに設定しました。

 

$ cd /Applications/MAMP/htdocs
$ composer create-project laravel/laravel 名前 --prefer-dist


MAMPのドキュメントルート設定を「htdocs」し、
http://localhost:8888/名前/public
にアクセスすると下のようなスタートページが表示します。

f:id:BOEL:20160930212845j:plain


これでインストールが完了です。

 

まとめ

今回はLaravelのインストールより、Macチューニングの方が時間がかかりました。
修復に必要な参考サイトはたくさんあるのですが、本環境の場合で一通りの手順を網羅しているサイトがなかったため、今回の記事を書きました。
Laravelのインストールに限らず、HomeBrewを使う場合、今回のような修復が必要になる場合がありますので今回のTIPを参考にして頂ければ幸いです。

 

参考サイト
rubyパス関連(Yosemite以降)

Yosemiteでbrewが壊れた - Qiita

gitでファイル修復関連

Yosemiteで動かないHomebrewをgitコマンドで治す - Qiita

パーミッションシンタックスエラー関連

mac OS X でhomebrewがupdateできない - Qiita

総括

Yosemiteアップグレード後に発生したHomebrewのエラー対応(2015年9月版) - Qiita

Laravelのインストール

[PHP]Laravel5をOS X(Mac)のローカルサーバーにインストールする | PHP Archive