著者アーカイブ 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はあまり得意ではないですが、この技法はスマートに使えるようにはしておきたいと思います。

著者: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>

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