著者アーカイブ 村上

村上 著者:村上

【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」のご紹介でした。
冒頭でも書きましたが、実際に使う場面はそうそう多くなさそうですが…もしご入用の際はご活用ください。

村上 著者:村上

【アプリ】夜更かし防止!アプリの使用制限を指定できる「使いすぎストップ」

たまにやってしまう寝る前のスマホいじりを強制的に制限するためのアプリを導入しました。
それがこちらの「使いすぎストップ」というアプリです。

Google Play へのリンクはこちらから。

使いすぎストップ – Google Play のアプリ
https://play.google.com/store/apps/details?id=com.aozora_create.appofftimer&hl=ja

まだ1週間くらいしか使っていませんが、設定の操作も簡単でおすすめです。
なおこのアプリでは、一日の使用可能時間を制限する方法と、この時間帯は使用を制限する方法があります。
私は、時間帯での制限を使っています。

 

実際の画面はこんな感じ。

上の画像のように、アプリごとに制限を指定することができます。

または、下の写真のように、複数のアプリをまとめて制限することもできます。

私は、とりあえず Twitter のみを 0:00 から 7:00 の間使用禁止にしています。

設定画面はこんな感じ。

任意のグループ名を指定した後、制限するアプリと、制限方法をそれぞれ指定してきます。
なお、使用できる上限時間と使用禁止の時間帯の両方を同時に指定することができます。
また使用禁止の時間帯も複数指定ができます。
今回は 0:00 ~ 7:00 のみですが、これに加えて、例えば 15:00 ~ 18:00 の時間帯も禁止にするということもできます。

またそれ以外にもアンインストールを禁止にしたり、パスワードを設定したりすることもできます。
こちらは、お子さんのスマートフォンやタブレットで使用制限をかけたいときに使えそうですね。

 

以上、アプリの使用制限をかけることができる「使いすぎストップ」アプリのご紹介でした。
たまに「あともう少しだけ…」で、夜更かしをしてしまうこともありましたが、これのおかげでさくっと諦めて眠れるようになりました。
私のように意志が弱い人にはおすすめです。

村上 著者:村上

【CSS】セレクトボックスのカスタマイズについてのおすすめサイト

先日、ラジオボタンとチェックボックスのカスタマイズで参考にしたサイトをご紹介しましたが、今回はセレクトボックスのデザインをカスタマイズする際に参考にさせていただいた記事をご紹介します。
ちなみに、先日の投稿記事はこちらから。

【CSS】チェックボックス・ラジオボタンのカスタマイズについてのおすすめサイト

 

さて、今回ご紹介したい記事はこちら。

コピペでできる!cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。
https://copypet.jp/797/

かなりシンプルなデザインのセレクトボックスを実装できます。
なお、私は一番上のサンプルを採用させていただきました。

コードはこちら。
なお、私は若干修正させていただいています。

<div class="select_area">
    <select name="alphabet>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>
.select_area {
  overflow: hidden;
  width: 100%;
  text-align: center;
  position: relative;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  background: #ffffff;
}
.select_area::before {
    position: absolute;
    top: 22px;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666666;
    pointer-events: none;
}
.select_area select {
    width: 100%;
    height: 50px;
    padding-right: 1em;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: #666666;
}
.select_area select::-ms-expand {
    display: none;
}

コードは以上です。
私はデザインの都合上、セレクトボックスの高さを 50px で固定しており、そのため .select_area::before で指定している下向き三角形「▼」の位置もそれに応じて変更しています。
また、横幅も 100% になっています。
このあたりは、上記で挙げたサイトのコードを参考にするか、適宜自分のデザインに合わせて修正してください。

