プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ
  • 2020年10月31日
  • 2020年11月3日

【React.js】フォームのフォーカスを自動的に次に切り替えていく方法

なにがしたいか よくある電話番号などのフォームが3つに分かれているタイプで、3文字入力したら次のフォームへ自動的にフォーカスを移動。次の4文字を入力したら自動的に次のフォームへフォーカスを移動。ということをReactでやりたい。 jQueryなどでは容易だがReactではどうすれば?と思ったのでメモ。 結論 いくつか方法は見つかったが一番簡単な方法。Inputタグにrefを指定し、ReactDOM […]

  • 2020年10月15日
  • 2020年10月15日

formと要素が重なってうまくいかないときの小技

小技、というかcssひとつで解決するんですけどね。 要素に以下をつける なにをするか一言でいうと、要素が選択範囲内にきてもなにもしないよって感じ。 before要素とかでゴチャゴチャ装飾したてformと重なるオシャレなデザインを作ってみたはいいが、いざカーソルを当てるとフォームを選択できない。 さらにz-indexを指定してもうまくいかなかった。ということでこの方法で解決しました。

  • 2020年9月18日
  • 2020年9月18日

【mac】Elixir + Cowboyを使ったアプリ環境構築

はじめに Elixirという言語を使ったアプリケーションのチュートリアルを行います。どうやらElixir + Phoenixというのが一般的なようです。node + Express, ruby + ruby on railsのようなイメージでしょうか。 しかし今回は、Elixir単体でプロジェクトを作成し、Cowboyという高速なWebサーバーを併用しアプリケーションを始めてみたいと思います。 前 […]

  • 2020年8月21日
  • 2020年9月18日

App Storeの販売者名を個人ではなく屋号名にした話

はじめに 初めてのiOSアプリのリリースでいろいろと悪戦苦闘しつつ、晴れてAppStoreにアプリが掲載されるところまで完了しました。 しかし、販売者名が個人名としてフルネームで出ているのが気がかりでした。自分の制作物ならいいが、依頼されて制作した際も自分の個人名が表示されてしまうということなので・・・。 そこで、「Apple Developer Program 及び App Store Conn […]

  • 2020年8月21日
  • 2020年8月21日

初心者向けのSwift、Xcode入門

ネイティブアプリの開発手法として、ReactNative(expo、react-native-cli)とやってきて、せっかくなのでswiftにも触れておこうというのが今回の記事の内容です。 swiftを使ったiOSアプリの環境構築と、基本的な開発方法について、公式Docを元に日本語で書いていきます。 swiftの環境構築 第一前提として必要なのはmac pcそして最新バージョンのXcode Xco […]

  • 2020年8月20日
  • 2020年8月20日

初期不良品?ダイソンクリーナーヘッドのカバーの線について

はじめに ※今回は全く技術系ブログではないです。購入したてのダイソンのコードレス掃除機に傷のようなものを確認したのですが、お問い合わせをしたところ製造時の跡だという回答をいただきました。知らないと傷だと思ってしまったり、使ってるうちにぶつけてひびが入った?と思われる方もいるかもしれないので共有しておきます。 ダイソンクリーナーヘッドの左右にある2本の線 「ヒビ」等の破損や不具合ではなく、透明カバー […]

  • 2020年8月19日
  • 2020年8月19日

お名前レンタルサーバーで使用している独自ドメインをBASEのサービスと併用する方法

はじめに 登録料、利用料が無料のBASE。先日初めてサービスを利用してみたのですが、無料枠の機能の豊富さ、わかりやすいUI、ショップの機能で必要なものだけプラグインのように追加で付与できるAppsという仕組み、全てにおいて素晴らしく気に入りました。 独自ドメインの設定も無料でできるということで早速やってみました。これも操作は簡単!ただ流れ作業的によく読まずに設定進めていた結果少し引っかかってしまっ […]

  • 2020年8月3日
  • 2020年8月4日

react-nativeでの実機確認時に発生したエラー

