著者:asaba
【chromeApps】アプリをリロードするとcontents security policeで引っかかる
開発中のアプリをリロードしているとcontents security policy系のエラーを発見しました。
見てみるとインラインでjavaScriptを書くことは、contents security policeでは規制していますみたいなことを言っていますね。
でもCSSだって外部に書いているのに何で怒ってるんだこの人は・・・。実機では全く起こらないので、chromeだけの問題なのかな
と勘ぐっていますが原因はさっぱり分かりません。
ですがandroidではしっかりと動きます。
ん～、値を持ったままリロードしているのがchromeにとってはよくないのかな？
幸い他の機能には影響を及ぼしていないので実機で使う分には問題はないと思います。ですが軽視はできないので余裕がある時に
原因の究明に努めたいと思います。
著者:asaba
【cordova-react】selectタグのエラーについて
selectタグで送られた値を表示するためにthis.state.wordを値に設定したのですが、見事に怒られました。
エラーの内容です。
なにやら赤文字でSelect Console Error: Select elements must be either controlled or uncontrolledと訴えているようですが
selectタグで異常をきたしているのは間違いないのでとりあえず調査、あっさり消してみせました。
簡単に説明するとdefaultvalueが不要ですということです。
これはpropで受け取ったthis.state.wordとdefaultValue = “”を同時に定義している為、制御しているのかしていないのかどちらか
はっきりして！という意味です。
タグを制御するときは値の設定をひとつにしぼってくださいということですね。日ごろからじっくりコードを理解して読んでいれば
このような事態も防げたかもしれませんね～。
今回の反省点は
・自分の書いたコードはエラーがなくてもこまめに見直す
・案を思いついたらいきなり書かずにプロトタイプ（模擬）のソースで試す
の二点です。初心忘れるべからずですね・・・。
著者:asaba
【cordova-react】値を動的に次ページに渡す方法
axiosなどの非同期通信を絡めた開発をしているとどうしても単純な画面遷移のことを忘れそうになってしまいます。
ただ単純に遷移だけするならば this.props.history.push({pathname: ‘/next’)}でいけますが、値をもって遷移だと始めたばかりの方は
？となってしまいがちですよね。基礎中の基礎なのでネットにもたくさん情報がありますが、コードには個人差があるのでどうしても
どれを参考にしたらいいか分からない、長くて知らない文法も書かれているから今の自分には理解し難いなど頭を抱えてしまうことも
多いと思います。自分も辛酸を嘗めてきた身ですので、ここでは可能な限り簡潔に書きまとめて同じ悩みを抱えてる方の助けに
なればいいなと思っています。分かりにくかったらごめんなさい。
とりあえず値をもって遷移させるコードがこちらです。↓
main.js
this.props.history.push({pathname: '/next', state: { name: this.state.name }});
現在の値であるstateを引数にして飛ばしています。これだけで次のページで値nameを扱うことができます。
めっちゃ簡単ですね。明解ですね。じゃあ次のページではどうやって受け取るの？ってなった時はこちら↓
next.js
constructor(props) {
super(props);
this.state = {
name: this.props.location.state.name,
}
}
this.props.location.state.nameとは、タグに格納されたname（値を）意味しています。つまり、前ページでタグで受け取った
値nameをthis.stateのnameキーに値として登録しています。
コンストラクタ内でconsole.log(prop)すると、locationタグの中にしっかりとnameの値が入っており
これで取ってきているのが確認できます。
これでnext.js内のrender(){}内で
と定義すればnameの値を表示させることができます。
ざっくりでしたがどうでしょうか。これがすらすら書けるようになれば初級者も卒業できて次のタスクも見えてくると思います。
著者:asaba
【cordova-react】外部から画像を読み込むための設定
snsアプリの開発においては画像を送信したりプロフィールに設定したりする機能は必須です。リサイズの方法やオリエンテーションの
設定方法など今までたくさんの先人のブログを見てきて試しては何度もハマりましたが、ようやくコツが掴めてきた感じがします。
がしかしcontent-security-policyの設定がまだ理解できていないのでよく触ってエラーを出してしまいます。
例えばこのrefused to load the imageというエラーは、base64画像を送る時にimg-srcの設定値がblobになっていないと送信を拒否します。
chromeAppが出しているwebViewタグを使う手がありましたが根っこから書き直しは骨が折れるので自分はこんな感じで修正しました。
[javaScript]
img-src 'self' data: blob:;
[/javaScript]
これを直していないとchromeブラウザでは即落ちし、実機では画像は出ますがbase64のデータ文字列を読み取らなくなります。
長い道のりでしたがこれで全てのエラーを駆逐できたったぽいです。
参考にさせていただいたサイト↓
https://yakitama.goat.me/8VTjttQx
https://trycatchand.blogspot.com/2014/03/how-to-load-external-images-on-chrome-apps.html
著者:asaba
【cordova-react】payload too largeでハマった
画像をアップロードして送信する機能を作っている時はbase64やらオリエンテーションの向きの問題やらめんどうな決まり事が多く
つまずくことも多いと思います。今回はその二つを乗り越えた先での問題になります。
blueimp-load-Imageプラグインを使って画像を修正してサーバーに送る機能を作っていたのですが、送る時にpayload too largeという
見慣れないエラーに直面しました。
これは指定の画像が重いのでサーバー側で受け取れませんよ～って拒否されていいる状態です。
スマホで撮った写真は比較的容量が大きく、どうしても数十MBまで重くなってしまうのでそのままでは送信ができない
場合があります。
サーバー側の画像の容量の最大値を変更することで送信することができますが、クライアント側ではそれが難しいのでこちらで
画像の最大値を変更してあげましょう。
loadImage.parseMetaDataのオプション設定値にあるmaxHeightとmaxwidthの値を変えてみてください。 [javaScript]
const options = {
maxHeight: 512,
maxWidth: 512,
canvas: true,
};
[/javaScript]
変更前は値が1024で設定されていて大きすぎて送れなかったのでここで512にサイズを下げてあげます。
サーバー側が設定している基準値を下回ればどんな画像も送れるようになので同じエラーで悩んでいる方は試してみてください。
著者:asaba
【iphone】続・iphone故障記
iphoneが復活してから二日が経ちましたが、いまのところ同じような現象が起きることはなく平穏が戻ってきたような気がします。
もう二度と同じ過ちを繰り返さないようにここに心当たりのある行為と対処法を書いておきます。
まず、自分は作業時にiphoneを使っていた時に接触の調整のためにアダプタを抜き差ししていましたが、この時点でかなり危ないことを
しているなぁと後から後悔しました。iphoneを使いながらこれをしていると、高い確率で接触不良を起こしてショートをしてしまうから
です。iphoneだけならまだしも最悪使っているpcもショートしてブルースクリーンが出現することもあり二次災害に陥るので
どんなに急いでいるときもこれだけは絶対に避けてください。右端のツールバーでiphoneを安全に抜き差しできるので
（usbの形をしているので分かりやすいです。）作業中にiphoneを外したくなったときは必ずこれを使って僕の二の舞にならないように
してくださいw上記ほど関連はないかもしれませんが、androidと併用して繋いでいたのでpc側がビジー状態になって通信が遮断されて
iphoneが宙ぶらりん（データが空っぽ）になってしまった可能性も否定できないです。
デバイスを複数使ったマルチタスクはなるべく避けた方がいいかもしれませんね・・・。
以上ですが、まとめると
・むやみにiphoneを抜き差ししない
・複数のデバイスと一緒に接続をしない
・一度なった時は落ち着いて電源を切ることを優先する
の三か条です。不適切な行動でpcとiphoneが共倒れにならないよう守っていきましょう。
著者:asaba
【iphone】iphone故障記
昨日ブログを書き終わったころにちょうどiphoneの調子が悪くなりまして・・・まさにタイムリーな瞬間でした。
症状としては、iphoneのデータは生きていました。が、フリックやボタンの反応がとても遅く、一つのクリックを終えるのに1分もかかっ
てしまうという異常事態に。ようやくデスクトップまでたどり着いたかと思いきやなぜか速攻でロック画面に戻る始末。
電源が突然落ちたことは何度か見ていて慣れっこだったのですが今回のエラーはさすがに狼狽えました。
なんせバックアップを最後に取ったのは三か月前でアプリやアドレスの更新も結構していたので今壊れてもらうとだいぶめんどくさいこと
になってしまうのでw何より購入して一年未満なので残ったお金をどうしようとまで考えて半ばパニック状態になりました。
これはまずいと思いiphoneを購入した携帯ショップ(車で約20分くらい)に急いで向かいました。運転中も何回かボタンを押したりと応急処
置を試みましたがやはりおかしいまま。途方に暮れていたのですが、イチかバチかiphoneの電源を切ってみることにしました。
先ほど述べた通りフリックにもものすごい時間がかかり、ある程度超過するとロック画面に戻ってしまうので電源を切るフリックバー
が出てきた瞬間に指をしゅばばばっとスライドさせましたw。ダメ元でしたが今の自分にはもうこれしか出来ることがなかったので一縷の
望みをかけて電源を切るしか方法がなかったのです。しばらくすると、画面にアップルのロゴが・・・。よくわかりませんが電源を
落すことに成功したっぽいです！！これで一タスク終わり、後は再起動して通常通り動作すれば元通りです。
生き返ってくれ～という思いを込めて再起動した結果・・・なんとあっさりと元の状態にもどすことができまし
た！！！アプリの中身も
無事でした。治ったもののまたいつ壊れるか分からないので直ぐにバックアップをとる作業をしました。肝心な原因ですが、ihpneを
仕事で使っている最中だったので予測はつきますが、詳細は次回詳しくかいていきたいと思います。お騒がせしましたm(_ _)m
著者:asaba
【iphone】勝手にアプリが起動する話
UQMobileサービスのiphone6sを買ってからもうすぐ一年になりました。格安simだけあって一か月の使用料金が5000未満に抑えられwifi下
では通常サービスのiphoneと変わらない速度なのでストレスを全く感じずにスマホライフを楽しんでおります。
しかし最近になって色々不調がでてきました・・嘘だろまだ一年なのに。内容というのもiphoneを一回閉じてまた開こうとすると持っている
アプリがランダムに開くようになっていたりページが粉雪みたいに溶けるようにゆっくり消えたりと少し笑い事では済ませられない感じです。
最初はアプリのどれかがデカい容量くってるのかなと思ったのですが容量128GBで残り102GBなので抱えすぎて落ちるなんて考えられない
のでむやみにアプリを消すのをやめました。自分は持っていませんが海外産のアプリは容量が多く広告も結構やかましいのでiphoneの
寿命を延ばしたい方は頻繁に使わないほうがいいかもしれません。持っているよりは必要な時だけインストールして使うのがベターっぽい
です。結局容量の大きかったやっていないソシャゲや音響ツールを消したのですがよくなったのかそのまま変わっていないのか
全く分かりません。物理破損も考慮しましたが水没させない限りはデータは飛ばないので除外しました。（ハードはポケットから落下させ
た位では死なない程度に頑丈なので）ん～なんだろう・・・。
著者:takahashi
Windows10で起動直後にも関わらず勝手にサインインされる問題の対策法
複数アカウントがあるWindows10で、起動直後でサインイン操作をしていないにも関わらず、サインイン済みになってしまっていることがあります。
この挙動は、起動後から各ユーザーアカウントに設定されている処理などをバックグラウンドで行わせたいときに有効ですが、シャットダウンの際はそれぞれのアカウントをひとつづつサインアウトさせてからでないと正常なシャットダウンができないため面倒です。
今回はこの機能を無効化する方法をご紹介します。
左下のスタートメニュー(Windowsマーク)をクリックしてメニューを表示し、中から歯車アイコンを選択します。
開いたウインドウから
アカウント->サインインオプション
を開きます。
中の”プライバシー”という項目中に”サインイン情報を使用してデバイスのセットアップを自動的に完了し、更新または再起動後にアプリを再び開くことができるようにします。”のチェックをオフにします。
これで以降は自動でログインされなくなります。
著者: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/
