ニュース： LINEミニアプリにおいて、2025年10月よりすべてのユーザーがウェブブラウザでサービスを利用できるようになりますLINEミニアプリにおいて、現在は日本、タイ、台湾以外のLINE未使用ユーザーがウェブブラウザでサービスを利用できます。2025年10月より、すべてのユーザーがウェブブラウザでサービスを利用できるように仕様を変更する予定ですのでお知らせします。 仕様変更予定日 2025年10月 内容および日時は、予告なく変更される可能性があります。 変更点 スマートフォンのウェブブラウザからLINEミニアプリを開...
Astro プロジェクト環境構築メモ
以下の環境でプロジェクトを作成。 Node.js 20.10.0 Pnpm 8.14.0 インストール まずは Astro プロジェクトをセットアップ。 Where should we create your new project? -> プロジェクト名を入力して Enter How would you like to start your new project? -> Empty を選択 Install dependencies? -> Yes を選択 Do you plan to write TypeScript? -> Yes を選択 How strict should TypeScript be? -> Strict (recommended) を選択 Initialize a new git repository? -> すでにリポジトリ準備済なら No を選択 -> リポジ
2024 VSCodeのおすすめテーマはこれだ！
VSCode(VisualStudioCode)の外見を変えて画面を見やすく&おしゃれにカスタマイズできる配色テーマを集めました。 テーマは新しいものが次々に公開されているので、ずっと使ってるテーマから乗り換えると意外と使いやすかったりします。 このページでは2024年最新のVSCodeテーマを紹介します。 -> こちらも合わせてどうぞ「2024 VSCodeのおすすめ拡張機能まとめ」 VSCodeのテーマ設定方法 VSCodeのテーマを紹介する前に、テーマの設定方法やインストール方法をさくっと解説しておきます。 VSCodeでテーマを変更するには以下の手順を実行します。 テーマをインストール テーマ設定画面を開く テーマを選ぶ 以下で詳しく解説します。 1.テーマをインストールする VSCodeを開いて右側のアイコンメニューから拡張機能をクリックして拡張機能パネルを開き、入力フォームにテ
見やすさで選ぶ Visual Studio Codeのおすすめテーマ
はじめに Visual Studio Code(以下、VSCode)は柔軟にカスタマイズができるプログラミング エディターです。機能をアドインして使いやすさを追求することができるだけでなく、見た目についてもこだわりを持ってカスタマイズされている方も多いと思います。 今回はVSCodeのテーマについて個人的なおすすめを紹介します。 テーマ選びは目に優しい（チカチカしない）、文字が読みやすい、楽しくプログラミングできるということが重要かなと個人的に、これらを意識して選びました。 おすすめテーマ GitHub Theme GitHubがリリースするVSCodeのテーマです。 ダーク系とライト系の７種類が用意されています。 GitHub Light Default GitHub Light High Contrast GitHub Light Colorblind GitHub Dark Defa
Playwright MCPとCursorで、E2Eテストを自動生成してみた 〜AI×ブラウザ操作の新アプローチ〜
概要 Playwright MCPとCursorを活用し、E2Eテストをゼロから自動生成してみました。 本記事ではその検証プロセスと得られた知見を紹介します。 この記事で分かること Playwright MCPでE2Eテストを自動生成する方法 Playwright MCPの活用のヒント はじめに 昨今のMCPブームは収まることを知らず、日々新しいMCP Serverが公開されています。 そんな中、自動化テストツールとして有名なPlaywrightのMCP Serverが公開されました。 Playwrightには、既にユーザーがブラウザを操作しテストを生成できる非常に便利な機能がありますが、今回はそれを超えるために、ユーザーの代わりにCursor（MCP Client）を使用し、ブラウザの自動操作とE2Eテストの自動生成を行えるのかを検証しました。 検証環境 Cursor: claude-s
Astro でリンクや参照などを相対パスでビルドする
はじめに まず、Astro では、相対パスでの生成は公式的には対応しておりません。 上記の issue と提案は上がったことはあるものの、現在は close されており、やり取りの中身を見ても、公式がサポートすることはあまり期待できなそうです。 個人的にも、こういった汎用的なフレームワークはやはり絶対パスのほうが何かと無難です。それは開発する側でも使う側でも。ですので、特殊な事情がないかぎりは絶対パスか絶対 URL を推奨します。 ただ、静的書き出しができるフレームワークにおいて、相対パスの需要も理解できます。 まず結論 プロジェクト内のリンクや参照を全部相対パスにして問題ないということであれば、astro-relative-links という Astro integration (Astro のプラグインみたいなもの) を作りましたので、こちらを使えば実現できます。使い方は後述。 要件
WordPressにサイトマップは必要？作成と登録する方法を解説
この記事は以下のような人におすすめ！ サイトマップとは何かを知りたい人 サイトマップの種類や必要性が知りたい人 サイトマップを作るおすすめの方法が知りたい人 この記事を読むと、サイトマップの基礎知識だけでなく、ブログ運営を始めたときにどんなサイトマップを作るべきかがわかります。 サイトマップを設定すると、ユーザーの利便性が向上するだけでなく、Googleなどの検索エンジンに認識されやすくなります。 とはいえ、ブログを始めたての方であればまず記事作成を優先でOK。 慣れてきたらサイトマップの作成に着手してみてくださいね。 それでは、どうぞ！
Sentryで始めるエラートラッキング | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はMisskeyで使用可能なサードパーティのエラートラッキングサービス、Sentryとその活用について紹介します。 エラートラッキングとは Misskey 2024.5.0から、外部のエラートラッキングサービスとしてSentryをサポートするようになりました。 エラートラッキングサービスは、ソフトウェア内で発生したエラーを一元化して収集・管理できるサービスです。Misskey Projectでは開発用のステージング環境を用意しており、そのサーバー内で発生したエラーを捕捉し、開発チーム内で共有する必要があったため導入しました。 エラートラッキングサービスはいくつか存在しますが、SentryはWebブラウザ・Node.jsのほか、様々なプラットフォームで動作します
HTMLガイドライン | ディーゼロ フロントエンドガイドライン
HTMLガイドライン 🔰 当ドキュメントは「コーディングガイドライン」の一部です。 基本的なガイドライン・ルールについては先にそれから確認してください。 🎯 HTMLガイドラインの目的 HTMLのガイドラインは次の3つを主な目的として規定します。 セマンティック・アクセシビリティ コンテキスト（文章などの前後の脈絡・文脈）によって最適なマークアップができること普遍的でアクセシブルなマークアップができること一貫性 一貫したルールがあることで個人の好みや矜持による品質のバラツキを抑えることプロジェクトをまたいでも混乱が少ないことメンテナンス性 デザインの変更に対して柔軟で応用が効く汎用的な作りであることコンポーネントの単位で影響範囲を把握しやすく管理できることHTMLの品質を支える規格 次の規格やガイドラインを参考に最適な実装をしていきます。 HTML Living Standard
【入門】Prismaを始めるときに押さえておきたいポイントまとめ
この記事では、モダンなアプリケーション開発において欠かせないツールとなりつつある「Prisma」について、詳しくお話ししていきます。 従来のORM（Object-Relational Mapping）ツールには、いくつか課題がありました。 こういった課題を解決するために登場したのが、Prismaです。この記事では、Prismaの基本から実践的な使い方まで、じっくり解説していきます。対象読者は以下の方々を想定しています。 データベース操作をもっと楽にしたいと考えている開発者の方々 より型安全なアプリケーション開発を目指している方 新しい技術にチャレンジしたいWeb開発者の皆さん Prismaとは？基本概要と主要用途の解説 Prismaの定義と特徴 Prismaの主な特徴は以下の通りです。 型安全性: TypeScriptとの相性抜群！データベースの型がそのままコードに反映されます。 直感的な
【重要】料金プランの価格改定／統合のお知らせ
---------- 2025/3/19追記 Starterプランの移行先プランを変更しております。該当のお客様にはメールでも追加のご連絡を差し上げております。 ---------- 平素よりmicroCMSをご愛用いただきありがとうございます。 今回は皆さまに、料金プランの価格改定と、一部プランの廃止についてお知らせいたします。 現在ご利用中のお客様には、このたびの変更によりご面倒をおかけすることとなり、誠に申し訳ございません。 重要なお知らせとなるため、最後までご覧いただきますようお願い申し上げます。 改定日2025年6月10日（火） ※ 改定項目によって適用タイミングの詳細が異なるため、下記のご案内をご確認ください。 改定内容のまとめ（4点）１）Businessプラン、Advancedプランの価格改定Businessプラン、Advancedプランの2プランについて、価格を改定いたしま
Astro 5.x への移行はなかなかハマりどころが多い
5系が出たか。 Astroは2.xのときから愛用していて、こまめにメジャーバージョンアップに追従（現状 4.15）してきたし、今回も npx @astrojs/upgrade するだけの簡単なお仕事や・・・と思ったらドハマリ案件でした。 要訳 Content Collectionの仕様が破壊的に変更されました。これがかなりの影響でした。 Content Layer Astro is the best framework for content-driven sites, and with Astro 5.0 we’re making it even better. The Astro Content Layer is a new flexible and pluggable way to manage content, providing a unified, type-safe API
デザイナーとエンジニアの共通の語彙を持つために | 最終回 Figmaでデザイントークンを活用する
デザイナーとエンジニアの共通の語彙を持つために 最終回 Figmaでデザイントークンを活用する 設計したデザイントークンはデザインとコードを橋渡しするものになり得ます。Figmaを使って管理、共有することで、デザイナーはデザインに、エンジニアはコーディングに集中できる環境づくりを試みてみましょう。 前回まで 前回はデザイントークンの設計を「階層化」と「命名規則」をポイントに解説しました。 今回は設計されたデザイントークンを、デザインとコードに連携させるために、Figmaのバリアブルなどを使って、どのように管理、共有して活用できるかを解説します。 Figmaでのデザイントークンの活用方法 ここまでは主にコードを中心としたような話でしたが、デザインとどう連携させるかを考える必要があります。ここからは私がアドボケートを務めるFigmaを活用したデザイントークンの連携について解説します。 Figm
バリアブルの作成と管理
エイリアスを作成する バリアブルのエイリアスを作成し、その値を既存のバリアブルにリンクさせます。これにより、デザイントークンを実装し、デザインの更新管理を効率化することができます。 たとえば、同じカラーバリアブルを参照する複数のカラーバリアブルがあるとします。そのカラーを更新する必要がある場合、そのカラーのすべてのインスタンスを手動で更新しなくても、ソースを更新するだけで済みます。 バリアブルは、同じ種類の他のバリアブルを参照できます。 バリアブルのエイリアスを作成するには: バリアブルモーダルを開きます。 バリアブル値を右クリックして、[エイリアスを作成]を選択します。 [ライブラリ]タブで、エイリアスを設定するバリアブルを選択します。検索バーを使用して名前でバリアブルを検索したり、有効なライブラリを参照できます。 エイリアスを切り離すには、値フィールドにカーソルを合わせ、 [エイリアス
z-index 同士の競合を isolation: isolate; で解消する
本稿は、 ZOZOTOWN 開発本部のフロントエンドエンジニア有志で開催されている、スタイル分科会にて挙がったテーマを記事にしたものです。 この記事で分かること isolation: isolate; がどのような場面で有用かを解説します。 複数のコンポーネントを配置したとき、それぞれの z-index が競合したケースを例に用います。 前提 それぞれ position: absolute; の要素を内包する、 2 つのコンポーネントを横並びで配置します。 デモ メニューに hover してみてください。デフォルトでは、表示される子メニューが他のコンポーネントの z-index に負け、表示が崩れてしまいます。 「z-index の競合を解決する」ボタンを押下すると、子メニューが正しく表示されるようになります。 解説 実装コード 2 つのコンポーネントを、 マウスオーバーメニュー と カー
Tokens Studio for Figma + Style Dictionaryを試してみた
はじめに 🏔 Tokens Studio for Figma(旧 Figma Tokens)で作成したデザイントークンをStyle Dictionaryで変換してみました。 Tokens StudioとStyle Dictionaryについての詳細は省きますが、ものすごく大まかに説明をすると、Tokens Studioは色やフォント等のデザイントークンを管理するためのFigmaプラグインで、Style DictionaryはiOSやWebなどの各プラットフォーム向けにデザイントークンを変換してくれるライブラリです。 詳細は以下ドキュメントを参考にしてください。 やってみよう 🫴🏻 おおまかな流れは以下です。 Tokens Studio for Figmaを用いてFigmaでデザインを作成 作成したデザイントークン(json)を、GitHubのStyle Dictionary用のリポジ
Web3開発者をねらったハッキング手口の全て（わたしは全て抜かれました...）
はじめに 本当に悔しいし許せないし、エンジニアとして不甲斐ないです。2025年2月26日深夜にハッキングにあいました。どのように相手と繋がり、どのような手口でハッカーに資産を抜かれたか、コードベースで全てお伝えします。今後同じ被害に遭う方が少しでも減ることがあればこんな嬉しいことはないです。 コード解説、さらに対策案も書いていきます。もし他に良い対策案などあればコメントでご教示ください。 ハッカーとのやりとりの流れ ハッカーとは Linkedin でブロックチェーンを使ったプロジェクトを手伝ってくれないかという連絡がりそこからやりとりが始まりました。そして移行の大まかな流れは下記のような感じです。 Linkedinでプロジェクトを手伝ってほしいと言う内容でDMがくる Githubリポを見て実装できそうか確認してほしいと言われる 自分のGithubアカウントを共有してプライベートリポジトリに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to disable audio sounds?
Docker イメージ、コンテナ、キャッシュの削除まとめ - Qiita
:has擬似クラスを使用して<select>要素にプレースホルダーを実装する方法
