著者アーカイブ asaba

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 著者:asaba

【ios】緊急速報を消す方法 ※非推奨です

今日も脱線気味です、すみません。

緊急災害警報のあのうるさい音を消す方法についてお話します。

少し前に強い台風が浜松を襲ったときに、風や雨音がうるさくとても眠れる状況ではありませんでした。

それだけならまだ耐えられたのですが、極めつけは携帯の緊急災害速報(怒)

何回鳴ったか分かりませんが、筆者を寝不足に陥れた張本人です。よく台風や大雨の時にジリジリ鳴っていますが実はこいつ消せます、簡単に。

まず、設定をタップします。その後に通知という赤いアイコンをタップしてください。

その後に一番下までスライドすると、緊急速報というリストがあります。通常は緑でonになっていると思うので、トグルをタップして

オフにします。たったこれだけで鳴らなくなります。

 

いかがでしたでしょうか。大げさだなと感じる人もいれば万が一の時に備えて鳴るようにしなきゃと心構えを持つ人もいるので

強くはお勧めしません。むしろ止めといた方が今後の為ですはい。

いつでもonにそんなもん怖くねーよゆっくり寝たいんだよ(# ゚Д゚)という方は試してみてください、自己責任ですけど。

はい、短いですが今日はこれでおしまいです。まじめな方は今日の記事は見なかったことにして災害に対応できるようにしてくださいね!

それでは!

 

P.S.これだと緊急地震速報も鳴らなくなるのかな・・・?それは怖いけど。

 

 

asaba 著者:asaba

世界のプログラミング教育事情

 

今日は脱線します。

 

2020年度からプログラミング教育が義務化され、今では小学生もパソコンでコードとドンパチする時代に変わりました。

自分が小学生の時は情報の時間なんてなかったし両親のパソコンをいじる度胸もなかったので今の子供たちが羨ましいくらいです(´・ω・`)

今はプログラミングはパソコンとwifiがあればどこでもできる社会になりましたが、世界ではもっと前からプログラミング教育を実施しているみたいです。

例えば、アメリカなんかはプログラミングの授業という概念はなく、与えられた時間とパソコンで好きなサービスやゲームを作ってねと

いうめっちゃフリーダムなカリキュラムがあります。そこにfacebookやgoogleの社員が講師としてやってきたり小学生のプログラミングの

コミュニティが揃っているので、教育という面では全国でも高水準にあると考えられます。

 

it新興国としてインドの教育もなかなかで、まず新卒中途問わず入社した人は会社の提携している大学に入学します。

また海外留学も盛んに行われ、アメリカの大手it企業や日本のメルカリでも多くのインドの方々が活躍しており、国を挙げてit技術の向上を図っているのが分かります。

ヨーロッパでは、スタックオーバーフローで最もユーザー登録が多くマイスターの数が多いロンドンが将来有望なit都市として挙げられています。

フランスやイギリスではプログラマーやシステムエンジニアの賃金が他の職業と比べて高く、ある役所の男性がホームレスの方にお金をあ

げようとしたところ、そんなものよりプログラミングがしたいのでパソコンを買ってくれと懇願されたエピソードが残っているほど憧れて

いる方が多い地域なのです。

日本が腰を上げたのはこれらの地域より10年も後で、it大国の名前を維持するにはアジア諸国の成長が著しい中で取り残されない様に切磋

琢磨していくしかないみたいですね。このご時世自動運転が普及していく世の中で、得意のAI産業を活かしてぜひともアメリカや中国を

ぶち抜いてもらいたいです。

asaba 著者:asaba

【cordova-react】プラグインについての豆情報(二つあります)

今日はお題は二つの小ネタです。一つ目はcameraプラグインについてです。

 

cordova-camera-pluginとphonegap-camera-pluginはコルドバでカメラを使うことができるプラグインです。

自分のファイルの中にこの両方が入っており、どちらか消しても問題ないだろうと思いcordova-camera-pluginを削除したのですが

動かなくなりました。慌てて入れ直すとあっさりと元通り。なんでニコイチやねんと思いました。

米国のサイトまでいって調べたのですが、原因は分からずじまいです。

 

二つ目はプラグインを入れるタイミングの話です。

cordova platform rm androidした後にプラグインを入れてadd platformすると下記の画像のように怒られます。

原因は確信ではないのですが、直前に入れたプラグインを記憶できないためだと思われます。

なので必ず新しいplatformを入れてからプラグインを導入してくださいね、という感じです。赤文字は怖いですが大抵グレイドルか

プラグイン関係なので恐れることはないと思います。

以上小ネタでした。

 

asaba 著者: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 著者:asaba

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

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

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

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

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

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

[/java script]

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



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

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

canvasから抽出した画像も少し怪しかったので原因が分かり次第また記載します。
asaba 著者: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 著者: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 著者: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の使い方が分からないという方はこれをひな型にしてみてください。それでは。