2016年09月

Eloquentのちょっと進んだ使い方

2016-09-12 16:28

先日はLaravelのORマッパーであるEloquentを単独でライブラリとして利用する方法について説明させていただきました。

今回は実際にEloquentを使ってモデルを作っていきながら、簡単な保存メソッドや取得メソッド、カスタムコレクションや、スコープ機能、リレーションの構築、Eager Loadingなど、Eloquentの基本的な使い方について説明をしていきたいと思います。

なお、Eloquentの公式マニュアルはこちら
日本語のマニュアルもありますが、英語のほうがマニュアルとしては使いやすかったです。
また、マニュアルには書かれていない便利なメソッドなどがあったりするので、
EloquentのAPIレファレンスも見ながら開発していくといいと思います。

前回に引き続き”MyLib”というライブラリを開発するという前提で話を進めます。

>>続きを読む

配色に悩んだときに見るサイト4選

2016-09-02 17:47

こんにちは!デザイン担当の望月です。

デザインをするにあたって必要不可欠な要素「配色」!
今回は、配色、キーカラー、などを決める際に役立ちそうな、
社内で話題にあがった便利ツールをいくつかご紹介します。

『coolors』

blog_mimg01

https://coolors.co/app

こちらは、キーカラーが決まっているときに活躍しそうな配色ジェネレーターです。

アクセスすると最初にチュートリアルがありますが、
ものすごーく簡単に訳すと

・「スペース」を押すと画面上の配色パターンが変わるよ!
・鍵アイコンを押すと、その色だけロックできるよ!
・カラーコード入力や、自分で調節することでも色を設定できるよ!
・画像から色を自動でピックアップすることもできるよ!
・配色の保存やユーザー登録もできるよ!(しなくても使えます)

……みたいなことだと思います。

まずはスペースを押しまくって色の移り変わりを楽しんでみましょう。
これだけでかなり楽しい!
カラーコードをただランダム表示するのではなく
綺麗な配色になるように調整されている気がします。

キーカラーを設定してロックしたら、
あとはエンターを押すだけで綺麗な配色を提案してくれるので、
とても便利です。

『Color of Book』

blog_mimg02

http://colorchart.jp/

書籍の表紙から色を抽出してくれるユニークツール!

本のタイトルを自分で検索することもできますし、
ファッション雑誌やスポーツ誌のカテゴリーから検索することもできます。
これって、自分が制作するページのターゲットユーザーに近しいカテゴリーから探せば、
その層に好まれる配色を研究できちゃいますよね。
なかなか奥が深いです。

抽出した配色はphotoshopのカラーパレット用データでダウンロードできるようです。

結構昔にリリースされたサイトのようですが、
AmazonやWikipediaから検索しているので最新の結果が表示されますよ。

書籍の発行時期でも絞り込みができるようになったら
季節のカラー的なものも研究できてさらに最高!など、夢を見てしまいました。

『NIPPON COLORS』

blog_mimg03

http://nipponcolors.com/

社内のデザイナーKさんが教えてくれた、
日本の伝統色を紹介してくれるオシャレなサイトです。

Firefoxではうまく表示されなかったので、
推奨されているSafariかChromeでの閲覧をオススメします!

違う色を選択したときの色の移り変わりや表現が美しくて、
間をデザインするのはさすが「和」だなー、なんて思いました。

和系のサイトや年賀状のデザインにうってつけのサイトだと思います。
デザイナーってプレゼン力いりますよね。
どういった意図でこの色を選んだのか、など伝統色の名前も交えて
説明できたらなんとなくカッコイイ!と、邪な思いが……。

ちなみに、右にある MUNSELL「ON OFF」 とあるボタンをクリックすると……?
これまたカッコイイ!です。

『Adobe Kuler』

blog_mimg04

https://color.adobe.com/ja/create/color-wheel/

最後は社内のデザイナー田中さんが教えてくれた、
色相環上で複数の色をピックアップし、配色を作成できるAdobeが公開しているツールです。

カラールールのカテゴリでポインタの動き方をある程度絞り込むことができ、
例えば「補色」を選択するとポインタの位置が対角線上に固定されて
彩度や明度のみが調節できるようになります。

かなり直感的な操作で
なんとなく淡めな配色、や
補色を使ってぱっきりした配色、
などのぼんやりした頭の中のイメージを形にしてくれますね。

なんのイメージも沸いていないときは「探索」で他のユーザーが作成した
パレットを見ることもできます。

また、CCアカウントでログインすると、
「保存」をぽちぽちっとクリックするだけで
photoshopCCにインポートすることができます!

まとめ

時間がないと、自分の頭の中の配色ストックを使いまわしてしまいがちです。

いつもと同じ、にならないようにこういった便利なサイトを使って
スピーディーにいいものを作っていければなと思います!

SASS(scss)の入門

2016-09-01 16:04

こんにちは。デザイン担当の田中です。
今回、SASS(scss)のついて簡単に紹介をしたいと思います

SASSとは

SASSとはcssを生成するための技術です。
SASSの機能を使うことで、効率よくcssを用意することができます。
SASSには「sass」と「scss」の2つの記述の仕方があります。
今回は「scss」です。

まず、コンパイルできる環境を準備

私は「Prepros」という無料で使えるソフトを使っています。
scssファイルが入っているフォルダをドラッグで登録して
scssファイルを編集・保存すると、自動で同じ階層にcssファイルが生成されます。
これだけです。
細かいPreprosの設定・使い方は省略させていただきます。
私の場合、Preprosインストールするだけでコンパイルできる環境が整うはずがうまくいかず、
Ruby・gemのインストールというステップを踏みました。
うまくいかなかったらこの辺を疑ってみてください。

scssの基本的な使い方

scssの場合、基本的にはcssと同じ記述をしますので導入をしやすいと思います。
scssの機能について少し紹介したいと思います。

■ネスト(入れ子)
構造が深くなってくると便利です。構造の変更、class名の変更等があっても一部を修正するだけで済みます。

scss

css

■変数を使う
下記のように「$」の後に名前を付けて値を入れるだけです。色やマージンなど、サイト内で使いまわすものは変数にしておけば管理が楽になります。

scss

css

■mixinを使う
mixinとは値を渡して(渡さなくても使えます)スタイルを返してもらうものです。
ベンダープレフィックスなど、スタイルをまとめたいときに便利です。
「@mixin 」の後に名前を付けて、引数を使う場合は「$」の後に名前を付けます。
呼び出すときは「@include 」の後にmixin名で呼び出せます。引数を使う場合、値を渡してあげます。下記の場合「45deg」を渡しています。

scss


css

■インポートを使う
変数・mixinの使い方を紹介いたしましたが、
これらは別ファイルにしてインポートしたほうが管理がしやすいです。
例えば、「top.css」「about.css」のように
ページ単位でcssを持たせる場合、共通で使いまわすことができます。
変数・mixinは呼び出される前に定義してある必要があるので、インポートする場合は最初にインポートさせておくと間違いないです。また、他の人が触るときにも分かりやすいです。

scss

最後に

今回紹介したのはSASSのほんの一部です。
配列を定義してeachで回すこともできたりします。
まだまだ便利な機能がありますのでチェックしてみてください。
最後に注意ですが、SASSを導入したらcssファイルを直接編集するのは厳禁です。
コンパイルしたら上書きされて消えてしまいます。
これだけ注意すれば間違いなくコーディングのスピードがアップしますので是非導入してみてください。
SASS(scss)の紹介でした。

2 / 212