Sun, 25 May 2025 11:00:00 +0000

問題

asdf を brew upgrade asdf でアップデートした後、インストール済みのプラグインが利用できなくなる問題が発生しました。

以下のようなエラーメッセージが表示されます:

~/.asdf/shims/node: line 6: /opt/homebrew/opt/asdf/libexec/bin/asdf: No such file or directory
~/.asdf/shims/node: line 6: exec: /opt/homebrew/opt/asdf/libexec/bin/asdf: cannot execute: No such file or directory

v0.14→v0.17（2025.05.25 最新バージョン）にアップデートした際に発生しました。

対処方法

以下の手順で問題を解決できます。

1. `asdf` のインストールパスを確認

以下のコマンドを実行して、asdf の新しいインストールパスを確認します:

brew --prefix asdf
/opt/homebrew/opt/asdf

2. シムリンクを再生成

asdf のシムリンクを再生成するには、以下のコマンドを実行します:

asdf reshim

これにより、すべてのプラグインのシムリンクが正しいパスで再作成されます。

3. 動作確認

再度、プラグインが正しく動作するか確認します。

node --version
v22.14.0

エラーが表示されず、問題なくバージョンが出力されました

まとめ

brew upgrade asdf 後にプラグインが動作しなくなる問題は、asdf のインストールパス変更が原因です。
asdf reshim コマンドを使用してシムリンクを再生成することで解決できます。

今後、asdf をアップデートする際は、この手順を参考にしてください。

]]>

Sat, 18 May 2024 06:44:48 +0000

この記事はNext.js@14.2での調査結果になります。

Next.jsでPolyfillを自動挿入できるか

結論から言うと、SWCを使用している場合はPolyfillを自動挿入する設定はありませんでした。

Babelを使用している場合は、設定次第でPolyfillを自動挿入することが可能です。
https://babeljs.io/docs/babel-preset-env#usebuiltins

そもそも、SWCでPolyfillの自動挿入はできる？

純正のSWCでもBabel同様の機能を提供しています。

.swcrcにtargetとmodeを指定すると、トランスパイル結果にPolyfillが挿入されます。

{
    "env": {
        "targets": "Chrome >= 48, Safari > 9",
        "mode": "usage"
    }
}

以下のような、新しめのメソッドを使ったコードで試してみます。

const hoge = "hoge"

console.log(hoge.replaceAll("1", "2"))

const arr = [1, 4, 3, 2].toSorted()

トランスパイル後のコードは次のようになります。

npx swc ./index.js の出力結果:

import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.array.sort.js";

var hoge = "hoge";
console.log(hoge.replaceAll("1", "2"));
var arr = [1, 4, 3, 2].toSorted();

文頭にcore-jsのPolyfillコードが注入されました。

Next.jsでenvの設定ができないのか

Webpackの設定からSWCのオプションであるenvを指定できれば、Polyfillの自動挿入が可能と考えました。

Next.jsのドキュメントにはSWCローダーに関する記載がなかったため、実装の方を調査しました。

next.config.jsの出力結果から探る

next.config.jsからWebpackをカスタマイズできるので、ログを仕込んで確認します。

webpack: (config, options) => {
    if (options.isServer) {
        return config;
    }

    console.dir(config.module.rules, { depth: 5 });
    
    return config;
}

出力された結果から、それらしきものを発見しました。

{
    test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
    include: [
        '/myproject/path',
        /next[\\/]dist[\\/](esm[\\/])?shared[\\/]lib/,
        /next[\\/]dist[\\/](esm[\\/])?client/,
        /next[\\/]dist[\\/](esm[\\/])?pages/,
        /[\\/](strip-ansi|ansi-regex|styled-jsx)[\\/]/
    ],
    exclude: [Function: exclude],
    use: [
        {
            loader: 'next-swc-loader',
            options: {
                isServer: false,
                rootDir: '/myproject/path',
                pagesDir: '/myproject/path/src/pages',
                appDir: undefined,
                hasReactRefresh: false,
                nextConfig: [Object],
                jsConfig: [Object],
                transpilePackages: [Array],
                supportedBrowsers: [Array],
                swcCacheDir: '/myproject/path/.next/cache/swc',
                serverComponents: true,
                esm: false
            }
        }
    ]
}

next-swc-loaderがSWCでコードをトランスパイルしてると予想できます。

next-swc-loaderの実装を探す

GitHubからコードを探します。

Webpackのオプションを生成している箇所：
https://github.com/vercel/next.js/blob/v14.2.3/packages/next/src/build/webpack-config.ts#L426

next-swc-loader：
https://github.com/vercel/next.js/blob/v14.2.3/packages/next/src/build/webpack/loaders/next-swc-loader.ts

SWCオプションに変換している箇所：
https://github.com/vercel/next.js/blob/v14.2.3/packages/next/src/build/webpack/loaders/next-swc-loader.ts#L115

getLoaderSWCOptions：
https://github.com/vercel/next.js/blob/v14.2.3/packages/next/src/build/swc/options.ts#L324

next.config.jsから設定できるオプションをSWCオプションに置換している箇所まで辿り着きました。
https://github.com/vercel/next.js/blob/v14.2.3/packages/next/src/build/swc/options.ts#L454-L474

そして一番重要なenvの部分が以下のように記述されていました。

...(supportedBrowsers && supportedBrowsers.length > 0
    ? {
        env: {
            targets: supportedBrowsers
        }
    }
    : {}),

Polyfillを挿入するにはenv.modeを設定する必要がありますが、追加する余地がありませんでした。

結論

残念ながら、Next.jsのSWCコンパイラではPolyfillの自動挿入を設定することができませんでした。

SWCのオプションを設定したい要望はいくつか上がってるので、いつかできるようになると良いですね。

https://github.com/vercel/next.js/discussions/46979
https://github.com/vercel/next.js/discussions/30413
https://github.com/vercel/next.js/discussions/30940

]]>

Wed, 20 Sep 2023 13:21:48 +0000

使われてないiOSシミュレーターを削除してストレージを空ける

1TBもあるストレージがパンパンに・・・

Flutterで開発していると、iOSシミュレーターだったり、Androidエミュレータだったり、XCode, AndroidStudio, etc

他にも様々なプロジェクトに携わり、ReactNativeやUnityなどのツールも入っていて、、

あっという間にストレージがいっぱいになってしまいました。

使っていないiOSシミュレーターが溜まっていることに気づいたので、シミュレーターを削除してストレージを確保しました。

使えなくなっているシミュレーターを削除

以下のコマンドを叩くと、unavailable と表示されるシミュレーターがある。

$ xcrun simctl list

PC上に保存されているシミュレーターがズラーっと表示される。

== Devices ==
-- iOS 10.3 --
-- iOS 13.7 --
    iPhone 8 (45557ED5-9009-412F-B34E-486217554EB9) (Shutdown)
    iPhone 8 Plus (095C2487-0A98-4F0E-A4D3-633BFE5F2933) (Shutdown)
    iPhone 11 (C26FD654-62C6-46A6-B91E-8640242F02C4) (Shutdown)
    iPhone 11 Pro (B2AD3004-DFFF-4518-8F82-8B5E540C966B) (Shutdown)
    iPhone 11 Pro Max (E61A865B-6B3E-4230-94DF-E76910BACA0A) (Shutdown)
    iPhone SE (2nd generation) (BC6D4CEE-DD96-4E20-9A06-DED430497DE7) (Shutdown)
    iPad Pro (9.7-inch) (3F5CB658-6CEB-4BE5-AD17-7D17E9D31210) (Shutdown)
    iPad (7th generation) (161CEFAA-79DA-4955-992A-278E43D41DA5) (Shutdown)

下の3つはunavailableになったシミュレーター

-- Unavailable: com.apple.CoreSimulator.SimRuntime.iOS-14-1 --
    iPhone 6s (C6C43D69-915B-40C9-81FB-52A1EFB03EA1) (Shutdown) (unavailable, runtime profile not found)
    iPhone 8 (3B5B229C-D232-46CE-9D03-640506FDCC17) (Shutdown) (unavailable, runtime profile not found)
    iPhone 8 Plus (3E20A0C5-DFD5-4360-8033-543420F7F771) (Shutdown) (unavailable, runtime profile not found)
     ・

これらはiOS14.1のシミュレーターで、マイナーバージョンでiOS14.4が出てから使われなくなってしまったシミュレーターだ。

使うことはなさそうなので、これらを一括削除してくれるコマンドを実行

$ xcrun simctl delete unavailable

このコマンドで unavailable なシミュレーターが削除される

無駄に多いシミュレーターを削除

また、使っていないシミュレーターをあると思うのでそれも削除する。

上の画面を表示するには、XCodeのデバイス部分をクリックして、Add Additional Simulatorsを選択するとウィンドウが表示される。

無駄にあるiPhone〇〇だったり、Pro Max, Proだとかこんなにいらんわ！ってやつを右クリックしてDeleteで削除してしまいましょう。

これらで、10GBくらいは容量を確保できました。

]]>

Sun, 30 Jul 2023 05:23:35 +0000

Sentryにソースマップが効かない

該当するソースマップはSentryにアップロードされているのに、Sentry画面ではSource Map File doesn’t existと表示され、どこでエラーが起こったか検討もつかない状態になってしまっている。

アプリケーションの環境は以下である。

Next.js（CSR）
CloudStorageにホスティング

Sentryのドキュメント通り導入し、エラーのトラッキングは動作している。

上手く動作しない過程で、next.config.jsにSentryの設定を追加したが効果はなかった。

/** @type {import('@sentry/nextjs/types/config/types').UserSentryOptions} */
const userSentryOptions = {
  hideSourceMaps: true,
  widenClientFileUpload: true,
}

オプション内容は、下記を確認してください。
https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

distオプションを設定することで解決

next.config.jsとsentry.client.config.jsの2ファイルにdistの設定を行うことで解決しました。

 const sentryWebpackPluginOptions = {
   project: process.env.SENTRY_PROJECT,
   authToken: process.env.SENTRY_AUTH_TOKEN,
+  dist: 'MYAPP'.
 }

 Sentry.init({
+  dist: 'MYAPP',
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   // ...
 })

SSR等サーバー側でも動かしている場合は、sentry.server.config.js/sentry.edge.config.jsにも同じ設定を追加する必要があるだろう。

distの値は同じ名前にしてください。

ビルドしてエラーを起こすと、無事ソースマップが効いてエラー箇所が分かりやすくなった。

なにが原因だったのか

ひとつのSentryプロジェクトに複数のアプリケーションを繋げているのが原因だった。

運用しているサービスでは Next.js のアプリが2つ存在しており、それらが1つのSentryプロジェクトに紐づいている。

ソースマップはreleaseごとに管理されているが、解決前のソースマップを見ると、同じようなファイルが2つ存在していた。

なぜこのようなことが起こったかというと、sentryのrelaseタグはデフォルトでgitのSHAになるように設定されている。

当アプリケーションでは、モノレポ構成で管理画面・ユーザー画面を管理しており、GitHub Actionsで同時に2つのアプリのビルドを行っている。
そうすると同じreleaseタグかつ、同じSentryプロジェクト上にあるため、ソースマップのバッティングが起こってしまったと考えられる。

それを解決するために、誰のソースマップかを認識させるためdistオプションを使用した。

distについて調べたが、distオプションを使用している例はちらほらあるが、詳しい情報を見つけることができなかった。。

この設定を入れたあとのソースマップは、以下のようになっている。

解決前後で比較すると,アプリ毎に識別されたソースマップになっていることがわかる(一部重複してしまっていたファイルもあったみたい)。

結論

同Sentryプロジェクトに複数のアプリケーションが紐づくときはdistの設定を行いましょう。

]]>

Mon, 26 Jun 2023 09:38:00 +0000

最近、個人開発などでWebアプリを開発するとなると、Next.js＋Vercelで開発することが多いです。

その中でも、TypeScriptやESLintなどの設定が固まりつつあるので、自分の開発しやすい設定を紹介します。

Create a project

create-next-app でNext.jsを作成する際の設定

$ npx create-next-app@latest
What is your project named? my-app
Would you like to use TypeScript with this project? Yes
Would you like to use ESLint with this project? Yes
Would you like to use Tailwind CSS with this project? No
Would you like to use `src/` directory with this project? Yes
Use App Router (recommended)? Yes
Would you like to customize the default import alias? Yes

TailwindだけNoとしています。
TypeScript、ESLintは当然入れています。

src/ディレクトリを使うのは、ルートディレクトリが.eslintrc, .prettierrc, tsconfig.json, codegen.config.js, pathpida.const.js, ... と設定ファイルで溢れ返るので開発中に触るファイルはsrc/以下にまとまっていた方が見やすくなるので、src/を使うようにしています。

App Routerは、今後のスタンダードになっていくと思うので、Yesにしています。

the default import aliasはimport ... from '@/...' のようにエイリアスで参照できる設定を入れてくれます。自分はエイリアス参照が好みなので入れています。

Tailwindを入れていない理由としては、例えばMUIなど外部コンポーネントライブラリを使う場合などに、ここのスタイルはTailwind、こっちのスタイルはMUIなど、ごちゃごちゃになるので使っていません。
あと、クラス名でコードが埋まってしまい、可読性も落ちるのが好きじゃないので使っていません。

TypeScriptの設定

TypeScriptの設定は、create-next-appを使って生成されるファイルで満足しているのでほぼいじっていません。

ひとつだけ設定を追加していて、それはnoUncheckedIndexedAccessです

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true,
  }
}

この設定を追加すると、オブジェクトや配列のプロパティにアクセスする際に、undefinedを考慮した書き方にしないとTypeErrorにしてくれる機能です。

例えば、以下のコードでstrの型が何になるかというと、str: string | undefinedとなります。

const arr: string[] = ['1', '2']
  
const str = arr[0]

しかし、noUncheckedIndexedAccessを設定しないと、str: stringとなります。

これの何がいけないかというと、arr[3] = undefinedなのに、string型と認識してしまい。
arr[3].lengthなんて書いてもエラーも出ずにコンパイルが通ってしまいます。

こういったバグの温床を防ぐために、、noUncheckedIndexedAccessを設定しています。

ESLint, Prettier

Linterには、ESLint,Prettierを入れています。

Prettier

フォーマットの設定は、以下のようにしています。

module.exports = {
  trailingComma: 'all',
  semi: false,
  singleQuote: true,
}

`trailingComma: 'all'`

常にカンマを入れる設定をしています。
理由は、gitの差分を見やすくするためです。

例えば以下のある型にプロパティを追加したいとき、設定によって差分が変わります。

デフォルトのes5の場合

trailingComma: 'all'の場合

画像のようにカンマが追加される行も差分として表示され、若干見づらくなるので、trailingComma: 'all'を好んで使っています。

`semi: false`

行末につける;を省略しています。

セミコロンつける必要なくない？てことがほとんどなので、省略しています。

`singleQuote: true`

文字列を書くときは、'hoge'とシングルクォートで囲います。

これは好みかもしれません。昔からシングルクォートだったので入れています。

ESLint

初期設定では、'next/core-web-vitals'しか入っておらず、ほぼLintが効いていない状態なのでカスタマイズしています。

以下の設定がどのプロジェクトでも使っている設定です。

/**
 * @type {import('eslint').ESLint.ConfigData}
 */
module.exports = {
  extends: ['eslint:recommended', 'next/core-web-vitals'],
  overrides: [
    {
      files: ['**/*.ts?(x)'],
      extends: ['plugin:@typescript-eslint/recommended'],
      rules: {
        '@typescript-eslint/no-unused-vars': [
          'warn',
          {
            argsIgnorePattern: '^_',
            caughtErrorsIgnorePattern: '^_',
            destructuredArrayIgnorePattern: '^_',
            // Note { ref, ...others } = propsのように不要なrefの取り除くときに、unused-vars警告を無視できるが、refを使っているのかがわからなくなってしまうので使わない
            // 代わりに、varsIgnorePatternで、{ ref: _, ...others } = propsのように回避できるようにする
            // ignoreRestSiblings: true,
            varsIgnorePattern: '^_',
          },
        ],
      },
    },
    { files: ['*'], extends: ['prettier'] },
  ],
  rules: {
    'no-duplicate-imports': 'error',
    curly: 'error',
    eqeqeq: 'error',
    'no-nested-ternary': 'error',
    'no-param-reassign': 'error',
    'no-restricted-imports': [
      'error',
      {
        patterns: ['../*'],
      },
    ],
    'no-return-assign': 'error',
    'no-return-await': 'error',
    'object-shorthand': 'error',
    'prefer-const': 'error',
    yoda: 'error',
    'import/order': [
      'error',
      {
        alphabetize: {
          order: 'asc',
        },
        distinctGroup: false,
        pathGroups: [
          {
            pattern: '@/**',
            group: 'parent',
            position: 'before',
          },
        ],
      },
    ],
  },
}

'eslint:recommended', 'plugin:@typescript-eslint/recommended'で、ESLintとTypeScriptのおすすめのLintを入れています。

rulesには、開発者によって書き方の揺れが発生するのを防いだり、他の人にとって理解しづらいコードにならないようにするためのルールを追加しています。

その中でも工夫しているルールをピックアップして紹介します。

`@typescript-eslint/no-unused-vars`

no-unused-varsは、使ってない変数をかくなよというルールですが、少しルールに手を加えています。

'@typescript-eslint/no-unused-vars': [
  'warn',
  {
    argsIgnorePattern: '^_',
    caughtErrorsIgnorePattern: '^_',
    destructuredArrayIgnorePattern: '^_',
    varsIgnorePattern: '^_',
  },
],

例えば以下のように使いたいときに、@typescript-eslint/no-unused-varsが効いているとアラートが出てしまい困ることがありました。

const { ref, ...others } = props

return (
  <div>
    <Component {...others} />
  </div>
)

propsから変数refを取り除いて、Componentにpropsを流したときに、refは使っていないのでアラートが出てしまいます。

それを解消するために上記の設定をすると以下のように書くことができます。

const { ref: _, ...others } = props

return (
  <div>
    <Component {...others} />
  </div>
)

使っていないrefを_という変数にしています。

このように書くことで、refは使っていないということを他の開発者に伝えることができ、わざわざこの変数を使っていないか確認する必要がありません。
アンダーバーから始まっている変数は使っていないということが明示できているので。

GitHub Actions

GitHub Actionsを使って、LintやTypeCheckの確認を行うようにしています。

ワークフローのコードは、少し長いので以下のリンク先でご覧ください。

https://codesandbox.io/p/sandbox/lingering-hill-9w2p9v?file=%2F.github%2Fworkflows%2Fci.yaml%3A122%2C1

やっていることは、setup-nodeジョブで環境セットアップを行い、並列でESLint,Prettier,TypeScriptビルドのジョブを走らせています。

node_modulesをキャッシュすることで実行時間を削減

actions/setup-node@v3にキャッシュの機能がありますが、それではnode_modulesをキャッシュすることができず、毎回yarn installが走ってしまい実行時間がかかってしまいます。

ですので、node_modulesをキャッシュする設定を加えます。それが以下になります。

jobs:
  setup-node:
    steps:
      - uses: actions/cache@v3
        id: node_modules_cache_id
        with:
          path: ${{ github.workspace }}/node_modules
          key: ${{ runner.os }}-node${{ env.NODE_BUILD_VERSION }}-yarn-${{ hashFiles('**/yarn.lock') }}

      - name: Package install
        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
        run: yarn install --frozen-lock

actions/cache@v3でnode_modulesディレクトリをキャッシュするように設定して、キャッシュが見つかった場合はyarn installを省略しています。

キャッシュキーに各パラメータを持たせることで、nodeバージョンやyarn.lockに変更があったらキャッシュを更新するようにしています。

キャッシュを使う側のジョブでは、このキャッシュをリストアする設定を追加します。

jobs:
  setup-node:
    steps:
      - name: Restore cache node_modules
        id: restore_cache_node_modules
        uses: actions/cache/restore@v3
        with:
          path: ${{ github.workspace }}/node_modules
          key: ${{ runner.os }}-node${{ env.NODE_BUILD_VERSION }}-yarn-${{ hashFiles('**/yarn.lock') }}

actions/cache/restore@v3を使って、先程のキーからキャッシュを取得します。

まとめ

Next.jsで開発する際の設定を、なぜその設定なのか、どう工夫しているかを紹介しました。

プロジェクトによってzustand, zod, storybook, jestなどのツールを導入するので、それに合わせた設定を追加していますが、今回紹介したものはどのプロジェクトにも共通して入れています。

説明したコードは以下においていますので参考にしてみてください。
https://codesandbox.io/p/sandbox/lingering-hill-9w2p9v?f

]]>

Fri, 25 Nov 2022 09:00:00 +0000

Adonis5をAPIサーバーとして扱う場合の認証はAPI tokensというOAT認証方式のトークンが採用されています。

Opaqueトークンは、JWTトークンのように有効期限を更新するためのリフレッシュトークンがない。そのため期限をすぎると再認証が必要になります。

しかし、AdonisにはOpaqueトークンを更新する機能が用意されていないので、トークンの期限を更新をどうしたかを紹介します。

Opaqueトークンの更新タイミング

まずOpaqueトークンの文字列、情報が含まれてないランダムなハッシュデータです。ですから頻繁にネットワーク上に流れてもセキュリティ上問題ありません。
(JWTなんかは30分とか非常に短い期限にするのが一般的です。)

なので、トークン自体の期限を2週間と長く設定して、APIにアクセスする度に期限をチェックして、10日以下になったときに、トークンの期限日を伸ばす仕様にする。

クライアントはトークンを更新する必要がない。なぜなら、DBに保存されているexpired_atを更新するだけでハッシュに変更はないからです。

実装方法

コードでは以下のようなことを行う。

if (await auth.use('api').check()) {
  const expiresAt = auth.use('api').token?.expiresAt
  const tokenHash = auth.use('api').token?.tokenHash

  if (!!expiresAt && !!tokenHash) {
    // トークンの期限が10日以下になった場合
    if (DateTime.local().plus({day: 10}) > expiresAt) {
      const dateTimeFormat = Database.query().client.dialect.dateTimeFormat
      const newExpiresAt = DateTime.local().plus({day: 14}).toFormat(dateTimeFormat)
      // DBのapi_tokens.expires_atを更新する
      await Database.from('api_tokens').where('token', tokenHash).update({ 'expires_at': newExpiresAt })
    }
  }
  return response.accepted(auth.use('api').user)
} else {
  return response.unauthorized()
}

tokenをアップデートする関数が用意されていないので、DatabaseQueryBuilderで直接api_tokensテーブルを指定してupdateを行っている。

その際に、日付をクエリに入れるときFormatしないとエラーを吐く。

"update `api_tokens` set `expires_at` = 2022-10-19 13:20:32.841 +00:00 where `token` = 'a753bc6e3d3aee20afb19d53d56f87bb9b4d1e415cc70ab0ee009387b57f4dd9' - Unknown column '_zone' in 'field list'"

日時のフォーマットは、Adonisのauthパッケージを参考にdateTimeFormatを取得した。

https://github.com/adonisjs/auth/blob/master/src/TokenProviders/Database/index.ts#L110

const dateTimeFormat = Database.query().client.dialect.dateTimeFormat

これで同じトークンを使っていても定期的にサービスを利用していれば、期限切れを起こすことがなくなる認証ができた。

この他にも、AdonisJS v5へのアップグレードで行ったことをまとめました。
なにか役に立てたら幸いです。

]]>

Thu, 24 Nov 2022 09:00:00 +0000

検索件数が知りたいときに数値を返すgetCountを作成する。

await User.query().getCount();
// => 23

いちおうcount()は存在する。

AdonisのORMにはcount関数が存在するのだが、通常のSQL同様の結果が返ってきて不便

await Database.query().from('users').count('* as total')
// => [ { total: 23 } ]

配列だし、オブジェクトだし、、扱いにくい。

なので、このcount関数をマクロという機能を使い、便利な関数をQueryBuilderに自作しようと思います。

getCountを作成する

providers/AppProvider.tsのbootに以下のコードを追加します。

export default class AppProvider {
  public async boot() {
    const {
      DatabaseQueryBuilder
    } = this.app.container.use('Adonis/Lucid/Database')

    DatabaseQueryBuilder.macro('getCount', async function () {
      const result = await this.count('* as total')
      return BigInt(result[0].total)
    })

		const {
		  ModelQueryBuilder
		} = this.app.container.use('Adonis/Lucid/Database')
		
		ModelQueryBuilder.macro('getCount', async function () {
		  const result = await this.count('* as total')
		  return BigInt(result[0].$extras.total)
		})
  }
}

Database.query('users')...とUser.query()...の2パターンで実行できるように、DatebaseQueryBuilderとModelQueryBuilderに同じgetCountを作成しています。

これを使おうとするとgetCountなんで関数ねぇよとTypeScriptに怒られるので、型を追加します。
Adonisではcontracts/というディレクトリにすでにいくつかの型が作成されていますので、contracts以下に追加します。

database.tsとlucid.tsという2ファイルを作成しました。

declare module '@ioc:Adonis/Lucid/Database' {
  interface DatabaseQueryBuilderContract<Result> {
    getCount(): Promise<BigInt>
  }
}

declare module '@ioc:Adonis/Lucid/Orm' {
  interface ModelQueryBuilderContract<
    Model extends LucidModel,
    Result = InstanceType<Model>
  > {
    getCount(): Promise<BigInt>
  }
}

大きな値も扱えるようにBigIntにしています。

これで以下のように実行することができます。

await User.query().getCount()
// もしくは
await Database.query().from('users').getCount()
// => 23n    BigIntにはnがつく

以上になります。

この他にも、AdonisJS v5へのアップグレードで行ったことをまとめました。
なにか役に立てたら幸いです。

]]>

Wed, 23 Nov 2022 09:03:00 +0000

AdonisではORMを使ってDBへのアクセスを行うので、実際に発行されているSQLクエリがわからない。
そのため、N+1問題とかを見つけにくくなっている。

シンプルな宣言だったらクエリのイメージはつく

const project = await Project.query().where('id', id).first()

related, preloadなのリレーションも検索するとなると実際どういったクエリが動いているかが想像しにくい、、

const projects = await user
      .related('projects')
      .query()
      .whereNot('status', 'preview')
      .preload('items')
      .preload('image')

