SSRで認証をどうするべきか？
既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com
株式会社tacomsではAIツールの導入が積極的に進められており、Devinもそのひとつです。 tacomsでは以下のようなクイックスタートガイドラインが整備され、積極利用中です！ 今回はライブラリバージョンアップのリスク評価をDevinにしたところ、非常に精度がよかったのでご紹介させていただきます！ ライブラリバージョンアップのリスク評価とは 使っているフレームワークやライブラリなどのバージョンアップを行う際、破壊的変更が含まれていた場合、その機能に依存している機能で障害が発生する可能性があります。 ユニットテストを充実させている場合この変更に気づきやすくなりますが、ユニットテストでは十分にカバーできるかと言うとそうでもなかったりするところもあると思います。 そのためライブラリのバージョンを上げる際は、どのような変更が含まれるか確認しリスク評価をする必要があります。 ただこれはとても大変
AWS Transfer Family web apps を使ってノーコードでS3のWebUIを作成する - Taste of Tech Topics
はじめに こんにちは、一史です。 暖かくなりベランダに出している金木犀が新芽を出してきました、春ですね。 さて、ストレージサービス間でファイル転送を実現するサービス、AWS Transfer Familyの新機能として、web appsというものがあります。 aws.amazon.com この機能を使うことで、S3のWebUIをノーコードで作成することができるようになりました。 今回はこの新機能を用いて実際にWebUIを作成し、ユーザー単位のアクセス制御が行えるかを試していきます。 はじめに AWS Transfer Family web apps とは AWS Transfer Family web appsを用いてS3 WebUI作成する WebUIの完成像 WebUIの作成 ユーザーの作成・割り当て ユーザーのファイルへのアクセス権限の設定 作成したS3 WebUIの操作 ユーザーご
Next.js や BaaSを使うときのセキュリティ対策の覚書。RLS、DOMPurify、クリックジャッキングやXSS対策、クロスオリジン、CSPの設定など。 個人開発向け。認証系のアプリケーション開発時における現時点での BaaS やウェブアプリケーション（Next.js など）のセキュリティ対策の覚書。チェックリストなので深くは掘り下げない。更新、追加、修正予定あり。 データセキュリティ RLS の有効化とポリシー設定 例えば、Supabase を使う場合、RLS を有効にしてポリシーを適切に作成。各ユーザーがアクセスできるデータを厳密に制御する。 RLS（Row-Level Security）はデータベースのテーブルでユーザーごとに異なるアクセス制限を設定する仕組み。例えば、自分の投稿だけが見えるようにするなど、柔軟な制御が可能。 ポリシーとは、各ユーザーがどのデータにアクセスでき
HTTP/3 has been in development since at least 2016, while QUIC (the protocol beneath it) was first introduced by Google way back in 2013. Both are now standardized, supported in 95% of users' browsers, already used in 32% of HTTP requests to Cloudflare, and support is advertised by 35% of websites (through alt-svc or DNS) in the HTTP Archive dataset. We've developed a totally new version of HTTP,
WebKit Features in Safari 18.4
Safari 18.4 is here! It includes 84 new features, including a completely new declarative mechanism for sending Web Push notifications, lots of CSS including a brand-new shape() function, P3 & translucency for the HTML color picker, media formats with more robust support for recording, new Web APIs including modern popover manipulation, new JavaScript features like Iterators, a faster way to jump t
プロキシサーバーとは プロキシサーバーとは、高速なアクセスや安全な通信を確立するための中継サーバのこと。 プロキシサーバーは、インターネットへのアクセスまたはインターネットからのアクセスを代理で行う。 フォワードプロキシ クライアントの代わりにサーバーへリクエストを送信するプロキシサーバー。 主な目的 1. データの取得を高速化 データをキャッシュすることで、取得時間を短縮する。 2. セキュリティの向上 許可されていない不正サイトへのアクセスをブロックする。 3. アクセス履歴の管理 アクセス元を一元管理し、誰がどのサイトにアクセスしたかの情報を記録できる。 4. アクセス制限の緩和 CORS非対応のAPIにブラウザからアクセスする際、代理でアクセスすることでリクエストを可能にする。 リバースプロキシ クライアントからのリクエストを受け取り、適切なサーバーに転送するプロキシサーバー。 主
Reading production Haskell code, we sometimes stumble over idioms that look confusing at first, but which show up frequently enough that they are worth learning. We have already seen how guard–sequence helps us conditionally return something. Now we want to execute a side effect only when a value exists. We will use the conditional for. The conditional for idiom has the shape for_ value $ action.
はじめに こんにちは！HRBrainでエンジニアをしている鈴木（善）です。 みなさん、開発環境はどのように整えていますか？ HRBrainでは、エンジニアが自由に使え、壊しても問題のない開発環境を用意しています。 以前は各自のPC上で環境を立ち上げていましたが、PCのリソースを圧迫する問題が無視できなくなり、リモートマシン上でも開発できるように改善しました。運用を始めて1年ほど経ち、課題はあるものの、安定した運用ができています。 本記事では以下について紹介します！ 開発環境の概要 なぜ、どのように構築したのか そこから得られた知見 ざっくりまとめると次のような内容です。 ローカルでもリモートでも開発体験が大きく変わらず、各自が自由に使える環境を整えた。 TiltとGoogle Cloud Workstationsという2つの技術をベースに構築した。 PCとリモートマシン間の通信について試行
Why Is This Site Built With C Created at: 2024-08-26 I've been writing about things on a personal website since 2017. Most of what I have written features in the category of notes-to-self. Mostly on how to do A or B. Only recently I've started polishing notes together and forming posts on specific topics. One thing I realised was preventing me of writing more frequently wasn't the lack of ideas (o
Bolt.newを使って半日でOSSのグラフィックレコーディング共有プラットフォーム「GRAPHIA」を作った話 - Sun wood AI labs.2
こんにちは！今回は、AIコーディングツール「Bolt.new」を使って、たった半日でグラフィックレコーディング共有プラットフォーム「GRAPHIA」を開発した過程をご紹介します。プログラミング知識がなくても、自然言語でAIに指示を出すだけでWebアプリを構築できるBolt.newの威力を実感いただける事例です。 Bolt.newとは？ まず最初に、Bolt.newについて簡単に説明します。Bolt.newはStackBlitz社が開発したAIを活用したアプリ開発ツールです。自然言語での指示だけでウェブアプリケーションを構築できる革新的なプラットフォームです。 主な特徴は以下の通りです： 自然言語だけでフルスタック開発が可能：プログラミング知識がなくても、言葉で指示するだけでコードを生成 デプロイもワンクリックで簡単：開発したアプリをすぐにインターネット上に公開可能 多種多様なフレームワーク
Rspack
March 28, 2025 Announcing Rspack 1.3# Rspack 1.3 has been released! Notable changes: New features Circular dependency detection Build HTTP imports Lazy compilation improvements AMD supports Performance improvements Code splitting 25% faster Bundle size optimization Memory improvements Rstack updates Rsdoctor 1.0 Rsbuild 1.3 Rslib 0.6 Rspress and Rstest Ecosystem Rspeedy for Lynx Re.Pack 5 React Ro
HTTPガイドHTTP の概要HTTP の進化典型的な HTTP セッションHTTP メッセージMIME タイプ（IANA メディア種別）HTTP の圧縮HTTP キャッシュHTTP 認証HTTP Cookie の使用HTTP のリダイレクトHTTP 条件付きリクエストHTTP 範囲リクエストコンテンツネゴシエーションHTTP/1.x のコネクション管理プロトコルのアップグレードの仕組みプロキシサーバーとトンネリングHTTP クライアントヒントHTTP セキュリティ実践的なセキュリティ実装ガイドHTTP ObservatoryPermissions Policy Experimental コンテンツセキュリティポリシー (CSP)Cross-Origin Resource Policy (CORP)オリジン間リソース共有 (CORS)CORS エラーReason: CORS disable
Lambda プロキシ統合と考える API Gateway の CORS (Cross-Origin Resource Sharing) 設定 - サーバーワークスエンジニアブログ
こんにちは、野球と LoL(League of Legends) がシーズンオフとなり、心もシーズンオフの末廣です。 本ブログは、 Lambda プロキシ統合について理解した上で、Lambda 統合された API Gateway での CORS 設定を行っていくものとなります。CORS の基礎から設定方法、その具体例を用いて Lambda プロキシ統合について理解を始める参考にしてください。 ※ 本ブログで使用する API Gatewayは HTTP API ではなく、REST API になります。 CORS について Lambda プロキシ統合について Lambda プロキシ統合と CORS の関係と影響 実際の設定例 Lambda プロキシ統合の場合 非プロキシ統合の場合 ANY メソッドの場合の注意点 API Gateway からのレスポンス形式 プロキシ統合リソースのレスポンス 非
GASのおかげでwebエンジニアに近づいた
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 今回は初めてGASに触った時に発生したエラーのおかげでWebエンジニアに近づいたお話しです。 こんなエラーが発生した Access to fetch at 'https://script.google.com/macros/s/[デプロイURL]/exec' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response se
#5803. ''corpse'', ''corse'', ''corpus'', ''corps'' の4重語
前 次 hellog〜英語史ブログ #5803. corpse, corse, corpus, corps の4重語[doublet][latin][french][loan_word][lexicology][lexicography][spelling_pronunciation_gap][etymological_spelling][synonym][kdee][helmate][helkatsu][voicy][heldio] 標記の4語は，いずれもラテン語で「体」を意味する corpus に遡る単語である．「#4096. 3重語，4重語，5重語の例をいくつか」 ([2020-07-14-1]) でも取り上げた堂々たる4重語 (quadruplet) の事例だ． corpus /ˈkɔɚpəs/ （集大成；言語資料）は，中英語期に直接ラテン語から入ってきた語形で，現代では専門的なレ
Bolt.newを使って半日でOSSのグラフィックレコーディング共有プラットフォーム「GRAPHIA」を作った話
こんにちは！今回は、AIコーディングツール「Bolt.new」を使って、たった半日でグラフィックレコーディング共有プラットフォーム「GRAPHIA」を開発した過程をご紹介します。プログラミング知識がなくても、自然言語でAIに指示を出すだけでWebアプリを構築できるBolt.newの威力を実感いただける事例です。 Bolt.newとは？ まず最初に、Bolt.newについて簡単に説明します。Bolt.newはStackBlitz社が開発したAIを活用したアプリ開発ツールです。自然言語での指示だけでウェブアプリケーションを構築できる革新的なプラットフォームです。 主な特徴は以下の通りです： 自然言語だけでフルスタック開発が可能：プログラミング知識がなくても、言葉で指示するだけでコードを生成 デプロイもワンクリックで簡単：開発したアプリをすぐにインターネット上に公開可能 多種多様なフレームワーク
【Adobe Fireflyの使い方】Pixabay・Unsplash・Shutter Stock等で見つからない画像を生成する方法 - このは屋
`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else
`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else
REST API 設計指針・通信、パラメーター編
前回の記事ではREST APIを設計する上での認証認可について基本的な考え方をまとめました。 第二回のこの記事ではリクエスタからAPIへ通信を行う際の考慮点やパラメータの渡し方についてまとめていきます。 パラメータの推奨される受け渡し方法 前回の記事で以下の通り記載しました。 セキュリティのため、認証に用いる情報はHTTPヘッダーに含めて送信し、URLに認証情報を含めないようにします。（セキュリティの観点から、URLパラメータに認証情報を含めないようにする） これがなぜなのかについてまずはまとめていきます。 REST APIは以下の論文で定義されたのが土台といわれています。 そしてこの考え方に従って設計されたREST API は RESTfulともいわれます。基本的な考え方はHTTPの標準的なお作法にのっとりましょう、というものです。HTTPは非常に汎用性の高いプロトコルであり、リクエスタ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに 前回の記事「【初心者】AWS Transfer Family Web Apps を使ってみる」で、S3バケットのフォルダ/ファイルを、ユーザ認証をかけた上で外部公開できることを確認した。 追加で以下の改善を行う。 CloudFront/WAFを追加し、WAFでSRCIP制限を行う(前回記事での設定では、許可されていないSRCIPからもログイン自体はできてしまうため、そもそもログイン画面に到達できないようにする） Route53/ACMで、自ドメインのFQDNをCloudFrontに付与し、ユーザ向けのエンドポイントをわか
はじめに はじめまして！ノベルワークス入社2年目のそうまです！ 今回はCORSについて調査した内容を纏めています！ 概要 CORS（Cross-Origin Resource Sharing） とは、異なるオリジン間でのリソース共有制限を緩和するための仕組み です。 通常、ブラウザは セキュリティ上の制約（同一オリジンポリシー）により、異なるオリジンのリソースにはアクセスできません。 例えば、ある ウェブページが提供元とは異なるサーバーの API にリクエストを送信しても、デフォルトではリソースの共有はブロックされます。 しかし、サーバー側で CORS を適切に設定することで、特定のオリジンからのアクセスを許可できます。 何故必要なのか 異なるオリジン間でリソースの共有を可能にするためです！ 公開APIではCORSを用いてリソースを共有する事で実現しています。(しかし、その代わりにセキュリ
電気代の見直し 2024
電気代の見直し 2024 2025年3月19日 以前見直してから 2 年ほどたっていたのでまた見直してみた。 ※追記 公開後に計算間違ってたことがわかったので表を更新した。今の生活のままだと会社とプラン変えるだけでは安くならなさそう、、、 固定費の見直しをするためにひとまず電気代見直しをしてみました まずは現状を把握しないことには改善もできないので直近3ヶ月の時間帯別使用量を出してみるとこんな感じでした。こうまで時間帯の傾向がちゃんとでるのおもろい いま使ってる東京ガスのずっとも電気1プランとその実績を元にシン・エナジーの基本プラン、夜生活フィットプランだった場合で比較をしてみたのがこちらです。そもそも電気使いすぎでは？みたいのはまぁあるけど寒い時期で暖房ガンガンつけてたのでしょうがないね 18-22… 結果 時間帯の傾向はあいかわらずだが2023年に比べて2024年は使用料自体が増えてい
概要 C#でAPIを立てる際、最近はMagicOnionばっかり使ってます。今までBlazorServerやWinFormsとMagicOnionサーバを通信させることが多かったんですが、最近はBlazorWebAssemblyを使用することが多くなってきました。その際に、WebAssemblyだと普通のgRPCが使えないため、MagicOnionをgRPC-Webに対応させる必要がありました。ネット上にその方法がなかなか落ちていなかったので、備忘録的な感じで残しておきます。 なお、この記事ではMagicOnionの環境がすでに整っている前提で手順を書きます。そもそもMagicOnionの使い方がわからないという方はこちらの時期を参照ください。 ちなみに今回説明しているコードは以下のリポジトリにありますので、参考にしていただければと思います。 https://github.com/Uta-
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AWS Cost Dashboardを作成してみた 概要 過去30 日分のAWSのコストを簡単に可視化できる簡単なアプリケーションを作成しました。このアプリケーションは、AWS Cost Explorer APIを利用して、AWSアカウントの過去30日分のコストを取得し、フロントエンドで表示する仕組みになっています。 この記事では、使用した技術や実装のポイントについて解説していきます！ 使用技術 AWS サービス AWS Lambda: コストデータを取得するバックエンドを実装 API Gateway: Lambda関数を公開するための
GASからのCROSエラーの解決方法 Browse: Home / GASからのCROSエラーの解決方法 少しハマりましたので、忘備録として。 参考サイト https://knmts.com/become-engineer-31/ この記事を書いてから、同目的の別記事を書いています。こちらの方がシンプルかもしれません。 https://i-say.net/note/1100/ 以下の記事にある「mode: ‘no-cors’」の設定は、あまり今は推奨しません。 上記のページで解決できるので、上記のページを先にお読み下さい。 1. はじめに Google Apps Script（GAS）を使用してGoogleスプレッドシートやその他のGoogle Appsと連携するアプリケーションを開発する際、フロントエンドからのリクエストがCORS（Cross-Origin Resource Sharin
オリジンオフロードを増やす
CloudFront でキャッシュヒット率 (CHR) を増やすと、ウェブアプリケーションのパフォーマンスが向上し、オリジンの負荷が軽減されます。 CloudFront でキャッシュヒット率 (CHR) を増やすと、ウェブアプリケーションのパフォーマンスが向上し、オリジンの負荷が軽減されます。CHR は、リクエストの総数に対する CloudFront キャッシュから処理された HTTP リクエストの比率です。CloudFront キャッシュから処理されるリクエストは、レイテンシー (最終バイトまでの時間など) が向上するというメリットがあり、CHR はオリジンオフロードとアプリケーションパフォーマンスの良い指標となります。CloudFront ディストリビューションの CHR は、キャッシュヒット率 CloudWatch メトリックスを使用してモニタリングできます。CHR を高めるには、C
昨今、巷ではClineやDevinによるAIコーディングが話題です。特にDevinのような「タスクを渡したら、完了まで自律的に思考と行動を繰り返すエージェント型ソフトウェア」には、面倒だけど微妙に自動化しきれない作業を巻き取ってくれる可能性を秘めていると期待しています。例えば、machine-readableでない文書を定期的に監視して変更を実装に反映する、などです*1。 そもそも、どのようにしてAIに自律的に思考と行動を繰り返させているのでしょうか？AIの最新情報には疎いので、実装イメージがパッと思い浮かびません。どのようなアーキテクチャになっているのか非常に興味が湧いてきました。 Devinは商用プロダクトなのでコードベースは公開されていませんが、類似のオープンソース実装であるOpenHandsであればコードが読めます。本記事はもっとも仕組みが単純そうなHeadless Modeの実装
Chrome 134 の DevTools の新機能 | Blog | Chrome for Developers
プライバシーとセキュリティ パネル 以前の [セキュリティ] パネルは [プライバシーとセキュリティ] パネルに進化しました。プライバシー専用のセクションが新設されています。このセクションでは、次のことができます。 DevTools を開いている間、例外の有無にかかわらずサードパーティ Cookie を一時的に制限し、ウェブサイトの動作をテストします。 サードパーティ Cookie に関する情報（一時的な制限モードでブロックされたか除外されたか、影響を受ける可能性のある Cookie の種類など）を示す表をご覧ください。 Chromium の問題: 352364594。 パフォーマンス パネルの改善 このバージョンでは、[パフォーマンス] パネルが大幅に改善されています。 調整済みの CPU スロットリング プリセット 低中価格帯のモバイル デバイスをより正確に近似する 2 つの CPU
紙書籍をお届けします（PDFがついてきます） PDFのみ必要な場合は、こちらからPDF単体をご購入ください 紙書籍は通常、ご注文から2～3営業日で発送します 年末年始や大型連休など、1週間から10日程度、配送のお休みをいただく場合があります。詳しくはお知らせをご覧ください ブラウザの視点で学ぶセキュリティ 米内貴志 著 224ページ A5判 ISBN：978-4-908686-10-8 2021年1月5日 第1版第1刷 2022年8月16日 第1版第3刷 発行 正誤情報 サンプルコードなど 現代のWebブラウザには、ユーザーがWebというプラットフォームを安全に利用できるように、さまざまなセキュリティ機構が組み込まれています。 リソース間に境界を設定し、アプリケーションに制限を課す機構（Origin、SOP、CORS、CSPなど） Webブラウザの動作をOSのプロセスレベルで考察することで
RailsのAPIモード（メモ）
RubyOnRailsをバックエンドとして使用し、フロントエンドを分離した実装を行う場合の学習ポイントをご紹介します。 バックエンド（Ruby on Rails）の学習ポイント APIモード Rails 5以降の--apiフラグを使ったAPIモード JSONレスポンスの適切な構造化 Railsのルーティング設計とREST原則 認証・認可 JWT（JSON Web Token）の実装 Deviseやdoorkeeper等の認証gem CORS（Cross-Origin Resource Sharing）の設定 シリアライゼーション Active Model Serializerの使用方法 JBuilderを使ったJSON構築 Fast JSONAPIやrapid_jsonなどの高速なシリアライザ テスト APIのRSpecテスト リクエスト/レスポンステスト APIドキュメント生成（Swag
`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに 業務で以下のような要件あり。 ファイルサーバ的なものを作成し、WEB経由(ID/パスワード認証あり)で、ユーザの権限に応じたフォルダ/ファイルを公開したい。 ユーザのアクセス元のSRCIPを制限したい。 それだと「EC2にNextCloudなどのクラウドストレージソフトをインストールか、もしくはSaaSのBoxとか、、」などが想定されたが、最近(2024/12)リリースされた、「AWS Transfer Family Web Apps」が、要件にマッチするかもと思い、できることを実際に確認する。 2. やったこと 「AW
SSE（Server-Sent Events）を実装したけど、なぜかリアルタイム反映されてないときの解決法 - Qiita
SSE（Server-Sent Events）を実装したけど、なぜかリアルタイム反映されてないときの解決法 過去に自分がはまってしまった、SSE（Server-Sent Events）を実装してしっかりとCORSも考慮したのに、なぜかリアルタイム反映されない罠について解説します。 はじめに Server-Sent Events (SSE)は、サーバーからクライアントに対してリアルタイムでデータを送信するための技術です。しかし、実装したものの、リアルタイムで反映されないという問題に遭遇することがあります。これは、さまざまな原因が考えられます。 この記事では、SSEを実装した際にリアルタイム更新が反映されない原因と、それを解決するための方法を解説します。 1. HTTPレスポンスのバッファリング これが一番の沼りポイントだと思います。 SSEでは、サーバーからクライアントにデータをリアルタイム
いよいよ来るぞエージェントAI時代。これからの生存戦略はどうする？ #TDX25 #BeAnAgentblazer｜George Yoshida/吉田丈治
いよいよ来るぞエージェントAI時代。これからの生存戦略はどうする？ #TDX25 #BeAnAgentblazer お疲れ様でした。TDX25が無事に終わりました。このコンテンツ自体は帰りの飛行機の中で書いてます。あと4hで成田到着だ。 TDXで学んだハンズオン内容1. Get Started with Agentforce: Case Resolutionこのハンズオンでは問い合わせ対応エージェントの作成方法を学びました。手順は以下の通りです： Einstein機能の有効化などの初期設定 エージェントの作成 プロンプトビルダーでプロンプトを設計 使用したプロンプト例：「You work in the Guest Services team at {!$Organization.Name} Your role is to answer questions. Answer to questi
Google Apps Script (GAS) は面倒な作業の自動化や、スプレッドシートの簡易データベース化などの様々な場面で世話になるプラットフォームです。GAS では V8 ランタイムが使えるため、フロントエンドエンジニアは JavaScript と同じように GAS を書くことができます。ここでは GAS でよく使う機能を関数としてまとめました。 GET リクエストを受け取る GET リクエストを受け取るのは doGet という決まった関数名になります。 /** * @see https://developers.google.com/apps-script/guides/web */ function doGet(e) { try { const { queryString, parameter, parameters, postData } = e; const queries
はじめに エンジニアとしてのキャリアをスタートしたばかりの方が、ジュニアレベルやミドルレベルのエンジニアとして活躍するために必要なスキルや知識について考えてみます。 この記事はWEB領域のエンジニアを対象としています。 前提 前提として、私の知っている範囲のことしか書けませんが、弊社スマレジのエンジニアとして活躍できるレベルを目標としています。 スマレジでは、バックエンド、フロントエンドの領域で担当が分かれておらず、どちらも担当します。 インフラについては専属のチームがありますが、プロダクトを担当しているエンジニアと相談しながらインフラ設計が行われることが多く、インフラについての知識がなくてもいいわけではありません。 ロードマップ まずはロードマップとしてよく知られる図を確認してみます。 私自身が何を勉強すればいいのかわからなくなった時に参考にしていました。最近はあまり迷うことはないんです
本記事については生成AIを活用して生成された記事となります。 解説内容の正確性については読者ご自身でご確認いただきますようお願いいたします。 本記事はRun Cursor AI for Free with Open-Source LLMの解説記事となります。 Cursor AIを無料で利用できる方法をご存知ですか？この記事では、オープンソースのLLM（大規模言語モデル）を活用して、Cursor AIをローカル環境で動かす手順を詳しく解説します。無料で強力なAIを利用するための環境構築を学びましょう！ Cursor AIを無料で利用するための準備必要なツールCursor AIをローカルで動かすためには、以下のツールが必要です。 Cursor AI: アカウントを作成し、インストール。 LLM Studio: GUIベースのツールで、モデルの管理を簡単に。 Ngrok: ローカルサーバーを公開
この記事ではWebサービスを作る際のアイディアの整理から開発環境の構築までについて、どのようにAIと進めたかを書いていこうと思います。具体的な機能開発については別の記事で紹介出来ればと思います。 サービスの紹介記事はこちらです。 ベースとなったアイディア思いついたアイディアは以下のようなものでした。 何の絵本を持っているかを簡単に記録できる。 両親に何の絵本を持っているかを共有できる。ただし、両親にはアカウント作成の必要がなく、ブラウザで開くだけで一覧が見れる。 両親が子供のために絵本をプレゼントしてくれるのですが、自分が持っている絵本と被りそうなことがあったので、何の絵本を持っているかを知れるサービスがあると良さそうだなと思ったのがきっかけでした。 既存サービスの調査まずは既存のサービスについて調べてみました。作らずに済むのであれば自分としては嬉しかったので、既に希望に沿うサービスがある
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Devinにライブラリバージョンアップのリスク評価をやらせたらめっちゃよかった！
個人開発：Next.js はじめてのセキュリティ対策覚書 - izanami
HTTP/3 is everywhere but nowhere
リバースプロキシとフォワードプロキシの違いについて - Qiita
Non-Obvious Haskell Idiom: Conditional For
ローカル・リモートお好きにどうぞな、HRBrainのマイクロサービス開発環境
Why Is This Site Built With C
コンテンツセキュリティポリシー (CSP) - HTTP | MDN
【DeepSeekの使い方】プロンプトを活用して、メルマガ原稿の叩き台を生成する方法 - このは屋
【初心者】AWS Transfer Family Web Apps を使ってみる (2) CloudFront/WAF連携 - Qiita
CORSって何だっけ？ - Qiita
MagicOnionでgRPC-Webを使う - Qiita
AWS S3 + APIGateway + Lambda でンプルなアプリケーションを作成 - Qiita
GASからのCROSエラーの解決方法 - Paper's Program Note
OpenHands Headless Modeの実装を読む - sometimes I laugh
Webブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する
#16 子持ちと子なしは結局分かり合えないのか？ - となりの芝生はソーブルー
【初心者】AWS Transfer Family Web Apps を使ってみる - Qiita
Google Apps Script でよく使う機能を関数としてまとめてみた
駆け出しエンジニアからジュニア・ミドルレベルへの成長の道のり
Cursor AIを無料で動かす方法！オープンソースLLM活用ガイド｜生成AI活用研究部
AIと作るWebサービス〜調査・企画・開発環境構築編〜｜すけさん