Javascriptの復習もかねて記事を書いていきます。
今日は関数と配列について。

関数の書き方

①関数宣言

function wanko(){
         }

wankoという関数名をつけて関数宣言しています。
おなじみですね。

②関数式

const wanko = function(){
      }

const wanko = () => {
      }

無名関数というやつです。
関数はデータの方として存在しているのでこのような書き方が可能になります。

Functionオブジェクトのオンストラクタを使った書き方もあるのですが、ほぼ間違いなく使わないので省略します。

書き方

const p = document.createElement('p');
p.textContent = 'wanko';
documen.body.appendChild(p);

これを関数にすると

function toypoo(){
    const p = document.createElement('p');
    p.textContent = 'wanko';
    documen.body.appendChild(p);
}

コード自体はdocument.createElment(p)でp要素を作成
p要素のtextContentをwankoに
bodyにp要素を付与しています。

toypooという関数が出来ましたね、toypoo();で呼び出せます。

ボタン
このように書くとボタンを押したらtoypoo関数が呼び出されます。

HTMLファイルが読み込まれたらwankoと表示します。
window.onload = function(){
    console.log('wanko');
}

window.addEventListner('load', function(){
    console.log('wanko');
})

引数

Javascriptでは引数を複数指定できます。

function wanko(pome,toypoo){

    }

引数にpomeとtoypooを指定することで関数内でpomeとtoypooが使えるようになります。

wanko(1,2);

それぞれpomeとtoypooに対応しています。

引数にコールバック関数

function wanko(callback){
    setTimeout(function(){
        console.log('wanko');
        callback();
    }, 2000)
}

引数にcallback関数を指定しているので2秒経過後に引数に指定した関数が実行されます。

returnで返り値

function wanko(toypoo, pome){

    return toypoo+pome;
}

if(wanko(7,5) > 3){

 console.log('wan');
}  else {
       console.log(wanwan);
}

returnで返り値を戻すことで普通の値として関数を使えるようになりました。

続く

はじめに

短く書くにはどうすればいいか調べたのでまとめたよ。

ゴール

index.js

const string = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";

function findShortWord(s){
    return Math.min(...s.split(" ").map (s => s.length));
}

console.log(findShortWord(string));

概要

Math.min()

• 引数に渡された一番小さい値を返す。
• MDN Web Docs - Math.min()

スプレッド構文（...）

• 配列・関数の引数・オブジェクトを個々に展開できる。
• MDN Web Docs - スプレッド構文

String.prototype.split()

• 文字列を、引数で指定した区切り文字で分割して、配列で返す。
• MDN Web Docs - String.prototype.split()

Array.prototype.map()

• 配列の各要素に関して、コールバック関数を実行して配列で返す。
• MDN Web Docs - Array.prototype.map()

さいごに

• スプレッド構文（...）をちゃんと勉強したけど、こんなに便利だと思わなかった。

ほんとにどうってこと無いメモです。

久々に開発しようとしたNuxtJSプロジェクトで、node-sassがコケました。
node-sassはv4.13.0です。

$ yarn dev

・
・
・

● Client █████████████████████████ building (61%) 431/466 modules 35 active
 node_modules/markdown-it/lib/rules_core/state_core.js

✖ Server
  Compiled with some errors in 9.34s


✖ Client
  Compiled with some errors in 13.93s

✖ Server
  Compiled with some errors in 9.34s


 ERROR  Failed to compile with 1 errors                                            friendly-errors 23:04:34


 ERROR  in ./layouts/blog.vue?vue&type=style&index=0&lang=scss&                    friendly-errors 23:04:34

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                 friendly-errors 23:04:34
Error: Missing binding /Users/n0bisuke/dotstudio/1_protooutstudio/node_modules/node-sass/vendor/darwin-x64-79/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 13.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 12.x

・
・
・

みたいなコケかたをしました。

Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 13.x

この64-bitをみると一瞬カタリナにmacOSをアップデートしたから怒られるやつかと思いましたが、

Found bindings for the following environments:
  - OS X 64-bit with Node.js 12.x

こちらを見ると既に64bit Node.js v12でnode-sassが紐付けされてたみたいですね。

それにしてもエラー表示がすごい。

これで解決

yarn add node-sass

npmの人も入れ直せばOK。

What

expoのAppAuthの登場で、イジェクトなしでOAuth実装が非常に簡単になりました。
マイナーなSNSとの連携が必要な場合に非常に重宝しますね。

実装手順は以下
グーグルログインの場合

import * as AppAuth from "expo-app-auth";

 const config = {
    issuer: "https://accounts.google.com",
    clientId: "クライアント識別子"      
    scopes: ["profile"]
  };
 const tokenResponse = async () => {
    const authState = await AppAuth.authAsync(config);
    console.log(authState);
    return authState;
  };

これだけの手順でOauth認証が実装できます。非常に簡単ですね。
※AppAuth.authAsync()はtoken情報のみを返します。

What

expoのAppAuthの登場で、イジェクトなしでOAuth実装が非常に簡単になりました。
マイナーなSNSとの連携が必要な場合に非常に重宝しますね。

実装手順は以下
グーグルログインの場合

import * as AppAuth from "expo-app-auth";

 const config = {
    issuer: "https://accounts.google.com",
    clientId: "クライアント識別子"      
    scopes: ["profile"]
  };
 const tokenResponse = async () => {
   try {
     const authState = await AppAuth.authAsync(config);
     console.log(authState);
   } catch ({ message }) {
     alert(`${message}`); 
   } 
 };

これだけの手順でOAuthが実装できます。非常に簡単ですね。
※AppAuth.authAsync()はtoken情報のみを返します。

はじめに

Vue.jsをある程度やり、propsで子コンポーネントにデータの受け渡しをできるようになった…。
ところでSlotてあるけど、どういうシチュエーションで使っていくのだろうか、ってのを考えていきましょう。
ついでにPropsとどう使い分けていくのかも。

おさらい

まずはPropsとSlotは何なのかのおさらいをしていきましょう。

Propsとは

Props - Vue.js

Vue.jsでコンポーネント間のデータの受け渡しをする上で最も基本的な機能ですね。
親側でv-bindや子側のProps名でデータを紐付けて、子側はProps内にプロパティで型とか状態を指定してって使い方。

parent.vue

<div>
  <child title="Qiita!"></child>
  <child :title="Vue"></child>
<div>
//*省略
data() {
  return {
    Vue: "Vue.js!"
  };
},

child.vue

props:{
  title:{
    type:String,
    required: true
  }
}

上のtitle="Qiita!"は文字列を受け渡し、下の:title="Vue"はVueというインスタンス変数などをv-bindで受け渡ししています。

Slotとは

Slot - Vue.js

コンポーネントの開始タグと終了タグの間に、何かしらの要素があった時に、それを子側で<slot></slot>と置換する機能ですね。
子側に<slot></slot>がないと、親側でタグの間に要素があってもそれは表示されないので、表示させたい場合は子側に<slot></slot>を指定してあげる必要があります。

parent.vue

<template>
  <child>
    Qiita!
  </child>
</template>

child.vue

<template>
  <slot></slot>
</template>

<child>に囲まれたQiita!の文字列が、子の<slot></slot>と置換され、Qiita!が表示されます。
なお、これは文字列だけではなく他のタグ要素に囲まれた物も置換されます。

parent.vue

<template>
  <child>
    <h1>Vue.js!</h1>
    <span>YES!Vue!</span>
  </child>
</template>

child.vue

<template>
  <slot></slot>
</template>

<h1>タグと<span>タグも、子の<slot></slot>と置換されます。
主に親コンポーネントの要素を子要素に差し込みたいってときに使うと思います。

使い分けを考える

値を渡すだけならProps

文字列なり数値なり、単にデータを受け渡すのならslotでやるよりもPropsでやるべきです。

状態で中の要素が変わるならslot

