ダミーの「顔写真付きユーザー情報」をJSONで提供する「Random User Generator」を使ってみた！
何らかの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 | $.ajax({ |
この例では、HTML内に記載している「img」タグのソースを、取得したダミー画像に「.attr」で差し替えています。
他にも、「.append」や「.html」などを使って、名前やメルアドのような情報を追加すれば簡単にダミーユーザーを生成することが出来ます。
以下に、簡易的なサンプルを作ってみました。
（更新ボタンをクリックしてください）
See the Pen ZGGNJP by webStudy (@webstudy) on CodePen.
「更新」ボタンをクリックする度に、ダミーのユーザーが表示されます。
ちなみに、顔写真に関しては「クリエイティブ・コモンズ・ライセンス（BY-NC-SA 4.0）」を一度は読んでおくのをお忘れなく…。
（参考）
「Random User Generator」公式サイト
