.touch-target {    position: relative;}.touch-target::before {    content: '';    position: absolute;    top: -8px;    left: -16px;    right: -16px;    bottom: -8px;}擬似要素::beforeでタッチ領域のみを拡張タッチエリア対象に合わせて範囲はご調整を

【UX】タッチエリアイベントの拡大【CSS】

claude mcp add azure-mcp npx @azure/mcp@latest server startこの状態では認証できていないので、 /mcpで状態確認しても Connecting...のままです。azure mcp の login statusを確認などで状況を確認してもらえると、ブラウザの認証経由で疎通に成功します。 Refhttps://docs.anthropic.com/ja/docs/claude-code/mcphttps://learn.microsoft.com/ja-jp/azure/developer/azure-mcp-s...

【Tips】Claude CodeにAzure MCPを追加する

Claude CodeとCopilot Custom Instructionsの併用をするため、Custom Commandsを作成した備忘録Quick Tipsです。 .claude/参考ですが、以下の構成にしています。.claude/README.md/.claude/├── CLAUDE.md                        # Claude Codeのmeta data├── commands/                        # Custom commands: 後述├── knowledge/                   ...

Claude CodeとCopilot Custom Instructions併用するためのCustom Commands

現象USキーボードで内部的にUKキーボード判定になってしまっていました。これにより、` が入力できない状態になっていました。 環境macOS Sequoia 15.2（24C101） 解消方法Settings > キーボード > 入力ソース > 日本語 - ローマ字を選択 > 英字のレイアウト > イギリス or U.S. インターナショナルを選択2. そのキーボードに存在されていないキー \を押す3. 何故か解消される・・・。

【macOS】USキーボードなのにUKキーボードになってしまう件

本記事はクソアプリアドベントカレンダー2024の記事です！めでたい10周年ということで参加してみましょう。🎉ということで、瞬き耐久アプリつくった瞬き、していますか・・・？あまりにも無意識にしているので、いざ言われてみるとどうでしょう。まぶたの重み、目の乾燥、感...

【クソアプリ】瞬き耐久チャレンジを作った

夏の音と空夏の日差しとフェスの音。流れるような汗を流しながら、見上げた空にかかる影。#夏の1コマ続きをみる

夏の音と空

Flutterでは、TextSpanの文字を中央揃えするためにWidgetSpanが使用できます。WidgetSpanのalignmentでPlaceholderAlignment.middleを適用します。 RichText(  text: TextSpan(    children: [      WidgetSpan(        child: Text(          '+',          style: TextStyle(            fontSize: 48,            fontWeight: FontWeight.bol...

【Flutter】Centering of Multiple TextSpan

expectLatercompletesFuture<String> fetchData() async {  // do something  return 'finish';}test('fetchData completes without errors', () {  await expectLater(    fetchData(),    completes,  );});https://api.flutter.dev/flutter/flutter_test/expectLater.html

【Dart】async functionでthrowされないことをassertする

概要超特急レビューに関しては以下の記事を参照いただきたい！https://qiita.com/Raugh/items/a9d971bcf0005719aa222024年現在は公式にも「90%のレビューが24時間以内に対応されています」と記載があるが、重大なバグもしくは急ぎのリクエストが必要なシーンがあるためにリクエスト方法を記事にしておく！Note: On average, 90% of submissions are reviewed in less than 24 hours. However, if you’re facing extenuating circumst...

AppStore 超特急レビューリクエスト方法 2024年版

Widget build(BuildContext context) {    final controller = useTextEditingController();    void onControllerChange() {      print('OnControllerChange - ${controller.value.text}');    }    useEffect(() {      controller.addListener(onControllerChange);      return () => controller.remo...

【Flutter】TextInput onChange with editting controller listener

今回は、 Settings > ストレージ > デベロッパ > XCode キャッシュ の削除で起動できるようになった検索すると幾つかの対処方法があるが、今回はApple Developer Forumsのコメントが優勝。https://developer.apple.com/forums/thread/702608その他の参考リンク。https://zenn.dev/blendthink/articles/111dfa86265a34https://qiita.com/kokogento/items/465984cad8624f483782https://...

Unable to Boot the Simulator

cssのgrid gapのようにspaceを指定したくなることは多々あるとおもいます。以下のextensionを使うとそのように指定できるので便利です。import 'package:flutter/material.dart';extension ListSpaceBetweenExtension on List<Widget> {  List<Widget> withSpaceBetween({double? width, double? height}) => [        for (int i = 0; i < length; ...

【Flutter】List に対して grid gap 的にspaceを指定するExtension

FlutterのCustomScrollView内でSliverListを使用していて、リストが空の場合に画面いっぱいに表示領域を確保したい場合。今回は、Emptyもしくは、リストが画面を埋めきらないときにも画面いっぱいに領域を確保したいシーンになりました。具体的にはCTAボタンを画面下部にFloating配置したいときですね。 SliverFillRemainingの使用リストが空の場合、SliverFillRemainingを使用して残りのスペースを埋めることができます。このウィジェットは、利用可能なスペースを埋めるために拡大します。CustomScrollView(  ...

【Flutter】CustomScrollView/SliverListで空きスペースの表示領域を確保したい

Launching lib/main.dart on sdk gphone64 arm64 in debug mode...Running Gradle task 'assembleStagingDebug'.../Users/user/project/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java:184: エラー: シンボルを見つけられませんflutterEngine.getPlugins().add(new io.sentry.flutter.SentryFlutterP...

【SentryFlutterPlugin】シンボルを見つけられません

Dark modeadb shell "cmd uimode night yes" Light modeadb shell "cmd uimode night no"ref: https://stackoverflow.com/questions/68673335/is-there-a-quick-way-to-toggle-dark-mode-in-the-android-emulator

Android emulatorをadbコマンドでダークモード切り替え

はじめに株式会社Awarefyというメンタルヘルス領域のスタートアップでフロントエンドを中心に担当している @nitaking です2023年4月頃に構築したWEBサイトの構築した際の構成の経緯、技術選定、トラブルシューティングを備忘録として記録しておきます。すぐ陳腐化する技術の世界なので（もう半年経って状況変わっているし）スナップショットとして活用ください。また社内ドキュメントにもしてしまおうの趣旨なので、その点をご留意ください 時期2023年4月頃、Next.js AppRouter(appDir)がbetaだった時期 背景メインプロダクトはモバイル...

【Next.js】AppRouter beta時代の技術構成・選定・トラブルシューティングログ

TL;DRparams.valueでnullable判定できなくなったらローカル変数に定義し直したらエラー回避できるよDartにてnullableなプロパティを扱うことはままあるでしょう。そのなかで以下のコードではnullチェックしているのに、nullableな判定が外れず、null assertionが必要になることがあります。if (params.value != null)Hoge(value: params.value) // error! need `value!`しかし、これはローカル変数に再定義することで型エラーは解消されます。final valu...

Dartのflow analysisについて理解する

!本記事で記載している内容は、FutureProviderの場合：ref.refreshFutureProviderFamilyの場合：ref.invalidateを利用することでキャッシュキーを用意しなくともFutureの再試行ができるため、そちらを利用してください。下記コードは動作しません。familyFutureProviderを運用している場合など、特定のキーだけキャッシュをクリアしたい（e.g. この日のデータだけクリアしたい）などの用途が発生したので、備忘録として記載します。clearCacheForKey,clearCacheも生やして外部からキャッ...

【Flutter】キャッシュ付きFutureProvider

develop, mainを最新化せずに作業した場合に、リリースコミットがリリースブランチに乗らないため、元に戻す場合。# sync(reset) origin maingit switch maingit reset --hard origin/main# sync(reset) origin developgit switch developgit reset --hard origin/develop# remove git tag# 1) check remove tag namegit tag# 2) removegit tag -d xxx

git-flow release で 最新化前にfinishしちゃった後作業

fontSizeによって動的に高さを持つらしいのでTextStyle(fontSize: 0)を設定すると高さが消える。また、daysOfWeekHeightに0を指定する。daysOfWeekHeight(..	daysOfWeekStyle: const DaysOfWeekStyle(		weekdayStyle: TextStyle(fontSize: 0),		weekendStyle: TextStyle(fontSize: 0),	      ),	daysOfWeekHeight: 0,);https://github.com/aleksanderwoz...

Flutter Table Calendar: remove dayOfWeek

MaterialButton と Container を利用するとよい。Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('Kindacode.com'),      ),      body: Center(          child: Container(        width: 300,        height: 100,        decoration: const ShapeDecorat...

【Flutter】Gradient Ripple Button

super.keyは新しい構文であり、(Key? key) : super(key: key)に比べて少ないコードで表現できるため、推奨される。super.key is the new syntax, made available in Dart 2.17, which first came with Flutter 3.0. Details are at the release notes: https://dart.dev/guides/whats-new#may-11-2022-217-releaseThe new syntax is much shorter and cle...

【Flutter】Super.key と Key key の違い

1. google-analytics-debuggerのchrome拡張をインストール2. 対象のサイトで検証タブを開くこんな形で、コンソールに送信内容を出力されます！

Google Analyticsのdebug

コチラでございます。import { useEffect } from 'react';/** * 一度入力した後にリロードすると、確認ダイアログを出す。 */export const useOnReloadAlert = (enable: boolean = ...

ブラウザバックで「ちょっと待って」的なアラートをだすhooks

const { pathsToModuleNameMapper } = require('ts-jest/utils');const { compilerOptions } = require('./tsconfig');module.exports = {  //...

jestでtsconfigのpathsを有効化したい

こんにちは。Satoshi Nitawaki です。今年は自身のキャリアについて考える機会が多くなりました。その中で、あらためて自分がエンジニアをやる理由について整理をした上で今年を締めくくりたいと思います。ポエムを書こうと思いますので、キレイな文章ではないと思いますが、思いのまま（記憶のまま）を書きますのであらかじめご了承をばよろしくおねがいします🙏なぜ、エンジニアを始めたのか？続きをみる

僕がエンジニアをやる理由

僕はPull RequestでUIの改修のキャプチャや、TwitterでUIを紹介するときにGifを多用するのでGif録画ツールにいつもお世話になってます。・GIPHY CAPTURE・LICEcap続きをみる

nitaking.dev

About

Tech Post