Preparing search index...The search index is not available@auth0/nextjs-auth0
こんにちは、CX事業本部の若槻です。 認証管理プラットフォームAuth0では、ユーザーにuser_metadataとapp_metadataの2種類のメタデータを持たせることができます。user_metadataはユーザーが更新可能、app_metadataはユーザーが読み取りのみ可能なメタデータとなります。 Metadata 今回は、ReactアプリでAuth0ユーザーのuser_metadata/app_metadataを取得してみました。 やってみた Auth0ユーザーのメタデータの設定 Auth0管理コンソールにログインしたら、[User Management]-[Users]を開き、メタデータを設定したいユーザーを選択します。 ユーザーメニューで[Details]タブを選択し、 下の方へスクロールするとuser_metadataとapp_metadataの入力欄があるので、それぞ
import { gql, useQuery } from '@apollo/client'; interface PostQuery { posts: { id: string title: string author?: { id: string firstName: string lastName: string } }[] } const postsQueryDocument = gql` query Posts { posts { id title author { id firstName lastName } } } ` const Posts = () => { const { data } = useQuery<PostQuery>(postsQueryDocument); // ... }
要件 Next.js によるウェブアプリケーション すでにUAによる計測を行っている UAによる計測は、自動計測+特定のページだけconfigをオーバーライドしている(カスタムディメンジョン用) この状態で Google Analytics 4 による計測も同時に行いたい 既存のUAには影響がないようにしたい できればカスタムディメンジョンを付与したイベントも GA4で再現したい 検討項目 Google Tag Manager を使うとアプリケーション側でイベントの制御を行うのではなく、GTMの管理コンソール側で制御できるようになる雰囲気があるのでまずGTM の導入を検討する 結論(やったこと) Google Tag manager と Google Analytics 4 を連携した Google Analytics 4 と BigQuery を連携した Next.js のコードには G
こんにちは。株式会社インプルの平澤です。 ReactのCSSで迷われたこと、迷っていることはありませんでしょうか? そんな方々へReactの各CSSをご紹介致します。 最初に言いますが、どの方法が良いかの正解はありません。「個人的な相性」・「開発チームの相性」・「パフォーマンス」など、どこに重点を置くかでも選択は変わってきます。 それを踏まえた上でご自身のベストプラクティスを見つけてみましょう。 本記事では ・Pure CSS ・CSS Modules ・CSS in JS (styled-component, emotion) ・CSSフレームワーク(Tailwind CSS) を皆さん大好きReactのトップページに適用して比較し、 各メリット・デメリットをまとめました。 ※下記コマンドでプロジェクトを作成した前提で進んでいきます。 $ npx create-react-app {プロ
株式会社パルケの手を動かすCTO、みつるです。 今年に入ってからリリースしたプロダクトでは、TanStack Query (旧React Query)を全面的に採用しました。 無料でずっと話せるミーティングアプリ パルケミート とにかく簡単につながる無料ビジネスチャット パルケトーク このツールを使い倒した結果、これはいちライブラリの枠に収まらない、開発の考え方そのものを変える神フレームワークだと思うようになりました。 今回はその神ってるところを紹介したいと思います。 TanStack Queryとは 公式のトップページより Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte パワフルな非同期状態管理ツールという事です。 ただのデータ取得&キャッシュの便利ツールではない、という気持ちが
JavaScriptの関数は、関数宣言、関数式、アロー関数の3通りの方法で作れます。 アロー関数は後発JavaScriptの歴史を紐解くと、元々は関数宣言と関数式しかありませんでした。この2つの機能上の違いはほぼありません。この2つはまとめて「従来の関数」と呼びます。アロー関数は、従来の関数の問題点を解決するために、あとで導入されたものです。 構文の簡潔さ従来の関数は構文の長さが問題でした。JavaScriptではよくコールバック関数を書きます。コールバック関数とは、関数の引数として渡される関数を言います。従来の関数は、関数を書くたびにfunctionキーワードを書く必要があります。処理が1行だけでも、複数行要するコーディングスタイルもあります。書くのも読むのもわずらわしいコードになりがちです。一方で、アロー関数は短くシンプルな記述になります。
本記事はNRIネットコム Advent Calendar 2021 17日目の記事です。 🥨 16日目 ▶▶ 本記事 ▶▶ 18日目 🍪 はじめまして、入社2年目の高橋栞です。 Google アナリティクス(GA)を中心としたGoogle マーケティング プラットフォーム(GMP)のテクニカルサポートを担当して約1年半になります。 まだまだ修行中の身ですが、今回は誰でも簡単にTechな感じでGTMの設定を行えるようこの記事を書きました。パッと見は小難しく見えるかもしれませんが、やっていることはシンプルなのでぜひ読んでいただければと思います! はじめに 組み込み変数とは クリックした要素の〇〇を取得したい! クリックした要素の親要素/子要素の〇〇を取得したい! dataLayerで取得できる値を全部チェックしたい! GTMで値を確認してみましょう! まとめ はじめに GTMは「Googl
Fastly の新しい next-compute-js ライブラリを使用することで、Compute@Edge プラットフォーム上で Next.js アプリケーションをホストできるようになりました。これにより、Next.js 開発者のエクスペリエンスが向上し、圧倒的なスピードを誇る Fastly のグローバルエッジネットワークのメリットが得られます。オリジンサーバーも必要ありません。 Next.js は広く普及している JavaScript ベースのサーバーフレームワークで、開発者に優れたエクスペリエンスを提供します。具体的には、フロントエンドのコードを React で作成できるほか、ごくわずかな設定で本番環境に必要な優れた機能 (ハイブリッドの静的レンダリングとサーバーレンダリング、スマートバンドル、ルートプリフェッチなど) を直感的にセットアップできる便利さを備えています。 Next.j
欧州連合(EU)の執行機関である欧州委員会が、EUで販売されるスマートフォンなどの電子機器の充電用端子として、USB Type-Cを採用するよう義務付ける法案を可決した。製品にLightning端子を搭載する米Appleは対応を迫られる。 有線充電式で100W以下で動作する電子機器が対象。2024年末までに、携帯電話やタブレット、カメラ、ヘッドフォン、携帯ゲーム機、キーボードなどにUSB Type-C端子の搭載が必要になる。26年春にはノートPCも対象になる。 同法案は21年9月に欧州委員会に提出された。1つのベンダーに依存してしまう「ベンダーロックイン」への対策や、無駄な充電器の購入を防ぐのが目的。賛成602票、反対13票、棄権8票で可決になった。 USB Type-C端子の搭載義務に加え、スマホなどの端末購入時に、充電器のセット購入をするかどうかも選択できるようにする。これにより、不要
開発スピードの速い企業は品質が高く、遅い企業は品質が低い。和田卓人氏による「組織に自動テストを根付かせる戦略」(その2)。ソフトウェア品質シンポジウム2022 9月22日と23日の2日間、一般財団法人日本科学技術連盟主催のイベント「ソフトウェア品質シンポジウム2022」がオンラインで開催され、その企画セッションとして行われた和田卓人氏による講演「組織に自動テストを書く文化を根付かせる戦略(2022秋版)が行われました。 講演で、企業の業績はソフトウェアの開発能力に左右されるようになってきていること、その開発能力を高める上で重要なのがコードの「テスト容易性」や「デプロイ独立性」であると和田氏は指摘。その上で、それを実現させるような「自動テストを書く文化」をどうすれば組織に根付かせることができるのか、講演の後半ではこの本質的な議論へと踏み込みます。 本記事は、2時間におよぶこの講演をダイジェス
OSSライセンスでは コピーレフト の概念があります。OSS を利用・改造してもよいけど、OSS の普及・共有を目的として、OSS を利用・改造した場合は、利用・改造したソースコードも同ライセンスのOSSとして公開することを義務付けるものです。コピーレフト型ライセンス としては GPL、AGPL 等があります。準コピーレフト系ライセンス としては、利用しただけであれば公開の義務はないけど、改造した場合は義務付けるもので、LGPL, MPL などがあります。非コピーレフト型ライセンス はこれらの制約がなく、縛りの少ないライセンスで、MIT, BSD, Apacheライセンス などがあります。 形態 ライセンス 利用者への コード公開 利用物の コード公開 改造物の コード公開 ライセンス 明記 改造・複製・再配布・商用利用
{ "runtime": "nodejs14.x", "handler": "index.js", "launcherType": "Nodejs", "shouldAddHelpers": true } 詳しくは後述しますが、ここでのポイントは、 .vercel/output/functions というディレクトリ構造が存在する その直下に index.func というディレクトリが存在する index.func の内部に .vc-config.json という関数の設定ファイルが存在し、ランタイムなどが定義されている index.func の内部に関数の実体である index.js というファイルが存在する などです。こうした要件を備えた .vercel ディレクトリは、vercel deploy --prebuilt コマンドによって Vercel へと直接デプロイすることができます
新しいiPhoneへ乗り換える際、データを移行する必要があります。 移行するデータは、写真や連絡先、使用していたアプリなど、さまざまなものがあります。iPhoneにデータを移行するには、iCloudやiTunesにバックアップを取って復元する方法がありますが、iCloudは50GB以上をバックアップするには有償のプランを契約する必要があり、iTunesを使う場合はPCにバックアップ用のストレージを確保しておく必要があります。 今回はデータ量や使用料金を気にせず、iCloudやiTunesより手軽にデータ移行する方法「クイックスタート」をご紹介します。 データ移行する前の注意点 一部のアプリデータはクイックスタートでは移行されません。まずは、本体のデータ移行をする前に、アプリごとに引継ぎ作業や再ログインを行う必要があります。例えば、LINEやSuica、Googleアカウント、スマホゲームな
野菜や果物を多く食べる人は、そうでない人と比べ、20年以内に死亡するリスクが7~8%低かったとの研究結果を国立がん研究センターと横浜市立大のチームがまとめた。ビタミンや食物繊維を豊富に含む野菜や果物の摂取は健康のために重要とされるが、国内の大規模調査で裏付けされたのは今回が初めてという。 【図表】日本人の平均寿命の推移 研究は、全国11地域に住む40~69歳の男女約9万5000人が対象で、1995年か98年に食事に関するアンケートに協力してもらい、その後の約20年間を追跡した。調査期間中に約2万4000人が死亡した。 アンケート結果から参加者ごとに1日あたりの野菜と果物の摂取量を推計し、最も多いグループから、最も少ないグループまで五つに分けて死亡リスクを解析した。その結果、果物では摂取量が最も少ないグループより、最も多いグループでは8%低かった。野菜も同様に7%低かった。
背景 Dockerコンテナを立てたらマルウェアに感染したのでサイバーセキュリティの啓蒙を兼ねてメモ書きしてみました。 注意事項 マルウェアに感染した被害の対処方法を記述しています。マルウェア自体の機能や解析の解説ではなく一般利用者ユーザーの視点から感染経路と対応方法についての記述になります。 マルウェア感染状況 症状 Dockerコンテナを稼働させたホストのロードアベレージ(CPU負荷)が常時4を超える状況になっていました。つまり400%でホストがフル回転してた訳ですな。 例えるならエヴァンゲリオン初号機が暴走してマヤちゃんがコンソール画面に向かって叫んでいるところです(違) こうなるとクラウドサービスのAWSとかだと英文で警告アラートが飛んで来ますし毎日課金されで膨大な利用料金請求が来ることになります。恐ろしい!! 状況の調査 CPUの利用状況やメモリの使用量などを調査するツール類があり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く