今回は裏で発行されているSQLクエリをログに出力できる設定を紹介します。
2パターンあって、すべてのクエリが出力と確認したいクエリだけを出力する方法があります。

データベースの設定でデバッグを有効にする

DB設定でデータベースのデバッグをonにすると、上記で設定したEvent db:queryが発行されるようになる。

const databaseConfig: DatabaseConfig = {
  connections: {
    mysql: {
      debug: true,
    },
  }
}

SQLクエリをログに出力する設定をする

全てのクエリを出力する

AdonisJSの機能のひとつEventを使ってSQLクエリを検知してログ出力する

まずはEventのファイルを用意する。

$ node ace make:prldfile events
❯ Select the environment(s) in which you want to load this file · No items were selected

CREATE: start/events.ts

make:prldfileとはpreloadsと呼ばれる機能用のファイルを作成するコマンドで、preloadsはアプリケーション起動時に一度だけ読み込み実行されます。

.adonisrc.jsonに先程作成したファイルが追加されていると思います。

ここにEvent機能を使ってクエリを検知したらログを出力するコードを書きます。

import Event from '@ioc:Adonis/Core/Event'
import Logger from '@ioc:Adonis/Core/Logger'
import Database from '@ioc:Adonis/Lucid/Database'
import Application from '@ioc:Adonis/Core/Application'

Event.on('db:query', (query) => {
  if (Application.inProduction) {
    Logger.debug(query)
  } else {
    Database.prettyPrint(query)
  }
})

アプリを再起動するとコンソールにログが出力されます。

特定のクエリのみを確認する

上記ですべてのクエリが確認できるようにはなるのですが、複雑なプログラミングになると一度で10個以上のクエリが動いたりと自分の確認したいクエリがどれなのかがわかりづらくなってしまうので、特定のクエリのみログを出力する方法も紹介します。

方法はシンプルで出力したいQueryBuilderに.debug(true)を追加するだけ。

Database
  .query()
  .select('*')
  .debug(true) // 👈

最初のconfigファイルで設定を忘れていなければログが出力されるかと思います。

以上になります。

この他にも、AdonisJS v5へのアップグレードで行ったことをまとめました。
なにか役に立てたら幸いです。

]]>

Wed, 09 Nov 2022 09:00:00 +0000

Facebookのログイン認証を行うのにSSLである必要があるので、開発環境でもHTTPSで起動できるようにする。

証明書は$ mkcert localhostなどで各自で用意してください。
mkcertの使い方はこちらの記事で紹介しています。

HttpsServerパッケージをインストール

$ yarn add https

server.tsを編集

const httpServer = new Ignitor(__dirname).httpServer()

// Env.get('NODE_ENV')はserver.tsではまだ使えないため以下のように書く
if (process.env.NODE_ENV !== 'production') {
  const options = {
    key: fs.readFileSync(path.join(__dirname, '../cert/localhost+2-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, '../cert/localhost+2.pem')),
  }

  httpServer.start((handler) => https.createServer(options, handler))
} else {
  httpServer.start()
}

SSLが効いた状態で起動できた。

この他にも、AdonisJS v5へのアップグレードで行ったことをまとめました。
なにか役に立てたら幸いです。

]]>

Tue, 08 Nov 2022 09:00:00 +0000

こちらは、現時点で最新のAdonisJS v5の記事になります。

テストの導入手順とAdonis v4との変更点を紹介します。

公式ドキュメント
https://docs.adonisjs.com/guides/testing/introduction

テストはVowという内製？のテストツールからJapaに変更されています。
全体的に大きな変更はなく、メソッド名が違ったりの小さな変化でした。

Test機能を追加する

$ node ace configure tests

[ wait ]  installing @japa/runner, @japa/preset-adonis  ..

なぜかインストールが進まないので、一旦停止してpackageを追加します。

$ yarn add -D @japa/runner @japa/preset-adonis
$ node ace configure tests

TestDB設定

test用のDBを用意する。

テスト環境でのみ読み込まれる環境変数.env.testを作成します。

DB_DATABASE=adonis-test

テスト実行前にDBのマイグレーションを実行する設定を追加

  export const runnerHooks: Required<Pick<Config, 'setup' | 'teardown'>> = {
    setup: [
      () => TestUtils.ace().loadCommands(),
+     () => TestUtils.db().migrate(),
    ],
    teardown: [],
  }

Drive設定の追加

自分のサービスではAdonisで画像ファイルを作成する機能があるため、テストで作成されたファイルはテスト終了後に削除する設定が必要。

テストで作成されたファイルを削除する。

export const runnerHooks: Required<Pick<Config, 'setup' | 'teardown'>> = {
  teardown: [
    async () => {
      const list = await Drive.list('./').recursive().toArray()
      await Promise.all(await list.map((item) => Drive.delete(item.location)))
    }
  ],
}

このままだと全環境のファイルを削除してしまうので、テスト環境でのファイルの保存先を変更する。

export default driveConfig({
  disks: {
    local: {
			root: Env.get('NODE_ENV') === 'test' ? Application.tmpPath('upload') : Application.publicPath('upload'),
		}
	}
})

Testの書き方

テストを追加する

$ node ace make:test functional user
CREATE: tests/functional/user.spec.ts

作成されたファイルにテスト内容を書いていく。

テストの書き方はJapaなので公式サイトを参考に書いてください。
https://japa.dev/docs

Factoryを作成する

モデルのモックデータとなるFactoryを作成する

$ node ace make:factory user
CREATE: database/factories/UserFactory.ts

import user from 'App/Models/user'
import Factory from '@ioc:Adonis/Lucid/Factory'

export default Factory.define(user, ({ faker }) => {
  return {
    email: faker.internet.email(),
    password: faker.internet.password(),
  }
}).build()

Adonis v4との違い

テストツールをAdonis v4ではassertにchaiを使っていたが、Adonis v5からjapaというものに変わり、書き方が変わっているので変更点だけ紹介する。

全体的な書き方の違い

Adonis v4

const { test } = use('Test/Suite')('User')
const Factory = use('Factory')
const Mail = use('Mail')

const UserFactory = Factory.model('App/Models/User')

test('can create user if valid data', async ({ assert }) => {
  // some tests
})

Adonis v5

import { test } from '@japa/runner'
import Mail from '@ioc:Adonis/Addons/Mail'
import UserFactory from 'Database/factories/UserFactory'

// test関数の似た感じ
test.group('User', () => {
  test('can create user if valid data', async ({ assert, client }) => {
     // some tests
  })
})

Database Transaction

テスト間でデータが影響しないように、テスト毎にトランザクションを貼り、終了後にロールバックします。

Adonis v4

const { test, trait } = use('Test/Suite')('User registration')

trait('DatabaseTransactions')

Adonis v5

import Database from '@ioc:Adonis/Lucid/Database'

test.group('Group name', (group) => {
  group.each.setup(async () => {
    await Database.beginGlobalTransaction()
    return () => Database.rollbackGlobalTransaction()
  })
})

ApiClient

Adonis v4

const response = await client.post('/api/v1/user').send(data).end()

Adonis v5

const response = await client.post('/api/v1/user').fields(data)

Response Assert

ApiClientのレスポンスのアサーション

Adonis v4

response.assertJSONSubset([
  {
    message: '会員登録完了しました',
  },
])

Adonis v5

response.assertBodyContains({
  message: '会員登録完了しました',
})

// error response
response.assertBodyContains({
  errors: [{
    message: 'メールアドレスが正しくありません',
    field: 'email',
    rule: 'email',
  }]
})

メール

Adonis v4

test('hoge', async ({}) => {
  Mail.fake()
  const recentEmail = Mail.pullRecent()
  assert.equal(recentEmail.message.to[0].address, email)
  assert.equal(recentEmail.message.subject, '会員登録いただきありがとうございます。')

  Mail.restore()
})

Adonis v5

test('hoge', async ({}) => {
  const mailer = Mail.fake()
  mailer.exists((mail) => {
    const sameAddress = mail.to?.some(to => to.address == email) || false
    const sameSubject = mail.subject === '会員登録いただきありがとうございます。'
    return sameAddress && sameSubject
  })
  Mail.restore()
})

Factory

Adonis v4

const user = await UserFactory.create({
  password: 'password',
})

Adonis v5

const user = await UserFactory.merge({
  password: 'password',
}).create()

この他にも、AdonisJS v5へのアップグレードで行ったことをまとめました。
なにか役に立てたら幸いです。

]]>

Mon, 07 Nov 2022 05:49:33 +0000

こちらは、現時点で最新のAdonisJS v5の記事になります。

Validatorの導入手順とAdonis v4との違いについて紹介します。

Validatorとは、リクエストで送られてきたデータを解析・検証して異常があれば、エラーメッセージをレスポンスすることができる機能です。

公式リファレンス
https://docs.adonisjs.com/guides/validator/introduction

Adonis v4ではRouteにvalidatorというメソッドがありましたが、v5からはController内で行います。

Adonis v4

Route.post('users', 'UserController.store').validator('User/CreateUser')

Adonis v5

export default class UsersController {
  public async store({ auth, request, response }: HttpContextContract) {
    const payload = await request.validate(StoreUserValidator)
    const user = await User.create(payload)
...

ValidatorClassを作っていく

リクエストで送られてくるデータの検証をするスキーマ、エラーの場合のエラーメッセージを定義するClassを作ります。

例に上記で書いたStoreUserValidatorを作っていきます。

$ node ace make:validator User/StoreUser
CREATE: app/Validators/User/StoreUserValidator.ts

import { schema, CustomMessages } from '@ioc:Adonis/Core/Validator'
import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class StoreUserValidator {
  constructor(protected ctx: HttpContextContract) {}

  public schema = schema.create({})

  public messages: CustomMessages = {}
}

ValidatorClassが生成されたので、schemaとmessagesを編集していく。

Validator Schemaの書き方

schemaでは、リクエストで送られてくるデータを検証するためのValidationRuleを決めます。

リクエストで、メールアドレスとパスワードを送って来てほしい場合は以下のようになります。

export default class StoreUserValidator {
  public schema = schema.create({
    email: schema.string([
      rules.required(),
      rules.email(),
      rules.unique({ table: 'users', column: 'email' })
    ]),
    password: schema.string([rules.required()]),
  })
}

emailは、string型で必須required, メール形式email, DB上のusersテーブルで重複がないかuniqueをルールにしています。

passwordは、string型で必須requiredをルールにしています。

他にも様々なルールが用意されているので、以下のリンクの左メニューから探しください。

https://docs.adonisjs.com/reference/validator/rules/alpha

Validationメッセージの書き方

続いてはルールに違反したときのメッセージについてですが、これは定義しなくてもデフォルトで設定されているのでエラーがでない心配は無いのですが、英語です。。。

ですので、日本語で返せるようにだったり、「メールアドレスは必須です」や「パスワードを入力してください」のように同じrequiredルールでも表示を変えたい場合はカスタムメッセージを定義する必要があります。

簡単に書くと以下のようになります。

export default class StoreUserValidator {
	...
  public messages: CustomMessages = {
    required: 'The {{ field }} is required to create a new account',
    'email.required': 'メールアドレスは必須です',
    'password.required': 'パスワードを入力してください',
  }
}

これでも動作はするのですが、StoreUserValidatorだったりLoginUserValidator, UpdateUserValidatorだったり、Validatorが増えたときにそれぞれで同じメッセージを書く必要があり、メール, メールアドレス, Emailのような表記のゆれや、変更があったときに修正漏れの可能性が高くなります。

なので、メッセージを共通化をしていきます。

Validatorメッセージの共通化

やり方としては、

各ルールのエラーメッセージを一つのファイルにまとめる。
email, passwordといった項目がメールアドレス、パスワードといった表示名を一つのファイルにまとめる
カスタムメッセージでそこから参照できるように設定する

これを実現するために少しトリッキーかもしれませんが多言語サポートで使われるi18nを使おうと思います。

@adonisjs/i18nを導入。

$ yarn add @adonisjs/i18n
$ node ace configure @adonisjs/i18n

Server.middleware.register([
  () => import('App/Middleware/DetectUserLocale')
])

日本語しか使わないから、設定を日本語のみに変更

defaultLocale: 'ja',
supportedLocales: ['ja'],

翻訳データはjsonでもyamlでも書ける。
yaml推しなのでyamlで書いていく。

i18nはValidatorMessageに対応しています。
https://docs.adonisjs.com/guides/i18n#validator-messages

validator.yamlのsharedに書くと自動的にValidationMessageに紐づきます。

shared:
	maxLength: "最大{maxLength}文字までです"
  required: "{field}は必須です"
  email: "{field}が正しくありません"
  unique: "{field}は既に存在しています"

ただこのままだと、fieldが翻訳されずにemailが正しくありませんのようにemailと表示されてしまうので、メールアドレスが正しくありませんと日本語名で表示できるように修正していきます。

fieldの翻訳データを用意する。

email: 'メールアドレス'
password: 'パスワード'

Validatorをカスタマイズする。

export default class StoreUserValidator {
	// 追加
  get fields() {
    return {
      email: this.ctx.i18n.formatMessage('user.email'),
      password: this.ctx.i18n.formatMessage('user.password'),
    }
  }
  public messages: CustomMessages = {
    '*': (field, rule, arrayExpressionPointer, options) => {
      try {
        return this.ctx.i18n.formatMessage(`validator.shared.${rule}`, { field: this.fields[field] })
      } catch (_) {
        return this.ctx.i18n.validatorMessages()['*'](field, rule, arrayExpressionPointer, options)
      }
    },
  }
}

i18n.formatMessage(`validator.shared.${rule}`, { field: this.fields[field] })が、validator.yamlで定義したValidationメッセージに翻訳されたfieldを渡して、fieldも翻訳されたエラーメッセージを出力している。

これでemailフィールドはresouces/locale/*/user.yamlから翻訳データを取得してValidatorメッセージのfieldに出力でき、メールアドレスが正しくありませんと表示される。

もしfieldが定義されていなかったりのエラーの可能性も考慮してtry-catchで通常のi18n.validatorMessages()に渡している。

以上にて、AdonisでValidator設定が完了。

AdonisJS v5へのアップグレードが大変だったのでこちらにまとめました。

]]>

Tue, 01 Nov 2022 13:30:03 +0000

こちらは、現時点で最新のAdonisJS v5の記事になります。

前回データベースに接続できたので、次は認証機能を追加してユーザーをDBに保存できるようにする。
v4ではJWT認証で実装していたが、v5では代わってOpaqueAccessTokenを使っての認証になるので、実装方法を変える必要があったので、修正箇所も説明します。

公式リファレンス
https://docs.adonisjs.com/guides/auth/introduction

AdonisJS v5へのアップグレードで他にやったことはこちらにまとめています。

Authパッケージと設定の追加

設定追加時に認証方式をsessions, basic auth, API tokensから選ぶのだが、apiサーバーとして使ってるのでAPI tokensを使っていく。

$ yarn add @adonisjs/auth
$ node ace configure @adonisjs/auth

# いくつか入力を求められる
❯ Select provider for finding users · lucid
❯ Select which guard you need for authentication (select using space) · api

❯ Enter model name to be used for authentication · User
# すでにtableはあるからmigration fileは生成しない
❯ Create migration for the users table? (y/N) · false
❯ Select the provider for storing API tokens · database
# v4ではtokensテーブルだったので、api_tokensのmigration fileは生成する
❯ Create migration for the api_tokens table? (y/N) › true

CREATE: app/Models/User.ts
CREATE: database/migrations/1664350142101_api_tokens.ts
CREATE: contracts/auth.ts
CREATE: config/auth.ts
CREATE: app/Middleware/Auth.ts
CREATE: app/Middleware/SilentAuth.ts
UPDATE: tsconfig.json { types += "@adonisjs/auth" }
UPDATE: .adonisrc.json { providers += "@adonisjs/auth" }
CREATE: ace-manifest.json file

api_tokensテーブルを作成

トークン情報が保存されるapi_tokensテーブルを新たに作るためにマイグレーションを実行する。
—dry-runを付けてテスト実行してみたらエラーがでた。

$ node ace migration:run --dry-run

  Exception 

 Migration completed, but unable to release database lock

adonis_schema_versionsテーブルがAdonis v4にはなかったためエラーになったようで、再度—dry-runすると問題なかった。

$ node ace migration:run --dry-run
------------- database/migrations/1664350142101_api_tokens -------------

CREATE TABLE `api_tokens` (`id` INT unsigned NOT NULL auto_increment PRIMARY KEY, `user_id` INT unsigned, `name` VARCHAR(255) NOT NULL, `type` VARCHAR(255) NOT NULL, `token` VARCHAR(64) NOT NULL, `expires_at` TIMESTAMP NULL, `created_at` TIMESTAMP NOT NULL);
ALTER TABLE `api_tokens` ADD CONSTRAINT `api_tokens_user_id_foreign` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;
ALTER TABLE `api_tokens` ADD UNIQUE `api_tokens_token_unique`(`token`)

------------- END -------------

マイグレーションを実行して、テーブル作成する。

$ node ace migration:run
❯ error database/migrations/1664350142101_api_tokens
[ error ]  create table `api_tokens` (`id` int unsigned not null auto_increment primary key, `user_id` int unsigned, `name` varchar(255) not null, `type` varchar(255) not null, `token` varchar(64) not null, `expires_at` timestamp null, `created_at` timestamp not null) - Invalid default value for 'created_at'

エラーでた。。。

created_atのデフォルト値を指定する必要がありそうだ。

https://knexjs.org/guide/schema-builder.html#timestamp

-      table.timestamp('created_at', { useTz: true }).notNullable()
+      table.timestamp('created_at', { useTz: true }).notNullable().defaultTo(this.now())

再実行したら、作成できた。

$ node ace migration:run
❯ migrated database/migrations/1664350142101_api_tokens

Migrated in 296 ms

Social認証のためにallyパッケージと設定の追加

$ yarn add @adonisjs/ally
$ node ace configure @adonisjs/ally

各ソーシャルのログイン認証に必要な環境変数を追加する。

export default Env.rules({
  // ### Variables for Twitter provider
  TWITTER_CLIENT_ID: Env.schema.string(),
  TWITTER_CLIENT_SECRET: Env.schema.string(),
  // ### Variables for Facebook provider
  FACEBOOK_CLIENT_ID: Env.schema.string(),
  FACEBOOK_CLIENT_SECRET: Env.schema.string(),
})

TWITTER_CLIENT_ID=clientId
TWITTER_CLIENT_SECRET=clientSecret
FACEBOOK_CLIENT_ID=clientId
FACEBOOK_CLIENT_SECRET=clientSecret

Auth middlewareを登録

リクエストに対して、認証されているかを確認するためにAuth Middlewareを使用する。

Middlewareを以下のように設定すると、HTTPリクエストがルートハンドラに到達する前にMiddlewareに設定した内容が実行され、リクエストを終了させたり次の関数に転送したりする。

Route.get('mypage', 'MypageController.index').middleware(['auth'])

node ace configure @adonisjs/auth実行時に、app/Middleware/Auth.tsという認証チェックするものが作成されているので、それをauthというミドルウェアとして登録する。

Server.middleware.registerNamed({
  auth: () => import('App/Middleware/Auth'),
})

ログインRouteを作成

ログイン認証するAPIを作成する。

例としてTwitterログインをできるようにしていく。
/api/v1/user/twitterに認証周りのAPIを作成していく。

Route.group(() => {
  Route.get('user/login/twitter', 'UserController.loginTwitter')
  Route.get('user/login/twitter/callback', 'UserController.loginTwitterCallback')
}).prefix('api/v1').namespace('App/Controllers/Http/Api/v1')
// namespaceがrootからのパスに変わってる。
// v4では、namespace('Api/v1')だった

処理はUserControllerに書いていく。

$ node ace make:controller Api/v1/UserController

CREATE: app/Controllers/Http/Api/v1/UserController.ts

export default class UsersController {
	// ここにアクセスしてきたら、Twitter上の認証画面にリダイレクト
  public async loginTwitter({ ally }: HttpContextContract) {
    return ally.use('twitter').redirect()
  }
　// 認証画面からのコールバック
  public async loginTwitterCallback({ ally, auth }: HttpContextContract) {
    try {
      const twitter = ally.use('twitter')
			Logger.info(await twitter.user())
			// 認証後の処理
      // DBにユーザーを追加したり、トークンを発行したりして
      // クライアント側に戻す
   } catch (error) {
      Logger.error(error)
      return 'Unable to authenticate. Try again later'
    }
  }
}

http://127.0.0.1:3333/api/v1/user/login/twitterにアクセスしてログインができるか確認しておく。

Callback用のViewを作っていく

自分の場合は、ログインボタン押下→別ウィンドウが開く→ログインが完了したらウィンドウを閉じる→元ウィンドウをマイページに遷移させるといった動作にしている。

なので、元ウィンドウにトークン情報を渡すために、Adonis側で一部Viewを用意している。

viewパッケージと設定の追加

$ yarn add @adonisjs/view
$ node ace configure @adonisjs/view

Callback用のViewテンプレートを生成

$ node ace make:view user/social-callback
CREATE: resources/views/user/social_callback.edge

social-callback.edge、ハイフンで指定していたが、Adonis v5ではsocial_callback.edge、アンダーバーで生成されることに注意

<p>Authenticated successfully.</p>
<script type="text/javascript">
  // 元ウィンドウにトークンを送る
  window.opener.postMessage({{{toJSON(token)}}}, '{{targetOrigin}}')
  window.close();
</script>

UserControllerは以下のようにした。

  public async loginTwitterCallback({ ally, auth, view }: HttpContextContract) {
    try {
      const twitter = ally.use('twitter')

      if (twitter.accessDenied()) {
        return 'Access was denied'
      }
      if (twitter.stateMisMatch()) {
        return 'Request expired. Retry again'
      }
      if (twitter.hasError()) {
        return twitter.getError()
      }

      const twUser = await twitter.user()

      if (!twUser.email) {
        return 'Cannot get email.'
      }

      // user details to be saved
      const userDetails = {
        email: twUser.email,
        source: 'twitter',
      }
      const whereClause = {
        email: twUser.email,
        source: 'twitter',
      }
      const user = await User.firstOrCreate(whereClause, userDetails)

      const token = await auth.use('api').generate(user, {
        expiresIn: '14 days',
      })
      Logger.info(JSON.stringify(token))

      view.share({
        token,
        targetOrigin: Env.get('URL'),
      })

      return view.render('user/social_callback')
    } catch (error) {
      Logger.error(error)
      return 'Unable to authenticate. Try again later'
    }
  }

renderの書き方がv4と少し変わっていた。
viewを指定するときドットで繋いでいたのがDeprecatedされて、スラッシュ/で繫ぐようになった。

- return view.render('user.social-callback')
+ return view.render('user/social_callback')

以上にて、Adonisでログイン認証設定が完了。

AdonisJS v5へのアップグレードが大変だったのでこちらにまとめました。

]]>

Sat, 29 Oct 2022 07:49:14 +0000

こちらは、現時点で最新のAdonisJS v5の記事になります。

AdonisJSでデータベースへの接続設定の紹介と旧AdonisJS v4から移行する際の修正箇所を紹介。

公式リファレンス
https://docs.adonisjs.com/guides/database/introduction

Lucidパッケージと設定の追加

DB接続に必要なAdonisのパッケージを追加と設定ファイルを生成します。

$ yarn @adonisjs/lucid
$ node ace configure @adonisjs/lucid

DB接続情報の環境変数を追加

export default Env.rules({
  DB_HOST: Env.schema.string({ format: 'host' }),
  DB_PORT: Env.schema.number(),
  DB_USER: Env.schema.string(),
  DB_PASSWORD: Env.schema.string.optional(),
  DB_DATABASE: Env.schema.string(),
})

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_USER=adonis
DB_PASSWORD=adonis
DB_DATABASE=adonis

DB接続設定の変更

初期ではPostgreSQLのpg設定しかないので、MySQLの設定に変更する。

connections: {
-    pg: {
-      client: 'pg',
+    mysql: {
+      client: 'mysql2',
       connection: {
-        host: Env.get('PG_HOST'),
-        port: Env.get('PG_PORT'),
-        user: Env.get('PG_USER'),
-        password: Env.get('PG_PASSWORD', ''),
-        database: Env.get('PG_DB_NAME'),
+        host: Env.get('DB_HOST'),
+        port: Env.get('DB_PORT'),
+        user: Env.get('DB_USER'),
+        password: Env.get('DB_PASSWORD', ''),
+        database: Env.get('DB_DATABASE'),
       },

clientにmysql2をつかっているので、Packageをインストール

$ yarn add mysql2

HealthCheckで接続できているか確認

AdonisJSにHealthCheckという設定に問題がないかを確認できる機能があるので、それを使ってDB接続できているか確認する。

if (Env.get('NODE_ENV') !== 'production') {
  Route.get('health', async ({ response }) => {
    const report = await HealthCheck.getReport()

    response.type('.json')

    return report.healthy
      ? response.ok(report)
      : response.badRequest(report)
  })
}

mysql: {
  healthCheck: true,
}

http://127.0.0.1:8080/healthにアクセスすると、以下のように情報が表示される。

接続失敗例

{
    "healthy": false,
    "report": {
        "lucid": {
            "displayName": "Database",
            "health": {
                "healthy": false,
                "message": "One or more connections are not healthy"
            },
            "meta": [
                {
                    "connection": "mysql",
                    "message": "Unable to reach the database server",
                    "error": {
                        "errno": -3008,
                        "code": "ENOTFOUND",
                        "syscall": "getaddrinfo",
                        "hostname": "mysql",
                        "fatal": true
                    }
                }
            ]
        }
    }
}

環境変数が間違っていたので修正して、再度確認したら解決。
.envを変更したら自動で再起動してくれるの便利

接続成功例

{
    "healthy": true,
    "report": {
        "lucid": {
            "displayName": "Database",
            "health": {
                "healthy": true,
                "message": "All connections are healthy"
            },
            "meta": [
                {
                    "connection": "mysql",
                    "message": "Connection is healthy",
                    "error": null
                }
            ]
        }
    }
}

Migrationファイルを移す

旧database/migrations/以下にあるmigrationファイルを移していく。

ファイルをコピペ
TypeScriptに書き直す必要があるので、拡張子をjs→tsに書き換える。

KnexのSchemaBuilderの書き方はほぼ変わってなかった。

-'use strict'
+import BaseSchema from '@ioc:Adonis/Lucid/Schema'
 
-/** @type {import('@adonisjs/lucid/src/Schema')} */
-const Schema = use('Schema')
+export default class UserSchema extends BaseSchema {
+  protected tableName = 'users'
 
-class UserSchema extends Schema {
-  up() {
-    this.createIfNotExists('users', (table) => {
+  public async up() {
+    this.schema.createTableIfNotExists(this.tableName, (table) => {
       table.increments()
       table.string('email', 254).notNullable().unique()
       table.string('password', 60).notNullable()
@@ -13,9 +12,7 @@ class UserSchema extends Schema {
     })
   }
 
-  down() {
-    this.dropIfExists('users')
+  public async down() {
+    this.schema.dropTableIfExists(this.tableName)
   }
 }
-
-module.exports = UserSchema

変わってた部分

// ❌
table.unique('email')
// ✅
table.unique(['email'])

Migrationステータスを修正していく

現状のmigrationステータスを確認するとpendingになっており、マイグレーションが正常な状態でないことがわかる。

$ node ace migration:status

Adonis v4ではDBに1503250034279_userで保存されており、v5ではdatabase/migrations/1503250034279_userのようにディレクトリ名も含めて保存されるようになったため。

この差を更新するSQLを実行して、DBを更新する

UPDATE adonis_schema
SET name = CONCAT('database/migrations/', name);

再度Migrationステータスを確認するとcompletedになった。

$ node ace migration:status

Migrationファイルの移行完了。

以上にて、Adonisでデータベースに接続作業完了。

AdonisJS v5へのアップグレードが大変だったのでこちらにまとめました。

]]>

Sat, 29 Oct 2022 07:48:56 +0000

AdonisJSをv4→v5へのアップグレードを行ったのだが、あまりにも大変だったので、いくつかに分けて紹介。

現在、絶賛執筆中です。随時記事を追加していきます。

ちなみに、公式ではv4で作成したアプリをアップグレードするのを薦めていない。。
規模が大きいサービスに取り入れていたらと思うとゾッとしますね。。

https://docs.adonisjs.com/releases/out-of-preview

AdonisJSは、「QRコードから飛び出すARをカンタンに作成できるサービス QRAR」のAPIサーバーで利用しています。
当時、テスト駆動を意識して書いたおかげもあり、不具合を出すことなくアップグレードが完了できた。

どうやるか

通常アップグレードしていく場合、パッケージのバージョンを上げてエラー箇所を修正していくかと思うが、v5では根本的に書き方や構造が変更されているので、新しく別プロジェクトとして作成していく。

機能的に廃止されたとかがなかったので、そこはまだマシだったかな。。

やったこと

新プロジェクトの作成

こちらは何かしたわけではないので、記事としては省略。

以下のコマンドで別プロジェクトを作成する。

$ yarn create adonis-ts-app server2

データベースに接続できるようにする

データベース機能の追加と旧データベースに接続する際にマイグレーションファイルの修正が必要だったので、その手順を紹介。

認証機能を追加する

認証機能の追加手順を紹介。
以前はJWT認証で実装していたが、v5では代わってOpaqueAccessTokenを使っての認証になるので、実装方法を変える必要がありました。
また、ソーシャル認証も取り入れています。

Validatorの実装

AdonisJSでリクエストボディをバリデーションできるValidator機能の導入天順を紹介。

テスト

テストの導入手順と変更点を紹介
テストはVowという内製？のテストツールからJapaに変更されている。
全体的に大きな変更はなく、メソッド名が違ったりの小さな変化だった。

機能拡張した点や小技を紹介

開発環境をSSLで起動する

Facebookで認証を行うのにSSLである必要があるので、開発環境でもHTTPSで起動できるようにする。

SQLをデバッグする

ORMを使っていると内部で実際にどういったSQLが叩かれているかがわからない。
正常に動作しているか、ログにSQL文を表示させる。

件数検索できるようにDatabase,ModelにgetCountを追加する

v4には検索件数を取得できるgetCountがあったのだが、v5ではなくなってしまったので、QueryBuilderのマクロにgetCountを追加する

OAT Tokenの期限を更新する

以前のJWTトークンではリフレッシュトークンを使ってログイン期限を更新するようにしていたが、OATトークンはリフレッシュトークンがないので、初回認証から一定時間経つと再認証が必要になる。

最終認証からN日間認証を許可するという仕様になるようにOAT Tokenの期限を更新する。

]]>

Thu, 22 Sep 2022 09:23:20 +0000

Autoloaderを使ってシンタックスハイライト言語を自動追加してくれる便利なプラグインがあるにも関わらず、npmでパッケージ管理しているプロジェクトでPrismJSとAutoloaderを使ったHowto記事が見つからなかったので、挑戦してみました。

Autoloaderを使う

シンタックスハイライトしたい言語だけのファイルを自動で読み込めるように、プラグインのAutoloaderを導入する。

インストール

AutoloaderはPrismJSのパッケージの中に入っているので、PrismJSだけのインストールで済む。

$ yarn add prismjs

コードの追加

今回はReactで説明していく。

PrismJSをいつも通り使うのに加えて、autoloaderをimportしておく。
読み込むファイルはブログなら記事部分が対象になるでしょうから、Content.tsxなど記事のコンポーネントに追加すれば良い。

import 'prismjs/plugins/autoloader/prism-autoloader'
import Prism from "prismjs"

const Component: React.FC = () =>  {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  
  // ...
}

実行すると、Autoloaderが動いてシンタックスハイライト対象言語を読み込みに行こうとしているが、404エラーが返ってきている。

対象言語用のコードの取得先を変更する必要がある。


import 'prismjs/plugins/autoloader/prism-autoloader'
import Prism from "prismjs"

if (prism.plugins.autoloader) {
	// npmで管理しているバージョンと合わせる
  prism.plugins.autoloader.languages_path =
    'https://unpkg.com/prismjs@1.28.0/components/'
}

const Component: React.FC = () =>  {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  
  // ...
}

これでシンタックスハイライトが効くようになる。

なぜAutoloaderを使いたかったのか

ReactやVueなどでPrismJSを使ってシンタックスハイライトを行う際、PrismJSもnpmでパッケージ管理したい。

Reactを例にあげると、以下のように書くと思う。

import Prism from "prismjs";

const Component: React.FC = () =>  {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  
  // ...
}

シンタックスハイライトの対象言語を追加するとなると、importを行うか、babelを使っているならbabel-plugin-prismjs を使うと思う。

パターン１：importを使って対象言語を読み込む

import Prism from "prismjs";
// bashを対象言語に追加する場合
import 'prismjs/components/prism-bash'

パターン２：bebel-plugin-prismjsで対象言語を読み込む

.babelrc

{
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["bash"]
      }
    ]
  ]
}

上記のように書けば問題なく動作する。

しかし例えばブログで使う際に、あるページではbash, tsx, jsonを使い、とあるページでは、go, graphql, yamlを使うとすると、記事ページでは6言語分のシンタックスハイライト用のコードを読み込んでおかなければならない。

使っていない対象言語用のコードを読み込んでしまうし、何十種類も対象言語を読み込むとなるとパフォーマンス的に悪影響になるのは間違いない。

なので、シンタックスハイライトする言語だけのファイルを読み込めるAutoloaderを使いたかった。

]]>

