UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

いまさら人に聞けないmake入門

おはこんばんちは!! 尾藤 a.k.a. BTO です。

最近の若い人で Makefile を書く人が増えているそうじゃないですか。 そしたらもう、ウホ、これはオサーンの出番ってなるわけですよ。 僕みたいな老害はこんな場面でしか幅を利かせられないってことで、ええ、やりましたよ make 入門を社内勉強会で。

  • makeとは
  • 様々な実装
  • サンプル
  • ルール
  • やってみる
  • ファイルを一部だけ更新してみる
  • 変数
  • 自動変数
  • Suffix Rule(古い)
  • Pattern Rule
  • Phony Target
  • まとめ
続きを読む

さくっとレスポンシブの基本をおさえる

レスポンシブデザインのコーディングが難しくて、基本的なところはおさえておこうと思ったエンジニアの北畠です。

まず、レスポンシブデザインとは?

単一のWebページ(HTML)を使い、スクリーンサイズを基準にCSSを切り替えてレイアウトを調整する技術を使ったデザインです。

いつから始まったか?

2010年に イーサンマルコッテさんが記事を書いて広まったらしいです。

alistapart.com

概要としては、

  • 多様なデバイスが登場している。
  • それぞれのデバイスに合わせてコンテンツを作っていくのはかなり大変。

  • デバイスの仕様に合わせてレイアウトを調整する技術がある。

  • CSS2でもあったけど、CSS3から実用レベルで使えるようになっている。

CSS2のmedia typeは、デバイスの対応状況が悪かったりで、実用できるレベルではなかったようです。

レスポンシブ周りの技術として、

  • CSS3から使えるようになった media query
  • 画像の取扱(fruid, responsive)
  • グリッドレイアウト

あたりが重要な所とされています。 それぞれ見ていきましょう。

media query

CSS3から実装された、デバイスの表示幅などに応じて、読み込むスタイルシートを切り替えるものです。

linkタグにも書けるし、cssにも直接書けます。

linkタグに書くケース

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

CSSに直接書くケース

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

詳しくは、

メディアクエリの利用 - CSS | MDN

にかなり細かく説明されています。

画像の扱いについて

fruid image

画像をコンテンツ幅に応じて収縮させたい場合に使う技術.

imageにwidth: 100% を指定すれば実現できます。

そのままですね。

responsive image

スクリーンサイズに応じた、適切なサイズの画像を読み込む技術.

media queryとbackgroundイメージの組み合わせで実現できます。

例えば、PC用、スマホ用の画像をそれぞれ用意して、768px以下のデバイス幅の場合スマホ用の画像を読み込ませたい場合は下記のような指定をすれば実現できます。

div {
    background: url(background.png) top center no-repeat gray;
}


@media screen and (max-width: 768px) {
    div {
        background: url(background_mobile.png) top center no-repeat gray;
    }
}

また、background-sizeプロパティを使うことで、背景画像の表示方法を調整できます。

background-size - CSS | MDN

各デバイス幅ごとに細かく指定すると、少ない画像でもいい感じに調整できそうですね。

グリッドレイアウト

間隔や幅に規則性を持たせることができるもので、 おなじみのBootstrapでは、全体を12列に分割して、各デバイス幅ごとに要素に何列分割り当てるか指定することで、レスポンシブなグリッドレイアウトが実現できます。

デバイス幅の一定の間隔でいくつかブレークポイントが用意されていて、それぞれのブレークポイントごとに応じた指定を、

col-{ブレークポイント名}-{列数} という書き方で指定できます。

詳しくは、

getbootstrap.com

Bootstrapのバージョン4では、flexboxを採用していて、グリッドレイアウトの仕様もかなり変わっているようです。 指定方法がかなりシンプルになっています。

Grid system · Bootstrap

おわりに

レスポンシブデザイン周りの技術、全然キャッチアップできていなくてかなり苦手意識があったのですが、調べてみると技術的に重要な要素はそれほど多くなくて、割りとシンプルな気がしました。

ただ1つのhtmlで複数デバイスに最適化したデザインを実現すること自体は、以前のようなPC向けの幅決め打ちのデザインと比べてかなり複雑で、しっかり作り込もうとするとかなり大変になるなぁという印象は変わりません。がんばっていきましょう。

ハートビーツさんと合同勉強会してきたよ!

どうも、新人エンジニアのハトネコエです。

