1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

アジア・オセアニアのビザが必要な主な国まとめ

アジア

  • 香港

    • 90日以内の観光は不要

  • 韓国

    • 90日以内の観光は不要

  • 台湾

    • 90泊91日以内の滞在は不要

  • フィリピン

    • 21日以内の滞在は不要

  • シンガポール

    • 2週間以内の観光滞在は不要

  • インド

    • 必要

  • ブルネイ

    • 14日以内の滞在は不要

  • マレーシア

    • 90日以内の観光滞在は不要

  • グアム

    • 90日以内なら不要

  • 北マリアナ諸島/サイパン

    • 30日以内なら不要

オセアニア

  • オーストラリア

    • 要。観光ETAの登録(3ヶ月以内滞在可能)が必要

  • ニュージーランド

    • 3か月までなら不要

  • フィジー

    • 4か月までなら不要

ReactNativeのAndroidで画面遷移を実装する

まずAndroidアプリの画面遷移の実装方法を理解してないと実装できないので、確認していく。

Androidアプリでの画面遷移の方法

  • 複数のアクティビティを作っておき、インテントという機能を使うと遷移できる

そもそもアクティビティとは？

  • ユーザーが実際に目にするアプリケーション画面のこと
  • レイアウトが同じ場合はテキストや画像を書き換えて使用することができるが、レイアウトが大きく変わる時は別のアクティビティを用意してあげる必要がある

アクティビティクラス

  • android/src/main/java/com.xxx/MainActivity にデフォルトのアクティビティクラスがある
  • 内容は以下のようになっている
package com.xxx;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "xxx";
    }
}

github.com

  • ReactNativeActivityクラスを確認すると、Androidのアクティビティ用のクラスを継承していることがわかる

  • アクティビティクラスに画面起動や画面をタップした時(onClick)の処理などを書いていく

インテントとは

  • 複数のアクティビティを遷移するための機能
  • 以下のようにして、画面遷移を行うことができる
public void onClick(View v) {
  //遷移先のアクティビティへのインテントを作成
  Intent intent = new Intent(this, Activity.class);
  //遷移先の画面を起動
  startActivity(intent)
}

ReactNativeでJavaで書いたネイティブコードを扱えるようにする

  • 単純に画面遷移するだけなら、Linking.openURL(xx)でも良いがAndroidの深い階層の設定画面を開きたい時はネイティブのコードを書くことが必要
  • ネイティブのコードをJS側から扱えるようにする仕組みをReactNativeでは用意してくれているのでそれを今回使う

次の記事を参考にした。

qiita.com

通知設定を開きたい時はこんな感じのコードになった。

    @ReactMethod
    public void open(String type_setting) {
        Intent intent = new Intent();
        switch (type_setting) {
            case "ACTION_APP_NOTIFICATION_SETTINGS":
                intent.setAction("android.settings.APP_NOTIFICATION_SETTINGS");
                //どのアプリの通知設定を開くか判断するのに必要
                intent.putExtra("app_package", this.reactContext.getPackageName());
                intent.putExtra("app_uid", this.reactContext.getApplicationInfo().uid);
                break;
            default:
                break;
        }
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        this.reactContext.startActivity(intent);
    }

moment.jsでタイムゾーンを考慮して特定日の始まりと終わりを取得する

JST(日本標準時)で指定日の始まりの日時文字列(RFC3339形式)を取得

//2017-08-26T00:00:00+9:00
moment.tz('2017-08-26', 'Asia/Tokyo').startOf('day').format();

UTC(協定世界時)に変換すると、2017-08-25T15:00:00+0:00になる

JST(日本標準時)で指定日の終わりの日時文字列(RFC3339形式)を取得

//2017-08-26T23:59:59+9:00
moment.tz('2017-08-26', 'Asia/Tokyo').endOf('day').format();

UTC(協定世界時)に変換すると、2017-08-26T14:59:59+0:00になる

