ReactNativeに入門しました

お仕事させていただいているお客様先で、

社内の勉強会がありまして、順番でスピーカーにならねばならないのですが、

そちらでちょっとお話させていただく機会を与えられたのですが、

何を話していいのやらネタがなくて、

とりあえず最近気になっているReactNativeについて発表してみました。

「ReactNativeに入門しました」というタイトルで発表してきました。

勉強会の３日前に慌てて環境を作り、簡単なコンポーネントを作成し、

３日でできた内容について資料をまとめて、話してきました。

環境を作るのはmacならとても簡単でした。

ほぼこれ通り。

facebook.github.io

ただ、AndroidはSDKにパスを通していてもエミュレータにインストールができなかったので、AndroidStudioで作ったプロジェクトからまま拝借したlocal.propatiesファイルを使いました。

作ったもの

github.com

まだちょっとしか触っていないので良くわかっていないのですが、

CSSはReactNativeが用意しているものしか使えないのでしょうか。

エラーになって使えないものがあったのですが、

何かやり方があるんでしょうか。

ちょっと良くわからないので、今後も引き続き勉強していこうと思います。

【Android】【Realm】Stethoでデータを確認したい

今、個人的に作っているアプリでRealmを使っているのですが、

データがちゃんと入っているか確認したいですよね。

そんな時にお役に立つのが、

Stethoです。

Stethoはアタッチしている端末の情報をブラウザで見ることができるライブラリです。

んで、Realmのデータを見る為には、

github.com

これ！

Stetho-Realmを使うといいです。

使い方は簡単。

あ、古いRealmだと使えないので、Realm2.1.0にしました。

dependencies {
  compile'com.facebook.stetho:stetho:1.4.1'
  compile 'com.uphyca:stetho_realm:2.0.0'
}

これいれる、Syncする。

古いrealmを使ったアプリが入っている場合には、一度アンインストールする必要があります。

apkをinstall！

で、Chromeブラウザを開きます。

developer consoleを開きます。

右上のメニューから「Remote Device」を選択すると新しいタブがどこかにでますので、そこから接続中の端末（エミュレータ）を選択して「insept」ボタンを押します。

すると新しい画面が立ち上がります。

ちょっと見ずらいですが、こんな画面がでますので、

左の「Web SQL」→自分の作ったrealmファイル→テーブル名

でデータを見ることができます。

便利！

これでデータ確認の為にログ入れたりする必要がなくなりますね。

shibuya.apkへ行ってきました

shibuya-apk.connpass.com

先週はこちらのshibuya.apkへ行ってきました。

会場はyahooさんの新オフィスですね。

凄く綺麗で楽しげなオフィスでした。

お酒に軽食も出ましたしね！

大変おいしゅうございました。

ごちそうさまです。

さて、肝心の勉強会の内容なのですが、

1、AppShortCut

こちらは、7.1に新しく搭載された機能です。

yahooブラウザアプリにも実装したらしいのですが、

そもそもAndroidの7.1系を使っている人が3500人くらい。

AppShortCutが実際に使われているのが平気5/月回くらいらしいのです。

まだまだ、7系ユーザーが少ないので、使われる頻度は今の所少なそうということでした。

2、AndroidStudio2.3

まだまだ動作不安定のもよう。

UI Editorのパレットがカテゴリ分けされるようになるらしいです。

これは、確かに探すの面倒なんですが、カテゴリを覚えている訳ではないので、結局全部開いて探しちゃいそうです。

それと、Vector画像を文字検索できるようになるらしい。

それからそれから、WebP画像が作れるようになるとか。

その他にも機能盛りだくさんのようです。

3、Fiebase Remoto Config

Fierbaseにこんな機能があったんですね。

これから作るアプリはFirebaseを使うのが一般的になってくると思うので、

Firebaseだけで色々できるのは便利ですね。

４、anko

JetBrainsが作ってるレイアウトをコードで書こうっていう趣旨の技術ですね。

良い所はxmlのレビューをしなくていいところ。

悪いところはDataBindingが使えない、CustomViewを沢山作ろうとすると色々面倒って言ってたと思います。

５、ReactNative

のテストの話。

今テストを書こうとすると辛いってお話だったと。

そもそもまだReactNative自体が怪しい感じなので、

まだお仕事でReactNativeを採用するのは早いのではないかと。

６、android things

これはとても面白かったです。

ラズベリーパイにandroid thingsを入れて遊んでみたってお話。

残念ながらラズパイとプロジェクターの相性が悪くて、

動いている画面は見ることはできなかったのですが。

今週はandroid thingsの勉強会へ行くので楽しみです。

７、マテリアルデザイン

マテリアルデザインを歌っているわりには公式のsupport Liblaryが使いづらいし、下手したらバグっているってお話。

libraryのprivateメソッドを強引にいじってなんとか実現しましたというお話でした。

なんやかんやで、公式よりサードパーティのライブラリ使っちゃいますよね。

８、Backend for Frontend

これは、サーバーの構成をどうするかというお話。

おそらく殆どのプロジェクトがAPIはWeb、Android、iOSで共有て使っているんだろうけど、１つのサーバーから更に、Web用、iOS用、Android用と分けて、そこからフロントに向けてデータを飛ばすとフロント側で無駄なデータを受信しなくてよくなるってことらしい。

しかし、当然ながらバックエンド開発の工数が増えるっていうデメリットもあります。

９、Image Keyboard

support libraryで古いOSでもキーボードが簡単に作れるというお話だったかと。

