1日1%成長するブログ

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

CSSで記号を実装する

プログラミング CSS

今回は文字の前後に記号を追加したい。 CSSの疑似セレクタ(:before, :after)を使えば要素の前後に値を表示できます。

値を指定するには疑似セレクタのcontentプロパティを使う。 IE7以下は未対応らしいですが、今回は無視しています。

contentプロパティで表示できる項目

  • テキスト
  • 属性名
  • 画像

上記の3つを扱うことができる。 記号を表示するだけであれば、テキストを使う。 その他の使い方に関しては以下の記事がわかりやすい。

tenderfeel.xsrv.jp

テキストの表現方法

機種依存文字はShift_JIS等で文字化けする時があるので、実体参照を使う方が無難 (最近はUTF-8が主流なのであまり気にしなくなってきているらしい)

実体参照について

人にわかりやすい文字で表現されているので使い易いが、 文字実体参照が無い記号も多い(例: ✔) 。この場合はUnicodeの10進数/16進数で表現する数値文字参照を使うしかない。

数値文字参照の調べ方

使いたい記号の数値文字参照を調べるツールも以下の記事に記載されているので、 困ったら見てみると便利だと思います。

tenderfeel.xsrv.jp

サンプルコード

.check-mark:after
  content: "\002714"
  color: red

こんな感じで✔を表示することが出来ます。

Objective-CのAppDelegate.mって何をしてるの？

ReactNative プログラミング Objective-C
  • アプリを作った段階でデフォルトで作られるファイルの一つ。アプリ全体のライフタイムイベントを管理するためのクラス
application: didFinishLaunchingWithOptions
  • アプリが初めて起動した時に呼び出される
application:applicationWillResignActive
  • アプリが非Activeになる直前に呼び出される
application:applicationDidEnterBackground
  • アプリが非Activeになりバックグランド実行になった際に呼び出される
application:applicationWillEnterForeground
  • 2回目以降の起動時に呼び出される(Backgroundにアプリがある場合)
application:applicationDidBecomeActive
  • アプリがActiveになった際に呼び出される
application:applicationWillTerminate
  • システムからのアプリ終了の際に呼び出される

IOSアプリの各状態については以下の記事が詳しい。

iOSアプリの状態遷移とライフサイクル - Qiita

Objective-Cの基礎的文法の備忘録

Objective-C プログラミング ReactNative

変数

  • 変数の型 変数名:
int num = 100;
int num;
num = 100;
  • データの種類
    • int: 整数
    • float: 小数点つきの数値
    • BOOL: YES/NOに使う
    • 変数には数値しか入らない

ポインター変数

  • ポインター変数とは「メモリ上のオブジェクトを指し示すアドレス」の数値が入っている
  • 作る時は「*」をつけて作り、使う時は「*」を外して使う

文字データを扱う

  • NSStringを使う
  • @“"で囲む
NSString *str = @"Hello World";

NSLogで出力する

  • 文字列は%@で囲み、数値は%dで囲む
NSLog(@"%@%d%@", @"残りは", 3, @"回です");

クラス定義

  • ヘッダ部と実装部で分ける
/* クラスの宣言部 */
@interface MyClass : NSObject {
}
- (void)myMethod;
@end

/* クラスの実装部 */
@implementation MyClass
- (void)myMethod {
    // メソッドの処理を記述
    printf("Hello World.\n");
}
@end

メソッド定義

-(返す型)メソッド名 {
   メソッドの中身
}

が基本。「-」はインスタンスメソッド。「+」はクラスメソッド

@implementation MyClass
- (void)myMethod {
    printf("Hello World.\n");
}
+ (void)myMethod2
{
    printf("Hello World2.\n");
}
@end

メソッド実行

id test = [[MyClass alloc] init];
//インスタンスメソッド実行
[test myMethod];
//クラスメソッド実行
[MyClass myMethod2];
  • それぞれ[インスタンス名 メソッド名]、[クラス名 メソッド名]で実行できる

allocとinitとnew

  • alloc

  • init

    • メモリ上にロードされたインスタンスに対して実行する。 → インスタンスがデータを保存出来る状態にする。コンストラクタを呼ぶ

  • new

    • alloc + init
//以下は同じ意味
id test = [[MyClass alloc] init];
id test = [MyClass new];

id型

  • 汎用オブジェクト型
  • 最初に型を決めずに変数を用意し、実際に使うタイミングで型を決定する
 id test; //型は決まっていない
 test = [MyClass new]; //この時点でMyClass型になる

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

アジア

  • 香港

    • 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