コンビニなど会計時に、アプリのバーコードの提示を求められるケースが多くなってきました。
MonacaとmBaaSを組み合わせれば、会員の管理など簡単に行うことができます。
会員を識別する方法は、アプリの画面上に会員コードをバーコードとして表示する方法が一般的です。
今回は、アプリの画面上にCODE128のバーコードを表示して、実際に読み取れるか確認したいと思います。
JavaScriptでバーコードを表示することができるJsBarcodeを使用します。
GitHubより、JsBarcode.all.min.jsをダウンロードし、[lib]フォルダにアップロードします。
iOS版Monacaデバッガーの結果です。
iPhoneの明るさを最大にして、LINEでバーコードを読み取ります。
「1234567890123456」と表示されました。
※右上のメニューと下のタブバーはダミーですので機能しません。
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/JsBarcode.all.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> "use strict"; ons.ready(function () { JsBarcode("#barcode") .CODE128("1234567890123456", { height: 80, marginLeft: 20, marginRight: 20, text: "1234-5678-9012-3456", fontSize: 14 }) .render(); }); </script> <style> .div-card { position: relative; box-sizing: border-box; margin: 20px auto; width: 320px; height: 198px; border-radius: 16px; background-color: #00569b; box-shadow: 0 4px 4px #888; text-align: center; } .div-card img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .div-card .div-text { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 12px; color: #fff; } </style> </head> <body> <ons-page> <ons-toolbar> <div class="center">MOBILE HATO-CARD</div> <div class="right"> <ons-toolbar-button> <ons-icon icon="ion-ios-menu"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <div class="div-card"> <img id="barcode" /> <div class="div-text">お会計時に会員バーコードをご提示ください。</div> </div> <div class="tabbar"> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> <div class="tabbar__label">ホーム</div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-browsers"></i> <div class="tabbar__label">クーポン</div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-barcode"></i> <div class="tabbar__label">会員コード</div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-mail"></i> <div class="tabbar__label">お知らせ</div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> <div class="tabbar__label">マイページ</div> </button> </label> </div> </ons-page> </body> </html> |
