著者アーカイブ asaba

asaba 著者: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 著者: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 著者: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 著者: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’)と定義しても問題なく動くのでページ速度の改善を望む場合はこちらの処理をすることを

おすすめします。

 

asaba 著者:asaba

【react】dupilicate declaration of methodの対象法と意味

他のクラスのライブラリを使いたかったのでimportでどしどし入れてビルドしようとすると題名のようなエラーに見舞われました。メソッ

ドだから関数名がダブっているのかと思ったのですが被りはなし。どこで同じ題名のメソッドを入れたのか悩んでいるとよく考えたら勢い

に任せて投入したライブラリ群が上にあるじゃないか、ここが怪しいと思い探したらやっぱりありました。

同じメソッドというか同じクラス名がダブって入っていたので怒られていたみたいです。


※悪い例

import travel from './travelPage';

import travel from './travelPage';

一番後ろの参照名を全部小文字で書いてしまってエラーになることはあるのですが、今回のエラーは初めてお目にかかったので

忘れない様にメモをしておきます。

asaba 著者:asaba

【javascript】ハイブリッドアプリでiosでマップを動かしたときにページごとスワイプしてしまう問題の対処法

ハイブリッドアプリを開発している時によくありがちなosの問題にハマりました。androdとios、やはりjavascriptで開発していると

プラグインでの動作やレイアウトに多少の差が生じてきます。多少だったらよかったのですが、ページ上に表示したマップを試しに

動かしてみたときにiosだけページごと地図が動いてしまうという致命的なバグを見つけてしまいました。このままではものすごく

見にくいページになってしまうのでaddEventListenerを使ってマップをスワイプしている間はページのスワイプをシャットダウン

して二重スワイプを防ぐように制御することにしました。

コードはこんな感じです。

 

</pre>
var eMap = document.getElementById('map');
eMap.addEventListener(
'touchmove',
function (e) {
e.preventDefault();
},
{ passive: false }
);
<pre>

 

最初の行でidのmapを取得。次にtouchmove、指でページを動かしたときに発火する関数です。二つ目の引数にコールバックとして

e.preventDefaultを記述。touchMoveが作用した時に常にこちらも発火するようになっています。

第三引数ではpassive:falseを設けていますが、これがないとブラウザが正常にe.preventDefaultを読み取ってくれないです。

chromeではpreventDefaultがデフォルトでtrueとなっており、この状態だと命令された動作をキャンセルせずにスルーして実行してしまう

ため、こちらでfalseとして変更してあげる必要があるみたいです。最適解ではないですが有効な一手になりうるので参考にどうぞ。

 

 

 

asaba 著者:asaba

【sourceTree】プルをすると認証エラーになるエラーの解決法

macでソースツリーとbacklogを連携させるときに少しハマりました。コルドバアプリをビルドしようとしたら反映されていなかったので

プルを試みたのですが、下のようなエラーにずっと攻撃されていました。

 


fatal: Authentication failed for 'https://backlog/asaba/'
remote: Authorization required

キーチェーンを何回も削除作成したりソースツリーを再起動したりと応急処置をしましたが全く動かず。むしろキーチェーンを

余分に作ったのが原因でxcodeに怒られたりと凄惨な目にあいました。

とりあえずgithubがホスト元のアカウントを消してソースツリーを再起動してみることに。すると、いままでなかったようなダイアログ

がでてきました。ユーザーidとパスワードを入れろと書いてあるのでもしかしたらbacklogのアカウントを入れ直せば認証できるのかと

希望をもってログインし直してプルしたら見事上記のエラーを解決させることができました。あー良かったと思っていたらなにやら

別のダイアログが・・・。password required。またパスワード!?ということでbacklogと同じパスワードを打ち込みました。

このダイアログはセキュリティ強化のため二回同じパスワードを打ち込まないと通してくれないらしく

(同じでいいならあんまり意味がないような気がする)めんどうですが、githubの場合はアクセストークンを要求してくるのでまあまだ

優しいかなという所感でした。

 

何がいけなかったか振り返っている最中ですが恐らくリポジトリがあるbacklogで登録したid・パスワードに対しなんか無駄に一つ

アカウントを登録していたのでそれがいけなかったのかなと感じています。

git系のエラーはほんとに心臓と胃に悪いので極力出くわさないようにしたいです。

 

まとめ:Authentication failedに出くわした場合

 

①sourceTree->環境設定->高度な設定と進み、現行のユーザーを削除。

②ソースツリーを再起動

③冒頭出てくるダイアログにbacklogのユーザーidとパスワードを入力。ダメな場合でも通るので注意。

④プルしようとするとまたダイアログが出てくるのでさっき入力したパスワードをもう一回入力。

 

以上になります。

 

asaba 著者:asaba

【mapbox】mapboxをcssで修飾するときに気を付けること

mapboxはアプリケーション向けに開発された地図ライブラリです。地図ライブラリといえばgoogleMapやOpenStreetMapがありま

すがmapboxは高速かつ比較的自由度が高くコードで自分の好きなようにカスタマイズすることができるという点が評価され様々なアプリ

