Furyu

[フリュー公式] Tech Blog

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

2017年05月11日

SatoKeita

Vue.jsを使ってみよう その2

こんばんは、フリューのジョンです。最近Vue.jsを理解しようとVue.jsのソースコードリーディングをしています。

前回はVue.jsのかんたんな使い方とjQueryとの比較、などをお話しました。
今回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をします。

Vue.jsのバージョンは2.3.0です。

elプロパティ

elプロパティはString型、または、HTML Elementである必要があります。
String型で与えた場合、document.querySelectorで存在した要素を使いますので、HTML Elementを与える必要はあまり無いと思われます。

コンパイル対象のルート要素に対して設定します。
コンパイルとは、データのバインディング設定などを行うフェーズです。
Vue.jsではルート要素以下の要素を網羅してHTMLを再構築しています。

dataプロパティ

dataプロパティはObject型、または、Object型を返すFunction型である必要があります。
後で説明するコンポーネントを使う場合、dataプロパティはFunction型でなければいけないので、常にFunction型を返すようにしておくほうが妥当だと思われます。

dataプロパティの値にはインスタンスからアクセスすることができます。また、HTML側からは直接アクセスすることが可能です。
さらに、Vue.jsはこのObject型に記述されたプロパティの変更を感知することができます。感知することで画面側の再描画が走ります。

このようにdataプロパティが返すObject型をいじると、再描画されているのがわかります。これは、Vue.jsがプロパティにsetterとgetterをつけており、その中で変更を検知しているためです。
しかし、配列の場合は少し勝手が違います。配列の中身をいじっても更新はされません。

もしこのような場合があれば次のように置き換えます。

vm.messages[0] = ‘ほげ’ → Vue.set(vm.messages, 0, ‘ほげ’)

またはspliceメソッドを用いてやります(spliceメソッドは再描画の検知ができます)

vm.messages[0] = ‘ほげ’ → vm.messages.splice(0, 1, ‘ほげ’)

