私が愛してやまないSassの関数5選


Sassの関数には数値や文字列を操作するものもありますが、私が愛してやまないのは専ら色を操作する関数たちです。
どのような関数か、といった解説は今更感が半端ではないため割愛させていただきます。

rgba

CSSでは16進数での色指定ができませんが、Sassではできます。地味に便利です。
また変数での指定もできるため、単に透明度を上げたい時にもよく使います。

Sass
.button {
  background-color: blue;

  &.disabled {
    background-color: rgba(blue, 0.25);
}
CSS
.button {
  background-color: blue;
}

.button.disabled {
  background-color: rgba(0, 0, 255, 0.25);
}

lighten, darken

メインカラーの明度だけ調整したサブカラーを作りたい、といった時に使います。

Sass
.button {
  background-color: blue;

  &:hover {
    background-color: lighten(blue, 20%);
  }
CSS

.button { background-color: blue; } .button:hover { background-color: #6666ff; }

saturate, desaturate

こちらは明度ではなく彩度を変更する関数です。
同系色のバリエーションは明度を変える方が作りやすいですが、こちらも時々使用します。

Sass

.button {
  background-color: blue;

  &.secondary {
    background-color: desaturate(blue, 90%);
  }
CSS
.button {
  background-color: blue;
}

.button.secondary {
  background-color: #73738c;
}

scale-color

上記を含めたあらゆる色の値を操作できます。
全てこの関数に統一してしまうのも良いかもしれません。

Sass
.button {
  border: 1px solid blue;
  background-color: scale-color(blue, $lightness: 80%, $saturation: -50%);
}
CSS
.button {
  border: 1px solid blue;
  background-color: d9d9f2;
}

complement

指定した色の補色を返します。補色のアクセントカラーを入れたい時に便利です。

Sass
.button {
  background-color: blue;
  color: complement(blue);
}
CSS
.button {
  background-color: blue;
  color: yellow;
}

私がSass(CSSプリプロセッサ)を初めて導入した時に最も感動したのは、長期にわたって運用されるWebサイトにおいても、デザインの一貫性が保ちやすくなったことです。

jpgの画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

そういう残念な状況を見なくなったことの喜びを噛み締めていたら、無性にガリガリ君が食べたくなった為これで終わりにします。

ご愛読ありがとうございました。俺たちの戦いはこれからだ!


Mobile VR Jam in Tokyo に参加してきました


概要

Mobile VR Jam in Tokyo

Mobile VR ヘッドセット(モバイル端末を利用するタイプのヘッドマウントディスプレイ)向けのアプリケーションを開発する30時間のハッカソンです。

場所はドワンゴさんのセミナールーム(銀座松竹スクエア13F)で開催されました。
協賛はmerge社さん。
普通は賞金などは出ない(らしい)のですが、今回は最優秀作品には賞金がでるとのことで、若干色めき立ちました。

参加チームは6チーム、1チーム5人の30人くらいの予定でしたが、雨の影響か7割くらいしかいなかった気がします。
チームは運営の人が事前のアンケート内容を考慮して割り振ってくれていました。

スケジュール

内容
8月27日(土) 10:00 会場オープン
11:00〜 Mobile VR Jam スタート
8月28日(日) 〜17:00 Mobile VR Jam 終了
17:00〜 発表会

Mobile VR Jam とは?

おおよそ Global Game Jam の Mobile VR 版だと理解していただければよいのですが、ゲームに限らずさまざまなアプリケーションやツール・サービスなどを開発いただいてもOK

Global Game Jam とは?
ハッカソンって何?

ハッカソン歴

自身としては3回目のハッカソン参加となります。
過去に参加したハッカソン
Hack Day 2016 (Yahoo!さん主催)
Japan VR Hackathon (MoguraVRさん主催)

チーム編成

・Oさん Unity歴2年。仕事でバリバリUnityを使った開発をしている。
・Hくん 大学生でUnityを趣味で触ってる。
・自分 Unity歴1年くらい。仕事でちょろっとだけ触ったこともある。

以上の三人

人が多くいると作業の分担などできて完成度も高くなる、と思うかもしれませんが、30時間という制限の中で企画、設計、開発となると3人くらいが丁度良かった気がします。
欲をいえば3Dのモデリングができる人が欲しかった。

ハッカソンやゲームジャムでは企画する時間も当然ながら作業時間に含まれているので、アイデアがまとまらないで時間が過ぎていくのは致命的です。
開発も企画もスピードがとにかく大事です。
細かいことは後!!まずは手を動かす!!
これは仕事にも言える。

そういえば昔は自分も3人のチームでゲーム開発してたなぁ…(遠い目)

企画/アイデア

すんなり1時間くらいで企画の大枠が固まり、モバイルVRで脱出×ホラーゲームを作成することに、、、!

アイデアはこんな感じ
・ゲームがはじまるとプレーヤーは真っ暗な部屋にいる
・唯一最初に持っているのはペンライトだけ
・ペンライトで照らして部屋を見渡す(360度ぐるぐる動かす)
・ペンライトの明かりは段々弱くなってくる(時間がなくなると心拍音が大きく強くなる)
・ペンライトの明かりが完全になくなって真っ暗になる前に外に脱出する
・部屋にある鍵を見つける
・鍵で部屋の扉の一つを開く
・別の部屋に移動する
・謎のうめき声が聞こえて来るのでその声から逃げる
・不安感を煽るBGMと効果音で演出を盛り上げる

とりえあえずはアセットストアで雰囲気にあう素材を手分けして探す…
https://www.assetstore.unity3d.com/en/#!/content/21789
有料ですがこちらのホラーゲームで使える音のアセットを購入して使うことに。

こちらの音を聞いてグッドイメージが固まりました。
ホラーコンテンツ作るなら音の素材は超重要!今後もどっかのハッカソンで使えそうです。

自分以外のメンバーはホラーゲーム作ったことあるようで、他にもいくつかすでに持っている素材を持ち寄って早速開発に着手!

開発

開発の様子は長いので割愛

今回の開発で得た知見

・Mobile向けのVRにはMobile向けの素材を使わないと処理落ちしまくります。素材はできる限りローポリで。アセットストアにある素材はMobile向けに作られていないのでそのままでは全然使えない。
・オブジェクトを纏めてMeshを1つに扱えるEditor拡張(MeshCombiner)は使える。テラシュールブログに記事があります。
・ライティング貼ったステージ素材のビルドが超重い。(1時間とか平気でかかる)
・設定でライティングをリアルタイムレンダリングじゃなくすればビルドがかなり短くなる
Unity->Window->Lightingで設定可能
・PCで動いてもMobileでは全然予期した動作にならない事態多発!こまめに実機で確認したいところ。(PCでは動いていたが、デモ用にビルドしたら特定のイベントが発火しないバグ)

結果発表

試遊会で動作しなかった事もあり、あえなく撃沈しました。次回(あれば)必ずリベンジしたい。。。
優勝はVRでRPG/アクションゲームを作ったチームでした。
このチームは素直に完成度が高かったです。無念。。。

まとめ

ゲームジャムやハッカソンは都内では頻繁に開催されているので、興味があれば一度参加してみるといいと思います。
エンジニアやデザイナーの参加が多いですが、基本的にはその分野に興味があれば誰でも参加可能なイベントが多いようです。
勿論、学生もOKです。学生オンリーのハッカソンイベントもあります。

素材探しやストーリー作成、デバッグ、発表会用の資料作成などいろんな参加の形態があるので、プログラムできない、絵もかけないという人も是非参加してみてください。
プログラミングでわからないことがあれば他のチームの人でも丁寧に教えてくれる人が多いです。

他のチームが作ったものを体験したりするのも楽しいですし、なにより、ここで一緒に開発をしたメンバーは戦友みたいなものなので、その後飲みに行ったりするのもまた楽しいです。


【WordPress】「get_posts」関数を使ってみた


はじめまして!社会人2年目エンジニアの関です!
今回は、WordPressで開発をする上でなくてはならない「get_posts」について簡単に説明していきたいと思います。

はじめに
get_postsって実際どんなときに使えばいいの?というと、

get_posts の最も適切な使い方は、パラメータに基づいて投稿データの配列を作成することです。最近の投稿あるいはパラメータに一致した投稿を取得します。
参照:WordPress Codex テンプレートタグ/get posts

だそうです。

この条件で記事を取得してきたい。
でもSQLを書くのは苦手。負荷もSQLインジェクションも気になる。
という人にぜひオススメしたい関数です。

続きを読む


AWS Lambdaを使ってEC2インスタンスを起動・停止する


リンクバルの川畑です。AWSのEC2インスタンス上にある開発環境など、営業時間外は誰も使用しないので停止して少しでも費用を抑えたいところです。この課題を解決するために、AWS Lambdaのスケジュール機能を利用してEC2インスタンスの起動・停止する検証をしました。

AWS Lambdaのスケジュール機能の良いところ

個人的にAWS Lambdaを使いたいから。。。というのもあるのですが、実際にAWS Lambdaのスケジュール機能を利用するメリットとしては次のポイントが挙げられます。

続きを読む


【テックリンク】「平日の夜1時間で学ぶ!Ruby on Rails初心者ハンズオン」開催しました!

テックリンク_平日の夜1時間で学ぶ_RubyonRails初心者ハンズオン

エンジニア向け勉強、「テックリンク」の第1回「平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン」を、2016/8/19(金)19:00-21:00 株式会社リンクバル本社にて開催いたしました。

講師を勤めさせていただきました、新規サービス開発チーム エンジニア リーダーの中村です。

20名を超える大勢の皆さまにお越しいただきました。ありがとうございました!

どのような勉強会か

概要

「Ruby on Rails初心者ハンズオン」

金曜日の夜にRailsを学ぼう!

WEBサービス開発が容易なRubyonRails、この機会に学んでみませんか? 一緒に学ぶ仲間もできるかもしれません。

複数のrails経験者がサポートします!

参加資格

RubyonRailsを学びたい方なら誰でも参加OKです。

ハンズオン内容

  • Railsを選択するメリット/デメリット
  • 新規事業におけるrailsの導入事例
  • RubyonRails開発環境セットアップ(クラウド利用予定)
  • HelloWorld!
  • scaffoldを利用した開発

タイムテーブル

  • 18時300分 受付開始!
  • 19時00分 railsハンズオン
  • 20時15分 懇親会
  • 21時00分 解散

勉強会スライド

テックリンクとは

人とアイデアで世界をつなぎ社会を幸せにする未来創造企業「リンクバル」が、八丁堀のオフィスで開催するエンジニア向け勉強会です。

勉強会や懇親会を通して、エンジニア同士のつながりを広げて参ります。

リンクバルエンジニアの関心ごと

RoR/objective-c/AWS/React.js/git/AI/チャット/MachineLearning/エンジニア主導の自社サービス

おわりに

テックリンクではこれからも、エンジニアの興味があるテーマに関する勉強会を開催する予定です。

イベント参加ご希望の方、ご登録お待ちしております!

テックリンクの最新情報は、conpassにて発信して行く予定です。

リンクバルはRuby on Railsを使って自社サービスを一緒に開発するエンジニアを積極募集中です。まずは弊社のエンジニアとランチで相互理解を深めるところから始めることも可能ですので、こちらよりご相談くださいませ。よろしくお願い致します!

関連リンク


元オンプレ系インフラエンジニアから見たAWSについて


みなさん初めまして!リンクバルでエンジニアをしている高島です。

私は過去オンプレミスシステム(以降オンプレ)のインフラ部分の設計・構築・運用に携わってきましたが、リンクバルではパブリッククラウドの最大手Amazon Web Serviceを利用して各種サービスを運用しています。
オンプレとクラウドのメリ・デメ比較については多くの技術サイトで語りつくされていると思いますのでそちらにお任せし、ここでは元オンプレ系インフラエンジニアの目線から衝撃を受けた点を挙げていきたいと思います。

(1)サーバ立ち上げまでのセットアップ時間が10分以内!!

AWSのコンソールからEC2の立ち上げを行うのに必要な時間は10分以内(!!)です。
これはずっとメディアからOSをインストールする環境で仕事をしてきた者としては驚異的でした。
オンプレでもVMWare、Hyper-Vなどの仮想化技術を利用し一度作成したイメージから2台目以降を複成することは可能ですがAWSでは用意されたAmazonマシンイメージ(以降AMI)を利用することで1台目から素早く立ち上げることが可能です。
また、このAMIはAmazon以外にも各社・各団体も提供しており無数に存在します。
これらを柔軟に利用することで非常にすばやくシステムの立ち上げが可能です。

(2)HWをまったく意識せず構成が可能

AWSに限らず、クラウドコンピューティングでは物理的なHWが隠蔽され、利用者側は全く意識することなく必要なリソースを必要なだけ借りられるというメリットがあります。
オンプレでも複数のサーバHWを共有ストレージに繋ぎこみ、仮想化技術を持ちいてHW間のノード移動させることは可能ですが、オンプレはあくまで手元にあるHWの制約を受けるためクラウドに対し柔軟性が劣ります。
また、AWSでは作成したAMIやスナップショットを同一AZ内において自由に扱うことが可能です。
これはテープ装置やストレージ間レプリケーションを用いてバックアップ・復旧の運用設計をしてきた者としては非常に素晴らしい仕組みと感じました。

(3)IOPSに対しての課金

AWSではストレージ、NW、ロードバランサなどで発生するIOPSに対して課金が発生します。
また、デフォルトの帯域に不満があればコストを掛けることで増強することが可能です。
オンプレでDBサーバやバッチサーバのIOPS周りの速度に頭を悩まされてきた者としてはこの仕組みは衝撃的でした。
コストを掛けただけ性能が上げられる仕組みのため、柔軟性が非常に高いと思います。
ただし、オンプレのように手元にある機器を好きなだけ使えるわけではなく、使った分がコストになるため思考の転換が必要となります。

まだまた語りつくせないところではありますが、今回はここまでとさせていただきます。
ここまで読んでいただきありがとうございました!

リンクバルではクラウドの経験が浅い人でもさまざまな経験を経ることでスキル習得が可能です。
オンプレミス環境が恋しい気持ちもありつつ(笑)も、クラウドコンピューティングの成長性はとてもよい技術的刺激になると考えています。
AWSの経験を積みたい方、是非ともリンクバルへよろしくお願いします!!


AWSの運用自動化サービス Cloud Automator で”攻め”のシステム運用 AMIMOTO スタック編 レポート


リンクバルの川畑です。先日サーバワークス様・デジタルキューブ様主催の「AWSの運用自動化サービス Cloud Automator で”攻め”のシステム運用 AMIMOTO スタック編」に参加しましたのでその内容をまとめました。

AWSの運用自動化サービス Cloud Automator で”攻め”のシステム運用 AMIMOTO スタック編

デジタルキューブ 小賀 浩通 / 堀家 隆弘 / 岡本秀高(40分+質疑応答)

はじめに

続きを読む