Furyu

[フリュー公式] Tech Blog

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

2016年09月30日

sakata

JavaOne 2016 サンフランシスコに参加しました!(その2) #javaone #j1jp

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

前回の投稿ではJavaOneへの行き方を中心に書きました。今後数回に渡っていくつかのセッションの内容を紹介します。

Building Angular 2 Applications in Java 8

チュートリアルセッションです。Angular 2とGWT、Spring Bootでアプリケーションを作るには、という内容でした。スライドはこちらにあります。
http://lteconsulting.fr/angular2boot-javaone/#/
Angular 2とGWT 2.8を使う際の問題点と解決策が中心となっています。

内容

Angular 2はJavaScriptに加えてTypeScriptをサポートしている。Modules、Components、Dependency Injection、Change Detectionが基本的なものである。さらにJSR-269のPluggable Annotation Processing APIを使ってコードを生成する。バックエンドは、シンプルで強力なSpring Bootを使う。

GWTは今のWebからは遠いところにあるものなのは事実だ。GWTにあるものは、以下のもので置き換えられる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-12-59-15

ただ、GWT 2.8は将来の過渡期にある。

  • JsInterop
  • Java 8対応
  • Widgetや古いものをなくす

GWT 3はJ2CL (Java to Closure) となり、今標準となっている多くの機能をなくす。

GWTはモダンで最適化されたJavaScriptへコンパイルしてくれる。JsInteropはJavaScritpとJavaコード間を双方向で統合する。JavaScriptのXMLHttpRequestは以下のようなJavaクラスとなる。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-13-16-14
これを次のように使うことができる。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-13-16-27
そしてSuper Dev Modeには開発用の早いインクリメンタルなコンパイラがある。

JSR-269のPluggable Annotation Processing APIでは、独自のアノテーションプロセッサを登録する。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-13-23-34

そして、Angular2GwtというGWTとAngular 2を統合するライブラリを使う。 Angular2Gwtがすべてやってくれる。User moduleなしのGWTのコンパイルは早い。アプリケーションに依存ライブラリを1つ足すだけでできる。

アーキテクチャは次のようになる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-13-28-11

デモアプリケーション

セッションではデモもありました。デモのリポジトリはこちらです。
https://github.com/ltearno/angular2boot-demos

デモアプリケーションはいくつかあります。ここではセッションで実行していた”my-first-tree-orchard”を動かしてみましょう。

$ cd my-first-tree-orchard
$ mvn spring-boot:run

僕の環境ではjava.lang.IllegalArgumentException: Can not copy a non-root Methodが出ましたが、起動しました。http://localhost:8080/にアクセスすると、”Application is loading”が出た後、次の画面になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-13-53-23

あとは”Roll 6 faces dice”ボタンを押せば動作します。

さて、target/generated-sourcesディレクトリを見ると、コードが生成されています。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-29-14-00-06
ライブラリがPluggable Annotation Processing APIを使って生成したコードですね。

このままではコンポーネントのテンプレートを変更しても、即座に反映されません。Super Dev Modeを使ってみましょう。spring-boot:runはしたままで、別のウィンドウを使って同じディレクトリで次のコマンドを実行します。

$ mvn gwt:run-codeserver
...
[INFO] Super Dev Mode starting up
...

Super Dev Modeが起動しました。画面をリロードします。”Compileing Application”と表示されるようになります。

最後に、起動時のjava.lang.IllegalArgumentException: Can not copy a non-root Methodですが、古いバージョンのSpring Loadedの問題のようです。angular2boot-demosディレクトリにある親pom.xmlのspringloadedを1.2.0から現時点で最新の1.2.6にすると、例外は出力されなくなりました。

感想

Angular 2にもGWTにもほとんど知識はありませんでしたが、おもしろいアプローチではあると感じました。現時点ですぐにJavaにすべてを寄せるアプローチを使う予定はないのですが、こういった方法もあることは知っておいてよいですね。


