カテゴリーアーカイブ JavaScript

村上 著者:村上

【Cordova】Android端末でアプリのパーミッションを確認するプラグイン「cordova-plugin-android-permissions」

昨日の記事で名前だけ紹介したプラグイン「cordova-plugin-android-permissions」についてご紹介します。
名前のとおり、Android 端末のパーミッションチェックしか行えませんが、使い方が分かりやすいのでこちらもおすすめです。

GitHub – NeoLSN/cordova-plugin-android-permissions: This plugin is designed for supporting Android new permissions checking mechanism.
https://github.com/NeoLSN/cordova-plugin-android-permissions

 

インストールのためのコマンドは下記のとおりです。

cordova plugin add cordova-plugin-android-permissions

使用例は下記のとおりです。

const permissions = cordova.plugins.permissions;
permissions.requestPermission(permissions.CAMERA, function(status) {
    if (status.hasPermission) {
        // 許可された
    } else {
        // 許可されなかった
    }
}, function(error) {
    // 許可されなかった
    console.log(error)
});

なお、上記ではカメラパーミッションをリクエストしています。
許可されていない場合は、パーミッションダイアログが表示されます。

単にパーミッションを確認するだけの場合は、下記を使用します。

permissions.checkPermission(permission, successCallback, errorCallback);

上記を実行した場合、指定したパーミッションが許可されていない時でもダイアログは表示されません。

カメラ以外のパーミッションを確認する場合は、下記の Manifest.permission を参考にしてください。

Manifest.permission|Android Developers
https://developer.android.com/reference/android/Manifest.permission.html?hl=zh-tw

 

以上、Android 端末でアプリのパーミッションを確認するためのプラグイン「cordova-plugin-android-permissions」のご紹介でした。
昨日紹介した「cordova-diagnostic-plugin」とは違い、第一引数を変更すれば同一の処理でパーミッションを確認できるのは良いですね。
個人的にはこういった書き方の方が好みです。
需要に合えば、是非ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリのパーミッションを確認するプラグイン「cordova-diagnostic-plugin」

アプリのパーミッションを確認する必要があったため、プラグインをインストールしました。
Android なら、cordova-plugin-android-permissions というプラグインがあったのですが、名前のとおり、Android のみしか対応していなかったため、iOS でのチェックを行うためにこちらもインストールしました。
しかし、こちらは Android にも対応しているため、cordova-plugin-android-permissions の方をアンインストールして、これのみでチェックしようかと思っています。

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

GitHub – dpa99c/cordova-diagnostic-plugin: Cordova/Phonegap plugin to manage device settings
https://github.com/dpa99c/cordova-diagnostic-plugin

 

使い方ですが、例えばカメラのパーミッションを確認する場合は下記のように記述します。

cordova.plugins.diagnostic.getCameraAuthorizationStatus(
    function(status) {
        // チェック成功
        if(status === cordova.plugins.diagnostic.permissionStatus.GRANTED) {
            // カメラが使用が許可されている
            ......
        } else {
            // カメラが使用が許可されていない
            ......
        }
    }, function(error) {
        // チェック失敗
        console.error("The following error occurred: "+error);
    }, false
);

カメラの使用が許可されている場合は、上記のようにステータスで GRANTED の値が返却されます。
なので、返却値によって適宜処理を変更してください。

なお、上記のコードでは、パーミッションを確認するだけなので、もしなかった場合でも許可/拒否のダイアログの表示はしません。
パーミッションをリクエストしたい場合には、requestCameraAuthorization() を使用してください。
使用例は下記の通りです。

cordova.plugins.diagnostic.requestCameraAuthorization(
    function(status) {
        if (status === cordova.plugins.diagnostic.permissionStatus.GRANTED) {
            // カメラ使用が許可された場合
            ......
        } else {
            // カメラ使用が許可された場合
            ......
        }
    }, function(error) {
        console.error("The following error occurred: "+error);
    }, false
);

使い方としてはこんな感じです。
他にも、位置情報や Bluetooth、プッシュ通知、マイクなど、色々チェックできます。

ただし、位置情報など一部のパーミッションによっては、戻り値のステータスの値が Android と iOS で違っていたりするので、そこだけはご注意ください。

 

