JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。

columnの最近のブログ記事

Google Chart API の QRCode 生成機能で日本語を通す方法

| コメント(0) | トラックバック(0)

恥ずかしながら、つい最近まで Google Chart API でQRコードが生成できるの知りませんでした。

ということで、色々試してみました。
↓この画像は同APIで生成したものです。(半角カナで「ハロー ワールド」と表示されます)

ハロー ワールド

普通にURLだけをエンコードするだけなら手軽で簡単なのですが、上記のように日本語や半角カナを入れ込もうとするとちょっとコツが必要だったので、メモを残しておきます。

書式

結論から書けば、書式としては以下の通り。

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=M|4&
choe=Shift_JIS&
chl=%EF%BE%8A%EF%BE%9B%EF%BD%B0...《後略》

(説明の都合上複数行に分割していますが、実際には1行です)

ポイントは2つ。

  • choe
    出力文字コードの指定。「Shift_JIS」を指定。
  • chl
    内容。文字列のエンコードはUTF-8で与えます。

chs(サイズ指定)、cht(「qr」を指定)、chld(エラー訂正レベルと余白のサイズを指定)はドキュメント化されているとおりです。

なお上記では説明のため、指定しているテキストはURIエンコードしていますが、ブラウザのロケーションバーに直接入力する場合は、最近のブラウザならきちんとUTF-8で送信してくれるのでエンコード不要な場合が多いです。ただしHTML中に記述する場合はエンコードした方が無難です。

以下、もう少し技術的に突っ込んだ解説(読み飛ばしOK)。

onkeypressをお行儀良くする追加スクリプト

前エントリー(【提案】onkeypressの正しい併用の仕方!)からの続きです。
ご用とお急ぎでない方は、前エントリーからお読みいただくと、今回このスクリプトを提供する経緯がお分かりになると思います。

onclickとonkeypressの両イベント属性を併用している場合に、onkeypressの挙動をお行儀よく修正する追加スクリプトを提供します。
このスクリプトは、前エントリーで分類した、以下のパターンに対して有効に作用するモノです:

  1. onclick と onkeypress が同時に指定され、その内容が同じの場合

またその時に、そのような箇所を以下のように修正します:

  1. onkeypressイベントハンドラにフィルターをかける

【提案】onkeypressの正しい併用の仕方!

前エントリー(onkeypress、乱用禁止!)からの続きです。
お暇なら、前エントリーからお読みください。

onkeypress イベント属性の正しい指定の仕方を提案します。
主に『onclickと同時にonkeypressイベント属性を指定する場合の正しい指定の仕方』という視点での提案です。
ざっくりとまとめると、対処法としては以下の3パターンがあります。

  1. onkeypressは使わない!(onkeypressの指定を削除する)
  2. onkeypressイベントハンドラにフィルターをかける
  3. その他(個別の対応が必要)

【2007/05/02】追記。

onkeypress、乱用禁止!

| コメント(4)

Webサイト構築やブログのカスタマイズをするにあたり、参考になるサイトを見ていると、よくこんな記述を見かけます。

onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

それがなぜそうであるのか、分かってやっていれば良いのですが、「?とされています」とだけ紹介してきちんと検証していない人、けっこういます。
そもそもこの設定は、アクセシビリティよりもユーザビリティに関する提案です。
しかも。「へーそうなのかー」と何も考えずにそれに倣って設定すると、却ってユーザビリティを悪くします!

私のポリシー (ブログ編)

| トラックバック(1)

私の前職は、SEと呼ばれる部類のものでした。
現在は、Webサイト制作会社にパート勤務をしています。
といってももっぱらシステム担当で、CGI(with Perl)を作ったり既存のCGIを改造したり、PHPで同様にシステムを構築したり、Movable Type(以下MTと略記)でブログシステムを構築したり、といったことがメインです。
要するに、やってることはPG(プログラマ)です。

半年前、このブログを立ち上げるに当たって、一つの方針を立てています。
それは、このブログを私の『Webプログラミングにおける情報発信基地』にする、ということ。

私のポリシー (ブラウザ編)

私は、Operaが好きです。
それだけなら、完全に個人的な趣味の話になりますけれど。

私の使用しているブラウザは、よく使用する順に、Opera、SafariFirefox、その他です。
なお知らない方のために、SafariというのはMacに標準搭載されている、Appleコンピュータ謹製のWebブラウザです。私は自宅ではMacをメインマシンとしているので。
Windowsマシンも持っていますし、仕事では現在Windowsを使用しています。けれど、Windows標準の、
「世界で最も使用されているWebブラウザ」(以下、MSIEと称します)は、ほとんど使用していません。
その理由、そのキーワードになるのは、『標準準拠』。

私のポリシー (HTML編)

| トラックバック(1)

私って「技術屋」だな、と、よく自分で思います。
例えば、「動けばいいや」という妥協ができないこと。
どうしてそうなるのか、どうしてそれで動くのか、その原理や意味を考えてしまうのです。
そして「本来の意味」が分かると、それを大切にしたいと思ってしまいます。
本来の意味にそぐわない使い方がされていれば、よりふさわしいモノ置き換えたり、覚えた使い方はなるべく活用してあげようと思ったり。
換言すると、「理論屋」とも言えるかも。

その典型例が、HTMLとCSSについて。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちcolumnカテゴリに属しているものが含まれています。

前のカテゴリはAjax/JavaScriptです。

次のカテゴリはdraftです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて