aknow2

自分の興味のある事を連々と(プログラミング、モバイルアプリ、プログラミング教育)

Node.js向けのTypescriptのボイラープレートを作った

Typescript書いてますか?
TypescriptでNode.jsのスクリプトをサクッと書きたいが環境を作るの面倒。 なので、オレオレTypescriptボイラープレートを作った。

特徴

  • Typescript3.1
  • TSLint AirBnBのコンフィグを使用。MSとかFacebookのconfigはキツすぎてダルい。
  • ts-nodeを使い、JSに変換せずに実行
  • nodemonでコード編集を検出して、再実行
  • デバッグchromechrome://inspect/#devicesにアクセスすれば出来る
  • TestフレームワークはJest

使い方

git clone https://github.com/aknow2/tsnode-typescript-boilerplate.git
cd tsnode-typescript-boilerplate
npm install 
 or 
yarn install

npm start - 実行する。サンプルでは5秒毎に1インクリメントするプログラムが動く
npm run build - JSにコンパイル
npm test - XXX.test.tのファイルのテストを実行

prettierを入れ忘れたので入れておきたい。

関連:

「デバッグ編」nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせて、デバッグ。 - aknow2

nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。 - aknow2

大さじ?g サポートページ

f:id:aknow2:20181017201819p:plain
大さじ、小さじや1カップをグラムへ一発変換

料理向けの計量をグラムへ変換するアプリです。

計量器具を使わず、グラムで料理をする方ぜひお使いください。

特徴
・材料を選択すると1杯辺りのグラムを一発表示
・大さじや小さじの杯数の変更も可能
・グラム側を入力する事でグラムから計量器具への変換も可能

ご要望やご意見はコメント欄へお願い致します。

【react-native・Android】React-native-admobを入れてアプリを起動すると停止し続ける。

react-natvie-admob(ver 2以降)を入れて、アプリを起動しようとすると「繰り返し停止しています」エラーで落ちる現象に遭遇。。。
調べてみるとadmobのSDKが10月2日に更新され、古いAPIと互換性が無く落ちる模様。

回避策としては、/node_modules/react-native-admob/androidにあるbuild.gradleでsdkバージョンを15に固定して再ビルドすれば良い。

dependencies {
    compile 'com.facebook.react:react-native:+'
    // compile 'com.google.android.gms:play-services-ads:+'
    // 15に固定
    compile 'com.google.android.gms:play-services-ads:15.0.0'
}

参考:

App keeps stopping on Android. · Issue #368 · sbugert/react-native-admob · GitHub

React-native ver.0.57.2で起動出来ない

追記:0.57.3がリリースされています。そっちでは問題が起きないので, 出来るならアップデートする方が良いと思います。

ReactNative 0.57.2でデバッグが起動できない現象が発生します。
iOSAndroid両方とも起きます。

エラー内容

iOS Android共に下記の様なエラー内容

Error: Unable to resolve module ./../react-transform-hmr/lib/index.js 
回避方法
// キャッシュのクリア
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all

// 実行
npm start --reset-cache

// 別のterminalでプロジェクトを起動
react-native run-ios
// or
react-native run-android

react-native-router-fluxで現在表示しているシーン名を取得等

基本、Actionsに色んなものが入っている。
表示中のシーンや一つ前に表示していたシーン等色々入っているのでチェックしてみると良い

import { Actions } from 'react-native-router-flux';

Actions.currentScene; // 現在表示してるシーン
Actions. prevScene// 一つ前に表示してるシーン

場所:
https://github.com/RNRF/react-native-router-flux/blob/master/src/navigationStore.js

create-react-native-appを使ってReactNative+Typescriptの環境を一瞬で作る方法

create-react-native-appを使うとReactNative+Typescriptの環境も一瞬で出来るのでサクッと紹介します。

方法

まずはインストール

npm -g install typescript create-react-native-app

次に以下のコマンドを打てば、my-appフォルダ内にTypescriptでReactNativeな環境が出来上がります。
恐ろしく簡単!

create-react-native-app my-app --scripts-version=react-native-scripts-ts

次にExpoを使ってアプリを起動してみましょう。
まずはお手元のスマホにExpoをインストールしてください。

https://play.google.com/store/apps/details?id=host.exp.exponent&hl=ja

次にreact-nativeを起動します。

cd my-app
npm start

QRコードが生成されるのでExpoで読み込めばアプリが起動します。
注意!スマホQRコードを生成したPCは同じローカルネットワークに属する必要があります。

ブラウザやタブを閉じた時にindexedDBに何か保存したい。save on exit

Webアプリでブラウザやタブを閉じた時に、今表示している内容をIndexedDBに保存したい場合ってありますよね。 ブラウザやタブが閉じる時の発火するイベントbeforeunloadを使えば上手く行きそうですが、、、。例えばこんな風に、、、

window.addEventListener('beforeunload', () => {
      saveToIndexedDB({data});
});

結論

この方法では出来ません

理由

indexedDBの保存処理は非同期のためです。 保存が終わる前に落ちてしまい保存できないです。 逆に言うとbeforeunload内は同期処理しか上手く動かないという事。

回避策

localstorageを使う。

localStorageは同期処理で保存が出来る。なので、ウィンドウが閉じた時は一旦LocalStorageに保存してから次にアプリが起動した時にindexedDBに移動させるというやり方。

// 終了時の処理
window.addEventListener('beforeunload', () => {
      localStorage.setItem('unsavedData', {key: '123',  data: 'hogehoge'});
});
// 起動時の処理
const unsavedData = localStorage.getItem('unsavedData');
if (unsavedData) {
  saveToIndexedDb(unsavedData);
  localStorage.removeItem('unsavedData');
}

気持ち悪い方法ですが、とりあえずこれで回避は出来ます。

もう一つ試した方法はServiceWorkerですが、デスクトップでブラウザを閉じると保存されず断念しました。