React NativeをTypeScriptで開発する

ほぼこちらを参考にした。記事内では細かな設定をしていたが、私はあんまり細かくいじってると面倒くさくなるのでデフォルト設定をなるべく使う。要所々々だけ参考にしたので切り抜いた記事になりました。

依存関係を入れる

npm install --save-dev typescript
npm install --save-dev react-native-typescript-transformer
npm install --save-dev @types/react @types/react-native

設定ファイルの準備

設定ファイルを作成する

tsc --init --pretty --jsx react

rn-cli.config.js を作成し以下の設定を書く。

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

ファイルの移動

こちらは好みだけど src 以下にソースファイルを入れます。移動したら index.js の中のパスも変更すること。

mkdir src
mv App.js src/App.tsx

おわり

これで普通にコンパイルできる。そういえば React$Node がないと内部で言われていて、 React.ReactNode して解決したけど、多分私の環境の問題なんだろう。なんとかならんかな。

UbuntuのReact Nativeを使ったAndroidアプリの開発環境構築

基本はここに書いてあることがすべてだけど、英語だしJDKの入れ方などが詳しくないので、自分であとで確認できるようにまとめてみた。

React Nativeの準備

react-nativeをインストールする

sudo npm install -g react-native-cli

React Nativeのプロジェクトを作成する

react-native init project_name

AVDの準備

Android Studioをインストールする。 --classic で外部に出れるように。

sudo snap install --classic android-studio

Android StudioのSDK ManagerからSDKを入れるらしい。マニュアルでは9と書いてあったがデフォルトで10が入っており、それでも別に動いたから10でやった。

そして以下のパス設定をする。

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

JDKのインストール

マニュアルにはJDK 8が必要らしいとあるので入れる。なお11を入れても動いた。バージョンの切り替えを楽にするためsdkmanを利用する。

curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"
sdk install java 8.0.252-amzn

Hello Worldする

Android StudioのWelcome画面でCongigureからAVD Managerを開いてから以下を実行する。順番間違うと真っ白になったのでお気をつけて。

npm run start
npm run android

ファイル書き換えたら npm run start したターミナルで r を押すと更新がかかり反映される。かなり検証が楽です。

おわり

自分向けにWebサービスとしていろいろ作っていたんですが、ほぼ自分しか使わないのにサーバー立ち上げておくのもエコではないし、スマホで可動させた方がユーザーも安心するだろうから、Androidアプリも始めることにした。(利用者が増えてもこっちのサーバー負荷とか考えなくていいし。)

定期的にこの記事の内容見直しますね。JDKとAVDは基本的な流れは変わらないだろうけど、React Native周りはざっくり変わりそうですね。そういえばyarnやめてnpmに戻りました。

Vagrantでbridgeをする

config.vm.networkpublic_network を指定することで vagrant up 時にインターフェースを指定して起動できます。

Vagrant.configure("2") do |config|
  config.vm.box = "bento/ubuntu-18.04"
  config.vm.network "public_network"
end

予め指定することもできます

config.vm.network :public_network, bridge: 'en0: Wi-Fi (AirPort)'

しかし環境によって違うので、素直に毎度指定すればいいかなと思いました。

WordPress 5.4で特定のパーマリンクで不具合が発生する件の対策

今回の調査では以下の順で行ってみた

  1. プラグインの全停止
  2. テーマの変更
  3. WordPressの再インストール
  4. WordPressのダウングレード

WordPressの再インストールやダウングレードは結構だるいしどのバージョンでどのような変化があるか調べるのには時間がかかるので、Dockerイメージを使用した。5.3にした段階で問題が解消された。

docker run \
  -e WORDPRESS_DB_HOST=database:3306 \
  -e WORDPRESS_DB_PASSWORD=password \
  -e WORDPRESS_DB_NAME=name \
  -e WORDPRESS_DB_USER=user -d -p 80:80 wordpress:5.3

WordPress 5.4 で立ち上げた複数のサイトとの差異はパーマリンクだった。パーマリンクを /entry/:yaer/:month/:day/:hour:minute:second というはてなブログ形式から /archives/:id へ変更した段階で問題が解消された。

ただしこの変更を行ってしまうとブログへのインデックスがすべてクリアされてしまう。別にいいけど上位に着ているページがしばらく404で表示されるのは大概的に親切ではないのでリダイレクトをすることにした。

