Furyu

[フリュー公式] Tech Blog

フリュー株式会社の技術ブログです

2016年12月19日

araki

SQLDelightの紹介

この記事は、Androidその2 Advent Calendar 2016 の12/18の記事です。

はじめに

コンテンツ・メディア第1事業部の荒木です。ピクトリンクというプリントシール画像を使ったアプリのAndroid版を開発しています。今回は、Androidアプリのデータベース管理で使えるSQLDelightというプラグインの紹介をしたいと思います。前回の記事で紹介したSQLBriteと組み合わせて使うと強力です。

SQLDelightとは?

square/sqldelight

SQLDelightは、一言でいうとSQL文からJavaのファイルを自動生成するプラグインです。たとえば、以下のようなSQL文が書かれたUser.sqというファイルを作成してビルドをかけます。

すると、SQLDelightはUser.sqを解析して、UserModel.javaというファイルを生成してくれます。

たった4行のファイルから、たくさんのコードが自動生成されましたね。これだけだと何に使うかわからないと思うので、次に具体的な使い方について説明します。

使い方

まず、UserModelを実装したクラスUserを作成します。AutoValueを利用すると以下のように短いコードで書けます。

各種定数

UserModelにはテーブル名やカラム名、テーブル作成用のSQL文が定数として定義されています。たとえば、SQLiteを使う時に作るであろうSQLiteOpenHelperの継承クラスで、テーブル定義をする際にテーブル作成用のSQL文を利用できます。

Mapper

UserModelで定義されているMapperを使えば、データベースの取得結果であるCursorをUserクラスに変換することができます。

Marshal

UserModelにはMarshalと呼ばれるContentValuesのビルダーも定義されています。以下のようにINSERTするときや、UPDATEするときに利用できます。

Pros / Cons

SQLDelightのメリット(Pros)とデメリット(Cons)に関する私の意見です。

Pros

テーブルの定義をSQLで書くことができる点がSQLDelightのメリットだと思います。ORMライブラリは手軽で便利ですが、ORMの仕様に依存してしまうというデメリットがあります。つまりORM側の問題に依存してしまうというリスクがあります。これに対し、SQL自体を扱うSQLDelightは、SQLで出来ることなら何でもできるという点が強みだと思います。また、シンプルにSQLでテーブルを操作できるので、複雑な問題が発生しにくいのではないかと考えています。

Cons