以上、アプリのパーミッションをチェックするためのプラグイン「cordova-diagnostic-plugin」のご紹介でした。
戻り値に注意して、便利にお使いください。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】配列から特定の要素を検索する方法

たまーに使うので、備忘録としてまとめ。
配列から特定の要素を検索する方法です。

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

【JavaScript入門】配列の要素を検索する4つの方法! | 侍エンジニア塾ブログ(Samurai Blog) – プログラミング入門者向けサイト
https://www.sejuku.net/blog/22228

上記の記事によると、4つの方法があるようですが、とりあえずノーマルな方法のみまとめます。

 

今回使用するのは、indexOf メソッドです。
こちらのメソッドは、指定した値が配列の要素の中にあるかどうかを検索できます。
もし一致したデータがあった場合、そのインデックスの位置を返し、見つからなかった場合は -1 を返します。

サンプルコードはこちら。

const color = ['あか', 'あお', 'きいろ', 'みどり'];
const index = color.indexOf('あお');

上記の場合、変数 index には 1 が入ります。

また、今回は指定しておりませんが、indexOf には第二引数があり、検索の開始位置を指定することもできます。
なので、例えば 4番目の要素以降で一致するデータがあるかを調べたい場合は、3 を指定します。

 

以上、indexOf を使った配列の要素検索の方法でした。
多分今後も使うことがあると思うので、コピペ元として残しておきます。
是非、ご利用ください。

  • この記事いいね! (0)
村上 著者:村上

【React】コンポーネントにスタイルを適用する方法

今日、うっかり書き方を間違えたので、備忘録としてまとめます。
React のコンポーネントにスタイルを適用するときの書き方についてです。

エラーが発生した時に、React が誘導してくれたページはこちら。

React – Error Decoder
https://reactjs.org/docs/error-decoder.html/?invariant=62&args[]=

 

このページの最下部に、下記のように style プロパティの書き方についての記述がありました。

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ‘em’}} when using JSX.

私はうっかり、HTML と同じ書き方で下記のように指定してしましたが、React ではこの書き方ではだめです。

<div style='padding-top: 10px;'>
    <p>テキスト</p>
</div>

下記のように記述するのが正解です。

<div style={{paddingTop: '10px'}}>
    <p>テキスト</p>
</div>

なお、React では、padding-top ではなく、paddingTop というように、キャメルケースで記述します。
また、複数のプロパティを指定したい場合は、カンマ区切りで記述します。
若干普通の CSS とは指定の仕方が異なりますが、プロパティ名なんかは同じなので、それほど悩むことはないと思います。
強いて言えば、中かっこが2重になっていることに注意するくらいでしょうか。

 

以上、React のコンポーネントにスタイルを適用する方法でした。
今後もうっかり書き間違えないように気をつけたいと思います。

  • この記事いいね! (0)
著者:杉浦

【Vue】propsで渡ってきたObjectをキーについてバリデーションする

 扱う値があまりに煩雑になってくると系統だった値をまとめてオブジェクト化して扱う様になります。Vue.jsではpropsという仕組みで値をコンポーネント間でやりとりします。基本は次の様に受け渡されるコンポーネント側で型を検査することによって致命的エラーを防ぎます。

  props: {
    memberId: {
      type: Number,
      required: true,
    },
    pageInfo: {
      type: Object,
      required: true,
    },
  },

 この方法を用いた場合、Object型の通過ルールはあまりに緩すぎます。必要なプロパティがそろっていない空のObjectでも通ってしまいます。バリデーションを用いることでこれを防げます。
 プロパティ — Vue.js
 リンク先のカスタムバリデーションがそれです。これはvalidator関数の返す値の真偽によってバリデーションの結果を判定する仕組みです。次のvalidator関数の例は必要なkeyが全てあるかないかの判断になります。

  props: {
    pageInfo: {
      type: Object,
      required: true,
      validator(value) {
        const valueKeys = Object.keys(value);
        let isIncludeAllNeedKey = true;
        ['currentPage', 'from', 'to', 'total', 'lastPage'].forEach((needKey)=>{
          isIncludeAllNeedKey = isIncludeAllNeedKey && valueKeys.includes(needKey);
        });
        return isIncludeAllNeedKey;
      },
    },
  },

 与えられた値valueのキーを配列化、必要なキーについて一つ一つincludes関数で存在の有無を確かめます。どこかで無いとわかった時、isIncludeAllNeedKey = isIncludeAllNeedKey && falseとなり、isIncludeAllNeedKey===falseの状態となり、isIncludeAllNeedKey = false && valueKeys.includes(needKey);が実行されるようになります。これでオブジェクトのキーの有無を確かめるための簡単なバリデータを作れます。

  • この記事いいね! (0)
