記事一覧

以前にreact-native-firebaseのセットアップ方法と各機能の簡単な説明についてご紹介しました。 今回はその中の機能一つであるremote-configについてインストール方法や使い方を公式ソースに従ってご紹介します。 アプリのバージョンを上げることなく内部的な設定値を更新でき、ABテストなどにも応用が効くため非常に有益な機能です。

続きを読む

iOS14が公開されてまだまだ日が浅いですが、追加された機能に伴いReactNativeアプリにも変更が必要なものが多々あります。 その中で自分が見つけたのは、Date型コンストラクタの挙動についてです。 Qiitaにも同様の記事を記載しましたが、念のため個人ブログの方にも記載しておきます。

続きを読む

普段はもっぱらReactを使っていますが、最近Vueを使う機会がありました。 その際のセットアップからプロジェクトを実行して動かすまでの手順をまとめたので記事にしたいと思います。 ReactでTypescriptを使うことが多かったので、VueでもTypescriptでプロジェクトを作成しました。

続きを読む

Appleの審査結果の中で、外部ブラウザを呼び出している場合にSafari Viewの使用を勧められることがあります。 これは、iOSのアプリ上でSafariと同様の挙動が行えるモジュールです。 今回はReactNativeアプリでSafariViewを使う方法をご紹介します。

続きを読む

AppleサインインはiOS13で追加された、AppleIDでログインを行うことができる機能です。 それだけなら便利な機能が増えたなぁで済む話ですが、GoogleログインのようにSNSログインを行なっているアプリには、このAppleサインインが必須となります。 今回はreact-native-apple-authenticationを使ったAppleサインインの方法をご紹介します。

続きを読む

SalesforceとVSCodeで開発を行う機会があったので、そのときの環境構築+便利拡張機能のメモです。 Salesforceを使った開発自体がなかなかニッチなため、それなりに需要があるのかと思い記事にしました。

続きを読む

ReactNativeでめでたくiOSのアプリが出来上がり、いざストア公開しようとした時に立ちはだかるのが審査です。 今回は、審査中に遭遇した警告メールとその対処法についてご紹介します。 ReactNativeと書いていますが、実際にはSwift等で作ったアプリでも同様の事象があると思います。

続きを読む

Reactを学習し始めて、基本的なことは大体身についたからいよいよ独自で考えたアプリを作ってみよう・・・ と取り掛かった際に遭遇しやすいのがこのエラーです。 今回は「Target Container is not a DOM element」エラーの対処法についてご紹介します。

続きを読む

react-native-modalはReactNative製アプリにモーダル機能を追加してくれる便利なライブラリです。 しかしながら、複数のモーダルを画面に展開したい場合は少し工夫が必要になります。 今回は、react-native-modalで複数のモーダルの閉じる処理・開く処理を同時に行う方法について解説します。

続きを読む

初学者の方によく聞かれるのが、文字列の配列のソート方法についてです。通常通りsotr関数を使うと、文字コード順にはなりますが、そうではなくて任意のルールに基づいてソートする場合の方法がわからなくなるケースが多いようです。今回は簡単なサンプルを用いて任意ルールの文字列ソートを行う方法をご紹介します。

続きを読む

GASは面倒な環境周りの設定をほぼすることなく動作するツールですが、それ故にいくつか制限事項があります。 例えば、毎日決まった時間に起動するバッチスクリプトを作成(=トリガーを作成)する時に、GUIから設定した場合、実行時間に1時間ほど幅が生じてしまいます。 今回は、正確な時間に起動するトリガーの作り方をご紹介します。

続きを読む

react-native-firebaseはreact-nativeアプリにFirebaseを簡単に組み込むことができるライブラリです。 中でもよく利用するのがプッシュ通知で、基本はガイド通りに進めていけば問題なく動作しますが、Androidの特定バージョン以降ではプッシュ通知のポップアップが表示されません。 今回は上記のケースの対処法をご紹介します。

続きを読む

react-native-webviewは以前ご紹介したとおり、既存のWeb資産をreact-nativeアプリ上で使いまわせるため非常に便利ですが、いくつか注意点があります。 例えばOAuth認証をしている画面を描画した場合などです。特にGoogleはWebViewからのOAuth認証をブロックしているため、通常では利用することができません。

続きを読む

ReactNativeでアプリ開発をしていて、いざリリースができるとなった段階で「特定の端末だとフォントや要素が大きすぎる/小さすぎる」という状況に遭遇することがあると思います。 たいていは使い慣れた実機やエミュレータで開発しているため、別なサイズの端末に切り替えた時にサイズ周りのレイアウトが崩れてしまいます。 今回は、端末によってサイズを調整してくれるライブラリを紹介します。

続きを読む

Reactを学習し始め、だんだんと知識を深めてくるにつれて自然とNext.jsを知るようになると思います。 ルーティングやらSSRやら、React単体だとどうも手間がかかる部分を吸収してくれるナイスなライブラリです。 今回はcreate-next-appで作成したプロジェクトをTypescript対応させるまでの手順を紹介します。

続きを読む

最近よくteratailを利用しています。 以前は質問する側でしたが、段々と回答するに足る知識も身についてきたので今は回答メインです。 人気のタグである「Javascript」や「HTML」はライバルも多く、なかなか回答待ちの質問に出会えないので、APIで自分が回答したいジャンルの質問を取得してWebex Teamsに通知するGASを組んでみました。

続きを読む

Pythonでデータ分析が盛んに行われており、中でもJupyter notebookを愛用されている方は多いかと思います。 今回はそのJupyter notebookの進化版ともいえるJupyterlabのインストール方法をご紹介します。

続きを読む

Reactを初学者に教える機会があり、その時によくハマりがちなのが「stateに配列でデータを持たせた時に、正しく更新できていない」ケースです。 エラーで落ちるわけでなく、renderがかからない等の気づきにくい不具合なので、原因特定がしにくいですが大体はこの記事の例に収まると思います。

続きを読む

エディタとしてVSCodeを用いる例は多いかと思います。自分もその1人です。 拡張や設定を自由にカスタマイズすることでストレスなく開発できるのが利点ですが、チーム開発においてはちょっとした足かせにもなり得ます。 今回は、拡張・設定を統一していなかったが故に遭遇したトラブルについてご紹介します。

続きを読む

ReactNativeで画面遷移を扱う方法はいくつかあると思いますが、オーソドックスなのがreact-navigationを用いたものだと思います。 その中でもタブナビゲータを利用しようとするとreact-navigation-tabsを使うことになりますが、タブを押下した際に画面遷移以外の処理を行いたい時があると思います。 今回はそんな場合のTipsです。

続きを読む

自分の所属する会社では、Asanaを用いてタスク管理を行っています。 既にある機能だけでも十分便利なのですが、タスク一覧を取得して解析する必要がでてきたのでAsana APIを利用することにしました。 そこで今回は、GASを用いてAsana APIからプロジェクトに紐づくタスクを取得する方法をご紹介します。

続きを読む

エンジニアをやっていると、どこかしらでCSSに触れる機会はあると思います。 そんな時にいつも迷うのが、サイズの指定方法です。 pxや%は知っているけどremとかはよく分からずに使ってる・・・ なんて人も多いのではないでしょうか。 今回はサイズ指定方法の仕様についてまとめました。

続きを読む

今回は、Reactでアプリを作ってGitHub Pagesで公開する手順を紹介します。 何回もやる作業なのですが、そんなに頻度が高いものではないので色々と忘れがちです。 今回は、最もオーソドックスな方法を取るためgh-pages等のライブラリは使用しません。

続きを読む

ReactNativeはReactやReduxの知識さえあればだいたいのアプリは作ることができます。 理由は、Reactで使った知識をそのまま流用できる点が多いためです。 しかし、アニメーションは少し勝手が違って、Reactで使ったアニメーションをそのまま流用することは難しいです。 今回は、ReactNativeで動きのあるアプリを実装するための方法を紹介します。 具体的には、Animatedを使って描画時にぴょんぴょん跳ねるViewを作ります。

続きを読む

ReactNativeを使って既存Webサービスのアプリ版を開発している場合、一部のアプリ独自の機能(例えばプッシュ通知やカメラ)を除いては既存ソースを流用できる場合があります。 例でいうと、ユーザ情報画面は既存のWebのマイページをそのまま表示するとかです。 その場合、WebViewを使うことになると思います。 ReactNativeでいうところのWebViewはreact-native-webviewを使うことになりますが、ここで問題になってくるのがReactNative側のコードとWebView側のコードの連携処理です。 先のマイページの例でいうと、WebView側のマイページ画面のソースコードにReactNative側からユーザ情報を渡してあげなければ成立しません。 今回はreact-native-webviewを導入した上で、WebViewとの値の受け渡し方法について調べました。

続きを読む

私は、普段は開発者としてせっせとプログラムを組んでいますが、それと並行して投資にも積極的に取り組んでいます。できることなら大儲けしたいし、華やかな生活を送りたいという欲望に塗れる系エンジニアです。 加えて読者が好きなので、投資系、転職・キャリア系の書籍もよく読むのですが、その中で少し引っかかる考え方があったので紹介したいと思います。

続きを読む

このご時世、テレワークを導入した企業も多く、大体は何かしらのツールを用いてコミュニケーションを取っているかと思います。 なんとなくSlackが主流なのかなと思ってたりしますが、私の所属する会社ではCisco Webex Teamsを利用しています。 普通に利用するだけだとつまらないので、今回はCisco Webex TeamsのBotアカウントの作成方法を紹介します。