株式会社ハートビーツさんからお誘いいただき、
8/4(金)、株式会社ハートビーツさんとUUUM株式会社のエンジニアが集って合同勉強会をおこないました。

ハートビーツさんの技術ブログはこちら → インフラエンジニアway - Powered by HEARTBEATS

続きを読む

ロードバランサーって何?

ロードバランサーってあれでしょ?
いい感じに通信を分散してくれるんでしょ?

くらいの知識しかなかった執筆者、ハトネコエです。

ふわっとしすぎている知識から一歩進んで、もうちょっと詳細を知りたくなったので、
以前から気になっていた部分を調べ、社内勉強会で発表してみました。

〜〜お品書き(ここが謎だよロードバランサー)〜〜

  • 1. ロードってなに? 道?
  • 2. どんな仕組みで振り分ける先を決めるの?
    • 2-1. DNSラウンドロビン
    • 2-2. RFC 3484 に従ったクライアントに対して従来のDNSラウンドロビンは使えない
    • 2-3. コマンドで確認
    • 2-4. AWSのELBはどの仕組み?
  • 3. 複数のロードバランサを立てたとき、それらへの振り分けは誰がするの?
  • 4. データはどんな道のりでサーバーからクライアントに渡されるの?
  • 5. 専用の機械を使わなくてもロードバランサーって立てられるの?
  • おわりに
続きを読む

「メタプログラミングRuby」オススメです

こんにちは、タナカです。
夏は花火を見ながら飲むビールが最高ですね。

さて、本日はRubyをある程度使いこなせるようになった方へおすすめの「メタプログラミングRuby」を紹介したいと思います。

メタプログラミングRuby 第2版

メタプログラミングRuby 第2版

メタプログラミングとは?

そもそもメタプログラミングとは何でしょうか、本書籍には以下一文で説明されています。

メタプログラミングとは、コードを記述するコードを記述することである。

Javaのソースコード上で使用できるアノテーションや、C++のテンプレートのようなコードを思い浮かべるとわかりやすいかもしれません。
これらのように、プログラムの一部を自動生成するものをメタプログラミングと呼びます。

ただし、これらの場合はコードジェネレータやコンパイラを使ったものなので、「静的メタプログラミング」と呼んで本書籍では区別しています。
Rubyの場合は言語自体がメタプログラミングをサポートしていて自由度の高い事ができるため、「動的メタプログラミング」と呼んでいます。

Rubyのメタプログラミング

まずは、ソースコードを見ていただくのが早いと思います。

class Movie < ActiveRecord::Base
end

movie = Movie.create
# moviesテーブルにtitleカラムが定義されている場合
movie.title = “博士の異常な愛情”
movie.title #=> “博士の異常な愛情”

このコード上ではMovieクラスにtitleメソッドが定義されていないにも係わらずエラーにならず設定、参照できています。

エラーにならず動作するのは、Movieクラスで定義されていないメソッドが呼ばれた際に、method_missing()というメソッドが呼ばれるのですが、このメソッドをActiveRecord::Base上で定義してあるからです。
ActiveRecord::Baseでは、テーブルのカラム名に一致するメソッドが実行されたときにmethod_missing()を通して値が設定されるようになっています。

Rubyでは、メタプログラミングの技術でプログラムを動的に拡張することができます。
ActiveRecordをはじめ様々なgem等で、このような技術が利用されています。

書籍の構成

本書籍は2部+付録の構成になっていて、1部は以下の章で構成されています。

  • 1章 頭文字M
  • 2章 オブジェクトモデル
  • 3章 メソッド
  • 4章 ブロック
  • 5章 クラス定義
  • 6章 コードを記述するコード

この中から第2章のオブジェクトモデルを少し紹介したいと思います。

オブジェクトモデル

この章では、クラスやオブジェクトを動的に拡張する方法から、メソッド探索等Rubyの内部処理について学ぶことができます。

オープンクラス

オープンクラスとは、クラスをオープンしてその場で拡張できる技法のことです。
たとえば、Stringクラスを拡張するようなこともでき、以下のようにして文字列にメソッドを追加できます。

class String
  def to_alphanumeric
    gsub(/[-\w\s]/, “”)
  end
end#3, the *magic, Number*?”. to_alphanumeric
#=> “3 the Magic Number”

オブジェクトモデルの内部