2016年09月29日

sakata

JavaOne 2016 サンフランシスコに参加しました!(その1) #javaone #j1jp

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

私は昨年に続き、今年もJavaOneに参加しました。

JavaOneとは

JavaOneをご存知の方はここは読み飛ばしてくださいね。

JavaOneは、オラクル社(以前はサン・マイクロシステムズ)が1996年から毎年開催している、Javaに関する最大級のカンファレンスです。サンフランシスコで5日間、400以上のセッションがあります。朝から晩までJavaに浸っていられる、夢のような内容となっています。

毎年9月、10月といった秋に、ユニオンスクエアの近くにあるヒルトンやPark 55といったホテルや、国際会議場モスコーン・センターを会場としています。なお、同時にオラクルのOpen Worldというカンファレンスも開催されています。ビジネスとしてのメインはOpen Worldの方ですね。

モスコーン・センターは道を封鎖して、期間中ずっとイベント会場となっています。
img_2211img_2212

英語について

海外のカンファレンスに参加する際に、私も含めみんなが気になることは英語だと思います。もちろんまったく下地がない状態でセッションの英語を聴くのはおそらく難しいです。ただ、普段から技術文書を少しでも英語で読んでいて、セッションの対象となる技術分野をある程度知っていれば、スライドの文章もあるので大まかには理解できます。

私自身は海外留学の経験もなく、英語が話せるわけではありません。ですがJava Magazineを英語で読んでいたこと、去年参加してからNHKラジオのストリーミングを毎日聴いていたことで、昨年より聞き取ることができるようになりました。

費用について

次に気になる点は費用だと思います。参考までにだいたいの費用を載せますね。

飛行機

日本からサンフランシスコへ直行便を利用すると、2016年9月現在では往復15万円ほどかかります。飛行時間は行きが10時間、帰りが12時間です(関西空港-サンフランシスコ国際空港)。

なお、乗り継ぎ便を利用すると、現実的な乗り継ぎで10万円となり、5万円抑えることができます。私は今年香港経由でサンフランシスコへ行きました(業務での出張ではありましたが)。直行に比べて7時間ほど余計にかかりました。ただ、行きは朝早くの出発、帰りは深夜出発で、とても時差調整がしやすかったです。行きのサンフランシスコ到着時間や帰りの関西空港到着時間も、直行便を利用するときとほぼ同じで出発時間が早くなるだけです。すると帰りの1日分宿泊費がかからないため、ホテル代2,3万円を抑えることができます。

想定費用:10万円〜15万円

img_2198

ホテル代

サンフランシスコは大変物価が高いところです。ホテルも同様で、通常でも日本のビジネスホテルより設備が悪いところが1万円以上します。そして、数万人集まるOpenWorldとJavaOneの期間中は、ホテル代が高騰します。最低でも1泊2万円はかかると考えてください。ただし、安くて会場に近いホテルはすぐに埋まるため、よほど早く準備するか、会場からとても遠いホテルでないとこの価格では泊まれないと考えてください。

私は1ヶ月前にホテルを予約しましたが、会場から5分のところでやや広い部屋しかなく、1泊3万5千円でした。会場からかなり遠いところであれば、2万5千円もあります。Uberを使えば20ドル前後で会場まで移動できるので、その方法を使うのも一手です。その分移動に時間は取られてしまいますが…

宿泊期間は土曜日から金曜日まで、6泊となります(日曜日から木曜日の夕方までが開催期間)。前述の通り、木曜日の夜便を使えば5泊にできます。

想定費用:13万円〜20万円(3万円前後 * 5,6泊)

img_2200

パス代

