著者アーカイブ asaba

asaba 著者:asaba

【jquery】successを卒業してdoneにしてみる

今までajaxで通信が成功した時はsuccess: function(data, textStatus, xhr) {} error: function(data, textStatus, error) {}に分けていました。

しかし、ajaxを使い始めて間もないころに上記のコードは現在非推奨で、もしかしたら将来使えなくなるのでは?という意見もちらほら見

受けられました。

jqueryリファレンス曰くどうやら前まで書いていたsuccessコードは、jquery1.4以前の書き方らしくjquery1.8以降は下記の書き方を推奨

しているみたいです。


Login(e) {
$.ajax({
url: "test.html",
type: 'GET',
contentType: 'application/json; charset=UTF-8',
headers: {
'Content-Type': 'application/json',
},
}).done(function(data, textStatus){
console.log("success");
}).fail (function(xhr, textStatus, errorThrown){
console.log("error");
});
}

successのところがdoneに変わっているのが見受けられます。そして、headerやcontentTypeなどの処理が)}でぶった切られ、その後

うぐにdone処理に移っています。筆者はこのheaderとdone部分を切り分けているところが気持ち悪く感じ、書いている時は違和感しか

ないです。(今も)

今後jqueryを使ってajax通信をしたいという方は今後はこのやり方でいいと思います。

ちなみに筆者が現在開発に使っているcreate-reactでajax以外にもaxiosという非同期通信の方法があるみたいです。

こちらもajaxと同じように簡単にapiを叩いたりjsonデータを受け取ったりできるので、余裕があれば勉強したいと思っています。

 

asaba 著者:asaba

【react-cordova】selectタグの使い方

selectタグを使ってsetstateで値を渡す方法を見つけたので、備忘録として残します(あんまり情報がなかったので探している方は参考にしてみてください!)


this.watch = this.watch.bind(this);

watch() {

var months = this.state.months;

$.ajax({
url: "test.html",
contentType: 'application/json; charset=UTF-8',
data : {

months,

},
success: function(data, textStatus){
console.log(months);

},
error: function(xhr, textStatus, errorThrown){
console.log("ban");
}
});
}

render下にコンポーネントを追加


<select
value={this.state.months}
onChange={ e => this.setState({months: e.target.value}) };
<option value="1"></option>;

</select>;

ES6で書いています。

まずrender内を見ると、valueでthis.state.monthsがデフォルトで最初に生成されています。

下のonchangeを踏むごとに発火してsetstateでajaxで値を飛ばしています。

option valueでは、表示したい値を設定しています。この時に一番上でbindするのを忘れないでください。

jsx内の関数は、html経験者が見るとうわってなると思いますが、stateの流れを理解すれば簡単に実装することができます。

reactで何すればいいの、stateとかpropの使い方が分からないという方はこれをひな型にしてみてください。それでは。
 

asaba 著者:asaba

【mapbox】mapboxで国土地理院の地図を作ってみた

マップボックスで本屋で目にする国土地理院の地図を作ってみました。


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<div id="map">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map');

L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"
}).addTo(map);

var office = L.marker([35.6614,139.7543]).addTo(map);
office.bindPopup("DTS CORPORATION HQ").openPopup();

map.setView([35.3622222, 138.7313889], 15);

map.on('click', function(e) {
var latitude = (Math.round(e.latlng.lat * 10000)) /10000;
var longitude = (Math.round(e.latlng.lng * 10000)) /10000;
alert("緯度:" + latitude + " , " + "経度:" + longitude);
});
</script>
</div></body>
</html>

マップはこんな感じです。

地図の見た目を変えるだけでなく、人や車の動きも再現できる柔軟性はさすがですね。

asaba 著者:asaba

【cordova/react】create-react-app内でもjqueryしたい!!

jqueryは通常、ファイルをダウンロードしてhtmlに組み込むかcdnでリンクを作り(下のコード参照)

これをそのまま貼って使う方法があります。

 

create-react-appで作ったアプリでもhtmlで組み込めそうだと思い、jquery公式ページでダウンロードしたjquery3.3.1ファイルを

index.htmlが入っている場所publicフォルダ内に入れて、生成されたindex.htmlのコードに埋め込もうとしましたが$ is not defined

怒られてしまいました。

 

最初からcreate-react-appで作ったindex.htmlは、タグ内の要素を組み込んで表示することしかしてくれないので読み込んでくれないみたいです。

 

共存させるには、npmを使ってjqueryをインストールする必要があります。

コマンド内でnpm install jqueryと入力してenterキーを押せばすぐに最新版をダウンロードしてくれます。

そして、jqueryを使いたいjsファイルに下のように定義します。


import $ from 'jquery';

これでreact内でもjqueryを使ったajaxの通信も問題なくできるはずです。

同じjqueryでもzeptoのほうが軽く、最初はそっちを入れたのですがcreateelement辺りでバグっぽいのがあったのでやめました。

reactでもjquery使いたい!という方は是非試してみてください、それでは。

asaba 著者:asaba

【cordova react】index.htmlをいじってヒヤッとなった話