v-ifなどで中の要素の構成が動的に変わる事があり、それを子側で挟み込んでやりたい。
という場合にはslotを使ったほうが、子側にpropsを使い状態を渡してやるよりも依存関係が薄くなり、
子側のコンポーネントの再利用性が上がるので、このような場合はslotを使いましょう。

parent.vue

<template>
  <child>
    <template v-if="flag">
      <h1>Vue.js!</h1>
      <span>YES!Vue!</span>
    </template>
    <template v-else>
      <p>Error!!!</p>
    </template>
  </child>
</template>

child.vue

<template>
  <slot></slot>
</template>

flagの値がtrueの時は上の要素が、falseの時は下のErrorとかかれた要素が表示されます。
また、置換したい親側の要素をVueコンポーネントにしても、それを子側のslotで置換することができます。

AtomicDesignで使ってみよう

AtomicDesignを使ってコンポーネント設計を行っていた場合にでも、AtomやMoleculesなど、コンポーネントの粒度が細かい箇所でよく使う機能になります。
特にAtomレベルのコンポーネントは、それ以上機能として分けれない、親との疎結合性を保つ必要がある、
などの必要があるのと、なによりもAtomコンポーネントの中に他の要素を入れる事はAtomicDesignの考えから離れてしまいます。
なので、AtomicDesignでも要素の子に別の要素を入れたい…！という時には、slotを使って置換させる、などの手法が特に有効と思います。

おわり

作成中のプロジェクトでslotを使う機会が出てきたので、今回は記事にしてみました。
propsもslotもどちらも子に何かしらの値や要素を受け渡す便利な機能ですが、
どちらも使い方によってはアンチパターンとなるので、しっかりとコンポーネントの設計を考えていく必要がありますね。

機能

• Native Modules
  出来ること
  ・関数の作成
  ・イベントの通知
  ・コールバック

• Native UI Components
  出来ること
  ・Viewの作成
  ・Viewのイベントの通知

Native Modules

ダイアログを表示するModuleを例にします。

[機能]
1, Androidのダイアログを表示する。（関数の作成）
2, ダイアログの"OK"ボタンがクリックされたらコンソールに"true"が表示される。（イベントの通知）
3, "DATE"ボタンがクリックされたら現在時刻が表示される。（コールバック）

DialogModule.java

public class DialogModule extends ReactContextBaseJavaModule {
    // コンストラクター
    public DialogModule(@NonNull ReactApplicationContext reactContext) {
        super(reactContext);
    }
   // このモジュールを呼び出すためのタグのようなもの
   @Override
    public String getName() {
        return "DialogModule";
    }

    // RNで使用出来るクラス定数を定義出来る
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SINGLE_BUTTON", "SINGLE");
        constants.put("DOUBLE_BUTTON", "DOUBLE");
        return constants;
    }

    // ダイアログを表示する関数
    @ReactMethod
    public void showDialog(String message, String type) {
        if (type.equals("SINGLE")) {
            new AlertDialog.Builder(getCurrentActivity())
                    .setTitle("DialogModule")
                    .setMessage(message)
                    .setPositiveButton("CLOSE", (dialog, which) -> {
                        dialog.dismiss();
                    })
                    .show();
        } else {
            new AlertDialog.Builder(getCurrentActivity())
                    .setTitle("DialogModule")
                    .setMessage(message)
                    .setPositiveButton("OK", (dialog, which) -> {
                        sendEvent();
                    })
                    .setNegativeButton("CLOSE", (dialog, which) -> {
                        dialog.dismiss();
                    })
                    .show();
        }
    }

    // 現在時刻を表示してコールバックする関数
    @ReactMethod
    private void getCurrentTime(Callback callback) {
        Calendar calendar = Calendar.getInstance();
        callback.invoke(calendar.getTime().toString());
    }

    // ボタンがクリックされたことを通知するイベント
    private void sendEvent() {
        WritableMap params = Arguments.createMap();
        params.putBoolean("click", true);
        getReactApplicationContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onClick", params);
    }
}

解説

getName

RNから呼び出す際の文字列を"DialogModule"のように記述する必要があります。

@Override
public String getName() {
    return "DialogModule";
}

getConstants

RNから使用できるMolueのクラス定数を設定できます。
※実装は必須ではありません。
constants.put(定数名, 値);

public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put("SINGLE_BUTTON", "SINGLE");
    constants.put("DOUBLE_BUTTON", "DOUBLE");
    return constants;
}

@ReactMethod

RNから使用できるメソッドを設定できます。
コールバックを実行する場合は.invoke()で実行します。

@ReactMethod
private void getCurrentTime(Callback callback) {
    Calendar calendar = Calendar.getInstance();
    callback.invoke(calendar.getTime().toString());
}

イベント(リスナー)
RNに登録できるイベントを設定できます。

// コールバックの値を設定
WritableMap params = Arguments.createMap();
params.putBoolean("click", true);
// イベント名とコールバックの値を設定
getReactApplicationContext()
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
    .emit("onClick", params);

Native UI Components

動画playerを表示するViewを例にします。

[機能]
1, 動画playerを表示する。（Viewの作成）
2, urlをRN側からpropsで受け取り動画を再生する。
3, 再生終了時にログを表示する。（Viewのイベントの通知）

VideoViewManager.java

public class VideoViewManager extends SimpleViewManager<VideoView> {
    private Context context;

    // このモジュールを呼び出すためのタグのようなもの
    @Override
    public String getName() {
        return "VideoView";
    }

    // 使用するViewのインスタンを返すコンストラクターのようなもの
    @Override
    protected VideoView createViewInstance(ThemedReactContext reactContext) {
        this.context = reactContext;
        return new VideoView(reactContext);
    }

    // Propsで受け取った値で処理をする関数
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @ReactProp(name="url")
    public void setVideoPath(VideoView videoView, String urlPath) {
        Uri uri = Uri.parse(urlPath);
        videoView.setMediaController(new MediaController(context));
        videoView.setVideoURI(uri);
        // 再生準備出来次第再生する
        videoView.setOnPreparedListener(mp -> {
            videoView.start();
        });
        // 再生終了時にpropsの『onFinish』にコールバックする。(通知)
        videoView.setOnCompletionListener(mp -> {
            ReactContext reactContext = (ReactContext)context;

            WritableMap event = Arguments.createMap();
            event.putString("message", "onDirectEvent");
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onDirectEvent",event);

            WritableMap event2 = Arguments.createMap();
            event2.putString("message", "onBubblingEvent");
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onBubblingEvent",event2);
        });
        videoView.getDuration();
    }

    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("onDirectEvent", MapBuilder.of("registrationName", "onDirectEvent"))
                .build();
    }

    @Override
    public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("onBubblingEvent", MapBuilder.of("phasedRegistrationNames",
                                    MapBuilder.of(
                                            "bubbled", "onBubble",
                                            "captured", "onCapture")))
                .build();
    }
}

解説

getName

RNから呼び出す際の文字列を"VideoView"のように記述する必要があります。

@Override
public String getName() {
    return "VideoView";
}

@ReactProp

ViewのPropsを受け取るセッターメソッド
メソッド名自体はなんでもいいです
@ReactProp(name="props名")
public void setProp(Viewの型 view, 型 Propsの値)

@ReactProp(name="url")
public void setVideoPath(VideoView videoView, String urlPath) {
        // ...
}

createViewInstance

Viewのインスタンスを返す関数
※必須です

@Override
protected VideoView createViewInstance(ThemedReactContext reactContext) {
    return new VideoView(reactContext);
}

イベントの通知
Propsのコールバックを設定できます。

イベントの登録

イベントを登録するメソッドは２つあります。
・getExportedCustomDirectEventTypeConstants
・getExportedCustomBubblingEventTypeConstants

getExportedCustomDirectEventTypeConstants

1つのイベントで1つのpropsに通知する。
登録方法
MapBuilder.builder().put("イベント名", MapBuilder.of("registrationName", "プロップス名")).build();

getExportedCustomBubblingEventTypeConstants

1つのイベントで2つのpropsに通知することができる。
登録方法
MapBuilder.builder().put("イベント名", MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "プロップス名１","captured", "プロップス名２"))).build();

// イベントを登録する関数１
@Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
    return MapBuilder.<String, Object>builder()
            .put("onDirectEvent", MapBuilder.of("registrationName", "onDirectEvent"))
            .build();
}

// イベントを登録する関数２
@Override
public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
    return MapBuilder.<String, Object>builder()
            .put("onBubblingEvent", MapBuilder.of("phasedRegistrationNames",
                                MapBuilder.of(
                                        "bubbled", "onBubble",
                                        "captured", "onCapture")))
            .build();
}

通知したい箇所でreceiveEventを呼び出す
receiveEvent（"viewのID", "イベント名", コールバックの値）

// ...
ReactContext reactContext = (ReactContext)context;
// イベントを通知する処理１ "onDirectEvent"イベント
WritableMap event = Arguments.createMap();
event.putString("message", "onDirectEvent");
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onDirectEvent",event);

// イベントを通知する処理２ "onBubblingEvent"イベント
WritableMap event2 = Arguments.createMap();
event2.putString("message", "onBubblingEvent");
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onBubblingEvent",event2);
// ...

RN側では以下のようにイベントが通知される

<VideoView
      onDirectEvent={({ nativeEvent }) => console.log(nativeEvent.message)} // onDirectEvent
      onCapture={({ nativeEvent }) => console.log(nativeEvent.message)} // onBubblingEvent
      onBubble={({ nativeEvent }) => console.log(nativeEvent.message)} // onBubblingEvent
/>

ModuleとUI Componentの登録

作成したModuleとUI Componentを以下のように登録します

ExamplePackage.java

public class ExamplePackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.<ViewManager>singletonList(
                // UI Componentが増えるたびに追加していく
                new VideoViewManager()
        );
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext
            return Collections.<ViewManager>singletonList(
                // Moduleが増えるたびに追加していく
                new DialogModule(reactContext)
        );
    }
}

作成したpackageをMainApplication.java内のgetPackagesに登録します

MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
           // packageが増えるたびに追加していく
           packages.add(new ExamplePackage());
      return packages;
}

RN側

Native Modules

Dialog.jsx

import React from 'react';
import { NativeModules } from 'react-native';
// getName関数の返り値("DialogModule")を指定
DialogModule = NativeModules.DialogModule;

const Dialog = () => {
  const [date, setDate] = React.useState("");

  React.useEffect(() => {
    const eventEmitter = new NativeEventEmitter(DialogModule);
    eventEmitter.addListener('onClick', (event) => {
       console.log(event.change) // "true"
    });
  }, [])

  return (
    <>
      <TouchableOpacity onPress={() => DialogModule.showDialog('SINGLE BUTTON', DialogModule.SINGLE_BUTTON)}>
        <Text>SINGLE BUTTON Dialog</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => DialogModule.showDialog('DOUBLE BUTTON', DialogModule.DOUBLE_BUTTON)}>
        <Text>DOUBLE BUTTON Dialog</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => DialogModule.getCurrentTime(time => setDate(time))}>
        <Text>DATE</Text>
      </TouchableOpacity>
        <Text>CURRENT DATE:</Text>
      <Text>[ {date} ]</Text>
    </>
  )
}

export default Dialog

Native UI Components

VideoView.jsx

import React from 'react';
import { requireNativeComponent } from 'react-native';
VideoView = requireNativeComponent('VideoView');

const VideoView = () => {

  return (
    <>
      <VideoView 
        style={{ width: '100%', height: '100%' }}
        url="https://www.radiantmediaplayer.com/media/bbb-360p.mp4"
        onDirectEvent={({ nativeEvent }) => console.log(nativeEvent.message)}
        onCapture={({ nativeEvent }) => console.log(nativeEvent.message)}
        onBubble={({ nativeEvent }) => console.log(nativeEvent.message)} />
    </>
  )
}

export default VideoView

おまけ

UI Componentに実装してある関数をModuleから呼びたい場合

ExamplePackage.java

public class ExamplePackage implements ReactPackage {
    private ExampleViewManager instance;
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.<ViewManager>singletonList(
                instance
        );
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext
            instance = new ExampleViewManager();
            return Collections.<ViewManager>singletonList(
                // モジュールにViewManagerのインスタンスを渡す
                // あとはモジュール内ので定義した関数からインスタンスのメソッドを呼べば良い
                new ExampleModule(reactContext, instance)
        );
    }
}

最後に

Androidのブリッジ部分については英語の記事ばかりかつ動かないサンプルコードが多く苦労しました。
記事書く時間が少なかったので、抜けてるところや間違った箇所があるかもしれないので記事の内容は参考程度にしてください。

続きまして、React Native Advent Calendar 20日目の記事は @duka さんの「AB test とかの話」です

機能

• Native Modules
  出来ること
  ・関数の作成
  ・イベントの通知
  ・コールバック

• Native UI Components
  出来ること
  ・Viewの作成
  ・Viewのイベントの通知

Native Modules

ダイアログを表示するModuleを例にします。

[機能]
1, Androidのダイアログを表示する。（関数の作成）
2, ダイアログの"OK"ボタンがクリックされたらコンソールに"true"が表示される。（イベントの通知）
3, "DATE"ボタンがクリックされたら現在時刻が表示される。（コールバック）

DialogModule.java

public class DialogModule extends ReactContextBaseJavaModule {
    // コンストラクター
    public DialogModule(@NonNull ReactApplicationContext reactContext) {
        super(reactContext);
    }
   // このモジュールを呼び出すためのタグのようなもの
   @Override
    public String getName() {
        return "DialogModule";
    }

    // RNで使用出来るクラス定数を定義出来る
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SINGLE_BUTTON", "SINGLE");
        constants.put("DOUBLE_BUTTON", "DOUBLE");
        return constants;
    }

    // ダイアログを表示する関数
    @ReactMethod
    public void showDialog(String message, String type) {
        if (type.equals("SINGLE")) {
            new AlertDialog.Builder(getCurrentActivity())
                    .setTitle("DialogModule")
                    .setMessage(message)
                    .setPositiveButton("CLOSE", (dialog, which) -> {
                        dialog.dismiss();
                    })
                    .show();
        } else {
            new AlertDialog.Builder(getCurrentActivity())
                    .setTitle("DialogModule")
                    .setMessage(message)
                    .setPositiveButton("OK", (dialog, which) -> {
                        sendEvent();
                    })
                    .setNegativeButton("CLOSE", (dialog, which) -> {
                        dialog.dismiss();
                    })
                    .show();
        }
    }

    // 現在時刻を表示してコールバックする関数
    @ReactMethod
    private void getCurrentTime(Callback callback) {
        Calendar calendar = Calendar.getInstance();
        callback.invoke(calendar.getTime().toString());
    }

    // ボタンがクリックされたことを通知するイベント
    private void sendEvent() {
        WritableMap params = Arguments.createMap();
        params.putBoolean("click", true);
        getReactApplicationContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onClick", params);
    }
}

解説

getName

RNから呼び出す際の文字列を"DialogModule"のように記述する必要があります。

@Override
public String getName() {
    return "DialogModule";
}

getConstants

RNから使用できるMolueのクラス定数を設定できます。
※実装は必須ではありません。
constants.put(定数名, 値);

public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put("SINGLE_BUTTON", "SINGLE");
    constants.put("DOUBLE_BUTTON", "DOUBLE");
    return constants;
}

@ReactMethod

RNから使用できるメソッドを設定できます。
コールバックを実行する場合は.invoke()で実行します。

@ReactMethod
private void getCurrentTime(Callback callback) {
    Calendar calendar = Calendar.getInstance();
    callback.invoke(calendar.getTime().toString());
}

イベント(リスナー)
RNに登録できるイベントを設定できます。

// コールバックの値を設定
WritableMap params = Arguments.createMap();
params.putBoolean("click", true);
// イベント名とコールバックの値を設定
getReactApplicationContext()
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
    .emit("onClick", params);

