UUUM攻殻機動隊(エンジニアブログ)スマートフォン用の表示で見るUUUM攻殻機動隊(エンジニアブログ)UUUMのエンジニアによる技術ブログです2017-08-25さくっとレスポンシブの基本をおさえるレスポンシブデザインのコーディングが難しくて、基本的なところはおさえておこうと思ったエンジニアの北畠です。レスポンシブデザインとは?単一のWebページ(HTML)を使い、スクリーンサイズを基準にCSSを切り替えてレイアウトを調整する技術を使ったデザインです。イーサンマルコッテさんが記事を書いて広まったらしいです。多様なデバイスが登場している。それぞれのデバイスに合わせてコンテンツを作っていくのはかなり大変。デバイスの仕様に合わせてレイアウトを調整する技術がある。CSS2でもあったけど、CSS3から実用レベルで使えるようになっている。typeは、デバイスの対応状況が悪かったりで、実用できるレベルではなかったようです。responsive)グリッドレイアウトあたりが重要な所とされています。それぞれ見ていきましょう。queryCSS3から実装された、デバイスの表示幅などに応じて、読み込むスタイルシートを切り替えるものです。linkタグにも書けるし、cssにも直接書けます。MDNにかなり細かく説明されています。指定すれば実現できます。queryとbackgroundイメージの組み合わせで実現できます。PC用、スマホ用の画像をそれぞれ用意して、768px以下のデバイス幅の場合スマホ用の画像を読み込ませたい場合は下記のような指定をすれば実現できます。}}また、background-sizeプロパティを使うことで、背景画像の表示方法を調整できます。MDN各デバイス幅ごとに細かく指定すると、少ない画像でもいい感じに調整できそうですね。おなじみのBootstrapでは、全体を12列に分割して、各デバイス幅ごとに要素に何列分割り当てるか指定することで、レスポンシブなグリッドレイアウトが実現できます。いう書き方で指定できます。詳しくは、getbootstrap.comBootstrapのバージョン4では、flexboxを採用していて、グリッドレイアウトの仕様もかなり変わっているようです。指定方法がかなりシンプルになっています。Bootstrapおわりにレスポンシブデザイン周りの技術、全然キャッチアップできていなくてかなり苦手意識があったのですが、調べてみると技術的に重要な要素はそれほど多くなくて、割りとシンプルな気がしました。1つのhtmlで複数デバイスに最適化したデザインを実現すること自体は、以前のようなPC向けの幅決め打ちのデザインと比べてかなり複雑で、しっかり作り込もうとするとかなり大変になるなぁという印象は変わりません。がんばっていきましょう。11:00さくっとレスポンシブの基本をおさえるTweetコメントを書くもっと読む2017-08-09ハートビーツさんと合同勉強会してきたよ!インフラどうも、新人エンジニアのハトネコエです。株式会社ハートビーツさんからお誘いいただき、8/4(金)、株式会社ハートビーツさんとUUUM株式会社のエンジニアが集って合同勉強会をおこないました。11:00ハートビーツさんと合同勉強会してきたよ!Tweetコメントを書くもっと読む2017-08-03ロードバランサーって何?インフラロードバランサーってあれでしょ?いい感じに通信を分散してくれるんでしょ?くらいの知識しかなかった執筆者、ハトネコエです。以前から気になっていた部分を調べ、社内勉強会で発表してみました。11:00ロードバランサーって何?Tweetコメントを書くもっと読む2017-08-01「メタプログラミングRuby」オススメですRubyこんにちは、タナカです。夏は花火を見ながら飲むビールが最高ですね。本日はRubyをある程度使いこなせるようになった方へおすすめの「メタプログラミングRuby」を紹介したいと思います。見るメタプログラミングとは?そもそもメタプログラミングとは何でしょうか、本書籍には以下一文で説明されています。メタプログラミングとは、コードを記述するコードを記述することである。Javaのソースコード上で使用できるアノテーションや、C++のテンプレートのようなコードを思い浮かべるとわかりやすいかもしれません。これらのように、プログラムの一部を自動生成するものをメタプログラミングと呼びます。これらの場合はコードジェネレータやコンパイラを使ったものなので、「静的メタプログラミング」と呼んで本書籍では区別しています。Rubyの場合は言語自体がメタプログラミングをサポートしていて自由度の高い事ができるため、「動的メタプログラミング」と呼んでいます。Rubyのメタプログラミングまずは、ソースコードを見ていただくのが早いと思います。“博士の異常な愛情”このコード上ではMovieクラスにtitleメソッドが定義されていないにも係わらずエラーにならず設定、参照できています。エラーにならず動作するのは、Movieクラスで定義されていないメソッドが呼ばれた際に、method_missing()というメソッドが呼ばれるのですが、このメソッドをActiveRecord::Base上で定義してあるからです。ActiveRecord::Baseでは、テーブルのカラム名に一致するメソッドが実行されたときにmethod_missing()を通して値が設定されるようになっています。Rubyでは、メタプログラミングの技術でプログラムを動的に拡張することができます。ActiveRecordをはじめ様々なgem等で、このような技術が利用されています。本書籍は2部+付録の構成になっていて、1部は以下の章で構成されています。コードを記述するコードこの中から第2章のオブジェクトモデルを少し紹介したいと思います。オブジェクトモデルこの章では、クラスやオブジェクトを動的に拡張する方法から、メソッド探索等Rubyの内部処理について学ぶことができます。オープンクラスオープンクラスとは、クラスをオープンしてその場で拡張できる技法のことです。Stringクラスを拡張するようなこともでき、以下のようにして文字列にメソッドを追加できます。Number”オブジェクトモデルの内部オブジェクトモデルのメソッドや、インスタンス変数は以下のようにしてプログラム中で取得することができます。RubyではJavaとは違いインスタンス変数は値が代入されるまで存在しないという特徴があります。[:my_method]オブジェクトからは、classを通して、クラス定義を調べることもできます。クラスの真相Rubyではクラスはオブジェクトであるという特徴があり、Class.newで新しいクラスを動的に生成することもできてしまいます。superclass]オブジェクトとクラスは以下の関係があります。オブジェクトobjのclassはMyClassクラスであり、MyClassクラスのclassはClassクラスになります。MyClassクラスのsuperclassはObjectクラスで、さらに、ObjectクラスのsuperclassはルートクラスのBasicObjectクラスです。(図にはありませんが)この関係を覚えておくとRubyの理解が深まると思います。メソッドを呼び出すときに何が起きているの?メソッドを呼び出すとRubyはまず「メソッド探索」を行い、次に「メソッドの実行」を行います。メソッド探索メソッド探索では「レシーバー」と「継承チェーン」の2つの考えを把握しておく必要があります。レシーバーのクラスに入り、メソッドを見つけるまで継承チェーンを登ること以下はメソッド探索のイメージ図です。矢印の1でレシーバーのクラスに入り、矢印の2で継承チェーンを登りメソッドを見つけます。本書籍では、ほかにモジュールを組み合わせたパターンや、多重インクルード時のメソッド探索についても解説されています。継承チェーンの内容はancestorsメソッドで確認することができます。BasicObject]メソッドの実行メソッドを実行する際は、まずメソッドが呼び出されているオブジェクト(レシーバ)が何なのかを意識する必要があります。以下の例は、レシーバであるobjがselfになること、レシーバを明示していないmy_methodメソッドのレシーバがobjになることを表したものです。@var=11>まとめ今回紹介した内容は本書籍の内容のごく一部です。次の3章では動的メソッドを利用して重複コードを排除する方法、2部ではRailsにおけるメタプログラミングについて解説されていて、いずれも興味深いものです。Rubyについて深く理解するためにも、メタプログラミングRubyはぜひオススメです。BluePrintで定義ファーストなAPI開発こんにちは、エンジニアのナカハシです。隠れドラゴンズファンなので久々に観戦に行ったら、10点差を追いつかれてサヨナラ負けしました。世知辛いにもほどがありますね!!!!!!!(怒)(泣)サーバーサイドとフロント/アプリを別チームで開発するといったケースでは、互いのシステムのインターフェイスはAPIになります。API定義の共有は重要です。BluePrintについて、色々試してみました。UUUMでは2017年3月時点で4000チャンネルを抱えており、日本最大のマルチチャンネルネットワーク(MCN)となっております。これだけのチャンネル数があり、さらに多くのチャンネルは毎日のように動画を投稿しており、1日に増える動画の数だけでも相当な数になっています。以前はこれらのデータの取得をPHPで行っていたのですが、最近Goによる新システムの運用を少しずつ始めており、大きな変化が生まれています。今回はそのあたりについて解説したいと思います。