オリジナルドメインでの
QRコード作成方法
-
1QRコード作成に使用する独自ドメインを取得する
※すでにURLを準備されている方は②へ進んでください。
-
2作成したいサイトのURLを入力する
「さっそくQRコードを作成する」の入力エリアに作成したいサイトのURLを入力してください。
-
3作成するをクリック
「作成する」ボタンをクリックすると、URLから生成されたQRコードのサンプルが表示されるのでご確認ください。
-
4ダウンロードをして完了
使用箇所に合わせた設定を選択後、ダウンロードボタンをクリックして完了です。
お名前.comで作成したQRコードは商業利用可能、無期限・無制限でお使いいただけます。ビジネスに、プロモーションに、ぜひお役立てください。
さっそくQRコードを作成する
日常生活で目にする機会の増えた「QRコード」。最近では様々なシーンで活用されていますが、QRコードは誰でも無料で、簡単に作成することが出来るのです。まずはQRコードを作成してみましょう。世界に1つのQRコードが表示されます。
QRコードとは
QRとは、Quick Response（クイック・レスポンス）の頭文字から来ています。
1994年に日本企業が開発した二次元バーコードを「QRコード」と呼び、従来のバーコードよりも大容量のデータを記録する事が可能です。さらに、汚れ・破損に強い、スペースを取らない、360°どの方向からでも表示が可能、などの特徴があります。バーコード読み取り時に使用される様な専用の機器が不要で、スマートフォンがあれば読み取り可能という点で、現在世界中で爆発的に普及が進んでいます。
QRコードは商用利用であっても個人利用であっても、無制限で無期限に無料です。商用利用の際はQRコード作成用のURLにパラメーターを入れると、アクセス解析が出来るようになるため非常におすすめです。
QRコード読み取り方
少し前までは、スマートフォンにQRコードを読み取る「専用アプリ」をダウンロードし、読み取り時には都度アプリを立ち上げる必要がありました。しかし、 最近のスマートフォンでは、標準カメラからQRコードを読み取る事が可能です。
一般的な読み取り方は、標準カメラを起動し、カメラの範囲内にQRコードを写すだけです。シャッターを押さなくても自動的にQRコードが認識され、画面上部に表示されるURLをタップしてアクセスするという流れです。
読み取りが上手くいかない場合は、カメラとQRコードを少し離してみるとピントが合いやすくなる場合があります。読み取れないからといって、接写するのではなく、カメラとQRコードの距離を前後させてみてください。
QRコードの使い方
QRコードには大容量のデータを記録することが出来ます。一般的に記録される事が多いのは、WebサイトやアプリのURL、決済情報、LINEの友だち追加などがあげられるのですが、その他には画像や音声、地図、漢字・かな文字では最大1,817字ものデータが記録可能です。この様な大容量のデータを簡単に共有することが出来るため、様々な使い方があげられます。家族や友人同士でのデータ共有はもちろん、QRコードを商用利用する場合はチラシや名刺などの紙面だけでは記載しきれない情報をQRコードに盛り込むことで、オフラインからオンラインへの集客に最適です。また、WEBサイトやアプリのURLへの誘導、LINEの友達追加をすることで、次回販売促進の機会に繋げることが出来ます。
').prependTo($box);
var $input = $box.find('input[type="hidden"]')
var picker = Pickr.create({
el: '#'+$box.attr('id'),
theme: 'classic',
closeOnScroll: false,
useAsButton: true,
autoReposition: true,
lockOpacity: false,
comparison: true,
default: default_color,
defaultRepresentation: 'HEX',
position: 'top-middle',
/*
swatches: [
'#cc0000'
],
*/
components: {
hue: true,
interaction: {
input: true
}
}
});
var changeColor = function(color) {
var rgb = [color[0], color[1], color[2]].join(',');
$input.val(rgb);
$color.css('background-color', 'rgba('+color[0]+','+color[1]+','+color[2]+',1)');
};
picker.on('init', function() {
changeColor(picker.getSelectedColor().toRGBA());
});
picker.on('change', function(color) {
changeColor(color.toRGBA());
});
picker.on('changestop', function(color) {
$form.trigger('submit.qrcreate');
});
});
var $form = $('.js-qr-form');
var $option = $('.js-option');
var $qr = $('.js-qr-box');
var $dl = $('.js-dl-box');
var $error = $('.js-error-message');
$form.on('submit.qrcreate', function(e) {
e.preventDefault();
$error.hide();
var logo_datas = {'src': null, 'height':0, 'width': 0};
var ConvSVGtoPNG = function(callback) {
var files = $form.find('[name="logo"]').prop('files');
if(! files || ! files.length) {
callback();
return;
}
var safe_types = ["image\/png","image\/jpeg","image\/gif","image\/svg+xml"];
var file = files[0];
if($.inArray(file.type, safe_types) === -1) {
throw '対応していない画像形式です。';
}
if(! window.FileReader) {
throw 'このブラウザでは画像にSVG形式を利用できません。';
}
var fr = new FileReader();
fr.onload = function() {
var logo_data_uri = fr.result;
var match = logo_data_uri.match(/^data:\s*image\/[a-z\+]+;\s*base64,\s*(.+)$/);
if(! match) {
$form.trigger('formError', ['画像アップロード未対応のブラウザです。']);
return;
}
if(file.type == 'image/svg+xml') {
var svg_source = atob(match[1]);
var $box = $('
').html(svg_source);
var $svg = $box.children('svg').eq(0);
if(! $svg.length) {
$form.trigger('formError', ['未対応のSVG画像です。']);
return;
}
$box.html($svg);
$box.find('script').remove();
$box.appendTo('body');
var svg_info = $svg[0].getBBox();
logo_datas.width = svg_info.width;
logo_datas.height = svg_info.height;
$svg.attr({'width': svg_info.width, 'height': svg_info.height});
svg_source = $box.html();
logo_data_uri = 'data:'+file.type+';base64,'+btoa(svg_source);
$box.remove();
if($form.find('[name="type"]:checked').val() != 'svg') {
var $canvas = $('
').attr({'width': svg_info.width, 'height':svg_info.height});
var ctx = $canvas[0].getContext('2d');
var image = new Image();
image.onload = function() {
try {
ctx.drawImage(image, 0, 0, image.width, image.height);
var src = $canvas[0].toDataURL("image/png");
logo_datas.src = src;
callback();
} catch(e) {
$form.trigger('formError', ['このブラウザでは画像にSVG形式を利用できません。']);
}
};
image.src = logo_data_uri;
return;
}
}
logo_datas.src = logo_data_uri;
callback();
}
fr.readAsDataURL(file);
};
try {
ConvSVGtoPNG(function() {
var token = 'ff8583eeda3c1d7a4e2fc3aed9109a78';
var datas = {};
$.each($form.serializeArray(), function(idx, data) {
datas[data.name] = data.value;
});
datas.token = token;
$.each(logo_datas, function(name, value) {
datas['logo_'+name] = value;
});
$.ajax({
url: '?qr',
data: datas,
type: 'POST',
dataType: 'json'
})
.done(function(qr_result) {
if(qr_result.success) {
$option.show();
$qr.empty()
.append(function() {
return $('
')
.append(function() {
return $('
![]()
').attr('src', qr_result.src);
});
});
$dl.empty()
.append(function() {
return $('
ダウンロード')
.on('click', function() {
$.ajax({
url: '?download',
data: {src: qr_result.src, token: token},
type: 'POST',
dataType: 'json'
})
.done(function(dl_result) {
if(dl_result.success) {
location.href = dl_result.redirect_url;
} else {
$form.trigger('formError', [dl_result.error]);
}
});
});
});
} else {
$form.trigger('formError', [qr_result.error]);
}
});
});
} catch(e) {
$form.trigger('formError', [e]);
return;
}
});
$option.find('input,select,textarea').on('input', function() {
$form.trigger('submit.qrcreate');
});
$form.on('formError', function(e, msg) {
$error.text(msg).show();
});
});
オリジナルのドメインでQRコードを作成
今ならドメイン登録が無料です！
QRコードを作成するなら、オリジナルのドメインを活用することをおすすめします。
人気の「.com」ドメインを無料で登録できます。
新たにホームページを作りたい方は、ぜひこの機会に登録しましょう。
※お一人様1回1個限り
