バックエンドの技術を使わずにウェブのフロントエンドだけで、つまり HTML と JavaScript だけで QR コードリーダーを作ることに挑戦してみました：



まずは完成品で実際の挙動を確認ください。PC またはスマホで（できればスマホで）こちらの URL にアクセスしてください：
https://dotnsf.github.io/web_qrcode/





↑Github Pages で公開しているページなので、フロントエンドだけで作られていることがわかると思います。クロスオリジンな AJAX なども使ってないので、興味ある方はソースコードも確認してください。

「ファイルを選択」ボタンをクリックします。スマホの場合はカメラが起動するので QR コードを撮影してください。また PC の場合は画像選択ボックスが表示されるので、QR コードが撮影された画像を選択してください。

すると画面下部に画像が表示され、同時に画面内の QR コードが（存在していれば）解析され、解析結果の文字列データが表示されます：



フロントエンドだけでここまでできるので、後は例えばこの結果が URL 文字列になっていれば、そのアドレスのページを開くこともできますし、テキストデータだけを読み取った上でバックエンドサーバーにデータを送信する、といったサーバーとの連携処理も容易に可能です。


【ソースコードの解説】
ソースコードはこちらで MIT ライセンスで公開しています（GitHub のウェブホスティングである Github Pages を使ってそのままサービスも公開しています）：
https://github.com/dotnsf/web_qrcode

特にサービスの肝である index.html ファイルはこちらから参照いただけます。実質的にこの１ファイルだけでカメラ起動から撮影、QR コード解析まで実現しています：
https://github.com/dotnsf/web_qrcode/blob/main/index.html


まずスマホでカメラを起動するボタンの部分は以下の HTML コードで実現しています（PC ブラウザでこのボタンをクリックすると、保存済みの画像ファイルを選択するダイアログが表示されます）：

<input type="file" accept="image/*" capture="camera" name="file" id="file-image"/>

type="file" で accept="image/*" capture="camera" 属性のついた <input> タグをクリックすると、カメラ内蔵機種の場合はそのカメラが起動し、撮影した画像を選択したことになります。（PCのなど）カメラ内蔵機種でない場合は普通にファイル選択画面になりますが、accept 属性により画像ファイルしか選択できません（要するにここで QR コードを撮影するか、QR コードが撮影された画像を選択することを想定しています）。

また jQuery を使った JavaScript によって以下の処理が画面ロード直後に実行されています：

var canvas = null;
var ctx = null;
$(function(){
  canvas = document.getElementById( 'mycanvas' );
  ctx = canvas.getContext( '2d' );

  var file_image = document.getElementById( 'file-image' );
  file_image.addEventListener( 'change', selectReadFile, false );
});

HTML 内下部に設置された <canvas> と、そのコンテキストを取得します（この <canvas> に画像が描画されることになりますが、その処理は後述します）。また上述の <input> タグの値が変化した時（＝カメラで撮影するか、画像ファイルが選択された時）に selectReadFile() 関数が実行されるよう定義されています：

<div>
  <canvas id="mycanvas"></canvas>
</div>

したがってカメラで撮影するか画像ファイルを選択すると、以下の JavaScript コードが実行されます：

function selectReadFile( e ){
  var file = e.target.files;
  var reader = new FileReader();
  reader.onload = function(){
    readDrawImg( reader, canvas, 0, 0 );
  }
  reader.readAsDataURL( file[0] );
}

HTML5 の Filesystem API を使って撮影された画像ファイルを読み込み、その内容を上述で取得した <canvas> に描画するための関数 readDrawImg() が実行されます。つまり撮影した画像が画面内にも表示されるようになります。

readDrawImg() 関数および、この中で実行される多くの関数の中身は以下のようになっています：

function readDrawImg( reader, canvas, x, y ){
  var img = readImg( reader );
  img.onload = function(){
    var w = img.width;
    var h = img.height;
    printWidthHeight( 'src-width-height', true, w, h );

    // resize
    var resize = resizeWidthHeight( 1024, w, h );
    printWidthHeight( 'dst-width-height', resize.flag, resize.w, resize.h );
    drawImgOnCav( canvas, img, x, y, resize.w, resize.h );
  }
}

