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

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

スマホアプリづくりのすすめ

どーも、ドロイド君フィギュアを30体以上持っている、ドロイド君愛好家のてっこです。

スマホアプリづくりは楽しい

f:id:k_nakahashi:20170921194403p:plain

僕はスマホアプリを作るのが大好きで今までに80本以上のアプリをリリースしてきました。

リリースしていないのも含めたら200くらいのプロジェクトはつくったかな?

スマホアプリの楽しいところ

ユーザーと直接接点が持てる

f:id:k_nakahashi:20170921194421p:plain

スマホアプリは実際にユーザーが触ります。そして世の中にリリースするとフィードバックが届きます。

おもしろい!使いやすい! 逆に つまらない!使いづらい! といったものです。

これはモチベーション向上にもなるし、より良いプロダクトにするための手助けとなることが多いでしょう。

世界中の人に使ってもらえる

f:id:k_nakahashi:20170921194449p:plain

AndroidだとGoogle Play、iOSだとApp Storeがあります。 前者は25ドルで出し放題、後者は年額11800円(2017/8/30現在)で出し放題です。

Androidだったら飲み会一回断れば生涯リリースし放題!iOSは年に3回飲み会断ればリリースし放題!

これだけで世界中の人に自分の作品を触ってもらえる機会が付与されます。

ね、簡単でしょ?

アウトプットが自分の経歴書になる

f:id:k_nakahashi:20170921194504p:plain

たぶんエンジニアの皆さんは経歴書とか書くの嫌いですよね(笑) 個人でリリースの経験があれば、それを見せることでとてもわかりやすい経歴になります。

会社で作っていたものももちろんですが、個人でリリースしておくと

企画->開発->リリース->マーケティング

など全てを経験できるのでオススメですよ。

よく聞かれる質問集

Q. AndroidとiOSどっちやれば良いですか?

A. リリース予定なければiOS、リリース予定あればAndroidが良いと思う

iOSの場合、Swiftはモダンでとても書きやすい言語なので、初心者でも入りやすいと思います。(ここでObjective-Cの話は禁止な ただし、年額11800円というのは とりあえずやってみる のハードルがちょっと高いです。(おカネ的な意味で

Androidの場合、Javaというちょっと奥ゆかしい言語を使っているので慣れていない人は難しいかもしれません。(ここがネックだと思う人はKotlinでググれば幸せになれると思うよ 逆に 25ドルさえ払ってしまえばリリースし放題 という気軽にリリースできる環境が整うので見返りはでかいです。

ちなみに世界のAndroid, iOSシェアが見れる以下サイトとか見てみると面白いですよ。

参考: KANTAR WORLDPANEL

Q. リジェクトされないですか?

A. されます。確実に

逆にリジェクトされたことないというスマホアプリ開発者に出会ったことがないと思います。 ラーメン屋に置いてあるコショウみたいなもんだと思ってください。

僕の場合、計50回以上リジェクトされてます。 世間的にはリジェクトといえばAppleのイメージが強いと思いますが、Googleもあります。 なので明らかにアウトなものはGoogleに出してもリジェクト(即アプリ削除など)される可能性があるので気をつけてくださいね。

また、単純なアプリだとリジェクトされるんじゃないか?という話もよく聞かれますが、僕は ボタンを押したら音がなるだけのアプリ をリリースしたときは珍しく一発審査合格でしたので、そんな気にせずとりあえず提出してみるのが良いと思います。

Q. アイディアはどうやって思いつくんですか?

A. たとえば、不満をアプリにすれば良いと思います

僕の場合、スマホアプリ大好きっ子なので、なにか不満があると それアプリで解決できないの? ってすぐに考えてしまいます。 たとえば、 ボタンを押したら音がなるだけのアプリ は居酒屋でボタンがなくて店員が呼べなくて、さらにコミュ障な自分は声を張り上げるのがツライので、じゃあアプリにしちゃお。と思ったわけです。

せっかくなのでもう一つくらい例にあげると、僕は北海道生活が長かったので電車がわからないんですよ、カオスなんですよ。 Kindleとか読んでて、 あれ?今何駅だ? って思ったときにツライなと思って、 現在地を投げると最寄り駅のみを返してくれるアプリ を作りました。

こんな感じでアイディアなんてどこにでも転がっているので、どんどん見つけていけば良いと思います。

また、アイディアを大切にずっと持ち続けている人もいると思いますが、多分世界中に同じことを考えている人はいっぱいいるので、どんどんTwitterやFacebookなんかで共有して、それに対する世間の反応を観察してみるのも大事かなと思います。

Q. スマホアプリ開発って楽しいですか?

A. 楽しい!!!

現場からは以上です。

いまさら人に聞けない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はぜひオススメです。