Tue, 20 Sep 2022 09:00:00 +0000

現在2.10.5を使用していて、3.13.6にアップグレードを行う。

公式サイトだと、以下のように実行すると書いてある。

$ flutter channel stable
$ flutter upgrade

しかし、実行してみると、

$ fvm flutter channel stable
$ fvm flutter upgrade

You should not upgrade a release version. Please install a channel instead to upgrade it.

エラーが表示されアップグレードできない。

fvmでバージョン管理している場合は、fvmコマンドで新しいバージョンをインストールしていく。

Flutter 3.13.6にアップグレードする

fvmでFlutter 3.13.6をインストール

リリースされているバージョンを確認

$ fvm releases

Sep 13 23  │ 3.13.3           
Sep 13 23  │ 3.13.4           
Sep 15 23  │ 3.15.0-15.1.pre  
Sep 20 23  │ 3.13.5           
--------------------------------------
Sep 21 23  │ 3.15.0-15.2.pre   beta
--------------------------------------
--------------------------------------
Sep 27 23  │ 3.13.6            stable
--------------------------------------

3.13.6がstableバージョンなので、3.13.6にアップグッレードする

$ fvm use 3.13.6

Installing version: 3.13.6...
...
Flutter 3.13.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ead455963c (12 days ago) • 2023-09-26 18:28:17 -0700
Engine • revision a794cf2681
Tools • Dart 3.1.3 • DevTools 2.25.0
Project now uses Flutter [3.13.6]

ついでにfvmも2.4.1にアップグレード

fvmのバージョンも2.4.1に上げれるみたいなので、アップグレードしておく。

$ pub global activate fvm
Installed executable fvm.
Activated fvm 2.3.1.

しかし、メッセージ通りのコマンドを実行しても上がらない。

正解はfvm内の dart pub 使う。

$ fvm dart pub global activate fvm
Installed executable fvm.
Activated fvm 2.4.1.

dartパッケージをアップグレード

Flutterのバージョンだけでなく、dartパッケージをアップグレードしていく。

まずは、マイナーバージョンをアップグレード

$ fvm flutter pub upgrade

メジャーバージョンのアップグレードを確認

$ fvm flutter pub outdated
Package Name                         Current   Upgradable  Resolvable  Latest   

direct dependencies:                
bonsoir                              *1.0.1+2  *1.0.1+2    2.0.0       2.0.0    
device_info_plus                     *3.2.4    *3.2.4      4.1.2       4.1.2    
file_picker                          *4.6.1    *4.6.1      5.0.1       5.0.1    
flutter_launcher_icons               *0.9.3    *0.9.3      0.10.0      0.10.0   
freezed_annotation                   *1.1.0    *1.1.0      2.1.0       2.1.0    
package_info_plus                    *1.4.2    *1.4.2      1.4.3+1     1.4.3+1  
permission_handler                   *9.2.0    *9.2.0      10.0.0      10.0.0

メジャーバージョンの変更は破壊的変更があるため、ひとつずつ確認していく。

パッケージのpubspec.yamlを見て、flutterのバージョンが3.13に対応しているか確認する。

それからCHANGELOG.mdから破壊的変更を見て、修正箇所を事前に確認しておく。

例えば、
device_info_plusを3.2.4→4.1.2にアップグレードできる。

CHANGELOG.mdを確認すると、4.0.0でAndroidIdという項目が削除されると書いてあり、自分のコードで利用しているのでここはあとで修正が必要だなと確認しておく。

他に、package_info_plusを10.0.0にアップグレードする際に、CHANGELOG.mdに、compileSdkVersionを33に書き換える必要があると書いてあった。

When updating to version 10.0.0 make sure to update the android/app/build.gradle file and set the compileSdkVersion to 33.

なので、android/app/build.gradle内のcompileSdkVersionを書き換える。

android {
    compileSdkVersion 33

問題なければ、自分のpubspec.yamlを書き換えていく。

-  device_info_plus: ^3.2.4
+  device_info_plus: ^4.1.2

またFlutterのバージョンも最新だけに対応していれば良いので、書き換えておく。

environment:
  flutter: ">=3.13.6"

VSCodeが勝手にpub getしてくれているが、念の為手動でpub getを実行する。

$ fvm flutter pub get

VSCodeを再起動

VSCodeが認識しているFlutterのバージョンが変わらなかった。

setting.jsonでも、

"dart.flutterSdkPath": ".fvm/flutter_sdk",

sdkの位置を指定しており、そのファイルを確認すると、3.13.6に変更されていた。

どうしようもなく一旦VSCodeを再起動してみたら、無事3.13.6に変わった。

コードの修正

dartパッケージをアップグレードするといくらかエラーが出たので修正していく。

動作確認＆修正

Androidでの動作確認

Androidデバイスで起動を試みる

$ fvm flutter run -d ANDROID_DEVICE
e: Incompatible classes were found in dependencies. Remove them from the classpath or use '-Xskip-metadata-version-check' to suppress errors
e: /Users/.../.gradle/caches/transforms-3/3eb6c3f03955a7bda7310b4d29667dba/transformed/jetified-kotlin-stdlib-jdk7-1.7.10.jar!/META-INF/kotlin-stdlib-jdk7.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.7.1, expected version is 1.5.1.
...
エラー文が大量に出力

見た感じkotlinのバージョンが不適切。

kotlinをリリースされている最新のバージョン1.7.10にする。
https://kotlinlang.org/docs/releases.html#release-details

android/app/build.gradle

buildscript {
    ext.kotlin_version = '1.7.10'

無事起動は完了した。

iOSでの動作確認

iOSデバイスで起動を試みる

$ fvm flutter run -d IOS_DEVICE
[!] CocoaPods could not find compatible versions for pod "Firebase/CoreOnly":
      In snapshot (Podfile.lock):
        Firebase/CoreOnly (= 8.15.0)

      In Podfile:
        firebase_core (from `.symlinks/plugins/firebase_core/ios`) was resolved to 1.22.0, which depends on
          Firebase/CoreOnly (= 9.5.0)

    Specs satisfying the `Firebase/CoreOnly (= 8.15.0), Firebase/CoreOnly (= 9.5.0)` dependency were found, but they required a higher minimum deployment target.

エラーがでた。

firebase_coreパッケージをpubでアップグレードしたせいで、Firebase/CoreOnlyが9.5.0に依存するはずなのに8.15.0になっている。

Podfileを再インストールする。

$ cd ios
$ rm -f Podfile.lock
$ pod repo update
$ pod install

完了したら、再度起動を試みる。

$ fvm flutter run -d IOS_DEVICE

起動できた！

]]>

Sat, 10 Sep 2022 09:00:00 +0000

以前までは、React.FunctionComponent (FC), React.Component に暗黙的に含まれていたので以下のようにchildrenを使うことができた。

const Layout: React.FC = ({ children }) => {
  return (
    <div>{children}</div>
  )
}

しかし、React v18からはTypeErrorがでてしまう。

Propsでchildrenを定義する必要がでてくる。

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <div>{children}</div>
  )
}

ただ、childrenを使うときに毎回定義するの面倒だよね、だからchildrenをPropsに持つReact.FCXみたいな型を用意してあげようって作戦。

React.FCXを定義する

Reactのnamespace内に新たにFCXというPropsにchildrenを持つ型を作成する

react-custom.d.tsを作成する

declare namespace React {
  type FCX<P = {}> = FC<{ children?: ReactNode } & P　　>
}

d.tsがうまく読み込まれない場合は、tsconfig.jsonを確認。

自分はtypesディレクトリ内のd.tsを読み込むように設定している。

{
  "compilerOptions": {
    ...
  },
  "include": ["types/**/*.d.ts", "**/*.ts", "**/*.tsx"]
}

React.FCXの使い方

先程React.FCを使ってエラーがでていたものをFCXに書き換えるとエラーが消える

const Layout: React.FCX = ({ children }) => {
  return <div>{children}</div>
}

参照

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

]]>

Fri, 09 Sep 2022 06:10:12 +0000

はじめに

Next.js, GraphQL, Markdown, Golangを使って当ブログをリニューアルしました。

以前はGatsbyを使っていましたが、3年も前に作成しバージョン（v2.18）も古くなってしまったので、そろそろメンテナンスしないとなと思い、どうせならデザインも変えたいし、記事もGitで管理したいし、とか色々考えてフルリニューアルしてしまえってことで１から構成を見直しました。

サイト構成

最終的にサイト用と記事用の２レポジトリを作成し、VercelでGraphQLサーバーとホスティングサーバーを用意する形をとりました。

Webサイト側は、Next.jsを利用しISRで配信しています。

記事側は、Markdownで書いた記事をGolangを使ってGraphqlサーバーとして配信しています。

技術選定について

書くフレームワークを選んだわけ

Markdown

こんなに時間を掛けて記事を書いているのに、草が生えない、、草を生やしたい！とずっと思っていました。

草を生やしたいのでGitHubで管理したいというのと、HeadlessCMSを使うとき乗り換えが簡単ということで、Markdownで記事を書くようにしました。

GitベースのHeadlessCMSは多いので、いつかは外部サービスで管理するかもしれません。

GraphQL

RestではなくGraphQLを選んだのは、RestAPIは実務でもよく使うので、新しい学びはないなと思いGraphQLを選びました。

またGatsbyでもGraphQLクライアントは使っていたので、サーバーサイドも作ってみたいと思いGraphQLを選択しました。

Golang

GraphQLサーバーを実装するのにGolangを選択しました。

GraphQLというとAppoloが有名だし、VercelのServerlessFunctionsを使うことを考えるとNode.jsを使った方が実装はラクでしょう。

しかし、今後記事が増えていくことを考えると、NodeでMarkdownファイルを検索していくことに速度面で不安を覚えました。

Golangなら速度的な心配がないのが、実務からも分かっていたので今回はGolangを採用しました。

（Rustも速いとのことなので、次はRustを使ってみたい）

Next.js

今回作り直すにあたって静的サイトジェネレーターで候補に上がったのはHugo, Next.js, Gatsbyを考えました。

Hugoが速度的にも開発速度的にも早く、ラクという印象でした。

しかし、モダンではないので不採用としました。

理由としてReact, Vueといったコンポーネントという部品単位の考え方に慣れ、ページ単位での作成に管理上の不安を覚えてしまいました。
さらに、CSSModulesやCSSinJSが使えないのでクラス名が干渉しないように考慮しなければならないというデメリットがあります。

HugoはTailwindなどを取り入れている方には有用な選択肢かもしれません。

GatsbyかNext.jsかどちらを取るかについては、ぶっちゃけどっちでも良かったです。

Gatsby v4ではNext.jsのISRに似たDSGというものもあるし。。

ただ、Next.jsの勢いは凄いし、３年前に比べるとSSG対応も安定してきたので、使ってみたいというのが一番の理由かなとおもいます。

（作っていてGatsbyの方が良かったと後悔している。。。）

リニューアルサイトが完成してみて

パフォーマンスを改善できた

せっかくのリニューアルだからパフォーマンス面でも良くしたいと思いチューニングした結果、無事Lighthouseで100点満点をいただきました！

100点満点取ると、花びらが舞ってくれます。

デザインの改善

記事の閲覧性を高めるために、タグを左に持ってきました。
記事一覧は1カラムの方が視認性が高いので維持
ダークモード対応しました。ロゴの右のアイコンをクリックで変更可能

Next.jsに変更してみて

GatsbyからNext.jsに変更して感じたこと

良かった点

ISRはブログとの相性が良い

revalidateというプロパティで設定した時間が経つと、ページが再生成される仕組みで、これを利用すると予約投稿をWebhookなどを使わずにできるのでとても便利です。

またビルドも1分程で終わるし、記事数が増えてもビルド時間に影響しないメリットもあります。

学習コストが小さい

Reactを一通り触ることができれば、特に苦労することなく、Next.jsは使えます。

Gatsbyはgatsby-node.jsなどお作法があるので、Next.jsに比べてGatsbyの方が難しく感じました。

悪かった点

サイトマップなどを自前で実装しなければならない

サイトマップだったり、PWAといったWebサイトに必要な機能を自分で追加する必要があるのが面倒でした。

next-sitemapといったパッケージは存在していますが、ものによっては更新されていなかったりで、今後Next.jsのアップデートで対応しなくなるのではと不安を覚えるものが多かったです。

その点、Gatsbyでは公式がそういったプラグインを配信してくれていたり、コミュニティがプラグインを管理してくれていたので、安心感がありました。

リニューアル前の構成

どこにも以前のサイト構成を記してなかったので残しておきます。

HeadelessCMSとしてghostを使っていました。

そしてGitHub ActionsでビルドをしてSSGで静的ファイルを生成し、VPSサーバーにそのファイルを転送していました。

Lighthouseの結果です。

特に意識することなくこの数値がでてるので、Gatsbyのパフォーマンスは良いと思います。

]]>

Mon, 05 Sep 2022 13:37:05 +0000

Markdownと画像ファイルを同じディレクトリで管理したい

以下のようなディレクトリ構造にしたい。

.
├── _posts/
│   ├── dynamic-routing/
│   │   └── index.md
│   │   └── image1.png
│   │   └── image2.png
│   ├── hello-world/
│   │   └── index.md
│   │   └── image1.png
│   │   └── image2.png

理由としては、記事を書いているときに画像を確認できること。

さらにVSCodeなら、画像をshiftを押しながらドラッグ＆ドロップするとmdに挿入することができるので執筆がラクになる。

デフォルトのpublicからの参照だと、画像が表示されない

![](/assets/blog/hello-world/cover.jpg)

作業

実現するためにやることとしては、

Markdown→ReactElementに変換
変換する際に画像部分は@next/imageを使うようにする
画像読み込みのためのWebpackの処理を修正

プロジェクト作成

公式のサンプルであるブログスターターを例に進める

https://github.com/vercel/next.js/tree/canary/examples/blog-starter

このサンプルはMarkdownでの記事の管理が行える

プロジェクトの作成

$ npx create-next-app --example blog-starter blog-starter-app

$ cd blog-starter-app
$ yarn dev

http://localhost:3000/posts/hello-world

Markdown→Reactに変換する

現状、./lib/markdownToHtml.tsでremark-htmlというモジュールを使って、Markdown → HTMLにしている。

post-body.tsxでdangerouslySetInnerHTMLを使って出力している。

<div
  className={markdownStyles['markdown']}
  dangerouslySetInnerHTML={{ __html: content }}
/>

しかし、HTMLのままでは@next/imageのImageコンポーネントが使用できないのでReactに変換する必要がある。

Reactに変換するために、Markdown → MDAST → HAST → React といった手順を踏む。

そのために必要なモジュールは、

unified
- テキストを変換するインターフェイス。remarkもこれで動いている
remark-parse
- MDASTというmarkdownを構造木に変換する。
remark-rehype
- MDASTをHASTに変換する。HASTはHTMLを構造木で表現したもの
reype-react
- HASTをRectに変換する

（remark-reactというMarkdownをReactに変換するモジュールの方が簡単にReactに変換できるが、廃止予定なので使わない方が良い）

コードを修正していく。

パッケージのインストール

$ yarn add unified remark-parse remark-rehype rehype-react

markdownToHtml.tsを修正。ファイル名はmarkdownToReact.tsに変更。

-import { remark } from 'remark'
-import html from 'remark-html'
+import { createElement, Fragment } from 'react'
+import rehypeReact from 'rehype-react'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
 
 export default async function markdownToReact(markdown: string) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = (await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeReact, { createElement, Fragment })
+    .process(markdown)).result
+  return result
 }

出力部分であるpost-body.tsxを修正

const PostBody = ({ content }: Props) => {
   return (
     <div className="max-w-2xl mx-auto">
       <div
         className={markdownStyles['markdown']}
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
+      >
+      {content}
			 </div>
     </div>
   )
 }

しかし、このまま実行してもエラーがでる

getStaticPropsの戻り値はJSON.parseできる型でないといけない。contentがReactElementになっているのでエラーが発生した。

getStaicProps内のconetentはMarkdownの文字列を渡して、post-body.tsxでReactに変換するように変更。

[slug].tsx

-import markdownToHtml from '../../lib/markdownToHtml'

...

     'coverImage',
     'ogImage',
     'coverImage',
   ])
-  const content = await markdownToHtml(post.content || '')
 
   return {
     props: {
-      post: {
-        ...post,
-        content,
-      },
+      post,
     },
   }
 }

post-body.tsx

+import { Fragment, useEffect, useState } from 'react'
+import markdownToReact from '../lib/markdownToReact'

...

const PostBody = ({ content }: Props) => {
+  const [component, setComponent] = useState(<Fragment />)
+  useEffect(() => {
+    (async () => {
+      const contentComponent = await markdownToReact(content)
+      setComponent(contentComponent)
+    })()
+    return () => {}
+  }, [content])
   return (
     <div className="max-w-2xl mx-auto">
       <div
         className={markdownStyles['markdown']}
-        dangerouslySetInnerHTML={{ __html: content }}
-      />
+      >{component}</div>
     </div>
   )
 }

yarn dev すると無事Markdownの内容がReactElementで表示できた。

@next/imageで画像が表示されるようにする

rehype-reactのオプションcomponentsでimgコンポーネントをカスタマイズする

markdownToReact.ts

+import PostImage from '../components/post-image'