function readImg( reader ){
  var result_dataURL = reader.result;
  var img = new Image();
  img.src = result_dataURL;

  return img;
}

function drawImgOnCav( canvas, img, x, y, w, h ){
  canvas.width = w;
  canvas.height = h;
  ctx.drawImage( img, x, y, w, h );

  checkQRCode();
}

function resizeWidthHeight( target_length_px, w0, h0 ){
  var length = Math.max( w0, h0 );
  if( length <= target_length_px ){
    return({
      flag: false,
      w: w0,
      h: h0
    });
  }

  var w1;
  var h1;
  if( w0 >= h0 ){
    w1 = target_length_px;
    h1 = h0 * target_length_px / w0;
  }else{
    w1 = w0 * target_length_px / h0;
    h1 = target_length_px;
  }

  return({
    flag: true,
    w: parseInt( w1 ),
    h: parseInt( h1 )
  });
}

function printWidthHeight( width_height_id, flag, w, h ){
  var wh = document.getElementById( width_height_id );
  wh.innerHTML = '幅: ' + w + ', 高さ: ' + h;
}

まず readImg() 関数の中で Filesystem API を用いて画像ファイルを読み込み、その結果を Image オブジェクトの src 属性に代入します（これで Image オブジェクトを drawImgOnCav() 関数で <canvas> に表示すると読み込んだ画像が表示されます）。またこの結果から画像の幅および高さを取得して、画面内に元画像のサイズとして表示されます。

drawImgOnCav() 関数の最後に checkQRCode() 関数が実行されています。画像の <canvas> への描画終了後にこの関数が実行され、画像に QR コードが写っていたらその内容を解析して、データを取り出します：

function checkQRCode(){
  var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
  var code = jsQR( imageData.data, canvas.width, canvas.height );
  if( code ){
    //console.log( code );
    alert( code.data );
  }else{
    alert( "No QR Code found." );
  }
}

具体的にはコンテキスト変数（ctx）から getImageData() 関数でイメージデータを取得し、その結果を jsQR を使って解析します。ややこしそうな QR コードの解析部分は実はライブラリによって一瞬で実現できてしまっています。jSQR バンザイ！

正しく QR コードが解析できた場合は解析結果の文字列（code.data）を alert() 関数で画面に表示し、解析できなかった場合は "No QR Code found." と表示される、という一連の処理が定義されています。


今回の処理では QR コードが正しく解析でした場合はそのまま表示しているだけですが、これが URL であればロケーションに指定してジャンプしてもよし、テキストなどのデータであればバックエンドの API にポストしてもよし、というわけで取り出したデータの使いみちは alert() の代わりに記述することで、自由に応用できると思います。


というわけで、Filesystem API と jsQR と <input> タグのカメラ拡張を使うことで、ウェブのフロントエンド技術だけで QR コードリーダーが実現できました。

タグ ：

filesystem

api

html5

javascript

qrcode

jsqr

ウェブアプリケーションで QR コードを表示したくなることがあります。スマホを持っている人にその場でとあるURLにアクセスしてもらったり、文字列などの情報を送るのに便利な方法だと思っています。

そんな機能が必要な場合、自分は jquery.qrcode.js を使っています。ブラウザの JavaScript（jQuery）だけで文字列の QR コードを簡単に生成することができます。サンプルページを用意したので、こちらで試すとわかりやすいと思います：
https://dotnsf.github.io/jquery_qrcode/




画面最上部のテキストフィールドに URL や文字列を入力し、青いボタンを押すと入力した文字列から QR コードを生成して表示する、というものです。この部分は以下のようなコードで実現しています：

  :

<script src="./qrcode.min.js"></script>

  :

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';


function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

  :

まず QR コードを描画するための <canvas> タグ（id="qrcode"）を用意します。そしてボタンがクリックされるとテキストフィールドの値を取り出し、<canvas> の id を指定して QRCode を描画する、というシンプルなものです。これだけで QR コード化が実現できます。

