著者:asaba
【windows10】バッテリーリフレッシュ＆診断ツールを実施してみた
windows10を買って一年経つのですが、右下のバーに見慣れない緑色のアイコンがあったので気になってググったところ、どうやら
バッテリー・リフレッシュ＆診断という無料のツールでした。
通常のpcは購入して一年経つとウィルスバスターの更新などはよく見かけるようになるのですが、このツールは初めてだったので
よく分からないままクリックすると下のダイアログにたどり着きました。
このツールは、劣化していたバッテリーをリフレッシュさせ、ほぼ最初の状態に回復させてくれる機能を持っています。
自分はほぼpcを繋いでプログラミングをしているので、そこまでバッテリーを酷使した覚えがないのですが停電などでバッテリーを
登板させたときに何かあったらいけないのでしぶしぶ実施することに。というのも実はバッテリーのリフレッシュが完全に終わるまで17時
間もかかってしまい、その間pcが使えなくなってしまうのが嫌であまりやりたくなかったのですが初代富士通FMVみたいにバッテリーが
完全に死ぬ悲劇を繰り返したくなかったので仕方なくです、仕方なく。
これは私事な理由でしたが、pcを長く使いたかったらバッテリーのリフレッシュをすることをお勧めします。
著者:asaba
【ESLint】続 ESLintのエラー解釈
前回ログを消して見れなくなったエラーコードですが、新しいファイルをリファクタリングしたらぞろぞろと出てきたのでこの機会に
説明してしまいましょう。ESLintて何？という方は筆者に期待するのはやめてググってみてください。（そっちのほうが賢明）
二つとも簡単なエラーですが国内の資料が見つからないので自分なりの解釈で訳します。例えばこのエラー、コメントアウトの中で
引き起こしたエラーですがパラメーター’e’が行方不明ですよという意味合いになります。
Missing JSDoc for parameter 'e'
これは、後述に書いてある@event～がない時に吐かれるエラーです。イベントハンドラにコメントを付ける際には忘れずにつけて
おきましょう。
二つ目は、reactにはprop-typeというパッケージがあり、ESLintを導入するとこれらのパッケージがちゃんとついているかどうかも
検証してくれます。これを怠ると後述のようになります。
‘history’is missing in props validation
historyを使う際には、このprop-typeが必要になってきます。今まで当たり前にできてきたので少々面倒くさいですが、npmで
prop-typeをインストールしてコード一番上にインポートしておいてください。
本日は以上で終わりになってしまいますが、どこかでESLintエラーにまた会うことでしょう。綺麗なコードを書けるように引き続き牙を研
ぎ続けます。
著者:asaba
【ESLint】reactにESLintを導入しました
コードの品質とチームで書き方を統一するためにESLintを導入しました。これがあると、規模の大きいコードでもチームで同じ書き方を
することでリファクタリングの効率を上げることができます。
日本語での資料が少ないので、ここで自分の拙い日本語で少しずつエラー詳細を説明していきます。
一番最初に見かけたエラーがこちらです。直訳するとLFを期待したがCRLFが検出されましたという感じです。
Expected linebreaks to be 'LF' but found 'CRLF'
ESLintは改行コードはLFしか認可しないからか分かりませんが、コードエディターではこれが発生しました。
CRLF->LFに変えて保存で治ります。簡単ですが、多分全行コードがこのエラーをもって吐き出されるのですこし労力がいるかもです。
自分も最近導入したばかりなのですが、いきなり入れるとエラーが
どんどんでてくるので面食らわずにエラーを解消していってくださいね。
すみません、本当はこの後にどんどんエラーを紹介したかったのですが、ログが消えてしまったのと画像を撮り忘れが原因で
載せることができなくなりました。次回以降にエラーが出たらまた紹介していきたいと思います。
著者:asaba
【teratail】teratailで質問する前に抑えておきたいこと
teratailはプログラマやSEだけでなく、ネットワークエンジニアやITコンサルタントの方々も利用しているit業界ではトップクラスの
ソーシャルメディアです。スタックオーバーフローと違いこちらは国内のみの質問と回答で構成されており、これまで英語が苦手で
どこに質問していいか分からない、ヤフー知恵袋に投稿したけど同じ分野の人が見ていなくて質問が全く帰ってこないという方々の強い
味方として国内でも信頼されており、自分も去年プログラミングにおいて分からない事だらけで中々コーディングが進まない時に質問
したのですが、大抵は数時間以内に回答が返ってくるので開発スピードも極力落とさずに作ることができました。
また自分はteratailなどのメジャーなソーシャルメディアで投稿している時は、たくさんの人が閲覧しているので質問者としての立場を
忘れずに三つの決まり事を守り続けています。その三か条をざっくり説明していきたいと思います。
一つめは、自分がなにをしたいか明確にしておくこと です。
まず、ネットに限らず人に質問をするときは自分の分からない部分を抑えておき、回答者が答えやすいような環境を作ることが大切だと
思っています。何が分からないか分からない状態を放置して質問しても、回答者は分からないポイントがどこなのか見当がつかないので
このようなあやふやな状態で投稿しても恐らく回答が0、若しくは的外れな回答が返ってくることうけあいです。
質問をする前にエラーログを見てどのようなエラーが出ているか確認して、自分が壁に当たっている問題点を洗い出すことがポイントだと
思います。
二つめは、自分が試したことを予め書き出しておくこと です。
自分が詰まっている質問に回答がついた、見てみよう！と意気込んで回答を開くと、自分が過去にした解決方法が・・・（しかもそれで解決できなかった）
というパターン。自分もうっかりこのようなミスをしてしまいがっくしきてしまった過去があります。明らかにこちらの情報不足で起こる
事故であり、待った時間が無駄になってしまうので事前に自分が試したことを箇条書きでいいので書き揃えておきましょう。
これなら回答者も詳細を読み取ることができるので、その項目を除いた解決手段が見つかる可能性が高くなります。忘れずに書いておきま
しょう。
三つめは、質問をいただいた回答者には必ずお礼をいうこと です。
これはIT技術者以前に社会人としての常識になってしまいますね(汗)自分はqiitaやブログで解決できた時は必ずコメントで一言お礼を
言っています。答えをくださった先人たちには敬意をこめてお礼を言いましょう。日ごろから感謝の気持ちを欠かさずに利用していると、
この方は礼儀正しいし回答もしっかり見ていてくれるからまた困った時は助けてあげよう。と先人の方々もまた気持ちよく受け答えするこ
とができるので後々財産になってくると思います。またteratailではベストアンサーという制度があり、基本は一番の解決の要因となった方
の回答に付与します。答えが役に立った場合は必ずつけてあげましょう。
以上が僕がteratailで書き込むときに大切にしていることです。移り変わりの早いこの業界だからこそ情報を共有して助け合うことが
一番の良薬ではないかと考えています。
著者:asaba
【cordova】画像が横向きになる問題を解消する
コルドバでアプリを作っていると、FileReaderを使って画像をアップロードする機能が欲しくなるときがあります。
このライブラリを使う時に少しめんどくさいのが、アップロードの際に画像が90度回転してしまいその修正をしなければいけないという点です。
こんな感じです。↓
対策としてexif-jsを使って向きを調べた後にcanvasで修正する方法があるのですが、コールバックが含まれていて可読性が下がってしまう
点とandroidのバージョンが古いとちゃんと動作しないという問題を抱えています。
reactで開発していることもあって、スタックオーバーフローを見ても事例が少なく途方に暮れていたところ有用なサイトを発見。
どうやらnpmでblueimp-load-imageという画像を独自メソッドを使って直してくれる便利そうなパッケージを発見。
さっそくnpm install blueimp-load-imageでインストール。下でコードの説明をしていきます。
<pre> loadImage.parseMetaData(file, (data) => {
const options = {
maxHeight: 1024,
maxWidth: 1024,
canvas: true
};
if (data.exif) {
options.orientation = data.exif.get('Orientation');
}
loadImage(file, (canvas) => {
const dataUri = canvas.toDataURL('image/jpeg');
const imgNode = this.refs.image;
imgNode.src = dataUri;
},
options);
});</pre>
parseMetaDataメソッドを使って画像を修正するのですが、まず最初に対象のfileを引数にした後にオプションでキャンバスをtrueで使用
可能にし、その次にdata.exifで画像の向きを調べています。loadImageではtoDataURLでbase64に変換して、最終的にimgNodeとタグ
this.refs.imageを紐付けて画像を表示しています。このコードで全てセットなので、難しかった画像の向きも簡単に修正することができますね。
これで横向きになっていたがぞうが元に戻りました。めでたしめでたし。
その他参考にさせていただいたサイトです。－＞http://dackdive.hateblo.jp/entry/2016/07/19/095000
著者:asaba
【html5】inputタグのtype=”file”のワナ
コルドバでアプリ開発をしていると、プラグインによってandroidとiphoneが必ずしも同じ動きをしない場合があります。
例えば、下のinputタグのtype=””fileもiphoneの場合はカメラ撮影もギャラリーから写真を撮ることもできるのに対し、androidでは
カメラ機能だけがついていない状態で反映されます。
<input type="file" >
iphoneだとこんな感じになります。
問題のandroidがこちらです。
http://kimizuka.hatenablog.com/entry/2016/12/01/215013
の記事によれば、機種依存のバグだそう。androidには無効な機能がいくつかあるみたいで再現は不可能みたいです。
今自分が開発しているアプリは、カメラ機能で撮った写真をアップロードしてその写真を恒久的に使うのでこのバグはかなり痛かったです。
このような場合は諦めてcordova-plugin-cameraというプラグインとinput fileタグを使い分けるしかないですね。
自分はこれに気づくのが遅く数時間無謀な格闘をしてしまいましたが、どこのサイトを見ても解決策が見当たらない場合はすっぱり諦めて
一度頭の中空っぽにして別の手段を考えるとアレ？これでもいけるんじゃね。と意外とすぐ解決策が見つかるかもしれません。
一つのエラーに執着すると、視野が狭くなってしまい別の糸口が見えなくなってしまうことを痛感させられましたですはい。教訓です。
著者:asaba
【chrome】実機で起きたエラーをブラウザで確かめる方法
ブラウザと実機(androidStudio)では挙動に若干の違いがあり、コルドバのプラグインはブラウザでは大体使えないので挙動を見たい時は
実機で確かめなければいけません。これだけならめんどくさいだけで開発には支障ないのですが、ブラウザでエラーが起きずに逆に実機で
エラーが起きてしまった場合は実機周りや開発環境を見直さないといけなくなる羽目になり、開発が大幅に遅れてしまいます。
androidStudioで一応Logcatでエラー内容を見れるのですが、ブラウザと違い全て表示してくれるわけではないので、あまり頼れるもので
はありません。（ハイブリッドアプリを作る時のみ）
確実にエラーを見るには、chromeを開いてアドレス欄にchrome://inspectと入力してください。
すると、下記のようなページに移動すると思います。
移動出来たら、一番下に小さくinspectと書いてあるリンクをクリックします。すると、別ウィンドウで下の画像のようなページが表示
されます。今は何も表示されていませんが、実機でコンパイルしてアプリを起動してエラーが起きると通常のデベロップツールと
同じようにエラーの内容が表示されます。
androidStudioでは表示できないエラーの中身も、これを使えば全部見ることができます。実機で起きたエラーの詳細を見ることで
開発の効率もぐんと上がるので、ハイブリッドアプリ開発をしている方にとっては心強い味方になってくれると思います。
著者:asaba
【cordova-react】cordova-barcodescannerプラグインでスキャンしたURLに遷移する方法
少し前にcordova-barcodescanner-pluginを導入したのですが、肝心の読み込みー＞そのページに移動するという機能を付けられずにいた
のですが、最近になってようやく実装できました。方法としては、以下の一行を加えるだけです。
<pre>window.location.href = result.text;</pre>
読み込んだresult.textをhrefで遷移しているだけなのでとても簡単に実装することができます。
コード全体がこちらです。
<pre> window.cordova.plugins.barcodeScanner.scan(
function (result) {
alert("Success!\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
window.location.href = result.text;
},
function (error) {
alert("Scanning failed: " + error);
},
{
preferFrontCamera : true, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS and Android
}
);</pre>
設定は遷移に影響しないのでお好みで変えていただいても大丈夫だと思います。試したところほとんどのQRコードで遷移成功できたので
実際に使ってみる分にも申し分ない性能だと思います。
今回無事に実装ができたきっかけはまたまたスタックオーバーフロー様の記事です。
リンク記事ー＞https://github.com/phonegap/phonegap-plugin-barcodescanner/issues/262
著者:asaba
【javaScript】税込み商品の計算アプリ
プログラミングを始めた時に既に作りたいものがたくさんあったのですが、まだ技術も基礎もない自分でも何か作れない
かなと試行錯誤していた時に作ったアプリです。題名は、税込み商品計算アプリです。
消費税が上がることを思い出したことをきっかけに作ったアプリです。使い方は単純で、商品と現在の消費税を入力して計算ボタンを
押すと税込み価格をテキストで表示する、本当にそれだけのアプリです。
<form name="text">
<input type="text1" id="okt1"name="add1"> ×
<input type="text2" id="okt2"name="add2">
</form>
<input type="button" id="cb" value="お会計"onclick="cash()">
<input type="button" id="res" value="リセット"onclick="reset()">
<p id="result"></p>
<script>
var num1 = document.text.okt1.value;
var num2 = document.text.okt2.value;
var res = document.getElementById("result");
function cash(){
num1 = document.text.okt1.value;
num2 = document.text.okt2.value;
res = document.getElementById("result");
sum = Math.round(num1 * num2);
if(num1==="" || num2 ===""){
res.innerHTML = "数値を入力してください。";
}else if(!isNaN(num1) && !isNaN(num2)){
res.innerHTML = "税込みで" + sum + "円になります。";
}else{
res.innerHTML = "数値以外が入力されています";
}
}
//データを削除する処理
function reset(){
document.text.okt1.value="";
document.text.okt2.value="";
res.innerHTML = "";
}
</script>
適当にコピーしていただいてchromeで開けばすぐに動きます。
プログラミングを経験しているかたにとってはものすごくチープに感じてしまうくらいしょぼい出来ですが
javaScriptでは必須スキルのフォームを作る方法を詰め込んでいるので、初心者がありがちなこのコードは何をしているか
分からない、何のための関数なのか理解できないといった最初の壁をぶち破ることができます。
reactやvue.jsではこの作法を応用してコンポーネントを作りますが、これら流行りのフレームワークも簡単なアプリを
つくっていく中でめきめきと覚えることができるのではないでしょうか。（筆者は容量が悪いので時間がかかりました）
初心者のかたで何が分からないか分からないという方は、もしjavaScriptでググってこのサイトを見つけたら何かの縁かと
思って試しに動かしてみてくださいね。
著者:asaba
【cordova-react】ajax通信でerror判定の時のデバッグ方法
今日はajax通信でエラーが吐き出された時の中身を確認する方法を紹介いたします。
ajaxなどのhttp通信では、エラー時にxhr, textStatus, errorThrownをひと固まりで吐き出します。その中身を見るためにはconsole.logで
一項目ずつ引数を指定してあげる必要があります。
コードで書き表すと下記のようになります。
console.log("xhr : " + JSON.stringify(xhr));
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
上記のxhrは従来のconsole.logに入れると[Object object]で表示されなくなるので、JSON.stringify関数で囲んでください。
この中身を見ることで、クライアント・サーバー間でどのタイミングでエラーになったかを確認することができます。
例としてログで吐かれたxhrの中身を見てみます。
[INFO:CONSOLE(1)] "xhr : {"readyState":0,"status":0,"statusText":"error"}", source: file:///android_asset/www/static/js/main.7a2980e1.js (1)
引数にstatusという項目で0と返ってきていますが、この0とはタイムアウト（接続時間が長すぎて途中で切られた結果の値。サーバー側ではなくブラウザから送られてくるもの）を指します。
このほかにも、404（ファイルが存在しない）や401（許可されていない）など、原因によってさまざまな値を返してくれるので
そこから解決方法を紐付けることが出来れば素早くデバッグ処理をすることができると思います。
ajaxで通信したけどエラーが帰ってきたでも何がエラーか分からない！という方は試してみてください、それでは。