G-gen の杉村です。Compute Engine の VM で Squid 等の HTTP プロキシサーバ経由でインターネットへ出るような構成を取った際、gcloud コマンドが不可解なエラーメッセージと共に失敗しました。今回はその事象と、解決方法をご紹介します。 事象 やろうとしたこと エラーメッセージ 前提知識 VM とプロキシサーバについて サービスアカウントと VM 原因調査 サービスアカウントは認識できている エラーメッセージ内の URL メタデータサーバはローカルからのみクエリできる 解決

この記事は、2023年4月24日(月)に行われた「さくらのテックランチ vol.3 ～レンサバサービス企画の松花堂弁当と新規事業3分クッキング～」における発表を編集部にて記事化したものです。 谷口と申します。本日は「レン […]

はじめに ページ上部に配置されたメニューバーをスクロースによって画面追従する際、通常は追従させる要素にstickyなどを付与して画面追従させるのが普通かと思います。 画面上部でついてくるこれです。 ですが、イレギュラーではありますが追従させる要素がスクロールによって画面から隠れた後、下部にその要素を配置するなどの要望があった際、window.scroll等を使うなどの方法がありますが、画面サイズによっては正常に動作しないなどの弊害があります。 今回はそんな要望が来た際に、要素の監視を行うIntersect

はじめに エンジニアになってから、個人ブログでさまざまな記事を書いてきましたが、そろそろリプレイスしたいと考え、Astroでシンプルなブログサイトを作成してみました。その作成手順について記事にしていきます。データ管理はmicroCMSを使用し、サイトのホスティングはVercelで構築しています。 作成したもの 作成した記事を一覧で表示するシンプルなデザインにしました。 Github 作成したサンプルデータは下記リポジトリに格納しています。 https://github.com/MASAKi-cell/as

はじめに こんにちは！フロントエンド開発課の koki _matsuraです。 この記事では、E2Eテスト フレームワーク として用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に 拡張機能 についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次の通りになっています。 はじめに Playwrightとは インストール 簡単なテストを書いてみよう Playwr

こんにちは、フロントエンドエンジニアの嶌田です。 アクセシビリティは今まで以上に大きな関心を寄せられるトピックになってきたように思います。個人で関心がある人、企業のなかで周りを巻き込み推進しようとしている人、すでに組織全体での取組みに変わりつつある企業など、状況は様々だと思います。弊社はというと、内側からの推進活動は広がりを見せつつも、まだ組織一丸となった取組みには至っていない、といったところです。 そんな状況の私たちですが、社外のアクセシビリティを推進する同志たちに、ほんの少しでも力を分け与えられたらと

こんにちは、KINTO Technologiesグローバル開発部でフロントエンド開発をしているクリスです。 普段フロントエンド開発でコンポーネントを開発する際はpropsを利用して必要な情報を渡す、という話はよく耳にすると思います。Angular, React, Vue, Svelteといった今よく使われているフレームワークではそれぞれの書き方でこの機能を実現しています。すべてのフレームワークを言及すると非常に長い記事になってしまうので、今回はグローバル開発部で良く使っているVueについて話したいと思いま

こんにちは 配配メール開発課 Jazumaです。 業務やプライベートでChatGPT等のAIを使いながらもより良い回答を得るためのプロンプトの作り方が分からないという方は多いのではないでしょうか。かく言う私もその一人です。 そこで今回は Best practices for prompt engineering with OpenAI API を見てプロンプトエンジニアリングのベストプ ラク ティスを整理します。 より良い出力を得るためのプロンプト 最新のモデルを使う プロンプトの冒頭で指示を出す・区切り

2回目の投稿です。rks_mnkiです。 インフラエンジニア的なことをやっています。 さて今回は、「ブラウザ環境上の操作のみでシステムログを取得する環境構築」について、実際の設定内容などを踏まえながらご紹介したいと思います。 目次： 1．導入を進める背景、課題 2．システム要件 3．利用ツールの選定 4．システム全体の構成イメージ 5．各種コンポーネントの説明 Jenkinsジョブ Promtail Loki Grafana Nginx 6．Docker Composeによる実装 7．操作の流れをご紹介

こんにちは(こんばんは)、Svelte不定期連載その2です。 過去の記事はこちら SvelteKit + Svelte を1年間くらい使ってみた知見など※SvelteKit メジャーリリース対応済み Svelteと他JSフレームワークとの比較 - Svelte不定期連載-01 今回はSvelteのユニットテストについて書いていこうと思います。 モジュールはこちら。 Vitest + jsdom + @testing-library/svelte の3つを使用して行います。 Vitest viteというツー

ISID X（クロス） イノベーション 本部 の飯田です。 ブラックボックス 最適化を使って、なかなか 言語化 しにくい自分の思考パターン（好みの色）を表現する取り組みをしてみました。 ブラックボックス 最適化とOptuna ブラックボックス 最適化とは「ある関数の出力を最大化 （または最小化） するような入力を勾配情報などを使わずに探索する問題」と言われます。 参考 ある入力に対して、その出力結果だけしか取得することが出来ず、それ以外の情報が与えられないような状況で、結果を最適化（最小化・最大化）するこ

ISID X（クロス） イノベーション 本部 の飯田です。 ブラックボックス 最適化を使って、なかなか 言語化 しにくい自分の思考パターン（好みの色）を表現する取り組みをしてみました。 ブラックボックス 最適化とOptuna ブラックボックス 最適化とは「ある関数の出力を最大化 （または最小化） するような入力を勾配情報などを使わずに探索する問題」と言われます。 参考 ある入力に対して、その出力結果だけしか取得することが出来ず、それ以外の情報が与えられないような状況で、結果を最適化（最小化・最大化）するこ

こんにちは、見習いフロントエンドエンジニアのぱやぴです。 新卒として2022年4月に入社、9月に配属されもう早一年がたとうとしていることに驚きを隠せません。何より後輩が入ってくるということが最大の驚きです。 そこで今回は入社から執筆現在(4月)までの約1年間に何を行い、何ができるようになったのかを紹介したいと思います。 AGESTの新卒エンジニアはこういう感じなんだなと一つの例として見ていただければ幸いです。 はじめに まずは簡単に自分のプログラミング歴を紹介します。 情報系の大学を出ており、プログラミン

こんにちは。名古屋グループのとりです。 昨年まではリモートワークにする日が多く、静かな環境で集中できるかと思いきや、安物の椅子で座り心地が悪かったり、移動する事が無いので運動不足がストレスになったりと、やっぱり職場の方が仕事に集中できるなと思う今日この頃です。 私はWebやアプリの入力フォームに対して探索的テストを行う時、開発現場に居た時の経験から何か悪さできないかなとプログラム上誤動作を起こしそうな入力を試す事が多いのですが、同様の手段でデータベースを意図的に不正操作する方法をSQLインジェクションと呼

はじめに こんにちは WESEEK で yaml から css まで何でも書く haruhikonyan です。 フォームなどをコンポーネント化したときに同じページにそのコンポーネントを使うと id の重複に困ったりしませんか？ そんな時に React が公式で提供している useId という hook を使うと解決するかもしれません。 しかし利用においては注意点があるので具体例とともに紹介したいと思います。 useId とは まず最初に useId とは何かです。 簡単に言えば同じ React を使った