...
 
 export default async function markdownToReact(markdown: string) {
   const result = (await unified()
     .use(remarkParse)
     .use(remarkRehype)
-    .use(rehypeReact, { createElement, Fragment })
+    .use(rehypeReact, {
+      createElement,
+      Fragment,
+      components: {
+        img: PostImage
+      }
+    })
     .process(markdown)).result

./components/post-image.tsx

import Image from 'next/image'
import React from 'react'

const PostImage: React.FC<JSX.IntrinsicElements['img']> = ({
  src,
  alt,
  title,
}) => {
  return <Image
    src={src}
    alt={alt}
    title={title}
    height={100}
    width={100}
  />
}
export default PostImage

publicディレクトリの画像を正しく表示するのが目的ではないので、height/widthは適当に入れておく。

Markdownにpublicの画像を試しに追加する。

![](/assets/blog/hello-world/cover.jpg)

無事、@next/imageでMarkdown内の画像を表示できた。

画像をrequireを使って参照する

最終段階ですが、ここが手こずりました。。

まずは、ディレクトリ構造を記事の最初に示したように、Markdownと画像を同じ階層におけるように修正していく。

.
├── _posts/
│   ├── dynamic-routing/
│   │   └── index.md
│   │   └── image1.png
│   │   └── image2.png
│   ├── hello-world/
│   │   └── index.md
│   │   └── image1.png
│   │   └── image2.png

./_posts/hello-world.mdを./_posts/hello-world/index.mdに変更する。
他のmdファイルも同様に変更しておく。

Markdownのパスが変わったので、当然エラーが発生する。

読み込めるように修正する。

./lib/api/ts

export function getPostBySlug(slug: string, fields: string[] = []) {
-  const realSlug = slug.replace(/\.md$/, '')
-  const fullPath = join(postsDirectory, `${realSlug}.md`)
+  const fullPath = join(postsDirectory, `${slug}/index.md`)
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)
 
@@ -23,7 +22,7 @@ export function getPostBySlug(slug: string, fields: string[] = []) {
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
     if (field === 'slug') {
-      items[field] = realSlug
+      items[field] = slug
     }
     if (field === 'content') {
       items[field] = content

これでエラーは出ずに表示されるようになった。

次に以下の画像[cover2.jpg]を用意して、./_posts/hello-world/に配置

先程は、publicから画像を読み込んでいたが、同階層から読み込むようにMarkdownを変更する。

-![](/assets/blog/hello-world/cover.jpg)
+![](cover2.jpg)

このままでは、publicの画像ではないのでrequireして画像を取得するように修正

一旦画像をrequireして表示できるかをテストしてみる

post-image.tsx

  const image = require('../_posts/hello-world/cover2.jpg').default
  
  return <Image
    src={image}
    alt={alt}
    title={title}
  />

これだと上手くいくのですが、hello-worldとcover2.jpgを変数に変更してみると・・・

  const slug = 'hello-world'
  const imagePath = 'cover2.jpg'
  const image = require(`../_posts/${slug}/${imagePath}`).default

Markdownのloaderがないよと怒られる・・

これは推測なのだが、requireする際に../_posts/以下が代入されるまで不明だから、../posts/内のファイルを参照できるように保持しているのかなと。
その際にwebpackが.mdファイルを読み込むloaderが設定されていないためにエラーが起こるのではと考えました。

webpackにmdファイルを読み込むloaderを追加する

./next.config.js：まだない人は作成してください。

/** @type {import('next').NextConfig} */
module.exports = {
  module: 'es5',
  reactStrictMode: true,
  webpack: ( config ) => {
    config.module.rules.push({
      test: /\.(md|markdown)$/,
      type: 'asset/source',
    })

    return config
  },
}

これで再度yarn devをすれば表示されます。
next.config.jsを修正した場合は再実行しないと変更が反映されないので注意。

画像をrequireして表示できることができたので、slugとimagePathを受け取るように修正していく。

post-image.tsx

+type PostImageFunc = (slug: string) => React.FC<JSX.IntrinsicElements['
img']>
+
+const PostImage: PostImageFunc = (slug) => ({
   src,
   alt,
   title,
 }) => {
+  const image = require('../_posts/' + slug + '/' + src).default
+
   return <Image
-    src={src}
+    src={image}
     alt={alt}
     title={title}
-    height={100}
-    width={100}
   />
 }
 export default PostImage

slugを渡せるように各ファイルを修正

./pages/posts/[slug].tsx

                 author={post.author}
               />
-              <PostBody content={post.content} />
+              <PostBody content={post.content} slug={post.slug} />
             </article>

./components/post-body.tsx

 type Props = {
   content: string
+  slug: string
 }

-const PostBody = ({ content }: Props) => {
+const PostBody = ({ content, slug }: Props) => {
   const [component, setComponent] = useState(<Fragment />)
   useEffect(() => {
     (async () => {
-      const contentComponent = await markdownToReact(content)
+      const contentComponent = await markdownToReact(content, slug)
       setComponent(contentComponent)
     })()
     return () => {}

./lib/markdownToReact.ts

       components: {
-        img: PostImage
+        img: PostImage(slug)
       }

これで画像を同階層から@next/imageを使って表示することができました。

ちょっと手直し

このままだと、URLで画像を参照した、publicディレクトリからの取得ができなくなってしまう。

![](https://placehold.jp/150x150.png)
![](/assets/blog/hello-world/cover.jpg)

ので、それに対する対応を付け加える。

post-image.tsx

 import Image from 'next/image'
-import React from 'react'
+import React, { createElement } from 'react'
 
 type PostImageFunc = (slug: string) => React.FC<JSX.IntrinsicElements['img']>
 
-const PostImage: PostImageFunc = (slug) => ({
-  src,
-  alt,
-  title,
-}) => {
-  const image = require('../_posts/' + slug + '/' + src).default
+const PostImage: PostImageFunc = (slug) => (props) => {
+  try {
+    const { src, alt, title } = props
+    const image = require('../_posts/' + slug + '/' + src).default
+  
+    return <Image
+      src={image}
+      alt={alt}
+      title={title}
+    />
 
-  return <Image
-    src={image}
-    alt={alt}
-    title={title}
-  />
+  } catch (e) {
+    return createElement('img', props)
+  }
 }
 export default PostImage

requireして表示する方でエラーが発生したら、通常のimgタグを使った表示にするようにした。

これで外部URL等の画像も表示できる。

まとめ

かなーり長くなってしまったが、やったことはMarkdownをReactに変換して、その際にImageは@next/imageを使うということ。

今回作ったものはGitHubに置いているので覗いてみてください。

https://github.com/RyoheiTomiyama/nextjs-blog-starter-image-path.git

]]>

Tue, 31 May 2022 11:35:03 +0000

NetlifyCMSを体験しようと、ドキュメントの通りに進めたのだが
以下のようなエラーが表示され管理画面に入ることができなかった。

Git Gateway Error: Please ask your site administrator to reissue the Git Gateway token.

解決方法

原因はGitHubのデフォルトブランチ名がmainとなっている（masterではない）からでした。
/site/static/admin/config.ymlのbackend項目にbranchを設定すれば解決しました。

backend:
  name: git-gateway
  branch: main   # ここを追加

エラーまでの経緯

とりあえずNetlifyのドキュメントにあるStart with a TemplateからジェネレーターはHugoを選択してGithubにデプロイしてみました。

手順通り進めていくと、Netlifyに新しいサイト・GitHubにレポジトリが作成されました。

CMS用のアカウント作成のための招待メールが届いているので、メール内の[Accept the invite]をクリックして、ブラウザが開いてポップアップが表示されるので、そこに適当なパスワードを入力してアカウントが作成されます。

その後URLに/adminをつけるとCMS管理画面に入れるとのことだったので、アクセスしてみると、、、

エラーが表示され管理画面に入れない結果に。

Git Gateway Error: Please ask your site administrator to reissue the Git Gateway token.

原因究明

Netlifyの機能であるGit Gatewayで問題が発生しているみたい。
Netlify設定画面のsite settgin → identityにあるGit Gatewayの項目を再設定してみたり、アカウントを作り直したりしたが解消されず・・

エラー文で検索したら同じ現象の方もいたが、はっきりせず・・
https://answers.netlify.com/t/git-gateway-error/12220/17

どうやらconfig.ymlにGit Gatewayの設定があるようなので、レポジトリを見てみる。

場所は、/site/static/admin/config.yml
以下の行がGit Gatewayの設定のようだ。

backend:
  name: git-gateway

特になにか設定されているわけではなかった。

NetlifyCMSのconfigurationのドキュメントを見るとデフォルトのブランチがmasterになっていた。

自分のGithubでは作成時のデフォルトブランチはmainとなっているのbranchオプションを追加してあげれば良さそうだ。

backend:
  name: git-gateway
  branch: main

この変更をGitHubにプッシュするとNetlify側でデプロイされるので完了するまで待つ。

改めて/adminにアクセスすると・・

無事、管理画面に入ることができました！

]]>

Sun, 24 Oct 2021 00:47:42 +0000

M1 Mac で Gatsby v2 がコンパイルエラー

M1 Mac で起動しようとすると、以下のようなエラーが起こった。

    Error: Something went wrong installing the "sharp" module

    Error relocating /usr/lib/libpango-1.0.so.0: g_memdup2: symbol not found
    - Remove the "node_modules/sharp" directory then run
      "npm install --ignore-scripts=false --verbose" and look for errors
    - Consult the installation documentation at https://sharp.pixelplumbing.com/in  stall
    - Search for this error at https://github.com/lovell/sharp/issues

解決策

resolutions で sharp モジュールのバージョンを指定する

    "dependencies": {
      ...
      "gatsby": "^2.21.37",
      "gatsby-image": "^2.4.4",
      "gatsby-plugin-sharp": "^2.6.4",
      "gatsby-transformer-sharp": "^2.5.2",
      ...
    },
    # ↓以下を追加
    "resolutions": {
      "sharp": "^0.29.1"
    },

解決までの流れ

Gatsby のサイトには、この sharp というモジュールを使っている gatsby-plugin-*をアップデートしてと書いてある

https://www.gatsbyjs.com/plugins/gatsby-transformer-sharp/#incompatible-library-version-sharpnode-requires-version-x-or-later-but-z-provides-version-y

しかし、プラグインをアップデートすると、Gatsby v2 で上手く動かない。

調べていくと、sharp モジュールは 0.29.0 から M1 Mac に対応しているようだった

https://sharp.pixelplumbing.com/install#apple-m1

sharp のバージョンだけ指定すれば動かないかな〜と resolutions を使ってみたら動いた！

package.json に以下を追記

  "resolutions": {
    "sharp": "^0.29.1"
  },

]]>

Mon, 09 Aug 2021 06:09:40 +0000

ラズパイに接続できる電子ペーパーを買ったのでサンプルを実行して動作確認したいと思います。

購入したのは、WAVESHAREの7.5inch E-Paper E-Ink Display HAT (B) For Raspberry Pi

こちらと、以前に購入していたRaspberry Pi Zero WHを使います。

WAVESHAREのwiki https://www.waveshare.com/wiki/7.5inch_e-Paper_HAT_(B) を元に実行していきます。

ラズパイでSPI通信をできるように設定

ラズパイに接続。

$ ssh raspi

設定画面を開く。

$ sudo raspi-config

以下のような画面が開くので、5 Interfacing Optionsを選択。

次にSPIを有効にするために、P4 SPIを選択して有効にする。

The SPI interface is enabledとなればOK。

ラズパイを再起動

$ sudo reboot

サンプルコードと必要なパッケージのインストール

ラズパイに接続。

$ ssh raspi

サンプルコードをダウンロード。

$ git clone git@github.com:waveshare/e-Paper.git

実行する前にpythonライブラリをインストール。

$ sudo apt-get install python3-pip
$ pip install spidev Pillow

Pillowをインストールするときにエラーが出た。

Pillow公式のLinuxのインストール手順
https://pillow.readthedocs.io/en/latest/installation.html#building-on-linux

必要パッケージをインストール。

sudo apt-get install --fix-missing python3-dev python3-setuptools libjpeg-dev

--fix-missingを付けないとCannot initiate the connection to raspbian.raspberrypi.org になった。
jpegでも怒られているので、libjpeg-devをインストールした。

改めてPillowをインストール。

pip install Pillow

今度は上手くインストールできた。

ラズパイと電子ペーパーを繋ぐ

電子ペーパーに付属している以下のパーツを使ってラズパイに繋ぎます。
今回はピンヘッダ付きのラズパイZeroWHを使うので、左のコードは使いません。

まずはラズパイと電子ペーパのピンヘッダをカチッとはめ込みます。

次に電子ペーパと繋ぐ部分ですが、黒い部分が上下するようになっており、これを上げた状態にします。

電子ペーパー側の線を挿入して黒い部分を下げれば接続完了

実行してみる

examplesにある購入した電子ペーパーに対応するコードを実行する。
間違ったものを使うと表示されなかったり、サイズが違ったりと表示が崩れます。

$ cd e-Paper/RaspberryPi_JetsonNano/python/examples/
$ python epd_7in5b_V2_test.py

電子ペーパー動いた！

ちらちらするのが気になります。
kindleとかみたいにスムーズに描画されると期待していましたが仕様のようです。
これは少し残念。

]]>

Thu, 31 Dec 2020 12:29:18 +0000

イラレやフォトショなどのデザインツールでみる透過を表すアレをCSSで表現する方法紹介します。

透明を表す白とグレーの格子のことを透明グリッドというらしいです。

写真のように、透明であることを表現したくて、CSSで透明グリッドを作成しました。

ソースはこちら↓
https://codepen.io/RyoheiTomiyama/pen/GRjyyrx

CSSは以下のように作成しました。

.transparent {
  position: ralative;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: 0px 0px, 7px 7px;
		background-size: 14px 14px;
		background-repeat: repeat;
		background-image:
			linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 100%),
			linear-gradient(45deg, #fff 25%, #e3e3e3 25%, #e3e3e3 75%, #fff 75%, #fff 100%);
	}
}

]]>

Mon, 23 Nov 2020 03:54:00 +0000

Gatsby.js v2.26で新しい機能として追加された「File System Route API」を試してみました。

レポジトリはこちら
https://github.com/RyoheiTomiyama/gatsby-file-system-route-api/tree/master/app

ContentfulCMSから記事を取得してGatsbyで表示させたので、基本的な使い方とポイントを紹介します。（なお、Gatsbyはgatsby-starter-defaultから作成しています。）

File System Route APIについて

英語が読める方はこちらに詳しく書かれています。
https://www.gatsbyjs.com/blog/fs-route-api

簡単に説明すると、ブログなどの記事ページなどを生成するときに、以前はgatsby-node.jsに設定を何十行も書かなければいけなかったものが、固定ページ同様pages/フォルダにテンプレートファイルを作成するだけで、動的な記事ページが生成できる機能です。

ファイル名でルート設定ができるからFile System Route APIなのでしょう。

File System Route APIの使い方

では、さっそく使い方を紹介します。

まずはGatsbyの基礎構築。

Gatsbyインストール

まずはGatsby.jsのgatsby-starter-defaultをインストール

$ gatsby new app https://github.com/gatsbyjs/gatsby-starter-default
$ cd app

(gatsbyコマンドをインストールしていなければ、yarn global add gatsby-cli)

ContentfulCMSから記事を取得するプラグインをインストールと設定

$ yarn add gatsby-source-contentful

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

TypeScript周り

TypeScriptを使いたいので、TypeScript周りを整備します。

(使わない人は省略してください。)

$ yarn add gatsby-plugin-typegen

gatsby-configs.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-typegen',
      options: {
        outputPath: 'types/graphql-types.d.ts',
      },
    },
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "target": "ES5",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017", "esnext"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "paths": {
      "@/*": ["src/*"]
    },
    "preserveConstEnums": true,
    "typeRoots": ["./types", "node_modules/@types"]
  },
  "include": ["./src/**/*", "./types/**/*"]
}

ここからがFile System Route API

Gatsbyの基礎構築が以上で完了です。

（実際にサービス開発で使うときは、ESLint, Prettier, Manifestなどの設定もしましょう。）

gatsby-source-contentfulでCMSとの連携は済んでいるので、記事ページを作成していきます。

作成するのは、1ファイルだけです。

pages/posts/{ContentfulPost.slug}.tsx

import React from 'react'
import { graphql } from 'gatsby'
import { renderRichText } from "gatsby-source-contentful/rich-text"
import Layout from '../../components/layout'

const PostPage: React.FC<{
  data: GatsbyTypes.PostBySlugQuery
}> = ({ data }) => {
  return (
    <Layout>
      <h1>{data.contentfulPost?.title}</h1>
      <div>{
        renderRichText({
          raw: data.contentfulPost?.content?.raw || '',
          references: [],
        })
      }</div>
    </Layout>
  )
}

export default PostPage

export const query = graphql`
  query PostBySlug ($id: String) {
    contentfulPost(id: { eq: $id }) {
      title
      slug
      content {
        raw
      }
    }
  }
`

このファイルを作成するだけで、とりあえずContentfulCMSから記事を取得してページの生成ができます。

例） http://localhost:8080/posts/hello-world

作成するポイントは2点。ファイル名とGraphQLの書き方です。

ファイル名で、SchemaとFieldを指定する

記事ページのファイル名を{ContentfulPost.slug}.tsxとしました。

このファイル名で記事を取得する条件を指定できるのがFile System Route APIの特徴です。

ContentfulPostがSchema名でslugがField名となっています。

このSchema, Fieldというは、http://localhost:8080/__graphqlで確認できるもの連動しており、ContentfulPost.slugで記事を取得できます。

先の例だと、http://localhost:8080/posts/hello-world の場合は、ContentfulPost.slug = hello-worldである記事を取得しています。
idで取得したい、http://localhost:8080/posts/103としたい場合は、`{ContentfulPost.id}.tsx`とします。

Wordpressの場合は、{WpPost.slug}.tsxとします。
Markdownの場合は、{MarkdownRemark.parent__(File)__name}.tsxとします。

（この指定方法については、下記補足で説明します。）

GraphQLのqueryの書き方

今回は、ContentfulPostのslugから記事を取得します。その場合の書き方がこちら。

export const query = graphql`
  query PostBySlug ($slug: String) {
    contentfulPost(slug: { eq: $slug }) {
      title
      slug
      content {
        raw
      }
    }
  }
`

ファイル名で指定したFieldで検索することができます。
もしくは、以下のようにid での検索もできます。

query PostBySlug ($id: String) {
  contentfulPost(id: { eq: $id }) {
     // something fields...
  }
}

{MarkdownRemark.parent__(File)__name}.tsx のような場合は、id を使ったほうがシンプルになりそうですね。

まとめ

Gatsby.js v2.26からは、{ContentfulPost.id}.tsx のようなファイル名にすれば、gatsby-node.js にcreatePagesメソッドで、記事データを取得して、テンプレート指定して、といった煩わしい設定をせずに生成できるようになりました。

しかし、一覧ページでページネーションをしたり、2つ以上のSchemaを使う場合には、まだ対応していないので、gatsby-node.js で生成する必要があるみたいです。

補足

今回のContentfulの設定

ContentfulPost というSchemaを使いましたが、これはContentfuleにてpostというSchemaContentを作成しています。

様々なファイル名での指定

シンプルな{ContentfulPost.id}.tsx 以外に、{Product.fields__sku}.tsx、{MarkdownRemark.parent__(File)__name}.tsx のように少し複雑な指定もできます。

それぞれのqueryを見るとすぐ理解できると思います。

{Product.fields__sku}.tsx

allProduct {
  nodes {
    id # Gatsby always queries for id
    fields {
      sku
    }
  }
}

{MarkdownRemark.parent__(File)__name}.tsx

allMarkdownRemark {
  nodes {
    id # Gatsby always queries for id
    parent {
      … on File {
        name
      }
    }
  }
}

{Product.fields__sku}.tsx のように、ネストされたfieldの場合は、__で繋げます。

{MarkdownRemark.parent__(File)__name}.tsx は、マークダウンのファイル名で生成する場合です。

また、今回の指定ではSSGとなり、gatsby buildで静的なHTMLファイルが生成されますが、SPAにしたい場合にも対応しているようです。

詳しくはこちらをご覧ください。
https://www.gatsbyjs.com/docs/file-system-route-api/#creating-client-only-routes

以上になります。

今回作成したリポジトリはこちらになります。
https://github.com/RyoheiTomiyama/gatsby-file-system-route-api/tree/master/app

]]>

Wed, 07 Oct 2020 12:33:00 +0000

Gatsby.jsでWebフォントを読み込むプラグインgatsby-plugin-web-font-loaderがアーカイブされていたので、フォントの読み込み方を変更しようと調べた情報をまとめました。

Gatsby.jsでWebフォントを読み込む

gatsby-plugin-web-font-loader以外にGatsby.jsが紹介している方法が2つあります。

ひとつは、Typography.jsを使ったやり方。
もうひとつは、Typefacesを使ったやり方です。

それぞれのやり方でのGoogleフォントの読み込み方を説明します。

Typography.jsの使ったWebフォントの読み込み

Typography.js
Gatsby.jsのドキュメントには、Googleフォントの読み込み方は書かれてなかったので、Typography.jsのドキュメントを参考に実装しました。

必要なパッケージをインストール

$ gatsby-plugin-typography react-typography typography

gatsby-config.jsにプラグインを追加

plugins: [
  {
    resolve: `gatsby-plugin-typography`,
    options: {
      pathToConfigModule: `src/utils/typography`,
    },
  },
],

pathToConfigModuleで指定したファイルを作成してtypographyの設定を書きます。

import Typography from 'typography'

const typography = new Typography({
  googleFonts: [
    {
      name: 'Noto Sans JP',
      styles: [
        '500',
        '700',
        '900',
      ],
    },
    {
      name: 'Roboto',
      styles: ['700'],
    },
  ],
})

export default typography

斜体フォントを読み込む場合は、'500i'と指定します。

GoogleフォントからCSSの読み込みを確認できました。

このTypography.jsはフォントを読み込むためだけのツールではなくて、サイト全体のフォントサイズやウェイトなどの書体を整えるためのツールです。

ですので、フォントを読み込むだけに使うのは、ちょっと太り過ぎかなと感じます。

Typefacesを使ったWebフォントの読み込み

~~Typefaces~~
Gatsbyドキュメント

紹介しようと記事を書いていたら、Deprecatedされてました。
FontSourceというプロジェクトに引き継がれたようですので、こちらを紹介します。

FontSourceを使ったWebフォントの読み込み

FontSource

使い方は、まったく同じです。

TypefacesにはなかったNotoSansJPなどがFontSourceにはあり、最近のGoogleフォントにも対応しています。

packagesフォルダがフォント一覧となっているので、使うフォントをインストールします。

今回は、noto-sans-jpを使うとした場合、フォルダ名の前にfontsource-を付けて以下のようにインストールします。

$ yarn add fontsource-noto-sans-jp

あとは、app.jsやlayout.jsなどベースとなるファイルの中でimportするだけです。

import 'fontsource-noto-sans-jp'

読み込まれたことが確認できました。

FontSourceの場合、サイズごとに読み込む場合は、以下のようになります。

import 'fontsource-noto-sans-jp/500-normal.css'
import 'fontsource-noto-sans-jp/700-normal.css'
import 'fontsource-noto-sans-jp/900-normal.css'

フォントによってファイル名が異なるので確認して読み込みましょう。

ちょっと面倒ですね。。

結局Googleフォントは普通に読み込むのが良い

便利なプラグインやパッケージを紹介しましたが、結局自分は、純粋にGoogleフォントを読み込むやり方にしました。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Roboto:wght@500&display=swap" rel="stylesheet">

参考に

gatsby-plugin-web-font-loaderはもうメンテナンスされていません。

gatsby-plugin-web-font-loaderのリポジトリを見るとすでにアーカイブされています。

DO NOT USE の文字も・・・

Gatsbyのページでwebfontのプラグインを探すと、一番上に出てきますが使うのはやめましょう。

実際すでに弊害もでてきていて、GoogleFontを使う場合は、urlが古いので設定を加えなければならないし、複数のWebフォントを設定するとエラーになるバグも発生しています。

gatsby-plugin-webfontsというプラグインも試しましたが、こちらも同様に古くなっていたので使うのはオススメしません！

]]>

Tue, 22 Sep 2020 09:12:00 +0000

Dockerイメージ node:10-alpine でPuppeteerを起動しようとしたが、await puppeteer.launch() で止まったままエラーも吐かずにTimeoutしてしまう現象が起きた。

PuppeteerのトラブルシューティングのRunning on Alpineに従って設定した。

原因はChromiumのバージョンが古い

node:10-alpineではapkのリポジトリが3.8で、

http://dl-cdn.alpinelinux.org/alpine/v3.8/main
http://dl-cdn.alpinelinux.org/alpine/v3.8/community

そのバージョンでインストールできるChromiumは、68.0.3440.75-r0だった。

そして、トラブルシューティングのページにコメントアウトで# Installs latest Chromium (77) package.と書いてある。

これはChromiumがバージョン77以上じゃないと動かないよ〜という意味かはわからないが、とりあえず最新版(chromium-83.0.4103.116-r0)をインストールしたら、無事Puppeteerが動いた。

Chromiumの最新版をインストール

Chromiumの最新版をインストールするため、apkのリポジトリを最新版にしてインストールをする。

ただapk updateをしてもリポジトリが変わらないので、リポジトリを指定してupgradeする。

Dockerを使ってない人はsetup-apkreposでレポジトリを最新版に書き換えてapk upgradeすればよい。

Dockerを使っている人は、-X|--repositoryオプションで最新のレポジトリを指定してアップグレードすればよい。

$ docker-compose exec server sh

$ apk upgrade --no-cache \
  -X http://dl-cdn.alpinelinux.org/alpine/v3.12/main \
  -X http://dl-cdn.alpinelinux.org/alpine/v3.12/community \
  chromium

レポジトリの最新バージョンは、こちらのページから確認できる

インストールしたchromiumのバージョンは以下で確認。

$ apk info chromium
chromium-83.0.4103.116-r0 description:
Chromium web browser

chromium-83.0.4103.116-r0 webpage:
https://www.chromium.org/Home

chromium-83.0.4103.116-r0 installed size:
247402496

そもそもnode:10-alineが古いのが原因だった

サーバーにnode:10-alpineイメージをインストールしたのが1年前で、いろいろ古いのが原因だった。
nodeイメージをアップグレードすれば、alpineのバージョンも3.11がインストールされているので解消できた。

$ docker pull node:10-alpine
$ docker-compose build server
$ docker-compose up -d server

]]>

Sat, 19 Sep 2020 13:55:00 +0000

こんにちは、フリーランスエンジニアのトミーです。

開発をするのに必ずといって必要になるのが、Adobeのソフトですよね。

年間ライセンスを39,980円で購入する方法を紹介します。

会社員時代は、会社がライセンスを購入していたから特に意識することはなかったのですが、Adobe Creative Cloudのコンプリートプランを公式サイトから購入しようとすると、年間で72,336円もかかるんですよね。

公式サイトよりも半額近く安く購入する方法があります。

それをとある方法で購入すると、年間ライセンスが39,980円と半額近い3万円も安くなるんです。

それはデジハリのAdobeマスター講座を受講すること。

こちらの講座は1年分のAdobe Creative Cloudのコンプリートプランがセットで付いて、39,980円税込なんです！

授業を受けなければならないとかの縛りもありません。
むしろAdobeのソフトが安く手に入って学習教材も付いてくるという、得しかありません。

3万円以上も安くAdobeを使えてしまうのです。

毎年購入できるので、毎年安くAdobeCCが手に入る

今年は安く手に入るけど、来年以降は高くなるんじゃないの？と思った方、安心してください。

Adobeマスター講座は何度でも受講できるので、毎年半額近い値段でAdobeCCを使うことができます。

私も今回で3度目の購入になります。

購入方法

さっそく購入方法をご紹介します。

こちらのデジハリのAdobeマスター講座のサイトより購入することができます。

ページ下部のAdobeマスター講座にお申し込みをクリック。

購入画面に進みますので、個人情報を入力して購入しましょう。

購入が完了すると、メールアドレスの方に「＜重要＞Adobe Creative Cloud シリアルコード発行のご案内【デジハリ・オンラインスクール】」というメールが届いているはずです。
そのメールにはAdobeCCを契約するための引き換えコードが書いてあります。

