日曜ゲームクリエータの日記

ASP.NETでHtmlエディターを実装する

ASP.NETでHtmlエディターを実装する場合、
過去の仕事ではASP.NET AJAX Control Toolkitを利用しました。

ただ、dllを配置したり、web.configを設定したりといろいろ面倒だったりします。

ということで、もう少し楽に実装できないか、調査したところ
jQuery利用という前提ですがCLEditorというｊQueryプラグインを見つけました。
（どのように実装するかはGetting Startedを御覧ください）

TextBoxコントロールをブラウザ上で拡張して、
Htmlエディターを実装するのですが
一つ注意する必要があります。

htmlタグが含まれている状態でpostbackすると
セキュリティ違反で落ちてしまいます。

そのため、javascript側、サーバー側それぞれに
URLエンコードとデコードをする必要があります。

【javascript側】
送信ボタンクリック時にTextBoxに格納されたhtmllをURLエンコードする

<javascript type="text/javascript">
  $(document).ready(function(){
    $("#<%= 送信ボタン.ClientId %>").submit(
      function(){
        var html = 
          $("#<%= TextBox.ClientId %>").val();
        $("#<%= TextBox.ClientId %>").val(
          encodeURI(html)
        );
      });
  });
</javascript>

【サーバ側（vb.net）】
ページロードイベントでTextBoxに格納されたデータをURLデコードする

TextBox.Text = 
  HttpUtility.URLDecode(
    TextBox.Text
  )

参考になれば幸いです。


にほんブログ村

他のドメインのサーバーに対してXDomainRequestでPOSTする実装がなんとか安定・・・

他のドメインのサーバーに対してXDomainRequestでPOSTする実装が
なんとか安定しました。

> XDomainRequestでGAEにpostすると
> 高確率でXDomainRequest#onloadやonerrorのイベントが
> 呼び出されない状態になっています。

これはJS側の実装を下記のようにしたことで
IE9のデフォルト設定によって安定動作する（イベントが発生する）ようになりました。
※パラメータの設定にjQueryのparamを利用しています。
※serverPathに送信するリクエストURLを設定しています。

//callServer
var xhr = null;
var callServer = function(url,param,callFunction){
  if (window.XDomainRequest){
    xhr = new XDomainRequest();
    xhr.onerror = function(){
      alert( "error" );
    }
    xhr.onload = function(){
      alert( xhr.contentType + "\n" + xhr.responseText );
    }
    xhr.ontimeout = function(){
      alert( "timeout.." );
    }
    xhr.open('POST', serverPath);
    xhr.send( $.param({test:'testValue',jan:'あいううえお'}) );//引数にパラメータを設定する
  }
}

GAEサーバー側ではXDomainRequest用に下記を追加実装します。

・"Access-Control-Allow-Origin"などの他に
　"XDomainRequestAllowed"に"1"をレスポンスヘッダに入れる

・リクエストヘッダにContent-Typeが自由に設定できない
　（x-www-form-urlencodedが設定できない）ため
　HttpServletRequest#getReader().readLine()で取得した文字列から
　　1.&　で分割
　　2.さらに = でKeyとValueに分割
　　を行なって、キーと値のセットにする

さらにリクエストヘッダのOriginチェックや
GETは何も返さず、POSTのみレスポンスを返すなどを実装しました。

なんとかIE9をサポートできそうですが・・・
・・・今後も苦労しそうな予感がします・・・

よかったらクリックしてください。


にほんブログ村

XDomainRequestの結果がIEでキャッシュされる？

XDomainRequestからの送られてきたpostのデータをとりあえずGAEの方で
リクエストボディからHashMapに入れなおすことでFireFoxなどと同じように
処理できるようになりました。

で、今後は別の問題が・・・
XDomainRequestでGAEにpostすると
高確率でXDomainRequest#onloadやonerrorのイベントが
呼び出されない状態になっています。

GAEのログを見るとサーブレットが実行され、結果を返している、
インターネットオプションで履歴を「必ずサーバーから取得する」に設定すると
問題が解消することから、IEのキャッシュが原因のようです。


正直、これだけコストがかかるのなら、もう対象サーバブラウザからはず（ry


よかったらクリックしてください。


にほんブログ村

XDomainRequestでPOSTするとパラメータが拾えない・・・ その２

XDomainRequestでパラメータが拾えない現象について
MSDNブログに書かれていました。

XDomainRequest - Restrictions, Limitations and Workarounds

