「HTML」に関連する技術ブログ

企業やコミュニティが発信する「HTML」に関連する技術ブログの一覧です。

Google Meetで誰がいないかをすぐに見つけだす拡張機能を作成した

はじめに こんにちは。入会システムチーム高畑と申します。 ニフティでは打ち合わせ等にGoogle Meetを使用しています。Google Meetで打ち合わせ開始時に誰がいて誰がいないのか、全員参加しているかを確認する時間が発生してしまうため、今回は予め作成したリストからMeet画面に出席していない人を表示するChrome拡張機能を作成しました。 Google Meetでは 出席機能 が提供さ

pure selectors must contain at least one local class or id

経緯 css modules ファイル内に、html セレクタを直接記述したらエラーに遭遇したので、原因と解説、解決方法を簡単にまとめました。 やったこと css modules ファイル内で、 <h1> タグ内の文字色を 黄色 にするクラス指定を追記。 import styles from '../styles/xxx.module.scss' export default function Home() { return ( <div className={styles.container}> <h1>Welcome to My app!</h1> // ここの

Prettier の代替として Rome 触ってみた

Prettier の代替として Rome 触ってみた はじめに こんにちは、旅行 PF 部エンジニアの奥田です。 この記事では、Prettier の 10 倍速いと言われるRomeを触っていきます。 ここまで圧倒的な速度を喧伝されては気になるのは人の性…さっそく触っていきます! Rome とは フロントエンド開発のツールチェインを 1 つに統一することを目指しているプロジェクトです。 Babel,ESLint,webpack

Charlesを活用してCSPにGA4のディレクティブを追加してみた

こんにちは、データアナリストの左海です。 今回はパケットキャプチャツールCharlesを活用してレスポンスヘッダーの Content-Security-Policy フィールドにGA4のディレクティブを追加したお話について書いていきます。 課題と背景 Universal Analyticsのサポート終了発表に伴い、弊社でも対象のサービスサイトにてGA4の導入を進めていたのですが、CSP(Contents Security Policy)関連でエラー

【サーバ運用担当者必見!】WebRTCの使用帯域調査方法

こんにちは、テリーです。前記事の続きです。ビデオ会議システムを構築する場合にもっともコストに影響を与えるのが、サーバ側のインターネット回線の通信使用料です。ユーザーとしては画質はきれいでなめらかであるほどよいことが多いで […]

【Yew】Rustでフロントエンド開発 - Rustのマクロを紐解く -

こんにちは、 電通国際情報サービス (ISID) 金融ソリューション事業部の大場です。 今回は、Rustでフロントエンドの実装ができるYewというライブラリを使って Markdown エディタを作った話をします。本記事は、Yewの内部実装に触れながらYewやRustのマクロの動作について理解を深めることを目的としています。これらについて詳しく知りたい方はぜひ本記事を参考にしていた

より綺麗な CSS を書くためには

今回は、チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。 !important を使わない 余分な div は書かない CSS セレクタを深くしない HTML に style を直接指定しない 自分より外のコンポーネントに margin の情報を持たせない まとめ !important を使わない 例えば、以下のようなHTMLがあったとします。 < style > p { color : red !i

Rundeckをインストールして"最速"でJOB実行してみる

こんにちは。 インフラエンジニアをしていますknmriiです。 今回はジョブ管理ツール「Rundeck」の紹介とインストール方法、簡単な使用方法を紹介していきます。 最速でRundeckジョブのテスト実行ができるような記事構成 にしていきたいと思いますのでぜひお試し下さい。 インフラエンジニアの皆様にとって、作業自動化の助けになれば幸いです。 Rundeck Rundeckとは システ

Ruby on RailsでNTLM over HTTPする

このブログ投稿は、 Ruby on Rails でNTLM認証を実装する必要が出たので、その対応と追加調査の記録である。 NTLMにはv1とv2が存在するが、このブログで扱うのは主にv1である。 プログラマ も歩けばNTLMにあたるとはよく言ったもので、この記事を見ているあなたもおそらくうっかりNTLM対応をすることになったITエンジニアの一人だろう。そんなあなたの一助になれば幸いであ

IdPとしてSAML認証機能を自前実装した

はじめに みなさんはじめまして。BASEでエンジニアをしております田村 ( taiyou )です。 先日、BASEではショップオーナー向けのコミュニティサイト「BASE Street」にログインするための機能としてSSOログイン機能をリリースしました。 SSOログインを実現するための認証方式はいくつかあるのですが、弊社ではSAML認証方式を用いて実現しました。 そのため、この記事ではSAML認

アクセシビリティ推進組織立ち上げ後半年間の動き

こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ(以下推進グループ)に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させ

Next.js + Vercel + Supabase を用いた高速アプリ開発

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダ は以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabase

【Salesforce】 Build Your Own (LWR) テンプレートを利用してみた

こんにちは。ISID CIT事業部の熊倉です。 本記事では、 Salesforce の Summer'21アップデートで正式リリース となったExperience Cloudの新しいテンプレート 『Build Your Own (LWR) テンプレート』 について紹介したいと思います。 Experience Cloud は Salesforce が提供しているWebサイトを構築できるサービスで、カスタマーサイトやFAQサイトといった Salesforce の他サービス(主にService Cloudです

世界共通のデザインシステム開発にStorybookを導入した

初めに KINTOテクノロジーズでフロントエンドエンジニアをしているクリスです。普段は多国籍のメンバーが在籍しており、チーム内のコミュニケーションは雑談でも技術的な話でも主に英語で行っているグローバル開発チームに所属して、様々な国に向けて現地サービス及びその裏で利用する管理画面を開発しています。同時に複数のプロジェクトを開発する際は、いか

【HTML】input タグでエンターを押したときに変換かどうかを分岐する

要求 React の以下のようなコンポーネントがあり、 onKeyDownHandler で"文字の変換を確定したときのエンターキー押下"と"それ以外のエンターキー押下"を区別したい。 const Component = () => { const onKeyDownHandler = (e) => { if (e.key === 'Enter') { // これだと全てのエンターキー押下でこのブロックに到達する } }; return <input onKeyDown={onKeyDownHandler} />; }; 解決法 onCo
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?