Native UI Components

動画playerを表示するViewを例にします。

[機能]
1, 動画playerを表示する。（Viewの作成）
2, urlをRN側からpropsで受け取り動画を再生する。
3, 再生終了時にログを表示する。（Viewのイベントの通知）

VideoViewManager.java

public class VideoViewManager extends SimpleViewManager<VideoView> {
    private Context context;

    // このモジュールを呼び出すためのタグのようなもの
    @Override
    public String getName() {
        return "VideoView";
    }

    // 使用するViewのインスタンを返すコンストラクターのようなもの
    @Override
    protected VideoView createViewInstance(ThemedReactContext reactContext) {
        this.context = reactContext;
        return new VideoView(reactContext);
    }

    // Propsで受け取った値で処理をする関数
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @ReactProp(name="url")
    public void setVideoPath(VideoView videoView, String urlPath) {
        Uri uri = Uri.parse(urlPath);
        videoView.setMediaController(new MediaController(context));
        videoView.setVideoURI(uri);
        // 再生準備出来次第再生する
        videoView.setOnPreparedListener(mp -> {
            videoView.start();
        });
        // 再生終了時にpropsの『onFinish』にコールバックする。(通知)
        videoView.setOnCompletionListener(mp -> {
            ReactContext reactContext = (ReactContext)context;

            WritableMap event = Arguments.createMap();
            event.putString("message", "onDirectEvent");
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onDirectEvent",event);

            WritableMap event2 = Arguments.createMap();
            event2.putString("message", "onBubblingEvent");
            reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onBubblingEvent",event2);
        });
        videoView.getDuration();
    }

    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("onDirectEvent", MapBuilder.of("registrationName", "onDirectEvent"))
                .build();
    }

    @Override
    public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("onBubblingEvent", MapBuilder.of("phasedRegistrationNames",
                                    MapBuilder.of(
                                            "bubbled", "onBubble",
                                            "captured", "onCapture")))
                .build();
    }
}

解説

getName

RNから呼び出す際の文字列を"VideoView"のように記述する必要があります。

@Override
public String getName() {
    return "VideoView";
}

@ReactProp

ViewのPropsを受け取るセッターメソッド
メソッド名自体はなんでもいいです
@ReactProp(name="props名")
public void setProp(Viewの型 view, 型 Propsの値)

@ReactProp(name="url")
public void setVideoPath(VideoView videoView, String urlPath) {
        // ...
}

createViewInstance

Viewのインスタンスを返す関数
※必須です

@Override
protected VideoView createViewInstance(ThemedReactContext reactContext) {
    return new VideoView(reactContext);
}

イベントの通知
Propsのコールバックを設定できます。

イベントの登録

イベントを登録するメソッドは２つあります。
・getExportedCustomDirectEventTypeConstants
・getExportedCustomBubblingEventTypeConstants

getExportedCustomDirectEventTypeConstants

1つのイベントで1つのpropsに通知する。
登録方法
MapBuilder.builder().put("イベント名", MapBuilder.of("registrationName", "プロップス名")).build();

getExportedCustomBubblingEventTypeConstants

1つのイベントで2つのpropsに通知することができる。
登録方法
MapBuilder.builder().put("イベント名", MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "プロップス名１","captured", "プロップス名２"))).build();

// イベントを登録する関数１
@Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
    return MapBuilder.<String, Object>builder()
            .put("onDirectEvent", MapBuilder.of("registrationName", "onDirectEvent"))
            .build();
}

// イベントを登録する関数２
@Override
public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
    return MapBuilder.<String, Object>builder()
            .put("onBubblingEvent", MapBuilder.of("phasedRegistrationNames",
                                MapBuilder.of(
                                        "bubbled", "onBubble",
                                        "captured", "onCapture")))
            .build();
}

通知したい箇所でreceiveEventを呼び出す
receiveEvent（"viewのID", "イベント名", コールバックの値）

// ...
ReactContext reactContext = (ReactContext)context;
// イベントを通知する処理１ "onDirectEvent"イベント
WritableMap event = Arguments.createMap();
event.putString("message", "onDirectEvent");
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onDirectEvent",event);

// イベントを通知する処理２ "onBubblingEvent"イベント
WritableMap event2 = Arguments.createMap();
event2.putString("message", "onBubblingEvent");
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(videoView.getId(),"onBubblingEvent",event2);
// ...

RN側では以下のようにイベントが通知される

<VideoView
      onDirectEvent={({ nativeEvent }) => console.log(nativeEvent.message)} // onDirectEvent
      onCapture={({ nativeEvent }) => console.log(nativeEvent.message)} // onBubblingEvent
      onBubble={({ nativeEvent }) => console.log(nativeEvent.message)} // onBubblingEvent
/>

ModuleとUI Componentの登録

作成したModuleとUI Componentを以下のように登録します

ExamplePackage.java

public class ExamplePackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.<ViewManager>singletonList(
                // UI Componentが増えるたびに追加していく
                new VideoViewManager()
        );
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext
            return Collections.<ViewManager>singletonList(
                // Moduleが増えるたびに追加していく
                new DialogModule(reactContext)
        );
    }
}

作成したpackageをMainApplication.java内のgetPackagesに登録します

MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
           // packageが増えるたびに追加していく
           packages.add(new ExamplePackage());
      return packages;
}

RN側

Native Modules

Dialog.jsx

import React from 'react';
import { NativeModules } from 'react-native';
// getName関数の返り値("DialogModule")を指定
DialogModule = NativeModules.DialogModule;

const Dialog = () => {
  const [date, setDate] = React.useState("");

  React.useEffect(() => {
    const eventEmitter = new NativeEventEmitter(DialogModule);
    eventEmitter.addListener('onClick', (event) => {
       console.log(event.change) // "true"
    });
  }, [])

  return (
    <>
      <TouchableOpacity onPress={() => DialogModule.showDialog('SINGLE BUTTON', DialogModule.SINGLE_BUTTON)}>
        <Text>SINGLE BUTTON Dialog</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => DialogModule.showDialog('DOUBLE BUTTON', DialogModule.DOUBLE_BUTTON)}>
        <Text>DOUBLE BUTTON Dialog</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => DialogModule.getCurrentTime(time => setDate(time))}>
        <Text>DATE</Text>
      </TouchableOpacity>
        <Text>CURRENT DATE:</Text>
      <Text>[ {date} ]</Text>
    </>
  )
}

export default Dialog

Native UI Components

VideoView.jsx

import React from 'react';
import { requireNativeComponent } from 'react-native';
VideoView = requireNativeComponent('VideoView');

const VideoView = () => {

  return (
    <>
      <VideoView 
        style={{ width: '100%', height: '100%' }}
        url="https://www.radiantmediaplayer.com/media/bbb-360p.mp4"
        onDirectEvent={({ nativeEvent }) => console.log(nativeEvent.message)}
        onCapture={({ nativeEvent }) => console.log(nativeEvent.message)}
        onBubble={({ nativeEvent }) => console.log(nativeEvent.message)} />
    </>
  )
}

export default VideoView

おまけ

UI Componentに実装してある関数をModuleから呼びたい場合

ExamplePackage.java

public class ExamplePackage implements ReactPackage {
    private ExampleViewManager instance;
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.<ViewManager>singletonList(
                instance
        );
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext
            instance = new ExampleViewManager();
            return Collections.<ViewManager>singletonList(
                // モジュールにViewManagerのインスタンスを渡す
                // あとはモジュール内ので定義した関数からインスタンスのメソッドを呼べば良い
                new ExampleModule(reactContext, instance)
        );
    }
}

最後に

Androidのブリッジ部分については英語の記事ばかりかつ動かないサンプルコードが多く苦労しました。
記事書く時間が少なかったので、抜けてるところや間違った箇所があるかもしれないので記事の内容は参考程度にしてください。

続きまして、React Native Advent Calendar 20日目の記事は @duka さんの「AB test とかの話」です

