男はやっぱり肉がすき

こんにちわ。
リエです。
先日毎年恒例のお花見BBQを大阪城公園でしました。
↓昨年の様子はこちら↓

お花見BBQをしました


 
候補日が2日あり迷っていたのですが、お天気と予約の関係で早い方の日に決めました。
その時はまだ桜はそんなに咲いてないかな〜と話していました。
ところが今年は全国的に桜の開花が早く、お花見当日はすでに満開で葉桜になりつつあるという状態。
遅い日だと確実に間に合わなかったので、この判断は大正解でした!
 
今年から大阪城公園のBBQエリアは全面有料化したので、わたしたちはお堀横のゾーンを予約しました。
テーマは和というこうことで、どんな感じなんだろうと思っていたのですが、たしかに和でした(*_*)
 
この日はお天気にも恵まれ、まさしくお花見日和でした❀
食材と飲み物をたくさん買い込みBBQスタート。
※食材と飲み物の持ち込みはOKでした。
 
それではBBQの様子を写真にてお楽しみください。
 

大阪城が見える絶好のロケーション\(^o^)/
 

厚切りベーコンにテンションが上がる男たち。
 

焼きリンゴが最高の焼き加減すぎて写真を取りまくる。
 
花粉症のメンバーはとてもつらそうでしたが、やはり外でみんなと食べるご飯は美味しいですね〜(*´∀`)♡
 
食べることに夢中であんまり桜を見ませんでした。。
やはりわたしは花より団子です・ω・
 
我が社のメンズ達もやはりがnikuが好きって感じでした。
 
桜よ、また来年会う日まで(^_^)/~


CSS変数(CSSカスタムプロパティ)を使ってみよう!

CSSで変数が使えると話題になってから久しいですが、いつの間にか対応ブラウザが増えてきました。

IE11が未対応なので使いづらいのですが、そろそろ、CSS変数(CSSカスタムプロパティ)に目を通しておいたほうがいいかもしれませんね!

CSS変数(CSSカスタムプロパティ)の基本的な使い方

:root {
    --base-color: #ffff00;
}

.content {
    color: var(--base-color);
}

上の例のように変数の先頭に「–」(ハイフン2つ)を付けます。
これで、変数の定義がされます。

「:root」内に変数を定義することで、cssを読み込んだ全ての要素で変数が使えるようになります。

 

変数を呼び出す時には、var()関数を使います。
「color: var(–base-color);」のように、指定した変数を()の中に入れるだけです。

See the Pen css 変数(1) by naoto saito (@code_ns) on CodePen.

テキストが青色になりました。
基本的な使い方はとてもシンプルですね!

CSS変数とメディアクエリ

変数のみなら、Sassでもいい気がするのですが、動的に値が変わるのもcss変数を書くメリットです。

下記の例は、幅400pxで2カラムと4カラムを切り換えています。
(別ウィンドウで確認してください。)

See the Pen CSS 変数(2) by naoto saito (@code_ns) on CodePen.

JSでの操作

Sassと違い、CSS変数であれば、JavaScriptで値を取得したり、変更したりできます。
下記の例では青色に指定したテキストをJavaScriptで変数を変更し赤色に変更しています。

See the Pen CSS 変数(3) by naoto saito (@code_ns) on CodePen.

 

この例だとテキストの色を1箇所変えるだけなので、メリットは感じられないかもしれませんが、次のように変更箇所が何箇所も出てくる場合に便利さを感じられるかもしれません。
(Choose a theme colorの右のボックスで色の変更)

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

 

このように、もしIE11で使えるようになったら、CSSの管理やJavaScriptとの連携が、さらに簡単になりそうです。

 


神山しずくプロジェクト – SHIZQ再び

こんにちわ。
リエです。
 
先日徳島県神山町へお伺いしましたが、なぜ神山町を訪問したかと言いますと、こちらのブログでご紹介しましたSHIZQさんへお伺いするためでした。

 
ちなみに弊社のメンバーは全員、SHIZQ鶴コップを使わせていただいております♡

スプラウトへ入社してくれてありがとう


 
SHIZQさんは、神山町の山や川を守るため、「木を使う」活動を始められて、その中で神山町の杉の新たな活用法を考え、杉の製品が生まれました。
それがSHIZQ製品です。
製品はウェブストアとお店で買うことができます。
お店は古民家を改築したおしゃれな佇まいです。

 
お伺いした時に、新メンバーのコップを選んできました。

 
ウェブストアで購入し、どんな模様のものが届くかワクワクするのも楽しいですが、実際に手にとって選べるのもとても楽しいです♪
でも一つ一つ表情が違うので、悩む悩む・・・。
これだ!というものを選び、会社に連れて帰ってきました(*´∀`)
新メンバーへの贈呈式(と言うほどそんなたいそうなものではないです)の様子はまた別ブログで書きたいと思います。
 