jqueryを入れたくてpublic内のindex.htmlをいじっていたのですが、中々上手く導入いかずタグら辺をころころいじっていたら

Parse error:syntax errorというエラーに遭遇。

本来はphpでみるタイピングミスの際に吐かれるエラーみたいです。

どうやら、index.html内のや

http://src/jquery.3.3.1.jsの上に

持ってきてしまい、タグを読み込めなくなったのが原因みたいです。

jqueryを中々読み込めないからとむやみにタグを動かすと思わぬエラーに遭遇するので、これからjquery系を入れようとする人は

上記のことを意識しながらjqueryやzepto.jsを入れてみてください。

 

asaba 著者:asaba

FileReaderAPIの使い方

FileReaderは、自分の写真やギャラリーにアクセスしてその画像を取得することができるオブジェクトで、最近のアプリを作るのに必ずと言っていいほど必要になります。

今日は、そんなFileReaderを使い始めた人の目線で説明していきます。

まずは、コードの全貌から。。。

PhotoSelect(e) {

const file = e.target.files[0];

const fr = new FileReader();

fr.onload = () => {

const imgNode = this.refs.image; imgNode.src = fr.result;

};

fr.readAsDataURL(file);

}

上記のスクショがデバイスで画像をアップロードするコードのひな型になります。表示するだけならこれだけです。

まず、PhotoSelectでイベントハンドラを作ります。

その後にconst fileにてアップロードする画像の配列の大きさを決めています。target.files[0]なので、ここでは配列を一つと決めています。

その後に、const fr = new FileReader();でオブジェクトを生成します。

そして、onload関数で画像を取得しています。ちなみにリサイズや向きの変更もこの関数内で行います。

最後のreadDataURLでアップロードするファイルを決めてアップロードをします。

 

短めですが、これでテンプレートの説明は終わりです。

このままではスマホで撮った画像がそのままアップロードされるので、実用性はあまりありません。

しかし、onload内でプラグインを使ったりキャンバスオブジェクトを使ってjpgやpngを操作したりと自由にカスタマイズができるので

慣れてしまえばすぐに実装できてしまったりします。

しかし、reactのバージョンなどで使い方が変更されている、或いは使えなくなったプラグインも存在するので最初は結構苦労するかもしれないです。

やはり本実装の前に自分が開発しているnpmやreactのバージョンを確認をしてみるといいかもですね。

 

asaba 著者:asaba

【react】BrowserRouterを使って実機でビルドすると画面が描画されない件

今開発中のReactでreact-router-domライブラリのBrowser-routerでこけました。

どのような現象かというと、npm startで起動するとコンポーネントがちゃんと描画されるのですが、yarn run buildでビルドしてから

cordova run android(browser)で反映させてた時に真っ白になります。しかもログにエラー扱いで表示されないので解決するのに時間が

かかってしまいました。

解決方法はというと、まず下記のスクショを見てください。

importでHasuRouterを定義した後に、<BrowserRouter>で<switch>タグで囲んだ遷移のリストを囲んでいるのが分かります。

本来はこれを使って<switch>タグで<Route>タグのpathと一致した場合にそのページに遷移するというベーシックな

画面遷移ですが、実機だとうまく描画してくれなかったです。

どうしようかなと思いネットを漁っていたら見つかりました解決方法が見つかりました。(リンク先は忘れてしまいました、すみません。。)

v4に移行した後は、<HushRouter>で囲むとsuccessするよー!みたいなことが書いてあったことは覚えています。

とりあえず下記の画像のようにタグ名を変えてビルドー>無事コンポーネント描画され大成功!!です。

ものすごくざっくりですが、v3で慣れていた方はこれに限らず色々と書き方が変わっていたのでv4マイナーチェンジぶりにいらいらするかもしれないですね。

詳細をうまく伝えられなかったのは残念ですが、もう少しreactに詳しくなった後に説明したいと思います。

 

 

asaba 著者:asaba

【iosアプリ】これで必勝!?危険物乙四過去問アプリ

App storeを漁っていたら危険物乙四免許過去問のアプリが・・・

試しに見てみました。

中身は、結構簡略に作られており、冊子のような分厚くて持っていくのも面倒ではないのでカフェとかで勉強するにはよさそうですね。

広告が頻繁にでてきますが、質は間違いなく良いので試してみる価値はあると思います。

P.S.筆者が受けたときにこんなのがほしかったです。

asaba 著者:asaba

【create-react】Cannot read property ‘thisCompilation’ of undefined npm ERR!

npm install –save-dev webpackで最新のwebpackをインストールしてnpm run webpackしたところで

Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現

npmのバージョンとインストールしたwebpackのバージョンに開きがあったのが原因でした。

なので、一旦ダウンロードした新しいwebpackをnpm remove webpackでアンインストールして

一回り古い@3.11.0をインストールして解決。同じことではまっている方は今使っているnpmのバージョンを確認してみてください。

それでは!

 

asaba 著者:asaba

【create-react】入力した文字を出力する方法

またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。

reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。

初級ですがreactを触ったばかりという方の力になれたらなと思います。

いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。

その後に自由に値を入力することができるコードがこちらです。

スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。

アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?

イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。

reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。

良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!