JavaScript

埋め込んだインスタ記事が表示されない！誰でもできる解決策

概要インスタグラムの記事は、「記事の右上のある3点リーダー」>「埋め込み」で表示される埋め込みコード（HTMLタグ）を貼り付けることで、ホームページやブログに埋め込むことができる。ただし、そのまま貼り付けただけでは、以下のようにカメラのアイコンだけ表示され記事が表示されないことがある。これは以下の方法で解決できることが多い。解決方法以下のscriptタグを追加するだけで、インスタ記事が正...

2025.01.10

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