村上 著者:村上

【React】mapを使って入れ子になっている要素を取得する方法

とっさにやり方が分からなかったので、覚え書きとしてまとめ。
React の書き方で、入れ子になっている要素を map で取得する方法です。

通常だと、下記のような書き方になるかと思います。

const list = Object.keys(result).map((data) =>
    <div>{result.data}</div>
);

が、今回扱ったのは、更に入れ子構造になっているので、これだけではだめでした。
なお、サンプルデータは下記のような感じです。

{
    "floor1": [
        {
            "name": "food",
            "category": 2
        },
        {
            "name": "shoes",
            "category": 1
        }
    ],
    "floor2": [
        {
            "name": "clothes",
            "category": 2
        }
    ]
}

上記のようなデータを扱う場合は、map 内でさらに map を使ってデータを展開するする必要があります。

 

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

javascript – How to have nested loops with map in JSX?
– Stack Overflow

https://stackoverflow.com/questions/47402365/how-to-have-nested-loops-with-map-in-jsx

どうやら、質問者さんも私と同じことでお悩みの要でした。

で、入れ子を展開する方法ですが、下記のように記述します。

const list = Object.keys(result).map(function(title) {
    return (
        <div>{title}</div>
        <table>
            <tr><th>name</th><td>category</td></tr>
            { result[title].map(function(item) {
                <tr><th>item.name</th><td>item.category</td></tr>
            })}
        </table>
    );
});

忘れそうなのは return ですかね。
これの中であれば、再度 map を使うことが可能なようです。
一度、うっかり忘れたときは、エラーが発生しました。

 

以上、React で 入れ子になっている要素を map で取得する方法でした。
map は一度理解してしまえばとても便利なのですが、慣れないと難しいかもしれません。
はじめのうちは、ご注意ください。

  • この記事いいね! (0)
著者:杉浦

【Laravel】【Vue】propsを使わずVue上で組んだページ部にLaravelのBladeから値を表示する

 LaravelからVueに値を渡す時によくやる手法は次です。

        <upload-image
            v-bind:dist-url="{{json_encode(route('hoge.update'))}}"
            v-bind:hoge="{{json_encode($hoge)}}"
            v-bind:fuga="{{json_encode($fuga)}}"
            ...
            ...
        ></upload-image>
<template>
  <div>
    {{ hoge }}
    {{ fuga }}
    ...
    ...
  </div>
