JavaScript

JavaScriptでIME確定を考慮したEnterキー処理

概要 JavaScriptで「Enterキーが押されたらフォームを送信する」などの処理を実装する場合、e.key === 'Enter'だけではIME変換時にも処理が実行されてしまう。 e.isComposingの値がtrueがどうかをチェックすることでIME変換時かどうかを判定することができるが、残念ながらSafariではIME変換時にe.isComposingの値がfalseになってしまう。 ...

2024.12.02

JavaScript

Selenium IDEで日付操作を完全攻略！取得と入力の方法を解説

概要ブラウザ操作を記録・再生することができるChromeプラグイン「Selenium IDE」で日付を自動入力する方法についてまとめました。結論変数に値を保存「Command」で「execute script」を選択「Target」で「return new Date().toLocaleDateString()」を入力する「Value」に変数名を入力する変数の利用「Command」...

2024.10.01

JavaScript

Selenium IDEで変数を活用する方法：自動化をさらに柔軟に！

概要ブラウザ操作を記録・再生することができるChromeプラグイン「Selenium IDE」で変数を使う方法についてまとめました。結論変数に値を保存「Command」で「execute script」を選択「Target」で変数に代入する値をreturnする「Value」に変数名を入力する変数の利用「Command」で「type」を選択「Target」で要素のセレクタなどを入力...

2024.09.23

JavaScript

[React Native] Androidで「No emulators found as an output of `emulator -list-avds`」となってしまう原因

概要 AndroidシミュレータをインストールしてからReact Nativeアプリをnpx react-native run-androidで実行しようすると「No emulators found as an output of `emulator -list-avds`」となり、実行できないことがある。原因 ANDROID_HOMEなどの必要な環境変数が定義されていないため、エミュレータが起...

2024.01.25

React Native

[React Native] EAS Buildで.apkファイルを生成する方法

概要 React Nativeアプリをeas buildコマンドでビルドすると、デフォルトでは.aabファイルが生成される。.apkファイルを生成したい場合はeas.jsonに設定を追加する必要がある。追加する設定 "production": { "android": { "buildType": "apk" } } サンプル { "cli": { "version": ">= 5.9.1" }...

2024.01.08

React Native

React Native Paperの使い方

概要 React Native PaperはReact Native用のUIコンポーネント集である。インストール npm install react-native-paper babel.config.jsにenvキーを追加（リリースビルドに必要な設定） module.exports = function(api) { api.cache(true); return { presets: , e...

2024.01.04

React Native

[React Native] confirm関数の代わりにAlertコンポーネントを使う

概要 React Nativeではalert関数は使えるがconfirm関数は使うことができない。confirm関数の代用はいくつかあるが、Alertコンポーネントを使うのが最も簡単であると思われる。サンプル import { Alert } from 'react-native'; 〜省略〜 Alert.alert("テスト", "登録してもよろしいですか？", [ {text: "CANCE...

2024.01.01

React Native

[React Native] 下にスワイプしてデータを更新する方法（RefreshControlコンポーネント）

概要 React NativeでScrollViewコンポーネントのrefreshControlプロパティにRefreshControlコンポーネントを渡すと「下にスワイプしてデータを更新」を実装することができる。サンプル import { StyleSheet, ScrollView, ImageBackground, RefreshControl } from "react-native";...

2023.12.28

React Native

[React Native] 背景画像を表示する方法（ImageBackgroundコンポーネント）

概要 React Nativeで背景画像を表示する場合、ImageBackgroundコンポーネントを使う。背景を画像にするだけでアプリがカッコよく見える。 paddingを指定して上下左右の余白に背景画像を表示することで、カッコよく見える。サンプル import { StyleSheet, ScrollView, ImageBackground } from "react-native"; ...

2023.12.25

React Native

[React Native] ScrollViewコンポーネントの使い方

概要 React Nativeでスクロールが必要な場合、ViewコンポーネントではなくScrollViewコンポーネントを使用する。スタイルのalignItemsやjustifyContentを指定するとエラーになるので注意。 keyboardDismissMode="on-drag"とすると、スクロール時にキーボードを閉じることができる。サンプル import { StyleSheet, T...

2023.12.23

React Native