これを参考にした

• Amazonで一年間に使った金額と、注文履歴のTSVを出力するブックマークレット【2015年版】
  https://qiita.com/koyopro/items/d8b259f1eb75a01d3a0b
• koyopro/amazon-calc.js
  https://gist.github.com/koyopro/a480a45712ccf1bf239c

下記スクリプトを、注文履歴ページ上で対象期間を絞った上で実行すると、商品名・ASINコード・商品ページURLが記載されたcsvが吐き出される。

スクリプト

// メッセージ用オーバーレイ初期化
var overlayId = 'overlay';
function initMsgOverlay() {
  var overlay = document.createElement('div');
  overlay.id = overlayId;
  overlay.style.position = 'fixed';
  overlay.style.left = 0;
  overlay.style.top = 0;
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.zIndex = 100;
  overlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
  overlay.style.color = '#fff';
  overlay.style.textAlign = 'center';
  overlay.style.paddingTop = '15em';
  document.body.appendChild(overlay);
}
function displayMsg(msg) {
  document.getElementById(overlayId).innerHTML = '<h1>' + msg + '</h1>';
}
function appendMsg(msg) {
  document.getElementById(overlayId).innerHTML += '<h1>' + msg + '</h1>';
}
function appendMsgSmall(msg) {
  document.getElementById(overlayId).innerHTML += '<br><h3>' + msg + '</h3>';
}

function getTargetPeriod() {
  try {
    var period = document.querySelector('#timePeriodForm .a-dropdown-prompt').textContent.trim();
    return period
  } catch(error) {
    displayMsg('対象期間を取得できません')
    throw Error
  }
}

