Gmailで問題が生じる神奈川県立高校ネット出願システムの被疑箇所を調査、改善策を検討してみた | DevelopersIO
神奈川県高校入試のネット出願システムの不具合影響を受けた利用者として、Gmailを扱えないメール環境について外部から調査しました。 出願システムで独自実装されたメールシステムの不完全な実装と、メール関連のDNSの設定不備が原因であった可能性が高いと推測します。 2024年の神奈川県立高校入試出願システムの不具合の影響を受け、@gmail.comのメールアドレス を利用出来なかった一利用者として、 インターネットから参照可能な範囲で、出願システムのメール環境について調査。 被疑箇所の推定と、状況を改善する対策について検討する機会がありましたので、紹介させて頂きます。 神奈川県公立高等学校入学者選抜インターネット出願システムの稼動状況について MX設定 「mail.shutsugankanagawa.jp」のMXレコードを確認しました。 1/18(21時) $ dig mx mail.shut
メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため）
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
学園祭で売上をリアルタイムに公開するサイトを雑に作ると盛り上がる - いなにわうどん
先日の学園祭で友人のオタク達とやきそばを焼いて原価ギリギリで売ったところ予想以上の盛況でした*1。色々と工夫点はあったのですが、その一つとして売上杯数を Web 上で登録してリアルタイムで雑に public internet に公開するという試みをしてみところちょっと盛り上がったため、その経緯を書いていきたいと思います*2。 つくったもの 会計を登録するシステムとその集計結果を表示する Web サイト（＋付随する簡単な API）を作りました。フロントエンド側のコードは GitHub 上に公開しています*3。 github.comサイトは以下のページから構成されます。フロントエンドはすべて public になっているため、簡易的な認証として API 側で Authorization ヘッダ内のトークンの有無を検証し、不正なトークンが送付された場合は 401 を返す設計としました*4。 トーク
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
UDデジタル教科書体のバリエーション
Windows10 以降のWindowsに標準搭載されるようになった「UDデジタル教科書体」というフォントがある。游ゴシックに並んで書体が美しいフォントで、そこらへんのチラシや張り紙などで濫用されているのをよく目にするだろう。 だがUDデジタル教科書体はバリアントが6種類もあって、それぞれがどんなフォントなのかわかりにくい。Word でバリエーションを選ぼうとすると、一覧にはこんな風に並ぶ。 UD デジタル 教科書体 N-B UD デジタル 教科書体 NK-B UD デジタル 教科書体 NK-R UD デジタル 教科書体 NP-B UD デジタル 教科書体 NP-R UD デジタル 教科書体 N-R フォント名を単純に昇順で並べただけで、バリアント順になっていない。これでは何がなんだかわからないので整理してみよう。書体名和文欧文ウエイトUD デジタル 教科書体 N-R等幅等幅標準UD デジ
“楽天離れ”が加速…「若者から圧倒的に支持される通販サイト」と分かれた明暗――2023年大反響トップ5 | 日刊SPA!
2023年、反響の大きかった記事からジャンル別にランキングを発表。身近な企業・ニュースの裏側に迫った「経済」部門、第3位はこちら！（集計期間は2023年1月～10月まで。初公開2023年8月27日 記事は取材時の状況。ご注意ください） ＊ ＊ ＊ 筆者（田中謙伍）はAmazon日本法人に新卒入社し、現在はAmazonで商品を出品する企業のコンサルティング会社を経営している。 Amazon日本法人在籍中に副業でAmazon内で商品を出品し3億円を稼ぎ、現在はAmazon内でヒットする商品の成功要因を分析できる立場を活かし、日刊SPA!では「ヒットする商品の背景」についてお伝えしていきたい。 今回は、日本で急成長している海外ECサイト「Qoo10」と、苦境に陥っている「楽天市場」を比較してみたい。浮かび上がってきたのは、あまりに好対照で残酷な真実だった。 Qoo10はアメリカに本社を置くグ
テキスト生成AI『Claude』が提供する60以上の「プロンプト集」が使える！すぐに苦手な仕事を自動化せよ | ライフハッカー・ジャパン
「これ、マストだわ」モニター購入して気づいた、あったほうがいい周辺機器4選 #Amazon新生活セール
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
Gmailに届かない神奈川県立高校入試のインターネット出願システムのメールを調べてみた | DevelopersIO
Gmailに届かないと報告されている2024年神奈川県立高校入試の出願システム自動返信メール、 2024年1月15日にYahooメールに届いたメールヘッダー情報などから、送信ドメイン認証(SPF、DKIM、DMARC)の確認を試みました。 2024年2月の神奈川県立高校の受験を予定している家族から、 "インターネット出願システムの登録を試みたが、システムからの返信メールがGmailのアドレスが届かないため、代わりにYahooメールを利用した。" との報告を受けました。 今回、2024年1月15日にYahooメールで受信したインターネット出願システムのメールを調査する機会がありましたので、紹介させて頂きます。 2024年1月19日 追記 ネット出願システムの不具合解消後のメールの調査結果を公開しました。 2024年1月18日 追記 ネット出願システムのメールサーバ側の問題について調査結果を公
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
【セキュリティチームブログリレー2回目】 こんにちは。エンジニアリンググループの山本です。 セキュリティチームは、エンジニアリンググループ全体のセキュリティを向上させるためのバーチャルチームなのですが、各プロダクト開発チームのサービスをチェックして、協力しながら全体のセキュリティを向上させていくのがミッションです。 そのお仕事の一環として「この部分、セキュリティヘッダが足りないから入れてください！」というやりとりを日常的に行なっています。 今日はこの「セキュリティヘッダ」というものが一体何なのか、今さら人に聞けないアレコレを取りまとめてみたいと思います。 セキュリティヘッダ警察の日常の図(もちろん冗談です) セキュリティヘッダ そもそもセキュリティヘッダとは？ 比較的安全なセキュリティヘッダ X-Content-Type-Options X-XSS-Protection Strict-Tr
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
RFC9460が出ました 昨年、このエンジニアブログでHTTPSレコードについてとりあげました。これを書いたときはHTTPSレコードはまだインターネットドラフトだったのですが、2023年11月、ついにRFC9460として標準化されました。 RFCにはなったけど日本語の詳しい記事はまだ少ないし需要あるかなーと思って改めて解説を書きはじめたんですが、だらだらとクソ長くなって書いた本人が読んでも眠くて退屈な内容になってしまいました。ので、書いたものはばっさり捨てました。 そういえばいまから3年前、DNS Summer Day 2021で発表したプレゼン資料がありました。これをRFCになった現在の内容にあわせてアップデートしたほうがてっとりばやいしわかりやすそうです。 ということで、加筆修正した資料を置いておきます。DNS屋さんはとりあえず全部読んでおいてください。Web屋さんは前半だけ理解してお
デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サイト様にライセンスを得て翻訳しています。 2023年、ロゴデザインのトレンドの傾向 花々を新しい解釈でデザイン「Wildflowers: ワイルドフラワー」 存在感のある流体の形状「Bloblend: ブロブレンド」 焦点の合った要素と合っていない要素をブレンド「Fades: フェード」 三次元の形を表現する「Foreshort: フォアショート」 上昇を表現する新しいデザイン「Thrust: スラスト」 自然界の神聖な数式から生まれた形「Spirals
「どうカーソルを動かしたか」「どこをクリックしたか」「どの部分をスクロールして読み飛ばしたか」などのアクセス情報を全て入手し解析・分析できるオープンソースのアプリ「highlight.io」を使ってみた
ウェブアプリの開発をする時、ユーザーに「どこが分かりにくかったか」や「どこでエラーが発生したのか」などの情報をフィードバックしてもらいたいものですが、そうしたフィードバックを送る作業はなかなかに面倒なもので、全然直接のフィードバックは来ないのにTwitterにはいろんな意見が書かれている……ということはよくあります。「highlight.io」はそうしたフィードバックを勝手にやってくれるツールということで、実際に使って試してみました。 highlight.io: The open source monitoring platform. https://www.highlight.io/ highlight.ioはオープンソースということでセルフホスト版が用意されていますが、今回はどんな機能があるのかについて確かめるためhighlight.ioの開発元が提供するSaaSを利用します。公式サイ
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
Amazon Web Services（AWS）は、サービスを外部に公開するためのパブリックなIPv4アドレスを使用する場合に、1時間あたり0.005ドルの課金を2024年2月1日から開始することを発表しました。 1時間当たり0.005ドルは1日当たりに換算すると0.12ドル、1カ月を30日とすると1カ月当たり3.6ドル。1ドル140円換算で1カ月当たり504円となります。 希少資源となるIPv4アドレス インターネットで広く使われているIPv4アドレスは数に限りがあり、12年以上前の2011年2月には管理団体からの配布が終了しています。 参考：［速報］インターネットの歴史に刻まれる、最後のIPv4割り当てセレモニーが終了 つまり、クラウド事業者やデータセンター事業者などが利用者に提供しているIPv4アドレスは、以前から事業者が所有していたか、もしくは何らかの方法で他のユーザーや事業者など
Galileo AI
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
コボラーだったワイが、 「いつまでもCOBOLってのもな……最近はWeb開発が流行っとるらしいしそっちに転向や！」 つって当時は最先端だったFlashを必死で覚えてデザイナースクールにも通ったのに、 今、再びCOBOLで金融系システムの保守業務に携わっている。 なんでワイはFlashじゃなくてJava Servlet方面に行かんかったんや…… そっちやったらフレームワークとかにも対応して行けたやろうに、 FlashとHTMLに特化してしまったばっかりに。 adobe絶対に許さない。
マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行
マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。 具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Image credit: Relume ワンセンテンスの Web デザインは、もはや夢物語ではない。Wix、Weebly、Webflow のテンプレートを使えば、自分のスタイルで Web サイトを組み立てることができる。 しかし、これはレイアウトに限ったことではなく、Web サイトの構成を考え、各ページの内容も、訪問者を惹きつけるために慎重に設計する必要がある。例えば、「About」ページでは、サービス紹介やビジネスストーリー、将来のビジョンなどを掲載するため、コンテンツの設計に手間がかかる。 この問題を解決するために、デザインスタートアップ Relume は、AI が生成する Web サイトデザインプラットフォーム「Relume Ipsum」を開発した。これにより、数週間から1ヶ月程度かかっていた Web サイトを完成させるまでの作業負荷をわずか数分にまで軽減することができる。このプロ
自分がニッチだと思っているテーマについて発表する「Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜」。ここで株式会社SonicGardenの遠藤氏が登壇。LambdaとFargateを組み合わせた実行環境について話します。 遠藤氏の自己紹介 遠藤大介氏：今日は「AWSのLambdaとPlanetScaleを組み合わせると、超絶スケールするWebアプリを作れちゃうぜ」という話をしていこうと思っています。 最初に自己紹介です。遠藤と申します。SonicGardenという会社で、プログラマーと執行役員をやっています。インフラと機械学習などが好きで、趣味もプログラムで仕事もプログラムな感じの人間なんですが、最近は機械学習周りが盛り上がっているので、そっちもいろいろやっています。 あと、ロードバイクに趣味で乗っているのですが、最近ちょっと乗れていません。それから
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
こんにちは！JADEの郡山です。 2023年7月から従来のバージョンのGoogleアナリティクス「ユニバーサルアナリティクス」が順次計測を停止していき、いよいよGA4へ完全移行する段階が訪れました。 同じ「Googleアナリティクス」というアクセス解析ツールではありますが、UAとGA4は計測する仕組み（仕様）がまったくの別物となっています。 ゼロからGA4を学び、向き合い、活用することが求められるわけですが、 一方で「UAではこういう仕組みでデータを集計していた」という知識をお持ちの方ほどUAとGA4の仕様の違いに頭を悩まされることも多いのではないでしょうか。 今回はGA4の基本的なデータである「ユーザー」指標について、 UAとGA4でどのような仕様の違いがあるのかを解説してみます。 管理画面に表示されているデータは、一体どんな仕組みで集計されたものなのか。 その仕組を、（基本的な部分だけ
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
カプコンタウン
ミュージアム 原画や設定資料などを大公開！ 懐かしい映像などもご用意していますので 是非のぞいて見て下さい。
AI動画生成が結構いいところまできた。 Runway-MLのGen2も素晴らしいのだが、オープンソースのZeroscope-v2-xlがすごい 音楽もmusicgenで大体作れる これまで音楽生成には否定的だったが、ここまで作れるなら、DJ機材用のループ素材として十分使える気がする。というか30秒も作れるのでループでは勿体無いというか。「久石譲っぽく」とか「ジョン・ウィリアムズ風」とかでそれっぽいものが出てくる。
9/7 タイトルを修正&一部加筆しました。 非エンジニアでもできる！ウェブ地図サイトの作り方 → 非エンジニアの自分がウェブ地図サイトを公開するまで こんな風にグリグリ動かせるウェブ地図サイト、作ってみたいけどハードルが高いなぁ…という方もいらっしゃるのではないでしょうか。 実際、自分もサイトを作るまではそう思っていました。 しかし意外と簡単に、オープンソースのソフトのみで作れてしまうんです！ （サーバ代や取得するのであればドメイン代等はかかりますが…） 非エンジニアのデザイナーの自分ですがサイト公開までできたのでやり方を共有します！ ※自分のスキルとしては関してはgithubもVScodeも使えない、CSSとhtmlぐらいならツギハギでなんとか…(10年前ぐらいの知識)というレベルなので、特に後半のサーバ周りに関してもっと楽なやり方があるかもしれません。 QGISで地図を作る 一番の肝は
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
無料で商用にも使える日本の郵便番号APIをリリースしました
「しずかなインターネット」の技術スタックを調べる - laiso
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
セキュリティヘッダ警察です！既に包囲されている！観念してヘッダを挿入しなさい！ - エムスリーテックブログ
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
HTTPSレコードがRFCになりました | IIJ Engineers Blog
2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
htmxとは何なのか？ その背景にある思想について - Qiita
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
AWS、IPv4アドレスの使用に課金、1時間当たり0.005ドル。2024年2月1日から
Webサービスを作るときのテンプレートを作った - hiroppy's site
Flashほど一時代を築いた割りに本気で使えなくなった技術ないだろ
AWS Lambda×Fargate×PlanetScaleを組み合わせれば、超絶スケールするWebアプリを作れる 約2ドルから作れる“ニッチで俺得な”環境の布教
関数名、メソッド名、変数名でよく使う英単語のまとめ - LOCAL-C BLOG
紙っぽいかわいいWebサイト作りたい - Qiita
UAとGA4の【ユーザー数】カウント方法をめっちゃ丁寧に解説します - ブログ - 株式会社JADE
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
AIで動画&音楽生成はここまで来た!｜shi3z
非エンジニアの自分がウェブ地図サイトを公開するまで - Qiita