2021-01-21

【404エラー】react-routerでリロード/URL直打ちした時のNot Found問題

経緯

またも新しいプロジェクトを任され、Reactのアプリを作成することに。
世界展開を目指した「店舗でレジをなくすアプリ」という自社開発サービス。
エンジニア歴2年目に任せていいのかい。
もちろんPrettierは勝手に導入済。

ローカルでは問題がないが、AWS上ではエラーになり、半日困っていた。

※apacheの場合

react-routerを使用した場合にはpublicディレクトリ直下に.htaccessファイルを作成する必要がある。
react-routerを使って静的コンテンツを配信する際のrewrite設定覚書 - Qiita

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(^/assets/)
RewriteCond %{REQUEST_URI} !(^/static/)
RewriteRule .  /XXXrootのURLXXX/ [L]

RewriteRule . / 間に半角スペースがないとリダイレクトできない

※Nginxの場合

https://westa.io/@ottonove/qf6d

難しいことばかりで困る。

2021-01-04

【キオスクモード】業務用Androidタブレットを固定モードにする

経緯

2月リリース予定の「飲食店でお客さんが注文するタブレット用アプリ」（以前の記事）でAndroid タブレットをキオスクモードにする必要があり、調査をした。

検討内容

１．見つけたQiitaの記事

AndroidのKiosk端末化～ダイジェスト版～ - Qiita AndroidのKiosk端末化～ダイジェスト版～ - Qiita

読んでも理解できず。。。多分AndroidJavaで実装が必要。
プロジェクトはReact Nativeなので却下。

２．アプリの固定

Android端末で１つのアプリしか使えないようにする【画面の固定】機能 : Sam's e-AT Lab

これならいける！と思ったが使用するタブレットがAndroidがOSバージョン９以上にアップデート出来ないため却下。
Huawei、、、安いけど。。。

３．ライブラリ
React NativeのpluginではExpoを使用しないreact nativeアプリに対応しているものしか見つからなかった為、却下。

４．設定で対応

Androidで画面をピン留めする方法! スマホで表示中のアプリを固定してキオスクモードを設定しよう
設定＞セキュリティとプライバシー＞画面の固定＞ピン留め解除時にパスワードを確認をON

にすれば「戻るボタン長押し」をしない限りキオスクモードになっている。
またお客さんが長押しした場合もタブレットの起動画面に戻りパスワードが必要になる。

５．Microsoft Intuneに登録
Android Enterpriseで「専用デバイス化」する、という方法（有償？）は可能かもしれない（？）。

＜Microsoft Intuneとは＞
https://www.jbsvc.co.jp/useful/windows10/microsoft_intune.html
＜Android Enterprise 専用デバイス化　手順＞
https://docs.microsoft.com/ja-jp/mem/intune/enrollment/android-kiosk-enroll

が「４．設定で対応」で問題ないのでパス。

結論

結局いろいろ調べたが、タブレットの設定で対応することになった。

2021-01-04

【metaタグ】Next.jsのヘッダーの書き方

昨年作ったポートフォリオに実装した内容

/pages/index.js

import Head from '../components/Head';
中略
  <Head
    title={'タイトル記入'}
    description={'アプリの説明'}
    url={'https://app-url.web.app'}
  />

下記を読み込んでいる

/components/Head.js

import * as React from 'react';
import Head from 'next/head';

export default ({ title, description, keyword, url }) => {
  return (
    <Head>
      <title>{title}</title>
      <meta charSet="utf-8" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={url} />
      <meta property="og:image" content={"/favicon.png"} />
      <meta property="og:site_name" content={title} />
      <meta name="keywords" content={keyword} />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="twitter:card" content="Summary Card" />
      <meta name="twitter:site" content="@Tsue_engineer" />
      <meta name="twitter:url" content={"https://tsue-gatsby.web.app"} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={"/favicon.png"} />
      <link rel="canonical" href={url} />
      <link rel="icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" href={"/favicon.png"} />
    </Head>
  );
};

2020-12-16

【自動フォーマット】新プロジェクトにPrettier導入

経緯

今の会社にエンジニアはベテランプログラマー(44歳)と自分しかいない。
ベテランプログラマーは田中要次に雰囲気が似ているので、以下「田中さん」と呼ぶことにする。
フルリモートなので社員の皆さまと会ったことがない。
2人しか実装する人はいないが、チームワークが非常に重要である。

そんな中、入社2週間目にも関わらず、既存アプリの一部機能移植だから大丈夫であろう、
と2月リリースの新プロジェクトを任された。
某餃子チェーン店のテーブルに設置される、タブレットでお客さんがオーダーする為のアプリである。