に使われています。

便利なライブラリですが、各osにつき若干期待された動作と違う動きをするみたいです。

例えばandroidで大丈夫だったはずのmapboxがiosで開いた場合ページを画面いっぱいに出してページスクロールをすると、ページごとス

ワイプしてしまいます。目的の場所を探している最中も常にページが監視され続けるのでこのままだと非常に使いにくいです。

このままでは煩わしいので一から疑わしいコードを索敵することに・・・すると意外とすぐに原因を見つけ出すことができました。

どうやら、mapboxを装飾する時に定義したcssに問題があったみたいで、cordovaのようなハイブリッドアプリとmapboxを組み合わせる

場合はcssでpotision:”absolute”と定義しなければ正しく機能してくれないみたいです。

なんだよそんなことかと思いつつもcssの基本を忘れかけていたので手放しには喜べませんでした。

 

</pre>
※iosでマップ固定するプロパティ

potision:"absolute,"
<pre>

 

次の課題はページの一部に表示されたマップをスワイプ検知を回避して固定するところまでです。ここをabsoluteするとページ自体が

マップより下にいかなくなるのでより捻って対策を模索する必要がありそうですね・・・。

 

 

 

asaba 著者:asaba

【eslint】eslintで警告を自動修正するオプション

先週、同僚さんからeslintで間違った警告を修正する方法に–fixというeslintのオプションをつけて修正する方法を知りました。

eslintはバグの温床となりうるコーディングや書き方がレガシーなコードを検知すると状況に応じた警告を吐きまくります。

ぽちぽち潰すのも正解ですが、中にはそうでない警告も存在します。eslintの警告自体も頻繁に更新されている訳でないのでそんな中で

膨大なコードの場合は何もオプションを付けずに修正するとなると骨が折れます。

 

冒頭で紹介した–fixオプションは、短い記述でエラーを指摘する警告が間違っている場合に順番に修正してくれるのでこれを上手く使う

ことができればムダな警告の修正をすることなくコーディング時間をせつやくすることができます。

こんな感じでpackage.jsonのコマンドに追加します。これで設定は完了です。

 

<pre>"scripts": {
   "test": "echo \"Error: hoge\" && exit 1",
<span class="gd">   "lint": "eslint src/script.js"
</span><span class="gi">   "lint": "eslint src/script.js --fix"
</span>  },</pre>

 

このように万能な子ですが、全ての警告を修正できるという訳ではないみたいです。

では警告対象ってどうやって確認するかというと、まず公式に飛びます。ずらっとeslintが並んでいる中でレ点の隣にペンチのマーク

がついているものが修正可能eslintになります。

 

 

eslintは使ったことがあるのですが何のエラーがなんの理由で出ているか読み飛ばしていたので今回の–fixはエラーの中身を知るいい機会になりました。

asaba 著者:asaba

【javascript】ページ読み込みを加速させるツール・LazyLoad

LazyLoadとは、scriptタグに定義することでグリッドなどで画像を大量に含んでいるページをその画像が位置している場所までスクロール

したところで初めて読み込むよう制御することができる便利なライブラリです。

 

画像を多用するサイトでは、よくjavascriptやcssを圧縮して読み込ませていますがそれでもまだ遅い若しくは画像が出てこないなど

難儀な問題が多く降りかかってきます。しかも数十枚の画像を一気に読み込むことでページがフリーズして動かなくなったりして

最悪そのページから離脱してしまうユーザーも少なからず存在します。サーバーにとっても多量の画像を送ることは多大な負担につながる

のでこのままではサーバーもユーザーも誰も得をしない宙ぶらりんな状態になってしまいますね。

LazyLoadライブラリは、ページスクロールをしてレイアウト上の範囲のみ画像を送るように命令することで余計な画像を読み込まずに

容量を確保することができるので上手く使うことができればページ速度の改善に大きく貢献してくれそうです。

自分は実装する前はnpmから取ってくるのかなとか実装するの大変そうとかめんどくさいイメージが纏わりついていましたが

とても簡単だったのでさくっと実装することができました。

とりあえずgithubからライブラリを入手。緑色のボタンを押してクローンをしてください。

 

jquery_lazyload-master.zipというファイルがダウンロードできたと思います。この中にあるjquery_lazyload-masterというフォルダの中に

lazyload.jsとlazyload.min.jsというファイルが入っていると思いますがそこはどっちを使ってもいいみたいです。

自分は無難にlazyload.jsファイルにしました。JQueryと一緒にheadタグの間に埋め込みます。JQueryはバージョン2以上が望ましいです。

 

<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"./lazyload.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>

 

これでLazyLoadを使うことができます。コード量が少ないので実装も楽々できました。とるあえずjavascriptでは実装することはできたの

ですがこれをreactと組み合わせたらもっと負担減らせるのにな~と考えております。

そもそもreactではほとんどのオブジェクトをpropとstateで扱うので出番はあるのかなと思っていますが実装することができれば

ネイティブにも遅れをとらない軽量アプリの開発できるのでぜひとも取り込む技術は取得しておきたいものです。