カテゴリー: 05.技術情報

JSONでの改行エスケープ

2011/11/03 7:15 PM

 

JSONを使ったコードを書いていて、改行の扱いでちょっと困ったのでそのことについて。

WebサーバはSAStrutsで書いているが、JSPの場合ならたいてい大丈夫だろう。
以下のような流れになっている。

1. ブラウザ:jQuery.postでWebサーバに検索を要求。
2. Webサーバ:検索結果をJSPでJSON形式で出力(文字列)。
3. ブラウザ:応答を受信。
4. ブラウザ:JSON.parseでデシリアライズ。
5. ブラウザ:jQuery.tmplプラグインで、テンプレートを使って、テキストエリア上に表示。

ところが、応答のJSONの内容に改行が含まれていると、JSON.parseでエラーが発生する。

これは、JSONには、改行コード、ダブルクォートはバックスラッシュでエスケープする決まりがあるからだ。

そこで、改行コード「\n」を「\\n」に置換するタグクラスUtilとメソッドescを書き、JSONを出力するJSPで挟んでみた。
(本当は半角)

public class Util {

public static String esc(String src) {
return src.replaceAll(“\n”, “\\n”);
}
}

このタグクラスとメソッドを、META-INF/Util.tldに定義する。

JSP側では、以下のように書く。

${f:h(util:esc(theValue))}

すると、確かにエラーは収まったが、当のテキストエリアには、「n」と表示されてしまう。

最初の「\」がエスケープされるだけで、「n」はそのまま文字列になってしまうからだ。

正解は、「\n」を「\\\\n」に置換。

こうすると、初回の解釈であるJSON.parseはエスケープされるが、テキストエリア上に表示されるときには「\n」となり、意図通り再現される。

完成形は以下。

public class Util {

public static String esc(String src) {
return src.replaceAll(“\n”, “\\\\n”).replaceAll(“\r”, “”);
}
}

ちなみに、「\r」は削除するが、ダブルクォートは、f:h()を通せば実体参照にエスケープされるので不要。

高品質なWebアプリ構築をめざせ!

2011/09/05 1:29 PM

 

9月より、とあるパートナー企業様向けに、高品質なWebアプリ構築のための講習会を始めることになりました。
広くフィードバックを得て、情報を充実させていくこと、ネットの相互扶助の精神から、講習の内容について公開していきます。
教材として、概略を記したPDF資料、具体的に詳細を記したWiki、サンプルプログラムを用意しています。基本的に講習の終了後にこのサイトにアップしていきます。
講習会は全6回で、かなり多くの要素が入っています。講習会終了後も、このWebサイトでアップデート、追加を重ねて充実させていきます。

この講座に関するツィートのハッシュタグは、#qualifiedwebjp とします。

ご意見、ご指摘などお寄せいただければ幸いです。

講座の目的:

1. 高品質なWebアプリを構築するための、
効率の高い設計・開発手法を体得する
2. ユーザビリティの向上について学び、
質の高いユーザ体験の提供について習得する
3. 具体的なアプリ開発とまとめ資料の作成を通じ、他者に伝える能力の向上を図る

講習内容(予定)
——–

### 第1回 「シンプルさ」とは何か

– 概論:「シンプルさ」とは何か
– 業務ソフトウェアをシンプルに
– MVCの基本
– 高効率Webアプリフレームワーク
Seasar2ファミリ概要
– 安全なWebアプリの構築について
– [トライ] スキャッフォルド(自動生成)を元に基本構成を学ぶ

### 第2回 効率の高い設計・開発

– 基本構成の詳細
– 要求仕様の適用 題材:見積りアプリケーション
– ユーザビリティの高いViewの実現
– SAStrutsが備える基本的なView
– テスト手法
– [トライ] 見積りアプリの作成

### 第3回 ユーザ体験の向上

– ユーザの心理、開発者の心理
– 確実で快適な操作感とは
– jQueryを使用したUIのコントロール
– CSS、JavaScript再学習
– HTML5 APIの活用による利便性の向上
– [トライ] 一覧画面・詳細編集画面の改良

続きを読む »

iOSアプリのAd-Hoc配布方法まとめ

2011/09/04 10:42 PM

 

iOSアプリの配布方法
———–
iOSアプリを開発して、ユーザのデバイスにインストールする方法には2種類ある。

1. App Store経由のインストール
2. ad-hocインストール

1.は、開発したアプリをApple AppStoreに登録し、デバイスもしくはパソコンのApp Store(iTunes)経由でインストールする。大抵のユーザのデバイスにインストールされているアプリは、この方法が取られているはずだ。
しかし、開発中のアプリのテストや一定のユーザのみで使用されるアプリは、AppStoreに登録せずにインストールすることが可能だ。それが、Ad-Hocと呼ばれる配布方法である。

Ad-Hocインストールとは
————–
Ad-Hocインストールとは、Apple Development Programに登録した一アカウントあたり、年間100台まで登録できるデバイス限定で、直接インストールする方法である。
この方法では、メールやWeb経由、もしくは、AppleのiPhone構成ユーティリティで、アプリのインストールを行うことができる。

続きを読む »

Daoについての考察

2011/07/04 9:36 PM

 

データベースのからむアプリケーションを開発するとき、僕が気を付けていること

テーブル数が5個でも、機能数が10を超えるならば、以下のことを避けるようにする。

  1. SQLを文字列としてプログラムで組み立てる
  2. DBで検索したデータを一列ずつオブジェクトにセットする

これらは、

  • セキュリティホールを作ってしまう(SQLインジェクションなど)
  • デバッグ効率が低下する(実行しないとどんなSQLになるか分からない)
  • 似たようなソースが多くなる(言わずもがな)

などといったヤバい状況を作る元となる。
機能は減ることはなく、運用しながら増えていくもの、変わっていくものだから、上記のような組み方を最初にしてはいけない。

続きを読む »

HTML中のSVG要素を出力(dataスキーム使用)

2011/04/08 3:33 PM

 

Protovisなどを使用してHTML画面上に生成したSVG画像を、ローカルに保存したい場合がある。

ローカルのファイルとして保存する実装はブラウザによってさまざまだが、別ウィンドウに出力したものを名前を付けて保存する方法なら、たいていのブラウザでできる。
ここでは、dataスキームを使用する方法を採用、SVGをXML文書として開かせる方法を以下に載せる。

ソース:

/**
* ドキュメント内のSVGを別ウィンドウで出力する。
* 引数svgIndexには、ドキュメント内のSVG要素のインデックスを指定すること。
* (指定しない場合は0。最初のSVG要素とみなされる)
*/
function exportSVG(svgIndex){
    
    if (!svgIndex) {
        svgIndex = 0;
    }

    // SVG要素を取得。
    var svgNode = document.getElementsByTagName(“svg”)[svgIndex];

    // 生成されるXMLにSVGのネームスペースを指定。
    svgNode.setAttribute(“xmlns”, “http://www.w3.org/2000/svg”);    

    // XMLドキュメント宣言
    var svgText = “\n”;

    // 出力するXML(テキスト)SVG要素を追加する。
    svgText += svgNode.parentNode.innerHTML;
    //alert(svgText);
    
    // SVG-XMLを文字列化したものをdataスキームで生成
    // エスケープ(UTF-16文字列はエスケープ解除)
    var data = “data:image/svg+xml;charset=UTF-8,” + UnescapeUTF16Only(escape(svgText));

    // 別ウィンドウ(_blank)に出力
    var svgWindow = window.open(data, “SVG”, “_blank”);
}

function UnescapeUTF16Only(s) {
    return s.replace(/%u\w\w\w\w/g, UnescapeUTF16);
}

function UnescapeUTF16(s) {
    return unescape(s);
}

解説:
ドキュメント内あるSVGは一つとは限らないので、svgタグのインデックスを指定できるようにしている。
また、svg要素に”http://www.w3.org/2000/svg”のXML名前空間(xmlns)を、追加しないと、正しくレンダリングされない。

dataスキームとしてSVGを整形し、別ウィンドウのURLとして指定している。
dataスキームとは、URLの拡張であり、画像、音声など、これまで参照として指定していたデータを、インラインで記述できるリソース指定方法。
これまでの方法では、まず、HTMLをブラウザが解釈、参照先のデータ一つ一つをブラウザが取得しに行っていたため、リクエストのボトルネックがあった。dataスキームを使用すると、最初のアクセスで画像などのリソースが一度に取得できるため、リクエスト数を減らすことができる。
(高速化の基本は、リクエストを最小限にすること)
Webアプリで小さな画像がたくさんある場合など、サーバでのbase64のエンコード負荷とブラウザのリクエスト・ボトルネックのバランスを見て実装すべし。

補足:
Protovisでグラフを描くと、

script type=”text/javascript+protovis”

のブロックの一つ前にspan要素が作られ、その中にsvg要素が生成されるようだ。
ただ、そのsvg要素にはid、name属性などは付いていないので、直接指定はできない。
そのため、このサンプルでは、document.getElementsByTagNameでsvgタグを指定して取得した配列を使用している。

エスケープの部分などを、北島 敦記様のサイトを参考にさせていただいた。
http://www.h6.dion.ne.jp/~lib-k/SVGByJavaScript/SVGByJavaScriptData.html

Protovisで入れ子のForceレイアウト

2011/03/08 2:06 PM

 

Protovisで、バネのようなリンクと、反発力を持つノードを表現したpv.Layout.Forceというレイアウトがある(サンプル)。
このレイアウトの各ノード内に、さらにForceを置いて小宇宙のような表現をしたい。
いろいろ試した結果、とりあえず、入れ子の表現をすることは可能だった。

続きを読む »

Protovisを読んでJavaScriptを知る

2011/03/01 8:04 PM

 

pv.Layout.Forceを改造したクラスを作るために、pv.Layout.Forceをコピーし、NewForceとした。
このNewForceクラスのnodesプロパティの代わりに新しいプロパティclustersを追加することにした。

nodesプロパティは、Forceの親であるpv.Layout.Networkに定義されているのだが、
このnodesプロパティの定義を読んで感心することしかり。
現在のJavaScriptの真髄が隠されている、といっても過言ではないと思う。

これがnodesのプロパティ定義。これはいったい何をしているのか。

続きを読む »

Protovis、svg-edit、JavaScriptなどなど

2011/02/24 12:24 AM

 

最近、JavaScriptを使ったビジュアライゼーションについて調べています。

インターネットで使えるのベクターデータフォーマットとして、SVGが出たのは1998年のこと。サーバで画像を作成しなくてもグラフが表示できるということで、プラグインを入れて試したのは2002年頃のことだったっけ。
今は着々とブラウザに実装(IEは9から)されてきたようです。

このところの仕事で、JavaScriptの可能性について知るところがありました。
ほんのさわりですが、書き留めておきます。
続きを読む »

.Net MVC2でViewModelを使う場合の注意

2011/02/02 11:23 PM

 

フォームから入力された情報をDBに反映するためにUpdateModelを使用する場合、
updateされる側(UpdateModelの引数)も同じ方の階層である必要がある。

ビューモデルとして用意したクラス、ItemViewModelには、
ItemInfoというエンティティのプロパティがあるものとする。

Inherits="System.Web.Mvc.ViewPage
<Models.ItemInfoViewModel>"

などとして、ASPXでViewModelを使用するようにした場合、ItemInfoのプロパティItemNameにアクセスするには
model.ItemInfo.ItemName
などと書かなければならない。

こう書いた場合、レンダリングされたHTMLでは、そのフォーム要素の要素名は
name="ItemInfo.ItemName"
となる。

UpdateModelは、このようにドットによって階層を表現されたフォーム要素を、
ターゲットとなるオブジェクトの階層構造に当てはめる。
(ViewModelを使用しない場合は、単に階層がないだけだ)

[HttpPost]のEdit、つまり、更新処理を書いている時、これが分かってなくて頭を捻った。

続きを読む »

デザインの意味・目的

2009/11/17 2:44 PM

 

業務アプリケーションにおけるデザインの役割

目的:

  • 作業効率の向上
  • 心理:

  • 思考の展開・落着
  • 期待感・達成感
  • 役割:

  • 情報の伝達
  • 機能の実現
  • 見極め:

  • 動と静
  • 視線の動き
  • 手の動き


  • WordPress Themes