無料ブログ「rentafree.net」の管理人ブログ

QRコードプラグインの仕様を変更しました。

今まではQRコードプラグインではモバイルページのURLをQRコード化して表示していましたが、
スマホの普及によりガラケーでWEBを閲覧するという行為が行われなくなっているので、QRコードはモバイルページのURLではなくPCページのURLを記載すべきと判断したためQRコードプラグインの仕様を変更しました。

今まではプラグイン作成時にURLをQRコード化した画像ファイルを作成して表示していましたが、
QRコード化する文字列を変更する機能を用意し、サーバー側が画像を作成せずにブラウザが生成して<canvas>で描画する仕様に変更しました。

変更内容
 変更前変更後
対応ブラウザ
画像が表示できるブラウザ<canvas>対応ブラウザ(IE8不可)
QRコードの内容モバイルページのURL未設定の場合はブログトップページURLとなりますが、
URL以外も含めて自由な文字列をQRコード化できます。(最大2953byteまで)

QRコードの作成は新しく公式JavaScriptに追加した機能によって行われるため、公式JavaScriptをロードしないテンプレートでは利用できなくなりました。
以前の仕様でQRコードプラグインを使用したことがある場合は、ユーザーのファイル保存領域にQRコード画像が作成されていますが、削除して問題ありません。


また、 http://ユーザードメイン/m/ がガラケー用URLとして用意されており、公式に用意されているCompact HTMLテンプレートで表示されていますが、
Compact HTMLテンプレートを廃止してガラケー用URL接続時もPCと同一のテンプレートを使用するように変更しようか検討しています。
ガラケーでWEBを閲覧するという行為が行われなくなっていると思いますので通常はガラケー用URLが不要であると思いますし、
標準のPC用テンプレートは条件分岐によりガラケー用URL時はCompact HTMLを出力するような高度なテンプレートを作成することが可能ですが、現在の仕様だとユーザーに編集権限がないため全くカスタマイズできないからです。

QRコード生成機能

文字列をQRコード化して<canvas>で描画する機能を用意しました。
公式JavaScriptの機能として利用できます。


使い方

<canvas data-qr="http://master.rentafree.net/"></canvas>

data-qr属性のある<canvas>タグが存在すると、公式JavaScriptのonloadイベントの際にQRコード生成スクリプトがロードされます。
QRコード生成スクリプトがロードされると、data-qr属性のある<canvas>にQRコードを描画します。
対象<canvas>のdata-xxx属性でパラメータを指定します。
属性
説明
data-qr
属性値がQRコード化する文字列となります。
data-mode
0=数字,1=英数字,2=8bit (省略時は0)
コード化する文字列に非対応文字が含まれる場合は加算されます。
値が少ないほど、同じサイズのQRに入れられる文字数が増えます。
QRコードの英数字モードは小文字に対応していませんが、判定時には小文字も対象にして英数字モードが確定したら大文字変換を行っています。
英小文字を表示させたい場合は8bitモードを明示的に指定してください。
英数字モードは英数字以外に「 」「$」「%」「*」「+」「-」「.」「/」「:」に対応しています。
URLはほとんどの場合は英数字モードで問題ありませんが、大文字と小文字を区別するアドレスで問題が生じる可能性などが考えられるので8bitのほうが良いかもしれません。
data-ver
1から40までの整数 (省略時は1)
QRコードの型番(大きさ)で、1辺のマス数は「型番*4+17」となります。
データが入りきらない場合は加算されます。
大きいほど容量(文字数)が増えますが、40型近くなるとカメラでの読み取りが困難なほどの大きさになります。
data-lv
0=M,1=L,2=H,3=Q (省略時は1、LMQHかlmqhの英字1文字での指定も可)
誤り訂正レベルで、訂正レベルの強さは「L<M<Q<H」の順でLが最弱です。
Lがもっともデータ容量(文字数)が多くなりますが、リーダーで解読できない可能性が高くなります。
data-mask
0から7までの整数 (省略時はundefined)
QRコードではマスク処理により内部的に8種類のパターンが生成され最適なパターンが出力されます。
このパラメータを省略した場合は規定の計算式で最適なパターンが出力されますが、0から7までの数値で指定することが可能です。
最悪なパターンが出力されたとしても、読み取りに影響するようなことは無いと思います。
data-px
整数 (省略時は3)
1マスの大きさ(px)となります。
1pxだと細かすぎて読み取りにくいと思います。

QRコード・プラグインの仕様変更を考えています

現在のところブログのQRコード・プラグインは、
http://ユーザードメイン/m/
のガラケー用Compact HTMLテンプレートのページを表示するようにできていますが、
スマホが普及してガラケーでWEBサイトを見るという行為は行われなくなっていると思いますので、
QRコード・プラグインでPC用のURLを表示するように変更しようと考えています。

また、現在はサーバーサイドでQRコード画像を生成して保存していますが、ブラウザ側の処理で<canvas>表示させる仕様にするつもりです。
バージョン8以下のIE等古いブラウザは<canvas>に対応していないので、一部の閲覧者はQRコードを表示できなくなります。


