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

オリジナル404ページ公開

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

誰得なwエラーページを作りました。
404ページを初め、いくつかのエラーページをこのオリジナルのモノに変更しました。

見て戴ければ分かる通り、JavaScriptがONなら、QRコードが表示されます。
また403および404ページでは、エラーの内容に従ってQRコードも変化します。
是非、JavaScriptをONにした上で、存在しないページやインデックスの存在しないパスにアクセスして、携帯等のQRコードリーダーで内容をチェックしてください。
いや、本当はちゃんと存在するページにアクセスして欲しいんですけどね。

以下、技術情報(興味のない方は読み飛ばしOK)です。

仕様

使用ライブラリ

  • uuCanvas.mini.js ver.2.03
    Canvas描画(IE8以下でCanvasの代わりにVMLを使用して描画)のために使用。
    また一部のDOM操作APIも利用。
  • svgutil.js
    自作。SVGネイティブサポートの判定とSVG関連のDOM操作をちょっとだけ楽にする機能を提供。
  • QRCode.js ver.1.0.1
    ※上記リンク先で公開されている最新版ではない可能性があります。
    JavaScriptでQRコードを生成する基本ライブラリ。
  • QRCodeEx.js
    自作。上記 QRCode.js に機能を追加・補完するもの。
    日本語対応、Canvas対応、SVG対応(要・svgutil.js)など。
    ※日本語対応のために、Escape Codec Library: ecl.jsのコードを一部利用しています。
  • QRCodeExDs.js
    自作。QRCodeEx をさらに機能追加するもの。
    デザインパラメータをあたえることでQRコードの見た目を変えることが可能。
  • append_css.js
    自作。リンク先の記事参照。
  • 404.js 自作。本体。下記参照。

404.js がやってること(概要)

  1. HTMLから<h1>要素の内容と、エラーメッセージ(id="error_message"が指定された要素、class="error_message"が指定された要素、id="dest"が指定された要素を順に検索し、その内容(テキスト)を抽出)を取得。
  2. id="dest"が指定されている要素の親要素をアンカー要素(<a href="〜">)と仮定し、そのhref属性値(=リンク先)を取得。
  3. 1.で取得した、h1の内容とエラーメッセージ、2.で取得したリンク先をテキストとして結合。
  4. 3.で生成したテキストを値としてQRコードを生成。
  5. 4.で生成したQRコードのデータ領域を一部改変
    表示されているQRコードの右下に注目!
  6. QRコードをHTMLにはめこみ。
    エラーメッセージが存在する場合はそれをQRコードの下に再表示。

その他特記事項

  • ページそのものは、MTのWebページ機能で管理・生成しています。
  • 403ページ、404ページは、要求されたパスをPHPの $_SERVER["REQUEST_URI"] で取得し、
    リクエストされたURI **** へのアクセスは許可されていません。
    もしくは
    リクエストされたURI **** は存在しません。
    と表示しています。
  • QRCode.js、QRCodeEx.js、QRCodeExDs.js についての詳細は、機会があれば別途紹介します。

トラックバック(0)

トラックバックURL: http://www.antimon2.atnifty.com/mt5/mt-tb.cgi/81

コメントする

カテゴリ

月別 アーカイブ

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

このブログ記事について

このページは、あんちもん2が2010年5月22日 15:32に書いたブログ記事です。

ひとつ前のブログ記事は「第38回FLOSS桜山勉強会」です。

次のブログ記事は「Google Chart API の QRCode 生成機能で日本語を通す方法」です。

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