カテゴリー: 高品質Webアプリ構築

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()を通せば実体参照にエスケープされるので不要。

UIの常套句は最善か?

2011/10/21 3:44 AM

 

(連続ツィートを若干編集)

さて、UIの話。

よくある話だが、エレベータの開ボタン、閉ボタンが隣合わせであること。あとから乗ろうとする人に開けてあげるつもりが閉めてしまい、お互いに見つめ合ったままドアが閉まる経験はあるだろうか。隣り合っている引き金が全く異なる結果を招く。

それぞれのボタンの役割はドアを開ける、閉める、という機械的への指令であるが、使う人間にとっては、それがもたらす結果に大きな違いがある。

であれば、ボタンの位置関係、大きさ、さらには押すという操作も変えることが、操作ミスを防ぐことになる。

操作をミスっても、危険な方には転ばないようにする。ところが、ショッピングモールなどのエレベータは、「閉」ボタンを押すまで自動で閉まらない、という運用プログラムの変更で回避するという手段に出る場合も。設置後の交換が困難だから。しかし本来、設置前に判断されるべきこと。

さて、ソフトウェアのUI設計をする上で大切なのは、

1. ユーザを迷わせないこと
2. ユーザのミスを防ぐこと
3. ミスを救済する可能性を残すこと

である。

この3つの要素が適切に検討、設計、実装されていないシステムは、まともに、あるいは、深く使われない。つまり育たない。

続きを読む »

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

2011/09/07 4:36 PM

 

[高品質Webアプリ構築講座のWikiページ](http://rbxbr.net/mwiki/index.php?title=qweb:高品質Webアプリ構築講座 “高品質Webアプリ構築講座”)を作成しました。

[第1回 「シンプルさ」とは何か](http://rbxbr.net/mwiki/index.php?title=qweb:高品質Webアプリ構築講座/第1回_「シンプルさ」とは何か “第1回「シンプルさ」とは何か”)
————————–

本講座の全体を通してのテーマである、「シンプルなシステム構築」の導入です。
シンプルなシステムの構築を行っていくことは、関係者間の利害関係の矛盾を減らし、より長期的な利益につながっていきます。

参考図書として、

[シンプリシティの法則 ジョン・マエダ 著 東洋経済新報社](http://www.amazon.co.jp/s?ie=UTF8&x=0&ref_=nb_sb_noss&y=0&field-keywords=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AA%E3%82%B7%E3%83%86%E3%82%A3%E3%81%AE%E6%B3%95%E5%89%87&url=search-alias%3Dstripbooks#?_encoding=UTF8&tag=rbxbryam-22&linkCode=ur2&camp=247&creative=7399 “シンプリシティの法則”)

[体系的に学ぶ 安全なWebアプリケーションの作り方 徳丸浩 著 ソフトバンク・クリエイティブ](http://www.amazon.co.jp/gp/product/4797361190/ref=as_li_ss_tl?ie=UTF8&tag=rbxbryam-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4797361190 “体系的に学ぶ 安全なWebアプリケーションの作り方”)

を取り上げています。

随時アップデートしていきますが、内容、表現などに関して、ご意見・ご指摘など、お待ちしています。

高品質な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の活用による利便性の向上
– [トライ] 一覧画面・詳細編集画面の改良

続きを読む »



WordPress Themes