文字列や URL を読み取らせたい対象者がスマートフォンユーザーだけであればこれだけで最小限必要な機能は実現できます。問題は対象者の中に PC ユーザーがいて、PC ユーザーにもこの URL や文字列を提供したい場合です。PC からは QR コードを読み取れない人が多数だと思うので直接メッセンジャーやメールなどで文字列や URL を送ればいいのですが、では逆に QR コードで表示されている文字列を取り出す便利な方法はないでしょうか？　上記サンプルの場合は QR コード化する文字列をテキストフィールドに指定しているのでテキストフィールドから取り出せばいいのですが、そういうケースばかりではありません。　以下は「QR コード部分をクリックした時に、その文字列をクリックボードにコピーする」ためのコードを加えました。これによってクリップボードからペーストするだけでメッセンジャー等で送れるようになり、UI的にも楽だと思ったのでした。　加えて、QR コード部分をクリックした際に「クリック感」というか「押された感」が出るような、一瞬だけ影ができるような視覚効果を加えてみました。

最終的なコードはこのようになりました：

  :
<script src="./qrcode.min.js"></script>

<style type="text/css">
html, body{
  text-align: center;
  background-color: #fafafa;
  font-size: 20px;
  color: #333;
}
#qrcode:active{
  border: 1px solid #334c66;
  background-color: #69c;
  -webkit-box-shadow:inset 0px 0px 8px #334c66;
  -moz-box-shadow: inset 0px 0px 2px #3a6da0;
  box-shadow: 0px 0px 2px #3a6da0;
}
</style>
</head>
<body>

<div class="container">
  <input type="text" id="text" value=""/><button class="btn btn-primary" onClick="generateQRCode();">QRコード</button>
</div>

<canvas id="qrcode"></canvas>

<script>
var text = '';

$(function(){
  $('#qrcode').on( 'click', function( e ){
    copyClipboard( text );
  });
});

function generateQRCode(){
  $('#qrcoe').html( '' );
  text = $('#text').val();
  if( text ){
    QRCode.toCanvas( document.getElementById( 'qrcode' ), text, function( err ){
      if( err ){
        console.log( err );
      }
    });
  }
}

function copyClipboard( str ){
  //. 空 div と空 pre
  var tmp = document.createElement( 'div' );
  var pre = document.createElement( 'pre' );

  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';
  tmp.appendChild( pre ).textContent = str;

  //. 画面外へ
  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';

  //. body に追加
  document.body.appendChild( tmp );
  document.getSelection().selectAllChildren( tmp );

  //. クリップボードにコピー
  var result = document.execCommand( "copy" );

  //. 要素削除
  document.body.removeChild( tmp );

  return result;
}
</script>

  :

QR コード化したテキストの内容を変数 text に保存しておき、id="qrcode" のキャンバスがクリックされた時に text の値をクリップボードにコピーする、という内容を加えています。また視覚効果としてクリックされた時だけ有効になる #qrcode:active 要素を定義し、影をつけるなど見た目に変化を加えています。

タグ ：

jquery

javascript

qrcode

active

css

まだコードに手を加えることもあり、開発中ゆえの不安定さもあるのですが、一応一通りの機能が動く状態になったのでサービスを公開します（2020/05/19）。


自作のお絵描き共有サービス MyDoodles を Nintendo Switch の人気アプリ「あつまれ　どうぶつの森」のマイデザイン化するための機能を実装しました。とりあえずは手持ちの Windows 10 PC および iPhone SE で動作確認しています。


