Product Manager Conference 2022での登壇資料です！
今日から使える「実例マッピング」 / How to Use Example Mapping #pmconf2022
Product Manager Conference 2022での登壇資料です！
【必見】これから学ぶべきTypeScriptフレームワーク 4選
はじめに 今回の記事では、私の独断と偏見でこれから学ぶべきTypeScriptフレームワークを4つ徹底解説する。今回の記事を参考に、TypeScriptを深く学ぶことにつながれば幸いである。TypeScriptが使われているフレームワークは数多く存在するので、何から手を付ければいいのかわからない人も少なくないだろう。もしこの記事を読んでいるプログラマーがTypeScriptのフレームワークを選んでいるのに悩んでいたら、今回の記事は参考になるはずだ。 あくまで個人の一見解に過ぎないが、参考になれば幸いである。 これから学ぶべきTypeScriptフレームワーク Next.js Nuxt3 NestJS SolidJS それぞれ順番に解説する。 １．Next.js Next.jsはReactベースで開発されたTypeScriptフレームワークである。最大の特徴は、URLルーティングと呼ばれるリ
フロントエンドのコードからの情報漏洩を防ぐための工夫 - BASEプロダクトチームブログ
基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる情報 例えば、次のようなコードがあるとします。 function debug() { // 開発環境の host であればデバッグ機能を有効にする return location.host === 'dev.example.com'; } なんの変哲もないようなコードに見えますが、ブラウザ
Go な Web Server を Systemd で良い感じに動かすメモ
Go で Web Server 書く 動作確認するだけのコードなのでなるだけシンプルに書く。んで、 Port 80 を Listen したいけどプロセスは root で走らせたくないので、 systemd でポート開いてそれをプログラム側で使うようにする。 ディスクリプタごにょる部分は coreos/go-systemd がドンピシャなのでこれを使う。 package main import ( "errors" "fmt" "log" "net" "net/http" "github.com/coreos/go-systemd/activation" ) func main() { // Mux を設定する m := http.NewServeMux() m.HandleFunc("/", handler) // Server を設定する s := &http.Server{ Handl
Pull Requestをすぐ動作確認！ マイクロサービスでのプレビュー環境の作り方 - LIVESENSE ENGINEER BLOG
こんにちは、かたいなかです。 最近、マイクロサービスアーキテクチャを採用した環境でプレビュー環境の実現方法についていくつかのパターンを比較し整理する機会がありました。 今回の記事では、プレビュー環境を構築するための要件をなるべく特定の技術に依存せずに紹介したあとで、ArgoCD、Istio、OpenTelemetryを使用した実装例をご紹介します。 目次 目次 プレビュー環境とは プレビュー環境の構成要素 PRごとのアプリケーションやルーティングの設定のデプロイ ヘッダ伝播 および ヘッダによるルーティング 実装例 ArgoCD ApplicationSet Istio OpenTelemetry Baggageヘッダ挿入用Proxy 動作確認 まとめ 補足: 実装例で考慮していないこと 画像等のCORS DBのアクセス権限 参考 プレビュー環境とは ここでのプレビュー環境とは、Pull
Amazon S3の脆弱な利用によるセキュリティリスクと対策 - Flatt Security Blog
はじめに こんにちは、株式会社Flatt Security セキュリティエンジニアの森岡(@scgajge12)です。 本稿では、Amazon S3 の脆弱な使い方によるセキュリティリスクと対策を解説し、実際の設定不備などに関する事例についても紹介します。 Flatt Security は専門家の視点でセキュリティリスクを調査するセキュリティ診断を提供しています。クラウドとアプリケーションの総合的な診断の事例として SmartHR 様の診断事例がございますので、是非インタビュー記事をご覧ください。GCP の事例ですが、もちろん今回取り上げる AWS でも同様の診断が可能です。 はじめに Amazon S3 とは バケット・オブジェクト バケット オブジェクト アクセスポリシー バケットポリシー アクセスコントロールリスト(ACL) IAM ポリシー 署名付き URL Amazon S3 に
ISUCON12予選参加記 Rustで予選突破した
2022年7月23日(土) に開催された ISUCON 12 に Rust で参加して20位で予選突破しました。 チーム チームO omu: https://omuric.github.io/posts/isucon12-qualify/ dice801: https://zenn.dev/dice801/articles/760f8fc6af5a08 daiju (自分) 事前準備 基本的には前年までに用意したツールを活用する cargo-make で3台の EC2 への deploy や再起動やログの集計をコマンド一発で実行可能にする isuconf で現地と手元の設定ファイルの同期 omu の自作コマンド どちらも年に1回しか登場しないので、事前の練習でコマンドを手に馴染ませておく。 Rust のためのトレースツールの整備 https://github.com/hinohi/rust
【Teams障害時のワークアラウンド】Azure Communication Service を使って9クリックでグループ通話アプリをデプロイしてみた - Qiita
【Teams障害時のワークアラウンド】Azure Communication Service を使って9クリックでグループ通話アプリをデプロイしてみたMicrosoftAzureTeamsAzureCommunicationServices はじめに 本日のTeams 障害でみなさんお仕事への影響はいかがでしたか？数時間ながらこういう障害はTwitterが盛り上がりますね。 私はちょうどフォーカスしていたタイミングだったのであまり影響はなかったですが、そんな中でりなたむ 💉✖︎3⃣ || Microsoft MVP さんが、こんなつぶやきを。 一般「なにぃ！？ #Teams が落ちた！？12時からの××社との打ち合わせどうするんだーワタワタ」 弊社「あ、Teams落ちたのかー じゃあ #Azure の Communication Services つかって 簡易的な Web会議室作っちゃ
無料で地図データを分析できるソフトウェア「QGIS」とは？ダウンロード方法や基本の使い方を解説
データのじかんトップ > 新着記事一覧 > データ活用 > 無料で地図データを分析できるソフトウェア「QGIS」とは？ダウンロード方法や基本の使い方を解説 ビジュアライズされた地図からマーケティング計画を練る、災害発生時のBCPを俯瞰的な視点から練り上げる……。 メタバースの世界が拡大しているとはいえ、まだまだ職場や自宅の存在する“土地”に根差して生活している我々にとって、地図データはときに非常に有用なデータとなります。 そこでこの記事で、有用な無料ツールとしてご紹介したいのが「QGIS」。その取得方法やメリット、簡単な利用法についてデモとともに解説いたします！ QGISとは？ ダウンロードする方法は？QGISとは、無料で使えるオープンソースのGISソフトです。 Windows、Mac、Linux、Unix、Androidなど、iOSを除く主要なOSのほとんどに対応しており、機能は有償ソフ
GitHub Actionのジョブ実行画面からPull Requestを辿れるようにした - Lambdaカクテル
こういうのを作りました。 ジョブに紐付いたPull Requestへのリンクが表示される 行ったこと: リンクを生成するジョブを1つ生やした 綺麗な表示はStep Summary機能 (後述) の力を借りている ジョブ実行画面からPull-Reqに戻りたい GitHub Actionsのジョブ実行画面には、その実行元となったPull Requestへのリンクが存在しないため、困っていた。 よくあるシチュエーション: Pull Requestを見るとジョブがコケていた 様子を見に行くうちに履歴がどんどん深くなる -- ジョブ画面内での遷移はどんどんヒストリが積まれる Pull Requestに戻れなくなってしまう この話を同僚にしたところ共感の嵐だった。したがって隠れた需要がありそうだということが判明し、うまくやる方法を考えることにした。 結果、GitHub Action上でPull-Req
ブラウザの要素をクリックするだけでRailsのviewファイルを簡単に開くことの出来るrails-template-inspectorの紹介
<!DOCTYPE html> <html> <head> <!-- ... --> </head> <body> <%= yield %> <% if Rails.env.development? %> <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script> <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector> <% end %> </body> </html> エディタを開く仕組みとしてはCustom URL Schemeを利用しています。 <rails-inspector>要素の
データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
URL Pattern API - Web APIs | MDN
The URL Pattern API defines a syntax that is used to create URL pattern matchers. These patterns can be matched against URLs or individual URL components. The URL Pattern API is used by the URLPattern interface. The pattern syntax is based on the syntax from the path-to-regexp library. Patterns can contain: Literal strings which will be matched exactly. Wildcards (/posts/*) that match any characte
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
ブラウザーの中に「偽ブラウザー」を表示、URLを確認しても防げないフィッシング
だがWebブラウザーのセキュリティーは年々強化され、こういった手口はほとんど使えなくなった。このため前述のようにアドレスバーの表示を確認することが、偽サイトに誘導されないための有効な対策になっている。 今回「mr.d0x」を名乗るセキュリティー研究者が警鐘を鳴らすのは、Webブラウザーが表示するポップアップウインドウ（Webブラウザーウインドウ）である。Webブラウザーのアドレスバーではなく、ポップアップウインドウのアドレスバーを偽装する。アドレスバー付きのポップアップウインドウは「Webブラウザーが表示するWebブラウザー」といえるので、この手口はBrowser In The Browser（BITB）攻撃と名付けられた。 BITB攻撃の主な対象となるのは、ソーシャルログインのログイン画面である。ソーシャルログインとは、SNSのアカウントで別のWebサービスにログインできるようにする仕組
Announcing AWS Lambda Function URLs: Built-in HTTPS Endpoints for Single-Function Microservices | Amazon Web Services
AWS News Blog Announcing AWS Lambda Function URLs: Built-in HTTPS Endpoints for Single-Function Microservices Organizations are adopting microservices architectures to build resilient and scalable applications using AWS Lambda. These applications are composed of multiple serverless functions that implement the business logic. Each function is mapped to API endpoints, methods, and resources using s
文春オンラインの記事分析を支える爆速ダッシュボードを作るまで｜Shota Tajima
従来のGoogleアナリティクスである、ユニバーサル アナリティクス（以下UA）のサポートがいよいよ2023年7月に終了することが、先日アナウンスされました（※）。昨年対比やトレンドをチェックすることを考えると、2022年内できるだけ早めに次世代のGoogleアナリティクス（以下GA4）へ移行したいWebメディア運営者も多いかと思います。新しいツールの勉強や、既存システムの改修が必要な問題ではありますが、この機会を、データ収集・可視化の設計を見直し、日々の意思決定の共通言語としてデータを使いやすくするチャンスと捉えてみてはいかがでしょうか。 ※ Google、ユニバーサルアナリティクスのサポートを2023年7月1日に終了。早めのGA4移行を推奨 このnoteでは、前半でダッシュボードによるデータの可視化にコストをかけるべき理由を整理します。後半では、2021年秋に文春オンラインのダッシュ
【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】
はじめに axiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。 実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。 私もaxiosの型付けに悩まされた一人です。 最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。 前提として、openapiファイルが用意されていることとします。 コード例は下記レポジトリに配置しております。 幸せになるとは何か 結論から言うと次のような型の補完が効き、かつ型安全なaxiosのrequest APIのカスタムAPIを作る事です。 URLパスの補完が効いていて、 実装されているHTTPメソッドの補完も効いており、 パラメータの型も補完され、 レスポンスの型も手に入るrequest APIです。 見た目上は、request APIですので、axiosのドキュメント
アマゾンのページ表示速度を劇的に改善した6つの実践テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
「ファーストビューのコンテンツを先に読み込む」「すべてSSRする」「使っていないポリフィルを削除する」など、アマゾンのページ読み込み速度を向上させるチームが用いた具体的なテクニックを6つ、紹介する。 また、同じ「ページ表示速度」関連のトピックとして、IKEAのサイトで全画像をAVIF対応にしてデータ転送を20%以上減らした事例もピックアップとして紹介する。 ほかにも、「ファセットナビゲーションのベストプラクティス」「GooglebotとCookie」「URL正規化のポイント」「監修者情報をグーグルに伝えるには」「ドメイン名変更」などなど、あなたのSEO力をアップさせる情報を、今週もまとめてお届けする。 アマゾンのページ表示速度を劇的に改善した6つの実践テクニックIKEAが画像をAVIFに置き換え⇒画像の転送量を21%削減⬇ファセットナビゲーションでは標準に則ったURLパラメータの文法にして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
神ツール？ Google MeetやZoomのイベントURLを、時間になると自動的に開くChrome拡張機能【やじうまWatch】
