著者アーカイブ 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を書きたい時はカッコを外したほうが

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

著者:asaba

【cordova】iosでもサイレントモード検知してくれるプラグインcordova-silent-mode

前回androidでサイレントモードを監視してくれるcordova-plugin-android-volumeを紹介しましたが、iosでも同様のことができる

プラグインを見つけたのでここに記載しておきます。今までcordova公式やnpm公式で必死に探していたのですが、インストールを

拒否されたりリポジトリ自体が空っぽだったりと碌なプラグインがなく散々な目に会いましたがついに理想のプラグインと出会えたという

感じです。使う前はどうせ機能しないんだろうなとかネガティブな感情だだ漏れだったので期待していなかったのですがこちらも

短いコードで仕事してくれたので逆にすみませんという感じでした。では、使い方を載せていきます。

まず、インストールですね。こちらはcordova plugin add cordova-silent-modeだけで簡単にインストールすることができます。

ただサイレントモードを監視させるだけなら次のような記述でオッケーです。

</pre>
window.SilentMode.init();
window.SilentMode.isMuted(
function() {
console.log('サイレントモードが有効時');
},
function() {

console.log('サイレントモードが無効時');
}
);
<pre>

サイレントか否かの判定をコールバックで呼び出すので殴り書きしても読めるものになっています。

iosのバージョン対応は今のところはiphone6sと6plusでは正常な動作を確認できました。新型iphoneはどうなんだと思いますがレジュメ

にはどこどこのバージョンから使えなくなるという注意書きはなかったので新しめのosでも対応できそうです。

サイレントモードを監視するプラグインの中でも数少ないまともに動いてくれるプラグインなので皆さんと共有できたらと思っています。

著者:asaba

【cordova-plugin】音量取得ができるプラグイン・cordova-android-volume-pluginについて

久々にコルドバの話題です。今回は着信音の音量を取得する機能を探していたところ有用そうなプラグインを見つけた時のネタになります。

android限定ですが、簡単なコードで現在の音声を拾ってあれこれできるのでこれは使い道があると感じ早速使ってみました。

androidの音声は三種類（メディア、アラーム、着信音）あり、この中で着信音を取りたかったのですがバリエーションを見るとしっかり

抑えてあったので書いてみました。ajaxのようにコールバックでsuccessとfailに分けて結果を出力するようなコードにすると読みやすく

なりますね。

※サンプルは着信音の音量を返しています。

</pre>
window.androidVolume.getNotification((volume) => {
console.log('valumen =>' +volume);
}, (error) => {
console.log('error=>' +error);
});
<pre>

この他にも様々なバリエーションがありますが主要機能のgetのみ挙げておきます。

</pre>
<span class="pl-c1">window</span>.<span class="pl-smi">androidVolume</span>.<span class="pl-en">getAlarm</span>(success, error);
<pre><span class="pl-c1">window</span>.<span class="pl-smi">androidVolume</span>.<span class="pl-en">getMusic</span>(success, error);</pre>
<pre>

他の類似プラグインは音量取得はできるのですがなぜかメディア音量をとってきてしまうので注意が必要です。

著者:asaba

【npm】nodistツールの使い方

今回は、npmのバージョンを切り替えるときに必須なツール、nodistの使用方法について書いていきたいと思います。

まず、nodistのgithubページに移動します。https://github.com/nullivex/nodist

リリースページに入り一番最新のファイルをインストールします。program files(x86)内に保存してください。

コマンドプロンプトにてnodist distと入力すると現在使用できるNode.jsの一覧が羅列で表示されます。

これがきちんと出た場合は正常にインストールができた状態になります。

続きましてnpmの追加方法を記載します。

まずProgram Files(x86)->Nodist->npmvのフォルダ内に移動します。

npmのGithubのReleaseへアクセスし、欲しいバージョンをダウンロードしていきます。

ダウンロードしたファイルをnpmvフォルダ内にぶち込みます。

コマンドプロンプトに移動しnodist npmと打ち込みます。npmvフォルダに格納したバージョンがきちんと入っていればその格納した

npmファイルが一挙に表示されます。

この状態でnodist npm 3.10.10とコマンド入力すれば下の段にnpm 3.10.10と表示されバージョンの切り替えが完了します。

後はnpm -vで変わったかどうか確認してみてください。npmの切り替えってなんだか複雑とか間違えたら戻るの大変そうとか勝手な

イメージを抱いていたのですがnodistを使ってみてまさかこんなに簡単に切り替えができるとは思いもしませんでした。

他にはcreate-react-appなどnode.jsに依存するツールを使いたい時に今回説明したnodistを使えばその威力を確認することができると思います。

windoesでnpmバージョンの切り替えがしたい時はとりあえずこのツールを使っておけば間違いなさそうです。

著者:asaba

【npm】npm cache cleanの使い方

今回はnpmの話題です。cordova platforms ls androidでplatformsを消した後にnpm installをすると以下のエラー群が現れるときがあります。

npm WARN addRemoteGit at F (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:69:19)
npm WARN addRemoteGit at E (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:81:29)
npm WARN addRemoteGit at C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:90:16

これは、前にnpm installした時やnpm ○○ installでパッケージを入れたときの残滓がゴミとなって残り続けるのが原因で、こいつが

いると現在行っているビルドを阻害してしまうのでnpm cache cleanで早めに駆除しておくと楽になります。

npm cache clean

こいつはエラーとして出るだけでなく、warningとしても出てくるので見かけたら無視せずにこまめにクリーンしてあげることを

おすすめします。

著者:asaba

【jquery】セレクタ要素を減らして読み込みを速める方法

jqueryではセレクタを使って柔軟にcssを描画することができます。（webエンジニアさんはみんな使ったことありますよねすみません。）

最近はページ読み込みのチューニングに勤しんでいるのですが、scriptタグにasyncを付けてみたりlengthをキャッシュしたりと

色々手段を施したこともあり大分読み込みの調子が良くなってきました。あとなにができるかなーと探していたところどうやら

セレクタの余分な要素を切除することでjqueryの読み込み速度を少し向上させることができるみたいです。

こんな感じ。

※悪い例

$(<span class="hljs-string">'div.mark'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

$(<span class="hljs-string">'div.paint'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

分かりやすいですが、先頭にdivとつけてしまうと、div要素を探した後にまたもう一周div要素を探し続けるので多ければ多いほど

読み込みに不利な条件が付いてしまうという訳です。

divの部分を切除して$(‘mark’)や$(‘paint’)と定義しても問題なく動くのでページ速度の改善を望む場合はこちらの処理をすることを

おすすめします。