</template>
export default {
  props: {
    distUrl: {type: String, default: ''},
    hoge: {type: String, required: true},
    fuga: {type: String, required: true},
    ...
    ...
  },

 引数をjson化してpropsとして渡し、Vue内のテンプレートに埋め込みます。やり方はシンプルなのですが情報が増えるにつれpropsの肥大化がひどいことになります。なんらかのオブジェクトにまとめるのも手ですが、それはそれでバリデーションが辛くなります。この問題の回答の一つがVueのslotの仕組みを使うことです。
スロット — Vue.js
 slotは指定された位置のHTMLコードをVueコンポーネントを呼び出す階層から決定するための仕組みです。そのため先ほどの例ならば次の様に書けます。

        <upload-image
            v-bind:dist-url="{{json_encode(route('hoge.update'))}}"
        >
          <div slot="slot-no-namae">
              {{ $hoge }}
              {{ $fuga }}
              ...
              ...
          </div>
        </upload-image>
<template>
  <div>
    <slot name="slot-no-namae"/>
  </div>
</template>
export default {
  props: {
    distUrl: {type: String, default: ''},
  },

 Blade上のHTMLエスケープエコーの短縮構文{{}}を実行してHTMLコードを生成。それのHTMLコードをslotに割り当てます。これにより、propsを介することなくPHP内部で扱っていた変数の値を持つHTMLコードをVue上で組んでwebページのテンプレート内に組み込めました。propした値を後から変更しない、Vue内の関数で参照する予定が無い、といった値は大体この方法に組み込むとスッキリしつつ問題のないコードを作るのに貢献してくれます。

  • この記事いいね! (1)
asaba 著者:asaba

【jquery】animate()関数を使うと、ページ読み込みが遅くなる

今回はjavascript、ページ読み込み速度の改善の際に気を付けることを書いていきます。

jqueryでよく使われる関数の中にanimate()関数がありますが、最近ではcssを使ってhiddenとかhoverしたほうが動きがカクつかなくて

スマートなアニメーションを作ることができます。

特にcordovaを使ってスマートフォンで見る際にはかなり遅れて表示されるので、ハイブリッドアプリ開発の際はanimateは

使わないほうがよさそうです・・・!

 


$(<span class="hljs-string">'hoge'</span>).animate({<span class="hljs-attr">opacity</span>:<span class="hljs-number">1</span>});

これではなく

<span class="hljs-selector-tag">hoge</span> {
    width:120px;
    <span class="hljs-attribute">opacity</span>:<span class="hljs-number">1</span>;
}

こんな感じ

animate関数は基本cssの動きを全部網羅しているので柔軟に対応できるのですが、近年ではアクセススピードとかがアプリの強みに

なりつつあるので、遅いアプリを作りたくなければcssをもっと柔軟に使いこなせるようにしましょうということでしょうか。

自分はcssはあまり得意ではないですが、この技法はスマートに使えるようにはしておきたいと思います。

  • この記事いいね! (0)
著者:杉浦

色々便利なフロントエンド技術の書いてあるFrontEndHandbook2019の紹介

 昨年度までは日本語訳したものがQiitaなどどこかしら分かりやすい場所に上がっていた様なのですが、今年度は見当たらないの本元を検索。githubにありました。
FrontendMasters/front-end-handbook-2019: [Book] 2019 edition of our front-end development handbook
Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice!
 FrontEndHandbookには主にJavaScript、CSS、HTMLに関連するその時々の新しい技術と発行直前の流行り、何が出来れば効率よく品質の良いフロントエンドを作れるかなどが載っています。大体の記事は短めの話とリンク集で、そういったものが集まっています。リンクの先は結構がっつりした話が多いです。
 即物的に役立つのはChapter 5. Front-end Dev Toolsです。この章には、これ便利だよ、といった編集者らのおすすめ開発ツールが載っています。有名どころが多いですが、とにかく数が多い為何かしら知らない有益なツールを見つけられます。

  • この記事いいね! (1)
asaba 著者:asaba

【javascript】TypeError: n.map is not a functionを始末する

mapを使って取得したjsonを順に表示させるテクニックはjavascript界隈では常套手段ですが、なんか書き方が多くしかもどのコードで

書いても動作が変わらないので筆者はあまり好きではありません。(reactではforeachより優先順位は上だけどなんででしょう。)

mapを嫌い嫌われている関係なので今回もTypeError: n.map is not a functionで足元をすくわれました。

mapするページに遷移したとたんtoastでTypeError: n.map is not a functionと表示させるのでいらいらが凄まじかったです、はい。

(なぜかandroidStudioも激重になっていたのでそのせいでもある)

 

解決法は、=>の後ろに書いたカッコを消して解決。そんなことなのか・・・。とりあえずここで悪い例と良い例を載せておきます。

 

ダメ↓

</pre>
{prizesList.map((prizes, index) => (

<li key={index}

//ここに取得したjsonを記述します。

</li>

))}
<pre>

 

良い例↓


{prizesList.map((prizes, index) =>
  <li key={index}
    //ここに取得したjsonを記述します。
  </li>
)}

カッコがついていても動いたコードもあったので、全部が正しい訳ではないですがシンプルなmapを書きたい時はカッコを外したほうが

無難な動きをしてくれるみたいです。

  • この記事いいね! (0)