そのメールに「■専用サイトにアクセス　>>>　https://creative.adobe.com/ja/educard 」とありますので、そちらのリンクをクリック。
Adobeのサイトに飛びますので、すでにアカウントを持っている方はログインを、まだの方はフォームからアカウントを作成しましょう。

ログインできたら、所属する教育機関情報を入力します。

デジハリ学生としてAdobeを利用することになるので、
学校名に「デジハリ・オンラインスクール」
卒業予定は、受講期間が3ヶ月となりますので、3ヶ月後の年月を選択してください。

次に引き換えコードを入力します。
（入力欄が6つに分かれていますが、引き換えコードをすべてまるっとコピーして、最初の入力欄にペーストすると、一気に入力できます。）

引き換えコードに問題がなければ、以下の画像のようにCreative Cloudを使用開始と表示されますので、「今すぐ開始」をクリック。

以上でAdobe CCの契約完了となります。

公式サイトとの違いといえば、
公式はサブスクなので毎年自動更新ですが、こちらの方法では、毎年デジハリのAdobeマスター講座を購入する必要があることくらいです。

10分もかからない作業で3万円以上も安くなるのであれば、こちらを使わない手はないですよね！

さらに自己アフィリエイトで2,200円程返ってくる！

デジハリのAdobeマスター講座は、もしもアフィリエイトから広告を出しており、本人申し込みOKの成果報酬5.5%なので、約2,200円のアフィリエイト報酬をもらうことができます！

手間がかかっても少しでも安くしたい！という方は、ぜひもしもアフィリエイトに登録して、自分の広告から申し込みましょう！

少しでもこの記事が役に立ったのであれば、こちらのリンクからAdobeマスター講座に申し込んでいただけると嬉しいです！

更新日より早く申し込んでも、更新日から1年間有効になります。

余談ですが、更新の場合のAdobeの有効期限が、申し込み日から1年か更新日から1年か心配になりましたが、
Adobeの更新日から1年間有効になりますので、ご安心を。

その証拠に、Adobeの有効期限が9月24日までだったので、9月19日に申し込んでも来年の9月24日までに有効期限がなりました。

]]>

Sun, 30 Aug 2020 07:14:00 +0000

Actual

デフォルトの動作は、Tooltipにカーソルが移動しても表示されたままになる

Expected

ただ、この動作だとTooltipが邪魔になる場合があるので、ターゲット外にカーソルが移動したらTooltipが非表示になってほしい

やりかた

visibleEnterTooltipみたいなツールチップの上にマウスが乘ったときの動作オプションがあるかな〜と思ったけど見つからず。。。

mouseLeaveDelay = 0 を設定することで理想の動きを実現しました。

mouseLeaveDelayは、マウスが離れてからツールチップが非表示になるまでの遅延時間のオプション。
これを0にすると、対象の要素とツールチップの隙間をマウスが通ることでツールチップにマウスが乗る前に消えることになる。

a-tooltip(placement="right", :mouseLeaveDelay="0")
  span(slot="title") ソーシャルアイコンを配置します
  div(:class="$style.iconBlock")
    social-icon

（AntdVueを使っているが、Antdでも同様のオプションがあるので実装可能です。）

]]>

Mon, 27 Jul 2020 03:15:00 +0000

なぜ2つのバージョンを使いたいのか

どうしてReact Native Debuggerをバージョン違いで使おうと思ったのかというと、React Nativeのバージョンが0.61以下の場合、最新のReact Native Debuggerだと動かない。
逆も同様に、React Native v0.62以上の場合、古いReact Native Debuggerだと動かない。

なので、既存のプロジェクトと新しいプロジェクトで異なるバージョンのReact Nativeを使っている場合、React Native Debuggerもそれぞれに合わせる必要がある。

異なる2つのバージョンのReact Native Debuggerのインストール方法は、ドキュメントには記載されていなかったので紹介します。
当たり前すぎて、記載するほどのものでなかったのかも・・・

brew caskを使ってインストールする方法とGitHubからダウンロードする方法の2パターンあります。

既に新古どちらかのバージョンのReact Native Debuggerはインストールしているものとします。
まだの場合は、「Expoのデバッグ環境を整える（React Native Debugger）」を参考にインストールしてみてください。

簡単なGitHubからダウンロードする方法

既にインストール済みのReact Native Debuggerのアプリの名前を変更します。
バージョンを名前につけると判別しやすいかも。

次にGitHubのリリースページから、既にインストールしているものを別バージョンのReact Native Debuggerをダウンロードしましょう。

ダウンロードしたものをインストールすれば、2つ存在する状態になります。
以上です！

brew caskを使ってインストールする方法

Macユーザーの多くはbrew caskでインストールしているのではないでしょうか。
こちらの場合は、アプリの名前を変更しただけではインストールできません。

brew caskでインストールされたファイルの保存先 /usr/local/Caskroom/ でも名前を変更する必要があります。

$ cd /usr/local/Caskroom/
$ ls
ngrok    react-native-debugger

React Native Debuggerをリネームします。

mv react-native-debugger react-native-debugger-v0.10

で、GitHubからダウンロードと同様にアプリケーションフォルダにあるアプリの名前も変更します。

次にインストール済みのものと異なるバージョンをインストール。

最新版をインストールする場合は、

$ brew update && brew cask install react-native-debugger

バージョン0.10のReact Native Debugger をインストールする場合は、

$ brew update && brew cask install https://raw.githubusercontent.com/Homebrew/homebrew-cask/b6ac3795c1df9f97242481c0817b1165e3e6306a/Casks/react-native-debugger.rb

インストールが完了すれば、2つ存在する状態になります。

以上になります。
お疲れさまでした🙌

]]>

Sun, 26 Jul 2020 11:00:00 +0000

Reat Nativeの開発ツール Expoを、Chromeのデベロッパーツールみたいに検証（デバッグ）できるツール React Native Debugger の導入方法を紹介。
インストール後ひと手間加えて起動をラクにします。

やること

React Native Debuggerをインストール
React Native Debuggerの設定を変更
Expoのデバッグを有効にする

React Native Debuggerでできること

React Native Debugger
https://github.com/jhen0409/react-native-debugger

React Native Debuggerの内部ではChromeの拡張機能にもあるreact-devtoolsやredux-devtools-extensionが動いています。

下の画像のとおり、Chromeでのデバッグ同様の使い方ができます。

React Native Debuggerをインストール

インスール方法は、GitHubのリリースページからファイルをダウンロードしてきても良いですし、Macでしたらbrew caskコマンドでもインストールできます。

バージョンに注意が必要で、React Nativeのバージョンが0.61以下の場合は、React Native Debuggerは0.10をインストールしましょう。

React Nativeのバージョンはpackage.jsonで確認。

ダウンロードの場合

こちらのURLから、それぞれのOS環境用のファイルをダウンロードしてインストールできます。
https://github.com/jhen0409/react-native-debugger/releases

コマンドからインストール for Mac

$ brew update && brew cask install react-native-debugger

React Native Debugger 0.10をインストールする場合は、こちら

$ brew update && brew cask install https://raw.githubusercontent.com/Homebrew/homebrew-cask/b6ac3795c1df9f97242481c0817b1165e3e6306a/Casks/react-native-debugger.rb

React Native Debuggerの設定を加える

このまま起動しても画像のように接続待ち状態のままで、Expoのデバッグはできません。

理由は、ただ起動しただけではPort 8081で起動しているReactNativeのアプリケーションをデバッグしようとするためです。
ExpoアプリはデフォルトでPort 19001で起動しています。

ドキュメントには、コマンドでportを指定して起動するよう書いてありますが、面倒ですよね・・・

open "rndebugger://set-debugger-loc?port=19001"

なので、React Native Debuggerの設定ファイルを修正します。

React Native Debuggerを起動してメニューからDebugger → Open Config Fileを選択すると、テキストエディタが開きます。

このファイルにPort番号 8081が書かれている場所を探します。

そこにExpo用のPort番号を追記してあげればOKです。

  defaultRNPackagerPorts: [8081],

を以下のように。

  defaultRNPackagerPorts: [8081, 19001],

もし、React Nativeで開発する予定がない方は、8081の記述は消してしまっても良いかもしれません。

設定ファイルに追記したら保存して、React Native Debuggerを再起動しましょう。
8081番と19001番用のウィンドウ2つが立ち上がります。

Expoでは19001の方だけを使うので、8081のウィンドウは閉じてしまって構いません。

Expoのデバッグを有効にする

デバッグ用のウィンドウは開けたので、Expoで起動したアプリからDebugを有効にします。

アプリを開いた状態で、Cmd+Ctrl+Zを押してExpoのメニューを開きます。
メニューにある「Debug RemoteJS」をタップ。

すると、React Native DebuggerのウィンドウがWainting for React to connect ...という表示が変わって、コンポーネントの階層が表示されていると思います。

これっでデバッグ環境が整いました。

おまけ

使い方を軽く紹介します。
右下のコンポーネントの階層が深すぎて、デバッグしたい目的のコンポーネントを探すのも大変です。

ですので、Chromeの要素検証のようにアプリの画面から目的の場所をクリックしてコンポーネントを指定するのが良いかと思います。

そのためには、Cmd+Ctrl+ZでExpoのメニューを開いて、「Show Element Inspector」をタップ。

調べたい要素の場所をタップすると、青く塗られてReact Native Debuggerのウィンドウも指定されたコンポーネントが表示され調べることができます。

以上で、React Native DebuggerでExpoのデバッグ環境を整えることができました。
お疲れさまでした。

]]>

Sat, 27 Jun 2020 01:00:00 +0000

Dockerの開発環境を初期化して、開発し直したいときに役立つdownコマンドの紹介。

$ docker-compose down --rmi local -v

以上のコマンドだけで、関係するコンテナ・イメージ・ボリューム・ネットワークを一括削除することができる。

想定する状況

例で示すと、
クライアントサイドはNodeのフレームワークGatsby、記事管理にはGhostCMS+MySQLを使ったブログサービスがDockerで動いているとする。
ゴミファイルなどが溜まってしまったDBなど、すべて白紙に戻して開発し直したい。

Dockerの構成は以下のようになっている。

コンテナ

app: Gatsby
db: MySQL
ghost: Ghost

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
af50ab24edc5        blog-sample_app     "docker-entrypoint.s…"   2 minutes ago       Up About a minute   0.0.0.0:8080->8080/tcp   blog-sample_app_1
624ee466b8d8        blog-sample_db      "docker-entrypoint.s…"   2 minutes ago       Up 2 minutes        3306/tcp, 33060/tcp      blog-sample_db_1
f6f41484bf81        ghost:3.7-alpine    "docker-entrypoint.s…"   2 minutes ago       Up 2 minutes        0.0.0.0:2368->2368/tcp   blog-sample_ghost_1

イメージ

node
mysql
ghost

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE
blog-sample_app            latest              de2c50cbc00e        4 minutes ago       1.67GB
node                       12-alpine           7a48db49edbf        8 weeks ago         88.7MB
mysql                      5.7                 1e4405fe1ea9        7 months ago        437MB
ghost                      3.7-alpine          1320b5ea0bea        4 months ago        328MB

ボリューム

node_modules

$ docker volume list
DRIVER              VOLUME NAME
local               blog-sample_node_modules

ネットワーク

default

$ docker network list
NETWORK ID          NAME                       DRIVER              SCOPE
1d5ce36ca401        blog-sample_default        bridge              local

docker-composeの一括削除コマンド down

「一度白紙に戻して、再度開発環境を整えたい！」となったときに、一括削除してくれる down コマンドが存在する

$ docker-compose down

コンテナを停止し、 up で作成したコンテナ・ネットワーク・ボリューム・イメージを削除します。デフォルトではコンテナとネットワークのみ削除します。

オプションをつけずに実行して削除されるのは、

Compose ファイル内で定義したサービス用のコンテナ
Compose ファイルの network セクションで定義したネットワーク
default ネットワーク（を使っている場合）

のコンテナとネットワークだけで、イメージとボリュームが削除されないので、完全に白紙の状態には戻らない。

オプションを付けて、イメージとボリュームも削除ができる。

$ docker-compose down --rmi local -v

--rmi

--rmi つまり「remove image」の略で、イメージを削除するオプション。

このオプションでは、削除対象を選択することができ、

'all': あらゆるサービスで使う全イメージを削除
'local': image フィールドにカスタム・タグのないイメージだけ削除

allを指定した場合、例にあるイメージでは、blog-sample_app, node, mysql, ghostが削除される。
他のプロジェクトで、同じmysqlのイメージを使っていた場合、動かなくなる可能性があるので、全削除は注意が必要になる。

node, mysql, ghostのイメージは何度削除しても、インストールするものは結局同じイメージなので、あえて削除する必要がない。

だから、自分は--rmi local でblog-sample_appイメージだけ削除するようにしている。

-v

-v オプションは、「volume」ボリュームを削除するオプション。

実行結果

これらのオプションを使い削除することで、コンテナ・イメージ・ボリューム・ネットワークの一括削除ができる

$ docker-compose down --rmi local -v

実際に削除してみると・・

$ docker-compose down --rmi local -v  
Stopping blog-sample_app_1   ... done
Stopping blog-sample_db_1    ... done
Stopping blog-sample_ghost_1 ... done
Removing blog-sample_app_1   ... done
Removing blog-sample_db_1    ... done
Removing blog-sample_ghost_1 ... done
Removing network blog-sample_default
Removing volume blog-sample_node_modules
Removing image blog-sample_app

コンテナが停止され、コンテナ・イメージ・ボリューム・ネットワークを削除していることがわかる。
nodeやmysqlイメージは削除されずに残っている。

以上で、開発環境を完全削除ができたので、

$ docker-compose build
$ docker-compose up -d

とすれば、白紙に戻った開発環境の出来上がりです。

]]>

Fri, 22 May 2020 14:55:00 +0000

お名前メールをCloudflareなどの外部ネームサーバーで利用する方法です。
お名前.comの公式の方法ではありませんので、ご了承の上お試しください。

各サーバーサービス指定のネームサーバー（DNS）をご設定いただかなければご利用ドメイン名で弊社サーバーをご利用いただけません。
https://help.onamae.com/answer/8793

とあるように、お名前メールも同様、指定のネームサーバーを設定しないと利用できません。

通常は。

試行錯誤した結果、やっと！Cloudflareをネームサーバーに指定して、お名前メールを利用できる方法を見つけ出したのでご紹介！

これは、全個人開発者におすすめしたい！月77円で20ドメインのメールアドレスが管理できるんです！

準備するもの

運用していないドメイン
- お名前.comで管理していること
- ネームサーバーを変更するので、サブドメも使っていないこと
使いたいドメイン
- 運用していないドメインと同じでも良い
Cloudflare
- 外部ネームサーバー
DNSレコード取得ツール
- http://webadmin.jp/tooldns/
お名前メール
- ２ドメイン以上使う場合は、スタンダードプラン

おおまかな流れ

運用していないドメインにお名前メールのネームサーバーを設定
DNSレコード取得ツールでMX,SPFレコードを取得
使いたいドメインにMX,SPFレコードを設定

お名前メールを契約してドメインにネームサーバーを設定する

お名前メール契約

お名前メールを契約するためには、すでにお名前.comでドメインを所持しているか、契約するときにドメインを新規取得する必要があります。

新規取得の場合は、こちらのお名前メールサービスページから申し込みを進めてください。

既存のドメインでお名前メールを契約する場合はサービスページからは契約できないので、管理画面のドメインのページから契約します。
https://navi.onamae.com/domain
レンタルサーバー「申し込み」をクリック。

おすすめサービスにお名前メールがあるので、こちらから契約を進めてください。

ネームサーバー設定

お名前メールのネームサーバーからDNSレコードを取得するために、ドメインのネームサーバーを一度お名前メールに向けます。
（お名前メールの契約時に、「ネームサーバの変更をするか否か」を聞かれます。そのときに変更した方は、この手順は飛ばしてください。）

ドメインページの「ネームサーバー」の項目がクリックできるので、対象のドメインのところをクリック。

2.ネームサーバーの選択から「レンタルサーバー SDプラン、お名前メールのネームサーバーを使う」を選択し確認に進んでOK。

これでネームサーバーの設定が完了。
ネームサーバーが浸透するまでしばらく待ちます。

こちらのサイトで、浸透したかをチェックできます。
https://www.whatsmydns.net/
フォームに、ドメインを入力して、NSを選択してSearch。

大体浸透してたら大丈夫です！

DNSレコード取得ツールでMX,SPFレコードを取得

浸透したら、ドメインのDNSレコードを調べます。

http://webadmin.jp/tooldns/

ドメインを入力して「取得」。

表示されるMXとTXTの欄をメモしておく。

MX: ****.gmoserver.jp
TXT: spf**.gmoserver.jpが含まれているもの

使いたいドメインにMX,SPFレコードを設定

ここから、メールアドレスとして使いたいドメインの操作になります。（先程のドメインでも問題ないと思います。）

使いたいドメインの、ネームサーバーをCloudflareなどの外部ネームサーバーに設定してください。
私は、Cloudflareを使っているのでそちらの画面で説明していきます。

外部ネームサーバーに設定が完了したら、DNSの設定ページからMXとTXTを追加します。

Type： MX
Name: 使いたいドメイン名
Mail server： ****.gmoserver.jp（さきほどメモしたもの）

Type： TXT
Name: 使いたいドメイン名
Content: v=spf1 include:****.gmoserver.jp ~all（さきほどメモしたもの）

これで設定完了となります。

お名前メールに使いたいドメインを追加する

ドメインが1つだけのときは、この手順はスキップ。

お名前メールのページから「ドメインを追加」をクリック。

対象の追加方法を選択。
自分は、「お名前.comで契約済みのドメイン」を選択。

1.ドメイン選択で対象のドメインを選択。
2.ネームサーバーを変更するは、「変更しない」を選択。

請求が0であることを確認。

これでお名前メールにドメインの追加完了。

メールアドレスの作成

最後に、使いたいドメインのメールアドレスを発行します。
ここからは通常のお名前メールの設定と変わりません。

お名前.comの管理画面からお名前メールのコントロールパネルにログイン。

メール設定の「メールアカウント」を選択。

作成したいメールアドレスのドメインの選択とアドレス名の入力をして、「新規作成」。

これで作成完了です。
最後に表示されたメールアドレス/パスワードと、サーバー設定の「サーバー情報」からSMTPサーバーとPOPサーバーのURLが取得できるので、メールクライアントに設定すれば送受信できるようになります！

私は、色々試行錯誤した結果、この方法でできました。
ドメインは2つ使ったのですが、理論上は１つのドメインでもできる気がします。

そしてさらに気がついたのですが、コンパネにあるサーバー情報に、stmp[数字]@gmoserver.jpとありますが、この数字とMX，TXTレコードに記入する数字の部分が同じであることに気づきました。

MX: mx[数字].gmoserver.jp
TXT: v=spf1 include:spf[数字].gmoserver.jp ~all

もしかしたら、こんなに長い手順を踏まなくとも、数字を確認してネームサーバーのDNSレコードを追加するだけでできるかもしれません！
誰か試して欲しいです！

個人開発者にお名前メールを薦めたい

最後に、なんでこんなにもお名前メールに執着したかというと、格安でマルチドメイン対応のメール専用サーバーだったからです。

月額77円です！

以前は、さくらサーバーのさくらのメールボックスを使っていました。こちらは価格には満足していました。
ですが、、マルチドメインに対応という表記に罠があって、

同じメールアカウント名で異なるドメイン毎のメールアドレスの運用は利用できません。
（例：「info@◯◯◯.com」と「info@△△△.net」の場合、同じ「info」のメールボックスに配信されます）

さくらのメールボックスでは、確かに複数のドメインを設定できますが、@の前が同じメール扱いされてしまうのです。つまりドメイン毎に分けた運用はできません。（これでマルチドメイン対応とか言っていいのか・・・？）

他のメール専用サーバーは、少し高かったり、マルチドメイン非対応だったりで、お名前メールかムームーメールくらいしか条件を満たすものがありませんでした。

月契約もできるし、年契約にしたらムームーメールより安くなる、お名前メールを選びました。

結果、月額77円で20個のドメインを運用できる満足いくメールサーバーを手に入れました！

]]>

Mon, 18 May 2020 09:00:00 +0000

開発環境で、SSL接続が必要なときってありますよね。ServiceWorkerだったり、WebARだったり。

mkcertを使って認証キーを用意すれば、nuxt.config.jsに数行の設定を追記するだけで、Nuxt.jsでは簡単にブラウザの警告も出さずにSSL化ができます。

mkcertでSSL認証キーの準備

mkcertとは、設定なしに開発環境でSSL認証をできるようにしてくれるツールです。

mkcertをインストール

$ brew install mkcert

(ドキュメントには、Linuxt, Windowsでのインストール方法も記載されています。)

認証局作成

SSL認証キーが正しいかを検査してくれる認証局というものをローカルに準備します。準備といっても一行実行するだけ。

$ mkcert -install

SSL証明書と認証キーを作成

$ cd /my/app/path/cert
$ mkcert localhost 127.0.0.1
Using the local CA at "/Users/****/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

適当なフォルダに証明書と認証キーを作成します。
私は、nuxtのフォルダと並列のディレクトリにcertフォルダを用意して、その中に作成しました。

また、他のドメイン・IPからもアクセスしたい場合は、引数に追加してください。（mkcert localhost 127.0.0.1 0.0.0.0 192.168.43.41）

以上で認証キーの準備完了です。

余談ですが、opensslを使ってこちらの記事のようなことをしてました。
これをみたらmkcertのありがたみが100倍になります。。

Nuxt.jsの設定

こちらも非常に簡単！nuxt.config.jsに以下を追記。

nuxt.config.js

// fsとpathを読み込んでない場合は先頭に追記
import fs from 'fs'
import path from 'path'

export default {
  // ここから
  server: {
    https: {
      key: fs.readFileSync(path.join(__dirname, '../cert/localhost+1-key.pem')),
      cert: fs.readFileSync(path.join(__dirname, '../cert/localhost+1.pem')),
    },
  },
  // ここまで
}

はい、これで起動すれば、もうSSL化されています。
https://localhost:3000 でアクセスできるはず。

ひとくふう

ただし、このままでは本番環境で実行するときも、認証キーを読み込みにいってしまうので、開発環境のときのみローカルSSL認証されるようにしましょう。

ということで、こちら。

nuxt.config.js

const server = {}
if (process.env.NODE_ENV === 'development') {
  server.https = {
    key: fs.readFileSync(path.join(__dirname, '../cert/localhost+1-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, '../cert/localhost+1.pem')),
  }
}

export default {
  server,
}

これで、開発環境のときのみSSL化に成功しました。

まとめ

開発環境での認証局・認証ファイルの作成からSSLの設定まで、たったこれだけの作業で可能となります。

mkcertによって開発環境用の認証キーの作成が簡単に行えたわけですから、応用すればwebpack-dev-serverなど他でも活用できます。

]]>

Sun, 17 May 2020 09:00:00 +0000

Nuxt.jsでは公式からGoogleタグマネージャ（以下、GTM）用のモジュール@nuxtjs/gtmを用意してくれているのですが、GTMを使ったGoogleアナリティクス（以下、GA）の設定が通常の設定と異なるので紹介します。

@nuxtjs/google-tag-managerを使った古いやり方を紹介しているサイトはあったのですが、このモジュールはDeprecated廃止されていたので、新しいモジュール@nuxtjs/gtmを使ったGAのページトラッキングの設定方法となります。

リポジトリは、nuxt-community/gtm-module

（@nuxtjs/google-tag-managerは廃止となり、メンテナンスされなくなるので、@nuxtjs/gtmを使いましょう！）

Nuxt.jsの設定

@nuxtjs/gtmをインストール

$ yarn add -D @nuxtjs/gtm

設定ファイルの編集

// 以下を追記
require('dotenv').config() // GTMのIDを.envから取得するため

export default: {
  buildModules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: process.env.GTM_ID,
    pageTracking: true,
  }
}

GTM_ID=GTM-*******

Nuxtのバージョンがv2.9より低い場合は、buildModulesではなくmodulesに書いてください。

コード上の設定は以上。

GTMの設定

ここからは、GTMの画面上の設定になります。

GA_TRACKING_ID用ユーザー定義変数を作成

事前にGAのトラッキングIDをメモしておいてください。

左メニューから「変数」を選択し、ユーザー定義変数の「新規」をクリック。

変数のタイプ： Googleアナリティクス設定
トラッキングID： UA-*******-*　（GAのトラッキングID）
を設定。
保存名は、GA_TRACKING_IDとか分かれば何でも良い

タグを作成

左メニューから「タグ」を選択し、「新規」をクリック。

「タグタイプを選択して設定を開始...」をクリックして、「Google アナリティクス: ユニバーサルアナリティクス」を選択。

Google アナリティクス設定に、先程作成したユーザー定義変数を指定する。
次に、このタグを発火させるトリガーを作成するために、「トリガーを選択してこのタグを配信...」をクリック。

トリガーを作成

静的サイトであれば、トリガーはAllPagesを選択すれば良いのですが、SPA/SSRでは動かないので、カスタムイベントを作成する必要があります。

右上の＋をクリックして、新規作成。

「トリガーのタイプを選択して設定を開始...」をクリックして、「カスタムイベント」を選択。

イベント名： nuxtRoute
とし、保存名はGA_PageView_Triggerとしました。

このnuxtRouteというのは、@nuxtjs/gtmがデフォルトでSPA/SSR上でページ遷移があったときに、GTMに送信するイベント名です。

イベント名は、nuxt.config.jsのgtm設定に以下を追記することで変更できます。

pageViewEventName: 'myCustomEvent',

設定は以上になります。
下の画像のようになっていれば、問題ないでしょう。

動作確認

GTMの設定したタグが問題なく動作するか、GTMのプレビュー機能を使って確認します。

ワークスペースの右上に「プレビュー」というボタンがあるのでクリックすると、プレビューモードになります。

対象のサイトを見に行くと、ページ下部にGTMのコンソール画面的なものが現れます。
適当にページ遷移すると、左側にnuxtRouteという表示が現れます。これがGTMに送信されているイベントです。

左側のnuxtRouteをクリックすると、nuxtRouteイベントで発火したタグが表示されます。
ここに先程作成したタグが表示されていれば成功です！

