改めてReactをやってみる1

少し前にReactやったが、時間が過ぎたので改めてやってみる。

React

公式ページ

環境構築

---

Create React App というものが用意されているらしい。
折角なのでそれを使って環境を構築してみる。

sh

$ npm install -g create-react-app
$ create-react-app react-sample

Editor

こちらにおすすめパッケージやらが乗っている
とりあえずAtom使いなのでlanguage-babelはインストール

 実装

---

簡単なサンプル

チュートリアルにもあるように一旦src/*のファイルを削除
index.cssとindex.jsを追加し、index.jsを以下のように修正

js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

yarn startすると空のページが表示される。

コンポーネントを作る

チュートリアルにあるサンプルのコンポーネントを試してみる

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<ShoppingList name="Mark" />, document.getElementById('root'));

実行結果

 バッドノウハウ

---

create-react-appでエラー

error An unexpected error occurred: "https://registry.yarnpkg.com/setimmediate: socket hang up".
info If you think this is a bug, please open a bug report with the information provided in "/Users/xxxxx/react-sample/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: socket hang up
    at TLSSocket.onHangUp (_tls_wrap.js:1124:19)
    at TLSSocket.g (events.js:292:16)
    at emitNone (events.js:91:20)
    at TLSSocket.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
Error: socket hang up
    at TLSSocket.onHangUp (_tls_wrap.js:1124:19)
    at TLSSocket.g (events.js:292:16)
    at emitNone (events.js:91:20)
    at TLSSocket.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

原因: 自分の場合はウィルス対策ソフトを一時的に無効化したらすんなり通った。。

 関連リンク

---

• tutorial

AmazonFireTV上で動くアプリを作る

公式ページ

FireTV用のアプリは大きく

• Androidアプリ
• Webアプリ

の2つある。

FireOS用と通常アプリの違い

• FireOS
  AndroidからフォークされたOS
  (拡張範囲はLollipopおよびバックポートされたMarshmallowコードまで)
• Leanback Support Library
  Fire TVでは、AndroidのLeanback Support Libraryが一部サポートされている
  CATEGORY_LEANBACK_LAUNCHERがFire TVでは認識されない
• Google Play Servicesが使用できない

詳しくはこちら

環境構築

---

通常のAndroidアプリの様にAndroidStudioを使う

ADB接続

1. Amazon Fire TVでデバッグを有効にする
2. Android Debug Bridgeを設定する
3. 接続

sh

$ adb kill-server
$ adb start-server
$ adb connect <IPアドレス>

詳しくはこちら

 実装

---

簡単なサンプル

サンプリとしてFire App Builderが公開されている
詳しくはこちら

AndroidTV

ベースはAndroidTVでいけるらしいので、
簡単なサンプルをAndroidTV用プロジェクトで作成してみる。

1. 新規プロジェクトでTarget DeviceをTVにする
2. 「Add No Activity」を選択
3. 「MainActivity」を作成
   java

   public class MainActivity extends Activity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
       }
   }
   

4. activity_main.xmlを作成
   xml

   <?xml version="1.0" encoding="utf-8"?>
   <fragment xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_browse_fragment"
             android:name="com.slowhand.androidtvsample.MainFragment" android:layout_width="match_parent"
             android:layout_height="match_parent" tools:context=".MainActivity" tools:deviceIds="tv"
             tools:ignore="MergeRootFrame" />
   

5. MainFragmentを作成
   java

   public class MainFragment extends BrowseFragment {
   
       @Override
       public void onActivityCreated(@Nullable Bundle savedInstanceState) {
           super.onActivityCreated(savedInstanceState);
       }
   }
   

とりあえずここまでで何も表示されない画面ができる

BrowseFragment

HeaderFragment (ヘッダー) が右側、 RowsFragment (コンテンツ部分) が左側の構成を含むFragment

AndroidManifest.xml

Launcherとして表示させるには以下の様に修正

xml

<category android:name="android.intent.category.LEANBACK_LAUNCHER" />




複数アカウントでFirebaseCLIを使う

個人や会社のアカウント等、プロジェクト毎にアカウントが違うような
複数アカウントでFirebaseCLIを使う時に自分がやっている方法です。
(他に良い方法があればご教示ください)

状態

---

すでにfirebase loginしててログイン済み

$ npm install -g firebase-tools
$ firebase login

configstore

---

firebase-toolsはconfigstoreを使ってアカウント情報を
~/.config/configstore/firebase-tools.jsonに保存している。
また、configstoreはデフォルトでは~/.configを見に行くが
XDG_CONFIG_HOMEの環境変数が設定されていればそちらを見に行く。

direnv

---

ディレクトリ毎に環境変数を定義してくれるdirenvを使用して
各プロジェクトのルートディレクトリに移動した時にXDG_CONFIG_HOMEを変えます

各プロジェクトのルートディレクトリに.envrcを配置

export XDG_CONFIG_HOME=~/.config-xxxx

こんな感じにして、事前にログインした~/.config/configstore/firebase-tools.jsonを
~/.config-xxxx/configstore/firebase-tools.jsonにコピーします。

するとプロジェクトに移動した時点で

> cd  XXXXX
direnv: loading .envrc   
direnv: export +XDG_CONFIG_HOME

環境変数XDG_CONFIG_HOMEが設定されます。

アカウント確認方法

---

$ firebase list

でプロジェクト一覧が見れます。

HeadlessChrome

HeadlessChrome

ヘッドレス Chrome ことはじめ

↑こちらを参考に進めて見る。

環境構築

---

Chrome 59以上がインストールされている事

• CLIコマンドのエイリアス

  alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
  alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
  alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
  

 ヘッドレスChromeを使う

---

簡単なサンプル

• DOM出力 --dump-dom
  sh

  $ chrome --headless --disable-gpu --dump-dom https://www.yahoo.co.jp/
  

• PDF出力 --print-to-pdf
  sh

  $ chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.co.jp/
  

• スクリーンショット --screenshot
  sh

  $ chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/
  

• DevToolsを使う --remote-debugging-port=9222
  sh

  $ chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.yahoo.co.jp/
  

  起動後http://localhost:9222を別ブラウザで見るとDevToolsが使える

 プログラムから利用する(Node.js)

---

Lighthouse の ChromeLauncher を使う

インストール

sh

$ yarn add chrome-launcher --dev

シンプルな実装

js

const chromeLauncher = require('chrome-launcher');

chromeLauncher.launch({
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);
});

起動

sh

$ node main.js

chrome-remote-interfaceを使う

chrome-remote-interface
DevToolsと同じような事ができるようにしてくれるAPI

インストール

sh

$ yarn add chrome-remote-interface --dev

キャプチャを撮るサンプル

js

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');

chromeLauncher.launch({
  port: 9222,
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);

  CDP(async (client) => {
    const { Page } = client;
    try {
      await Page.enable();
      await Page.navigate({ url: 'https://www.chromestatus.com/features/' });
      await Page.loadEventFired();
      const { data } = await Page.captureScreenshot();
      console.log('Image saved');
      fs.writeFileSync('scrot.png', Buffer.from(data, 'base64'));
    } catch (err) {
      console.error(err);
    }
  }).on('error', (err) => {
    console.error(err);
  });
});

※node 7.6.0以上で動作

その他

---

asyncとかawaitとか使えるのはnode 7.6.0以上!