カテゴリーアーカイブ 未分類

著者:村上

【Web】APIのテストを簡単に行えるソフト「Postman」が便利

タイトル通り、今回は API のテストを簡単に行えるソフトウェアのご紹介です。
偶然使っている人を知り、便利そうなので探してみました。

ダウンロードはこちらの公式サイトから。

Postman｜API Development Environment
https://www.getpostman.com/postman

Windows だけでなく、Mac、Linux の環境でも使えます。

起動後のページはこちら。

Request を選択すると、APIのテストを行えます。
というか、私はまだこれしか使ったことがないので、他にどんな機能があるのかを知りません。
少しずつ使っていきたいですね。

APIのテスト画面はこちら。

画面中央やや上にある欄に、テストしたいAPIのURLを入力し、その左隣で GET もしくは POST を選択します。
そして、その下のタブから、APIに渡す値を指定します。
Param や Header、POST の場合は Body もきちんと用意されています。
必要な情報を入力し終えたら、あとは Send ボタンを押すだけ。
そうすると、下の Response エリアに結果が表示されます。

以上、APIのテストを簡単に行う方法でした。
API 自体の開発もそうですが、外部サービスが提供している API をいったん試してみたい時とかにも便利ですね！
作業がはかどりそうです。
Web開発者の方は、是非ダウンロードしてみてはいかがでしょうか。

著者:杉浦

読みやすい色合いを提案してくれるwebサービスColor Safeの紹介

　Color Safe – accessible web color combinations
　

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

　Google翻訳：Color SafeはWCAGのテキストと背景のコントラスト比のガイドラインに基づいて、美しく使いやすいカラーパレットをデザイナーに提供します。
　WCAGはWeb Content Accessibility Guidelinesの略称です。要はwebページの見やすさ、読みやすさをよくするためのガイドラインです。
　主な使い方は下の画像の様にパラメータを指定して”GENERATE COLOR PALETTE”でパレットを作成、作成結果から好きな色を選んで色を表す文字列をコピーです。WCAG Standardの項目はAA、AAAの2種類があります。AAは十分読みやすいレベルであり、多くの場合これを達成しているだけで十全です。AAAは特別目立つ、コントラストの強い色の組み合わせです。ヘルプには一部の企業、政府がAAAに準拠しているとあります。
　
　作成した結果、文字が十分に目立つ色が並びます。各色をクリックして見栄えチェック、色を表現する文字列の出力が出来ます。

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