問題なければ、プレビューを終了して、公開ボタンから公開しましょう。

お疲れ様でした！
念の為、GA上でも確認しておきましょうね。

]]>

Sat, 18 Apr 2020 10:01:00 +0000

Docker上で動いているGhostのアップデートをしようとしたら、エラーが出たので解決方法をお伝えします。

結論からいうと、

$ docker pull ghost:3-alipine
$ docker-compose up -d

で解決できました。

Ghostのバージョン3がでていたので、v2.15からv3にアップデートを試みる。

Ghostのアップデート方法は公式に載っている。
バックアップをとって、ghost updateすれば良いようです。

発生したエラー

さっそくアップデートしようとしたら、You can't run commands as the 'root' user.とエラーがでた。

解決方法

どうやら、rootユーザーには権限がないようだ。。。
/home ディレクトリを確認すると、nodeというユーザーが存在していた。

bash-4.4# ls /home/
node

nodeユーザーからアップデートするが失敗。

nodeユーザーでログインしてghost updateしてみる。

$ docker-compose exec --user node ghost ghost update

失敗。エラーを見てみると「v2.0にアップグレードしようとしてるけど、あんたv1.0じゃないよ」って言われている。
いや、、v3.0にアップグレードしたいんですが。。

何が問題かというとGhost CLIのバージョンが古かったために、v3.0に対応していなかった。

Ghost CLIをアップグレードして、ghost updateしても良いのですが、Dockerのイメージをv3.0のものにした方がラクなのでそちらの方法を紹介します。

Docker上のGhostの正しいアップデート方法

Dockerイメージファイルをダウンロード

$ docker pull ghost:3-alpine

docker-composeのimageのバージョンを変更

version: "3"
services:
  ghost:
    restart: always
    image: ghost:3-alpine

コンテナ生成

$ docker-compose up -d

バージョン確認

[root@v133-18-171-226 ghost.blog]# docker-compose exec ghost ghost version
Ghost-CLI version: 1.13.1
Ghost version: 3.13.3 (at /var/lib/ghost)

管理画面もv3.0のUIに変わったことが確認できました！
データがなくなることもなかったです。

]]>

Fri, 17 Apr 2020 12:13:00 +0000

はじめてnpmパッケージを公開しました！
パッケージ公開にあたって調べた、公開の仕方とパッケージの準備、それとCircleCIを使った自動化の手順をまとめます。

公開の手順

npmパッケージの公開までのおおまかな手順なこんな感じ

公開するパッケージの準備（ビルドされたファイル）
パッケージ情報を入力（packege.json）
パッケージの使い方説明(README.md など）
npmアカウントを作成
npmに公開！（Githubにpushしたら自動的にビルド&公開されるように）

使用者の環境に合わせるために3種類の規格に沿ったファイルを用意すること、package.jsonの書き方、CircleCIでの自動化
主にここらへんをまとめていきます。

公開するパッケージの準備

公開するにあたって、パッケージとなるソースコードを書いて完成！というわけにはいきません。
Javascriptといっても様々な規格があり、パッケージをインストールしてくれる人によって使っている規格が異なります。

require()を使うCommonJS

const VueAddEventListener = require('vue-add-event-listener');

importを使うECMAScript

import VueAddEventListener from 'vue-add-event-listener';

ブラウザから直接利用

<script src="https://unpkg.com/vue-add-event-listener"></script>

最低限、この3つを用意すると良いでしょう。

3つの規格をビルドする

好きなように書いたindex.jsをyarn buildで、これら3つのJS規格がビルドされるようにします。

./index.jsをビルドして、
./dist/index.cjs.js, ./dist/index.esm.js, ./dist/index.umd.jsを出力します。

CommonJS => ./dist/index.cjs.js
ECMAScript => ./dist/index.esm.js
ブラウザ用　=> ./dist/index.umd.js

今回は、手軽にビルドできるRollupを用います。（Webpackやparcelを使っても構いません。）

$ yarn add -D rollup @rollup/plugin-buble

import buble from '@rollup/plugin-buble' // 適切にブラウザをサポートするトランスパイラおよびポリフィル

export default {
    input: 'index.js', // Path relative to package.json
    output: [
      {
        file: 'dist/index.umd.js',
        format: 'umd',
        name: 'VueAddEventListener',
      },
      {
        file: 'dist/index.esm.js',
        format: 'es',
      },
      {
        file: 'dist/index.cjs.js',
        format: 'cjs',
      },
    ],
    // 依存モジュールを含めたくない場合に設定する
    // external: ['vue'],
    plugins: [
        buble(), // ES5 へトランスパイルする
    ],
}

ビルドのための設定はこれだけです。

そして、package.jsonにyarn buildで実行できるように追記します。

{
  "scripts": {
    "build": "rollup --config build/rollup.config.js"
  }
}

以上でビルドは完了です。

$ yarn build
yarn run v1.22.4
$ rollup --config build/rollup.config.js

index.js → dist/index.umd.js, dist/index.esm.js, dist/index.cjs.js...
created dist/index.umd.js, dist/index.esm.js, dist/index.cjs.js in 31ms
✨  Done in 0.67s.

package.jsonの書き方

npmに公開される情報は、package.jsonに書かれた内容とREADME.mdの内容で構成されます。
README.mdについての説明は省きます。（英文がんばってください。。。）

今回公開したpackage.jsonの中身はこちら。
それぞれ見ていきましょう。

{
  "name": "vue-add-event-listener",
  "version": "1.0.3",
  "description": "AddEventListener plugin for Vue",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "unpkg": "dist/index.umd.js",
  "scripts": {
    "build": "rollup --config build/rollup.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bonos103/vue-add-event-listener.git"
  },
  "keywords": [
    "vue",
    "addEventListener"
  ],
  "author": "Ryohei Tomiyama",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/bonos103/vue-event-listener/issues"
  },
  "homepage": "https://github.com/bonos103/vue-event-listener#readme",
  "devDependencies": {
    "@rollup/plugin-buble": "^0.21.2",
    "rollup": "^2.6.0",
    "vue": "^2.6.11"
  }
}

name

まずは、name。こちらがパッケージ名になる重要な部分です。

npm install vue-add-event-listener などで使われる名前になります。

注意するべき点は、すでに公開されているパッケージと名前が類似していると、公開する際にエラーになります。

具体的には、- . _ を無視した名前が重複するパッケージ名は使用できません。

vue-add-event-listener vue-addeventlistener vue_add_event_listener vue.add-event-listener は同じ名前とみなされます。

description

npmサイトのパッケージ一覧に表示される説明文

version

パッケージのバージョン
npmパッケージを更新したいときに、このバージョンも変更しないと、npm上に反映されません。
どんなに小さい修正だろうと、1.0.1 → 1.0.2 のように変更してください。

main, module, unpkg

ビルドした3つのファイルを指定します。
これらに指定することで、各環境に合わせて使われるファイルが自動で変わります。

"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"unpkg": "dist/index.umd.js",

main

CommonJSの環境で使うファイルを指定。

module

ECMAScriptの環境で使うファイルを指定。

unpkg

ブラウザから使うファイルを指定。
これを指定すると、unpkg.comのサイトからファイルにアクセスできるようになります。
https://unpkg.com/vue-add-event-listener

ここで注意が必要なのが、unpkgに指定したファイルはGithubのリポジトリ入れておく必要があります。
.gitignoreでdistディレクトリを無視する設定をしている場合は、!dist/index.umd.jsを追記してあげてください。

repository

npmサイトの右側にRepositoryとして、表示されます。

  "repository": {
    "type": "git",
    "url": "git+https://github.com/bonos103/vue-add-event-listener.git"
  }

homepage

npmサイトの右側にHomepageとして、表示されます。

keywords

npmサイトのパッケージ一覧に表示されます。
検索などにも引っかかるものなので、しっかりと指定しましょう。

とりあえず、これだけ指定しておけばnpmに公開するのに支障ないと思われます。

npmの公開方法

公開自体には難しいことはなく、npmアカウントを作成して、npm login して npm publishすれば公開できます。
自動化せずにコマンドから公開する手順は、こちらの記事が参考になります。

CircleCIでビルド〜公開までを自動化する

ここまで読めばnpmを公開すること自体はできますが、今回はGithubのレポジトリにmasterブランチをpushしたとき、CircleCIで3つのファイルを生成するビルドが行われて、npmに公開されるところまでを自動化したいと思います。

CircleCIの実行ファイルはこちら。

version: 2
defaults: &defaults
  docker:
    - image: circleci/node:12.14.1
  working_directory: ~/repo
jobs:
  install:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
            - v1-dependencies-{{ .Branch }}-
            - v1-dependencies-
      - run: yarn
      - save_cache:
          key: v1-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
          paths:
              - node_modules/
      - persist_to_workspace:
          root: ~/repo
          paths:
            - .
  build:
    <<: *defaults
    steps:
      - attach_workspace:
          at: ~/repo
      - run: yarn build
  
  deploy:
    <<: *defaults
    steps:
      - attach_workspace:
          at: ~/repo
      - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
      - run: npm publish

workflows:
  version: 2
  deploy-vue-event-listener:
    jobs:
      - install:
          filters:
            branches:
              only: /^master/
      - build:
          requires:
            - install
          filters:
            branches:
              only: /^master/
      - deploy:
          requires:
            - install
            - build
          filters:
            branches:
              only: /^master/

実行ファイルの説明

jobs

実行するジョブは３つ。
node_modulesをインストールするinstall
3つのファイルを生成するbuild
npmに公開するdeploy

workflows

これらのジョブをworkflowsを使ってinstall → build → deployの順番でジョブが実行されるようにしています。

workflows内でrequiresを指定すると、指定されたジョブが実行完了されたあとに実行するようにしてくれます。

requires:
  - install
  - build

filtersの設定で、branchがmasterのときだけ実行するようにしています。

filters:
  branches:
    only: /^master/

また、workflowsを使うときに重要なのが、persist_to_workspaceとattach_workspaceです。

persist_to_workspaceでディレクトリを共有して、とattach_workspaceでそのディレクトリを参照することができます。

この設定によって、installで生成された、node_modules/がその後に続く、build, deployのジョブから参照できるようになります。

もしこの設定がなかったら、ジョブはそれぞれ別のコンテナ（空間）で実行されるので、buildを実行しても、node_modulesをインストールできていないので、失敗します。

npm publishの準備

npm publish をする前にnpmのログイン情報が入っている、.npmrcを作成しています。
このときに必要なTokenの取得方法とCircleCIへの設定方法を説明します。

まずは、npmの会員登録を行ってください。

会員登録が完了したら、パソコンのターミナルからnpm login します。

ログインが完了しました。

そしたら、Tokenを取得するために、cat ~/.npmrc します。

ここに表示される06451a9f….がTokenになります。

続いて、CircleCIからこのTokenが使えるように環境変数に設定します。
（まだCircleCIとレポジトリを連携してない場合はしてください。）

プロジェクトの設定画面に進んでください。

設定画面の「Environment Variables」を開き、「Add Variable」ボタンを押して、環境変数を追加します。

Name: NPM_TOKEN
Value: { 先程取得したToken }

以上の設定で、ビルド〜公開までを自動化が完了になります。
あとは、masterブランチをpushすれば、ジョブが実行されてnpmに公開されます！

1回のpushで3つのjobが動きました！
そして、npmにも公開されました！🎉
https://www.npmjs.com/package/vue-add-event-listener

結構長い道のりになってしまいましたが、良い経験になりました。
おつかれさまでした。

]]>

Mon, 30 Mar 2020 13:10:00 +0000

MarkerClustererPlusというライブラリを使うと、Google Maps 上のマーカーを地図のスケールによってクラスタリング（統合）することができます。

導入の仕方は、Maps JavaScript APIのドキュメントに書かれていますが、細かいオプションについては説明されていないので、各オプションについて解説していきます。

（すべてのオプションを網羅していないので、もっと詳しく知りたい場合はコードに書かれたコメント見てください。）

画像を使ったクラスタアイコン

imagePath

ドキュメントでは、imagePathを使ってクラスタアイコンを表示しています。

new MarkerClusterer(
  map,
  markers,
  {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  },
);

imagePathに指定するのは、画像のフルパスではない点に注意。
上記例で説明すると、https://develop...lusterer/m とmで終わっています。

上記で指定したimagePathにアクセスしていただいたらわかりますが、404となります。
このパスに1.pngや2.pngを終わりに追加すると、画像が確認できます。

https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png
https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png

imagePathと数字の大きさが、クラスタの大きさに比例します。
以下の画像でいう、青色のクラスタはm1.png。黄色のクラスタはm2.pngとなります。

オリジナルの画像を使う場合は、hoge1.png, hoge2.png ...と、画像名＋連番で作成します。

imageExtension

imagePath と合わせて使います。
画像の拡張子を設定します。

前述したとおり、imagePath + 1.png が画像名となりますが、画像をjpgやgifで作成した場合は、こちらのオプションで拡張子を変更しましょう。

{
  imagePath: 'https://your_custom_image_path/m',
  imageExtension: 'jpg',
}

imageSizes

imagePath と合わせて使います。
画像のサイズをpxで指定します。
オリジナル画像を使う場合は、指定しましょう。

画像の表示サイズを設定できるのではなく、使う画像のサイズを指定する点に注意。
画像サイズと合っていないと、画像が欠けてしまったり、位置がズレたりしてしまいます。

{
  imagePath: 'https://your_custom_image_path/m',
  imageExtension: 'jpg',
  imageSizes: [30, 40, 50],
}

enableRetinaIcons

アイコン画像と表示サイズが異なるときに設定すると幸せになります。

デフォルトでは、imageSizesで述べた通り、画像サイズと指定サイズが異なると画像が欠けますが、そちらを指定するだけで、画像サイズを指定サイズにリサイズしてくれます。

{
  enableRetinaIcons: true,
}

stylesを使ったクラスタアイコンのカスタマイズ

stylesオプションを使うと、各サイズのクラスタに対して細かいカスタマイズが可能になります。

{
  styles: [
    {
      url: 'https://your_custom_image_path/m1.png',
      className: 'cluster-1',
      height: '30',
      width: '30',
      anchorText: [0, 0],
      anchorIcon: [0, 0],
    },
    {
      url: 'https://your_custom_image_path/m2.png',
      className: 'cluster-2',
      height: '35',
      width: '35',
      anchorText: [0, 0],
      anchorIcon: [0, 0],
    },
    {
      url: 'https://your_custom_image_path/m3.png',
      className: 'cluster-3',
      height: '40',
      width: '40',
      anchorText: [0, 0],
      anchorIcon: [0, 0],
    },
  ],
}

こんな感じでArray型で各クラスタのオプションを指定します。

styles['url']

クラスタアイコンのファイルパスをしてします。
imagePath と違いパスの最後まで入力します。

styles['className']

クラスタアイコンに対して、クラス名を指定できます。
このクラス名に対してCSSでクラスタアイコンをカスタマイズできるので、画像を使わずにCSSのみでクラスタアイコンを作成することも可能です。

styles['height'] / styles['width']

こちらのオプションは必須です。
名前の通り、高さと幅を指定します。

styles['anchorText'] / styles['anchorIcon']

文字と画像の位置を中心地よりずらすことができます。
例えば以下の画像のようなピンアイコンは、ピンの先を中心にしたいので、これらのオプションが有効になってきます。

他にも、textColor, textSize, textLineHeight などスタイルを変更できるオプションがありますが、基本的にclassNameで指定したクラス名から設定できるので、割愛します。

詳しくはこちらを御覧ください↓
https://github.com/googlemaps/v3-utility-library/blob/master/packages/markerclustererplus/src/cluster-icon.ts#L48

その他オプション

gridSize

マーカーをクラスタリングする範囲を指定できます。
値を小さくするとクラスタにまとまりやすく、大きくするとクラスタにまとまりにくくなります。

{
  gridSize: 60,
}

gridSize: 20とgridSize: 60で比較するとまとまり方が違うことがわかると思います。

maxZoom

マーカーをクラスタリングする最大の拡大値を指定できます。
指定した値以上マップで拡大をすると、クラスタで表示されなくなります。
値は、GoogleMapsAPIのzoomと同じです。

{
  maxZoom: 10,
}

zoomOnClick

クラスタをクリックしたときに、クラスタの範囲にズームするかを設定できます。
デフォルトでは、trueになってり、クラスタをクリックすると拡大されます。

{
  zoomOnClick: true,
}

averageCenter

クラスタにまとめられたマーカーの中心地にクラスタアイコンを表示するかを設定できます。
falseの場合は、クラスタの中の最初のマーカーの位置に表示されます。

{
  averageCenter: true,
}

minimumClusterSize

クラスタの範囲内にminimumClusterSize の値よりマーカーの数が多いとき、クラスタリングされます。

{
  minimumClusterSize: 4,
}

まだまだ説明しきれていないオプションが存在しますが、以上のオプションで大抵のことはできると思います。

気になる方は、コードを読み解いてみてください。

]]>

Sat, 29 Feb 2020 14:32:00 +0000

DockerでRailsの開発を作成した際に、Time.nowが日本時間になってくれず困ったので備忘録。

結論、サーバーのタイムゾーンがUTCのままだったので環境変数TZを設定することで解決しました。

Time.nowが日本時間になってくれない！？

現在の時刻が22:38ですが、rails上でUTC時刻になってしまいます。

> Time.now
=> 2020-02-29 13:38:34 +0000

config/application.rb に config.time_zone = 'Tokyo' を記載していても、Time.nowには反映されません。

なぜなら、config/application.rbの設定はTimeWithZoneというメソッド（Time.zone.nowなど）に効果があり、Time自体はRailsの設定に影響されないためです。

なので、config/application.rb の設定だけでは、以下のようにTime.zone.nowとTime.nowで結果が変わってしまう。

> Time.zone.now
=> Sat, 29 Feb 2020 22:40:13 JST +09:00

> Time.now
=> 2020-02-29 13:40:20 +0000

Time.nowはサーバーのタイムゾーンを参照しており、Time.zone.nowはRailsのタイムゾーンを参照しているためである。

このままでは、不具合が出る可能性が高くなってしまうので、サーバーのタイムゾーンもRailsのタイムゾーンに合わせましょう。

サーバーのタイムゾーンを日本時間に変更

Dockerfileに環境変数を設定しました。

ENV TZ Asia/Tokyo

DockerComposeを使っている場合は、docker-compose.ymlに環境変数を設定してもよいでしょう。ただ一度設定したら変えるものでもないので、Dockerfileに記載する方がスッキリすると思います。

services:
  rails:
    environment:
      TZ: Asia/Tokyo

コンテナをビルド＆再起動するのを忘れずに。

チェック

無事、Time.zone.nowとTime.nowで同じ結果となりました。

> Time.zone.now
=> Sat, 29 Feb 2020 23:08:52 JST +09:00
> Time.now
=> 2020-02-29 23:08:55 +0900

P.S.
RailsではTimeWithZoneを使った方がRailsの設定上で動くので良いそうです。

]]>

Tue, 18 Feb 2020 13:32:00 +0000

1月からちょっと特殊な働き方を実践していて、午前はスノーボード（約4時間）、午後は仕事（約6時間）、土日関係なく週7日稼働しています。

週5日8時間勤務と変わらない労働時間確保しつつ、毎日スノーボードができるという、夢のようなライフスタイル。

ちなみに、仕事はフルリモートで行っていて、キャンピングカーで生活しています。ゲレンデ徒歩0分、勤務地徒歩0分。

このような暮らしを始めて、1ヶ月が経ったので感じたことをまとめました。

なぜこのような暮らしを選択したのか

一言で言えば、「スノーボードのため」 です。

今まで通りの働き方をしていたら、土日の週2日がスノーボードに当てれる時間になります。
土日は混雑でリフト待ちが発生するし、大学生の頃のように、1日フルで滑るのはしんどいです。。身体が。。

さらに、天気が良いとも限りません。強風でリフトが止まるかも。大雪でパークが開かないかも。

そしてなにより、好きなことは毎日したい！じゃないですか。

これらの課題を解決する方法が 「毎日スノーボード、毎日シゴト。という暮らし」 だったのです。
仕事する時間は減らさずに、スノーボードの時間を最大化する方法として、このような働き方をしています。

メリット

実際に挑戦してみて良かったこと。

生活の軸が趣味

天気が良いから、スノーボード多め。
天気が悪いから、仕事多め。
午前はアイスバーンだから、午前中は仕事しよう。
みたく、趣味を軸に1日の行動を決めれます。

（天気が良い日は、多めに滑っています。）

会社員の頃は、平日は仕事を軸に動かざるを得なかった（勤務時間も決まってるし、出勤しなくちゃいけないし）ので、今の暮らしは 「1日を行動をコントロール ≒ 自由に生きる」 ような感覚です。

仕事のモチベーション・効率アップ

「今日まだあと4時間もあるじゃん」とか、「明日も仕事か・・・」「まだ水曜日・・・」「明日は月曜日・・・」みたいな負のモチベーションを持つことはありません。

むしろ、明日も仕事か・・・よりも、明日も滑れる！のワクワクが大きいからかも。

効率が良くなったかは、測っているわけではないのですが、土日は仕事仲間からの連絡が来ないので、もくもくと作業ができるし、休みがないので「先週は何してたっけ？」みたいなブランクもなく仕事に取り組めます。

キャンピングカーの中で仕事しています。

毎日温泉

毎日、温泉入ってます。
八方温泉の冬季温泉パスポート（30,000円）で4ヶ所の温泉入り放題。

同伴者100円引と温泉まんじゅう5％割引が特典で付いています。

デメリット

土日は、メンバーが稼働していないから質問できない。

これは仕方のないことですね。
しっかりとテキストに残して週明け質問できるようにしています。

身体のダメージが残る

遊び疲れとかではなく、関節痛や炎症などの症状が治らなくなってしまいました。
毎日痛みを我慢しながら滑っているため、ダメージが蓄積してしまっています。
身体の老いを感じます。。

食生活の乱れ

昼飯はカップラーメン。夕飯はお惣菜。

オフシーズンは3食とも自炊。しかも、畑もやっているので野菜たっぷりですので、明らかに食事が偏っています。。どうしたものか、、

まとめ

こんな感じで1ヶ月間の暮らしを振り返ってみました。
考えを文章にまとめてみて思ったのは、1日の行動をコントロールできるのが今の暮らしに満足している1番の理由かなと思いました。
「行動をコントロールできているか」は今後も判断軸として持ち続けたいなと思います。

]]>

Tue, 21 Jan 2020 12:32:00 +0000

やりたいこと

SVGをVueComponentとして読み込む場合と、ファイルパスとして読み込む場合のどちらにも対応したい。

例えば、アイコンなどは、vue-svg-loaderを使ってVueComponentとして読み込んで、色や塗り、線などをスタイルの変更をしたい。

<template lang="pug">
  download-icon.icon
</template>
<script>
import DownloadIcon from '@/assets/images/icons/download.svg'

export default {
  components: {
    DownloadIcon,
  },
}
</script>
<style>
  .icon {
    fill: #000;
  }
</style>

ロゴ画像の場合は、ファイルパスとして読み込んで画像として出力したい。

<template lang="pug">
  img(src="@/assets/images/logo.svg")
</template>

しかし、VueCLIのデフォルトの設定やvue-svg-loaderのリファレンスの設定だと、どちらか一方の方法でしか読み込めないので、設定方法を変更する必要がある。

実現方法

WebpackにoneOfという設定がある。

oneOfを使うと、一つの条件（今回の場合は、test: /\.svg/ ）に対して、どのLoaderを使うかを指定できる。

公式リファレンスでは、cssに対して、hoge.css?inlineと?inlineを付けた場合は、url-loaderで読み込み、hoge.css?fileとした場合は、file-loaderで読み込む設定となっている。

今回紹介するのは、SVGファイルに対して、デフォルトではfile-loaderで読み込み、@/assets/images/icons/download.svg?componentと?componentと付けた場合は、vue-svg-loaderで読み込みVueComponentになるように設定する。

実装

Webpackの設定は以下のようになる。

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.svg$/,
        oneOf: [
          // VueComponent
          {
            resourceQuery: /component/,
            use: 'vue-svg-loader',
          },
          // デフォルト
          {
            use: 'file-loader',
          },
        ],
      },
    ],
  },
}

VueCLIを使っている場合

VueCLIの場合は、すでにsvgに対するルールが設定されているので、それを書き換える必要がある。

vue.config.jsに以下の設定を追加する。

module.exports = {
  //...
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule
      .oneOf('component')
      .resourceQuery(/component/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end()
      .end()
    svgRule.oneOf('normal').uses.merge(svgRule.uses.entries())
    svgRule.uses.clear()
  },
}

以上の設定で、VueComponentとして読み込むこともできるし、ファイルパスとして読み込むことができる。

まとめ

以下のように、VueComponentとファイルパスの両方で、SVGを読み込むことができる。

<template lang="pug">
  div
    download-icon.icon
    img(src="@/assets/images/logo.svg")
</template>
<script>
import DownloadIcon from '@/assets/images/icons/download.svg?component'

export default {
  components: {
    DownloadIcon,
  },
}
</script>
<style>
  .icon {
    fill: #000;
  }
</style>

]]>

Mon, 06 Jan 2020 14:26:00 +0000

完成サンプル

ノートのような一行ごとに罫線があるデザインをCSSのみで作成しました。

See the Pen ノート風の罫線 by RyoheiTomiyama (@RyoheiTomiyama) on CodePen.

ポイント

.note {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 3em;
  line-height: 3;
}

罫線は、背景にグラデーションを指定することで表現できる。
最初の1pxを線である#cccに。1px目以降を透明（transparent）なグラデーションにして、背景を繰り返すと、1行ごとに罫線が引かれます。

行間をline-height: 3としているため、背景も3emごとに繰り返しています。
行間を狭めたい場合は、line-heightとbackground-sizeの数値を小さくすれば可能です。

このままでは、文末に罫線が表示されない状態です。

文末にも線を引くには、padding-bottomで調整して、文末にもグラデーションの線を表示させあげましょう。

完成形はこちら。

.note {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 3em;
  line-height: 3;
+ padding-bottom: 1px;
}

]]>

Sat, 17 Aug 2019 23:00:00 +0000

Lodashをimport _ from 'lodash';と読み込んでしまうと、315個もの関数を読み込むことになる。
Lodashだけで、69.02KBものサイズになってしまう。