JavaOneのパスは、直前に購入すると2050ドル、つまり20万円以上します。ですが、早期に購入すると割引があります。登録開始から1ヶ月ほどは、1650ドルでした。4万円抑えられます。ただ、まだJUGディスカウントもあります。JUG、つまりJavaユーザグループにはディスカウントコードが発行され、それを使うとさらに200ドル安くなります。JavaOne登録開始から数ヶ月経った後JUGに配布されますので、日本のJUG、JJUGあるいは関ジャバのTwitterアカウントをフォローしておくとよいかと思います。関ジャバの会長は私ですので、私に直接問い合わせていただいても大丈夫です。

ただし、スピーカーになればパスが無料でもらえます!スピーカーは公募制、Call for Papersを通過すれば誰でもなることができます。

このパスには、月曜日から木曜日のランチ、日曜日の夜のWelcomeレセプション、水曜日の夜のAppreciation Eventが含まれます。食事代がいくらか浮きます。

想定費用:15万円〜20万円

総費用

合計すると安くても38万円となります。安くはない金額ですね。また、食事も高い物価の影響で、ファーストフードであっても10ドルはします。レストランでは30ドルは見ておいたほうがよいです。

どんなことが得られるのか?

まず、日本でこの規模のカンファレンスはありません。そして、JavaOneには世界各国から人が集まってきています。日本人とか外国人とかそういったものは関係なく、すべての人が英語で発表し、質問もします。日本語母語の人も、英語でスピーカーをしています。これが世界的には普通だという感じられます。みなネイティブのように話すわけではありません。きれいな発音でなくても、堂々と大きな声で質問しています。参加すれば、きっと自分もそうなるのが普通であり、これからも技術と英語を深めていけばそうなる、と思えます。これは、言葉で読むよりももっと大きなインパクトです。私は若い方ではありませんが、とても大きな体験でした。できる限り若い年齢で行ってみれば、さらに大きな体験となります。少し無理をしてでも、ぜひ行ってみてほしいです。

もちろん、JavaやJVMの最新情報を手に入れることができます。それだけでなくJava Platform GroupチーフアーキテクトであるMark Reinholdさんなどに直接質問できるQ&Aセッションもあります。また、JCP(Java Community Process)メンバーになっていれば、夜に会員限定のパーティもあり、各国のJUGメンバーやJava Championに話かけることができます。こういったことは、ここに来ないとできません。

ただ参加するだけではそう得られるものはありません。年間を通じてJavaコミュニティに関わっていればいるほど、JavaOneで得られるものは指数関数的に大きくなります(私自身もまだまだです)。JavaOneとJavaコミュニティへの参加を通じて、フィードバックサイクルを回しながら進めば、とんでもないところに行けるのではないかと思っています。

次回予告

次回からは時系列順ではなく個別のセッションをいくつかピックアップして記事を書いていきます。お楽しみに!


2016年09月27日

LambdaでCDNのキャッシュコントロールを最適化し、AWSと仲良くする。

AWSにはS3やCloudFrontという良いものがあり、サーバーを持たぬ者でも静的コンテンツを大規模に効率良く配信する事が可能です。
S3は大容量のコンテンツサーバー、CloudFrontは多拠点型のキャッシュサーバーで、共にAWSのサービスです。
一昔前はこのような事ができるのは一部の人間に限られており、良い世の中になったなあと思います。

S3とCloudFrontで静的コンテンツを扱うと、コンテンツ更新時のキャッシュコントロールに難しさがあります。
「新しくファイルアップロードしたのに、なんでヒョージ変わらへんねん」というアレです。
CloudFrontのキャシュの生存期間はコントロール可能で、TTLの設定を変えてみたり、AWSのコンソールでキャッシュの削除(invalidation)したり。
色々方法はありますが「コンテンツが更新されたら、キャッシュも更新される」をLambdaで自動化できるっぽいのでやってみました。

Lambdaとは

