著者アーカイブ asaba

著者:asaba

【react-cordova】プラグインを使ってメール送信

なんかのアプリでパスワードを忘れたときは大抵メールを送信してパスワードを教えてもらいますよね。

自分が開発しているプラットフォームのcordovaでもちゃんとプラグインが存在するので難なく実現できます。

やり方はいつも通りでcordova-plugin-email-composerでインストールします。

その後に下記のコードを書いてビルドすれば問題なくメールフォームに移ることが出来ます。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class ForgetPass extends Component {
	
	  constructor(props) {
    super(props);
	  this.mailSend = this.mailSend.bind(this);
	  this.state = {
		}
  }

  mailSend(){
  	window.cordova.plugins.email.isAvailable(function (hasAccount) {
  if (hasAccount) {
    window.cordova.plugins.email.open({
      to: "username@gmal.com",
      subject: "テストメール",
      body: "こんにちは！",
      isHtml: false
    });
  } else {
    window.ons.notification.alert({
      message: "There is no email client available."
    });
  }
});
  }
  render() {
    return (
      

	  メールアドレス入力
      
    );
  }
}

export default ForgetPass;

[/java script]

window.cordova.plugins.email.openの内容は、自由に変更できるのでお好みで設定してください。

上のコードはただ本当に送るだけなので、単体では面白くないかもです。サンプルで試したいと思ったらコピペして動かしてみてください。

※es6で書いています、es5で書いている方は適所でコードを合わせてください。

著者:asaba

【cordova-react】mapで変換した配列をプルダウンで反映させる

今日は、配列をmap関数で新しい配列に更新してコンポーネントに埋め込む方法について記録します。

selectタグで該当する値をどうやってsetstateしようか試行錯誤しましたが、下記のコードで確認できました。

constructor(prop){
	super(prop);
	this.data = [
       {value:"", label:"▼フルーツ選択"},
  {value:"1", label:"りんご"},
  {value:"2", label:"メロン"},
  {value:"3", label:"マスカット"},
  {value:"4", label:"ココナッツ"},
  {value:"5", label:"ライチ"},
    ];
	this.state = {
		}
}

render() {
const fruit = this.state.fruit;
render(
 フルーツ選択<select onChange={ e => this.setState({fruit: e.target.value}) }  defaultValue="">
        { this.data.map( d => <option  value={d.value}>{d.label}</option>)}
      </select>
);
}

[/java script]

まずpropで渡す初期値に配列dataを定義しておきます。render内ではmap関数を使って配列dataを要素文だけoptionタグに新しい配列として変換しています。

簡単なプルダウンならこれで動かすことができますが、使い方を覚えれば都道府県をプルダウンで選ぶときにその県の市だけ抜き出す方法にも応用できます。

onchangeメソッドが書いてありますが、これはフルーツの番号を他の関数に飛ばして確認しているだけなので動作には関係ないです。

参考にさせていただいた方のリンクを載せておきます。↓

https://qiita.com/Ryosuke-Hujisawa/items/24bd369e0d614c1424a4

https://qiita.com/noobar/items/44046425daae9771cc8d

https://qiita.com/macotok/items/47880edf1e46e131109c

以上でmap関数の説明とコード紹介を終わります。

段々とreactに慣れてきたのかリファレンスなども少しずつ読めるようになってきました。htmlもjsもあまり触ってこなかったのでどうなるかと思いましたが、reactのライフサイクルが理解できてからは自分で組み合わせたコードもしっかり動せるようになってきました。

この調子でブログも書いていきたいと思います。お疲れさまでした。

著者:asaba

【cordova-react】filereaderで画像を呼んでくれないときの対処法

imageオブジェクトを作ってその中にfilereaderで読み込んだ画像を格納してキャンバスでリサイズしたものを表示したかったのですが

上手く読み込めませんでした。

読み込んだ時点でwidth,heightが0,0になっているので画像を渡した辺りが怪しいですね。

ならimgタグの読み込み方を変えてやろうと思い少々強引ですがquerySelectorを使って力技で読み込ませました。

var preview = document.querySelector('img');

[/java script]

すると無事リサイズもしてくれて正常に表示させることができました。



chromeが不安定なのかes6の書き方からなのかは分かりませんがchromeだけかもわからないので、色々なブラウザ＆実機で試してみると

違いが分かってくるかもしれません。

canvasから抽出した画像も少し怪しかったので原因が分かり次第また記載します。

著者:asaba

【cordova-react】fetchApiに触れてみる

最近ではjqueyのajaxではなくfetchApiを使った非同期通信が主流みたいです。詳細はこちら↓

http://jxck.hatenablog.com/entry/whatwg-fetch

jsonをリクエストした後にレスポンスでjsonのデータを引っ張ってくるコードです。

fetch('https://api.hamamatsu-kagakukan.test.cpt.jp:3002/corners',{
headers: {
    'content-type': 'application/json'
  },
  }).then(function(response) {
	  //jsonで受け取る
  return response.json();
}).then(function(json) {
  // jsonにJSONオブジェクトで結果が渡される
console.log(json);
});

[/java script]

ただ受け取るだけならこれだけでも大丈夫です。fetchの第二引数にはheaderの他にもbodyといったメソッドも追加することができます。

・・・つい最近ajaxの新しい書き方を知ったばかりなのですが、今はもうこっちが主流なんですね、知りませんでした。

著者:asaba

【cordova-react】reactでパスワードをハッシュ化する方法

今回はハッシュ値について軽く説明します。reactで探していたらnpmで便利なライブラリを見つけたのでスクショとコードで説明していきます。

まずコマンドでnpm install js-sha512と入力すると、js-sha512がディレクトリのフォルダ内にインスールされるのでそれを先頭でimportします。

import sha512 from 'js-sha512';

[/java script]

このライブラリは、独自のアルゴリズムを使ってハッシュ化をしてくれます。少ないコードで済むように設計されているので初心者でも感覚的に触ることができてかなり覚えやすいです。

下のコードは、stateされているパスワードを引数にしてsha512で変換しているのが分かります。ものすごく簡単です。

var password = ReactDOM.findDOMNode(this.refs.password).value.trim();

var hashPass = sha512(password)

[/java script]

これを実装した前提で画面を見ていきます。

適当に作った入力フォームです。ここにパスワードとメールアドレスを入れて送信します。

すると下のような数値が乱立した値がログで吐き出されているのが分かります。

これがハッシュ値です。アカウントを管理するアプリには、外部からてきとうにの改ざんを防ぐための手段としてパスワードのハッシュ化が必ずと言ってよいほど必要になります。

このようにして簡単で短いパスワードを長くランダムに変換することにより、外部から触れられないしくみになっています。

もっと複雑な暗号化などを実装したいという方でなければこれでも十分いけると思います。

著者: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データを受け取ったりできるので、余裕があれば勉強したいと思っています。