そこで必要な関数だけを読み込むようにコードを以下のように変更したら、今回の検証では、Lodashにかかるファイルサイズは16.46KBまで抑えることができた。

約７５%削減することになる。

// 必要な関数だけを読み込む
import compact from 'lodash/compact';

ちなみに、babelを使っている場合は、babel-plugin-lodashをpluginに設定するだけで、必要な関数だけをバンドルしてくれるようになります。

検証

3パターンの読み込み方で検証しました。

検証用リポジトリ

パターン1

import _ from 'lodash';

パターン2

import { join, compact, cloneDeep } from 'lodash';

パターン3

import join from 'lodash/join';
import compact from 'lodash/compact';
import cloneDeep from 'lodash/cloneDeep';

webpackの設定は以下。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'production',
  entry: {
    index1: './src/index1.js',
    index2: './src/index2.js',
    index3: './src/index3.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

webpack-bundle-analyzerは、各バンドルで何がファイルサイズを食っているのかを可視化できるツールです。便利。

結果

各ファイルサイズ

パターン1 70.7KB
パターン2 70.7KB
パターン3 18.1KB

パターン1とパターン2は同じファイルサイズとなった。from 'lodash'といった感じで読み込んでいる場合は、export defaultを取得しようが、複数のexportを取得しようが、ファイルサイズは変わらないようだ。

パターン3のように使う関数だけを読み込むimport compact from 'lodash/compact';なら不要なコードはバンドルされないので、結果として軽くなった。

Babelを使っている場合

babel-plugin-lodash

# 以下を追加
"plugins": ["lodash"],

pluginを設定するだけOKです！
ソース内のLodash部分を全て書き換えるのは骨が折れそうですから、babelを使っているならこちらをお勧めします。

]]>

Wed, 14 Aug 2019 13:42:00 +0000

DockerComposeを使って起動したDockerコンテナのログは、docker-compose logs SERVICE_NAMEで確認できる。

しかし、このログはコンテナを削除しない限りずっと残ってしまう。

ログが溜まれば、ディスクを圧迫してしまうことにもなるし、何万行もあるログを確認することになると、最新のログが表示されるまで何十秒もかかってしまう。

ログの設定を行い、快適なDockerライフを送りましょう。

DockerComposeでのログの設定

公式ドキュメント

私が開発環境で行っているログ設定はこちら。

services:
  app:
    logging:
      driver: json-file
      options:
        max-file: '1'
        max-size: 3m

ログを最新の3MBだけ記録しています。

設定について

driver

driver: json-file

ここでは、ログの保存方式を指定しています。
json-fileはデフォルトの設定で、その名の通りJSONファイルとして保存します。
他にも、syslog, awslogs, gcplogs など設定できます。

options

options:
  max-file: '1'
  max-size: 3m

1ログファイルmax-sizeまで保存され、max-file数のログファイルを残しておくことができます。

開発環境では、古いログは不要なので、最大3MBまで保存していれば十分でしょう。

]]>

Tue, 23 Jul 2019 03:44:25 +0000

ある日突然、インターネット接続がとても重くなり、なかなかWebページが表示されなくなった。
モバイルWifiの電波の入りが悪くなったのかなと確認しても電波は３本立っていて問題ない。

アクティビティモニターでネットワークを確認すると、nsurlsessiondというプロセスが圧倒的に通信量を占めていることがわかりました。

ほんの少しの時間確認しただけで、あっという間にnsurlsessiondが１GBも消費。

通信してそうなアプリを落としても止まらない。再起動しても止まらない。。
色々調査した結果、MacOSのソフトウェア・アップデートが原因でした。

nsurlsessiondを止める

結論から書くと、ソフトウェア・アップデートの「新しいアップデートがある場合はダウンロード」からチェックを外すことで解消しました。

環境設定からソフトウェアアップデートをクリック。

右下の詳細をクリック。

出てきたポップアップ画面の、「新しいアップデートがある場合はダウンロード」からチェックを外す。

これでnsurlsessiondの通信が止まりました。

新しいソフトウェア・アップデートがあると、自動でダウンロードしていたために知らないところで通信されていたみたいです。

iCloudが原因という説も・・・

https://book.mynavi.jp/macfan/detail_summary/id=103019

こちらの記事では、iCloudへの同期が原因で通信量がかかってしまっていると言っています。

たしかに、この可能性もあるので、ソフトウェア・アップデートの方で改善されない場合は試してみてください。

nsurlsessiondというのは、Mac自体のプロセスのようなので、外部アプリが原因という可能性は低く、appleに関係のあるサービスが原因になっていると考えられます。

モバイルWiFi利用者にとっては痛い通信量

勝手に１GBとかの通信が行われてしまうわけですから、YMobileのPocketWiFiやUQ Wimaxを利用している人からしたら、あっという間に通信制限に引っかかってします。
テザリングをしているときに、この現象が起こったときは悲惨ですね。

まとめ

今回のnsurlsessiondが通信量を占める現象は、どんなときもWiFiを利用していて起こりました。

どんなときもWiFiは、通信量制限がない代わりに、最大通信速度が低いのです。（他のモバイルルーターと比較すると1/4以下）
ですので、ソフトウェア・アップデートのデータをダウンロードするのに、帯域のほとんどを使ってしまい、他の通信ができなくなっていたのが原因でした。

]]>

Thu, 18 Jul 2019 22:36:00 +0000

前回は、Adonis入門（導入編）ということで、AdonisJsを立ち上げてRouteを操作する方法を学びました。

今回は、DB（mysql）に接続してテーブルの作成からデータの挿入・取得・削除をしてみようと思います。

事前に

mysqlを使うので、起動しておいてください。

DBへの接続設定

公式リファレンス

/config/database.jsがDBの設定ファイルになっています。

すでにmysqlへの接続設定は書かれているため、環境変数で接続先を設定するだけで接続することができます。

AdonisJsでは、環境変数の設定にdotenvを採用しています。ですので、ルートディレクトリにある.envの以下の部分を編集します。

DB_CONNECTION=mysql  # ここで接続するDBにmysqlを選択
# DBの設定に合わせて値を変えてください
DB_HOST=127.0.0.1
DB_PORT=3336
DB_USER=adonis
DB_PASSWORD=adonis
DB_DATABASE=adonis

DBへの接続

AdonisからDBにアクセスするために、mysqlパッケージをインストール

$ yarn add mysql
もしくは
$ yarn add mysql2

もし、mysql2を使う場合は、config/database.jsの修正する必要があります。

...
mysql: {
    client: 'mysql2',   // ⇐ ここを変更
    connection: {
...

DBに接続ができているか確認してみます。
start/routes.jsに以下のrouteを追加

Route.get('/db', async () => {
  return await Database.table('users').select('*')
})

もちろん、データベースの中身が空っぽなので、以下のように表示されます。

別のエラーが起こるようであれば、DBの接続設定が間違っている可能性があるので、見直してください。

Modelを使ったテーブルの作成

続いては、TODOアプリを作りたいので、まずはTODO用のテーブルを作成します。

ModelとMigrationファイルの作成

$ adonis make:model Todo --migration
✔ create  app/Models/Todo.js
✔ create  database/migrations/1561644221251_todo_schema.js

--migrationを付けると、モデルの作成と一緒にマイグレーションファイルも作成してくれます。

作成された段階ではこんな感じ。

'use strict'

/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use('Schema')

class TodoSchema extends Schema {
  up () {
    this.create('todos', (table) => {
      table.increments()
      table.timestamps()
    })
  }

  down () {
    this.drop('todos')
  }
}

module.exports = TodoSchema

すでにincrementsとtimestampsが定義されています。
incrementsはプライマリキーであるidを自動で加算してくれます。
timestampsはcreated_atとupdated_atを自動付与してくれます。

Migration設定

作成されたマイグレーションファイルにTodoテーブルの内容を書いていきます。

カラムは、タイトル・詳細内容・完了ステータス。

Migrationの詳しい使い方は、公式リファレンスを参照

'use strict'

/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use('Schema')

class TodoSchema extends Schema {
  up () {
    this.create('todos', (table) => {
      table.increments()
      table.timestamps()
      table.string('title').notNullable()
      table.text('content')
      table.boolean('done')
    })
  }

  down () {
    this.drop('todos')
  }
}

module.exports = TodoSchema

タイトル（title）は、絶対に入力されている必要があるので、notNullableを付けてnullの状態を禁止にしました。
詳細内容（content）は、text型、完了ステータス（done）は、boolean型で定義しました。

Migration実行

TODOテーブルを定義できたので、Migrationを実行してDB上にテーブルを作成します。

$ adonis migration:run
migrate: 1503250034279_user.js
migrate: 1503250034280_token.js
migrate: 1561644221251_todo_schema.js
Database migrated successfully in 1.97 s

Migrationが完了しました。
TODO以外にも、デフォルトで作成されていたuserとtokenモデルもMigrationされました。

テーブルが作成されたかをmysqlから確認します。

定義した通り、TODOテーブルが作成されていました。

データの作成・取得・更新・削除

作成したTODOテーブルをAdonisから操作してみます。

make:modelした際に、TODOモデル（app/Models/Todo.js）が作成されているので、それを利用して操作していきます。

データの作成

TODOを作成して、データをjsonを返すルートを作成します。

const Todo = use('App/Models/Todo')

Route.get('/todo/add', async () => {
  const todo = new Todo()
  todo.title = 'はじめてのTODOアイテム'
  await todo.save()
  return todo;
})

titleが「はじめてのTODOアイテム」であるTodoを作成して保存しているシンプルなコードです。

http://127.0.0.1:3333/todo/add にアクセスして、作成されたことが確認できます。

データの取得

作成したTODOの一覧を取得します。

Route.get('/todo', async () => {
  return await Todo.all();
})

TODOの中からidで一つだけ取得するには、

Route.get('/todo/:id', async ({ params }) => {
  const { id } = params;
  return await Todo.find(id)
})

データの削除

id=1のデータを削除してみましょう。

Route.get('/todo/:id/delete', async ({ params }) => {
  const { id } = params;
  const todo = await Todo.find(id)
  return await todo.delete()
})

一覧を取得して確認すると、id: 1がなくなっていますね。

まとめ

DBに接続して、簡単な操作を行いました。

次回は、モデルを使って実際の運用を想定した、タイトルでの検索であったり、doneカラムで完了・未完了のフィルタリングに挑戦します。

リレーションを使ってTODOにメッセージを追加できるようにしてみようと思います。

]]>

Mon, 15 Jul 2019 09:18:00 +0000

Amazonパントリーは2021年8月24日23時59分をもって終了しました。

はじめてAmazonパントリーというサービスを使って買い物して、あまりにラクだったのでみんなにも知って欲しいのでご紹介！

Amazonパントリーとは

食品・日用品など毎日使うものを必要な分だけお買い求めいただける、Amazonプライム会員向けのサービスです。

少量から買える

例えば、安いものだとツナ缶を1缶112円から購入可能です。

Amazonで普通に買おうとすると24缶まとめてだったりするので、そんなに欲しくないときに3,4缶買うといったことができます。

パントリー限定クーポンで安く買える

日によって割引商品は違いますが、5円OFFから30%OFFで買うことできます。

クーポン対象商品一覧

1箱にまとめて

たくさんの種類の商品を買っても1箱に納めて発送してくれます。
商品ページに、「パントリーBoxの使用率」という表示があり、購入商品の使用率合計は100%までは1箱に納めて買うことできます。
ティッシュやトイレットペーパーなどは、10,20％とかさばるので注意が必要ですね。

1箱390円の手数料がかかる

Amazonプライム会員でも、390円の手数料がかかってしまいます。しかし、現在まとめ割引キャンペーンで、対象商品を9点以上買うと390円OFFとなるので実質手数料無料で買うことができます。

Amazonパントリーまとめて割引キャンペーンについて

実際に購入してみた

何点か欲しい商品を買ってみました。
届いたダンボールはこちら。

ちょっとへこみが気になりました。
いつもAmazonから届くダンボールより柔らかいような。。。

商品はこんな感じに詰まっていました。
こちらの写真でダンボールの大きさは伝わりますかね。

今回は、商品数が少なかったからか、隙間にはしっかりと緩衝材が入っていました。

特大サイズの柔軟剤・ティッシュペーパー・お菓子などなど、普段スーパーやホームセンターで買うものが注文した次の日に届きました。ラク。

この重くてかさばる商品たちが、玄関で受け取ることができるなんて。ラク。

しかも、実店舗で買うより安い気がします。

まとめ

こんなに便利でお得なサービスを今まで使っていなかったなんて・・・

今後は、買うものが決まっている消耗品類はAmazonパントリーで買うことになるでしょう。

]]>

Tue, 02 Jul 2019 22:37:00 +0000

こんにちは、アウトドア大好きエンジニアとみーです。
コーヒー道具は、主にキャンプ・登山・車中泊で使用しています。

コーヒーセットを一新しましたのでご紹介！
さっそく、購入した商品はこちら！

左から、コーヒードリッパー、コーヒーミル、コーヒーポット。

どれも1〜2人用のサイズとなっています。

コーヒードリッパー

こちらは、TetraDripのステンレススチール素材のもの

以前は、ポリピロピレン製のものを使っていましたが、今回はこちらをチョイス。
ポリプロピレン製は、1,000円台で購入することができますが、こちらのステンレススチール製は、3,000円ちょっとと3倍近いお値段、、果たして味に違いが出るのか。（舌が肥えてないから、多分わからない。。）

TetraDripのコーヒードリッパーの特徴は、携帯性の良さ。
3枚のプレートでできているので、かさばらずに収納ができます。

さらに横からみたらこの薄さ！

これ、3枚重ねてますからね。

ステンレスになったことでちょっと高級感が出て抽出するときの幸福感が上がりそうです！

コーヒーミル

RIVERSの手挽きコーヒーミル

以前は、ポーレックスのコーヒーミルを使用していました。

シルバーのものを使っていたのですが、買い換えるとしたら、**木目か黒がいいな〜**と思い探していました。

RIVERSかカリタの木目がおしゃれなコーヒーミルで迷ったのですが、カリタのは刃が鋳鉄でできており、メンテナンス面を考えてRIVERSの手挽きコーヒーミルにしました。

コーヒーポット

Kslongのコーヒーポット250ml

こちらは、Amazonで購入しました。

細口でこのサイズのものはたくさん出回ってますね。違いはほとんどないので、持ち手の形が好みのものを選びました。

コーヒーを抽出するのに、一人分150cc～180ccなので、大きさも十分です。

また質感も、マットな感じで傷が目立ちにくいと思います。

今回購入したコーヒー道具

TetraDripのコーヒードリッパー

RIVERS コーヒーミル

Kslong コーヒーポット

新しいコーヒー道具を持って出掛けるのが楽しみです！

]]>

Tue, 02 Jul 2019 13:27:00 +0000

開発が完了して使わなくなったブランチがローカルに大量に残ってしまう。
定期的に整理しないと、新しくプッシュしたブランチを探すのに一苦労なんてことも。

ということで、コマンド1つでマージ済みのブランチをまとめて削除する方法をご紹介。

こちらのやり方を参考にさせていただきました。（まんまでは、エラーになってしまったので修正しています。）

git delete-merged-branch develop でdevelopブランチにマージ済みのブランチを削除できるようにします。

設定

.gitconfigに設定を書きます。

$ vim ~/.gitconfig

以下のコードを追記する。

[alias]
       delete-merged-branch = "!f () { git checkout $1; git branch --merged | egrep -v '(\\*|develop|master)' | xargs git branch -d; }; f"

実行

まとめてブランチを削除するコマンドを、gitに登録したので実行させるだけ。

developブランチにマージ済みのブランチを削除したければ、

$ git delete-merged-branch develop

masterブランチにマージ済みのブランチを削除したければ、

$ git delete-merged-branch master

となります。

以上で、ブランチをまとめて削除することができました。

仕組み

登録したコマンドを分解して見ていきましょう。

checkout

git checkout $1

Switched to branch '$1''

こちらは、引数で渡された値にチェックアウトします。
git delete-merged-branch developであれば、developブランチにチェックアウトします。

branch --merged

git branch --merged

* develop
  fix/permit-status-list

現在のブランチにマージされているブランチを表示します。

egrep

| egrep -v '(\\*|develop|master)'

egrepは、*, develop, master以外の入力された値を返します。

ここでは、|で繋げているので、「現在のブランチにマージされているブランチの中で、*, develop, master以外のブランチを返す」となります。

xargs

| xargs git branch -d

xargsで前のコマンドで出力された値を、次のコマンドの入力にします。

$ seq 10 | xargs echo
1 2 3 4 5 6 7 8 9 10

seqは数列を出力するコマンドです。

ですので、「上で出力されたブランチを削除する」となります。

最後に関数化してコマンドの完成です。

まとめ

ローカルにブランチが溜まってきたな〜と思ったら、git delete-merged-branch develop で一発ですっきりです！

ちまちま削除する作業から開放されました！

]]>

Mon, 24 Jun 2019 22:00:00 +0000

AdonisJsを知ったきっかけ

お仕事でRailsに増える機会があり、ORMのありがたみをひしひしと感じました。特に、モデル同士の関連付け(アソシエーション)。

それで私の得意分野であるNode.jsフレームワークにもRailsライクなものはないかなと探して見つけたのが、AdonisJsでした。

（調べて分かったのですが、どうやらLaravelライクに作られているそうです。）

やりたいこと

今までは、MongoDBをmongooseのpopulationを使ってゴリゴリに書いていたので、ORMを用いるとどれだけラクにModelの管理ができるかを感じてみたいなと思います。

最終的には、AdonisJsをAPIサーバーとして運用して、SPAでTODOアプリを作成してみようと思います！（フロントにはVue.jsを使用予定）

まずは導入編！

セットアップ

インストール

$ mkdir ~/www/adonisjs
$ cd adonisjs
$ sudo yarn global add @adonisjs/cli

ファイル生成

今回は、APIサーバーにするので、--api-onlyオプションを付けます。

$ adonis new server --api-only

以下のテンプレートがcloneされます。
https://github.com/adonisjs/adonis-api-app

起動

$ cd server

$ adonis serve --dev

SERVER STARTED
> Watching files for changes...

info: serving app on http://127.0.0.1:3333

http://127.0.0.1:3333にアクセスして以下のように表示されたら、APIサーバーのセットアップ完了です。

Routeの追加方法

rootにアクセスすることはできたので、次に試しにGET /hogeできるようにrouteを追加してみます。

以下のコードをstart/routes.jsに追記。

Route.get('/hoge', () => {
  return { hoge: 'hogege' }
})

http://127.0.0.1:3333/hogeにアクセスしてみると、以下のように表示されます。

しかし、このままでは、routeが増えてくると、routes.jsは膨大なサイズになってしまうので、Controllerを使って、処理部分をファイル分割してみます。

Controllerを使ったRoute

Controllerの作成

コンソールからHogeというControllerを作成する。
typeを聞かれるので、HTTPの方を選択。（--type httpを付ければ省略できる。）

$ adonis make:controller Hoge
> Select controller type
❯ For HTTP requests
  For Websocket channel

✔ create  app/Controllers/Http/HogeController.js

HogeControllerが作成された。

'use strict'

class HogeController {
}

module.exports = HogeController

Controllerを編集

HogeController内にindexというメソッドを作成して、先程routes.jsに書いた/hogeの処理をこちらに持ってくる。

'use strict'

class HogeController {
  index() {
    return { hoge: 'hogege' }
  }
}

module.exports = HogeController

RouteからControllerを指定

/hogeのrouteを編集する。

Route.get('/hoge', 'HogeController.index')

このように書くことで、Controllerを指定することができる。
importとかexportとかいちいち書かなくていいのがラクですね。

まとめ

一旦ここまで。

まずは、AdonisJsをセットアップして、RouteとControllerの理解でした。
すでにNode.jsのフレームワークを使っている方は苦労しないと思います。

なんとなく、名前もRailsライクな気がしますね。

]]>

Sun, 23 Jun 2019 07:00:00 +0000

Nodeに標準で備わっているWHATWG URLを使おうとすると、TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URL is not a constructorとエラーを出て使えないことがあったので、原因を調査して対策しました。

WHATWG URL

WHATWG URLは、Node.js8.0から正式対応したURL解析モジュールであり、IE・Edgeを除くブラウザにも対応しています。

import { URL } from 'url';

const url = new URL('https://test.jp/hoge');
console.log(url);

URL {
  href: 'https://test.jp/hoge',
  origin: 'https://test.jp',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'test.jp',
  hostname: 'test.jp',
  port: '',
  pathname: '/hoge',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

このようにURLをprotocolだったり、hostだったり、URLを解析した結果をオブジェクト型で返します。

これを利用すると簡単にパラメータの操作ができます。
例えば、パラメータでページャーの制御をしているときには、以下のように使えます。

url.searchParams.set('page', 2);
console.log(url.href);
// => https://test.jp/hoge?page=2

url.searchParams.set('page', 3);
console.log(url.href);
// => https://test.jp/hoge?page=3

エラーになる理由

便利で普段から使っていたのですが、あるとき以下のようなエラーが出て使えませんでした。

URLが見つからないようです。

Nodeのバージョン古かったかな？と思い確認したのですが、

$ node -v
v12.4.0

Node8.0以上はクリア。もちろん、公式リファレンスも存在しています。

コンソール画面でNodeを実行して確認してみても、URLというメソッドが存在しています。

$ node
> var url = require('url');
> url
{
  Url: [Function: Url],
  parse: [Function: urlParse],
  resolve: [Function: urlResolve],
  resolveObject: [Function: urlResolveObject],
  format: [Function: urlFormat],
  URL: [Function: URL],
  URLSearchParams: [Function: URLSearchParams],
  domainToASCII: [Function: domainToASCII],
  domainToUnicode: [Function: domainToUnicode],
  pathToFileURL: [Function: pathToFileURL],
  fileURLToPath: [Function: fileURLToPath]
}
>

webpackを通しているのが原因かなと思い、console.log(url);をしてみると、

URLが存在しません！
あれ？なんで？webpackのバージョンが古い？configミスった？とか考え、いろいろと試行錯誤した結果原因がわかりました。

サーバーサイドでは動くけど、クライアントサイドでは動かない！

そうなんです。同じ実行環境で、サーバーサイドとクライアントサイドでURLを確認すると、なぜかクライアントサイドでは、URLというメソッドがなくなっていました。

クライアントサイドでURLを使うためには

ブラウザ上ではURLが使えないのが分かったのですが、どうしても使いたい！

そんなときは、方法として2パターン考えました。

1. ブラウザに標準実装されているURLを使う

もし、実行するファイルがクライアントサイドだけで使うものであれば、import { URL}せずに使うとこができます。その1行をコメントアウトして実行してみてください。

ただし、URLはIE・Edgeには対応していませんので、url-polyfill を読み込ませることで、全ブラウザ上でも実行可能になります。

インストール

$ yarn add url-polyfill

使い方

import 'url-polyfill';

読み込ませる位置は、URLを使うファイル上でも良いですし、app.jsといったメインファイルに読み込ませておいても問題ありません。

2. Node上でもブラウザ上でも使えるuniversal-urlを使う

universal-url

importしたurlモジュールをuniversal-urlに置き換えるだけで、サーバーサイド・クライアントサイド両方で使えるコードとなります。

インストール

$ yarn add universal-url

使い方

import { URL } from 'url'と置き換える

import { URL } from 'universal-url';

私は、UniversalJSの方がラクなので、後者のuniversal-urlを導入して解決しました。

]]>

Sat, 15 Jun 2019 13:44:00 +0000

javascriptで複数の要素に対して、なにかしらの処理を行いたいときに、querySelectorAllを使って、私はよくこのように書いています。

const hoges = document.querySelectorAll('.hoge');
hoges.forEach((el) => {
  // なにかしらの処理
});

.hoge 要素をすべて取得して、それぞれになにかしらの処理を行う。
至って自然な書き方ですが、実はこれ、、IE,Edgeだとエラーが発生します。

Object doesn't support property or method 'forEach'

「変数hogesにforEachというメソッドがありません」 というエラーが出てしまう。

原因

querySelectorAllはNodeListというオブジェクトを返します。

console.log(document.querySelectorAll('.hoge'));
> NodeList(3) [div.hoge, div.hoge, div.hoge]

MDNのサイト（ https://developer.mozilla.org/ja/docs/Web/API/NodeList ）に以下のように書いてありました。

NodeList は Array とは異なりますが、 forEach() メソッドで処理を反復適用することは可能です。 Array.from() を使うことで Array に変換することができます。

ただし、古いブラウザーでは NodeList.forEach() も Array.from() 実装されていない場合があります。これらの制限は Array.prototype.forEach() を使うことで回避することが可能です (この文書に詳しく書かれています)。

そう、古いブラウザーでは NodeList.forEach()に対応していなかったのです！

解決策

Array.fromを使って、配列にしてからforEachをする。

const hoges = Array.from(document.querySelectorAll('.hoge'));
hoges.forEach((el) => {
  // なんらかの処理
});

これで、IE,Edgeでも動作するようになります。

※ ES6を導入していない場合は以下のように書く必要があります。

var hoges = document.querySelectorAll('.hoge');
Array.prototype.forEach.call(hoges, function (el) {
  // なんらかの処理
});

まとめ

IE11とEdgeという無視することができないブラウザで対応していないとは、、、
(2017年9月26日にリリースされた EdgeHTML 16.16299 以降ではforEachに対応しているそうです。)

今後は、Array.from(document.querySelectorAll())で習慣つけていく必要がありそうです。

]]>

Wed, 15 May 2019 10:19:00 +0000

約1ヶ月前に「どんなときもWiFi」を契約して、1週間ほど試用してみてエンジニアの仕事にも問題ないし、ビデオ会議もしっかり繋がるので、光回線を解約しました。なので今は、楽天モバイル3GB+どんなときもWiFiのみでインターネットを利用しています。

光回線なしで、仕事もプライベートもインターネットを使う生活を1ヶ月間してみて、ちょっとスピード遅いなぁと感じることもありますが、仕事に支障もなく生活できております。

どんなときWiFiのみで生活した1ヶ月の中で感じた、良いところと悪いところをまとめました。

（メインは、悪いところ・不満なところかな）

使用頻度