デメリットとしては、SQLの学習コストがかかることがまず挙げられます。SQL自体はできることが多いですが、使いこなすにはそれ相応の知識が必要だと思います(私にはありません)。また、クラスのGetter, Setterのメソッド名がAutoValueの形式(User#name(), User#_id(1) など)となっていたので、個人的には見慣れないなと感じています。

まとめ

この記事では、SQLからテーブルを表すクラスを生成してくれるSQLDelightというプラグインを紹介しました。RealmなどのNoSQLのライブラリも盛り上がっていますが、SQLのパワフルさを活かしてみたいという方は、一度試してみてはいかがでしょうか?


2016年11月21日

sakata

弊社フリューはJJUG CCC 2016 fallのゴールドスポンサーになりました!

Hello world! コンテンツ・メディア第1事業部のjyukutyoこと阪田です。

弊社フリューはJJUG CCC 2016 fallのスポンサーになりました!

http://www.java-users.jp/ccc2016fall/

JJUG CCCは毎年2回、春と秋に開催する日本最大のJavaコミュニティイベントです。Java関連の技術や事例に関する良質なセッションが行われ、また異なる分野で活躍するJava技術者が一堂に会する場ともなっています。

スポンサーにはダイヤモンド、プラチナ、ゴールド、ブースと種類があり、フリューはゴールドです。

CCCでは弊社から2セッション!

弊社では2セッションでスピーカーをします。

  • 13:30-14:20
  • ルームE
  • 10年運用している画像サービスでのJavaの活用と今後の展望

こちらは、盛岡が弊社のサービス開発について話します。私がCCCの2016 Springと2015 Springで話した弊社のサービスについて、別の観点から話します。盛岡はこのサービスを初期(10年前!)から担当しており、ユーザの拡大につれて変遷してきたアーキテクチャや運用、チーム構成などさまざなまリアルが聞けます!

  • 18:30
  • ルームI
  • バイトコードが君のトモダチになりたがっている

こちらは私のセッションです。Javaにおけるバイトコードって何?というところからそこを変更するライブラリの紹介、実例としてJava Agentでのバイトコード操作といったことを話します。

ぜひ私たちのセッションに足をお運びください!

エンジニア募集中

弊社では他にもScalaMatsuri、Scala関西 Summit、try! Swiftなどのスポンサーをしています。それもこれも最終的にはエンジニアの採用のためですね。京都での開発業務(Webアプリ、iOS/Androidネイティブアプリ)に興味のある方はぜひご連絡ください。

http://mobile-career.furyu.jp/

京都以外に渋谷にもオフィスがあり、開発をしています。関東の方もぜひご連絡ください。


2016年11月15日

SatoKeita

JMockitを使ってテストを書いていて困った点

こんにちはフリューのジョンです。普段はJMockitを使ってテストコードを書いているのですが、今回は、そのJMockitを使ってテストを書いていて、困った2点を書きたいと思います。

  1. すでに@Injectableで書いてあるクラスをモックしたい
  2. FileOutputStreamをJMockitでMockUpを使ってコンストラクタをモックする

この2つです。例えば以下のようなメソッドをテストした場合はどうすればよいのかを書きます。

環境

JDK 1.8.0_65
JMockit 1.18
JUnit 4.12

解説

1. すでに@Injectableで書いてあるクラスをモックしたい

これは、テスト対象のクラスに@Resourceがあるため、@Injectableを書いているため起きます。
@Mockedを引数に書いてつかうこと、MockUpを使ってやることもできません。(すでにモックされています、というエラーが出ます)

対応としては、ソースコードの①にある通り、Expectationsにクラスを渡すことで、Fileのモックを対象のExpectations内で書くことができます。
今回はコンストラクタをモックしたかったので、返り値となるFileのモックオブジェクトを@Injectableで定義してExpectations内で使用しています。

2. FileOutputStreamのコンストラクタをモックする

これはFileOutputStreamに@Mockedをつけてモックすることができないために起きます。(@Mockedは使えません、代わりに@Injectableや部分モックを使ってくださいというエラーが出ます)

対応しては、ソースコードの②にある通り、MockUpで記述します。
closeメソッドもモックしているのはtry-with-resource文にて自動的にcloseメソッドが呼ばれるためです。(もちろん無いとテストが落ちます)

ここで気をつけることが、一点あります。
実際のコードでは、ファイルを引数としたコンストラクタを使用していますが、テストコードでは異なるコンストラクタをモックします。理由としては以下になります。

To mock the target “FileOutputStream(File)” constructor, JMockit must replace the internal call to another constructor (“this(file, false);”) with an innocuous “super(…)” call. This is because, inside a constructor, the JVM forbids extra calls before a “super(…)” or “this(…)” call is complete. So, in this case calling “proceed()” from $init has no effect since there is no remaining code in the original constructor.

https://groups.google.com/forum/#!topic/jmockit-users/EvTuJKTecDk

意訳すると、以下のようになります。

JMockitでFileOutputStream(File)をモックするためには、内部でsuperによってFileOutputStream(File, false)を呼び出しているのでそちらをモックしてください。 理由としては、JVMによってsuper(…)またはthis(…)の余分な呼び出しが解消されます。だから、MockUpのproceed()で呼ばれる$initは存在しないコンストラクタを参照してしまうのです。

まとめ

JMockitは複数の書き方ができますが、それ故にわからなくなることも多いと思います。
みんな細かい部分で詰まっていると思いますので、ソースコードを共有していければ解消できるかもしれないですね(切実)


2016年11月15日

Kayo

Open vSwitchのVRRP(L3HA)で高可用性を実現する!

みなさん、こんにちは。コンテンツ・メディア第1事業部インフラ担当の藤本佳世です。
今回もOpenStackの続き、【Open vSwitchのVRRP(L3HA)で高可用性を実現する!】についてお話しします。
前回の記事はこちら

VRRPとは

VRRP(Virtual Router Redundancy Protocol)とは、ルータの冗長化をサポートするプロトコルです。
フリューでは、OpenStackで立ち上げた仮想インスタンスに接続する際に、このVRRP機能を採用しています。
仮想インスタンスへはFloatingIPでssh接続しています。
その通信が、Neutron(networknode)サーバでプライベートIPアドレスにNAT変換され、仮想インスタンスに接続されます。この処理を行うNeutron(networknode)サーバ2台をVRRP構成にすることで、master側のサーバに障害が発生した場合、すぐにstandby側のもう1台のサーバに自動的に処理を切り替えることができます。

<イメージ図>

openstack_vrrp

構築について

公式ドキュメントを参考に構築を進めました。
ネットワークの知識が必要なので、慣れないうちは苦労するかもしれません。

サーバ構成について

コンポーネント ノード
サーバ1 Keystone/Horizon/Nova/Cinder/Glance/Neutron
※1 MySQL/Memcached/RabbitMQ
※2 Heartbeat
controllernode
サーバ2 Keystone/Horizon/Nova/Cinder/Glance/Neutron
※1 MySQL/Memcached/RabbitMQ
※2 Heartbeat
controllernode
サーバ3 Nova/Cinder/Neutron computenode/storagenode
サーバ4 Nova/Cinder/Neutron computenode/storagenode
サーバ5 Nova/Cinder/Neutron computenode/storagenode
サーバ6 Nova/Cinder/Neutron computenode/storagenode
サーバ7 Neutron networknode
サーバ8 Neutron networknode

ネットワーク作成について

ネットワーク名 ext-net80 vxlan-net80
プロジェクト admin service
ネットワーク種別 flat vxlan
外部ネットワーク external1
割り当てサブネット ext-subnet80
10.0.80.0/24
vxlan-subnet80
192.168.80.0/24
Gateway 10.0.80.1 192.168.80.1

※1ネットワークセグメントのみの情報です。実際には同じような構成で3パターン作成しました。

設定内容

各ノードに対して設定を行います。ポイントとなる部分を書き出してみました。

用語の説明

NAT変換 IPアドレスを変換する技術のこと
VXLAN L3ネットワーク上に論理的なL2ネットワークを構築するトンネリングプロトコルのこと
ML2プラグイン OpenStack Networking で、複雑な実世界のデータセンターで使われている様々な L2 ネットワーク技術を同時に利用できるようにするフレームワークのこと
GRE ML2 がサポートするネットワークセグメントタイプの一種
Flat ML2 がサポートするネットワークセグメントタイプの一種
DHCP IPアドレスなどを自動的に割り当てる仕組みのこと

controllernode

共通のオプションを設定します。

ML2プラグインを設定します。

networknode

Open vSwitchエージェントを設定します。

L3エージェントの設定します。

DHCPエージェントを設定します。

メタデータエージェントの設定します。

computenode

Open vSwitchエージェントを設定します。

ネットワークの作成

次は、ネットワークの作成の手順をご紹介します。
フリューでは、3つのネットワークセグメントが存在し、それぞれ仮想ルータを3台構築しました。

下記の通り、flat外部ネットワークとプロジェクトネットワーク(vxlan)を作成しました。

ネットワーク名 ext-net80 vxlan-net80
プロジェクト admin service
ネットワーク種別 flat vxlan
外部ネットワーク external1
割り当てサブネット ext-subnet80
10.0.80.0/24
vxlan-subnet80
192.168.80.0/24
Gateway 10.0.80.1 192.168.80.1

※1ネットワークセグメントのみの情報です。実際には同じような構成で3パターン作成しました。

flat外部ネットワーク作成

  1. 外部ネットワークを作成 ※下記の例では「ext-net80」というネットワーク名で作成しました。
  2. 外部ネットワークのサブネットを作成

プロジェクトネットワーク(vxlan)作成

  1. serviceプロジェクトのidを取得
    ※ここではすでにserviceプロジェクトが存在することを前提としています。
  2. ネットワーク作成
    ※先ほどとは異なり、network_typeにvxlanを指定します。
  3. サブネットを作成
  4. 仮想ルータの作成
  5. サブネットを仮想ルータにインターフェースとして接続
  6. ルータに外部ネットワークへのゲートウェイを追加

HA確認

  1. 下記のコマンドでVRRP(active,standby)構成になっていることが確認できます。
  2. networknodeで、qrouterとqdhcp名前空間の作成を検証します。
    ※両方のqrouter名前空間で同じUUIDが使われているはずです。

  3. networknodeでHAの動作確認をします。
    ※qrouter 名前空間には ha, qr, qg インターフェースがあります。バックアップノードはqrとqgインターフェースはIPアドレスを持ちません。

    ha インターフェース 169.254.192.0/18 の範囲の一意な IP アドレスを持つ
    qr インターフェース プロジェクトネットワークのゲートウェイ IP アドレスを持つ
    qg インターフェース 外部ネットワーク上のプロジェクトルーターの IP アドレスを持つ

  4. Networknodeで、マスターノードの HA インターフェースの IP アドレスから VRRP 通信が行われていることを確認します。

冗長化することは、どんなシステムでも重要視される部分ですね。

最後に

今回初めてVRRPという単語を聞いた私にとっては、かなり苦戦する部分ではありましたが、何とか構築することができました。ネットワーク知識が必要となりますが、少しでも構築の参考になれば嬉しいです。


2016年10月28日

SatoKeita

Vue.jsを使ってみよう

こんばんは、フリューのジョンです。普段はサイト開発をしており、最近Mithril.jsからVue.jsに移行しています。

今回はVue.jsのお話です。
JavaScriptのフレームワークっていっぱい聞くけどどういうところが嬉しいんだろう、というレベルの方にお伝えしたいと思います。

概要

Vue.jsはReact.jsやAngular.jsと同じようにMV*系のフレームワークです。
近年はJavaScriptのフレームワークは飽和していますが(React.js、Angular.js、Riot.js、Aurora.jsなどなど)
それではなぜそのようなフレームワークを使うのでしょうか?jQueryじゃダメなのでしょうか?

 

いえ、jQueryでもできます。しかし、既存のフレームワークのほうが楽をすることができる可能性が高いです。

  • view周りをフレームワークに任せることができるので、logicに集中できる。
    • jQueryのみで大きなページを作成すると、logicとview部分が複雑になる。
  • 要素をJavaScriptで作成している複雑なページは、仮想DOMを使用しているフレームワークを使うと、描画速度が早くなる

一つ目の利点について考えてみます。
例えば以下のようにselectタグの値によってコンテンツの表示切り替えを行いたい場合、どのようにjQueryを使えば良いのでしょうか?

おそらく、コード量を抑えるとしたら以下のように書くと思われます。他を消してから、選択されたものを表示するということになると思います。

では、少し意地悪な変更が加えられたとしましょう。現状idを使って選択していますが、このidは一般的すぎて変更したいですね。
その場合、JavaScript側のセレクタも変更しなければいけません。それに加え、optionタグのvalueを使って切り替えられると思っていたlogicの前提が崩れてしまいます。*1

フレームワークを使うと、このような画面切り替えなどもフレームワーク側が対応してくれるのです。(後にこの問題をVue.jsではどう記述するかを説明します)

そこでVue.jsです

では他のフレームワークではなく、Vue.jsを使う利点はなんでしょうか?私としては、以下だと考えられます

  • viewをhtmlに書くことができるので、viewを分業しているプロダクトではデザイナさんが変更しやすい

Angular.jsでも同じようなことができるのでは?となりますがVue.jsではよりデザイナさんが理解しやすいhtmlの書き方になっています。また、軽量な画面に関しては、少量のコード量で済みます。
そして、仮想DOMを用いているため描画スピードも早いです。

Vue.jsを使ってみよう

先ほどのselectタグの値によってコンテンツの表示切り替えを行いたい場合を題材にします。

各コンテンツにidを書かないようになりました。その代わりにv-showという表示、非表示を切り替える際に使う「ディレクティブ」をつけています。
selectタグにもidを書いていません。その代わりにv-modelという双方向のデータバインディングを行うディレクティブをつけています。

JavaScript側では、Vueに、rootとなるタグのセレクタと他のデータを渡しています。これだけです。

  1. Vueのコンストラクタに渡したオブジェクトにあるdataにはcontentが1で入っています。これがselectタグに渡り、どのoptionタグを表示するかを決めています。
  2. selectタグのonchangeイベントが走るとoptionタグのvalueがcontentに入ります。
  3. contentの値が変化すると、各コンテンツに書いてあるv-showの評価が行われます。その評価値がtrueになった場合、そのコンテンツが表示されるという仕組みになっています。

どうでしょうか?
idの変更やデザインの変更がある場合もこれならば影響はありません。

まとめ

jQueryだけでもできるページは少なくありませんし、広く一般的になっていると思われます。しかし、少し複雑度が増してくると、途端にコード量が増えていきます。

これまでの例からもVue.jsはかんたんに導入できることがわかりましたので、何か面倒だなと感じたときには、ぜひライブラリやフレームワークを使ってみてください。

次はVue.jsを使った少し複雑な例をお送りしたいと思います。

おまけ

今回のソースコードについてはjsfiddleにあげておりますのでご確認ください。
https://jsfiddle.net/satojohn/x9fjajuL/

参考

Vue.jsのドキュメント : https://vuejs.org/

 

*1 もちろんdata属性を使うなど回避策はありますが、ここではわかりやすいようにしています。