はてなブックマーク

はじめに GCPのPubSubを触ってみたのでそれの備忘録です。 PubSubの概要ですが、GCPSketchnoteのリポジトリでとても分かりやすく図に纏められていました。 （他のサービスも分かりやすかったのです） ざっとした流れは下記のようになります。 パブリッシャーがトピックにメッセージを送信 トピックは届いたメッセージをサブスクリプションに配信 サブスクリプションは届いたメッセージを管理し、サブスクライバーにメッセージを送る push型の場合は、指定したエンドポイントにメッセージを送信 pull型の場合は、アプリケーションからメッセージを受信する 今回は下記の構成でPubSubの動きを確認してみました。 構築 TOPICの作成 最初に②のトピックを作成します。今回はgcloudで作成します。 gcloud pubsub topics create topic-test cloudf

経緯 画像を加工したのち、DBや、ストレージに保存したい ということで、バックエンドにフォームを送る際、Fileにしないといけなかった。 画像加工後はbase64になっているのでそれをFileクラスでラップするにはどうすればいいかで少し詰まったので備忘録。 結論から言うと、一度バイナリにしないといけなく、base64 => バイナリへの作業が必要になった。 画像をbase64にする <div> <input type='file' onchange='convertToBase64()'> <img src='' /> </div> function convertToBase64 () { const file = document.querySelector('input[type=file]').files[0] const preview = document.querySelec

はじめに Cloud Tasksで下記を試したときの備忘録です。 cloud taskを動かす リトライ処理の確認 Cloud Tasksとは 完全マネージド型のメッセージキューサービスです。 大量のタスクの分散実行や配信管理、リトライ処理を行うことが可能です。(違いは結構ありますが、)AWSのSQSと似たようなサービスです。 以下はサービスのイメージをまとめてみました。 まず最初に用語の確認をしておきます。 用語整理 タスク 1処理を実行するためのメッセージ キュー 複数のタスクを管理するもの タスクハンドラ(ワーカー) タスクを処理するサービス 下記は全体の流れです。 タスク作成のアプリケーションがタスクを作製してキューに送る キューは設定されたタスクを管理して、キューの設定に従いタスクハンドラーに配信(dispatch)する タスクハンドラーは処理を実行する 実行するハンドラを指定す

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }

はじめに Cloud Loggingを使用しているのですが、クエリの書き方が分からず苦戦したので公式ドキュメントを読みながら確認した内容を書いています。 ローカル環境からログを送信 こちらの公式ドキュメントに載っていいます。 今回は、nodeのwinstonを使ってアップロードしてみました。 // Imports the Google Cloud client library for Winston import { LoggingWinston } from '@google-cloud/logging-winston'; import winston from 'winston'; // Creates a client const loggingWinston = new LoggingWinston({ projectId: 'your-project-id', keyFilena

