著者アーカイブ 村上

著者:村上

【Cordova】端末のシェイクジェスチャーを検知できるプラグイン「cordova-plugin-shake」

今回は、スマートフォン端末がシェイクされたことを検知できるプラグイン「cordova-plugin-shake」をご紹介。
正直、今回実際に使うまでは「こんなプラグイン、一体いつ使うのか…」とも思っていましたが…意外と使うものなんですね。

そんな意外なプラグインのGitHubページはこちらから。

GitHub – leecrossley/cordova-plugin-shake: Cordova / PhoneGap Plugin to detect when a physical device performs a shake gesture
https://github.com/leecrossley/cordova-plugin-shake

実装方法ですが、まず下記のコマンドでプラグインをインストールします。

cordova plugin add cordova-plugin-shake

で、サンプルコードは下記のとおりです。

const onShake = function () {
  // シェイク検知成功時の処理
};
const onError = function () {
  // シェイク検知失敗時の処理
};
// シェイクジェスチャーの検知を開始
shake.startWatch(onShake, 30, onError);

shake.startWatch() 関数の第2引数と第3引数はオプションなので、指定しなくてもOKです。
ちなみに、第2引数の数値は、シェイク検知の感度のようですが…いまいちよく分かっていません。
なお、こちらのデフォルト値は 30 です。

で、シェイクの検知を終了したいときは、下記を呼び出します。

// シェイクジェスチャーの検知を終了
shake.stopWatch();

コードとしては以上です。
上記のサンプルコードそのままではないのですが、実際に使ってみたところ、問題なく動作しました。
感度も良く、何度も端末を振らなくてもすぐにシェイクジェスチャーが検知されました。

以上、シェイクジェスチャーを検知できるプラグイン「cordova-plugin-shake」のご紹介でした。
冒頭でも書きましたが、実際に使う場面はそうそう多くなさそうですが…もしご入用の際はご活用ください。

著者:村上

【React-Router】history.pushで遷移先のページにデータを渡す方法

昨日の記事に引き続き、React-Router でのページ遷移について。
今回は、遷移先ページにデータを渡す方法です。
パスからパラメータを取得する方法もありますが、個人的にはこちらの方が好きですね。

早速、値の渡し方ですが、history.push() を下記のように指定します。

this.props.history.push({ pathname: '[遷移先パス]', state: { [変数名]: [値] }});

history.push() の引数には、遷移先パスのみを指定することが多いと思いますが、上記のように連想配列で pathname と state をそれぞれ指定することで、遷移先にデータを渡すことができます。

なお、渡したデータについては、遷移先で下記のように指定すると、値を取得することができます。

this.props.location.state.[変数名];

渡す値は多次元配列でも問題ないので、限度はあるかと思いますが、かなりのデータを渡すことができます。
渡したい値が1つだけだった場合は、パスのパラメータで渡すのもありだと思いますが、データ数が多い場合はこちらがおすすめです。
個人的に、指定方法もこちらの方が好みですね。

以上、React-Router で遷移先のページにデータを渡す方法でした。

著者:村上

【React】子コンポーネントでhistory.pushを使用する方法

タイトル通り、React 環境でページ遷移機能である、history.push を使用する方法です。
React Router を使用すれば、ページ遷移機能が簡単に実装できるのですが、子要素では history.push を使用することができません。
this.props.history.push('[遷移先]'); と記述しても、エラーになってしまします。
なお、前ページに戻るための history.goBack() でも同様です。

今回は、現在開発中のサービスで、戻るボタンのついたヘッダーが共通だったので、子コンポーネントとしてそれを定義していたのですが、上述のとおり、history.goBack() が、子コンポーネントでは使用できないので、どうしたものかと悩んでいました。
が、解決策が見つかったのでご紹介。

なお、今回参考にさせていただいた記事はこちらから。

[フロントエンド] React Routerで、子要素でもhistory.pushを使いたい（withRouterの利用） – YoheiM.NET
https://www.yoheim.net/blog.php?q=20180412

さて、その対処法ですが、React-Router の withRouter を使用します。
具体的には下記のとおりです。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Header extends Component { 
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }
  render() {
    return (
      <div id='header'>
        <a className='back' onClick={() => this.props.history.goBack()}>戻る</a>
        <h1>タイトル</h1>
      </div>
    );
  }
}
export default withRouter(Header)

3行目で、withRouter をインポートし、最終行で、その withRouter で Header コンポーネントを囲っています。
6～10行目で、propTypes の定義を追加しており、これにより、14行目で this.props.history.goBack(); の呼び出しが可能になっています。

子コンポーネントで前ページに戻る機能が実装できるととても便利ですね！
これを知る前は、かなり無理矢理で動かしていたので、とてもスッキリしました。

以上、子コンポーネントで history.push や history.goBack を使用する方法でした。
ご参考にしていただければ幸いです。

著者:村上

【JavaScript】ReactでFont Awesomeを利用する

タイトルにある通り、Reactを導入しているプロジェクトで Font Awesome を利用したかったので、その導入方法についてです。
なお、導入手順は Font Awesome の公式サイトでも説明されていますので、そちらをご覧になっても良いかと。
ページはこちらから。

React | Font Awesome
https://fontawesome.com/how-to-use/on-the-web/using-with/react

導入方法ですが、まずは下記のコマンド3つを実行します。

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

無事インストールが完了したら、下記コードを参考に、プロジェクトに Font Awesome をインポートします。

import React from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
library.add(faAngleLeft);

export const Sample = () => (
  
<div>
    Font Awesome: <FontAwesomeIcon icon="faAngleLeft" />
  </div>

)

Font Awesome に関連したインポート類は、2～5行目にあたります。
4、5行目は、使用したいアイコンに応じて変更してください。
なお、上記のコードは、iタグ を使用して記述する場合、下記のようになります。

<i class="fas fa-angle-left"></i>

クラスで指定している「fa-angle-left」をキャメルケースで書き直しています。

導入手順は以上です。
あとは、お好きなアイコンを指定してお使いください。

以上、Reactで Font Awesome を導入する方法でした。
通常の、HTML の Head で linkタグを使用する方法でも良かったかもしれませんが、そうすると今度は Cordova の Content-Security-Policy が厄介かと思ったので、今回はこちらの方法を使いました。
その辺りは、開発環境に応じて臨機応変に対応してください。

著者:村上

【React】ReactでSVGを表示するためにuseタグを使うときの注意点

まさに今回私が悩んだ…というか、方法が分からず検索したところです。
React を使ってサービスを開発しているのですが、デザインを入れ込んだところ、SVG を描写しているuseタグでエラーが発生しました。

追加しようとしたコードはこちら。

<svg><use xlink:href="[SVGファイル]"/></svg>

HTMLページでは問題なく動作しますが、use タグの xlink:href が React ではエラーになるようでした。

で、調べたところ、こちらの記事がヒットしました。

React で SVG を描画するための use タグでは xlinkHref を使う – valid,invalid
https://ohbarye.hatenablog.jp/entry/2018/03/27/212304

まさに私の知りたかったことが書いてありました！
React で useタグを用いる場合は、xlink:href を xlinkHref に書き換える必要があるとのこと。
具体的には下記のとおりです。

<svg><use xlinkHref='[SVGファイル]'/></svg>

で、このように修正したところ、問題なく動作しました！

以上、ReactでSVGを表示するために use を使うときの注意点でした。
React って、意外とこういうちょっとした修正が多いので、うっかりミスがたまにおきます。
特に class を className にする必要があるとか…これを直し忘れてエラー！をまだまだやらかします。
気を付けなければいけませんね。