まずは私がどのようにインターネットを使っているかなのですが、週5日リモートワークでエンジニアの仕事をしております。また、プライベートでも開発を行っているので、1日平均10時間以上はインターネットを使用しています。
さらに、Spotifyで音楽を常に流しているので、通信量は毎日10GBは超えているのではないでしょうか。

プライベートでは、Youtubeを見たり、PrimeVideoを見たりもしています。

良かった点

通信費を抑えられた

私は、長野県大町市に暮らしており、東京の企業と業務委託という形でお仕事をさせていただいております。なのでときおり、東京にでることもありますし、在宅だけでなくカフェでやることも多いです。となると、通信環境として、光回線+スマホ用SIM+追加データが必要でした。

しかし、光回線を解約したので現在は、どんなときもWiFi+スマホ用SIMだけで運用しています。どんなときもWiFiが3,542円、スマホ用SIMが1,730円なので、通信費は5,272円/月になります。

以前は、1万円を超えていたので、半分になり約5,000円の節約になりました。（光回線って意外と高いですよね。）

WiFiのあるカフェを探す必要がなくなった

これ私にとって、ほんとにありがたいです！
以前でしたら、外出先でやるとなるとWiFiのあるカフェを探さなければなりませんでした。するとちょっと離れたところまで行かなければいけなかったり、WiFiはあるのにスピードが遅くて仕事にならなかったり・・・。

場所を探すだけで相当労力を費やすことが多々ありました。WiFiカフェマップを作成してしまうほどに。。。

ですが、今後は場所を気にする必要がありません！最近実際にやったのが車の中。移動中にサーバーが落ちたと連絡が来て、すぐにコンビニに停車してその場で復旧作業にあたりました。
**どこにいてもすぐに作業できるということが、心理的不安をとても和らげてくれました。**ノマドワークが捗りますね！

副次的に、無料WiFiは暗号化されていないことも多く少し心配で、パスワードを入力する必要がある作業はなるべくしないように気をつけていたのですが、そういった心配もなくなりました。

ド田舎でも繋がる

家が市街地から山道を15分ほど走ったところにある、ド田舎でもどんなときもWiFiは繋がります。ちなみにPocketWiFiやUQWiMAXは家では繋がらないです。。

家にいるときも、実家に帰ったときも、旅行先でも、問題なく利用できました。

家からすぐの場所から見える景色

悪かった点

時間帯によって通信スピード遅くなることがある

お昼時と夜の時間帯くらいに、スピード遅いなぁと感じることが結構ありました。YoutubeをHD画質で見ようとすると途切れ途切れになってしまったり、サイトの画像の読み込みが遅かったり、ちょっとストレスを感じました。

以前のレビューのときは、いつでもスイスイ使える印象だったのですが、「どんなときもWiFi」の人気がでてきて利用者が増えたからでしょうか。格安SIMと同様で、使える周波数帯が限られていると思うので、人が増えれば繋がりにくくなってしまうのでしょう。

ただし、Spotifyを流したり、ビデオ会議をするのには、なんも問題ありませんでした。

また複数の通信をしようとすると遅くなる気がしました。

端末の最大通信速度が遅いのが原因でしょう

アップロードが遅い？

動画など大きいデータをクラウドにアップロードするときのは、めちゃくちゃ遅いです。
例えば、522MBの動画をアップロードしようとすると、調子の良いときで2MB/s。アップロードが完了するまでに約2分20秒かかります。実際にはずっとその速度が出ているわけではないので、5分ほどかかりました。時間帯によっては、アップロードする気にもならない速度になります。

写真をアップロードする分には、ストレスはほとんどないです。ただし一気にアップロードするのは、やはり動画同様時間がかかってしまうので、パソコンを操作しない時間帯に行うのが無難でしょう。

バッテリー切れして再起動したあと、たまに繋がらないことがある

バッテリーは10時間以上持つので、外出先でも気にせず使っています。そのため充電を忘れ、バッテリー切れを起こしてしまうことがあります。すぐにコンセントに繋いで再起動させるのですが、WiFiマークが点滅したまま通信できなくなってしまうことがあります。原因が不明です。バグでしょうか。

こうなったときは、電源ボタンを18秒長押しリセットすることで、解消されました。

18秒も押すのは面倒なので、バッテリー切れには気をつけて、こまめに充電をするようにしたいと思います。

まとめ

以上が、「どんなときもWiFi」だけで1ヶ月間生活してみて気づいた良い点・悪い点でした。

光回線を使っているときに比べると、少しストレスは感じますが、動画も見れるし、ゲームもできるし、もちろん仕事にも支障はないので、今後も「どんなときもWiFi」だけで生活していこうと思います。

検討中の方の参考になれば幸いです！

]]>

Wed, 08 May 2019 12:12:00 +0000

フリーランスになって初めて引っ越したので、その際に行った手続きをまとめておきます。

国民健康保険や国民年金など自分で管理しているものが増えているので、手続きが面倒になるかと思いきや、会社員のときと比べて１つだけやることが増えただけでした。

引越し前の手続き

所得税・消費税の納税地の異動に関する届出書

場所：引っ越す前の税務署

やること：「所得税・消費税の納税地の異動に関する届出書」を提出

必要なもの：マイナンバー・印鑑

（何度も同じ住所を記入することになるので、パソコンで記入して印刷していくことをお薦めします。）

転出届

場所：引っ越す前の市役所

やること：「転出届」を提出

必要なもの：現住所の分かるもの・印鑑・マイナンバー？

（国民健康保険に加入している場合、転出すると同時に自動で喪失するそうです。以前は手続きが必要だったみたい。）

郵便局の転送手続き

Web上のe転居サービスから手続き

（転送開始までには、一週間程かかるそうなので、お早めに。）

電気・水道・ガスの供給停止・開始［各供給会社］

ガスの停止・開始には立会いが必要な場合が多いので、早めの連絡を。

引越し後の手続き

転入届

場所：引越し先の市役所

やること：「転入届」を提出

必要なもの：印鑑・マイナンバー？・転出証明書（引っ越し先の住所が分かるものが必要になる地域もあります。）

国民健康保険

転入届を出す際に、申し出れば手続きを行ってくれます。

免許証の住所変更

場所：引越し先の運転免許試験場、運転免許更新センター、警察署

必要なもの：免許証・引越し先の住所が確認できるもの（新しい住民票、新住所の健康保険証、消印付郵便物、住所が確認できる公共料金の領収証など）

金融機関の住所変更手続き

各金融機関で行いましょう。

その他の住所変更手続き

上記以外人も例えば、インターネットのプロバイダ・クレジットカード・携帯電話・終身保険など住所登録しているものは変更しましょう。

]]>

Mon, 29 Apr 2019 08:25:00 +0000

作成したもの

Swaggerファイルをpathsやcomponentsなどファイル分割して編集でき、かつ画面をリアルタイムで確認できるものを作成しました。

やっていることは単純で、分割されたファイルを監視して変更があったら、swagger.ymlというファイルにまとめ、それをswagger-uiで表示しています。
１ファイルにまとめるのにswagger-mergerという、CLIツールを使用しました。

リポジトリ

swagger-multi-file-docker(Github)

環境

Dockerさえインストールしていれば、環境に依存することなく実行できるようにしました。（APIドキュメントは、編集する人が不特定いると思うので。）

実行

初回のみ、dockerイメージをビルドする必要があります。

$ docker-compose build

ビルドが完了したら、コンテナを起動します。

$ docker-compose up -d
Starting swagger-multi-file-docker_swagger-ui_1      ... done
Recreating swagger-multi-file-docker_swagger-watch_1 ... done

http://localhost:8000 で、画面の確認ができます。
ファイルは、好きなエディタで編集してください。

なぜ作成したのか

swaggerは、デフォルトのままでもファイル分割が若干できますが、swagger-uiで確認するとスタイルが崩れたり、エラーが起こったり、使い勝手が悪かったです。

結局、１ファイルにまとめた方が良いと判断したのですが、数千行になるファイルの管理はしたくないので、ファイル分割して編集したものをマージしてくれるものを探しました。

そこで見つけたのが、swagger-mergerでした。
ですが、swagger-mergerには、コマンドライン上から実行してファイルをまとめる機能しかありませんでした。編集する→コマンドラインでマージ→ブラウザを確認を繰り返さなければならず、効率が悪いことに変わりはありません。

ファイルを監視して自動コンパイルしてくれるツールが見つからなかったので、作ることにしました。

使い方

ディレクトリ構造

docs/    # swagger-uiファイルとswagger.ymlの出力先
src/     # 編集するswaggerファイル達
 ├ index.yml
 ├ components/
 └ paths/
swagger-watch/   # ファイル監視システム
docker-compose.yml   # swagger-uiとswagger-watchのコンテナ

Swaggerファイルの編集

Swagger.ymlのエントリーポイントとなっているのは、/src/index.ymlです。

openapi: "3.0.0"
info:
  version: 1.0.0
  title: Swagger Petstore
  license:
    name: MIT
servers:
  - url: http://petstore.swagger.io/v1
paths:
  $ref: './paths/index.yml'
components:
  $ref: './components/index.yml'

$refを使って、外部ファイルを読み込んでいます。
デフォルトでは、/pathsと/componentsを用意していますが、他に分割したい項目がありましたら、同じ書き方で外部ファイルに分割できます。

/src/paths/index.ymlでは、パスのエントリーポイントになっており、各パスごとに分割されたファイルを読み込んでいます。（/componentsも同様）

/pets:
  $ref: './pets.yml'
/pets/{petId}:
  $ref: './pets_petId.yml'

最後に

これで、快適にswaggerを利用することができるようになりました。
さらにswagger.ymlをdocs以下に出力するようにしたので、Githubにリポジトリを置けば、GithubPagesで公開することも可能となっています。

↓ こんな感じ
https://ryoheitomiyama.github.io/swagger-multi-file-docker/

是非利用してみてください〜。

]]>

Mon, 29 Apr 2019 06:53:00 +0000

axiosで、GETリクエストのパラメータにObject型を含むことができたら便利なのにと考えました。

axiosでは、paramsSerializerオプションを設定すると、クエリパラメータをObject型で取得することが可能になります。

オプションを設定せずに、送信すると、、、

例えば、記事を検索するAPIで、キーワードを"hoge"、カテゴリーを"interview", "column"で絞り込みたいときに、以下のようにクエリパラメータを使ってカテゴリーをObject型で指定してリクエストが送ろうとすると・・・

import axios from 'axios';

const url = 'http://localhost/api/posts/search';

const params = {
  word: 'hoge',
  category: {
    $in: ['interview', 'column'],
  },
};

axios.get(url, { params });

結果： categoryがObject型→String型に変換されてしまう。

GET /api/posts/search?word=hoge&category=%7B%22$in%22:[%22interview%22,%22column%22]%7D

> console.log(req.query);
  {
     word: 'hoge',
     category: '{"$in":["interview","column"]}'
  }

こうなると、サーバーサイドで受け取ったあとに、JSON.parseしてObject型に戻さなければならない。

しかし、そんなことをしなくても、axiosにはパラメータにObject型を利用できるオプションがある。

paramsSerializerオプションを設定

import axios from 'axios';
import qs from 'qs';

const url = 'http://localhost/api/posts/search';

const params = {
  word: 'hoge',
  category: {
    $in: ['interview', 'column'],
  },
};

const paramsSerializer = (params) => qs.stringify(params);

axios.get(url, { params, paramsSerializer });

クエリパラメータでは、一度JSON文字列に変換する必要があり、paramsSeriailizerオプションでは、どのような形のJSON文字列に変換するかを設定できます。

今回はJSON文字列に変換するのに、qsというモジュールを使用しました。

実行結果は、以下のようになりました。

GET /api/posts/search?word=hoge&category%5B%24in%5D%5B0%5D=interview&category%5B%24in%5D%5B1%5D=column

> console.log(req.query);
  { word: 'hoge',
    category: { '$in': [ 'interview', 'column' ] }
  }

paramsSeriailizerを指定したことで、API側ではObject型で取得することができます。
このオプジョンを使えば柔軟なAPIを簡単に作成することができそうです。

]]>

Thu, 11 Apr 2019 22:30:00 +0000

Ymobile!のPocketWiFiやUQWiMAX、または縛りなしを謳っている民泊WiFiを検討しているノマドワーカーは多いのではないでしょうか？

しかし、これらのモバイルWiFiは3日間で10GBまでだったり、地方に行くと電波が入らなかったり、地下や室内でも電波が入らなかったり・・・

仕事に使うには少しリスクが高すぎました。（私自身、長野県に移住しフリーランスとして活動していて、UQWiMAXの導入を検討しましたが、電波が入らず泣く泣く諦めました。）

できれば電波や通信制限を気にすることなく、好きな場所で自由に働きたいですよね！

まさに！
ノマドワーカーのための容量無制限モバイルWiFiを見つけてしまいました。
その名も「どんなときもWiFi」！！

容量無制限！ネット使い放題！どこでも使える！

はいはい、どうせ注釈でちっさく規制について書いてあるんでしょ。
詳しくみましたよ。

※1：国内外の通信会社では、ネットワーク品質の維持および公正な電波利用の観点から、著しくネットワークを占有するレベルの大容量通信をされた場合、該当のお客様に対し通信速度を概ね384Kbpsに制限する場合があります。また、違法ダウンロードなどの不正利用の疑いがある場合、ご利用停止を行う場合があります。

ほら、384kbpsに制限するって。これキロバイトにすると、48kB/s。
まともにネットサーフィンもできない速度です。

はぁ、やっぱりね。と思いながらも諦めきれない気持ちがあります。「大容量通信をされた・・・」ってどんくらいなんだろう？
調べてみると口コミには、100GB使おうが200GB使おうが制限がかからないと言っているサイトをちらほらと見かけます。

これは！ついにきたか！

アフィリエイトサイトみたいのは100%信用ができるわけではないので、公式サイトのチャットで質問してみました。（スクショ撮り忘れました。。）

「仕事で使う」「自宅でも使う」「月に200GB超えてしまう」「光回線の代わりに使いたい」という要件をサポートの方に伝えました。とても自信があるようで、「全く問題ございません。」との回答が。1つデメリットとしては、「有線で通信することはできません。」とのことでした。

期待が持てるので、試してみようとすぐに契約しました。（もし通信速度が悪かったり、エリア的に厳しいなどあれば、8日以内に返品しようと思っています。）

というわけで、契約した次の日に届きました。速い！

いざ開封！

中身は少なく、本体・USBケーブル・ストラップのみ

本体もとてもシンプルで、ディスプレイもなく、あるのは、サイドに電源ボタン1つのみ。

気になる通信速度は？

早速起動して、電波状況を確認してみましたが問題なし！（ちなみに我が家は、UQWiMAXが入らないエリアでした。。。）
3キャリアのLTE回線を使っているので、いづれかのキャリアが繋がれば通信可能だとのこと。

さてさて、みなさんが知りたいのは、通信速度ですよね。

結果は以下のようになりました。

下りが26.8Mbps、上りが17.7Mbpsでした。（計測した時間帯は19時半。まぁまぁ回線が混み合う時間帯ではないでしょうか。）
期待していた以上のスピードがでました。

このあとも、何度か試しましたが、上りが4Mbpsと低くなることはありましたが、対して問題ない数値ですね。

ちなみに、フレッツ光回線も計測してみたところ、下りが46.3Mbps、上りが18.2Mbpsでした。
やはり光回線には勝てないですね。ですが、HD動画をストリーミングしてもストレスなく見れる速度はあるといった印象です。

体感スピード

数値は数値なので、実際のところどうなのよってことで、色々試してみました！

YouTube
動画を開くと、すぐに広告が流れ出しました。光回線と差なし。

Web
いろんなサイトをポチポチ。サイト自体はすぐに開くが、画像の読み込みが少し遅い？でもストレスは感じない速度です。
（コンビニのフリーWiFiとかはストレス感じます。）

Googleドライブからファイルをダウンロード（66MB）
約4MB/sで20秒とかからずダウンロード完了。光回線と比べたらやはり遅いですが、こちらもストレスなし！

ビデオ会議
ハングアウトとZoomを使って、４，５人でのビデオ通話を行いましたが、一度も途切れることなく利用できました。

1日仕事とプライベートで利用してみて、スピードに波があるかなと感じました。おそらく格安SIM同様に回線が混雑するタイミングは、やはりどうしても遅くなってしまうのかなと。ただ遅くなったからといって、仕事に支障がでるとか動画が見れなくなるということはありませんでした。

どこでも使える！

ソフトバンク・ドコモ・au、3キャリア対応で「どこでも使える！」と言っていますが、果たしてどうでしょうか！

以前、PocketWiFiやUQWiMAXも使うことができなかったマクドナルドに向かいたいと思います！

安曇野市のスワンガーデン内にあるマクドナルド。周りは田んぼだらけの田舎です。

道中の車内でもYouTubeでミュージックビデオを流しながら電波チェックしましたが、一度も途切れることなく目的地に到着しました。

モバイルWiFiは、移動中だと繋がらないという印象を持っていましたが、どんなときもWiFiは凄いですね！
やはりLTE回線を使っているからなのでしょうか？今回は検証していませんが、トンネル内でももしかしたら利用できるかもしれないですね。

さてさて肝心のマクドナルドでは、いかがでしょうか？

ビンビンです！
もちろん、なにをしても快適に使用することができました！

本当に、どこでも使える！

容量無制限

続いて検証したいのは、本当に容量を気にすることなく使えるのか？

1日で10GBを超えていますが、特に制限されることなく利用することができています。
PocketWiFi・UQWiMAXでしたら、すでに通信制限にかかっているでしょう。

（１日ごとにデータ利用量の表示はリセットされるみたい。）

まだ2日しか利用していないので、絶対に大丈夫とは言えませんが、従来のモバイルWiFiとはひと味違うようです。
もう少し利用して、また経過報告ができたらと思います。

まとめ

通信速度・エリア・速度制限。
仕事用のモバイルWiFiとして利用する上で気になる点を見てきましたが、どんなときもWiFiは満足のいく結果となりました。

自宅でも外出先でも、これ１台で十分なのではないでしょうか。
料金に関しても、どんなときもWiFiは2年間3,280円。2年目以降も3,980円とモバイルWiFiの価格帯とほぼ変わりはありません。
むしろ同じような利用目的を実現しようとすると、今までであれば光回線＋モバイルWiFiの契約が必要となり約8,000円はかかっていたので、とてもお得だと思います。

長野に移住してから、WiFiのあるカフェを見つけられず、自宅での作業が多くなってしまいましたが、このどんなときもWiFiを持っていれば、好きな場所で仕事をすることができそうです！

いままで電波が無くて諦めていた、キャンプ場でノマドワークしてみようかな。

]]>

Tue, 26 Mar 2019 07:12:00 +0000

VeeValidateを使ってチェックボックスを必須項目としてバリデーションする場合以下のように書くかと思います。

input(
  type="checkbox",
  data-vv-name="bool",
  v-validate="'required'",	
)

予想される動作としては、チェックされていなければエラーを表示する。

しかし、実際にはエラーを表示してくれない。

なぜなのか。

checkboxでは値がfalseでもtrueでも、バリデーション結果はtrueになる

先程作成したチェックボックスでバリデーションの実験を行った。

validator.validate('bool', true).then((result) => {
	console.log(result)
});
--> true

validator.validate('bool', false).then((result) => {
	console.log(result)
});
--> true

値がtrueでもfalseでもバリデーション結果がtrueになってしまうのである。

チェックボックスの正しい動作として、チェックがついていなければ、エラーになって欲しい。
でも、このままだとエラーにはならない。

調べました。
「vee-validate boolean」で検索。

解決したissueが出てきました。
https://github.com/baianat/vee-validate/issues/484

あれ？修正されてるみたい！
なんで動かないの？バージョンも最新にしたのに。。。

追記：どうやらv2.2.0での話であって、現在の仕様とは違うみたいです。

requiredルールのソース見てみました。

https://github.com/baianat/vee-validate/blob/master/src/rules/required.js

  // incase a field considers `false` as an empty value like checkboxes.
  if (value === false && invalidateFalse) {
    return false;
  }

ちゃんと用意してくれていました。
どうやらinvalidateFalseを指定をしてあげればいいのですね^^

正しいチェックボックスの例

input(
	type="checkbox",
	data-vv-name="bool",
	v-validate="'required:invalidateFalse'",  // <-- ここ	
)

はい！期待した通りに動作してくれました！

VeeValidateのドキュメントはたまに古いことがあるので、あれ？ってなったらソース見に行くのがいいですね。
とても見やすいソースになっているので、すぐに原因を見つけることができると想いますよ。

]]>

Mon, 25 Mar 2019 21:22:00 +0000

docker run --rm --link mongo_mongodb_1:mongo -v /var/www/mongo/backup/:/backup --network mongo_default mongo:3.2 bash -c 'mongorestore --db ${DATABASE_NAME} --host mongo /backup'

mongo:3.2を起動して、mongo_defaultというネットワーク上にある、mongo_mongodb_1というコンテナに接続する。
ホストの/var/www/mongo/backup/ディレクトリにある、リストアデータを/backupにマウントする。
mongorestoreコマンドを実行して、終了したら、今回起動したコンテナを削除する。

オプションの説明

--rm

--rm

今回走らせるdockerコンテナがexitしたときに、コンテナを削除する

--link

--link mongo_mongodb_1:mongo

（container_name:ALIAS）
起動中のコンテナmongo_mongodb_1にmongoとして接続できるようにしている

docker psしたときに表示されるNAMESを指定している

$ docker ps
CONTAINER ID        IMAGE                                    COMMAND                  CREATED             STATUS                          PORTS                                      NAMES
79412c85455e        mongo-express                            "tini -- node app"       19 hours ago        Up 19 hours                     8081/tcp                                   mongo_mongo-express_1
d2381e8d539c        jrcs/letsencrypt-nginx-proxy-companion   "/bin/bash /app/entr…"   19 hours ago        Up 19 hours                                                                letsencrypt-nginx
ecf74e818b8e        jwilder/nginx-proxy                      "/app/docker-entrypo…"   19 hours ago        Up 19 hours                     0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   nginx-proxy
88085298f1e5        mongo:3.2                                "docker-entrypoint.s…"   41 hours ago        Up 19 hours                     0.0.0.0:27017->27017/tcp                   mongo_mongodb_1

-v

-v /var/www/mongo/backup/:/backup

今回走らせるdockerコンテナ内の/backupにホストの/var/www/mongo/backup/をマウントしている

backupディレクトリの中身は、以下のようになっている

$ ls -l backup/
合計 203496
-rw-r--r-- 1 admin admin     17545  3月 14 10:44 admin-sessions.bson
-rw-r--r-- 1 admin admin       200  3月 14 10:44 admin-sessions.metadata.json
-rw-r--r-- 1 admin admin     12507  3月 14 10:44 authors.bson
.
.
.
-rw-r--r-- 1 admin admin        92  3月 14 10:47 userinfos.metadata.json
-rw-r--r-- 1 admin admin     29198  3月 14 10:47 users.bson
-rw-r--r-- 1 admin admin        88  3月 14 10:47 users.metadata.json

--network

--network mongo_default

もし、mongoが別ネットワーク上で起動している場合は、このオプションで、mongoが起動しているネットワークに接続する

実行コマンド

bash -c 'mongorestore --db ${DATABASE_NAME} --host mongo /backup'

--linkで接続したmongoに、--host mongoで接続して、
${DATABASE_NAME}にリストアしている

確認

バックアップデータをDocker内のMongoDBにリストアできたか確認します。

まずは、MongoDBコンテナ内に入る

$ docker exec -it mongo_mongodb_1 bash
root@88085298f1e5:

mongoシェルに入って、データベースがあるか確認

root@88085298f1e5:/# mongo
MongoDB shell version: 3.2.19
connecting to: test

> show dbs		# データベース一覧を表示する
${DATABASE_NAME}	0.195GB
local         		0.000GB

無事、リストアできていることが確認できました。

あとは、実行コマンドをinit.shのようなシェルスクリプトにしてしまえば、開発環境の構築がラクになりそうですね！

]]>

問題

対処方法

1. asdf のインストールパスを確認

2. シムリンクを再生成

3. 動作確認

まとめ

Next.jsでPolyfillを自動挿入できるか

そもそも、SWCでPolyfillの自動挿入はできる？

Next.jsでenvの設定ができないのか

next.config.jsの出力結果から探る

next-swc-loaderの実装を探す

結論

使われてないiOSシミュレーターを削除してストレージを空ける

使えなくなっているシミュレーターを削除

無駄に多いシミュレーターを削除

Sentryにソースマップが効かない

distオプションを設定することで解決

なにが原因だったのか

結論

Create a project

TypeScriptの設定

ESLint, Prettier

Prettier

trailingComma: 'all'

semi: false

singleQuote: true

ESLint

@typescript-eslint/no-unused-vars

GitHub Actions

node_modulesをキャッシュすることで実行時間を削減

まとめ

Opaqueトークンの更新タイミング

実装方法

いちおうcount()は存在する。

getCountを作成する

データベースの設定でデバッグを有効にする

SQLクエリをログに出力する設定をする

全てのクエリを出力する

特定のクエリのみを確認する

Test機能を追加する

TestDB設定

Drive設定の追加

Testの書き方

テストを追加する

Factoryを作成する

Adonis v4との違い

全体的な書き方の違い

Database Transaction

ApiClient

Response Assert

メール

Factory

ValidatorClassを作っていく

Validator Schemaの書き方

Validationメッセージの書き方

Validatorメッセージの共通化

Authパッケージと設定の追加

api_tokensテーブルを作成

Social認証のためにallyパッケージと設定の追加

Auth middlewareを登録

ログインRouteを作成

Callback用のViewを作っていく

Lucidパッケージと設定の追加

DB接続情報の環境変数を追加

DB接続設定の変更

HealthCheckで接続できているか確認

Migrationファイルを移す

Migrationステータスを修正していく

どうやるか

やったこと

新プロジェクトの作成

データベースに接続できるようにする

認証機能を追加する

Validatorの実装

テスト

機能拡張した点や小技を紹介

開発環境をSSLで起動する

SQLをデバッグする

件数検索できるようにDatabase,ModelにgetCountを追加する

OAT Tokenの期限を更新する

1. `asdf` のインストールパスを確認

`trailingComma: 'all'`

`semi: false`

`singleQuote: true`

`@typescript-eslint/no-unused-vars`