画像をバックエンドに送る前にリサイズしたい時があると思います。 サーバー側でリサイズ処理を行うのは、それだけでもアップロード時のネットワークの負荷などもあって あまりよろしくないことがあります。 なので、フロント側、つまりJavaScriptでリサイズしましょうという考え。 流れ 画像読み込む canvasを作成 好きな大きさを指定 画像をcanvasに貼り付ける(位置や、canvas内の画像の大きさなども指定する) DataURL(文字列化)にする このような流れになりますが、流れを見るより処理を見た方が分かりやすいかと思います。 リサイズ処理 画像読み込み 画像の読み込みを行います。 const inputElement = document.getElementById("input"); inputElement.addEventListener("change", roadImg

この記事は良かった点を書いてるだけなので 導入方法や細かい設定を書いている訳ではないです。 導入などは最後にある参考サイトを参照してください。 経緯 仕事のパソコンをWindowsからMacに変えました。（個人のパソコンは元からMacです。） そこでターミナルを使うに当たって、どうせなら仕事の効率が上がるようなソフトウェアがあったら使ってみたいなと思い探してみると、どうもtmuxというものが便利だと発見。 試しに使ってみて1週間経ったのでその感想と布教を兼ねて書く事にしました。 （布教という時点でどハマりしてるというネタバレ） 感想 結論から言うと、めちゃくちゃ便利でした。 むしろ今までなぜ使ってこなかったのか後悔したくらいでした。 そして何より、客観的に見てターミナルがカッコよく見える！ カッコよく見えるだけで使い始めて良かったと思えるレベルですが 実際にどういう点が良かったか、まとめて

前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =

はじめに この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。 こちらの本を紹介したいなという、ただの布教記事です。 自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが こちらの本を読んで、まだまだ序の口だったのだなと感じました。 もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。 ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので そういった人にはとても有益な本になるのではないかと思います。 こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。 本の構成について ツールの紹介 から始まります。 Github React Dev Tools Node などの説明があります。 JavaScri

はじめに IAMを触る時、「ロールとポリシーの関係ってなんだっけ？」、「サービスアカウントってなんだっけ？」と毎回調べて雰囲気のまま使っていました。 今回は、再度勉強しなおしてCloud IAMについて纏めてみました。 Cloud IAMとは Cloud IAMとは「誰（ID）」が「どのリソースに対して」「どのようなアクセス権（ロール）」を持つかを定義することにより、アクセス制御を管理できます。 例えば、下記のようなこと設定をすることがで、適切なアクセル管理をすることが可能です。 「開発者A」に「Cloud FunctionsとPub Sub」の「閲覧と編集」を行える 「Cloud Functionsの関数A」は「Cloud Strage」の「作成」のみを行える Cloud IAMの概念 公式ドキュメンに正しく詳細な説明があるので、こちらも参照いただければです。 ここでは自分が理解したもの

はじめに eslintで現在適応されているルール一覧を確認したいことがありました。 例えば、下記のような設定になっている時、どのruleが適応されているかを確認したいです。 extends: [ 'airbnb-base', 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'prettier' ], rules: { 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': ['error'], 'no-inner-declarations': 'off', }, 個別のベージで確認する方法(airbnb-baseだとここをみる)もありそうですが結構大変です。 今回、現在適応されているr

ソフトウェア設計について、YAGNIやSOLIDなど多くの原則・法則があることが知られていますが、その解釈にはぶれが存在することが多いです。そこで、特に有名なものあるいは有用と感じることが多いものをいくつかピックアップして、その解釈やトレードオフについてまとめてみました。 注意としては、SOLIDが入ってることからわかる通り、主にOOPに関する文脈になります。また、各原則の定義については概ね知っている前提で書いているのであまり初学者向けの記事ではないかもしれませんのでご承知おきください。 YAGNI（You ain't gonna need it.） YAGNIは、予測による実装が実際に役立つことは少ないという経験則から生まれた原則です。 一般にオーバーエンジニアリングが利益をもたらすケースは限定的で、どちらかというとプロジェクトに害を与えることが多いとされています。YAGNIは日々状況の

TDDに関する議論には多くの混乱が見られます。現在は議論が落ち着いているようですが、あまり情報がまとまっていないのでTDDの導入にいまいち踏み切れない方も多くいることでしょう。そこで、そもそものTDDの定義から関連する議論の要点まで、TDDに関連する情報を整理しました。 TDDの定義としては、 「TDDはテストファーストの上に RED / GREEN / REFACTOR のサイクルによる設計・実装手法を加えた開発手法である」 という表現で大きな異論はないかと思われます。 TDDの効果に関しては、TDDの実践によって以下のようなことが起こると言われています。 十分な量の自動テストが存在する状態になり、以下のような恩恵を受けることができる エラーの発見や防止がしやすくなる → プロダクトの品質の指標の一つである不具合発生率の低下に貢献する リファクタリングのリスクを減らし、リファクタリングを

はじめに GCPのWorkflowsを触ってみたので備忘録です。 この記事に書いていることは下記になります。 ワークフローを動かしかた メインとなるワークフロー構文を確認 cloudfunctionsと繋いで確認 GCP Workflowsとは GCPのWorkflowsはAPI呼び出しやCloud Functions, Cloud Runなどのサービスを組み合わせてワークフローを構築することができます。 AWSのStep Functionsと似たようなサービスです。(触ってみてはStep Functionsのほうができることが多いと思いました。) マイクロサービスで設計されているとき、複数のサービスに跨って処理を行うことがあると思います。 その場合はイベント処理等を使用すると思いますが、使用するのリソースが多くなればなるほど全体のフローを把握することは大変になります。 例えば次のようにC