Activity間で自作ArrayListを渡す方法です。
Kotlinです。
Parcelable化するところが肝です。

流れ

一覧画面から詳細画面に自作クラスのArrayListを渡す流れです。

一覧画面
MyListActivity.kt
詳細画面
MyDetailActivity.kt
渡すデータ
MyDataList:ArrayList<MyData>

送信元のActivity（MyListActivity.kt）

1
2
3
4

val intent = Intent(this, MyDetailActivity::class.java)
intent.flags = Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_SINGLE_TOP
intent.putParcelableArrayListExtra("MyDataList", MyDataList.list);
startActivity(intent)

送信するデータのリスト（MyDataList.kt）

1
2
3
4
5

import android.os.Parcelable
import kotlinx.android.parcel.Parcelize

@Parcelize
data class MyDataList(var list:ArrayList<MyData>) : Parcelable

送信する個別データ（MyData.kt）

1
2
3
4
5

import android.os.Parcelable
import kotlinx.android.parcel.Parcelize

@Parcelize
data class MyData(var timeStamp: String) : Parcelable

送信先のActivity（MyDetailActivity.kt）

1
2
3
4
5
6
7
8
9
10
11
12
13

import android.os.Bundle

class MyDetailActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 本来はgetParcelableExtraが正しそうだけど以下のエラーになるのでgetSerializableExtraを使う
        // Not enough information to infer type variable T
        // val myDataList = intent.getParcelableExtra("MyDataList") as ArrayList<MyData>
        val myDataList = intent.getSerializableExtra("MyDataList") as ArrayList<*>
        setContentView(view)
    }
}

ちなみにMyDataがただのStringやIntgerならputStringArrayListExtraなどを使えば良いのでParcelable化する必要はないです。

今回はMyDataが自作クラスなのでputParcelableArrayListExtraを使う必要があり、これを使うためにParcelable化が必要だったということです。

以上です。

ライブラリをインストール

1
2
3
4
5
6
7
8
9

# testライブラリ
npm install --save-dev jest
# for vue
npm install --save-dev babel-jest
npm install --save-dev babel-preset-env
npm install --save-dev babel-core@bridge
# for vue3
npm install --save-dev @vue/test-utils@next
npm install --save-dev vue-jest@next

test準備

プロジェクトルートディレクトリにjest.config.jsを作成する

※作成しない場合、以下のエラーになった。
Consider using the "jsdom" test environment.

1
2
3

module.exports = {
  testEnvironment: "jsdom"
};

package.jsonに以下を追加する
※npm testでテスト実行できるようにするため

1
2
3

"scripts": {
    "test": "jest",
  },

testコード作成

プロジェクトルートディレクトリに__tests__/unit/index.jsを作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { mount } from "@vue/test-utils";

// The component to test
const MessageComponent = {
  template: "<p>{{ msg }}</p>",
  props: ["msg"]
};

test("displays message", () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: "Hello world"
    }
  });

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain("Hello world");
});

ここまで完了すれば、npm testでテスト実行できる。

と、ここまでは良いのだが、Vue.jsのコードに接続するコードを書くと以下のエラーになった
解決できず、諦めた。。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>

はじめに

docker-composeにPostgreSQLを導入したので、コードをメモしておきます。

POSTGRES_USERにuserを指定すると権限エラーになるところで結構ハマりました。。

./docker/postgresql/initdbフォルダにsqlファイルを入れれば自動的に実行されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#docker-composeのバージョンを指定
version: '3.8'

services:
  db:
    image: postgres:13.3
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      TZ: Asia/Tokyo
    ports:
      - '5432:5432'
    volumes:
      - ./docker/postgresql/data:/var/lib/postgresql/data
      - ./docker/postgresql/initdb:/docker-entrypoint-initdb.d

はじめに

OAuth2のクライアントアプリを作成したので、手順をメモしておきます。

環境

フロント
　Vue.js：3.0.0
バックエンド
　Express：4.17.1

JavaScriptでjson内のデータの位置を並び替える方法です。

例えば

1
2
3
4
5

{
  "1":"test1",
  "2":"test2",
  "3":"test3",
}

これを

1
2
3
4
5

{
  "3":"test3",
  "1":"test1",
  "2":"test2",
}

にしたい時に使う方法です。

以下は”hoge”データを3番目に入れる例です。

1
2
3

let pairs = Object.entries(beforeJson);
pairs.splice(3, 0, ["hoge", beforeJson["hoge"]]);
afterJson = Object.fromEntries(pairs);

上にある通り、一度配列にしてから順番を入れ替え、その後にjsonに戻せばOKです。

以上です。

Bootstrap をカスタマイズする方法です。

npm インストール

scss を読み込むライブラリです。

npm install node-sass@5.0.0
npm install sass-loader@10.1.1

ここでバージョン指定しない場合、以下のエラーになるので注意。

• PostCSS received undefined instead of CSS string
• this.getOptions is not a function

エラーが出たら一度アンインストールすること
npm uninstall sass-loader node-sass

scss を作成

node_modules と同じフォルダに scss フォルダを作成し、そこに index.scss を作成する

1
2

@import './mixin';
@import '../node_modules/bootstrap/scss/bootstrap';

同じ場所に mixin.scss を作成する

1
2

$primary: #0275d8;
$accent: #ff8b32;

import

main.js などで先ほど作成した index.scss を import する

1
2
3
4
5
6
7
8
9
10

import { createApp } from 'vue'
import App from './App.vue'

// この行を削除
// import 'bootstrap/dist/css/bootstrap.css'

// この行を追加
import './../scss/index.scss'

createApp(App).mount('#app')

View

レイアウトとアクティビティ

画面はレイアウトと呼ぶ
web でいう html と css の部分
xml ファイル
配置してあるパスは以下（例）
/app/src/main/res/layout/activity_main.xml
レイアウトの中のテキストやボタンなどの要素を View（ビュー）と呼ぶ
ビューの高さや文字サイズなどは属性と呼ぶ
ロジック部分はアクティビティと呼ぶ
web でいう JavaScript の部分
Java や Kotlin
配置してあるパスは以下（例）
/app/src/main/java/com/example/diceroller/MainActivity.kt

レイアウトとアクティビティは一対一となっている

文字列は基本的にレイアウトにハードコーディングせず、values/res/string.xmlファイルに記載する

はじめに

エラー

Androidのビルドで以下のエラーが出ました

com.android.build.gradle.internal.crash.ExternalApiUsageException: org.gradle.internal.metaobject.AbstractDynamicObject$CustomMessageMissingMethodException: Could not find method setVariantDir() for arguments [debug] on task ‘:app:processDebugGoogleServices’ of type com.google.gms.googleservices.GoogleServicesTask.

解決策

google-servicesの4.3.6のバージョンが原因らしく、4.3.5に修正するとうまく行きました。

対象ファイル
build.gradle

1
2
3
4

// 前
classpath 'com.google.gms:google-services:4.3.6'
// 後
classpath 'com.google.gms:google-services:4.3.5'

参考

https://stackoverflow.com/questions/67496084/why-am-i-getting-abstractdynamicobjectcustommessagemissingmethodexception-error