そして今回の訪問のもうひとつの目的である、昨年10月にオープンしました、SHIZQさんの木工所「SHIZQ LAB.」も見学させていただきました。

 
このLABで、SHIZQさんの製品は生まれます。
中は、木を切るための機械やろくろなど、たくさんの機械が置かれていました。
数ある杉の中から、選定されたSHIZQ製品になる杉たちも保管されています。
製品の工程作業や、杉の選定のお話しなどを聞き、たくさんの人の手が加わってSHIZQ製品は生まれるのだなと感慨深い気持ちになりました。
使っているSHIZQコップをより大事にしたいと思います。
 
SHIZQ様、本当にありがとうございました!
 
神山しずくプロジェクト
http://shizq.jp/
 
オフィシャルウェブストア
https://shizq.stores.jp/
 
〜SHIZQ GalleryShop情報〜
オープン時間:10〜18時
定休日:月曜
(小さなショップのため、事前にご連絡を頂けるとたいへん助かります)
場所:徳島県名西郡神山町神領本上角90 (キネトスコープ社に併設)
TEL:088-636-7292
FAX:088-636-7293
MAIL:info@shizq.jp
クレジットカードもご利用いただけます。
(VISA・Master Card・AMERICAN EXPRESS)


JuliaBoxではじめるJulia言語

Juliaとは

Juliaは2009年に開発の始まった比較的新しいプログラミング言語です。
Julia がどんな言語で何を目指しているのかについては、開発初期に書かれた「なぜ僕らはJuliaを作ったか」という文章が志高くてたいへん素晴らしいです。
たとえばこんな感じ。

僕らが欲しい言語はこんな感じだ。まず、ゆるいライセンスのオープンソースで、Cの速度とRubyの動的さが欲しい。Lispのような真のマクロが使える同図象性のある言語で、Matlabのように分かりやすい数学の記述をしたい。Pythonのように汎用的に使いたいし、Rの統計処理、Perlの文字列処理、Matlabの線形代数計算も要る。シェルのように簡単にいくつかのパーツをつなぎ合わせたい。チョー簡単に習えて、超上級ハッカーも満足する言語。インタラクティブに使えて、かつコンパイルできる言語が欲しい。

そしてネット上での評判を見る限りでは実際そのような言語になりつつあるようです。曰く、簡潔で書きやすく実行速度も速い。
中でも目立つのは数学系の方々による賞賛の声です。曰く、数式を直感的に扱えてパッケージもそこそこ揃っていて可視化も容易、そしてなにより高速。

現時点のバージョンは0.6.2で活発に開発が進められています。逆に活発過ぎて仕様が安定しないという面もあるようですが。

JuliaBox ですぐにはじめる

Julia を実際に使ってみる場合、もちろん自分のローカルな環境にインストールしても構いませんが、前述の通り開発が活発なため最新を追っかけるのはなかなか大変です。また、環境によってはインストールが難しい場合もあるようです。

そこで、入門の間はJuliaBoxを使うことにします。
JuliaBox はブラウザで利用できる Julia のインタラクティブな実行環境を提供してくれます。その時々の最新版を利用できます。
Jupyter Notebook と統合されているため、データ分析などのようにコードを書きつつ記録を残すような作業に非常に便利です。もちろんコードの断片を実行しながらJuliaを勉強するのにも使えます。

Google,GitHub,LinkedIn のアカウントを持っていれば JuliaBox はすぐに使い始められます。
ログインしてみるとチュートリアルのドキュメント群が既に用意されています。

チュートリアルに含まれるコードはその場で実行して結果を見ることができます。

グラフ描くのも簡単です。

また、練習問題を解くコードをその場で書いて実行することもできます。
自分で書いたコードを保持した状態でドキュメントを更新することができるので、まさに自分のノートを作っていく感覚でチュートリアルを進めて行けます。

JuliaでFizzBuzz

ある程度までチュートリアルを進めたところで、Hello World よりもうちょっと手の込んだものということで FizzBuzz を作ってみました。
といっても、チュートリアルの制御構造の節で FizzBuzz のコード(if..elseを使った普通の解き方)が出てきます。また、FizzBuzz でちょろっとググったら関数型らしい解法も見てしまったので、それとも違う解き方を考えないといけなくなってしまいました。
そこで作ったのが以下のコード。


function fizzbuzz(n)
    all = Dict(i => string(i) for i in 1:n)
    fizz =Dict(i => "fizz" for i in filter(x->x%3==0, 1:n))
    buzz = Dict(i => "buzz" for i in filter(x->x%5==0, 1:n))
    fizzbuzz = Dict(i => "fizzbuzz" for i in filter(x -> x % 3 == 0 && x % 5 == 0, 1:n))
    merge(merge(merge(all,fizz),buzz),fizzbuzz)
end

function print_fizzbuzz(fizzbuzz)
    for key in sort(collect(keys(fizzbuzz)))
        println("$key => $(fizzbuzz[key])")
    end
end

Dictionary を merge するときに重複するキーがあれば後の方の値が使われることは merge のドキュメントで確認しています。


n が大きくなると破綻するのでダメなコードではあります。マクロを使った遅延シーケンスのパッケージがあるようなので、それを使っての改良は今後の課題としたいと思います。


デザイナーでも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/