読者です 読者をやめる 読者になる 読者になる

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

vol.53 撮影がもっとスムーズになる! 撮影前準備のポイント

f:id:BOEL:20160810194858j:plain

こんにちは、アシスタントディレクター兼エンジニアの富澤です。
近年、映像制作をするために必要なプロユースのビデオ機材や編集ソフトなどが比較的安い値段で購入できるようになり、 個人でもプロに近いクオリティで映像制作をすることができるようになりました。
「やっぱり自分自身で映像制作をしてみたい」という人は多いのではないでしょうか。

そこで今回は、スムーズな撮影を行うための準備についてご紹介します。

 

撮影前準備

撮影前準備とはいっても何をしたらいいか、わからない人も多いと思います。

どんな映像を作るか、ストーリーや絵コンテの作成、ロケーションハンティング、撮影許可の申請、機材準備、 スケジューリング、場合によってはキャスティングなど、これらすべてを撮影前に準備、計画します。

映像制作というと撮影や編集に目を向けがちですが、撮影前準備は作品のクオリティに大きく左右します。

撮影前準備においてとくに大切なのがロケーションハンティングです。

 

ロケーションハンティング

ロケーションハンティングとは、「ロケハン」と略されることもある、撮影場所を下見したり、場所を探すことをいいます。

実際に撮影をする場所に行きテスト撮影を行うことで、撮影本番に向けてより具体的なイメージをもつことができます。
また撮影をする上で必要な道具がその場所に揃っているかを確認することで、事前に用意が必要なものがわかります。

 

とくに大切なのはロケハンを行う場所の太陽光の確認をすることです。
屋外であれば日差しがどの角度で入ってくるか、木漏れ日がどれくらいあるかなど同じ被写体を撮影した映像でも、光量や光のあたる角度によって全く印象の違う映像になるからです。
とくに屋内の撮影では施設により太陽光の入る時間や入り方が異なるため、
そのシーンに一番適した時間を見ておく必要があります。

 

質の高いロケハンを行うために、前もってやっておきたいことがあります。
それは絵コンテの作成と撮影場所の撮影の許可を取ることです。
次はこの2つについて説明します。

 

そもそも絵コンテとは

 

f:id:BOEL:20160810194321j:plain

絵コンテとは、制作する映像の流れをイラストや写真におこした、いわば撮影における設計図です。
シーンの順番や構図を決めることで自分の頭の中を整理することができます。
また映像に人物を入れて撮影を行う場合、役者とイメージを共有する必要があるためにもとても大切なことです。

この他に、より具体的に映像の流れをアニメーションで設計する「ビデオコンテ」というものもあります。
実際にそのシーン内でどのようにカメラを動かすか、尺の長さなどをアニメーションで作成しておくことで、より具体的なイメージの共有ができます。

 

撮影許可を取ろう

撮影を行う場所や施設によっては自治体や管理者、警察署などの許可が必要な場合があります。
撮影する場所を決める前に、場所を案内しているウェブサイトなどをあらかじめ調査し、必要であれば管理している自治体や警察署に連絡しましょう。 撮影許可が必須な場所は無許可、無連絡だと、他の撮影者とのトラブルになる可能性があります。

とくに法人として映像制作をする場合には注意が必要です。
許可が必要と知らずに撮影を行い、映像を公開してから法的なトラブルになる問題を未然に防ぐためです。

 

海、川など、国や公共団体が管理している場所で撮影を行う場合には、管理している自治体に連絡をします。
街中の施設などで撮影を行う場合にも許可が必要になる場合があるため、施設を管理している管理者へ確認することをおすすめします。

基本的には連絡し、申請書を提出すると許可がおります。場所によっては複数箇所への連絡と申請書の提出、許可が下りるまでに数週間かかる場合もあります。
また道路での撮影を行う場合には、その道路を管理している管理者と警察署に連絡をする必要があります。

 

まとめ

いかがでしたでしょうか。
今回は撮影前準備のとくにロケハンについてご紹介しました。
絵コンテを作成し撮影許可を取ってからロケハンで撮影本番のためにテスト撮影するのは、
面倒で大変だと感じる人もいると思います。
それでもスムーズな撮影の進行をするためにロケハンをすることはとても大切です。
自分で映像製作をする際はぜひこのtipsを参考にしてみてください。