こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させていただこうと思います。 立ち上げにあたっての話については以前同グループの嶌田が投稿した記事があるのでそちらをご参照ください。 www.lifull.blog 部署

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

社内でWebアプリケーションの要件についての話がされている際のことです。 画像の拡張子について要件があったんですが、そこには基本的にWebPで、表示できないブラウザはPNGにするという旨が記載されていました。 AVIF君かわいそう、その場での私の気持ちは一つです。 そんなわけで、不思議と話に上がらないAVIFフォーマットとそれへの変換、フロントエンド周りの話をしてゆこうかと思います。 AVIF とは AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (Hi

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

初めに KINTOテクノロジーズでフロントエンドエンジニアをしているクリスです。普段は多国籍のメンバーが在籍しており、チーム内のコミュニケーションは雑談でも技術的な話でも主に英語で行っているグローバル開発チームに所属して、様々な国に向けて現地サービス及びその裏で利用する管理画面を開発しています。同時に複数のプロジェクトを開発する際は、いかに開発作業を効率化させることが重要になってきます。今回はフロントエンド側の視点から話したいと思います。 解決したい課題 KINTOサービスは世界中20ヵ国以上に既に展開し

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

はじめに ZOZOTOWN開発本部 ZOZOTOWNアプリ部 Android2ブロックの高橋です。 ZOZOTOWN Androidチームでは、リファクタリングやビルド速度改善の取り組みを継続的に行なっています。本記事では、それらの取り組みの効果を可視化するために導入した、コードメトリクスやビルド時間計測の方法について紹介します。 はじめに ZOZOTOWN Androidチームにおけるリファクタリングやビルド速度改善の取り組み コードメトリクスの計測 メトリクス Cyclomatic Complexit

こんにちは、クラウドインテグレーション2部の加藤ゆです。 今回は、S3の静的ウェブサイトホスティング機能をつかった、ウェブサイト表示手順をまとめていきます。 本記事では、簡単なHTMLをS3バケットに保存し、HTMLを公開します。 S3の静的ウェブサイトホスティング機能とは？ ユースケース 静的ウェブサイトホスティング設定手順 S3 バケットを作成 ブロックパブリックアクセス設定 コンテンツをS3 バケットに保存 静的ウェブサイトホスティング設定 アクセスしてみる～その①～ S3 バケットのアクセス権限設

前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ

基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる

特集「 Xdebug の活用方法」を語る 弊社で毎月開催し、 PHP エンジニアの間で好評いただいている PHP TechCafe。 2022年2月のイベントでは 「 Xdebug の活用方法」 について語り合いました。 弊社のメンバーが事前にまとめてきた Xdebug の基礎知識や使い方の説明資料にしたがって、他の参加者に意見を頂いて語り合いながら Xdebug の活用方法を学びました。 今回はその内容についてレポートします！ rakus.connpass.com 特集「Xdebugの活用方法」を語る

はじめに Cypress 導入、操作手順 テストコードの実装方法 お気に入りポイント TypeScript対応 Custom Commands cypress/support/commands.ts cypress/support/e2e.ts fixture cypress/fixtures/users.json cypress/support/e2e.ts ハマりポイント iframe ドラッグ&ドロップ おわりに はじめに こんにちは。X イノベーション 本部の稲丸です。 みなさんは、E2E

はじめに ニフティでエンジニアをしている添野 翔太です。 ここ最近、 @niftyトップページ システム基盤の刷新を進めていく中で、ニフティの様々なサービスのデータを取得するために、APIをGoで作成していました。 そして、API仕様ドキュメントの管理をどうするか悩む中で、 こちらの記事 （@pei0804さんに感謝）を見つけ、Swagというツールに着目しました。 本稿ではAPI仕様ドキュメントを生成するSwagを導入した際にハマったことを紹介します。 Swagとは API仕様定義に基づくツールセット S

基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスす

こんにちは、イノベーションセンター Agile CoE PJリーダーの岩瀬（以下、iwashi）です。 NTT Comで技術顧問をされており、アジャイルコーチでもある吉羽さん（以下、ryuzee）に「普段からどうやって学んで、どうやって活用しているのか？」という問いを1on1で投げかけてみました。本記事では、1on1模様の一部を公開します。 情報収集やナレッジマネジメントのテクニックが載っていますので、興味ある方はぜひご覧ください。というわけで、早速いってみましょう！ RSSリーダーを使って購読 iwas