こんにちは。QAエンジニアのTHです。 普段からGoogle Chromeをウェブブラウザとして使用されている方は多いと思います。 このGoogle Chromeにはデベロッパーツールと呼ばれる機能があります。 一般ユーザーとしてウェブサイトを閲覧するだけの人は使うことのない機能ですが、ウェブ開発や検証においてはとても便利なツールです。ウェブ開発や検証に携わったことのある方は一度は見聞きしたことがあるのではないでしょうか？ 本記事が下記のような方にとって Chromeデベロッパーツール 使い始めの第一歩と

こんにちは。株式会社 エニグモ にてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button

こんにちは、ミイダステックオフィスです。 今回、私たちはHTMLメール制作の効率化を目的に「MJML」の導入を行いました。 MJMLは、従来のHTMLメール制作の課題を解決し、作業の効率化を実現する技術です。この導入によって、どのブラウザやメーラーでも一貫した表示が得られるようになり、実装作業の時間短縮と品質の向上が実現しました。 この重要なプロジェクトを牽引した鷲見さんに、MJML導入の背景、プロセス、そして具体的な成果について詳しくお話を伺いました。

概要 マイナビエンジニアブログの記事をスクレイピングして、更新される度に通知が飛ぶプログラムをGASのライブラリであるCheerioで作りたい！！ 前提 マイナビエンジニアブログを自動通知したいと思うときがきっと来るはず。。。 そんな時に役立つのが、今回紹介するCheerioを使ったスクレイピングの技術です！！ 流れとしては、GASとスプレッドシートを紐づけてGASでURLをスクレイピングした後に、スプレッドシートのURLと照合して、もしURLが一致していたら、スプレッドシートに書き込みとGmail通知を

はじめに

こちらの記事は カケハシ Part1 Advent Calendar 2023 の8日目の記事になります。 こんにちは！ カケハシでMusubi Insightの開発を行っている高田です。 Musubi Insightは、立ち上げ当初よりフロントエンドフレームワークにAngularを採用していましたが、この度、React（Next.js）にリプレイスしました。 今回は振り返りも兼ねてその経緯やリプレイスまでの流れ、リプレイスを通して得られたメリットなどをまとめていきます。 ※技術的な内容はまた別記事にまと

本記事は TechHarmony Advent Calendar 12/3付の記事です 。 こんにちは。SCSKの川原です。 皆さんは、ウェブサイトを訪れた際、期待したページが表示されずフラストレーションを感じたことがありませんか？ 今回は、そんなネガティブな体験を改善するカスタムエラーページをAmazon CloudFrontのカスタムレスポンス機能を用いて設定する方法についてまとめてみました！ Amazon CloudFrontのカスタムレスポンスについて Amazon CloudFrontのカスタム

はじめに ITD 2部1課 のM・Sです。 CSS Gridを学ぶ際に、面白いサイトを紹介していただいたので共有させていただきます。 そもそも、CSS Grid とは？ CSS Grid Layout（グリッドレイアウト） は、二次元のレイアウトをCSSで自由に操作できる機能です。 格子状のマス目にグリッドを好きな順番におけたり するので複雑なレイアウトを従来よりも簡単に実装することができます。 ↓みたいなレイアウトを簡単に実装できる。 なぜグリッドレイアウトがいいのか 従来のWebサイトでは、 flex

はじめに こんにちは、KINTOテクノロジーズの開発編成本部に所属するカンです。2022年1月に入社し、これまでサイト再構築というプロジェクトを進めてきました。 KINTOをご利用いただくお客様が増えるにつれ、様々なサービスを拡充しようとしており、既存サイトでは迅速な機能追加を行う上で様々な問題点を有していたため、これらの問題の解決と改善のためのサイト再構築プロジェクトが今年 8月にリリースされました。 本稿では、私が所属しているサイト再構築のフロントチームについて紹介したいと思います。 サイト再構築FE

おや... このページにも雪がふってきましたね... これは BASE Advent Calendar 2023 の1日目の記事です。 なんだかさいきん寒いなぁと思っていたら、ついに雪がふってきてしまいましたね！ このはらはらと舞い落ちる雪の結晶、HTML と CSS で作れちゃいます。 そして BASE には HTML 編集 App という機能があります。この機能を使うと...？ snowrry.base.shop ↑のデモショップのように、ショップに雪をふらせることができちゃいます！是非これからの季節

はじめに 株式会社マイナビでは実際の仕事を数か月かけて体験していただく就業型インタ―ンシップを実施しています。 本記事はインタ―ンシップに絶賛参加中のK君に就業型インターンシップに参加したきっかけや、実際に参加して経験した業務などをインタビューをさせていただいた内容について記載をします。 自己紹介 情報系の学部に所属している大学3年生です。 大学1年生の時に、HTML／CSS・JavaScriptを授業で習いプログラミングに興味を持ちました。勉強し始めた当初は中々うまくいかず難しいな、と感じていましたが一

自己紹介 KINTOテクノロジーズ（KTC）でアプリケーションエンジニアをしているJLと言います。現在はグローバル開発グループのフロントエンドチームに所属しています。 日本に来る前はフィリピンで3～4年働いていました。最初は水産業界でテクニカルサポートとして、その後は金融セクターでソフトウェアエンジニア（アソシエイト）として働いていました。 フロントエンドとビジネスサイドの両面からプロジェクトに携わることで、Webやバッチ処理、ビジネスプロセスにおける開発経験を積むことができました。使用していたのは主にJ

はじめに こんにちは、DevRelブロックの ikkou です。11月6日に「ZOZO Tech Meetup - Webフロントエンド」と題したWebフロントエンドに特化したオフラインイベントを開催しました。 zozotech-inc.connpass.com 目次 はじめに 目次 当日の登壇内容 アイスブレイク ZOZOTOWNにCSS in JS（Emotion）を導入して1年後の状況 React でコンポーネントを利用したテストをゴリゴリ書く ゼロから始めるアクセシビリティ啓蒙活動 現代のReac

こんにちは。LINEヤフー株式会社でテキストマイニングや自然言語処理などをやっている山下（ @yto ）です。 Yahoo!デベロッパーネットワークのテキスト解析 Web API が CORS（Cro...

こんにちは！ 株式会社ココナラ フロントエンド開発グループのよしみんです。 本記事では、Vue.jsを使用して入力フォームのテキストエリアにリアルタイムでハイライト機能を自前実装した話をしたいと思います。 なぜ自前実装？ テキストエリアにハイライトなんてcssでつければいいんじゃないの？ テキストエリアにcssで装飾することはもちろんできますが、入力した文字に対するハイライトのような装飾の仕方はできません。 ライブラリを使えば簡単に実装できるのでは？ Vue.jsでテキストエリアにハイライトをつける機能の