ちなみに、何故セレクトボックスにデザインを適用したかというと、現在開発中の Cordova アプリを iPhone で確認したところ、セレクトボックスがとてもダサくなってしまったためです。
Android だと、シンプルな白いセレクトボックスだったのですが、iOS の場合は、恐らくデフォルトのセレクトボックスのデザインそのままのようでした。
このままだと、ページのデザインにそぐわなかったので、こちらのデザインを使って、他のテキストエリア等のデザインに合わせました。
そのおかげで、ここだけデザインが浮くこともなく、良い感じに整ったのではないかと思います。

 

以上、セレクトボックスをシンプルなデザインにカスタマイズする方法でした。
コピペで実装できるのでかなり簡単だし、助かりました。
サイトで紹介されている他のセレクトボックスのデザインも素敵ですので、是非参考にしてはいかがでしょうか。

村上 著者:村上

【Git】Git Pull時に「You have not concluded your merge.」エラーが発生する時の対処法

タイトル通り、SourceTree で Git Pull を行なった際に「error: You have not concluded your merge (MERGE_HEAD exists).」というエラーが発生した時の対処法です。
エラー全文はこちら。

error: You have not concluded your merge (MERGE_HEAD exists).
hint: Please, commit your changes before merging.
fatal: Exiting because of unfinished merge.

ざっくり翻訳したところ、「エラー:マージを完了していません(MERGE_HEADが存在します)。ヒント:マージする前に変更をコミットしてください。fatal:マージが未完成のため終了しています。」とのこと。
が、プルをした時はコミットしていないファイルはなく、せっかく提示してもらったヒントは役に立ちそうにありませんでした。

 

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

プッシュ↑① プル↓①で残ってしまった時の対処 – Qiita
https://qiita.com/ishizuka215/items/835abf50c9fffe964e20

この記事によると、今回のようなエラーが発生した場合、一度リセットを試してみると良いとのこと。
コマンドは下記の通りです。

git reset --merge

ハイフンが2つであることに注意!
最初こちらのコマンドを実行した際、git reset -merge としてしまい、エラーになりました。

ともかく上記のコマンドを実行し、再度 Git Pull を実行したところ、問題なくプルを行うことができました。
参考にした記事にも、「大体これで解決します。」との頼もしい文字がありましたので、困った時はとりあえずこのコマンドを試してみると良さそうです。

 

以上、Git Pull 時に発生したエラーの対処法でした。

村上 著者:村上

【CSS】チェックボックス・ラジオボタンのカスタマイズについてのおすすめサイト

ほぼメモというか備忘録ですが、とても良いサイトを見つけたのでご紹介。
HTML のラジオボタンやチェックボックスをカスタマイズする方法について紹介したサイトです。

サイトはこちら。

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた|カルチャーアカデミア広島
https://cultureacademia.jp/webcreate/303/

チェックボックスをカスタマイズしたいけど、フレームワークを使うほどではない…というときにおすすめです。
実際、現在開発中のページでも活用させていただきました。

 

今回、私が使用させていただいたコードはこちら。
まず、CSS です。

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

HTML は、下記のとおりです。

<label>
  <input type="checkbox" name="checkbox01" class="checkbox01-input">
  <span class="checkbox01-parts">チェックボックス01</span>
</label>

こちらを実装すると、下のようなデザインになります。

デフォルトのチェックボックスよりはるかにお洒落!
チェックボックスのサイズも大きいので、スマートフォンでも押しやすいサイズ感です。
また、ラベルのテキストをクリックしても、ボックスにチェックが入れられるようになっているので、使い勝手も良いです(こちらについては、デザイン関係なく実装しますが)。

ほかにも、チェックした時にふわんと波のように広がるラジオボタンや、アニメーション付きのチェックボックスも紹介されていました。
ボックスの色も簡単に変えられたので、かなり使いやすいですね。

 

以上、チェックボックスやラジオボタンのカスタマイズについてのおすすめサイトのご紹介でした。

村上 著者:村上

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

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

 

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

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

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

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

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 が厄介かと思ったので、今回はこちらの方法を使いました。
その辺りは、開発環境に応じて臨機応変に対応してください。

