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

村上 著者:村上

【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開発者の方は、是非ダウンロードしてみてはいかがでしょうか。

  • この記事いいね! (0)
著者:杉浦

読みやすい色合いを提案してくれる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に準拠しているとあります。
 
 作成した結果、文字が十分に目立つ色が並びます。各色をクリックして見栄えチェック、色を表現する文字列の出力が出来ます。

  • この記事いいね! (0)
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のライフサイクルが理解できてからは自分で組み合わせたコードもしっかり動せるようになってきました。

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

  • この記事いいね! (0)
asaba 著者:asaba

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

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

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

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

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

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

[/java script]

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



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

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

canvasから抽出した画像も少し怪しかったので原因が分かり次第また記載します。
  • この記事いいね! (0)
著者:ym

Google Pay を使ってポイント獲得

楽天Edyでの購入分が対象となるか不明ですが、非接触QuickPayへ切り替えた後、獲得した金額を見たら600円くらい獲得できていました。

Google Pay キャンペーン

Google Pay キャンペーン

5000円やGoogle Home Miniもチャンスがあるようなので、しばらく非接触QuickPayで支払いを続けます。
楽天EdyとQuickPay、どっちが得なのだろうか?楽天Edyは楽天カードからのオートチャージとEdy使用でポイント貯まりそうだけど。QuickPayもなにかポイント貯まるのだろうか?

  • この記事いいね! (0)
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の新しい書き方を知ったばかりなのですが、今はもうこっちが主流なんですね、知りませんでした。

 

 

  • この記事いいね! (0)
takahashi 著者:takahashi

VSCodeで簡単にMySQLと連携できるプラグイン”MySQL”

普段からVSCodeを使ってプログラムしているのですが、最近、DBの操作もプログラミングと同時にVSCodeから操作できないかなーと探していたところ、よさそうなものを発見しました。

MySQL – Visual Studio Marketplace

そのまんまの名前ではありますが、とても分かりやすく、使いやすいプラグインです。

インストールすると、VSCodeの左側カラムにMySQLのエリアが表示されます。

+ボタンがあるのでまずはクリックします。

上の画像のように専用のパレットが開くので、指示通りにDBへの接続情報を入力していきます。

設定が完了するとDBリストに追加されるので、目的のDBを右クリック。

New Queryをクリックします。
すると新しいタブが開くのでSQL文を入力し、
”Run MySQL Query”
をクリックします。

すると右側に実行結果が表示されます。

使い勝手もよく、とても見やすいのがいいですね。
おススメです。

  • この記事いいね! (0)
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]

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

 

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

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

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

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

 

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

 

  • この記事いいね! (0)
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データを受け取ったりできるので、余裕があれば勉強したいと思っています。

 

  • この記事いいね! (0)
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>

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

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

  • この記事いいね! (0)