Lambda(ラムダ)を使うと、AWSで起こる色々なイベントを起点にプログラマが書いたプログラムを実行する事ができます。
プログラム実行に使うコンピュータをプログラマが意識する必要は無く、むきだしのサーバーはAWSに隠蔽されている事から「サーバレス○○」だ!と呼ぶ人もいます。
Lambdaはトリガー的に使えるので、invalidateを自動化するプログラムを書けばなんとかなりそうです。

 

 

ロールの作成

Lambdaの実行とCloudFrontの操作が必要になるので、これが可能なロールをIAM(権限コントロール)から作成しておきます。

Lambdaの実行権限から

cf5

ラムダ基本実行権とCFへのフルアクセスを選択します。

cf8
こんなかんじのロールができればオッケーです。

cf10b

LambdaFuntionの設定

AWSコンソールからLambdaFunctionの作成へと進みます。
BluePrint(一般的な利用用途のテンプレ)を使わずに「Configure triggers」に進みます。

cf1
AWSのどのサービスでどのような状態変化が起こった場合にトリガーを発動するのか、を設定します。
ここではS3を選択します。

cf1-5
「furyu-sandbox」というS3バケットに「拡張子がjpgのファイルが作られた(Object Created(All))」場合の設定はこんなかんじです。

cf2
いよいよラムダ関数の登録です。

実行環境はPython2.7を選択します。
コードは下記をそのままコピペして、XXXXXXXXXXの箇所をCFのディストリビューションIDに書き換えます。

 

print()された文字列は、CloudWatchでログとして出力されます。(後述)

先ほど作成したロールを選択します。
こんなかんじになります。

cf11
作成したLambdaFunctionの実行とモニタリング

ファイルS3バケットにアップロードし、反応を観察してみます。
S3へのファイルのアップロード後、作成したFunctionを選択して「Monitoring」タブを選択します。
LambdaFunctionの実行状況が確認できます。

cf12
「View Logs in Cloud Watch」で、詳細なログを確認できます。

cf13

printの内容やエラーもここに出力されます。

cf14

 

CloudFrontの対象ディストリビューションのInvalidationsタブにInProgressが見えます。

cf15

キャッシュ削除が起動された事が確認できます。

 

「雲の上のクラウドに向かってラムダ式を唱えると全ては計算された。サーバーから開放された人々は最も人らしくなった」
ミステリアスなイメージを持つラムダですが、利用用途は無限、うまく使うとAWSと仲良くする事ができます。
日宇


2016年09月27日

SatoKeita

SPAJAM決勝に参加しました

はじめましての方も、そうでない方も、こんにちは。フリューの佐藤こと、ジョンです。
遅くなりましたが、SPAJAM決勝戦に参加してきましたので、ご報告です。
予選については、こちらをご覧ください。SPAJAMについては、http://spajam.jp/をご覧ください。

予選から本戦にむけての準備

以前の予選を踏まえ、振り返ってその対応を試みました。

  • そもそもツールが使いこなせていなかった
    • 勉強するのにも時間が足りないため、使い慣れているツールに変更しました
  • アイデアが少し弱かった
    • 予めアプリの方向性を考えておく。今回はVRを使ったアプリにしていこうという方向性

果たしてこの方法が正しいことなのかは、さておき。
今度はディスプレイを持たず、新調してもらったMacBookをもって出発です。

本戦当日

会社の都合上、前日は金沢の旅館にいましたので、朝早く北陸新幹線で移動となりました。旅館から、旅館へ。温泉から、温泉へ。
向かう先は、埼玉県熊谷市ホテルヘリテイジ 四季の湯温泉です。
熊谷までつくとSPAJAM用の臨時バスが来ましたので、それに乗りました。

本戦会場は地下でした(高所恐怖症の方は安心です)

会場の雰囲気

荷物をとりあえず置いてから、別部屋に移動後、各チームの紹介、テーマ発表、アイデアソンという流れでした。
この辺りはニコニコ生放送でも放送されていたようです。
DSC_0817[1]

