読者です 読者をやめる 読者になる 読者になる

React Nativeアプリを爆速で作れるツールCRNAを試してみた

f:id:morugu:20170320094540p:plain

React Native BlogでCRNAが発表されていて

モック開発用?Production投入できるの?

と気になったので試してみました。

facebook.github.io

CRNAとは

Create React Native App の略称で、Facebook(React Community) からリリースされた React Nativeの開発を支援するためのツールで

XcodeAndroid Studioを使用すること無く(!)

React Nativeで書いたコードを実機で動かすことが可能です。

there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.

どんな仕組で動くの?

最終的にはExpoというJavaScriptで書かれたコードをiOS/Androidで動かすことができるアプリ上で動作します。

なので

React Native > Expoで動くJavaScriptに変換 > Expoで動作

といった流れで動くようになります。

試した環境

事前準備

  • node 6.0 以上が必要になります

Node.js

  • 動作確認にはExpoが必要になります

expo.io

  • Macと動作確認に使用する端末が同じネットワークに繋がっている必要があります

アプリ作成

公式のチュートリアル通りに進めていきます。

CRNAをインストールして create-react-native-app コマンドでプロジェクトを作成します。

$ npm i -g create-react-native-app
$ create-react-native-app my-project
Success! Created my-project at /dir-path/my-project
Inside that directory, you can run several commands:

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-project
  npm start

Happy hacking!

と表示されれば作成成功です!

$ cd my-project
$ npm start

とするとターミナル上にQRコードが表示されるので

Expoアプリを起動してQRコードを読み取ります。

f:id:morugu:20170320082548p:plain

アプリが表示されました!

変更するにはApp.jsを修正します。

画像を追加してみます。

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Image
        style={{width: 50, height: 50}}
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

エディタで保存すると、アプリ側も自動で更新されて

f:id:morugu:20170320082555p:plain

画像が表示されました!

このようにエディタで変更を保存すると、すぐに実機で動作確認ができるのがCRNA最大のメリットです。

Xcode/Android Studio用プロジェクトに書き出す

これだとモックの開発で終わり? と思っていたら

Xcode/Android Studio向けのプロジェクトに書き出す機能も用意されています。

$ npm eject

を実行するとindex.ios.js, ios/, index.android.js, android など

react-native init でプロジェクトを作成した時と同じReact Nativeのディレクトリ構成で出力され

Xcode/Android Studioで開くことができるプロジェクトも生成されます。

CRNAでモック作成 > ejectして本開発開始 > OS毎のライブラリ導入/調整

という流れで開発が可能になります!

所感

いままでの開発ではMaciPhoneを繋いで、Profile整えて、、と実機確認で面倒なことが多かったので、QRコードから読み込んで確認というアプローチは煩わしさが消えて楽になりました!

今回は1ファイルのシンプルなアプリでしたが、複数ファイルや外部ライブラリを入れたりしたときにejectが問題なく動作するのかなど、実践でどの程度使用できるかを引き続き試していきたいと思います。

Mackerel を AWS Elastic Beanstalk で設定 ( 2017/02/17 時点 )

2017/02/17 時点でもこの方法で設定できました。

uozias.hatenablog.com

 

設定ファイルの作り方

docs.aws.amazon.com

Facebook通知APIについて

  • ベータ版で提供されている。

 

→ web連携(Facebookアカウントでログイン等)、ネイティブアプリからは現在利用不可。

 

 

  • 最新ドキュメント参照

https://developers.facebook.com/docs/games/notifications/jp/#api

→ 旧仕様から変更箇所あり。

 

  • 参考URL

http://tanihiro.hatenablog.com/entry/2012/09/03/113159

PostgreSQLで特定日時のデータを取得する

想定シーン:

毎日朝5時に、昨日の 00:00 ~ 23:59 のデータを抽出したい場合。

少し考えてしまったので、自分用に忘備録。

 

select * from table_name where date between ¥