以下3点で少しハマったのでメモしておきます。 ①react-native run-iosではシュミレータが起動するがxcode上でのrunでこける ②シュミレータでの起動はうまくいくが実機でこける ③特定のパッケージを用いた場合に再びnode:command not found それぞれについて以下の作業で解消することができました。 ①react-native run-iosではシュミレータが起動 […]

  • 2020年7月19日
  • 2020年7月19日

react-nativeでFirebase Authenticationを使った認証を実装

まず、react-nativeにはreact-native-cliとexpo-cliの2通りがありますが、今回は前者のreact-native-cliでのアプリです。まずはAndroid用です。 着地点 自身のアプリケーションにFirebase Authenticationを組み込み、ユーザー情報の認証機能を作るまで。 Firebaseで認証機能の考え方とそのメリット 通常、アプリケーションでAP […]

  • 2020年7月17日
  • 2020年7月18日

react-native-device-infoでエラー【RNDDeviceInfo is null】

はじめに この記事はまだ解決していませんが、自身の整理を兼ねてまとめています。解決できれば更新します。解決済み react-nativeを使ったネイティブアプリ開発にて、端末の情報を取得したいということになりました。 端末情報を取得するためにはreact-native-device-infoというのを使うとできるらしいですが、なにやらうまく行かず・・・。 react-nativeのバージョン、an […]

  • 2020年7月16日
  • 2020年7月16日

【react-native】FirebaseのFCMでpush通知をする方法

はじめに このあたりの知見が全くない方向け。Firebaseすごいってよく聞くけど触ってなかった方や、react-nativeでのpush通知の仕組みがよくわかってない方など。 push通知とは アプリ内通知であれば普通にイメージが湧きますが、端末への通知ってどうすれば?となったときに、いろいろよしなにしてくれるのがFirebase。 使うモジュールについて Firebaseのアプリ内通知のことは […]

  • 2020年7月16日
  • 2020年7月16日

react-nativeでバーコード生成、表示と端末の明るさを変更する方法

やりたいこと react-nativeを用いたネイティブアプリで、バーコードを生成し、外部の端末で読み込みがしたい。 読み込み時に端末の明るさを明るくし、読み込みやすい状態にしたい。 使用するパッケージ バーコード生成にはreact-native-barcode-builder 端末の明るさを変更するにはreact-native-device-brightnessを使う上記パッケージだと今後サポー […]

  • 2020年7月14日
  • 2020年7月14日

react-nativeでlocalhostのAPIアクセスがnetworkエラーになる場合

再現した状況 フロント、サーバー共にローカルでの開発環境。フロントはreact-native。サーバーサイトはexpressで立てたAPIサーバー。 Webでreactを使うときのようにaxiosでAPIを叩いたが、network errorでデータの取得が不可。 原因 APIのドメインを「http://localhost」から「http://10.0.2.2:3001」にすると取得ができた。 具 […]

  • 2020年7月11日
  • 2020年7月11日

react-native SNSシェア機能の実装方法

はじめに react-native製のアプリで、なんてことはない外部サービスへのシェア機能を実装しようという話。調べた感じ方法は大きく2通りあるようです。 react-nativeでSNSシェア機能を実装する方法 標準APIを用いる react-native-sns-shareを使う 前者の標準APIを用いてサクッとやることにしました。後者のreact-native-sns-shareはnodeの […]

  • 2020年7月11日
  • 2020年7月23日

sequelizeの導入方法と使い方(Express)

Expressで作ったアプリを、sequelizeを使ったプロジェクト構成に作り直したときのメモ。 sequelize: 6.3.1mysql2: 2.1.0 パッケージのインストール プロジェクト構成と設定ファイルの準備 express-generatorがベース 各プロジェクト配下に以下ディレクトリを作成 models\migrations\config\seeders\ 以下のコマンドで一括 […]

  • 2020年7月10日
  • 2020年7月10日

cluster,express-clusterを使ったNode.jsのマルチスレッド化

前提 express-generatorでのひな型をベースとし、bin/wwwファイルに追記する。clusterとexpress-cluster2つの方法を記述します。 1.clusterを使ったNode.jsのマルチスレッド化 bin/www この状態でnpm startコマンドで以下のようにマシンのスレッド数分ワーカーが立ち上がる 参考https://nodejspedia.com/ja/tu […]