【はじめに】
最初にお断りをしておくと、このサービスの編集機能そのものはそれほど強力ではありません。線の色や太さを選んで描画する以外には、背景色設定と、アンドゥ、リドゥ、リセット程度の機能しかありません。一般的なレタッチアプリのような細かな編集はできませんが、よく言えば「簡単」「気軽」です。小学校低学年程度の子供でも利用できることを想定して開発しています（その割には漢字とかも使ってるけど・・ (^^;）。

また「そもそもなんでこんなツールを作ったのか？」を説明します。「あつまれ　どうぶつの森」にはマイデザインを編集する機能が標準で付属していて（ゲーム内でマイルを貯めて機能豊富な Pro エディタを使うことも可）自分の好きなデザインを作ることはできますが、これがちと使いづらいというか何というか・・・だったりします：



このような状況に対して僕と同じような考えを持っている人が少なからずいるようで、後述のようなより便利にデザインを編集できるサービスがいくつか公開されていたりします。自分も先人達から提供いただいた情報を頼りに、その流れに乗っかる形でサービスを開発してみました。ただ自分の場合はデザインは専門ではなく、自分向けという意味もあるのですが「より自由度高くデザインする」というよりは「より簡単に使える」ことを目指して作ってみました。

なお今回作成したツールでは「指でお絵描き」する作業がありますが、この部分の実現には自分が開発した doodlejs を改良して使っています。この doodlejs の応用で LINE で手書きスタンプを送ったり、大勢でお絵描きをした内容を同時に参照したりしています。応用範囲の大きなライブラリだと思っていて、今回のサービスも doodlejs の応用で実現しています：



・・・以上、宣伝コーナーでした（笑）。

では以下で MyDoodles の使い方を説明し、続けてマイデザイン化するための手順を紹介します。


【MyDoodles の使い方】
MyDoodles 自体は PC、スマホ、タブレットのウェブブラウザを使って URL にアクセスすることで利用できます（ただし後述のマイデザイン化する場合は PC のマウスで描画するよりも、スマホを使って指で描画する方が簡単だと思っています。以下のスクリーンショットもスマホでのものを中心に紹介します）：
https://mydoodles.mybluemix.net/



アクセスすると以下のような画面が表示されます：




それぞれ以下のような役割を持っています：

タイトル	絵のタイトル
履歴	同一端末で過去に保存した絵を呼び出す
線の色	描画する線の色
線の太さ	描画する線の太さ
背景色	タップすると「線の色」で指定された色をキャンバスの背景色にする
キャンバス	ここにお絵描きを描画します
アンドゥ	１ストローク戻る
リセット	キャンバスを初期状態に戻す
保存	キャンバスのお絵描きを保存する
リドゥ	（アンドゥ後に）１ストローク進める

タイトル欄には絵のタイトルを入力します。後述のマイデザインにする場合、ここで指定した内容が絵のタイトルにもなります：



キャンバス画面を使って指で絵を描いていきます（PC を使っている場合はマウスやペンタブレットが使えます。タッチスクリーン対応の PC であれば画面に直接指でスクリーンに描くこともできます）。なお後述のマイデザイン化を想定する場合はあまり細い線で描いても最終的に潰れてしまう可能性が高い（マイデザインは 32x32 サイズ）ので、太さ 10 以上の線で描くことをおすすめします。また PC ブラウザを使う場合は線の太さに加えて、なるべくキャンバス部分が正方形になるようウィンドウサイズを調整してから描くことを推奨します（マイデザインが正方形のため）：




最後に「保存」ボタンをクリックするとお絵描き内容が保存されます：




保存されたお絵描き内容が表示されます：



この画面から Twitter や facebook などの SNS にシェアすることができるようになり、シェアされた他の人も同じ画像を見ることができるようになります。なお同一端末（お絵描きを描いて保存した時に使っていた端末）からこの内容を表示している場合のみ、画面右上に「再編集」ボタンが表示され、このお絵描き内容を元に編集を続けることもできます。また「自分も試す！」ボタンはこのページをシェアされて見た人が自分でもお絵描きを試せるよう新規作成画面へ案内するボタンです：



加えて、これはあまり使われない機能であると想定していますが、過去作品履歴情報の他機種への引っ越し機能も一応用意しています。手順はこのブログの一番下※に記載しておきます。


基本的なお絵描き共有サービスの機能は概ねこんな感じです。これはこれで簡単にお絵描きして、簡単に SNS でシェアできる、というものだと思っています。


【どうぶつの森　マイデザイン化】
MyDoodles サービスを使って作ったお絵描きの内容を「あつまれ　どうぶつの森」のマイデザインとして取り込む手順を紹介します。なお、こちらの手順はお絵描きの作者本人だけでなく、シェアされたお絵描きページを見ている全ての人が実行可能です。またこの手順はスマホで行う必要はなく、（シェアされたお絵描きページの URL がわかっていれば）PC などから行うこともできますし、その方が楽だと思っています。

まず、この機能を使ってマイデザインを取り込むには Nintendo Switch Online アプリをスマホにインストールし、デザインを読み取る人のアカウントで初期設定しておく必要があります。あらかじめご用意ください：




改めてお絵描き内容をマイデザイン化するまでの手順を紹介します。MyDoodles サービスのお絵描きページを表示して、そしてその中の「QR コード」ボタンをタップします：



すると画面内にお絵描き内容の情報を含む QR コードが表示されます：



この QR コードを Nintendo Switch Online アプリの「あつまれ　どうぶつの森」サービス内「タヌポータル」の「マイデザイン」から読み込みます：



この手順を実行するには上述の QR コードをスマホの Nintendo Switch Online アプリを起動して読み取ることになります。したがってNintendo Switch Online アプリをインストールしたスマホとは別のスマホや方法で上記 QR コードを表示する必要があります。別のスマホや PC を使って MyDoodles から表示するか、 QR コードの内容をスクリーンショットで撮影して別途写真共有サービスなどを使うなどして、Nintendo Switch Online アプリのタヌポータル「マイデザイン」から生成された QR コードを読み込んでください：



正しく QR コードが読み取れると以下のような確認画面になります（32x32 に縮小された結果、どの程度潰れてしまうかを確認できると思います）。読み込む場合は「保存」します：



これで MyDoodles で描いたお絵描き内容が「あつまれ　どうぶつの森」から取り込めるようになりました：



ここから先は「あつまれ　どうぶつの森」を実際に起動して行う操作となります。


「あつまれ　どうぶつの森」を起動後に、（ゲーム内の）スマホを取り出し、「マイデザイン」を選択します：



マイデザインの一覧が表示されている画面で「ダウンロード（＋ボタン）」を選択し、インターネットに接続して「ダウンロード」を選択します：



上述の作業で QR コードから取り込んだデザインがダウンロードされます。ダウンロードする先のデザイン（白紙のデザインか、上書きしてよいデザイン）を選んで保存します：



MyDoodles で作ったお絵描きがマイデザインとして保存されました：




現在の仕様では保存したマイデザインは「あつまれ　どうぶつの森」の中では再編集することはできませんが、トップスとして身につけたり、地面に敷いたりする、等といったことができるようになります：







と、以上が MyDoodles サービスの簡単な使い方、およびマイデザイン対応の手順となります。繰り返しますが凝ったデザインを描くためのツールというよりは、気軽にお絵描きしたものがゲーム内で使えることを主目的としている点をご了承ください。


なお、このツール（のマイデザイン対応）の開発をするにあたり、以下のサイトの情報を大変参考にさせていただきました。ありがとうございます。　特に「ドット絵ナニカ」は画像を指定してマイデザインを作る、というもので、凝ったデザインを作りたい人にとっては（デザインツールで凝った画像を作って変換すればよいので）こちらを使われた方が目的にあっていると思っています：
・ドット絵ナニカ
・「あつまれ どうぶつの森」のマイデザインのQRコードを写真・画像ファイルから生成する方法





※過去作品履歴の引っ越し手順

この MyDoodles では作った作品をシェアして他の人に見せたりすることはできますが、原則として「同一機種で作った作品のみ」履歴一覧から参照して検索したり、再編集することができます。

ただ機種変更などの都合により、ずっと同じ機種を使うことができないことも想定されます。そんな場合にこの引っ越し手順により、他機種へ過去作品履歴を引き継ぐことができるようになります。ただし特に画面サイズの異なる他機種へ引っ越しした場合は、再編集時にうまく表示できなくなります。事実上、参照のみのための引っ越しと考えてください。

引っ越しするには引っ越し元と引っ越し先両方の 機種 ID が必要になります。機種 ID は履歴参照時に表示される赤枠の部分です：



引っ越しは①引き継ぎ先指定、②取り込み元指定　の２段階からなります。まず引っ越し元となる機種で①を実行して引き継ぎ先機種の機種 ID を指定し、続けて引っ越し先となる機種で②を実行して引き継ぎ元機種の機種 ID を指定して取り込みます：



②までが完了すると、引っ越し元機種からは履歴一覧を見ても過去作品は見えなくなります。

タグ ：

どうぶつの森

あつ森

mydoodles

nintendo

switch

qrcode

animal

crossing