パーマリンク変更時のリダイレクトはプラグインでも行える。Permalink Manager Proというのでできるんだけど結構高くて買った瞬間人生がおわりそうな金額だったので、しぶしぶSQLを書いて.htaccessに直書きすることにした。

SELECT 
  CONCAT(
    '/entry/',
    YEAR(post_date),
    '/',
    LPAD(MONTH(post_date), 2, '0'),
    '/',
    LPAD(DAY(post_date), 2, '0'),
    '/',
    LPAD(HOUR(post_date), 2, '0'),
    LPAD(MINUTE(post_date), 2, '0'),
    LPAD(SECOND(post_date), 2, '0')
  ) AS before_url,
  CONCAT("/archives/", ID) AS after_url
FROM wp1_posts
WHERE post_status = 'publish' AND post_type = 'post';

あとは.htaccessにこのように並べておくだけ。

RewriteRule ^entry/2020/05/01/181718$ /archives/2242 [L,R=301] 
RewriteRule ^entry/2020/05/05/202314$ /archives/2244 [L,R=301]         
RewriteRule ^entry/2020/05/06/202906$ /archives/2246 [L,R=301] 
RewriteRule ^entry/2020/05/07/204259$ /archives/2251 [L,R=301] 

個人的にはWordPressに対しては一切技術的な知識がなくても使えるってところを求めているので、なるべくWordPressに手を入れたくないと思っている。今回はしぶしぶやってみた。

あつまれ どうぶつの森のデータバックアップについて

先日プレイ時間が200時間を超えて、そろそろデータ消えたら嫌だなと思ってひたすら調べてた。

ソフトの不具合によるデータの消滅

Twitterを検索して調査したところデータ消えた人は1日あたり数件発生しているよう。操作ミスや勘違いしている人が大半だけど、不具合によるガチっぽい人もいた。

不正な操作を行ったり、不正な操作を行っているユーザーと通信を行ったりすると問題が発生するという情報があった。まあそれは別に仕方ないんじゃないかなと思う。

ハードウェアの不具合によるデータの消失

問題はハードが壊れた場合。

あつ森は2020年中にバックアップ機能を実装するらしいが、2021年にずれ込むかなと思ってる。

そうなるとあと12ヶ月から24ヶ月はバックアップなしでプレイしなければいけなくて、1ヶ月あたり200時間のプレイしているのだが、これを24ヶ月続けたらSwitchは壊れると思う。

Switchは任天堂に修理を出すと、結構カジュアルにデータ消してくるみたい。

絶対に消えてほしくないデータがある状態でSwitchが壊れた場合の修理は一旦Switch修理王というところに頼んだ方がいいかもしれない。データを残すことに尽力してくれているみたい。

おわり

こんなんでいいのかよ。。と思っていて日本の情報はほとんど読み切ってしまったので、海外のコミュニティとかひらすら見てた。その中でRedditあたりのこの話が印象に残った。

Is there any way to physically back up save data? like if its on an SD card would copying the files onto a computer work? My girlfriend is obsessed and has put almost 100 hours into the game so I did a little reading and can't find a way to back up her saves.

セーブデータを物理的にバックアップする方法はありますか?たとえば、SDカード上にあるファイルをコンピューターの作業にコピーする場合はどうでしょうか。私のガールフレンドは取り憑かれていて、ほぼ100時間をゲームに費やしているので、少し読んでみましたが、彼女のセーブをバックアップする方法を見つけることができません。

取り憑かれるほど面白いんだよね。。なぜ初回からバックアップ実装してくれなかったし。

QRコード決済は明細が取れるから良い

Suicaの方が楽だけど、明細が適当で、あとからどこで何を買ったか確認する方法がない。

その点QRコード決済はどこで何を買ったかわかる。

QRコード決済で毎月5万円も使っているけど、一体どこで使っているんだろうといったことがわかる。Suicaだと「物販」とかしか出てこなくてなにか分からない。

明細がほしいって理由でクレジットカードで決済してきたんだけど、考えてみたらクレジットカード持ち歩くくらいならQRコード決済使ってればいいじゃんと思った。クレジットカードだったら落とすしさ。。