Reactで作ったWebアプリケーションではルーティングの管理や開発に、react-routerを使用することが一般的かと思います。 今回は、react-routerを使ったWebアプリケーションでのアプリ内遷移の方法をまとめます。 react-routerを使ったアプリ内遷移方法 まず…

しばらくいじっていないcreate-react-appで作ったフロントエンドのアプリケーションをローカル起動させたらこんなエラーが。 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (intern…

SpringやSpring Bootでサーバアプリケーションを作成すると認証を作る際にSpring Securityを利用することが多いかと思います。 自分も3, 4年前ぐらいにけっこう使っていて、0から設計・開発したアプリケーションにも使っていたのに完全に忘れていましたw ラ…

localhostでフロントエンドアプリケーションの認証の動作確認をしている際に、上のキャプチャのダイアログが出てきた。 パスワードを変更してください サイトまたはアプリでのデータ侵害により、パスワード情報が漏洩しました。 localhost:3000 のパスワード…

CircleCIでの環境変数の設定方法は複数あります。 今回は、複数ある環境変数の設定のやり方を確認し、環境変数名が被った際にどのやり方で設定した環境変数が優先されるかをまとめます。 (記事作成中に公式で良さげなまとまったページを見つけたので、基本的…

create-react-appではテストランナーにjestが利用されています。 create-react-app.dev 今回、uuidを利用するコンポーネントでスナップショットテストを書く際に少し調べたのでまとめます。 jestjs.io こちらのissueでいろいろ話されていますが、jest.mockを…

数年ぶりにcreate-react-appでフロントエンドのアプリを開発したんですが、Sassの入れ方がカンタンになってたのでまとめます。 結論ですが、node-sassを入れて、scssファイルを作り、読み込ませたいコンポーネントに直接importしてあげるだけです。 執筆時の…

GAS(Google Apps Script)でスプレッドシートの対象セルの関数・計算式の取得方法をまとめます。 結論ですが、Rangeクラスに生えているgetFormula()を使ってあげればOK。単純に値だけ取りたいときはgetValue()。 Rangeで取得したセル範囲の左上のセルを対象に…

Auth0はWebアプリケーションやモバイル、Web APIで利用できる認証・認可の仕組みを提供するクラウドサービスです。 Identity as a Service（IDaaS）というやつ。 と思ったら、トライアルページにこんなことが書かれていた。(AaaS？笑) Auth0を利用することで…

自作でRPAを開発する際に、よく使われるpyautogui。 クロスプラットフォームで動作するGUIオートメーションのPythonモジュールです。 「ある箇所をダブルクリックする」「キーボードでEnterキーを押す」など人間がPCを触って行うGUI操作と近いことをプログラ…

こんな感じでターミナルからVisual Studio Codeを起動できるようになります。 $ code // 起動 $ code ./PROJECT_ROOT // プロジェクトを指定して起動 Visual Studio Codeを起動させて、メニューの「View」から「Command Palette...」を選択します。 「code c…

puppeteerはChromiumブラウザをAPIで制御するnode.jsのライブラリです。 デフォルトでheadlessモードで動作し、Cloud Functionsなどのサーバレス環境で動作させることもでき、簡単にクローラAPIの開発が可能です。ブラウザ操作の自動化では、しばしばフォー…

Slackの特定のチャネルにAPI経由でメッセージを送るカンタンな仕組みをSlackではIncoming Webhooksと呼びます。 このIncoming Webhooksは、2020年現在、2通りのやり方があります。旧方式と新方式です。旧方式は、非推奨です。 下記の公式ページにも明確にdep…

先日、時限的なキャンペーンを打った際にLPのOGPを変更したんですが、全然反映されず「あら？」となりました。 OGPは各サービス側でキャッシュしており、「変更したよ！」というのをこちら側から知らせてあげなくちゃなりません。 その際にやった対応をまと…

ブログの投稿記事数がある程度溜まったので、Google AdSenseに申請してみました。 ちなみに申請日は2020年4月18日(土)。翌日には審査結果が返ってきました。 タイトルのとおり、Google AdSenseの審査は新型コロナウイルスの影響で全面ストップしているようで…

どんな背景からどんな問題が起きたか あるアプリケーションの開発。 サーバサイドの都合で、一時保存APIが用意できない状況。 ただ、それなりに入力量が多いフォームでユーザーが途中まで入力しても離脱してまた再入力するケースを救いたい。上記の状況を解…

Macを使っている方は、catalinaからデフォルトシェルがbashからzshに変わりましたね。（今更感ありますが...） 後述しますが、訳あってmojaveからcatalinaにアップグレードを数ヶ月前に行いました。 ターミナルアプリ(自分はiTerm2)を起動する度に The defau…

簡易に手順とハマりどころをまとめておく。過去に手動で作ってしまったGCPのCloud SQLのインスタンスやDB設定、ユーザー設定があったのでそれをterraform管理下にした話。まず、公式にあるとおり、現在のバージョン(記事執筆時点でのlatestはv0.11.13)ではst…

GCP環境に手動で作ってしまったリソースをterraform管理に入れようと、terraform importしてぶつかったエラー。 今回いじったterraformのproviderには `google`, `kubernetes` を入れている。k8sの設定が理由で何やら怒られる。 Error: Provider "kubernetes…

ちょっと大きめのファイルをアップロードしようとすると413が返却されることがあります。 nginxはデフォルトでアップロードサイズが制限されていて、1Mがデフォルトになっています。 （ちょっとサイズのあるPDFは1Mを超えるのでデフォルト厳しすぎないかと思…

Webサービスを運営しているとサービス紹介などが載っているランディングページがちゃんとユーザーに読まれているか、気になることがあると思います。 コンテンツページの先に遷移させたい画面があるのなら遷移率で見ればそのコンテンツページの貢献度がわか…

Re:dashでメトリクスを作成する際に日別、週別、月別にデータの推移を見たく、いろいろ触ってみたので残しておく。データ分析対象のアプリケーションのDBはMySQLを使用している。 また、adwordsで使われている集客コストをspread sheetに吐き出して、Re:dash…

結論ですがmysqlとSQLiteの週単位に変換するための関数のズレが原因でした。週毎のCACをRe:dashで見れるようにしようとした際にハマりました。 CACはCost Acquisition Customerの略で「1顧客の獲得にいくらかかったか」を表す数字です。 この数字を週毎にチ…

cloud functions × puppeteer × Google Apps Scriptで定期実行されるクローラを作ってみます。 今回は毎週月曜に今週の金曜ロードショーをslackで通知させるようにしてみます。cloud functionsはGCPで利用できるAWSのlumbdaのようなもので、サーバーやランタ…

まずはspread sheetにgoogle adwordsの日毎のコストデータを吐き出させます。spread sheetのGoogle Adsというアドオンを使うのがシンプルで楽そうだなーと思い、試してみました。 実際にシンプルにadwordsのレポートデータを引っ張ってこれるんですが都度手…

QueryResultを使った週単位のデータ集計をしようとしたときの話。 分析対象のアプリのDBはmysqlを使っているのでその流れでdate_formatを使って書いたらエラーになった。mysqlの関数使えないのかー。どうやるんだー。となって公式から漁る。 が、見つからず…

タイトルのとおりの事象が発生。IE11でreact, redux-sagaの構成のフロントアプリケーションで外部アプリケーションからのwindow.location.hrefでの遷移時になぜか最新の情報が画面にレンダリングされない、、、というところから調査スタート。 safari, chrom…

GCPのアカウントで認証してproxy経由で接続させます。gcloudコマンドを使うのでインストールしてない方はこちらを参考に。 GCPのgcloudコマンドを公式に沿ってインストール - FFFT Cloud SQL Admin APIを利用するプロジェクトで有効にします。 Google Cloud …

Cloud Functionsで関数を作成するとデフォルトで下記の関数コードが生成されます。 exports.helloWorld = (req, res) => { let message = req.query.message || req.body.message || 'Hello World!'; res.status(200).send(message); };引数で渡されるreqでh…

まずはCloud Storageに適当なバケットを作成します。 作ったバケットに適当なファイルを入れます。自分は「test-20180903」というバケットに中身が「Hello,world」の「sample」というファイルを入れてます。 ※Cloud Storageのバケット名は全世界で未使用でな…