top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_843

QRコード生成ライブラリ:JavaScriptでQRコード創れるんだ!驚き。早速ツールにしておこう ・・・ 【創ったmetaboy】

 2009-04-12
 前に、QRコードにしてくれるサービス
 紹介したけれど、
 ・QRコード:時々必要になるんですね、これ。利用するのはここ ・・・ 【Webサービス】

 案外、必要になるんですね、QRコード

 それを、JavaScriptで創れるライブラリがあるということで、
 早速試してみる。ついでに、小さなツールにして
 ここにも置いておこう。
Pure JavaScriptによるQRコード生成ライブラリ
Pure JavaScriptによるQRコード生成ライブラリ 目的 が
 「無駄なものにどれだけ
  情熱をささげられるか
  のテスト」だそうです。
 ・・・素晴らしい。
 (最速インターフェイス研究会 さん)



 利用してみよう・・・

  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more************************************************
◎ JavaScript版QRコード作成ツール
************************************************


元々は、Ruby用のライブラリ、ということで
QRコード・バーコード
QRコード・バーコード PHP,Ruby,Java 用の
 ライブラリがまとめて
 公開されている。

 ・「そのQRコード、信頼できる?」というコラムは
   なかなか、興味深かった。

 さて、「JavaScript」
 Pure JavaScriptによるQRコード生成ライブラリ
 こちらに戻って・・・

 ■動作テスト

  □「創るmetaboy」のURLを入力してテスト
   「創るmetaboy」のURLを入力してテスト
   「創るmetaboy」のURLを入力してテスト
   ・処理時間 :1回目はブラウザの状態が悪かったのか
     2327ミリ秒 かかったけれども
         2回目は、643ミリ秒 で出来た。
   「創るmetaboy」のURLを入力してテスト
    ※ちゃんと、携帯付属のリーダーで読み込め
     利用できましたよ。

  □その他、0 1 並びのデータや、HTMLソースまで
   生成してくれる
   その他、0 1 並びのデータや、HTMLソースまで

  今回は、シンプルに
  QRコード生成部分のみを 簡易ツール化する

 ■まず、ご用意いただいている
  ソースをダウンロード(Zip圧縮)
  > おぉ、Ruby用とかのものも
    まとめて入ってる

   □使用するライブラリ素材
    フォルダ:qrcode_data を
    所定の位置にアップロード


 
 ◆仕様策定◆
 ・漢字コードは同じ utf-8 のままで
  ・簡単にワンクリック生成でき
  ・ブログパーツ、想定しているので
   貼ってあるサイトのものも
   ワンクリックで。
  ・その他の機能は今回はいれない。
   



 ■実際の構築

   □(ダウンロードした中で)qrcode.js を組み込む
    ・HTMLフアイルソースにおいて
<script type="text/javascript" charset="utf-8" src="*****/qrcode.js"></script>
 ・・・ jsファイルはエディタで開いて
     確認したとこrろ、文字コードがおかしくなって
     いたので、改めて、utf-8 にして用意。

    次に
    公開されているツールを参考にさせていただくと
    直で組み込んでいるJS関数群があるので、
   □それらを
    js_qcode.js という名前で組み込む。
<script type="text/javascript" charset="utf-8" src="*****/js_qcode.js"></script>


    ※このソースを確認させていただくと
     最初のボタンが読んでいるトリガは
    function makeqr(src) だ。
function makeqr(src){
try{
var qr = new Qrcode;
var res = qr.make_qrcode(byteSplit(src));
"debug".element().value = res;
maketable(res)
}catch(e){
"debug".element().value = e;
}
}
 ・・・だが、"debug" は、
    「01の並びに変換したもの」を作成する部分
    あるいは、エラーメッセージ表示の部分
    なので、今回は不要。
   ・maketable 部分が、実際の QRコードを
    表示形成しているところなので
    そこは利用。

   シンプルに(多少カスタマイズして)
   また
    ・貼ってあるサイトのドメインを
     一発生成するボタン用追加
function makeqr(intWork){
try{
var form = this.document.forms[0];
if(intWork==1){
var src = form.srctext.value;
var qr = new Qrcode;
var res = qr.make_qrcode(byteSplit(src));
maketable(res);
}else{
if(intWork==9){
var domain = location.hostname;
form.srctext.value="http://" + domain + "/"; makeqr(1);
}}
}catch(e){ alert("エラー発生:" + e); }
}
 ・・・とさせていただく。
    ・新しくオブジェクトを生成し、
     make_qrcode メソッドを呼んでいる

    make_qrcode は、組み込んでいる
    qrcode.js にある。

    maketable は、
    今回不要な部分ははずして、
function maketable(src){
var data = src.split(/\r\n|\r|\n/);
var buf = [];
buf.push("<table cellspacing=0 border=0>\n");
var b = "<td class='black'>";
var w = "<td class='white'>";
data.forEach(function(v){
buf.push("<tr>");
buf.push(v.chars().map(function(v){return (v=="0")?w:b}).join(""));
buf.push("</tr>\n");
})
buf.push("</table>");
var t = buf.join("");
"result_metaqcode".element().innerHTML = t;
}
 ・・・とする
    書き出す、result のところも、変更。

    ベンチマークとる部分も、ライブラリ内は改変しないが
    表示などは不要なので、
    maketable は、
    今回不要な部分ははずして、
Function.prototype.add_bench = function(){
var self = this;
return function(){
var start = new Date;
var res = self.apply(this,arguments)
var end = new Date;
// "bench".element().innerHTML = (end-start) + "ミリ秒";
return res;
}
}
 ・・・とする

    後はいつものように
    他に
     ・動的にHTMLを書き込む形式で
var outHTML = "<div class=\"headBox\" align=\"left\">QRコードを<br>簡単に作れ!</div>";
outHTML += "<div class=\"contents\"><form method=\"post\" name=\"partsform\">";
outHTML += " 文字列入力:( URLなど )<br>";
outHTML += " <textarea id=\"srctext\" name=\"srctext\" rows=4>";
outHTML += "</textarea><br>";
outHTML += " <div style=\"text-align:right;\">";
outHTML += " <input type='button' name='bt_go' value='当サイト' onClick=\"javascript:makeqr(9);\"><input type='button' name='bt_go' value='生成!' onClick=\"javascript:makeqr(1);\">";
outHTML += " </div>";
outHTML += "  ⇒ <div id=\"result_metaqcode\"></div>";
outHTML += "</form></div>";
document.write(outHTML);
 ・・・とする。

   □呼び出し
    この「創るmetaboy」ブログから
    ・ブログパーツを貼る感じで、
<link href="*****/makeqcode.css" rel="stylesheet" type="text/css"><script src="*****/extra.js"></script><script src="*****/File.js"></script><script type="text/javascript" charset="utf-8" src="*****/qrcode.js"></script><script type="text/javascript" charset="utf-8" src="*****/js_qcode.js"></script><script type="text/javascript" charset="utf-8" src="*****/makeqcode.js"></script>
 ・・・のように呼び出す。
    ※利用されている他のライブラリで
     最低限必要なものも組み込んでいる。
     ( extra.js, File.js )

     この extra.js が
     「創るmetaboy」に貼った場合は、コンフリクトする。
     残念だが、今回のままでは、ここに貼れない。
     ・・・いづれ改造したし。



 ■公開

   □「創ったmetaboy」に用意。
    「創るmetaboy」のURLを入力してテスト


  「最速インターフェース研究会」さん
  ありがとうございました!
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/843-66f2009b
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。