私が愛してやまない用途不明のFont Awesomeアイコン5選


近頃Font Awesomeを利用することが多いです。
適当なアイコンは無いかとリストを眺めていると、妙に心惹かれるアイコンを見かけます。
でもそういうのに限って、ピクトグラムとしての使い道はなさそうです。
そんな謎アイコンたちの中から、私のお気に入り5つをご紹介という誰得エントリーでございます。

※fa-○○というのは、HTML上でアイコンを指定するためのクラス名です。

fa-fighter-jet(戦闘機)

fa-fighter-jet

使用するシーンは、あまり思い浮かびません。
でも見た目はかっこいいです。そしてcssのクラス名もかっこいい。

fa-space-shuttle(スペースシャトル)

fa-space-shuttle

何か宇宙的なコンテンツに使えるかもしれません。
これと似ているfa-rocket(ロケット)は、より抽象的かつ可愛いデザインで好きなのですが
今回は、より使いづらそうなこちらを選びました。

fa-hand-spock-o(スポックの手)

fa-spock-o

『スタートレック』に出てくる、バルカン星人の挨拶で「長寿と繁栄を」という意味だそうです。
日本では一般的に通用するものではありませんね。
spockというのは登場人物のバルカン星人、ミスタースポックのことです。

fa-bomb(爆弾)

fa-bomb

何かしら使い道がありそうだけど、私はまだその機会に恵まれておりません。
見た目的には一番のお気に入りです。かわいいですね。

fa-lemon-o(レモン)

fa-lemon-o

個人的には、これが一番意味不明です。
なぜレモンなのか。よく見ると少し歪んだ形をしていることが分かります。
サイズが小さすぎると、レモンの絵であることすら分かりづらいです。
色を付ければもっとレモンっぽくなるのでしょうが、-oが付いている通り線画なので「塗り」がありません。


以上になります。
最後になりますが、私の好きなガリガリ君の味は「梨」です。
ありがとうございました!


VagrantとAnsibleを使ってサーバ構築自動化!


リンクバルの川畑です。リンクバルでは各自PCでローカルに開発環境を構築して開発をしております。環境構築手順書なるものはあるのですが、環境構築が自動されていないので新しく加わってくれたメンバーは開発環境構築に苦戦を強いられているような気がしております。それを改善するため、Vagrant+Ansibleで環境構築を自動化して簡単に共有できないか検証しました。

Vagrantとは

  • Vagrantは仮想環境構築ツール
  • 主に仮想化ソフトウェア(VirtualBox・VMWareなど)およびIaaS(AWS・GCPなど)上での環境構築時に使用
  • 数行のコマンドで仮想環境が構築できるので、環境の共有が簡単

Ansibleとは

  • Ansibleは構成管理ツール
  • 主にOS上のミドルウェア(Nginx・MySQLなど)のインストールおよび設定などの構成管理に使用
  • SSHで接続できるサーバであればリモートでも構成管理ができ、エージェントレスで便利

実際の手順

  • VagrantとAnsibleはインストールされていることが前提
git clone https://github.com/mkawabata-linkbal/vagrant-virtualbox-ubuntu.git
cd //github.com/mkawabata-linkbal/vagrant-virtualbox-ubuntu.git
vagrant up

コードはこちら

https://github.com/mkawabata-linkbal/vagrant-virtualbox-ubuntu

おわりに

リンクバルはサーバエンジニアを積極募集中です。興味のある方は、ご応募ください。もちろん、社内の人間と面識があるのでしたら、直接にご連絡いただいてもかまいません。


黒(偽)革の手帳~ITアレルギーな私のWEB部奮闘記~


こんにちは。
リンクバルの山本(♀)です。25歳です。

リンクバルの看板商品「街コン」のイベントプランナーでしたが、ひょんな事からリンクバルのシステム系の部署であるWEB部に異動となり、今はシステム開発のディレクターになるべく修行中です。

私、ITたるものにアレルギーをもっています。
「ヤバイ」と思って勉強しようと思ったこともあったのですが、トライ&エラーの繰り返しです。
理由としましては、根性があまりないほかに、「~入門」「初心者のための~」が読めないからです。もうお手上げ状態です。
こんな私ですが、今日からリンクバルWEB部の日常をたくさんアップしていきます。
どうぞ、お付き合いください。

リンクバルWEB部はこんな感じ。
IMG_20160829_115459 (2)
よく見ると赤く〇がついているでしょう?
そこが私の席。エンジニアの中に、ポツン。
何であなたがいないかって?
撮影者が私だからです!

現在はWEB部の事務系の仕事をこなしつつ、IT用語の勉強中。
仕事をしながら、勉強なんて偉いね~ですって?
いやいや、とんでもない。日々の仕事でもうクタクタですよ。
私、あまり根性が無いので、頑張ることには限界があります。
私の長所は、自分の限界を知っていること。

そんな私の為に活躍中なのが、黒(偽)革の手帳。
IMG_20160829_124247 (4)

いつも持ち歩くこの手帳に、分からないIT用語を全て書きなぐり、スキマ時間に見て、覚える、といった勉強をしています。
私のような(あまり根性のない)方にオススメです。
IMG_20160829_125322 (1)

時々お買い物リストになったりもする。
IMG_20160829_150051 (1)

効果はどれくらいかというと・・・よく分かりませんね。
こんな私ですが、どうぞよろしくお願いします。

では、今日はこの辺で。


NewRelicのTransactionTrace機能がとても便利な件


NewRelicの便利な機能を紹介します

NewRelic公式サイト
https://newrelic.com/

このAPMの「Transaction Trace」というAPMのPro版の機能がソースコードのメソッド単位でレスポンスタイムが分かるので、サイトのチューニングやボトルネックを発見するのにとても役に立ったことがありましたので、記事にさせて頂きました。

ライセンス料金
https://newrelic.com/calculator

Transaction Trace
TransactionTrace

Transaction Trace Detail
TransactionTraceDetail

このような具合でソースコード単位でボトルネックになっている箇所を見つけ出し、
パフォーマンスのチューニングをすることができます。
またデータベースで実行されたクエリを確認することもできます。

最後に
もしサイトが重く悩んでいましたらNewRelic APM Pro版を導入してみるのも良いかもしれません。
フリーで登録後、14日間はPro版をトライアルできるようですので、NewRelicの導入がまだの方は試してみてはどうでしょうか。


私が愛してやまない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の画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

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

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