つまった所

  • setDefaultTimezoneを指定する方法もあったが、それだと以後作成されるmomentオブジェクトのタイムゾーン全てに影響するので止めた。
  • 最初はmoment(xx).tz の形式でタイムゾーンを指定しようとしてたが、これだとmoment(xx)の部分はブラウザのタイムゾーンを元に作成されてしまう

Golangで特定ファイルのテストのみ実行する

カレントディレクトリにあるテストを実行

ENV=test go test

パッケージを指定

ENV=test go test パッケージ名

特定テストのみ

ENV=test go test -run TestXXX

特定パッケージの特定テストのみ

ENV=test go test パッケージ名 -run TestXXX

よく忘れるJavascriptの正規表現のメモ書き

日付を確認する正規表現を元によく使う表現をメモしておく

/^\d{4}\-\d{2}\-\d{2}$/

  • ^

    • 入力の先頭文字にマッチする
    • /^A/はBACにはマッチしないが、ABCにはマッチする

  • \d

    • 数字にマッチする
    • [0-9]に相当する

  • {n}

    • 直前の文字がn回出現するものにマッチする
    • \d{4}は数字4が四回続くものにマッチする

  • $

    • 入力の末尾にマッチする

これらの表現は以下の記事を参考にしました。

正規表現 - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

ここさえ見るようにすれば、十分かも…

Vue.jsとVueValidateのよく使う機能のメモ書き

Vue.js プログラミング JavaScript

Vue.js

代表的なオプション

components: {
  searchForm
}

のように設定すると

<search-form></search-form>

このように呼び出すことが出来る。

JS側はキャメルケースでもハイフンでも大丈夫だが、HTML側ではハイフン区切りで呼ぶ出す必要がある

代表的なディレクティブ

v-on

  • イベントハンドリング
  • v-on:inputのようにすると入力イベントを受け取る
  • v-onとv-bindはよく使うので省略記法が用意されている
  • v-on:clickは@clickと書ける
  • イベント修飾子で@submit.prevent=“onSubmit"のように書くとSubmit時にリロードしない等できる

v-bind

  • HTML属性をモデルの更新でリアルタイムに更新する
  • v-bind:classはよく使う
  • :classに省略して書ける

v-bind:selected

  • :selectedで書ける
  • selected=“{{ hoge == fuga }}"と書くと怒られる
  • :selected=“hoge == fuga” とv-bindを使って{{}}は使わずに文字列で条件式を書くとうまくいく

v-model

  • 双方向データバインディング用
  • ビューの入力内容をモデルに反映、モデルの変更をビューに反映という使い方ができる
  • v-model.trimのようにするとユーザーの入力を自動でトリムしてくれる
  • 入力値をリアルタイムにバリデーションをかけたい時にもv-modelだと便利
  • ユーザーの入力値をそのまま保存に使いたい時にも便利。本来はReactのように親コンポーネントに値を渡してstateを更新のような実装が状態管理としては良いんだけど、実装コストをかけずにサクッと作りたい時に良い。

v-cloak

<div v-cloak>
  {{ message }}
</div>

v-for

  • ループを回すのに使う
<option v-cloak v-for="data in list" :value="data.id" :key="data.id">
</option>
  • 必ずユニーク値で:keyをつける

VueValidate

  • $vにバリデーションデータが入っている

代表的なメソッド

  • $touch
    • $v.name.$touchのようにすると$dirtyフラグをtrueにする
    • これによりエラー検知の対象になる

代表的なプロパティ

  • $dirty
    • 一度も触っていない場合はこのフラグはfalse
    • 一度でも変更を加えるとtrueになる
  • $error
    • $v.name.$errorのように項目ごとにエラーフラグをとれる
    • $dirtyがtrueになっていないと、このフラグが無視される

エラーメッセージを動的に出す

  • 各バリデーションルールのフラグがとれるので、その値を見て用意したエラーメッセージを表示する
<span v-if="$v.title.$error && !$v.title.required">
タイトル名は必須です</span>
  • コレクションデータの場合でも1つずつtouchする必要はなく、$v.array.$touch()だけでOK