クレカ情報の流出があったタリーズオンラインストアのWebアーカイブから原因を特定した猛者が現れる→集まった有識者たちにより巧妙な手口が明らかに
あらおじ @ojigunma すごい タリーズの原因発見してる人いる 確かにナンカある slick.min.js という画像をスライドするファイルの中に 難読化された悪意のあるコードが追記されてるっぽい 難読化は４段階ぐらいされてるらしい これブラウザとかセキュリティソフトで気づくのは無理なんだろか。。。 x.com/motikan2010/st… Niishi Kubo | GitLab,Limeboard @n11sh1_ クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy がレスポンスヘッダーにきちんと設定されていれば悪意あるドメインに対しての通信
【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
swiper.js6系使ってみたからそのオプションについて(v6.0.4) | なんかいろいろデザインする人
3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んでたから再々記事。 ※この記事は実装方法が解説しているというよりは、オプションを実際触ってみてその効果をひたすら書いた記事になります。 以前のバージョンの記事も需要ありそうだから残しておく。 【4系】こちら 【3系】こちら ※2系以前と5系は記事にしてないです。許して。 5系についてはオススメサイトのリンクを貼っておくのでよければこちら参考に！ Web Design Leaves様の5系に関する記事 swiper.jsってなんぞ？ swiper.jsの公式サイト 簡単に言うと、スライダー系のJSプラグイン。スライダーはswiper以外にもいくつかあるけど、中でもオプションが多く、更新も多い個人的にはかなり熱いプラグイン。 このswiper.jsのメリットデメリットはこんな感じ。 メリ
slick（スライダー）に関する小技（HTML/CSS/JS） | パオーブログ
前書き HTMLコーディングに使える、slick（スライダー）に関する小技を掲載しています。 slick slickドキュメント翻訳 | slick - にほんご。 目次 見本 其の一 スライドが表示したら何かする 特定のスライドを表示する 見本 其の二 スライドが中央に来たら何かする まとめ 見本 其の一 スライドが表示したら何かする スライド内 表示したスライドにはクラス（slick-active）が付くので、cssで、クラスが付く前と、付いた後の装飾を指定する。 <ul class="slider"> <li class="slide">1</li> <li class="slide">2</li> </ul> /* 初め */ .slide {} /* 表示した時 */ .slide.slick-active {} $('.slider').slick(); スライド外 用意されて
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
A-Frameでgltfモデルにclickイベントを付与する方法
はじめに A-Frameでは、gltfモデルに直接クリックイベントを登録できないため、少し遠回りな方法で実現する必要があります。 結論 gltfモデルを直接クリックすることは現時点ではおそらく不可能 透明な当たり判定オブジェクトを埋め込むことで疑似的にクリック可能にする 当たり判定用のオブジェクトを重ねる。 A-Frameにデフォルトで用意されているcylinder(円柱)やbox(箱)などのオブジェクトには、クリックイベントを登録できます。これを3Dモデルと重ねて当たり判定オブジェクトにしていきます。 イメージはこんな感じです。赤色のcylinderオブジェクトと青色のboxオブジェクトにクリックイベントを登録します。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>hit-box test</title> <s
3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法 【A-Frame と model-viewer】
作った3DデータをWebサイトに埋め込んで、マウスや指で操作し360°閲覧できるようにする方法を紹介します。 実現する方法はいくつかありますが、この記事ではA-Frameと<model-viewer>、2種類のWEBコンポーネントを試しました。 動作デモ まずは動作デモです。マウスか指で、拡大したりグルグル回せます。 ※FirefoxとChromeで動作確認しました。 A-Frame ※モバイルで”Set your browser to request……”というメッセージが表示されていたら、Closeボタンを押すと見られると思います。 < model-viewer > googleのプロジェクトとして開発されたWebコンポーネントです。 自分の作品や製品のPRなんかに使うと、楽しげで良さそうです。 手段の候補 Webサイトに3Dを埋め込むには、複数の方法があります。 大まかにはwebサー
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」と、Rust製の高速なバンドルツール「Turbopack」を発表しました。 Introducing Turbopack, the successor to Webpack. ~700x faster than Webpack 10x faster than Vite Native incremental architecture built with Rust Support f
Next.js + Vercel + Supabase を用いた高速アプリ開発 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス入社１年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsはReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
React/Next.jsでの俺的ベストプラクティスを見てくれ
木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。 この記事で用いる基本的なhooksをいくつか紹介します。 useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => { c
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsの考え方
https://codepen.io/125naroom/pen/KKPYRpQ
AR.jsでボタンを用いたARの物体の切り替え表示ができません。
A-FrameでUI(ポップアップウィンドウ)を作ってみた - すだちキャンパス
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Next.js 2022年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck
