ダミーの「顔写真付きユーザー情報」をJSONで提供する「Random User Generator」を使ってみた!

1

何らかのWebサービスや、サイトのモックアップなどを作っている時に、ダミーの「ユーザー情報」を試しに使ったりするのに便利なAPIを提供しているのが「Random User Generator」です!

類似のサービスはいくつかありますが、扱いやすい「JSON」形式でデータを取得でき、使い方も非常にシンプルなのが気に入っています。


使い方!

「Random User Generator」は、以下のようなシンプルなURLを使うだけで、簡単にダミー情報を取得できるようになっています。

http://api.randomuser.me/

このURLを毎回リクエストする度に、ランダムな「ユーザー情報」が生成され、JSONを返してくれるようになっています。

 
取得方法は、公式サイトにも記載されていますが、JQueryを利用して以下のようなシンプルコードになります!

1
2
3
4
5
6
7
$.ajax({
url: 'http://api.randomuser.me/',
dataType: 'json',
success: function(data){
console.log(data);
}
});

 
すると、こんな感じのJSONが返ってきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
results: [{
user: {
gender: "female",
name: {
title: "ms",
first: "lois",
last: "williams"
},
location: {
street: "1969 elgin st",
city: "frederick",
state: "delaware",
zip: "56298"
},
email: "lois.williams50@example.com",
username: "heavybutterfly920",
password: "enterprise",
salt: ">egEn6YsO",
md5: "2dd1894ea9d19bf5479992da95713a3a",
sha1: "ba230bc400723f470b68e9609ab7d0e6cf123b59",
sha256: "f4f52bf8c5ad7fc759d1d4156b25a4c7b3d1e2eec6c92d80e508aa0b7946d4ba",
registered: "1288182167",
dob: "146582153",
phone: "(555)-942-1322",
cell: "(178)-341-1520",
SSN: "137-37-8866",
picture: {
large: "http://api.randomuser.me/portraits/women/55.jpg",
medium: "http://api.randomuser.me/portraits/med/women/55.jpg",
thumbnail: "http://api.randomuser.me/portraits/thumb/women/55.jpg",
},
version: "0.5"
nationality: "US"
},
seed: "graywolf"
}]
}

この中には、ダミーの「ユーザー名」「メルアド」「顔写真」などがあり、多彩な情報を利用できるようになっています。
(ちなみに、データはJSON以外にもSQL・CSV・YAMLでも取得可能…)

 
あとは、取得したデータを元に、jQuery側からHTMLへ情報を書き込めば良いでしょう。

例えば、ダミーの顔写真を使う場合は、こんな感じ。

1
2
3
4
5
6
7
$.ajax({
url: 'http://api.randomuser.me/',
dataType: 'json',
success: function(data) {
$("img").attr("src", data.results[0].user.picture.medium);
}
});

この例では、HTML内に記載している「img」タグのソースを、取得したダミー画像に「.attr」で差し替えています。

他にも、「.append」や「.html」などを使って、名前やメルアドのような情報を追加すれば簡単にダミーユーザーを生成することが出来ます。

 
以下に、簡易的なサンプルを作ってみました。
(更新ボタンをクリックしてください)

See the Pen ZGGNJP by webStudy (@webstudy) on CodePen.

「更新」ボタンをクリックする度に、ダミーのユーザーが表示されます。

 
ちなみに、顔写真に関しては「クリエイティブ・コモンズ・ライセンス(BY-NC-SA 4.0)」を一度は読んでおくのをお忘れなく…。

(参考)
Random User Generator」公式サイト


最新情報をチェック!

一緒によく読まれている記事

キーワード Keyword