新しいサイトの開発でNuxtJS + Composition API + TypeScriptで快適な開発をしてますがuseAsyncは、サーバー、クライアント両方で実行することもあり、理解にちょっと時間がかかっていろいろハマったのでメモ。基本的にちゃんとドキュメント通りに使えば大丈…

NuxtJSでSSR + SPAでコンテンツをaxiosで取得するよくあるページを作っていたら、リンクを連打するとこんな感じになった。 言葉で説明するの大変なのでブログ用にTwitterに動画あげた。NuxtJSなどのSPA + Ajaxでコンテンツを非同期取得してるやつで、ページ…

AWSのECSを使った環境構築、↓この記事からの続きで、 uyamazak.hatenablog.com Laravelの php artisan schedule:runを実行するためにタスクのスケジューリングを使ってみることに。新規作成はコンソール上でなんなくできたものの、CircleCIからの更新方法が…

優先度が高い仕事が落ち着いてきたため、ずっとやりたかった本番環境コンテナ化に着手しました。たぶんお休みで全部忘れるので社内に説明用も兼ねてメモ。下記の記事のように現在のシニアジョブに入社してすぐ、開発環境はDocker化していました。シニアジョ…

趣味で開発しているPuppeteerを使ったPDFサーバーhc-pdf-serverで一部分をnpmにパッケージとして公開しています。これ↓ www.npmjs.com FastifyからPuppeteerを通して、Headless ChromeのPageを使用できるプラグインです。 名前の通り速いFastifyの長所を殺す…

シニアジョブのオフィスの引越にあたり、セキュリティの面からも来客の記録システムが必要になりました。最初すでにいろんな会社が作ってると思ったので、それ使えばいいじゃんと思いましたが、仕様を聞くとたしかに超簡易的なものなのでまあいいかというこ…

経緯 シニアジョブの人材管理システムで、もしもの時のセキュリティのために、すべての操作ログを記録することにしました。 Dataflowのテンプレートを使うことでちょっとのコードでできてしまったので、コードにならない部分の記録をするため雑にメモ。 記事…

NuxtJSで使った社内用アプリをCloud BuildでApp Engineに自動デプロイしようとしたら2時間くらいハマったのでメモ。GitHub Actionsもいいけど、やっぱGCP内で完結させたいなぁということでCloud Build使いました。GitHub Actionsと比べるとユーザーと情報が…

社内システムで最初、JavaScriptでブラウザからAPI叩こうとしたら、おそらくChatwork API側がPreflight requestに対応してないのが原因でCORSエラーが出て送れない・・・。 そのためGASのウェブアプリ側で送るようにしました。developer.mozilla.org UrlFetc…

シニアジョブで簡単な来客記録システムを作りあたり、Google Workspaceを使っているので、 NuxtJSでUI作って、Google スプレッドシートとGASでいけるんじゃね？ と思ってやってみたら、ちょっとハマったものの出来たのでメモ。 ※画面は開発中のものです（圧…

結論 mainに入ってるけどまだリリースされてないだけだった。 リリースちゃんと読もう。 TypeScriptでPuppeteerガンガン使いましょう。 経緯 Puppeteerはv6でTypeScriptの型がビルドインになり、@types/puppeteerが必要なくなりました・・・だと良かったんで…

「JavaScript 小数点切り捨て」で検索するとMath.floor()とparseInt()使う記事が出てきてよろしくないと思ったのでメモ。 結論 小数点以下を削除したいのならMath.trunc()使え。負の時は思ってたのと違うかも。 小数点以下切り下げならMath.floor() 正の値の…

このhc-pdf-serverのレポジトリで、ユニットテストの他に、Dockerイメージのビルドが成功するかどうかを確認したかった。 以前ファイル名などを変えた際に、テストは通るがdocker buildできない状況が発生していて気づけなかったことがある。 github.com普通…

業務でとある業界のいわゆるアタックリストが必要になり、複数のサイトをスクレイピングしてCSVにしました。スクレイピング処理には、WEBブラウザ(Chrome or Chromium)を操るPuppeteerを使いました。https://pptr.dev/その過程で得たことをメモ。 スクレイピ…

2020/1/14よりシニアジョブに入ったのでほぼ1年。ざっと振り返り。 GitHubを仕事で使えるようになったので草もたくさん生やせました。 3行 いろいろやった 2021年はサウナ行きたい アズールレーン友達募集中 シニアジョブのお仕事 1ヶ月のときに書いたのはこ…

