著者:asaba
【javaScript】readDataURLのエラー解決備忘録
inputタグで’file’と設定すると、ギャラリーから画像を選択してそれをimgタグに紐付けてあげれば選択した画像をアップロードすることが
できますが、ギャラリーから画像を選んでいてそれをキャンセルした時にエラーが起きました。アプリの機能面では影響がなかったもの
のメンテナンスの時にこのままでは可読性が下がるし追加した機能がバグを起こすかもしれないと思ったので修正を試みました。
画像はnpm startで起動したものです。
Filereaderで読み取った値がblobでなかったので実行できませんでしたという訳でしょうか。画像を選ばなかった時のreadDataURLの
進路先が用意されていなかったために起きたのだと思われます。とりあえずifで分岐点を作ってあげて、falseの時はreturnで処理を終える
宣言を用意してあげることで解決させることができました。めでたしめでたしです。
<pre> if (file) {
fr.readAsDataURL(file);
} else {
return;
}
</pre>
著者:asaba
【html5】imgタグでQRコード生成
タイトルの通りです。何か月か前に、reactのパッケージ「qrcode.react 」を使ってQRコードを生成する記事を書きましたが、それが
QRcodeAPIを使ってhtmlのタグに組み込んで作れることが分かりました。処理の内容は単純で、api.qrserver.comのQRコードジェネレータ
を使ってQRコードの本体とURLをしてるだけなのでこちらで実装するコードもかなり短いものとなっております。
このように記述してビルドすると下記のQRコードが出来上がっていると思います。
※urlは静岡西部のローカル、FMHaroになっています。
上記の図のようにまずはQRCodeAPIのURLを書き、続いてdataから組み込みたいサイトのURL（遷移先のURL）を記述するだけで
完成となります。また、後ろにsizeやbgColorを設定することでオリジナルのQRCodeを作ることもできる柔軟性も持ち合わせているので
総じて使いやすいライブラリといえるでしょう。
提供しているサイト（海外ぽい）のURLです。ここでライブラリの概要を見ることが出来ます。http://goqr.me/api/
著者:asaba
【cordova-react】 tips of react
今日は自分に対しての備忘録になります。同じようなことを前にも言っていたかもしれませんがこの先も何回かこんなネタが続くと
思われますのでご容赦ください・・・。それでは本題に入ります。reactの話です。
あるコードをgitでマージして取り込んだ後にコンパイルした時の話です。その中でhrefタグで囲んだテキストをクリックすると次ページに
遷移してくれるようなコードを書いたのですがURLのみ変わりページ自体が遷移されないという事態に直面。以下ダメな例↓
<a href="#hoge">
これは、hogeの前に置いてあるシャープがコンポーネント生成を阻害したことで引き起こり、その存在を完全に忘れ去っていたことで
起きてしまったエラーです。遷移したい時は前のシャープを必ず消しましょう。必ずです。今まで自分はreactで使うRoutetとして
HushRouterを使っていたのでシャープが無視されて遷移できてしまっていたのだと思われます。
HushRouterを設定していると上の状態でも遷移してしまうので遷移させたくない時はBrowserRouterを使いましょう。
軽い気持ちで使わずに事前にきちんと調べておきましょうという感じです。（猛省）
二つ目はコンパイル時に起きたことなのですが、これもどのタイミングで起きたのかはっきり分からずに解決してしまったので詳細が
分かったらすぐに載せたいと思います。いつも通りcordova run androidをするとこんな感じで赤文字エラーが出ます。
直訳するとandroid-versionsが見つかりません、です。いつどのタイミングでこのパッケージが消失したのかはっきり言って全く分かりま
せん。プラットフォームも入れ直した状態ですし、gitでプルした後も動いていたのでいきなりのエラーに面食らってしまいまいました。
とりあえずサイトに書かれていた通りnpm install android-versionsでパッケージを入れ直して解決・・・しましたがどこかすっきりしない
ですwとりあえず困ったら大正義npm installしてしまいましょう、という感じです。
著者:asaba
【cordova-react】チェックボックス実装
reactを勉強してから今に至るまで数多くのコンポーネントを作っていました。今作っているアプリにチェックボックスが必要ということ
が分かり色々参考にしながら実装することになりました。チェックボックスとはアンケートなどでよく使われる一般的なコンポーネント
で、クリックするとレ点が出現します。これをtrueの状態と呼び、レ点が入っていない時はfalseになっている状態と頭の隅に置いておき
ましょう。今回のポイントとしては以下の2点に重点を置きました。↓
・チェックボックスが一つだけあるフォーム
・trueになった時にある値をsetStateする
チェックボックスが複数ある時はmapでまとめてrenderに描画できるよな、でも単体でも機能してくれるのかな？みたいな疑問が浮かび
ましたが杞憂に終わりました。チェックボックス一つだけの実装はそんなこと考えるまでもなくさくっとできてしまいました。
前置きで黒く箇条書きで書いてしまいましたが大したことではなかったです、すみません・・。
<input type="checkbox" value="1" onChange = {this.onPermission} defaultChecked={this.state.checked} ></input>利用規約に同意する
こんな感じです。もしよかったらコピペして使ってみてください。defaulCheckedで初期値がtrueかfalseか選べます。
２点目もそこまで大したことない・・・ですがコンポーネントの作り方自体分からなくて躓いている初心者の方々のためにあえて簡単に
抽象的に説明します。字面通りですがtrueになった時にsetstateで値を飛ばしてあげるという単純明快な行為です。
<pre> onPermission(e) {
this.setState({checked: !this.state.checked});
if (this.state.checked) {
return;
} else {
console.log('success');
const date = new Date();
this.setState({permission: date});
}
}
</pre>
長ったらしいのは好きでないのでコード載せちゃいますね。(#^^#)
動作はそのまま、onPermissionが押されたらcheckedの値がsetStateされます。手前のビックリマークは現在のcheckedパラメータではない
ほう、つまりデフォルトの値falseの逆の値のtrueをsetStateしますよ！という意味になります。
falseのままだとreturnで何もせず、trueならば現在時刻をsetStateするコードだとはっきり見て取れると思います。
確実にこれより綺麗なコードは存在するのですが、僕みたいにreact始めたばかりの方は経験が浅いうちはこれくらいの雑多なコードのほ
うが覚えやすい気がします。
著者:asaba
【iosアプリ】ニフティ不動産が出しているアプリが良い！
来年辺りに引っ越しを検討している筆者です。物件探しは何回か経験があるので条件を絞って探すのはお手の物なのですが、各不動産
会社と比較してどこの会社が管理している物件が安いか比較するところは無頓着で後でこっちのほうがやすいじゃん！！みたいな後悔は
何度もしてきました。少し早いですが自分はニフティ不動産の賃貸物件検索アプリを使って物件探しの審美眼を鍛えております、はい。
このアプリは、スーモやアパマンといった大手を中心に管理されている賃貸マンションを不動産別で比較できる不動産版トリバゴみたい
な感じのアプリになっています。ただ探すだけでなく、お気に入り機能を使って同棲したい方と住みたい賃貸を共有したり他のユーザー
が気に入った場所を見ることができます。
住む前の事前情報ってすごく大事なのでここはしっかり物件のお見合いをして住む場所を
決めたいですよね。lineでリンクを送信できるので、相談したい方や親しい方と伝達してしっかりと前相談ができるのもスマートですね。
また、このアプリでは引っ越し業者の比較も簡単な仮の見積もりを作ってできます。引っ越し料金が気になるという方はこれを
使ってコストカットできる点も見逃せないのではと思います。
語彙力がないのであまり伝わらなかったかもしれないですがどうでしょうか？引っ越したいけどどこがお得なのか分からない、あのサイト
には自分に合った条件の物件がなかったには向いているアプリだと思います。
大分脱線してしまいましたが偶の息抜きという感じでみてくださいね、それでは！！！
著者:asaba
cordWriterのちょっとしたバグ
cordWriterは、文字コードやタブのスキップ数などの機能をほぼサイドバーで管理できることが特徴で、更に20つの言語に対応にも
対応している優秀なエディタです。自分も今これを使っています。
唯一の欠点は、いきなり落ちること。コードをいじっている最中でも保存する寸前でもお構いなしに降りかかってきます。
しかもandroidStudioと違ってその場で保存されないので、ソースツリーなどを使っていない小さなプログラムだと書いたコードが
全てパーになるのでものすごい損害になってしまいます。
他のエディタでは落ちたことはないのですが、自分はcordWriterを使う時のみに限り複数でのエディタを開いたりサイトを開きっぱなし
にしないなど工夫をしてきました。それから頻度は格段に減りましたが、エディタを使っている時に他のサイトを閲覧しようとするとペー
ジを開いた瞬間に落ちてしまったりととにかく負荷にものすごく弱いエディタということは身に染みて理解できました。
また、連続でアプリを起動してもバックグラウンドで負荷がかかるのでこれも避けてください。
タスクマネージャーを起動していればどのアプリが負担をかけているか簡単に検証できるので、cordWriterとでセットで使うと
予防もできて開発効率が上がるのでおすすめです。
著者:asaba
【cordova-react】画像をBase64で変換しないとTypeError: cyclic object valueで怒られる話
今日は、自分のミスを晒すことで二度と同じコードを書いてしまわないようにと戒めの気持ちで綴ります。
変数の誤字だったり空欄を統一しなかったりしょうもないちょんぼとはまた別のお題になります。
たった今の話になりますが、ある画像をaxiosを使ってサーバーに送ろうとしたときにTypeError: cyclic object valueで怒られてハマって
しまいました。
どうやらサーバーに渡すときにbase64に変換する前にsetStateしてしまったのが原因らしくこれでは何の画像なのか解読不能ですよ
という解釈だと思っています。
以下が自分が誤って書いてしまったコードになります。
<pre> onImageSelected(e) {
const file = e.target.files[0];
const fr = new FileReader();
fr.onload = () => {
const preview = document.querySelector('img');
preview.src = fr.result;
console.log(preview);
//ここはダメ！！！！
this.setState({profImage: preview});
};
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 = document.getElementById('image');
imgNode.src = dataUri;
//正しい位置
this.setState({profImage: dataUri});
},
options);
});
fr.readAsDataURL(file);
}
</pre>
ここではloadImageで処理する前に元の形式のままsetStateしてしまっています。onLoadの処理をしている時はまだ画像を変換していない
のでこれでは受け付けてくれないですよね・・・。なのでloadImage関数で確実に変換できているdataUri変数をsetStateしてあげれば
サーバーもうけとってくれるはずです。
画像を指定してサーバーに送ったら動かなくなった又は落ちてしまったという方はcatch内でログを辿ってみてください。
そしてTypeError: cyclic object valueが出てきたらこのブログを頼ってみてください。（そこで解決するかは分かりません！）
著者:asaba
【wi-fi】サッカースタジアム×ITにおける可能性
ジュビロの本拠地ヤマハスタジアムについにフリーwifiが導入されることになりました。これで試合観戦中どの席からでもwifiを使う
ことができるようになり、人が多くて回線が混雑して遅くなりがちなスタジアムでもサクサク通信できるようになりましたね～！
ちなみにジュビロは今年は序盤から調子を出せずに残留争いに片足突っ込んでしまいましたが、下のクラブとの勝ち点差が大きいのでなん
とか残留できそうです。
個人的に少し気になっているのが電光掲示板なのですが、あれはホームのサポーターから見て北東に設置されています。しかしアウェイ
の席は当然向かい側なので電光掲示板を見るのにすごく苦労してしまい首を左上にあげないと見えないという中々のアウェイの洗礼仕様
になっているのです。いくら敵とはいえ遠方から来てくれた方々にこれでは少しかわいそうに感じます。
au Dynamic ReplayというKDDIが開発しているVR技術は、今流行りのVRとカメラ技術を組み合わせることでスタジアムに設置してある
カメラの映像をVRゴーグルに繋ぐことでスタンドの座席だけでなく360度どこの角度からでもゴールシーンが見れるという神構造に
なっております。ゴール裏以外のゴールシーンは勿論選手間のパスワークやオフサイドだってばっちり見れるのでサポーターにとって
はかなり嬉しい作りになっていますね。
これ今実現できたら顧客満足度めっちゃあがるんじゃね・・・と思いましたが2019年に試験開始なので実装にはまだまだかかるのかなーて
感じました。実現出来たらぜひヤマハにもほしいところですよね。
NTTがスポンサーの大宮アルディージャの本拠地Nackスタジアムではアプリで食べ物を注文出来たり地元商工会と連携して
クーポンを実施することでお客さまと商店街の結びつきを強くしたりと企業の力をいかんなく発揮しているので、ヤマハスタジアムにも
まだまだITを活用する余地がありそうなので頑張ってほしいですね。
it先進国の日本でも、スタジアムにおけるit活用はまだまだ欧米諸国には及びません。東京五輪が迫っている今こそ日本の全てのスタジアム
を見直してウィークポイントを洗い出すチャンスなのではないかと感じています。
著者:asaba
【cordova-react】componentWillMountが廃止される日
componentWillMountとは、一回だけ呼び出される一連の処理を指しており一般的にはページ更新でよく用いられます。
最近になってReact.jsのライフサイクルの一つであるcomponentWillMountが近いうちに廃止されることを知ったのでリアルタイムで
使っていたので焦って調べたのですが、どうやらリリースをしていくうちにrenderが何度も呼ぶようになってしまい、安定したコンポーネ
ントが維持できなくなるためにこのような措置が取られたみたいです。
React.jsのバージョン16.3ではまだ使うことができるみたいですが、17.0で完全に廃止されてしまうみたいですね。
それでもこのライフサイクルでアプリを作りたい！という方はUNSAFE_componentWillMountメソッドを使ってやり過ごしましょう。
UNSAFE_componentWillMount(){
//初回で何らかの処理をしたい時に書きます。
}
UNSAFEは直訳だと安全でないと捉えられるが、セキュリティ上での意味でなく将来リリースするバージョンでバグを引き起こす可能性が
ありますよという意味なので使う分には問題ないみたいです。
reactもクラスの書き方だったりライフサイクルが見直されたりと目まぐるしくスタイルが変わっていきますがそれまでに普段から公式マニ
ュアルを見たり各コンポーネントの役割を理解していけば怖くないはずです、はず・・・。
参考にさせていただいたリンクです。↓ 英語です（汗）
What’s new in React 16.3(.0-alpha)
Understanding React — Component life-cycle
著者:asaba
【windows10】バッテリーリフレッシュ＆診断ツールを実施してみた
windows10を買って一年経つのですが、右下のバーに見慣れない緑色のアイコンがあったので気になってググったところ、どうやら
バッテリー・リフレッシュ＆診断という無料のツールでした。
通常のpcは購入して一年経つとウィルスバスターの更新などはよく見かけるようになるのですが、このツールは初めてだったので
よく分からないままクリックすると下のダイアログにたどり着きました。
このツールは、劣化していたバッテリーをリフレッシュさせ、ほぼ最初の状態に回復させてくれる機能を持っています。
自分はほぼpcを繋いでプログラミングをしているので、そこまでバッテリーを酷使した覚えがないのですが停電などでバッテリーを
登板させたときに何かあったらいけないのでしぶしぶ実施することに。というのも実はバッテリーのリフレッシュが完全に終わるまで17時
間もかかってしまい、その間pcが使えなくなってしまうのが嫌であまりやりたくなかったのですが初代富士通FMVみたいにバッテリーが
完全に死ぬ悲劇を繰り返したくなかったので仕方なくです、仕方なく。
これは私事な理由でしたが、pcを長く使いたかったらバッテリーのリフレッシュをすることをお勧めします。