浴衣来てますが、すぐ脱ぎます。テレビ用ですね。
お昼もおいしく頂きました。ビールも提供されていました。ですが、流石にこの後二日間あると思うと飲めませんでした。

一日目の昼食
今回のテーマは「」でした。
予選よりも抽象度が高く、アイデアソンでのアイデア出しは、困難を極めました。

単純に音を鳴らす、ということではダメだろうという話はチームでも出ていましたが、打破する案も浮かばず。
ということで、前準備で考えていたVRを使った○○ということで、無理矢理にでも進めました。

各人の担当は、前回とほぼ同じくではありますが、今回はVRと言うことで、OpenGLを使ったプログラミングです。
行列の計算やシェーダの実装などを行いました。テーマに沿うように、音声認識もつかいました。

OLYMPUS DIGITAL CAMERA

目の前に温泉がありつつも黙々と作業をしていきます。
1日目の夕食、2日目の朝食、昼食……と食事はすべて用意されていたので、ありがたかったです。

予選と同様に、時間がないうちにどれだけ完成に近づけるか、プレゼンで発表される部分を意識して作成をしていきました。
そして、やはり予選と同様に、最終的には各自、自分の担当範囲だけではなく、今何が足りていないのか、時間が決まっているなかで、何ができて、何ができないのかを考え行動していけていました。

2日目の夜には、各チーム作成したアプリのプレゼンテーションをしました。その後、懇親会も踏まえ実際にアプリを触ってもらえる実演会が用意されていました。
同時に他チームの方との交流もでき、アプリも触ることができました。

他チームも、技術レベルが高くおもしろいアイデアのアプリを作られていました。もちろん、プレゼン途中でアプリが動かなかったりなどのハプニングもあり、同時にハッカソンの難しさを味わいました。

そして、時間が過ぎると、ハッカソンイベントの主要部は終了となります。

ようやく温泉にありつけました。部屋も用意されてあります。
ちなみに、温泉に入るタイミングは自由ですし、皆がアプリを必死で作成している間に温泉に入っても何も問題ありません。

成果物について

今回作成したアプリは、以下です。

logo01

音(歌)から広がる世界を楽しめるアプリというコンセプトで進めました。子供向けのVRという、将来的な展望も兼ねていました。
VRゴーグルは、Google Cardboard V2です(目はデザイナさんに描いてもらってます)。こちらを装着してVRの世界を見て回ります。

img_20160914_191945

始める前にまずBGMを選択します。

screenshot_20160914-172114

そうすると、そのBGMにあったVRの世界が表示されます。
スマートフォンには2つの画面が表示されますが、VRゴーグルを通すと2つの画面の差分により立体視ができます

screenshot_20160914-172727

技術的な部分としては、先ほど書きましたが3DCGを描画するためにOpenGLを使用しています。
他には、GoogleのCLOUD SPEECH APIを使っており、特定のキーワード(例えばリス、くま、など)に対して中の動物たちがリアクションを取ってくれたり、音楽が変わったりします。

結果

