yasutomogのブログ

Software Engineerの雑記

Amplify + Next.js + microCMSのプレビュー環境について

概要 株式会社トライビート| TRIBEAT CO., LTD. では、数年前からJamstackなWebサイトやECサイトの構築を推進(提案)しており、年々こういったご相談を受けることが増えています。 選定技術はそのときの顧客要件によって変わりますが、Amplify、Next.js、m…

Flutterで環境別のGoogleMap API Keyを設定する方法(dart-define-from-file)

概要 FlutterでGoogleMapを利用するとき、API KeyはOS毎に以下のファイルで設定する必要があります。 iOS:ios/Runner/AppDelegate.swift Android:android/app/src/main/AndroidManifest.xml テスト環境と本番環境にそれぞれ発行したGoogleMap API Keyを、 …

PHP(ZTS)のxdebugインストール

概要 同じチームのエンジニアが新しいプロジェクトに参画し、既に作成済みのDocker環境にxdebugを入れようとしたところ、うまく動かないという相談を受けて調査開始 peclコマンドでxdebugをインストールして設定しているが、確かに動かない、、、 結論 Docke…

AmplifyプロジェクトでCognito送信者のLambdaトリガーを設定してみた

概要 Amplifyプロジェクトで普通にAuthを追加してMFA対応していた SMS認証コードとEMail認証コードはそれぞれCognito標準機能を使っていたが、TwilioやSendGridなどの別サービスで送るための対応が必要になった Cognitoから認証コードを送るときに、カスタム…

Next.js on Amplifyの503エラーの続き

概要 yasutomo.hatenablog.com 上記ブログの続き AmplifyでNext.jsをデプロイしたタイミングだと問題なく動くが、あるタイミングからCloud Frontの503エラーになっていた 上記事象が発生するのは、同じAmplifyプロジェクト上で同じソースコードで構築したhos…

Next.js on Amplifyの503エラー

yasutomo.hatenablog.com yasutomo.hatenablog.com また雑多なメモを残しておきます。 概要 Amplify上でNext.jsを動かすときに503エラーが発生 ネットで調べていると色々と情報はでてくるが、自分がハマったケースは大きく2つ Next.jsでISRをしているときに…

AmplifyでNext.jsをSSRしたときのビルドログ出力先

yasutomo.hatenablog.com 昨日、上の記事を書きましたが、Advent Calendarにまだ空きがあるので、雑多なメモを残しておきます。 概要 Amplify環境でNext.jsのアプリケーションを構築 Next.jsでは、ページによってSSG、ISR、SSRを使い分けている 課題 SSRして…

複数のAmplifyプロジェクトを使った開発方法

トライビートという会社の札幌オフィスで開発全般やってます。 気づいたらもう12月ですね。 AWS Amplify Advent Calendar 2021のカレンダー2は、まだ空きが多いので、今年開発していく中で得た知見をメモとして残しておきます。 qiita.com 概要 Amplifyの複…

microCMSでの画面操作とWebhookのパラメータの一覧

概要 microCMSからのWebhookを利用して独自でデータ管理するために作成 コンテンツの状態とユーザー操作によって、typeとstatusがどう変わるかをまとめる 参考サイトではstatusが配列で定義されているため、実際にどういう値が来るか確認 参考サイト documen…

Amplifyで発生したビルドエラーの原因と解決案(Jamstack&Nuxt.js)

概要 Nuxt.jsでSSGしたものをAmplify上でhostingするJamstack構成 GitHubにPushされるとAmplify上でSSGされる流れ Amplifyプロジェクトを新規に構築していく中で、3件連続ビルドエラーを経験したのでまとめる 前提 node.js:v14.17.0 amplify-cli:4.51.1 nu…

eslintとprettier