詳細な仕様は検討中ですが、QRコードの生成処理はかなり面倒なので、QRコードの型番やマスク処理を固定化してプログラムコード量を減らそうと思います。
現在のところ型番40まで対応しているのでURLの文字数限界まで表示できますが、URL表示だけなら型番5固定で良いかなと考えてます。
型番5の誤り訂正レベルLで表示できる文字数(英数字モード)は154文字までなので、全ユーザーのURLが収まるはずです。

マスクパターンの評価処理は、処理を作るのも面倒ですし、端末への負担も大きそうなので省略するつもりです。
それにより、QRコード・リーダーが誤判別してしまう可能性もあるのかもしれませんが、多分問題ないです。

それか、汎用性の高いQR生成スクリプトを作ってしまって、公式JavaScriptの機能として用意してしまうのも良いかなと思ってます。

モバイルブラウザでのブログエディター

Firefox Beta34で確認した際にマウスイベント時のselectionの破損バグが無くなっていると判断していたので、
touchイベントとrange状態を判別した上でコンテキストメニューの表示と非表示を切り替えることで対応させようとしたのですが、
Firefox Beta35で試したところ、修正されていると思っていたselectionの破損バグが存在したようで、contextmenuイベント時にrangeの取得が出来なかったので諦めました・・・

以前からタッチパネル端末へのブログエディター対応が最大の課題だと考えていますが、相変わらず厳しいです。

ブログエディターでは、テキストの特定範囲を選択して選択範囲へ処理を行う機能が搭載されていますが、
PCではコマンドをマウス右クリックのコンテキストメニューから選択するようになっていますが、
タッチパネル用のブラウザでは、
  • テキスト選択 → テキスト長押し
  • コンテキストメニュー → テキスト長押し
と、コンテキストメニューとテキスト選択が同じ操作なのでブラウザがコンテキストメニュー機能に完全に対応出来ていません。

range状態を判別して、こちらでコンテキストメニューの有効・無効を切り替えれば実用的なレベルで対応できそうなのですが、
  1. マウスイベント時にrangeを取得しようとするとエラーが発生する。
  2. oncontextmenuイベント時にイベント伝達を停止するとコンテキストメニューが表示されない。
というバグを把握しています。
2に関してはセキュリティーを犠牲にすれば対応できるのですが、
1に関してタッチに対応させようとすると見た目の選択範囲と処理範囲に食い違いが生じてしまう可能性があるので避けたいです。

通常の方法ではマウスイベント時にrangeに対して処理が行えないので、エディター上部メニューからの処理も行えません。


Google Chromeの場合はバージョンによって挙動が変わる気もしますが、テキスト上で長押しすると選択が優先されてコンテキストメニュー(Firefox以外では擬似コンテキストメニュー)が表示されないようです。
こちらはコンテキストメニュー自体が非対応なので仕様に問題があるとは思いますが、
バグは無さそうなので、テキスト選択をした上でエディター上部メニューから処理を行うことは可能です。


現状ではタッチパネル端末でブログエディターを利用する場合は、Google Chromeの方をおすすめしますが、機能に制限がある状態です。
Firefox以外のブラウザはコアがBlink又はWebKitですので、Firefox以外のブラウザはほぼ全てChrome互換です。

バージョン8以下のIEにメッセージを表示するようにしました

バージョン8以下のInternet Explorerで公式サイトを利用しているユーザーさんがまだ居るようなのですが、
いずれは対応ブラウザから外して利用できないようにしたいので、
バージョン8以下のIEで公式サイトトップページを表示した場合にブラウザの変更をお願いするメッセージを表示するようにしました。

コード量が多いのはブログエディターですが、
JavaScriptのコードを書く際に、バージョン8以下のInternet Explorerは他のブラウザと共通コードを利用できない箇所が多くなってしまうので、
現在のところブログエディターのスクリプトはバージョン8以下のInternet Explorerとその他のブラウザで完全に分けています。
既にバージョン8以下のInternet Explorer用スクリプトには機能追加等は行っていませんが、他ブラウザと処理内容が違うので完全に廃止してコードを統一したいです。

Windows Vista のInternet Explorer初期搭載バージョンが7なので、IE7及びIE8はMicrosoftのサポートを2017年まで受けられると思いますが、
VistaではIE9が利用可能ですのでIE9へのバージョンアップをお願いします。
IEではなくFirefoxの利用への変更をおすすめします。

IE8を利用している方は主にWindows XPの方だと思いますが、Windows XPは既にMicrosoftのサポート期限が切れているので、XPでインターネットに接続するのは危険です。
XPを使い続ける場合はFirefoxの利用をお願いします。
XPで最新のFirefoxを使う場合、XPにService Pack 3を適用する必要があります。


公式サイトの方はバージョン8以下のIE利用者がいなくなれば、すぐにでもバージョン8以下のIEを非対応にしたいです。

公開されるユーザーサイトに関しては、機能追加スクリプトでバージョン8以下のIE専用のコードが使われていますが、
こちらの方はコード量もさほど多くなく滅多に更新も行いませんので、少なくともWindows VistaのMicrosoftサポート期限までは維持するつもりです。