はじめに 新規で担当したシステムに脆弱性が検出されたため、その対応策をまとめました。 ◆不具合の内容 ユーザー機能を持つシステムにおいて、ユーザーIDのパラメータを変更してアクセスすると、ログイン中のユーザー以外の情報が表示される不具合が発生しました。 ◆使用言語 JavaScript PHP ◆改善策 ログイン時にユーザーIDのパラメータをセッションに保存し、他のページにアクセスした際にパラメータとの整合性をチェックすることで、意図しない情報が表示されないようにします。 ◆手順 1.ログインボタンの押下時に、JavaScriptでPHPにリクエストを送信 ログインページにユーザーIDを入力するテキストボックスが用意されている前提で進めます。 function login() { var userId = document.getElementById('userId'); var dat
皆さんこんにちは。先月リリースされたNode.js 18.19.0の更新内容の一つに、node:module組み込みモジュールのregister APIがあります。これは、Node.js 20.6.0で先行実装されていたものが、Node.js 18系にバックポートされたものです。 これにより、現在サポートされているすべてのメジャーバージョンでこの機能が利用可能になりました。筆者は、このことによるインパクトは大きいと考えています。そこで、この記事ではregister APIについて解説します。 register APIについて この記事でregister APIと読んでいるのは、Node.jsの組み込みモジュールであるnode:module からエクスポートされる関数を指しています。 インパクトが大きいとは言いましたが、実は皆さんが日頃のアプリ開発で使うようなAPIではありません。このAPI
この記事は Jamstack Advent Calendar 2020 4日目の記事です。 はじめに Markdown -> HTML の変換に使われる事が多い、Remark / Rehype について書いていきます。 検索すると、Gatsby.js のプラグイン関連の記事は結構出てくるのですが、素の Remark / Rehype にフォーカスを当てた記事は少ないので、よく分からないまま使っているという人も多いのではないでしょうか。 全体像 実はこれらは、Unified と呼ばれるエコシステムの一部に属しています。その中でも、 Markdown を扱う処理系が Remark HTML を扱う処理系が Rehype となっています。 処理の仕組み その処理の仕組みは、Babel や PostCSS によく似ていて、 Parse : 文字列を AST に変換する Transform : AS
はじめに ここでいう排他制御（ロック）とは「何かの処理中は他の処理は待たせる」といった類いのものです。 自分自身、 GAS 以外の開発では排他に触れていたものの GAS では経験が無く、そのうち必要になるかなと思い気になったので調べてみました。 わかったことをまとめました。 対象の方 基本的な JavaScript が読める方 GAS で何かを作ったことがある方 ロックの利用手順 GAS で提供されるロック機能は、以下の流れで利用します。 LockService から目的に応じた Lock オブジェクトを取得 取得した Lock の tryLock() や waitLock() を実行しロックを取得 （ここで排他制御開始） 排他が必要な処理が終わったら Lock の releaseLock() でロックを開放 （ここで排他制御終了） まず利用するロックの種類を決めて、排他制御を開始し、用事
概要 React Server Component(RSC) PayloadをRouteごとにClient Sideに保持することで、ページナビゲーションが高速になります。 In-Memory情報のため、ページリフレッシュ等でこのCacheはクリアされます。 How it works 出典 : How the Router Cache Works /aへの初回アクセス時は、Router Cacheは存在しないので、Server Sideから取得する '/'(Layout)と/aの情報がRouter Cacheに保持される /bへの初回アクセス時は、'/'(Layout)はRouter Cacheから、その他はServer Sideから取得する /bの情報がRouter Cacheに追加で保持される /aへの２回目以降のアクセスでは、Router Cacheに保持された値を取得する 上図を見
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
📒ペアプロ・モブプロアンケート実施中 🖊️ あなたのご意見をお聞かせください。(2025/1/3 23:59まで） 回答結果は2025/1/6(月)にQiitaで公開いたします。 アンケートはこちらから（1分ほどで終わります） はじめに 巷ではペアプロ、モブプロがホットワードになっており、あたかも開発生産性を向上する特効薬のように取り上げられている印象を受けます。一方、この記事では、ペアプロ、モブプロ開発のネガティブな部分を考え、私の経験から感じたペアプロ、モブプロのアンチパターンとその改善策をご紹介します。 どんなアンチパターンを踏んでいたのか？ 勤務時間は100%ペアプロを実施（ソロプロ禁止） ソロプロは悪、ペアプロが最高というチームの雰囲気 フロー効率を過度に重視する姿勢 どうなったか？ ＋) 開発生産性およびデプロイ頻度は上がった ＋) 4keysなどの数値上の指標はすべてプラ
はじめに アイランドアーキテクチャは2019年にEtsyのフロントエンドアーキテクトであるKatie Sylor-Miller氏によって考案され、Preact作者のJason Miller氏のBlogによって広められました。 現在、アイランドアーキテクチャはAstro、Fresh などのWebフレームワークが採用しています。 アイランドアーキテクチャとは ページ内でサーバー側でレンダリングされる静的な部分とインタラクティブなアプリの部分をそれぞれ独立して表示させる手法です。 静的な部分を海に見立てて、その海に浮かぶそれぞれが独立した島(インタラクティブなアプリ)というイメージでアイランドアーキテクチャと名付けられているようです。 メリット １番のメリットはパフォーマンスです。 ページのほとんどの部分は静的なHTMLで構成され、JavaScriptが必要としない部分にはJavaScriptが
どうもー、ついにニートから社会復帰したset0gut1です。職場に入って数日目に体験した怪奇現象を、小噺としてひとつ。 （そうは見えないかもしれませんが、この記事はLabBaseテックカレンダー Advent Calendar 2024の4日目の記事です。） mission: ボタンがチカチカするのを直す 新しい会社に入って数日目、仕事の雰囲気に慣れるため、ちょっと軽いタスクでもいただこうかなーと思って選んだのが ボタンがチカチカするのを直す みたいなチケットでした。で、 iPhone 実機で問題のボタンを押すと、たしかになんかチカチカしてる。 ↑こんな感じで、1回タップするとボタン部分の背景色が、約1秒間で gray → white → gray → white → gray みたいな感じに変化してました。 hover で色が変わるんだろうけど、一瞬 hover が途切れる挙動になってる
はじめに JavaScriptにて文字数をカウントする方法に関する記事をいくつか目にする機会があり、今回実際に記事を参考に調べてみました。 簡単そうに見えて意外と難しいです。 String.length Googleなどで「JavaScript 文字数 カウント」とかで検索すると真っ先に出る方法です。 MDN公式ではString.lengthに関して以下のように説明されています。 length プロパティは String オブジェクトの文字列長を UTF-16 コードユニットの数で表します。 length は、 string インスタンスの読み取り専用データプロパティです。 UTF-16 コードユニット ざっくりと説明するならUnicodeで割り当てられた番号をUTF-16 という文字コード方式で割り当てられた各文字に対応するIDを指します。 難しい単語がいくつか出てきているので1つずつか
Variable Fontsの話しますー！ 前提 / 対象読者 Variable Fonts を採用したことがない Google Fontsのknowledgeを読んだことがないし読む気もない でもVariable Fontsを採用したい デザイナーとして採用したいので、コーダーに実装依頼したい Variable Fonts（可変フォント）とは？ バリアブルフォント(より具体的にはOpenTypeフォント バリエーション) は、2016 年に導入された比較的新しいフォント形式で、1 つのフォント ファイルに複数のスタイルのバリエーションを含めることができるため、「従来の」 (静的) フォントの厳密な定義を打ち破ることができます。重さ、幅、スタイル、光学サイズなどは、デザイナーが操作したり、コンテキスト ルールに基づいて調整したりできます。 なぜVariable Fontsを採用するのか 覚
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 自分はこれまでメンバーレベルのポジションとしてしか働いたことがありません。 ただ、自分と比較して必ずしも技術的に優れているわけではない同僚がインパクトの大きい仕事をしたり、上司やマネージャーの信頼を得たりしていくのを見た経験から、 自分がよりインパクトの大きい仕事をしていくためにはどのような部分が足りていないのかを考えるために、色々と調べたり、考えたり、まとめたりしてみました。 シニアなエンジニアについて ここでは、グレードの高いエンジニアや抽象度の高い仕事を日常的に行っているエンジニアをシニアなエンジニアと呼ぶことにします。 シニアな
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに OAuth2.0の拡張仕様で当たり前になりつつある？PKCEについてまとめました。 「PKCE」とは PKCEとは、「Proof Key for Code Exchange by OAuth Public Clients」の略称で、認可コード横取り攻撃を対策するための、OAuth2.0の拡張仕様です。 みんな大好き？RFCの7636に定義されています。 RFCに読み方も定義されており、「PKCE」も定義されています。 PKCE, pronounced "pixy" とあるので「PKCE」は「ピクシー」と読みます。 ※ ポケ○ン
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024/09/10にIdle Detection APIというAPIが更新されていました。 ステータスはDraft Community Group Reportです。 これはコミュニティによる提案であり、W3Cによる正式な勧告ではありません。 個人や団体レベルでも、とりあえずRFCを作ってみたり検討したりできる段階ということです。 以下はこの提案を管理しているGitHubから、このRFCの意義を解説したReadmeの紹介です。 User Idle Detection API このAPIでは、開発者はユーザがアイドル状態になったとき(キ
参考 IT業界では、請負契約と準委任契約がよく使われます。 委任契約はあまり使われることはなく、筆者も見たことがありません。 これは、エンジニアが法律行為を伴う業務を行うことが少ないためです。 請負契約と準委任契約の違い 請負契約と準委任契約は、どちらも業務委託契約の一種ですが、大きな違いがあります。 一言でいうと、請負契約は「成果物を納品することが目的」であり、準委任契約は「業務の遂行自体が目的」です。 請負契約では成果物を納品する責任が発生しますが、準委任契約ではその責任は発生しません。 ウォーターフォール開発で言うと、PoCや要件定義は準委任契約、設計や開発、テストは請負契約になることが多いです。 また、SES（システムエンジニアリングサービス）も準委任契約で結ばれることが多いですね。 PoCや要件定義が準委任契約になることが多いのは、不確定要素が多いため、確実に成果物を納品すること
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 自己紹介 皆様は個人開発をやっておられますでしょうか。私も億万長者を目指して日々スマホアプリ開発をしております。 代表作は安倍晋三エクスプローラー/聖帝エクスプローラー、最近力を入れているアプリはガチ有能AI助手です。他にもいくつかのアプリを個人で開発し、AppStore/GooglePlayで公開しています。 私はこれらのアプリを実家の自室で開発していました。10年以上実家暮らしをしていた筋金入りの子供部屋おじさんです。 なお、ガチ有能AI助手ではバックエンドで使用しているCloudRun、Firebase、Algolia、Suno、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
