【JavaScript】URLをQRコードに変換するWebアプリ作成！コード公開します！

2024年1月4日 13:01

こんにちは！

この記事ではURLからQRコードに変換するwebアプリをJavaScriptを使用して作成します。

検索すればQRコード変換をしてくれるサイトはたくさんあるので、アプリそのものにはそこまで需要はないと思います。

なので今回はUIなどはだいぶ適当です🙁

この記事で伝えたいことは「QRコード変換」という一見難しそうな内容も簡単に作成できるということです。

自分でも作成してみたいという方がいたらぜひ最後まで読んでみてください！

今回作成するアプリの紹介

まずは今回作成したアプリを紹介します。UIはほぼ素のHTMLなので世に公開できるものではないですが許してください😕

私がやっているブログのURLで試してみようと思います。
ブログは↓です。

テキストボックスにURLを入れて「QRコード作成」ボタンを押すとQRコードが作成されます。

試しに生成されたQRコードを読み取ってみてください。同じブログに飛ぶはずです！

ソースコード

コードの解説に入ります！準備するファイルはindex.html、styles.css、そしてscript.jsです。
名前はなんでもいいです！

解説というほど大したことはしていませんがそれぞれ説明していきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>QRコードジェネレータ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>リンクからQRコードを生成</h1>
        <input type="text" id="urlInput" placeholder="URLを入力してください">
        <button id="generateButton">QRコード生成</button>
        <div id="qrcode"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

<input>で入力欄、<button>でボタンを作成しているだけです！

<Script>タグでは自分で作成するscript.jsの他に外部JavaScriptファイルを読み込んでいます。

今回QRコード生成ライブラリを読み込んでいます。このライブラリは任意のテキストを受け取りQRコードを生成します。

なのでライブラリを使うだけでQRコードを作成できます！簡単！

styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 400px;
    margin: auto;
}

input, button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}
 #qrcode  {
    margin-top: 15px;
}

特に解説はないです。。
今回見た目にこだわっていないので必要最低限の内容しか記述していません。

このコードからcssをいじって自分好みの見た目にして欲しいです！ポジティブに言えばCSSのいい勉強にはなると思います。

script.js

document.getElementById('generateButton').addEventListener('click', function() {
    var url = document.getElementById('urlInput').value;
    if (url) {
        generateQRCode(url);
    } else {
        alert('URLを入力してください。');
    }
});

function generateQRCode(url) {
    document.getElementById('qrcode').innerHTML = '';
    new QRCode(document.getElementById('qrcode'), url);
}

まずボタンが押された時のイベントリスナーを設定します。入力欄にURLが入力されていればQRコードを生成し、空欄であればメッセージを出します。

generateQRCode(url)はQRコードを生成する関数です。idがqrcodeの要素内のHTMLをクリアし、新しく作成したQRコードを表示しています。

連続でQRコードを生成するときに必要な処理です。

まとめ

この記事ではJavaScriptでqrcodeを作成するプログラムを作成しました。ライブラリを使うことでこんなに簡単に作成することができます。

プログラミングにおいてライブラリを使いこなすことはとても重要なので他にも便利なライブラリを紹介していこうと思います。

他にもnoteでプログラミング関係の記事を書いているのでぜひみてみてください！

この記事中で紹介したブログもチェックしていただけると嬉しいです！

この記事が気に入ったらサポートをしてみませんか？