to_timestamp(to_char(current_timestamp + '-1 days', 'YYYY-MM-DD 00:00:00'),'YYYY-MM-DD HH24:MI:SS') ¥

and to_timestamp(to_char(current_timestamp + '-1 days', 'YYYY-MM-DD 23:59:59'),'YYYY-MM-DD HH24:MI:SS');

 

流れ:

①.現在日時から-1日した、文字列を作る(時間は 00:00:00)

②.①のままだとタイムスタンプとして扱えないので to_timestampで変換する

 

うーん。もっとシンプルに書ける気が・・。

 

・to_char()

タイムスタンプを文字列に変換する

・to_timestamp()

文字列をタイムスタンプに変換する

 

 

GraphDB関連記事まとめ

 

参考になりそうな記事を日付が新しい順に。

 

Neo4jでグラフ問題を効果的に取り扱おう(2013-02-28) 

 ・MongoDB de GraphDB(2013-01-07)

GraphDBについて(2012-12-28)

第1回GraphDB勉強会に参加してきた。(2011-10-09)

GraphDB 徹底入門(2011-01-23)

Neo4j勉強会に参加してきた[Neo4j][GraphDB]

 

第2回Neo4j 勉強会に参加して来ました。

 

きっかけはNeo4j公式ソーシャルグラフの図をみて、

DBに入ってるデータの繋がりを可視化できたら面白そう!と思って。

 

■アジェンダ

①•Web管理ツールを使ってみよう(初心者向け)

資料:http://www.slideshare.net/masahirosatake/neo4jjava

②•Neo4jを使ったトレーサビリティ 

③参加者の自己紹介 と LT(Lightning Talk)

 

■つぶやきまとめ

http://togetter.com/li/508160

 

■感想

Neo4jの活用方法として、

①課題が存在する

②課題に関連するデータを集める

③集めたデータをグラフにしてデータ(Node)同士の繋がり(Edge)を可視化させる

④グラフ化によって新しい発見・新しいアプローチ方法を得る。

⑤それを元に改善案を生み出す

といった感じなのかなと。

 

特に面白かったのが、ぬこ@横浜さんのLT。

ラーメンデータベースで"自分からみた神奈川県ユーザーのHOP数"で、

Neo4jを使って、自分と直接の繋がりはないが関係わりとが近い(≒自分に興味を持ちやすい)ユーザーは誰か調べてみた、というもの。

ここではランキングを上げるためにはこの辺りへアプローチすればいんじゃね?というお話でした。

これって他にも色々使えるよなーと関心しておりました。

 

■今後に向けて

①技術系勉強会に行くときはデモでもクソでもいいから、触って何か作ってから行く。

勉強会で初めて触れるか、事前になんとなくでも知っているかでは理解度に差が出る。

→質問も突っ込んだものができる。

 

②自己紹介用の資料を準備していく

小規模勉強会では参加者の自己紹介がある場合が多いと思うので、

たとえ30秒でもスクリーンに映して話したほうが与える印象は大きい。

→この技術好きです、こんなん作ってます、Twitter・FBのアカウント等々。

→懇親会や別の勉強会で再び会った時に、あの話してた人!みたいな。

 

以上です!

外部キー制約を定義したテーブルの削除 ~終わらないdrop table~

 

いつも通り

begin;

drop table table_name;

...

...

おわらない!

 

困った時の公式ドキュメント

http://www.postgresql.jp/document/9.2/html/sql-droptable.html

CASCADE

削除するテーブルに依存しているオブジェクト(ビューなど)を自動的に削除します。

drop table table_name cascade;

無事削除できた!

 

ちなみに・・・デフォルトは restrict が指定されてる

・RESTRICT

依存しているオブジェクトがある場合に、テーブルの削除を拒否します。 こちらがデフォルトです。
件数が少ないテーブルを対象としていたので、違うテーブルをdropしたかと思って焦りました。。