村上 著者:村上

【PHP】Slim3フレームワークのCSRF対策ミドルウェア「Slim-Csrf」の導入方法

勘違いから若干手こずったので、備忘録としてまとめ。
PHPフレームワーク「Slim3」でCSRF対策を行うためのミドルウェア「Slim-Csrf」の導入方法です。

GitHub のページはこちらから。

GitHub – slimphp/Slim-Csrf: Slim Framework CSRF protection middleware
https://github.com/slimphp/Slim-Csrf

サンプルコードも掲載されているので、分かりやすいはずなのですが…よくわからない勘違いをしたせいで、少し悩んでしまいました。

 

では、実装方法手順について。
なお、開発環境は「Slim-Skeleton」で作成したプロジェクトを使用しています。

まず下記のコマンドを実行して「Slim-Csrf」をインストールします。

composer require slim/csrf

インストールが完了したら、src/middleware.php を開き、下記のコードを追加します。

$container['csrf'] = function ($c) {
    return new \Slim\Csrf\Guard;
};
$app->add($container->get('csrf'));

上記を追加したら、次は src/routes.php を開いて、まずは下記のコードを追加します。

$app->get('/[任意のパス]', function (Request $request, Response $response, array $args) {
    $args['csrf_name'] = $request->getAttribute('csrf_name');
    $args['csrf_value'] = $request->getAttribute('csrf_value');

    // Render index view
    return $this->renderer->render($response, 'index.phtml', $args);
    // 任意のテンプレートに変更してもOK
});

こちらは、送信元のページです。
2、3行目のように、変数 $args に値を格納すれば、6行目で指定しているテンプレートでその値をしようできます。
上記コードでは、csrf_namecsrf_value に格納するランダムな値を生成し、それをテンプレートに渡しています。

次は、テンプレートファイルを開きます。
私の場合は、templates/index.phtml を使用します。
追加するコードは下記のとおり。なお、Form 部分だけを抜粋しています。


<form action="[送信先のパス]" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="csrf_name" value="<?=$csrf_name ?>">
    <input type="hidden" name="csrf_value" value="<?=$csrf_value ?>">
    <input type="file" name="picture" accept="image/*">
    <input type="submit" name="submit" value="送信">
</form>

重要なのが 2、3行目で、上の src/routes.php で生成した変数 csrf_name と csrf_value の値を、同名の input タグ(hidden)の value に格納しています。
これらの値を一緒に送ることで、他サイトから等の不正な書き込みを検知・防止することができます。

最後に、送信先の処理を、src/routes.php に記述します。

$app->post('[送信先のパス]', function (Request $request, Response $response, array $args) {
    $postParams = $request->getParsedBody();
    $uploadedFiles = $request->getUploadedFiles();
    $picture = $uploadedFiles['picture'];
    if ($picture->getError() === UPLOAD_ERR_OK) {
        // 送信されたファイルに行う処理
    }
});

といっても、生成したランダムな値のチェックは自動でやってくれるので、成功した場合は上記で記述した処理が実行されるようになっています。
そのため、こちらには送信したデータの処理内容だけを書けばOKです。

上記のコードでは、Form で画像データを送っているので、その送信されたファイルデータを取得しています。
アップロード等は、適宜行ってください。
なお、Slim3 のドキュメントにもファイルのアップロードに関する項目がありますので、参考にしてください。
リンクはこちら。

Uploading files using POST forms – Slim Framework
http://www.slimframework.com/docs/v3/cookbook/uploading-files.html

必要なコードは以上です。

 

以上、「Slim-Csrf」ミドルウェアを使用した、CSRF対策でした。
Slim-Skeleton で作成したプロジェクトがベースになっていますが、恐らく流用はできるはず。
参考にしていただければ幸いです。

村上 著者:村上

【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:hrefxlinkHref に書き換える必要があるとのこと。
具体的には下記のとおりです。

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

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

 

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