の「4. Only text/plain is supported for the request's Content-Type header」に書かれていました。
英語の成績が悪いので間違っているかもしれませんが、
「クロスドメインではXDomainRequestはContent-Typeを発行しないよ。
　サーバ側でリクエストボディ（request body）をKeyValueにパースする処理をいれてね！」
ということっぽいです。

・・・IEのサポートをしなければ、解決するなぁ・・・（ボソ

よかったらクリックしてください。


にほんブログ村

XDomainRequestでPOSTするとパラメータが拾えない・・・

さくらインターネットにhtmlやjsを置いて、
GAEのサーブレットをPOSTした場合
IE用のオブジェクトXDomainRequestを使うと
パラメータが取得できません。


xhr.send( "test=testValue" );
※req.getParameter("test")で"testValue"が取れずnullになる・・・


req.getReader().readLine();だと読めるのですが
自分でパースしないと行けないんだろうなぁ・・・


よかったらクリックしてください。


にほんブログ村

enchant.jsにアバターシステムを追加できるようになったとか

avatar.enchant.jsが登場!2000万通りの中から君だけのキャラが作れる!?
avatar.enchant.js を追加で読み込むことで
アバターが簡単に使えるようになるらしいです。

直接enchant.jsには組み込まれていないので
ここ（https://github.com/shi3z/enchant.js）より
ダウンロードする必要があるそうです。

性別や服や武器などが設定でき、自分の好きなキャラクタを作れるそうです。
実際にダウンロードして動かしてみましたが、
商用サービスで使用していた素材だけあってクオリティが高いです。

無数のパーツからキャラクタを作成するため、仕方ないことなのでしょうが
イメージのロードに9leapのサーバのPHPをコールする仕様のようです。
外部サーバに依存するため、サーバのメンテナンスなどのタイミングで
アバターが使用できなくなったりしそうですね。
それを差し引いても、十分すぎるサービスですが。


よかったらクリックしてください。


にほんブログ村

TextBoxコントロールでエンターキーを押した時の挙動を設定する（jQuery利用）

asp.netで検索画面を作った際に何も設定しない場合
TextBoxでエンターキーを押すと
HTML上で一番最初のボタンをクリックする動作になります。

「検索ボタン」をクリックした動作をしたいのに
別のボタンをクリックした動作になってしまう・・・
その対策として、
jQueryのkeypressイベントで対象のボタンをクリックする処理を行うと
希望した動作を行えます。

$("#テキストボックスのClientId").keypress(function(){
$("#対象のボタンのClientId").click();
});

[2012/3/27 7:23 追記]
keypressイベント内ではキーコードのチェックも必要です。
上記サンプルコードのままだと、キー入力するたびに
ボタンクリック処理が走ってします・・・
・・・サンプルコードのミス（記述不足）に気づきませんでした。orz




参考になれば幸いです。


にほんブログ村

Webアプリ試作にアイテム表示機能を追加しました。

Webアプリ試作に所持アイテム表示機能を追加しました。
現状ではダミーのアイテムですが、将来的には実際に取得したアイテムを表示できるようになります。
※対応ブラウザはFireFox、Chrome、IE9以上、Safari、MobileSafariです。
　検証していませんがAndroidもいけるかもしれません。

画面上部のITEMアイコンをクリック（タップ）します。



アイテムウィンドウが表示されます。
閉じる場合は、再度、画面上部のITEMアイコンをクリック（タップ）してください。



よかったらクリックしてください。


にほんブログ村

[ExpressWeb]Basic認証（基本認証）でIEだけログインできない

ExpressWeb
で「仮想ディレクトリ」を作成し、「保護ディレクトリ」の設定をおこなって
Basic認証（基本認証）を設定しましたが、IEだと認証が成功しませんでした。

FireFoxやChromeだと正しく認証が成功しますが
IEだと認証失敗後の再認証のウィンドウに「ドメイン名\ユーザID」と不要な情報が
ユーザIDに設定されていました。

いろいろやってみたところ、
「仮想ディレクトリ」の更新で「認証」欄にある「Windows認証」をオフにすることで
IEでも正しく認証ができるようになりました。
（「仮想ディレクトリ」作成時は「Windows認証」がデフォルトでオンになっているようです）

参考になれば幸いです。


にほんブログ村

Webアプリ試作を少し改良しました。

Webアプリ試作を少しバージョンアップしました。



今後の作成方針ですが、
まずはフロントエンドをあらかた作り込んで
それからサーバ側を実装しようと思います。

よかったらクリックしてください。


にほんブログ村