function generateCsv(itemDetails) {
  var header = '"商品名","ASIN","商品ページURL"\n';
  var body = '';
  for (var i=0; i<itemDetails.length; i++) {
    body += '"' + itemDetails[i]['name'].replace(/"/g, '""') + '",';
    body += '"' + itemDetails[i]['asin'].replace(/"/g, '""') + '",';
    body += '"' + itemDetails[i]['url'].replace(/"/g, '""') + '"\n'
  }
  return header + body;
}


function sleep(milliSec) {
  return new Promise(resolve => {
    setTimeout(resolve, milliSec);
  });
}

async function getItemDetails(orderHistoryHtml, itemDetails) {
  return new Promise(async (resolve, reject) => {
    var itemNameSelector = '.a-box-group.a-spacing-base.order .a-fixed-left-grid-col.a-col-right div.a-row > a.a-link-normal';
    var itemNameElements = Array.from(orderHistoryHtml.querySelectorAll(itemNameSelector));
    var itemNames = itemNameElements.map(elem => elem.textContent.trim());
    var itemUrls = itemNameElements.map(elem => elem.href);
    var asinPattern = /gp\/product\/(.*)\/ref=ppx_yo_dt/;
    var itemAsins = itemUrls.map(url => url.match(asinPattern)[1]);

    for (var i=0; i<itemNames.length; i++) {
      var itemDetail = {};
      itemDetail['name'] = itemNames[i];
      itemDetail['asin'] = itemAsins[i];
      itemDetail['url'] = itemUrls[i];
      itemDetails.push(itemDetail);
    }

    var nextPageLinkSelector = '.a-last a';
    var nextPageLinkElement = orderHistoryHtml.querySelector(nextPageLinkSelector);
    var nextPageUrl;
    if (nextPageLinkElement === null) {
      displayMsg('全ページ取得完了');
      console.log('全ページ取得完了');
      resolve();
      return;
    } else {
      nextPageUrl = nextPageLinkElement.href;
      displayMsg('以下のページの情報を取得');
      appendMsg(nextPageUrl);
      console.log('以下のページの情報を取得');
      console.log(nextPageUrl);
      console.log(new Date());
    }

    var request = new XMLHttpRequest();
    request.open('GET', nextPageUrl, false);
    request.send(null);

    if (request.status === 200) {
      var nextPageHtmlText = request.responseText;
      nextPageHtml = document.createElement('div')
      nextPageHtml.innerHTML = nextPageHtmlText;
    }
    await sleep(1500);
    await getItemDetails(nextPageHtml, itemDetails);
    resolve();
  });
}

async function main(itemDetails) {
  initMsgOverlay();
  var period = getTargetPeriod();
  displayMsg(period+'注文のASINコードを取得します');
  await sleep(2000);
  displayMsg('以下のページの情報を取得');
  appendMsg(location.href);
  await getItemDetails(document, itemDetails);
  var csv = generateCsv(itemDetails);
  // csvの内容に"#"があるとdata urlにcsvの内容を設定した際に途中で途切れてしまう
  csv = csv.replace(/#/, '');
  var csvWindow = window.open('', 'csv', 'width=640,height=480');

  var downloadLink = csvWindow.document.createElement('a');
  downloadLink.setAttribute('download', 'asin.csv');
  downloadLink.setAttribute('href', 'data:text/html;charset=utf-8,'+csv);
  downloadLink.innerHTML = 'CSVダウンロード';

  csvWindow.document.write('<title>取得結果CSV</title>');
  csvWindow.document.write('<p>'+downloadLink.outerHTML+'</p>');
  csvWindow.document.write('<code>');
  csvWindow.document.write(csv);
  csvWindow.document.write('</code>');
}

var itemDetails = [];
main(itemDetails);

はじめに

Qiitaに下書きが多すぎて新しい記事作れませんと言われたので途中まで書いて放っておいた記事をとりあえず投稿して下書きを減らします、すみません。

---

JavaScript の Array は「0以上の整数のキーを特別扱いするコレクションオブジェクト」と捉えると
Lua の テーブルに結構似ています。（テーブルは1以上ですが）
（実際にはArrayオブジェクトはObjectを継承しているものの、独自にプロパティを
　設定することは推奨されていない気がします）

• JavaScriptのArrayとLua（5.3）のテーブルの比較
• Arrayにあってテーブルにないものの中で便利そうなのはLuaでも実装してみる

をやっていこうと思います。

• JavaScriptは下記参照先の表記優先（その他、ブラウザやVScodeのデバッグ）
• Luaは lua.exe (lua-5.3.5_Win64_bin)にて確認
• Luaはやっとメタテーブルをなんとなく理解してきたレベル
• JavaScriptは調べながらじゃないとFizzBuzzも怪しいレベル

Array - Javascript|MDN
Lua 5.3 リファレンスマニュアル

作成と（簡易）文字列出力

JavaScript

var fruits = ["りんご","バナナ"];
console.log(fruits);
// ["りんご","バナナ"] <- 実際には先頭に Array(2) とか [Object Array](2) とかが入る

Lua5.3

fruits = {"りんご","バナナ"}
print(fruits)
--> table: 0000000000d3a390

Luaのテーブル型は参照なので識別子を型名とともに出力しています。（環境によっては4byte表記）
これはまあそうなのですが、ちょっと中身を確認したい時がありますので、
文字列変換を実装（とりえあず多次元テーブルはスルー）
後、テーブル用標準ライブラリ（table テーブルに格納されている）をメソッドっぽく
使用できるようにメタテーブルを利用します。

Lua5.3

table.of=function(...)
  return setmetatable({...},{
    __index=table,
    __tostring=function(t)
      return ("{%s}"):format(t:concat(", "))
    end
  })
end

fruits=table.of("りんご","バナナ")
print(fruits)
--> {りんご, バナナ}

デフォルトの参照先を設定する、prototype と メタテーブルは似ているけど、

長さ（要素数）を取得する

JavaScript

console.log(fruits.length);
// 2

Lua5.3

print(#fruits)
--> 2

プロパティで持っているJavaScript、長さ演算子#があるLua。どちらもめずらしい部類でしょうか？
添え字に抜けがある場合に返す値に関しては異なりますが、とりあえずスルーで。
個人的にarray.lenght=0とするとArray部分をクリアできるのはうらやましいのでclearとして追加。

Lua

table.clear=function(t)
  for n=1,#t do t[n]=nil end
end

要素を取得する

JavaScript

var first = fruits[0]
// りんご

var last = fruits[fruits.length - 1];
// バナナ

Lua5.3

first = fruits[1]
--> りんご

last = fruits[#fruits]
--> バナナ

自動で割り振ったり、要素数算出のために利用する順番号（添え字）が
javascriptでは0から開始なのに対し、Luaでは1から開始。

番号割り振り(numbering）を数え上げ（counting）に寄せた Lua（1オリジン）と、
基準とそこからの相対値（offset）に寄せた javascript（0オリジン） の違い。

プログラミング初心者にとっては1オリジンの方が自然に感じますが、
他のプログラミング言語では0オリジンの方が多数派のため混乱の元となっているよう。
（C言語の配列がアドレス算出に都合がよいために 0 オリジンを採用し、
　それに倣った言語が多かったという説が有力のようです）

ループ処理

JavaScript

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// りんご 0
// バナナ 1

Lua5.3

for index,item in ipairs(fruits) do
  print(item,index)
end
--> りんご 1
--> バナナ 2

末尾に要素を追加する

JavaScript

var newLength = fruits.push("みかん");
// ["りんご", "バナナ", "みかん"]

Lua5.3

fruits:insert("みかん")
--> {りんご, バナナ, みかん}

pushメソッドは末尾に要素を追加し、追加後の要素数を返す

table.insert 関数は何も返さない

末尾の要素を削除する

JavaScript

var last = fruits.pop(); // 配列の末尾の要素 "みかん" を削除
// ["りんご", "バナナ"];
console.log(last);
// みかん

Lua5.3

last = fruits:remove()
--> {りんご, バナナ}
print(last)
--> みかん

先頭の要素を削除する

JavaScript

var first = fruits.shift(); // 配列の末尾の要素 "みかん" を削除
// ["バナナ"];
console.log(first);
// りんご

Lua5.3

first = fruits:remove(1)
--> {バナナ}
print(first)
--> りんご

先頭に要素を追加する

JavaScript

var newLength = fruits.unshift("いちご") // 配列の先頭に追加
// ["いちご", "バナナ"];

Lua5.3

fruits:insert(1,"いちご")
print(fruits)
--> {いちご, バナナ}

fruits:insert("いちご",1)ではないことに注意

要素のインデックスを取得する

JavaScript

fruits.push("マンゴー");
// ["いちご", "バナナ", "マンゴー"]

var pos = fruits.indexOf("バナナ");
// 1

Lua5.3

table.indexOf=function(tbl,val)
  for n,v in ipairs(tbl)do
    if v==val then return n end
  end
  return false
end

fruits:insert("マンゴー")
--> {いちご, バナナ, マンゴー}
pos = fruits:indexOf("バナナ")
--> 2

事前に{ [val1]={key1,key2,..},[val2]={key}..}みたいなテーブルを作成しておくのも有り（？）

インデックスから複数の要素を削除する

JavaScript

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 
// 複数の要素を削除するには、n で削除する要素数を定義します
// 指定位置（pos）以降から n 個分の要素が削除されます

console.log(vegetables); 
// ["Cabbage", "Carrot"] (元の配列が変化)

console.log(removedItems); 
// ["Turnip", "Radish"]

Lua5.3

table.splice=function(t,pos,n)
  local rmvd=table.of()
  for nums=1,n do
    rmvd:insert(t:remove(pos))
  end
  return rmvd
end

vegetables = table.of('Cabbage', 'Turnip', 'Radish', 'Carrot')
print(vegetables)
--> {Cabbage, Turnip, Radish, Carrot}

pos = 2; n = 2 -- posは 2番目（Turnip）を指定

removedItems = vegetables:splice(pos, n)
print(vegetables)
--> {Cabbage, Carrot}

print(removedItems);
--> {Turnip, Radish}

こんなメソッドがあるんだなあ。
何個取り出すというより、同じ場所から指定回数取り出す、という実装にしたけど遅そうですね。

いつか続きを書くかも知れません。

PONOS Advent Calendar 2019の24日目の記事です。
?メリークリスマス！！クリスマス・イブにFirebaseの記事をお届けします！！！?
???????????????????????????

はじめに

現在運用中のゲームでFirebaseを導入しました。
この記事では活用事例とノウハウを紹介していきます。
Firebase利用の一例になれば幸いです。

組み込み方法は別記事をご参照ください
公式ドキュメント
iOS
Android
Unity
C++
Web

この記事の対象者

・Firebase初心者、中級者
・Firebaseを検討中の方
・Firebaseの実装イメージを掴みたい方
・サーバーレスを検討中の方
・Googleのサービスが好きな方、興味のある方

Firebaseの各機能をざっくり紹介

機能がたくさんあります

名称	機能	活用
Firebase Authentication	認証機能	◎
Firebase Realtime Database	NoSQL クラウド データベースでデータの保管と同期を行うことができる	◯
Cloud Firestore	Realtime Database からさらにパワーアップした NoSQL データベース。	△
Cloud Storage for Firebase	写真や動画などのコンテンツを保管、取得することができる。	◎
Firebase Hosting	webサイトを構築	◎
Cloud Functions for Firebase	関数ごとにサーバー処理を簡単に用意できる	◯
ML Kit for Firebase	機械学習	×
Firebase Crashlytics	クラッシュ レポート管理	◯
Firebase Performance Monitoring	パフォーマンスの問題を診断	◯
Firebase Test Lab	様々なデバイスでアプリの自動テストおよびカスタマイズされたテストを実行	◎
Firebase Cloud Messaging	サーバから通知機能	◎
Firebase In-App Messaging	ターゲットを絞り込んでアプリ内で通知	×
Firebase Predictions	機械学習を用いた分析ツール	◎
Firebase Remote Config	Firebase consoleから、外観の変更、機能の段階的な展開などをカスタマイズ	×
Google Analytics for Firebase	総合的な分析ツール	◎
Firebase A/B Testing	ユーザーごとに出し分けしてA/Bテストを行う	◎
Firebase Dynamic Links	複数のプラットフォームで機能するURLを生成	×
Firebase App Indexing	アプリを Google 検索結果に表示することができる	×

活用１：ログイン時のユーザー認証

Firebase Authenticationをゲーム内での認証機能として使っています。
ログイン時に認証して、Firebase各種機能と連携して認証済みのアカウントしかセキュリティー的に許可しないようにしています。
以下の４種類の認証を使っています。
・Google
・Facebook
・メールアドレス
・匿名認証

匿名認証で作成したデータと各種連携したデータを紐づける処理はこちらで実装する必要がありますが、
公式ドキュメントにもサンプルコードが用意されているので低コストで実装できます。

匿名認証のコード

Auth.cpp

#include "firebase/app.h"
#include "firebase/auth.h"

void Auth::signInAnonymously(){
    firebase::App* app = App::GetInstance();
    firebase::auth::Auth* auth = Auth::GetAuth(app);

    auth->SignInAnonymously().OnCompletion([this](const firebase::Future<firebase::auth::User*>& result){
        if (result.status() == firebase::kFutureStatusComplete &&
         result.error() == firebase::auth::kAuthErrorNone &&
         result.result()) {
            //成功処理
        }else{
           //失敗処理
        }
    });
}

活用２：通信時の不正対策

通信時の不正対策として
Firebase Authentication
と
Cloud Functions
を組み合わせてサーバーサイドでも認証チェックしております。

Cloud Functionsを使用するとクライアント側の通信処理もセキュアでシンプルな作りになります。
詳細はCloud Functionsのドキュメントを一読するのもありです。

クライアント側の通信処理
Cloud Functionsで定義したsampleにリクエストを投げます。

Request.cpp

void Request::callSample(){
    firebase::Variant data = firebase::Variant::EmptyMap();

    firebase::functions::HttpsCallableReference doSomething = functions->GetHttpsCallable("sample");
    doSomething.Call(data).OnCompletion([this]
    (firebase::Future<firebase::functions::HttpsCallableResult> result){
        if(result.status() == firebase::kFutureStatusComplete &&
        result.error() == firebase::functions::kErrorNone && result.result()){
        //成功処理
        }else{
        //失敗処理
        }
    });
}

サーバー側の認証チェック
exports.sampleの部分がレスポンスを返します。

Server.js

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
 
exports.sample = functions.https.onCall((data, context) => {
    if(!checkAuth (data, context) ){
        throw new functions.https.HttpsError('failed-precondition', 'The function must be called ' +'while authenticated.');
    }
    //以降でサーバー処理を記入していく 
    return {
            text:"success",
    };
});


//認証チェック
async function checkAuth (data, context) {
    if( !(context.auth && context.auth.uid && context.auth.token)){
        console.log('checkAuth error');
        return false;
    }
    const user = await admin.auth().getUser(context.auth.uid);
    if (user.customClaims && user.customClaims.admin !== true) {
        console.log('checkAuth error');
        return false;
    }
    return true;
}

活用３：サーバーからのPush通知

Cloud Messagingを活用して特定条件を満たしたユーザーにPush通知を送るようにしています。
このサンプルソースではRealTimeDBにユーザーのpushTokenが保存されており、pushTokenを取り出して
使用しているパターンです。

Server.js

exports.pushNotification = functions.https.onCall((data, context) => {
    if(!checkAuth (data, context) ){
        throw new functions.https.HttpsError('failed-precondition', 'The function must be called ' +
        'while authenticated.');
    }


    const userId = data.userId;
    var pass = "user_table/" + userId + "/" + "pushToken";
    return admin.database().ref(pass).once('value').then(function(snapshot){
        var pushToken = snapshot.val();
        const payload = {
            notification: {
              title: 'プッシュ通知タイトル',
              body: `プッシュ通知本文`
            }
          };
          return admin.messaging().sendToDevice(pushToken, payload);
    }).catch(error => {
          console.error(error);
          throw new functions.https.HttpsError(error);
    });
});

シンプルに書くとこれだけで通知を送れます。

          return admin.messaging().sendToDevice(pushToken, payload);

活用４：バトルログの保存（アップロード）

バトル時のログや詳細情報はCloud Storageに保存しています。
DBに保存すると量と値段の面で、デメリットがあったので分析の必要がなく、他のユーザーから参照されないデータはCloud StorageにGZip化して保存しています。

CloudStorage.cpp

#include "firebase/app.h"
#include "firebase/storage.h"

void CloudStorage::storageUpLoad(){
    firebase::App* app = App::GetInstance();
    firebase::storage::Storage* storage = Storage::GetInstance(app);

    //アップロード先のパス
    std::string serverPath = "/";
    //アップロードするファイル保存先
    std::string localPath = "file://" + "ローカルパス";

    storage->GetReference().Child(serverPath).PutFile(localPath.c_str()).OnCompletion([](const firebase::FutureBase& result) {
                if (result.error() == firebase::storage::kErrorNone){
                  //成功処理
                }
                else {
                  //失敗処理
                }
    });

}

活用５：リソースダウンロード

これもCloud Storageを活用しています。
リソース数、容量などによって状況は変わると思いますが、問題ない速度でダウンロードできています。
何よりもCloud Storageはコストパフォーマンスがいいです。
現在、ほぼ無料枠で済んでいます。

CloudStorage.cpp

#include "firebase/app.h"
#include "firebase/storage.h"

void CloudStorage::storageDownload(){
    firebase::App* app = App::GetInstance();
    firebase::storage::Storage* storage = Storage::GetInstance(app);

    //対象リソースのパス
    std::string serverPath = "/";
    //ダウンロード後の保存先
    std::string localPath = "file://" + "ローカルパス";
    storage->GetReference().Child(serverPath).GetFile(localPath.c_str()).OnCompletion([](const firebase::FutureBase& result) {
        if (result.error() == firebase::storage::kErrorNone) {
         //成功処理
        }
        else {
         //失敗処理
        }
    });
}

活用６：ゲーム内お知らせ

お知らせ機能はFirebase Hostingを活用しています。
環境構築などの導入は非常に簡単です。
5分くらいでできると思います。
環境構築

環境構築が終わったら、HTML,CSS,画像などのWEB素材を用意して

firebase deploy

で、デプロイして完了です。

固定のお知らせやヘルプページを見せるだけでしたらFirebase Hostingだけで十分なのですが
ユーザーごとに見せるページを変えたい、期間で出し分けをしたい
などの仕様によってはサーバー側でHTMLを生成する必要があるので
うちのゲームではCloud Function、RealTimeDatabaseなども絡めて使っている箇所があります。

注意点としては
過去にデプロイしたWEBページがCDNに溜まっていき、容量が無駄になるので
Firebaseコンソール上からときどき消去しないといけません。
WEBページに問題があったときに、とっさにロールバックできるのでそれとトレードオフという感じですね

活用７：KPI 分析

ゲーム運営にKPI 分析は必須ですよね
Google Analytics for Firebaseを使っています。
for Firebaseと書いていますが、バックエンドの仕組みはGoogle AnalyticsでKPI分析するうえでは違いはありません。違いは組み込み方法が若干違うくらいです。

こちらのFirebase デモプロジェクトを触ってみるのが理解が早いです。

1.デモプロジェクトログイン
デモプロジェクトが見れるようになったらAnalyticsページへ
2.デモプロジェクト　Analyticsページ
※リンクから飛べない場合は、左側のメニューにてアナリティクス配下のDashboardをクリック

Analyticsは組み込むだけでセッション数、DAU、課金額、ARPPUなど
デフォルトでいくつかの値を集計してくれます。
ゲーム内独自の集計をしたい場合は、イベントを実装すればできます。

イベント実装例

FirebaseAnalytics.cpp

#include "firebase/app.h"
#include "firebase/analytics.h"

void FirebaseAnalytics::init(){
    firebase::App* app = App::GetInstance();
    firebase::analytics::Initialize(*app);
}

//レベルアップ時、イベント登録
void FirebaseAnalytics::levelUp(){
    firebase::analytics::LogEvent(firebase::analytics::kEventLevelUp);
}

活用８：予測データの運営活用

Firebase PredictionsではGoogleの機械学習の予測結果を簡単に知ることができます。

デモプロジェクト

以下項目の一週間後の予測結果を知ることができます。
churn：離脱ユーザーの数

not_churn：継続ユーザーの数

spend：課金するユーザーの数

not_spend：課金しないユーザーの数

Firebase Predictionsの優れている点は
これらの予測結果に対して
・A/Bテストを行なって動向を分析できる
・Remote ConfigによってUIやパラメーターなどを瞬時に変えることができる
・Cloud Messagingを使ってお得な情報などを送ることができる
ことにあると思います。

また、Google Analyticsと連携してコンバージョンに設定されたイベントを予測項目として追加することもできます。
ゲームごとに有効なイベントを設定すれば有効活用できると思います。

活用９：バナー広告、動画広告

Google AdMobを使って、バナー広告、動画広告に対応することができます。
Firebaseの機能としてあまり注目されてないですが、実はFirebase SDKではAdMobの機能もサポートされてます。

バナー広告表示

FirebaseAdmob.cpp

#include "firebase/app.h"
#include "firebase/admob.h"
#include "firebase/admob/banner_view.h"


void FirebaseAdmob::createBanner(){
    //firebase::admob::BannerView* banner_view
    banner_view = new firebase::admob::BannerView();

    firebase::admob::AdSize ad_size;
    ad_size.ad_size_type = firebase::admob::kAdSizeStandard;
    ad_size.width = 320;
    ad_size.height = 50;
    // my_ad_parent is a reference to an iOS UIView or an Android Activity.
    // This is the parent UIView or Activity of the banner view.
    // kBannerAdUnitはAdMobのサイトで発行されるId
    banner_view->Initialize(getAdParent(), kBannerAdUnit, ad_size);
}

void FirebaseAdmob::showBanner(){
    banner_view->MoveTo(banner_view->kPositionBottomLeft);
    banner_view->Show();
    firebase::admob::AdRequest my_ad_request = {};
    banner_view->LoadAd(my_ad_request);
}

活用１０：多端末テスト

スマホゲーム開発において多端末検証って大変ですよね
特にAndroidとかAndroidとかAndroidとか・・・
そこで活躍するのが
Firebase Test Lab
Google データセンターでホストされているデバイス上でアプリをテストします。
1 回のオペレーションで、さまざまなデバイス、
さまざまなデバイス構成で Android アプリや iOS アプリをテストし、
Firebase consoleで結果（ログ、動画、スクリーンショットなど）
を確認できます。

・Android端末が足りない場合
・テスターが足りない場合
・QA開始前のシステム的なテストをしたい場合
など使いどころはたくさんあります。

1.デモプロジェクトログイン
デモプロジェクトが見れるようになったらTest Labページへ
2.デモプロジェクト　Test Labページ
※リンクから飛べない場合は、左側のメニューにて品質、配下のTest Labをクリック

おわりに

Firebaseを導入してみての感想としては・・・

非常に簡単、便利で素晴らしいです！
ゲーム仕様や料金面での検討をする必要はありますが
まずは無料プランで使ってみてから他のサービスと比較検討する方法がオススメです！

料金面にて実装で創意工夫した箇所もありますが、結果として今は超・低コストで運営できています。

以下の機能は無料で使い続けることができるので、組み込んでおいて損はないです
・Google Analytics for Firebase
・Firebase Authentication
・Firebase Crashlytics
・Firebase Performance Monitoring
・Firebase Cloud Messaging
・Firebase Predictions
・Firebase Dynamic Links
・Firebase App Indexing
・Firebase A/B Testing

本プロジェクトではGCPも併用して活用しています。
次回はGCPのゲーム活用事例を書きたい思います。

明日は@honeniqさんの記事です
最終日の記事も楽しみですね！

たまに使いたくなるけど、書き方忘れるので備忘録。

変数

const baseArray = [1,2,3,4,5,6,7,8,9,10]
const target1   = [10,9,8,7,6,5,4,3,2,1]
const target2   = [1,2,3]
const target3   = [11]

完全一致(every)

baseArray.every((num) => target1.includes(num))
> true

baseArray.every((num) => target2.includes(num))
> false

baseArray.every((num) => target3.includes(num))
> false

部分一致(some)

baseArray.some((num) => target1.includes(num))
> true

baseArray.some((num) => target2.includes(num))
> true

baseArray.some((num) => target3.includes(num))
> false

参考

• JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い

PlayCanvasで作成したプログラムをPWAにしてリソースをキャッシュする

はがです。

PlayCanvasアドベントカレンダーの記事となります

今回のデモはこちらになります。

コインドーザー
https://yushimatenjin.github.io/

PlayCanvasからダウンロードします

まずPlayCanvasで作成したプロジェクトをダウンロードします。

ダウンロードされたファイルについて

PlayCanvasからダウンロードされたファイルは、index.htmlを始めとする静的なファイルが入っているものになります。

PWA対応のウェブサイトを作る

PlayCanvasで作ったゲームをPWAに対応させるために２つのファイルを追加します。

• serviceWorker.js
• manifest.json

manifest.jsonはゲームの基本的な情報を記載します

manifest.json

{
  "name": "コインドーザー",
  "short_name": "コインドーザー",
  "icons": [
    {
      "src": "https://yushimatenjin.github.io/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "https://yushimatenjin.github.io/",
  "display": "standalone",
  "background_color": "#f16625",
  "theme_color": "#f16625"
}

https://yushimatenjin.github.io/manifest.json

serviceWorker.jsにはキャッシュについてを記述します。

https://yushimatenjin.github.io/serviceWorker.js

serviceWorker.js

    var CACHE_NAME = 'coin-dozer-version-1';
    var urlsToCache = [
    キャッシュするファイル....
    ];

    self.addEventListener("install", function(event) {
      event.waitUntil(
        caches.open(CACHE_NAME).then(function(cache) {
          return cache.addAll(urlsToCache);
        })
      );
    });

    self.addEventListener("fetch", function(event) {
      event.respondWith(
        caches.match(event.request, {
            ignoreSearch: true
        }).then(function(response) {
          if (response) {
            return response;
          }
          return fetch(event.request);
        })
      );
    });

serviceWorker.jsを一瞬で作る

playcanvas-toolsというnpmのパッケージを作りましたのでこちらを使用すると、１つのコマンドでserviceWorker.jsを作ることができます。

ソース
https://github.com/yushimatenjin/playcanvas-cli

npm

https://www.npmjs.com/package/playcanvas-tools

npx

cd PlayCanvasのプロジェクトを解凍したフォルダ
npx playcanvas-tools sw --name キャッシュ名

PlayCanvas特有の問題

PlayCanvasはロードするたびにクエリーストリングを追加します。そのURLについてもキャッシュを適用させるためにcaches.match無視するオプションを追加します。

https://developer.mozilla.org/en-US/docs/Web/API/Cache/match

serviceWorker.js

caches.match(event.request, {
        ignoreSearch: true
})

serviceWorker.js

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request, {
        ignoreSearch: true
    }).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

このオプションを追加することでキャッシュから呼び出されるようになります。

index.htmlからServiceWorkerを読み込むコードを追記する

index.htmlのHead内にこちらのコードを追加します。

index.html

<script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("./serviceWorker.js")
        .then(function(registration) {
          if (typeof registration.update == "function") {
            registration.update();
          }
        })
        .catch(function(error) {
          console.log("Error Log: " + error);
        });
    }
  </script>

https://github.com/yushimatenjin/yushimatenjin.github.io

キャッシュ無し

キャッシュ有り

キャッシュをしないと28.1MBのダウンロードをしていたファイルをキャッシュすることで、２回目以降の読み込みを24.2KBまでにすることにできます。

インストールが可能になる

さらに下記の要件を満たすことでAndroidの端末へインストールすることができます。

1. manifest.jsonに必要な要件を入れる
   • short_nameかname
   • icons 192pxか512px
   • start_url
   • display,fullscreen,standalone,minimal-uiのうちどれか
2. HTTPSの設定
3. fetchイベントハンドラをserviceWokerに追加する

Androidの表示

iOSの表示

Storeにも出せる

TWAと言われる形でビルドをすることでストアに出すこともできました。

jsで配列の特定keyのだけ取り出してカンマ区切りの文字列にする

言葉だけだと何言ってるの？？ってなるので

表示だけ考えて文字列でカンマ区切りで最後は必要ないってやつ

// これを
const array = [
  {id: 1, category: 'ねこ', name: 'ポチ'},
  {id: 1, category: 'ねこ', name: 'ねこねこ'},
  {id: 1, category: 'いぬ', name: 'にゃん'},
];

// ↓↓↓ こうしたい ↓↓↓
const string = 'ポチ, ねこねこ, にゃん';

結論

function(array) {
   // 配列からnameだけ取り出して「,」区切りの文字列にする
   return array.map( (row) => {return [row['name']]} ).join(',')
},

分解

function(array) {
   // 配列からkeyのnameだけ取り出した配列を作る
   const namesArray = array.map((row) => {
       return [row['name']]
   });

   // 配列を「,」区切りの文字列にする
   const namesString = nameArray.join(',');
},

Vue.jsで実際に使った時の用途

<template>
  <div>
    <span>
       <!-- 「ねこ, にゃん, ぽち」 のように表示する --!>
      {{ array | convertArrayToString }}
    </span>
  </div>
</template>

<script>
  data: {
    array: array
  },
  filters: {
    convertArrayToString(array) {
      // 配列からnameだけ取り出して「,」区切りの文字列にする
      return array.map( (row) => {return [row['name']]} ).join(',')
    },
  }
</script>