結果発表は、プレゼンテーションから夜が明けた3日目。会場を東京浅草にある HULIC HALLに移し行われました。
その前に、結果発表の前にドローンを使っての写真撮影をしました。すごかったです(詳しくは http://spajam.jp/final/result/ に動画がありますのでこちらを参照ください)。

本戦計12チームがありましたが、結果

ファイナリスト賞

を頂きました。大文字で書いておきながら、残念ながら、いわゆる参加賞です。

審査員の方から評価を聞いたところ、やはりアイデアでの点で弱かったようです。

ちなみに、最優秀賞は ちゅらゴンズさん の 音録(オドロク)でした。

感想

業務ではWebアプリケーションを触っており、スマートフォンのアプリ開発に携わることがありませんでした。
しかし、今回の予選から本戦までを体験でき、以下の知見を得ることができました。

  • 会社の中でも特に関わりが少ない人とのチームを組めた(大きな組織になってくるとなおさら!
  • 今までやったことのない技術を使う機会があった(特に本戦で使用した音声認識は個人的にはとても興味深く、業務にも活かせそう
  • 社外の方との交流を持てた(名刺は持って行きましょう!

以上いろいろありましたが、プラスしか無いです。(もちろん、疲れたとかはありますが
興味のある方は、次回SPAJAMに参加してみてください!

%e9%9b%86%e5%90%88%e5%86%99%e7%9c%9f


2016年09月26日

araki

SQLBriteの紹介

コンテンツ・メディア第1事業部の荒木です。ピクトリンクというプリントシール画像を使ったアプリのAndroid版を開発しています。今回は、RxJava好きのAndroid開発者なら知っておきたいライブラリSQLBriteの紹介をしたいと思います。

SQLBriteとは?

https://github.com/square/sqlbrite

SQLBriteは、Android端末内のデータベース管理に使われるSQLiteOpenHelperをラップするライブラリです。最大の特徴は、テーブルに対するSQLクエリをRxJavaのObservableとして購読できることです。対象のテーブルに変更があるとSQL文が再度実行されて結果が流れてきます。これによって、テーブルのデータをストリームのように扱うことが可能になります。

 

使い方

ダウンロード

build.gradleのdependenciesに以下の行を追加してください。2016/09/15時点の最新バージョンは0.7.0です。

BriteDatabaseの取得

まずは、SQLiteOpenHelperをラップしているBriteDatabaseを取得します。

SQLBrite#wrapDatabaseHelper(helper, scheduler)メソッドでBriteDatabaseを取得できます。第1引数のhelperには、SQLiteOpenHelperを継承した自作クラス(ここにテーブルの作成やマイグレーション処理を書く)を入れます。第2引数にはテーブル変更の通知を行うスレッドを指定してください。通常はSchedulers.io()で良いと思います。

クエリの購読

クエリの購読には、BriteDatabase#createQuery()メソッドを利用します。

たとえば、usersテーブルの全てのレコードを取得するSQLクエリを購読する場合は、以下のようになります。insert、update、deleteなどでusersテーブルに変更があるたびに、call(Query query)メソッドに実行可能なクエリが流れてきます。

( https://github.com/square/sqlbrite#usage より引用)

 

また、mapToList(Func1<Cursor, T> mapper)メソッドを使うとクエリの実行結果がCursorとして流れてくるので、エンティティへの変換処理を書いてやれば購読時にエンティティのリストを得ることができます。

結果が1件だけの場合はmapToOne(Func1<Cursor, T> mapper)メソッドを使えば、単一のエンティティに変換できます。

Pros / Cons

私の考えたSQLBriteのメリット(Pros)とデメリット(Cons)です。

Pros – 画面間のデータの共有に使える

たとえば、画像などのコンテンツにユーザーがコメントしたときに、その画像を表示している全ての画面でコメントを更新したい状況を考えます。SQLBriteを使って、コメントテーブルに対するSQLクエリを購読すれば、コメントの追加(insert)、修正(update)、削除(delete)に対して全ての画面で最新の状態に更新することができます。また、RxLifecycleと併用すれば、Activityが破棄されている場合は変更イベントを受け取らず次の生成時に再購読する、というようにActivityのライフサイクルに対して安全に通知を受け取ることができます。

Cons – SQLを書くコスト

SQLBriteはORMライブラリではないので、データを取得するために、いちいちSQLを書く必要があります。これまでORMを使っていて、そこから乗り換える場合はSQLの学習コストがかかると思います。私はSQLBriteのシンプルさが好きですが、人によってはORMのような手軽さがなくて苦手かもしれません。このあたりは好みの問題だと思います。

まとめ

この記事では、SQLiteのテーブル変更をストリーム化するライブラリSQLBriteを紹介しました。RxJava好きの方は、ぜひ実際に使ってみてストリームの気持ち良さを味わってください。