オブジェクトモデルのメソッドや、インスタンス変数は以下のようにしてプログラム中で取得することができます。
また、RubyではJavaとは違いインスタンス変数は値が代入されるまで存在しないという特徴があります。

class MyClass
  def my_method
    @v = 1
  end
end

obj = MyClass.new
obj.class # => MyClass

obj.my_method
obj.instance_variables # => [:@v]
obj.methods.grep(/my/) # => [:my_method]


オブジェクトからは、classを通して、クラス定義を調べることもできます。

f:id:tnuuu:20170729235035p:plain

クラスの真相

Rubyではクラスはオブジェクトであるという特徴があり、Class.newで新しいクラスを動的に生成することもできてしまいます。

“hello”.class # => String
String.class # => Class

Class.instance_mothods(false) # => [:allocate, :new, superclass]

オブジェクトとクラスは以下の関係があります。

f:id:tnuuu:20170730000851p:plain

オブジェクトobjのclassはMyClassクラスであり、MyClassクラスのclassはClassクラスになります。
まだ、MyClassクラスのsuperclassはObjectクラスで、さらに、ObjectクラスのsuperclassはルートクラスのBasicObjectクラスです。 (図にはありませんが)

この関係を覚えておくとRubyの理解が深まると思います。

メソッドを呼び出すときに何が起きているの?

メソッドを呼び出すとRubyはまず「メソッド探索」を行い、次に「メソッドの実行」を行います。

メソッド探索

メソッド探索では「レシーバー」と「継承チェーン」の2つの考えを把握しておく必要があります。

用語 説明
レシーバ 呼び出すメソッドが属するオブジェクト
継承チェーン クラスからスーパークラス、スパークラスのスーパークラス、ルートクラスのBasicObjectまで通るクラスの道筋
メソッド探索 レシーバーのクラスに入り、メソッドを見つけるまで継承チェーンを登ること

以下はメソッド探索のイメージ図です。

f:id:tnuuu:20170730012156p:plain

矢印の1でレシーバーのクラスに入り、矢印の2で継承チェーンを登りメソッドを見つけます。

本書籍では、ほかにモジュールを組み合わせたパターンや、多重インクルード時のメソッド探索についても解説されています。

なお、継承チェーンの内容はancestorsメソッドで確認することができます。

MySubclass.ancestors # => [MySubclass, MyClass, Object, Kernel, BasicObject]

メソッドの実行

メソッドを実行する際は、まずメソッドが呼び出されているオブジェクト(レシーバ)が何なのかを意識する必要があります。 以下の例は、レシーバであるobjがselfになること、レシーバを明示していないmy_methodメソッドのレシーバがobjになることを表したものです。

class MyClass
  def testing_self
    @var = 10 # selfのインスタンス変数
    my_method # self.my_methodと同じ
    self
  end

  def my_method
    @var = @var + 1
 end
end

obj = MyClass.new
obj.testing_self # => #<MyClass:0x007f93ab08a728 @var=11>

まとめ

今回紹介した内容は本書籍の内容のごく一部です。
次の3章では動的メソッドを利用して重複コードを排除する方法、2部ではRailsにおけるメタプログラミングについて解説されていて、いずれも興味深いものです。
Rubyについて深く理解するためにも、メタプログラミングRubyはぜひオススメです。

API BluePrintで定義ファーストなAPI開発

こんにちは、エンジニアのナカハシです。

隠れドラゴンズファンなので久々に観戦に行ったら、10点差を追いつかれてサヨナラ負けしました。世知辛いにもほどがありますね!!!!!!!(怒)(泣)


サーバーサイドとフロント/アプリを別チームで開発するといったケースでは、互いのシステムのインターフェイスはAPIになります。なので、API定義の共有は重要です。

APIのドキュメンテーションやチーム開発を支援する、API BluePrintについて、色々試してみました。

続きを読む

4000以上のチャンネルを支えるデータ解析基盤をBigQuery, Go, embulk等で整備した話

nazoです。

UUUMでは2017年3月時点で4000チャンネルを抱えており、日本最大のマルチチャンネルネットワーク(MCN)となっております。

これだけのチャンネル数があり、さらに多くのチャンネルは毎日のように動画を投稿しており、1日に増える動画の数だけでも相当な数になっています。

以前はこれらのデータの取得をPHPで行っていたのですが、最近Goによる新システムの運用を少しずつ始めており、大きな変化が生まれています。 今回はそのあたりについて解説したいと思います。

続きを読む