BigQueryでGROUP BYした項目を文字列結合したいとき、レガシーSQLでは`GROUP_CONCAT`を使ってました。標準SQLにはなく、検索しても見つけづらかったのでメモ。 結論 STRING_AGGが使えます。 STRING_AGG([DISTINCT] expression [, delimiter] [ORDER BY key […

業務で年末調整処理の一部、源泉徴収の給与所得控除後の給与等の計算を実装したけど いろいろつらかったことをメモする。主に行政資料への不満。従業員として出すだけでも面倒な年末調整ですが、もちろんその背後で行われている処理はもっと面倒です。www.nt…

これまでエンジニア職の採用面接を適当にやりすぎていて、確認し忘れが出てしまうのが良くない。 採用基準とまではいけないけど、最低限確認したいこととをまとめたい。会社のエンジニア採用ページ。私が保守してるので内容は大丈夫なはず。 corp.senior-job…

関数の引数や、クラスのコンストラクタとかでオプション系の値をオブジェクトで受け取るときに、いい感じに省略可能にする方法をよく忘れるのでメモ。 interface HogeFunctionOptions { optionFoo: string optionBar: string optionBuzz: string } const def…

動画サンプル https://youtu.be/3t2l1OH00lU youtu.be 声はまだない。 作ってるやつ（スマホ非対応） uyamazak.github.io 使い方 STARTしていろんな操作して録画、STOPすると出てくるDOWNLOADボタンで落とせます。UIまじで並べただけ。 経緯 架空のVtuberを…

【お約束】 投稿内容は個人の見解であり、所属する（していた）組織の公式見解ではありません。名前：uyamazak（昔いた会社で上司が開発用Linuxサーバーのユーザー名に「yuyamazaki」が長いので勝手に作ってくれた。読み方わからないけどウヤマザク）高校あ…

一行 ESlint入れてたつもりがJSは1/3、CSSは2/3を削除できた 一行 そもそも？ ESlint, Prettierインストール eslintの設定 .prettierrc lintコマンド追加 実行 JavaScript, CSSの容量削減 使ってないパッケージ削除で容量削減 fontawesomeの読み込み最適化 l…

前回↓につづきスプレッドシートの処理。 uyamazak.hatenablog.com前回は1つのJSONだからメッセージに出してコピペで良かった。でも今回は都道府県ごとに数百文字のテキストがあり、すべてを１ファイルにまとめてしまうと100KB近くいってしまい、Ajaxでの取得…

シニアジョブで、サイトのコンテンツとして年代別就業状況の統計データを使うためにいろいろやったので流れをメモ。データは政府の政府統計ポータルサイトe-Statのものを使いました。リンクは都道府県別のもの。 www.e-stat.go.jp利用の際は出典の明記が必要…

7/1に公開したシニアタイムズでは、NuxtJSとamp-moduleを使ってAMP対応を行いました。でもmicroCMSのリッチテキストで保存している記事本文は自分で対応する必要があります。基本的に生成されるHTMLはきれいなのでほとんど問題ないのですが、imgタグだけはam…

NuxtJS + AMPモジュールでGoogle Analyticsのタグを貼る際、ちょっと手コヅったのでメモ。GitHub - nuxt-community/amp-module: AMP Module for Nuxt このページを参考に AMP のグローバル サイトタグ | グローバル サイトタグ（gtag.js） | Google Develope…

2020/7/1に公開しました↓。いわゆるオウンドメディア的なもの。ここでは忘れないうちに技術的なことだけ書いておきます。 senior-job.co.jp見た感じ普通のブログですが、裏側はタイトルどおり今どきな技術で攻められるだけ攻めきった感あります。そのおかげ…

ちょっと無理やりなややこしいことをしたのでその経緯を含めてメモ。設定でできるようになるといいな。NuxtJSでAMP対応をしてますが、router.baseを設定しサブディレクトリに公開しているため、headにbaseタグが入ってしまい、これがAMPテストツールのエラー…

デザイナーさんが作ったHTML + CSSをNuxtJS + TypeScript化していましたが、カルーセルにslickというライブラリが使われていました。レスポンシブにも対応していて、非常に高機能です。kenwheeler.github.io しかし、jQueryに依存しており、メンテナンス性や…

デフォルトでus-central1で動くFirebase Functionsですが、やっぱりネットワークでレスポンス遅くなるので日本でも動かしたいなと思ってやってみたら下記のエラーが起きたのでメモ。Cloud Functions のロケーション | Firebase functions.region() でカンマ…