ちょっとこれは楽しげですね。

やってみたい。

そんな感じだったと思います。

大変面白くて有意義でした。

しかし、こちらの勉強会は大人気で抽選なんですよね。

また行きたい。

React Native勉強会へ行ってまいりました

今日はこちらの勉強会へ行ってきました。

d-cube.connpass.com

React.jsは書いたことがないので、どういうものかさっぱりなのですが、

angular2を書いたことがあるのでなんとなく雰囲気はつかめました。

書き方は似ていますね。

javascriptは嫌いじゃないですが、セミコロンがちょっとうざい感じですよね。

angular2だと公式がTypeScriptやDartで書いてjsにコンバートする仕組みを作ってくれているのでjavascriptを直接かかなくてもいいのですが、Reactにはそういうのないんでしょうかね。

ここのところお仕事でもセミコロンのない言語を使っているので、なんとかセミコロンとはさよならしたい。

sites.google.com

ちゃんと調べてないのですが、Kotlinでもこんなことができそうなので、

もしかしたらKotlinで書いてjavascriptを吐き出してReact NativeでiOSアプリを作るとかできるかもですね。

Androidで動くViewを改造してみました。

これなんですが、

github.com

github.com

こちらの「GestureTransformableView」を改造してみました。

丁度お仕事で作っているアプリでTextViewを動かす処理が必要になりまして、

こちらのOSSを使ってみようかと思ったのですが、ちょっと色々やってみたいことがあったので、ソースを流用して改造することにしました。

やりたいこと

・Kotlinにする

・TextViewも動かせるようにする

・AndroidStudioプロジェクトにする

qiita.com

この辺を参考にライブラリプロジェクトを作成して、

Kotlinが使えるようにしておきます。

GestureTransformableViewのファイルをコピーします。

とりあえずはConverterを使ってktファイルに直します。

元のソースだと動くImageViewしかないのですが、今回はTextViewも動かしたいので、

ImageViewをコピーしてTextViewバージョンを作ろうとしたのですが、

どうやらViewとdetectorで相互に参照しているところがあって、単純にコピーで増やすことはできなそうです。

しかたがないので、改造！

detector側からViewのインナークラスを参照していたところをinterfaceを使ってデータのやりとりをするようにしてみました。

これでいくらでも他のViewをコピペで増やすことができるようになりました！

めでたしめでたし。

このままjCenterに公開したかったのですが、

なんだかうまくいかなかったので諦めました。

github.com

こちらのライブラリを使ってBintrayにuploadしようとしたのですが、

まずKotlin使っているとjavadocが作れずにBuildErrorになっちゃいます。

そこはgradleに

afterEvaluate {
  tasks.findByPath(":gesturetransformableview:mavenAndroidJavadocs").enabled = false
}

って追加すればjavadocを作るタスクを省いてくれるのでクリアできたのですが、

肝心のuploadのところで認証エラーになってしまい、何が原因なのかよく分からないので諦めました。

またいつか頑張ろうと思います。

Android Bazaar Conference 2016 Autumnへ行ってきました。

japan-android-group.connpass.com

今日は生憎の雨でしたが、こちらのカンファレンスへ行ってきました。

会場は柏でちょっと遠かったですが、とても綺麗な会場でした。

Androidの会の人たちや、Androidアプリを作っている会社の人たちが自分たちの作ったアプリを紹介しているブースや講演なんかをやっていました。

本当は10時から行って午前の講演もききたかったのですが、昨夜はお酒を飲みすぎて電車で最寄り駅を通過してしまい家に帰るのが遅くなってしまい朝、起きれませんでした。

全体的にIotの話やアプリが多かった気がします。

農業とアプリとクラウドを組み合わせたりとか面白いですよね。

あと、機械学習ですね。

そして、ハンズオンなんかもやっているので私はXamarinハンズオンに参加してきました。

jxug.connpass.com

XamarinはC#で書くんですが、JavaでもアレだったfindViewByIdの書き方がやっぱりアレだなって思いました。

あと、Clickイベントの書き方がちょっと特殊だなって思いました。

あれがC#流ラムダ式なんでしょうか。

XamarinでもButterKnife的なライブラリがあればもちょっと綺麗に楽に書けるんですが。

いろんなプラットフォームのアプリが１つのコードでできるのは大変便利ですが、やっぱりAndroidだけ作るならKotlinが最高に便利だなって思いました。

今日の発表は後日youtubeに配信されるので、今日行ってない方はyoutubeチェックしてみるといいと思います！

AmebaTV Developer Conference へ行ってきました

abematv.connpass.com

先日、こちらのカンファレンスへ行ってきました。

ちょうどお仕事でも動画をやっていたので、

動画をネイティブアプリに実装する方法や苦労など、

いろいろ共感持ちつつ、なるほどなっていうお話が多くて面白かったです。

資料等はこちらから見れそうです。

AbemaTV Developer Conference 2016

Web、iOS、Android全てでFluxを採用してるみたいですね。

なるほど、FluxというとWebなイメージでしたがネイティブでも有効なんですね。

結構具体的な実装方法を教えてもらいましたので、

丁度お仕事でiOSアプリを作ろうかと思っていたのでFlux使ってみようかと思います。

あ、あと、AndroidはKotlinで作ってるみたいで、羨ましかったです。

弊社でもKotlin使いたいけど、一緒にやる人達がガチ初心者っぽいので最初はJavaにしてあげるのが親切なのかなぁって思います。