(https://jp.vuejs.org/v2/guide/list.html#注意事項)

methodsプロパティ

methodsプロパティはプロパティがFunction型のObject型である必要があります。
methodsの各関数のthisはインスタンスがバインドされていますので、アロー関数を使わないようにしたほうが良いと思われます。

これらの関数にはdataプロパティと同じようにアクセスすることができます。

また、結果を返す関数も記述ができ、内部で使用しているプロパティが変更されると再描画されます。
しかし、この書き方は推奨されていません。全てのmethodsが自分が参照していないプロパティが変更されても、実行をしてしまうためです。

この問題を解消したい場合はcomputedプロパティを使いましょう。computedプロパティは後々お話します。

まとめ

Vue.jsの基本のプロパティの紹介とその使い方をご紹介しました。

次回は、HTML側について詳しく紹介したいと思います。

ありがとうございました。


2017年03月17日

araki

DroidKaigi 2017 に参加しました。会場の様子をレポートします!

コンテンツ・メディア第1事業部の荒木です。ピクトリンクというプリントシール画像を使ったアプリの Android 版を開発しています。

前回の記事では、DroidKaigi 2017 の参加前レポートを書きました。今回は、DroidKaigi 2017 の参加後レポートとなります。ほとんどのセッションはスライドと動画が公開されるようなので、この記事では DroidKaigi に参加できなかった方に向けて、会場の様子をお伝えします!

DroidKaigi とは?

※ 前回の記事と同じ内容を、再掲いたします。

公式サイト より引用:

DroidKaigiはエンジニアが主役のAndroidカンファレンスです。
Android技術情報の共有とコミュニケーションを目的に、2017/3/9(木)、3/10(金)の2日間開催します。

DroidKaigi とは、Android エンジニアのカンファレンスです。参加者は500人を超え、日本国内の Android カンファレンスとしては最大級の規模を誇ります。2015 年から開催されており、今回の DroidKaigi 2017 で3回目の開催となります。私は今回が初めての参加となります。

会場の様子

会場の様子をレポートいたします。今回の会場は、ベルサール新宿グランド コンファレンスセンターでした。

セッション

セッションルームは全部で6つありました。どのセッションも多くのエンジニアが発表を聞きに来ており、人気のセッションでは立ち見の人が出るほどでした。写真は Room3 の真ん中くらいから撮影したもので、私の後ろにもたくさんの聴講者がいました。

Session Room3

Session Room3 の様子

ランチ、おやつ

会場には、お菓子部屋がありました。各社のロゴの入ったお菓子や、マフィンなどがおいてあります。運営の方曰く、無限に湧いてくるとのことでした。

IMG_20170310_095808

 

他にも記念撮影スポットがあったり、

IMG_20170309_184112

 

バリスタの方がコーヒーを淹れてくれるというサービスもありました。常に長蛇の列ができていて、私は飲みそびれてしまいました。。

オフィスアワー

各セッションの後には、オフィスアワーが設けられました。オフィスアワーでは、発表者の方が質問やフィードバックを受けるために、お菓子部屋にしばらく滞在していました。発表者の周りには多くのエンジニアが集まり、発表内容について熱い議論を交わしていました。私もオフィスアワーで議論に参加したり、発表内容に関する疑問をぶつけてみたりしました。こうした貴重な経験は、カンファレンスに参加したからこそ得られるものだと感じました。

 

こちらのセッションのオフィスアワーで、MVVM について発表者の方と議論を交わしていました。とても楽しかったです!

アフターパーティー

全てのセッションが終わった後のアフターパーティーの様子です。ここでも、たくさんのエンジニアの方たちと交流することができました。

IMG_20170310_183106

 

寿司職人が握るお寿司。去年もあったそうです。大人気で、すぐに売り切れてしまいました。

IMG_20170310_191355

 

遠いですが、運営責任者の mhidaka さんが壇上にいらっしゃいます。この後、運営スタッフの方々に会場全体から感謝の拍手がありました。スタッフの方々のおかげでカンファレンス中、気持ちよく過ごすことができました。ありがとうございました!

IMG_20170310_202008

さいごに

今回は、DroidKaigi に参加できなかった方に向けて会場の様子をお伝えしました。楽しそうな雰囲気が伝わって「来年は DroidKaigi に参加するぞ!」と思っていただければ幸いです。私は来年も参加する予定ですので、ぜひみなさんも参加しましょう!


2017年03月2日

araki

DroidKaigi 2017 に参加します!

コンテンツ・メディア第1事業部の荒木です。ピクトリンクというプリントシール画像を使ったアプリの Android 版を開発しています。

弊社はエンターテイメント分野を扱っており、クレーンゲームの商品も作っているので、SNSなどで人気が急上昇した「けものフレンズ」の商品は作らないのかと思って調べてみたら、流行する前に作ってもう終わっていたようです。

 

今回は、DroidKaigi というカンファレンスの紹介をします。また、公式アプリの OSS 活動に参加したことや、気になるセッションの紹介など、参加前の現状について報告します。

DroidKaigi とは?

公式サイト より引用:

DroidKaigiはエンジニアが主役のAndroidカンファレンスです。
Android技術情報の共有とコミュニケーションを目的に、2017/3/9(木)、3/10(金)の2日間開催します。

DroidKaigi とは、Android エンジニアのカンファレンスです。参加者は500人を超え、日本国内の Android カンファレンスとしては最大級の規模を誇ります。2015 年から開催されており、今回の DroidKaigi 2017 で3回目の開催となります。私は今回が初めての参加となります。

公式アプリの OSS 活動

昨年、公式アプリが OSS(オープンソースソフトウェア)として GitHub に公開され、多くの人にコントリビュートされていました。今年も以下のリポジトリで OSS 活動をされています。多いときは1日で40件ほどのPR(プルリクエスト)が出されたそうです!

https://github.com/DroidKaigi/conference-app-2017

昨年もそうですが、技術的知見が詰まったリポジトリだと思います。Data Binding, RxJava, Dagger2, Retrofit など、第一線のAndroidアプリ開発で使われている技術やライブラリの使われ方を見られるので、ソースコードを眺めているだけでも勉強になります。

また、コントリビュートを目指して PR を出してみるのも刺激的で楽しいです。私も、簡単な修正ですが3つほど PR がマージされて、晴れてコントリビューターとなることができました。コントリビュートしてみたいという方は Issues の「welcome contribute」ラベルがついたものに取り組んでみてください。

セッション紹介

個人的に私が気になるセッションをいくつか紹介いたします。

How to apply DDD to Android Application Development

あんざいゆき(yanzm) さんが発表されます。ドメイン駆動設計(DDD)を Android アプリに適用する話です。最近、「エリック・エヴァンスのドメイン駆動設計」という本を読み始めて、DDD に関心があるので Android の分野ではどのように適用されていくのかという話には非常に興味があります。ドメイン駆動設計の本はまだ読破していないので、当日までに読みきって臨みたいと思います。

大規模アプリのリノベーション

北村涼 さんが発表されます。初回リリースから5年続く「はてなブックマーク」を大規模改修した話をされるそうです。弊社のアプリも初回リリースから少しずつアップデートを続けた結果、コード改善の必要性が増しているように感じるので、どういったステップでリノベーションが実施されたのかを聞きたいです。

エンジニアが武器にする Material Design

瀬戸優之 さんが発表されます。Google が提案している Material Design というガイドラインについての話です。社内のデザインフローや Material Design を社内に広める方法についても話されるようなので、他社ではどのようにアプリのデザインと向き合っているのかという部分に興味があります。

さいごに

この記事では、DroidKaigi というカンファレンスの紹介、および参加前の現状について報告させていただきました。DroidKaigi では多くの Android エンジニアの方々と技術交流ができるということで、参加前から非常にワクワクしております。参加した後も、実際にどのような雰囲気だったのか、どういった知見を得られたかなどを記事としてお伝えできればと思います。

 

以上です。


2017年01月30日

adachi

try! Swift Tokyo 2017 に協賛します!!

こんにちは
コンテンツ・メディア第1事業部の足立です。
ピクトリンクというプリントシール機で撮影した画像データを使ったコミュニケーションアプリのiOS版の開発を担当しています。

 

弊社は2016年に引き続き3月2日から行われる try! Swift というイベントにシルバースポンサーとして協賛させていただきます。

 

try! Swift

HP: https://www.tryswift.co/tokyo/jp
スケジュール: https://www.tryswift.co/tokyo/jp#schedule

「try! Swift」はプログラミング言語Swiftに関するコミュニティ主催のカンファレンスです。
ベストプラクティス、アプリケーション開発、サーバーサイドSwift、オープンソースSwiftなど、Swiftに関する技術情報とコミュニケーションを目的に2017年3月2日〜4日の3日間にわたって開催されます。

 

去年は3日間全て講演でしたが、今年は3日目は参加者によるハッカソンを行うようです。
また、登壇者の講演とは別に、try! Swift の参加者によるライトニングトークセッションも用意されています。

 

登壇者による講演もですが、ライトニングトークでどの様な発表を聴けるか楽しみですね

 

Swiftを使用した開発について

弊社の手掛ける ピクトリンク というiOSアプリ(Android版, Web版あります)では、 Swift を使用して開発を進めています。

 

2014年のWWDCで Swift のBeta版が発表された頃、アプリの全面的なリニューアルを行っていました。
その頃に思い切って「Swiftへ移行しましょう。今変えないでいつ変えるんですか」的なことをチーム内で提案したのを覚えています。
発表まもないうえに初めての言語でしたので、 Objective-C からの作り変えに楽しくも辛い(?)日々が良い思い出です。

 

SwiftVersion 1.0, 2.0 そして Version 3.0 と約2年をかけてバージョンアップされて来ました。
バージョンアップによる言語仕様の変更などに伴う修正などは覚悟してしていましたが、大幅な仕様変更には泣かされました。
ですが Objective-C から Swift へ移行することで、Optional・Optional Chainning などを利用できる様になり、開発効率や可読性などが大幅に上がりました。
今ではあの頃に Objective-C から Swift へ移行しておいて本当によかったと思っています。

 

まだ、Swift が怖くて手が出せてない方や、Objective-C からの移行コストを気にして Swift に移行できていない方がいるとおもいますが、
今、この Tech Blog を見た瞬間から1行、1機能でも良いのでぜひ Swift で実装してみてはいかがでしょうか!?

 

みなさんもぜひ try! Swift してみませんか。
Swift 楽しいですよ!!

 

去年の記事: try! Swiftに協賛します


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のパワフルさを活かしてみたいという方は、一度試してみてはいかがでしょうか?