著者:asaba
【android apk】Failed to install apk to deviceの解決法
sourceTreeで更新したアプリをビルドしようと思った矢先にFailed to install apk to deviceというデバイス関係のエラーに
引っかかってしまいました・・・。↓画像
文脈から「デバイスにapkをダウンロードできませんでした。」日本語にするとこんな感じでしょうか、ざっくりですみません。
しかし、今までできたダウンロードがいきなりできるのも解せないので、英字たっぷりのサイトなどでかたっぱしから調べてみた結果
どうやら読み込みが遅くてがADBタイムアウトしたのではないかというヒントを見つけました。
ADBとは、Android SDKに含まれているツールの一つです。デバイスのアクセスや値の更新などandroidの設定ならなんでもできる
万能ツールで、androidアプリの開発者にはなくてはならないものの一つです。
調べてみた結果、そのADBにはある指定された秒数を超えると、タイムアウトして読み込みをやめるように設定されているようです。
通常のADBに設定されているタイムアウトのデフォルト値が5000ミリ秒なので、おそらくその時間を超えてダウンロードしていたため
エラーになったと思われます。
なので、ADBの接続時のタイムアウトの値をかえてしまいましょう。10000秒くらいがちょうどいいのかなと思いましたがお好みで。
ちなみに自分はこのやり方で解決しませんでした。
ここでandroidツール系定番のメンテ処理であるandroidStudioのバージョンをダウングレードも考えましたが、後々のgradle関係のエラーを避けたいのもあり
どうしても穏便に解決したかったので今更新したアプリを端末でアンインストール、さようならして再び同じアプリを入れた
ところで無理やり解決させました。
本当はタイムアウトの設定も変えておいたほうが良かったのですが、エクリプスの記事ばかりだったので確証を持てたら
また試してみようと思います。
著者:asaba
【html5】reactでを使う時に疑問に思ったこと
先週に続いて今回もhtml・css関係の話題になります。しばらくこのようなブログが続くと思いますがご容赦ください。今回は
<br>タグについて少し語らせていただきます。
<br>は、html5におけるオブジェクトの一つです。brタグを文に差し込むと、その差し込んだ位置を境目に改行を生成してくれます。
中でも長い文章や箇条書きと相性がよく、ごく一般的なサイトでも当たり前のように使われています。
ちょうど今開発に使っているreactでもちゃんと反応するかどうか確認をしてみたのですが、どうもreactで書くと静的にhtmlで書いている
時と同じ要領で書くとエラーが起きてしまいます。
ん～・・おかしいなぁと思いつつ<br>を前後に移動させたり<p>タグの外に書いたりしてみたのですが解決に至らず。
結局下のような構成にしてみました。
<p className="sample"> 今日もいい天気です。<br></br> お散歩日和ですね。</p>
少し強引でしたが、改行したいところで<br></br>を挟んでおけばreactでも効いてくれるようです。
後から考えてみたのですが、forタグのように、javascriptには<br>に類似する予約語や定数は聞いたことがないので、なぜ表示
されないかはもう少し掘り下げて調べないと完全な解決にはなりそうにないですね・・・。
著者:asaba
【atom】atom付属のパッケージを少しかじってみた
最近になってatomというエディタを使い始めました。
というのも、今まではterapadとかサクラエディタとか一般的にポピュラーなものを使っていたのですが、一時期エクリプスでアプリを開
発してから双方のエディタのギャップが大きすぎて、「ノーマルなエディタじゃ嫌だ！javascriptで開発している時もエクリプスみたいな
色々な機能がほしい！」
という我儘を言って無理やりatomに乗り換えました。
このatomは、パッケージが非常に豊富で、お好みのパッケージをインストールすることでオリジナルのエディタにカスタマイズすること
もできます。chromeでいうアドオンのようなものになります。
センスによっては今どきのIDEより使い勝手の良いエディタに化けることもでき、柔軟性のあるエディタとして世界中で使われている
みたいです。
ここではサンプルとして、autocomplete-pathsのインストール法と使い方を記載しておきます。
autocomplete-pathsとは、ファイルパスを予測してそれを追加してくれる機能です。画像やhtmlなど、手打ちで打つと非常にめんどく
さいプロパティを予測して保管してくれるので、使いこなせば開発効率の向上に貢献してくれると思います。
それでははじめていきます！まず、fileタグを選択ー＞settingを選択すると、下記の画面に遷移すると思います。
ここで一番下のinstallボタンを押すと、下記のような画面に遷移します。
上の検索欄で、autocomplete-pathsとコピペすると、おそらく一番上に出てくると思われるのでこれをインストールしていきます。
間違いないことを確認したら、青色のInstallというボタンをクリックします。するとインストールが始まりますので、終了まで
待機していてください。
Installが成功すると、Uninstallボタン・Disableボタンが表示されているのが分かります。これでインストールは終了になります。
さて、インストールができたら早速imgタグで試してみましょう。
srcと入力すると、候補にsrcと出てくるのでそれをクリックします。すると、今いるディレクトリにあるファイルを
全て保管して表示をしてくれます。（画像参照）
このファイルには一つしか画像を持たせていませんが、表示させたい媒体が
多い時ほどこのパッケージの威力を感じるのではと思います。
一つ注意点ですが、./から始めると保管してくれないので、必ず一からsrcと書くのがポイントになります。これさえ守れば快適に
atomを使えるので、細かいですが頭の隅に入れておくと悩まなくて済むと思います。
以上でパッケージ紹介とその使い方のレクチャーを終了します。またお気に入りのパッケージが見つかったら随時紹介していきたいと
思います。
著者:asaba
【css】ボックスを使ってコンテンツを見やすくする
今回は、cssを使ってボックスのようなコンテンツを作り、他のコンテンツと組み合わせて表示してみようと思います。
ボックスというプロパティがあるわけではなく、ボックスのような形に仕上げることでユーザーが見やすい・とっつきやすい
コンテンツを作ることを目的としております。
例として、ラジオボタンやチェックボタンをそのまま配置すると、機能としては問題ないものの押しにくかったり
見落としてしまったりとユーザー目線で見てみると意外と綻びがちらほら見受けられます。
造作もないことですが、やってみたいけど方法が分からないという方の参考になればいいなと思っています。
それでは本コードを紹介していきます。※reactベースで書いています。
</pre>
<pre><div className="box" >
<label>
<p id="agreeText">
利用規約に同意する
</p>
<input type="checkbox" value="1" onChange={this.onPermission}></input>
<span className="checkbox01-parts"></span>
</label>
</div>
一番上の行のdivですが、ここでクラス名boxを定義します。このdivが、先述したボックスの役割をするコンテンツになります。
一番下にこのコンテンツを敷きたいので、このdivで全体を囲んでください。次に、囲みたいテキストとコンテンツ
（ここではチェックボックス）を書いていきます。labelは長さなどの設定をしているでだけなのでここでは無視して
ください。続いてcssの記述になります。
p#agreeText {
position: absolute;
margin-top: -20px;
margin-left: 80px;
padding: 20px;
color: #000000;
}
div.box {
width:300px; height:15px;
position: relative;
margin: auto;
padding:10px; border:1px solid #fff;
background-color:#fff;
}
あまり説明する必要がないと思いますが、中央揃いで表示したいためrelativeにしております。
大分端折ってしまいましたが完成物はこんな感じになります。↓
ものすごーくシンプルですが、装飾さえしてしまえば今風のデザインに近いものが作れるんじゃないかと感じています。
他のcssフレームワークならもっと簡単にできてしまうかもですが、何も施していないノーマルのcssでもこんな感じで
仕上げられるので、もしこんなものでよければ参考にしてみてください。
著者:asaba
【html5】forプロパティについて
今回は、html5でテキストとコンテンツを隣接して表示したい時に使われるfor（予約語のほうではないです）のお話になります。
例えば、selectタグで項目を選択している時は、アプリを使用しているユーザーに今何を選択しているか認知させている必要があります。
〇〇年と表示したい時ですが、中で文字列として埋め込んで表示させることができます。しかし、選択した情報を値としてデータベース
などに送りたい時は、この状態で送信すると例：’2019年’のように選択した西暦全体が文字列としてみなされてしまうので、
データベース側としては都合が悪いです。
この現象の解決策の中には、forタグを使ってセレクトボックス外で‘年’を表示させる方法があります。
forタグは、主に<label>タグの開始タグと終了タグに挟まれた文書を、隣接したコンテンツに関連付けさせるオブジェクトです。
通常ならば下の例のように書いていけば、セレクトボックスと文字列が紐付けられた状態で表示されます。
</pre>
<select value={this.state.year || 1970} onChange={ e => this.setState({year: e.target.value}) } >
{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}</select>
<label htmlFor="select-01">年</label>
<pre>
このように、forを使えば簡単にコンテンツと文字列を関連付けられるのですが、reactだとこのforがアンノウンになってしまい
認識されないというエラーが起きてしまいました。下記がそのエラーになります。
Unknown property ‘for’ found, use ‘htmlFor’ instead
通常のhtmlでは何の問題もなく使用することができるのですが、reactなどのフレームワークの中では効いてくれないので、
単にreactの仕様なのかな・・・？と感じています。と思ったのですが、javascriptでは予約語のforを使用するので
これでは混同してしまうのでhtmlForをつかってくださいとのことでした。→ htmlFor versus for?
書いているうちにちゃんとした理由が見つかりました。どおりでjavascriptを用いたreactでは使えない訳ですね！
てな訳で、reactでforを使いたいよという方は、代わりにhtmlForを使ってください。
その他参考にさせていただいたサイト→Using the for attribute in JSX – linter unknown property “for”
著者:asaba
【chrome】Developer Toolsでcssの詳細を見てみた
去年上半期ころから、html5やcssを会社で使い始めたのですが、当時はまだ人のcssをコピーしてそこから分解して
オブジェクトを作ったりと足元がおぼつかないど素人でした。
今でこそ要領も理解して形になるものを作れるようになったのですが、たまに「このタグの位置設定したのに動かないなぁ」とか
しょうもないことでハマってしまうときがあります。
そこで、今までjavaScriptでしか見ていなかったDeveloper ToolsことDevToolsで今度はhtmlとcssを解剖して綺麗なデザインに
修正してみようと考えました。
DevToolsとは、Google Chrome に組み込まれたweb開発向けのデバッグツールです。自分も去年からこれを使って
いたのですが、ほとんどjavascriptのコードエラーのチェックのために使っており、cssはほぼ使わなかったのでDevToolsの
旨味を知らずにここまできてしまいました。
当時はまだcssの操作に慣れておらず、なんとなく複雑そうだなとか考えてしまいcssの中身を見ることに抵抗があったのですが、
視覚的にhtml・cssの作りを見ることができることを知ったのをきっかけに、臆さず使ってみようと決めました。
では簡単に見かたを説明していきます。
まず、chromeを開いてその他のツール→デベロップツールを開きます。
左端のelementタグを開くと、今表示しているhtmlが表示されます。各々のタグの上にマウスを重ねると下の画像の
ように青く表示されます。これがcssが効いている領域になります。
次に、画面左下にあるStylesタグを開きます。すると、右下に下記のような画像が表示されます。
赤い部分が効いているcssを示しており、ここで視覚的にmarginがどうなっているか見ることができます。
この二つを見比べることで、どこのオブジェクトが無効になっているのか、どこのオブジェクトがコンテンツ表示の邪魔を
しているかを即座に見分けて修正することもできます。
初心者ならば、あぁマージンてこういう意味かじゃあここを狭めて・・・など、オブジェクトの使い方も覚えられ、開発の幅も
広がるので、お世話になることをおすすめします。
著者:asaba
【html5】ラジオボタンをどのデバイスでも一列に表示させる方法
今回は、inputタグでradioボタンを複数使う時に縦に表示されてしまうradioボタンを、一列に表示させる方法についてお話させて
いただきます。
早速ですが、radioボタンを隣接させるのに一番早い方法は、idとforを使用することです。
forは一般的にコーディングで使用するfor文とは関係ないです。
<<span class="pl-ent">input</span> type="radio" name="radio02" class="<span class="pl-ent">radio02-input</span>" id="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span> <<span class="pl-ent">label</span> for="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span>ラジオ01</<span class="pl-ent">label</span><span class="pl-k">></span>
chromeでは無事に表示させることができました。
もしかしたらfirefoxやIEだと違う挙動になってしまうかもしれないですが、chromeAPPでアプリを作る際は
この方法を使っても問題ないと思います。
著者:asaba
【javaScript】constとletの違いを肌で知った
前回記述した、ファイルをアップロードするソースコードを少しいじってmyImageを外の関数からも
参照・代入ができるようにしたかったのですが、ここで少しハマりました。
エラーを見ると、Uncaught TypeError: Assignment to constant variable.at FileReader.reader.onload
かみ砕いてみると「onload内で無効な割り当てがありました。」
一瞬狼狽えましたが、変数の宣言はしていないので間違いなくmyImageに原因があると思いました。
調べてみると、どうやらconstは再代入を許さないらしく、一回初期化をしてしまっているのでもうmyImageには
何も入れられませんという意味を持っていたみたいです。
再代入が許されるのはletとverのみで、こちらは何回も代入することはできますが、何回もアクセスして変数が
目まぐるしく変わるので、メンテンナンスに手こずりそうなので大規模なプロジェクトではやはりconstを
使った方が安全性の面では最良だと感じました。
それでもletは二重の宣言を禁止したりアクセスの幅を狭めたりとconstともそこまで性質は変わらないので、ぎちぎちに
変数のアクセスをしたくないけど安全性を保ったコードを書きたいというかたには向いているかなと感じました。
<script>
const target = document.getElementById('upload');
//window.onloadにアクセスができる
<span style="color: #0000ff;">let myImage = '';</span>
target.addEventListener('change', function (e) {
const getImg = document.getElementById('myImage');
const file = e.target.files[0]
const reader = new FileReader();
reader.onload = function (e) {
getImg.height = 200;
getImg.src = e.target.result;
myImage = getImg.src;
localStorage.setItem('image', myImage);
console.log(myImage);
}
reader.readAsDataURL(file);
}, false);
window.onload = function(){
document.getElementById("submit").addEventListener("click", function(){
console.log(myImage);
alert("ボタンが押されました");
});
}
</script></pre>
<pre>
参考にさせていただいたサイト→varじゃだめなの?? constとletを使おう!
著者:asaba
【html-css-javascript】PureCSSで無骨なページをそれっぽくする
前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。
今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。
input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。
メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも
手を付けていないようで野暮ったいです。
せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。
html↓
<div class="thumb-wrapper">
<img id='myImage'>
</div>
<div class="button-wrapper">
<span class="label">
画像アップロード
</span>
<input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
</div>
CSS↓
/*画像が表示されるコンテンツの位置調整*/
.thumb-wrapper {
position: relative;
height: 50px;
text-align: center;
margin: 20% auto;
}
/*ボタンの幅と位置の調整*/
.button-wrapper {
position: relative;
width: 150px;
text-align: center;
margin: 20% auto;
}
/*ラベルの設定*/
.button-wrapper span.label {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
background: #00bfff;
cursor: pointer;
color: #fff;
padding: 10px 0;
text-transform:uppercase;
font-size:12px;
}
/*実際に働くボタン*/
#upload {
display: inline-block;
position: absolute;
z-index: 1;
width: 100%;
height: 50px;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
JavaScript。↓
<script>
const target = document.getElementById('upload');
const img = document.getElementById('myImage');
target.addEventListener('change', function (e) {
const file = e.target.files[0]
const reader = new FileReader();
reader.onload = function (e) {
img.height = 200;
img.src = e.target.result;
console.log(img);
}
reader.readAsDataURL(file);
}, false);
</script>
script側は従来の画像を表示させる機能だけなので割愛させていただきます。
今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように
してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。
二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで
こちらも特にPureCSSの影響は受けません。
三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。
button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに
なります。divの中にspanで定義されているので、それが操作の対象になります。
ここでbackgroundやwidthで調整するとこんな感じに仕上がります。
角があった従来のフォームよりクリーンな出来になりました。
最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い
上のボタンで被せるような役割をもっています。
htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると
分かりやすいです。
最後にここで実装したフォームの全体画像を載せて終了になります。
今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。
著者:asaba
【html5,CSS】Pure.CSSを少しかじる
開発においてhtml5とCSSを使う機会が増えてきたので、この際その周辺の
フレームワークの使い方でも覚えておこうかなと考えております。
今回使うフレームワークはPure.CSSです。
だけどフレームワークと言ってもまず数が多くどれを使ったらいいか迷いがちです。
一般的（html5やJavaScriptを触ったことがある人）にはCSSのフレームワーク
といえばbootStrapが浮かびますが
このpureCSSというフレームワークは、それよりも軽量で機能もごちゃごちゃしていないので
webでのwebでの開発の幅を広げたいというかたやbootStrapを始めたけど使いにくいというかたにはおすすめだなと感じました。
筆者もCSSのフレームワークに触れることはほぼなかったので学習もかねてブログに跡を残していきたいと思います。
例えば、なにも手を付けていない状態だと、大きな画像はブラウザを狭めたときに横にスクロールされてしまいページ枠から飛び出してしまいます。
このままでは一定の大きさで表示することができないので、さっそくPure.CSSで修正してみました。
<head>の中に<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”>を入れて
<body>に<img src=“apple.jpg” class=“pure-img”>と記述してみましょう。
すると、見事にブラウザの大きさに合わせてリサイズするようになりました！androidやreactで悩んでいたことがこんな簡単に
できるとは正直考えもしなかったです。classにpure-imgを設定するだけで柔軟に対応できるのですごく使い勝手がいいなと
感じました。
これで満足してしまいそうでしたが、まだhtmlの基本でもあるフォームを作っていないことを思い出したので
とりあえず公式のサンプルを見ながら書いてみました。
※コードは、公式に似たようなものがあるのでそちらをご覧ください。
各フォームとセレクトボタンを作ってみました。従来のhtmlで作るボタンと比べると角がないというか今どきの
フォームっぽくて安心感がありますね。（某就活サイトとかブログの新規登録ページとかがこんな感じでした。）
これだけでも達成感がでてしまいましたが、更に掘り進んでテキストとかボタンの色を変えてみたいなとか思いついたので
送信ボタンの色を変えてみました。
ほんとにサンプルで書かれたものに数行スパイスを加えた程度のコーディングでしたが、特にこれといって難しい問題は
見つからずにいい意味でさっぱりとしたフォームだと思いました。
この次はinput type = “file”やimgタグをいじってみようかと思います。もしこっちでも使用感がよければ
主要フレームワークとして使っていきたいなと思います。