一応聞いてみたところ、田中さんはVS Code使いだが、フォーマッター含め拡張機能は使用していない、とのこと。
ハードボイルドである。

なので、新規アプリ作成に伴い ~~勝手に~~ Prettierを導入した。
非常に快適になったため、田中さんも喜んでくれることだろう。

導入方法

インストール

yarn add --dev --exact prettier

ファイル作成

ディレクトリ直下＞.prettierrc

{
    "editor.formatOnSave": true,
    printWidth: 120, //折返す文字数
    tabWidth : 2,
    "trailingComma": "es5",
}

ファイル作成

ディレクトリ直下＞.vscode＞setting.json

{
  "editor.formatOnType": true, 
  "editor.formatOnPaste": true, 
  "editor.formatOnSave": true, 
  "editor.dragAndDrop": false, // 保存時に行の終端に存在する空白文字を削除する
  "files.insertFinalNewline": false, // 保存時にファイルの最後に存在する空行を削除する
}

ディレクトリ直下＞.vscode＞extensions.json  
これによってVScode起動時にはポップアップでインストールするようメッセージが出る。
{
  "recommendations": [
    "esbenp.prettier-vscode"//チームメンバーに入れてほしい拡張機能
  ]
}

yarn run formatでフォーマットしてくれるコマンドを追加

package.json

  "scripts": {
    略
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\""
  },

2020-12-14

【エラー解析ツール】Sentryを導入

技術

React Native + Expoでアプリ開発を行う企業に転職して1週間経ちました。
アプリでメモリリークによるクラッシュの疑いがあり調査することに。

自分の環境では再現できなかったので、
有名な格言「推測するな、計測せよ」
に従い、計測してみようとエラー解析ツールのSentryを導入することにした。

参考にした情報

EXPOドキュメント：https://docs.expo.io/guides/using-sentry/?redirected
Sentryドキュメント：https://docs.expo.io/guides/using-sentry/?redirected
導入方法：https://medium.com/@tsugitta/sentry-on-react-native-1364c3fb407a
有料版との違い：https://sentry.io/pricing/

ユーザーのスマホでエラーが起きた場合に「Issues」に追加されていきます。
「ユーザーの端末、OS、当該エラー箇所、発生件数」、などが表示されます。
無料版で問題なく使用できますが、有料版だとメンバーが追加できます。
無料版でもエラー検知時のメール送付先は追加可能。

実装したコード例：

App.js

import * as Sentry from 'sentry-expo';

Sentry.init({
  dsn: 'https://XXXXXXXXXXXXXXX@XXXXXX.ingest.sentry.io/XXXXXXX',
  enableInExpoDevelopment: true,
  debug: true,
})

app.json

前略
"hooks": {
  "postPublish": [
    {
      "file": "sentry-expo/upload-sourcemaps",
      "config": {
        "organization": "XXXXX-inc",
        "project": "XXXXXXXX",
        "authToken": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        }
     }
  ]
}

「推測するな、計測せよ」

ルール1: プログラムがどこで時間を消費することになるか知ることはできない。ボトルネックは驚くべき箇所で起こるものである。したがって、どこがボトルネックなのかをはっきりさせるまでは、推測を行ったり、スピードハックをしてはならない。

ルール2: 計測すべし。計測するまでは速度のための調整をしてはならない。コードの一部が残りを圧倒しないのであれば、なおさらである。

ルール3: 凝ったアルゴリズムは nが小さいときには遅く、nはしばしば小さい。凝ったアルゴリズムは大きな定数を持っている。 nが頻繁に大きくなることがわかっていないなら、凝ってはいけない（nが大きくなるときでさえ、ルール2が最初に適用される）。

ルール4: 凝ったアルゴリズムはシンプルなそれよりバグを含みやすく、実装するのも難しい。シンプルなアルゴリズムとシンプルなデータ構造を使うべし。

ルール5: データはすべてを決定づける。もし、正しいデータ構造を選び、ものごとをうまく構成すれば、アルゴリズムはほとんどいつも自明のものになるだろう。プログラミングの中心は、アルゴリズムではなくデータ構造にある。

ルール6: ルール6は存在しない。

wikipedia - UNIX哲学

2020-12-09

【レスポンシブ】必要なmetaタグ

技術

スマホアプリ内のWeb表示

レスポンシブでスマホサイズに対応するには下記が必要

React Nativeで表示するには<WebView />内に記載

津江のブログ

モバイルエンジニアが仕事での学びをアウトプット