続きを読む

ReactNativeのアプリは最終的にはAndroidかiOS(もしくはその両方)でのリリースを目指しています。 しかし、リリースビルドというものは短いスパンでそう何回も繰り返すものではないため、久々にやってみると思いもよらないトラブルに遭遇しがちです。 今回は、Androidのリリースビルド時にkeystoreファイルが消えてしまったトラブルを紹介します。

続きを読む

今回はMacOS向けにHomebrew(ホームブルー)をインストールする方法を紹介します。 HomebrewはmacOSでは比較的メジャーなパッケージマネージャーで、これのインストールを前提としている技術記事も多いです。

続きを読む

日付選択のUIは色々あると思いますが、個人的にはカレンダーが一番直感的かなと思います。 そこで今回はReactNativeアプリを対象に、カレンダーを表示させるライブラリであるreact-native-calendarsと、モーダルを表示させるライブラリのreact-native-modalを使って、カレンダーモーダルを作りたいと思います。

続きを読む

今回はC#でGoogle Cloud Platform(以下GCP)のText-to-Speechを動かしてみたサンプルを紹介します。 Text-to-Speechはその名の通り指定した文字列を読み上げてくれるすごいやつです。

続きを読む

アプリを作っていると、画像を扱う機会も自然と増えます。 よくあるUIで「FacebookやInstagramのようにカメラロール等のアルバムをグリッド表示して、画像を複数選択する」というものがあります。 今回はreact-native-communityが提供しているreact-native-camerarollを使って同じようなUIを作る方法をご紹介します。

続きを読む

Google Apps Script通称GASを利用されている方は多いのではないでしょうか。 デフォルトだとブラウザ上でコーディングすることになりますが、使い慣れたローカル環境でコーディングをしたくなるのがエンジニアの性というもの。 今回はclaspを使ってGASをローカル管理する方法をご紹介します。

続きを読む

ReactNatveで作成したアプリをストアリリースすることになった場合、BundleIDやPackageNameを変える必要があります(それぞれiOS,Androidのアプリの一意な識別子とアプリ名です)。 しかし、せっかくReactNativeを使ってネイティブのモジュールを変更せずに済んでいるので、BundleIDとPackageNameを変更する場合も同じようにしたいですよね。 そこで今回は、react-native-ci-toolsを使ってコマンド一発でBundleIDとPackageNameを変更できるようにします。

続きを読む

GatsbyJSには様々なスターターが用意されており、gatsby-starter-netlify-cmsもその一つです。 このブログもgatsby-starter-netlify-cmsをカスタムして作られています。 基本的に痒いところに手が届く作りにはなっていますが、気になる箇所もいくつかあります。 今回は「gatsby-starter-netlify-cmsでブログ記事のURL」を自由に指定できるようにする方法を紹介します。

続きを読む

ReactNativeでアプリを作る場合、だいたいはFirebaseなんかのmBasSを使ってデータのやり取りをするかと思います。 しかし「そこまで大掛かりなデータを使うわけでもないんだよなぁ」なんてケースもちらほら見受けられます。 そんな時にオススメなのがreact-native-storageです。 ちょっとしたデータなら簡単に端末に持たせられ、インストールも簡単なので是非使ってみましょう!

続きを読む

Gatsby製のブログに限らず、アクセスを分析してユーザーのニーズを把握しておくことは、有益なブログを作る上で欠かせない作業です。 今回は、Gatsbyで作成したブログにGoogleAnalyticsを導入する方法を紹介します。

続きを読む

このブログを立ち上げる前にLivedoorブログでつらつらと記事を書いていたことがあります。 そちらはもう更新はしておらず、いずれは消さないとなぁ・・・なんて思っていますが、その前にAPIを使って記事を抜き出したので、今回はそのやり方をまとめます。

続きを読む

Gatsbyでブログを作っている時に、参考にしたサイトや公式サイトへのリンクを貼る機会が多々あるかと思います。 いわゆる「外部リンク」ですが、マークダウンでリンクを書いている場合、デフォルトでは"target=`_blank`"の指定ができません。 今回は、外部リンクのみ別タブで開くようにします。

続きを読む

GatsbyJSはブログ制作において非常に有益なライブラリなのですが、デフォルトだと備わっていない機能がいくつかあります。 シンタックスハイライトもその一つで、技術系のブログを書く場合には必須といっても過言ではない機能です。 今回は、Gatsby製ブログでシンタックスハイライトを表示させるライブラリを紹介します。

続きを読む

今回は、このブログの基盤となっている「GatsbyJS」のセットアップ方法について紹介します。 GatsbyはReactベースの静的サイトジェネレータで、非常に高速で動作します。 このブログの画面間の遷移もサクサクと動いているので、通常のReact製アプリに比べると動作が早いことが分かると思います。

続きを読む