概要 eslintとprettierをGitコミット時に実行する 環境 node:14.14.0 eslint:7.23.0 eslint-config-prettier:8.1.0 husky:6.0.0 lint-staged:10.5.4 prettier:2.2.1 設定ファイル prettierrc.json { "singleQuote": true } eslintrc.json { "env": { "…

Nuxt.jsでPAY.JPの初期化エラー(既にインスタンス化されています)対策

概要 Nuxt.jsベースでJamstackなECサイトのサンプル実装しているときに、PAY.JPの初期化でエラーが出ることがあったのでメモ PAY.JPを実装するにあたり、payjp(2.0.5)のnode moduleを利用 画面側ではpayjpのCardElementを生成し、トークンを作成して決済用…

Firestoreを使用するFirebase Cloud Functionsをファイル分割した時のエラー対応

概要 Firebase Cloud functionsで、Firestoreを利用している 当初は、index.jsに関数定義していた 複数関数定義する必要があったので、関数ごとにファイル分割した 1回目の関数実行時は特に問題ないが、2回目以降の呼び出し時に以下のエラーが発生 (初期化…

JamstackなECサイトの考察

概要 Jamstack Advent Calendar 2020 - Qiita の22日目の記事です。 株式会社トライビート| TRIBEAT CO., LTD. という会社でBtoCや業務システムのWebアプリケーション構築や運用・保守をしています。 これまでJamstackという言葉が出てくる前から、社内独自…

iOSバージョンとMacBookのSafari開発者ツールについて

概要 iOS実機とMacbookを接続して実機デバッグする中で、開発者ツールがうまく動かない事象が発生 iOS実機のバージョンにより再現が異なることを確認 iOS 12.4.9 問題なし iOS 14.2 MacbookのSafariから実機接続は可能 開発者ツールの[要素]タブから、適当な…

PHPのログライブラリ(monolog)のPull Requestがマージされた

yasutomo.hatenablog.com 2019年に上記ブログで書いてたとおり、monologを使った日付のログローテート処理でうまくいかないことがありPRを投げていた。 PR作成してから2週間程は気にして見てたけど、特に音沙汰なかったため、自分の拙い英語ではやはり相手に…

Google Cloud Platform(Cloud Functions, Cloud PubSub, Cloud Storage, Speech-to-Text, Secret Manager)を使ってPodcast音声データの文字起こし

概要 2020年のコロナ時期から社内コミュニケーションを活性化させたく、社内環境でPodcast配信を開始 Podcastの収録はzoomで録音し、編集などはせずに社内のGoogleサイトへアップする流れ(継続させることに重き置いて、極力手間を掛けないことを意識してい…

XcodeからiOS実機デバッグ時のエラー解消方法

概要 Xcodeから実機デバッグするときに、2種類のXcodeエラーダイアログが表示されたので、それぞれ解決方法を記載 前提 macOS Catalina(10.15.5) Xcode(10.3) iOS(13.5.1) エラー1(Could not locate device support files.) ビルド成功後、実機へ転…

macOS CatalinaにアップグレードしたらCordovaのビルドで失敗するようになった

前提 macOS Sierraからのアップグレードした 念のためTime Machineでバックアップ取ってたが、ファイルシステムの違いから復元が簡単ではなくなった OSがアップグレードされることで、Xcodeのバージョンアップも必要となった(11.4をインストール) Command …

Nuxt.js (generate)とNetlify Forms (recaptcha)の問題と一時的な解決案

概要 Nuxt.jsのプロジェクトでNetlify Formsを利用して、簡単なForm画面とrecaptcha機能を試したときに、ハマった点をメモ docs.netlify.com 前提 nuxt.js (v2.11.0) 「npx create-nuxt-app」で生成したプロジェクトをNetlify上にデプロイ NetlifyでGitHubの…

受託系システム開発会社がリモートでアジャイル開発したふりかえり

概要 Blogについて 「アジャイル開発 Advent Calendar 2019」の20日目 アジャイルやスクラムを取り入れつつ、システム開発に対してアプローチした「ふりかえり」 qiita.com プロジェクトについて クライアント社内で利用する業務システムの開発(数年継続し…

monolog(RotatingFileHandler)のログ出力エラーに対してプルリク作成してみた

概要 Lumenを使ったAPIサーバで日別にログ出力している(日付ごとにディレクトリを分けてログ出力している) 数年間のシステム運用をしている中で、特に問題なくログ出力できていた ある日、ログ出力できないというエラーが発生したので、調査内容をまとめる…

OAuth2対応したPWAをiOSでホーム画面に追加すると認証が厳しい

概要 社内アプリをPWAで構築したときのはなし 社内の諸々はGoogleアカウントで管理しているので、認証はGoogleのOAuth2を使用 PWAはNuxt.jsを使って作成し、APIはPHPのLaravel(社内サイトがLaravelを使ってたので流用)を使って作成 Google OAuth 2.0 認証…

PHPでGuzzleHttpを使用して並列処理(同時実行数の制御)の確認

概要 PHPでHTTP通信の並列処理をする curl_multiではなくGuzzleHttpを使って試す GuzzleHttpは並列実行が元々用意されている 知りたかったこと GuzzleHttpでPoolの使用時に設定するconcurrency(並列処理数)の制御 具体的には、全部で10リクエスト投げる処…

Azure Data Studioの設定方法(SQLの実行計画)

概要 Azure SQL Databaseを使っていて、Azure Data Studio(MSが提供しているクライアントツール)を試してみた 実行計画のところだけ、ハマったのでメモ バージョン OS:10.12.6 Azure Data Stduio:1.1.3 インストール 以下のサイトからダウンロードしてイ…

Nuxt.jsの開発サーバでHot Module Reloading (HMR)のエラー対策

概要 Nuxt.jsのテンプレートを使ったプロジェクト 「yarn run dev」コマンドで開発サーバ起動(デフォルトの3000ポート) コンソールログに「hot-update.json timed out」というエラー出力 ホットリローディングができない バージョン node:10.12.0 nuxt.js…

Nuxt.jsでPWAをGitHub Pagesにコマンドでデプロイする流れ

概要 Nuxt.jsのテンプレートとPWAモジュールを使用して作成したアプリをGitHub Pagesにコマンドラインでデプロイする方法のまとめ バージョン node:10.12.0 nuxt.js:2.0.0 nuxtjs/pwa:2.6.0 push-dir:0.4.1 vue-cli:2.9.6 yarn:1.10.1 参考記事 https:…

GitHub Pagesでアンダーバーのディレクトリ対応

概要 Nuxt.jsで構築したサイト(yarn run generateで生成したdist直下)をGitHub Pagesに上げると、_nuxtディレクトリ内のjsファイルなどが404になる GitHub PagesではJekyllで処理されるため、アンダーバー付きディレクトリなどが正常に読み込まれない 対応…

AjaxのCSVダウンロード(Excelでの文字化け対応)

概要 既に色々なところであがっているトピックなので今更だが、Excelの特定バージョンでのみ文字化けするということがあったので、対策をメモ 一般的にCSVをExcelで開く時の文字化け対策としては以下2つ。 CSVの文字コードをShift_JISで作成する CSVの文字コ…

Lumen(Laravel)のQueue管理クラス(DB)の拡張方法

概要 Lumenを使用したWebアプリを運用している中で、Queue(DB)を使用 DBは、Azure SQL Databaseを使用 Azure SQL Databaseでは一時的に負荷が上がると、強制的に接続を切断しDB側の再構成が走る DB接続をキャッシュしたり、コネクションプーリングなどを使…