postMessageの限界を調査

Published 2023/01/27

はじめまして、Arganoのジェソンです。 postMessageを利用する機会があったので、パフォーマンスについて調べて見ました。 postMessage란? postMessage는 크로스 도큐먼트 메세징(Cross Document Messaging)이라고도 불립니다. 일반적으로 스크립트는 same-origin policy에 의해 protocol, domain, port 중 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없습니다. 하지만 이름에서도 알 수 있듯이 postMessage()를 사용하면 origin이 다른 윈도우와 통신할 수 있습니다. 사용방법은 아래와 같습니다. 송신방법 window.postMessage(data, targetOrigin, [transfer]); data: 다른 스크립트에 전달할 메세지(data는 string형태로만 전달된다.) targetOrigin: 타겟 도메인, 즉 메세지를 수신받는 도메인을 지정한다. 대상이 특정 도메인이 아니라면 "*"료 지정한다. transfer 객체를 전송할 수 있다.

Continue reading ↦

バリデーションライブラリZodの紹介

Published 2023/01/20

はじめまして、Arganoの池田です。 本記事ではバリデーションライブラリZodについて紹介します。 Zod とは ZodはTypeScript-firstなスキーマ定義とバリデーションを提供するライブラリです。Zodは他のバリデーションライブラリと比べてTypescriptとの相性が非常に良く、依存パッケージが無いことやバンドルサイズが小さいといった特徴があります。Zodの利用方法などについて紹介しながらTypescriptとの相性の良さについて見ていきます。 基本動作 TypescriptでZodを利用する際の一例を以下に示します。Zodのスキーマ定義は例として以下のように記述することができます。 import { z } from 'zod' const user = z.object({ name: z.string(), email: z.string().email(), }) Zodではスキーマ定義からバリデーションのインターフェースをTypeScript型で生成することができます。スキーマ定義がより複雑化した際にこれらの型定義に悩まされなくて良いという点で非常に便利な機能でTypescriptとの相性の良さが表れています。 type UserInput = z.input<typeof user> type UserOutput = z.output<typeof user> バリデーションはuser.parseによって実行され上記の型情報にある通り入力はUserOutput型にパースされて帰ってきます。また、バリデーション失敗時にはエラーの詳細を含んだZodErrorオブジェクトがthrowされます。 try { const parsed = user.parse({ name: "name", email: "email", }) } catch (e) { if (instanceof ZodError) { console.log(e) // ZodError: [ // { // "validation": "email", // "code": "invalid_string", // "message": "Invalid email", // "path": [ // "email" // ] // } // ] } } 利用例 基本的な使い方は以上です。次はより複雑なスキーマを定義してみます。以下のようなユーザー情報がフォームに入力され、これを元に入力を検証しながら出力を適当な型に変換するような場合を想定します。

Continue reading ↦

Cloud Funcitons (2nd gen) で利用できるフォント一覧

Published 2022/12/17

Arganoの渡部（@nabeix）です。 Cloud Funcitons (2nd gen) で利用できるフォントを調べました。 Node.js 16のランタイムで調査しましたが、他のランタイムでも同じだと思われます。 /usr/share/fonts/truetype/tlwg/TlwgTypo-Bold.ttf: Tlwg Typo:style=Bold /usr/share/fonts/truetype/tlwg/TlwgTypewriter-BoldOblique.ttf: Tlwg Typewriter:style=Bold Oblique /usr/share/fonts/truetype/tlwg/Garuda.ttf: Garuda:style=Regular /usr/share/fonts/truetype/freefont/FreeSansBold.ttf: FreeSans:style=Bold,получерен,negreta,tučné,fed,Fett,Έντονα,Negrita,Lihavoitu,Gras,Félkövér,Grassetto,Vet,Halvfet,Pogrubiony,Negrito,gros,Полужирный,Fet,Kalın,huruf tebal,жирний,Krepko,treknraksts,pusjuodis,đậm,Lodia,धृष्ट /usr/share/fonts/truetype/freefont/FreeSans.ttf: FreeSans:style=Regular,нормален,Normal,obyčejné,Mittel,µεσαία,Normaali,Normál,Medio,Gemiddeld,Odmiana Zwykła,Обычный,Normálne,menengah,прямій,Navadno,vidējs,normalusis,vừa,Arrunta,सामान्य /usr/share/fonts/truetype/liberation/LiberationSansNarrow-Italic.ttf: Liberation Sans Narrow:style=Italic /usr/share/fonts/type1/gsfonts/n021024l.pfb: Nimbus Roman No9 L:style=Medium Italic /usr/share/fonts/truetype/kacst/KacstFarsi.ttf: KacstFarsi:style=Medium /usr/share/fonts/truetype/freefont/FreeSerifBoldItalic.ttf: FreeSerif:style=Bold Italic,получерен курсивен,negreta cursiva,tučné kurzíva,fed kursiv,Fett-Kursiv,Negrita Cursiva,Lihavoitu Kursivoi,Gras Italique,Félkövér dőlt,Grassetto Corsivo,Vet Cursief,Halvfet Kursiv,Pogrubiona kursywa,Negrito Itálico,gros cursiv,Обычный Курсив,Tučná kurzíva,Fet Kursiv,ตัวเอียงหนา,Kalın İtalik,huruf tebal kursif,жирний курсив,Polkrepko Pežeče,treknais kursīvs,pusjuodis kursyvas,nghiêng đậm,Lodi etzana,धृष्ट-तिरछा /usr/share/fonts/opentype/ipafont-mincho/ipam.ttf: IPAMincho,IPA明朝:style=Regular /usr/share/fonts/truetype/kacst/mry_KacstQurn.ttf: mry_KacstQurn:style=Regular /usr/share/fonts/truetype/tlwg/TlwgTypist.ttf: Tlwg Typist:style=Regular /usr/share/fonts/truetype/kacst-one/KacstOne-Bold.

Continue reading ↦

Cloud Run Jobs

Published 2022/12/15

はじめまして、Arganoの渡部（@nabeix）です。 Arganoの技術ブログ第一弾としてGCPのCloud Run Jobsの機能と、実運用する際のちょっとしたポイントを解説したいと思います。 ※ 記事執筆時点でpre-GAEとして公開している機能を含みます Cloud Run Jobs とは Cloud Run JobsとはGCPのコンテナ実行サービスであるCloud Runのジョブ実行環境です。 Cloud RunはWebサーバの実行環境のみでしたが、このCloud Run Jobsの登場によりバックグラウンドでのタスク処理を行う仕組みを気軽に構築できるようになりました。 定期実行を行う場合はCloud Schedulerを用いてスケジューリングします。 ジョブの実行時間は最大1時間となっており、この点を考慮したロジック実装が必要となります、 1時間以上掛かるジョブの実行が必要な場合は以下の方法を検討してみても良いと思います。 1時間以上の処理を実行する方法 1回のジョブ実行時間を1時間以内に収めつつ、自身のジョブを再帰的に呼び出すことで結果として1時間以上のタスク処理を実現しました。 ジョブを呼び出しはWeb APIによって行います。 エンドポイントは以下の形式のものが割り当てられており、POSTメソッドを用いてコールします。 https://{region}-run.googleapis.com/apis/run.googleapis.com/v1/namespaces/{project-name}/jobs/{job-name}:run 参照: ジョブを実行する このときあ、アクセストークンが必要ですが、このトークンはメタデータサーバから取得します。 メタデータサーバとは、GCEやCloud Run内部から利用できるGCPプロジェクトの各種認証情報を取得できるサーバです。 以下のようにリクエストを送ることで、アクセストークンを取得できます。 function getToken() { $tokenUrl = 'http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/token'; $ch = curl_init(); curl_setopt_array($ch, array( CURLOPT_URL => $tokenUrl, CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'Metadata-Flavor: Google'], CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, )); $res = curl_exec($ch); curl_close($ch); $decoded = json_decode($res); return $decoded->access_token; } 取得したトークンを利用してジョブのエンドポイントにPOSTリクエストを送ることで、ジョブを再実行することができます。

Continue reading ↦