2010年04月

2010年04月26日

Silverlight:データバインディング入門その1

 Silverlightのデータバインディングを深く理解して使っていたわけではなかったので調べてみた(結果として更に深みに遭遇して結局深く理解できてはいないのだけど・・・)。

データバインディングとは?



 データバインディングはSilverlightのコントロール(Buttonなどのこと)のパラメーターに他のコントロールのパラメーターや変数を関連付ける機能です。

 例えばTextBoxの入力した値を別のコントロールにバインドすると動作は以下のサンプルのようになる。

 サンプルを見る(要Silverlightランタイム3以降)

 サンプルのバインディング部分のコードは以下(説明のために幅や座標のプロパティを省略してあります)、

<TextBox x:Name="textBox1"
  IsReadOnly="True" Text="{Binding Text, ElementName=textBox2}"/>
<TextBox x:Name="textBox2"/>


 上記の実際のMainPage.xamlコードはこちら

 データバインディングを利用しない場合は以下のようなコードになるだろう。

C#コードで書く



 プログラムコードで同様のことをやろうとすると以下のようになるだろう。

public partial class MainPage : UserControl
 {
  public MainPage()
  {
   InitializeComponent();

   this.Loaded += new RoutedEventHandler(MainPage_Loaded);
  }

  void MainPage_Loaded(object sender, RoutedEventArgs e)
  {
   this.textBox2.TextChanged += new TextChangedEventHandler(textBox2_TextChanged);
  }

  void textBox2_TextChanged(object sender, TextChangedEventArgs e)
  {
   TextBox text = (TextBox)sender;
   this.textBox1.Text = text.Text;
  }
 }


 データバインディングの方がシンプルなコードというのは間違いないのだけど、xaml内にこういうコードを書くと、xamlが膨大になったときの難読化が気になる。

 今後、Blendによるバインドや、実行時にコードからバインドする方法も紹介する予定なので、それらを踏まえて自分の(チームの)スタイルに合った方法を取ると良いだろう。

バインディングの作法



 データバインディングのターゲットには幾つかの作法が存在する。


1.FrameworkElementを継承したクラスでないといけない

 バインディングしたい対象が条件を満たしているか確認したい場合は、MSDNのリファレンスが役に立つ(というか大概の場合これで解決する、慣れが必要だけど)。

 TextBoxクラスの場合、対応ページはここ。

 該当記述は以下、

uiframework


 まぁ、大概の表示可能コントロールはFrameworkElementを継承しているのであまり気にする必要は無い。

 ついでにFrameworkElementクラスの概要も見ておく。

 Loadedイベント等の良く使うイベントがここで定義されていることがわかります。
 LoadedはFrameworkElementを継承する各クラスにあり、それぞれのタイミングでLoadedが走るということは、色々とタイミングを確認してみる必要がありそう(ここは後ほど)。


2.依存関係プロパティじゃないといけない

 依存関係プロパティは説明すると長くなるけど、対象のプロパティが依存関係プロパティかどうか判定するにはやはりMSDNライブラリを見ると良い、

depandency


 TextBlockのTextプロパティの場合上のように書いてある。
 簡単!! ・・・のつもりだったけど、
 TextBoxの場合、

is_depandency


 ん、あれ記載が無い・・・・。バインディングはできるんですけどねぇ。
 まだ理解が足りないようです。
 ここら辺がおぼろげにバインディングを使っていたポイントですね。ちゃんと理解できたら後ほどレポートします。

(追記)Webで調べることに固執していましたが、良く考えれば依存関係プロパティかどうかはVisualStudioからそのクラスの定義を見れば一目瞭然でした。
 
例えば上で問題になったTextBoxの場合

public static readonly DependencyProperty TextProperty;


依存関係プロパティ(DependencyProperty)として定義されているのがわかります。ちょっとすっきり、でもreadonly? まだまだ調査は続きそうです。

Blendでバインディング



 Silverlightに限らずRIAを開発するにおいて「デザイナー、プログラマー」の分業、「GUIに特化したツールとコーディングに特化したツール」のすみわけといったことは常に課題であり、正解の無い問題だと思います。

 バインディングに関してはプログラマーの領野だと思うけど、Blendから操作できる(見える)ことは便利なことが多い。

 まずはバインド対象のコントロールを選択する。

 blend_001


 右メニューのPropertiesのText欄の右端の四角をクリック。
 表示されたメニューから「Data Binding....」をクリック。

blend_002


 画像の例はElement(コントロール要素)のPropertyをバインドする例です。

 Data Fieldを選択すればプログラムコード上の値をバインドすることもできます。
 中身をデバックしたい場合に以外と便利かも?

 という感じで、今回はSilverlightのバインディング機能のさわりを紹介しました。
 紹介した中でも色々と課題が出てきましたので次回はその辺をもう少し掘り下げて行きたいと思います。
 

2010年04月16日

Hokuriku.NETをvol3が見えてきました

 Hokuriku.NET勉強会vol3は5月29日開催予定です。
 (もうすぐ申し込みページが公開されるはず)

 元となるWindows7勉強会から数えると4回目ですね。
 このまま勢いに乗ってロングランと行きたいです。

 自分的なVol3は脱coelacanth(私)主導勉強会で、今回は@kabakiyoさんPharaohKJさんなどが動いてくださっており、今までとは違った雰囲気になりそうです。(和室???)

 というわけで、これからHokuriku.NETを盛り上げてくれる方、常連スピーカー(???)担ってくれる方大募集です。

 参加方法は簡単でGoogleグーグルグループの該当ページに参加登録して開催準備をしているメールや、スピーカー募集しているやり取りでご意見くださるだけ!!

 .NETに限らず技術者の勉強会などの交流の役に立つであろうグループもありますのでぜひ有効に活用してください。

 今回のHokuriku.NET勉強会vol3はMSの方、MVPの方、北陸を代表する技術者の方の登壇を予定しておりますよ。
 そしてHokuriku.NET初のMSさんからのノベルティ提供もあります!!!(きっと)

 前回もノベルティあったんですが、k1ha410さんからの頂き物でしたので今回が初正規品(?)となるはずです。

 そんなHokuriku.NETをこれからもよろしくお願いします。

2010年04月14日

Silverligh:JSONデータを扱う(その2)

 その1ではCakePHPからJSON形式で出力、それをSilverlightで取得しました。

 今回はちょっと発展させてLINQを用いて取得したデータを扱ってみました。
 いまだにLINQは慣れないです・・・

 $data = array(
array("name" => "test", "age" => 24)
,array("name" => "mac", "age" => 18)
,array("name" => "foo", "age" => 48)
,array("name" => "hoge", "age" => 27)
,array("name" => "pochi", "age" => 21)
,array("name" => "tama", "age" => 35)
,array("name" => "二郎", "age" => 88)
);


 PHPから出力するデータは上のようなリストです。

 今回はここから特定年齢以下のデータを取得します。

 Silverlightのソースは前回のものからRequesCallbackメソッドを編集したので該当部分だけ抜粋します。

 private void RequesCallback(IAsyncResult result)
 {
  System.Diagnostics.Debug.WriteLine("RequesCallback");

  HttpWebRequest request = (HttpWebRequest)result.AsyncState;
  HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);

  Stream stream = response.GetResponseStream();

  using (StreamReader reader = new StreamReader(stream))
  {
   String request_result = reader.ReadToEnd();

   JsonArray employees = JsonArray.Parse(request_result) as JsonArray;

   var query = from JsonValue older in employees
    where older["age"] < 25
    select new
     {
      name = (String)older["name"],
      age = (int)older["age"]
     };


    foreach (var value in query) {
     System.Diagnostics.Debug.WriteLine(value.age);
    }
  }
 }


 LINQ以外にもC#特有のコードが幾つか含まれてますね。暗黙型付けと匿名型、まだまだC#に慣れる日は来ません・・・。

2010年04月13日

Red5:Red5の勉強会が東京で開催されるようです

 株式会社サイブリッジさん主催で東京でRed5の勉強会が開かれるようです!!
 Red5とかFMSとかひっくりめた勉強会を東京で開いてやるっ!! と虎視眈々と狙っていたのですが先を越されてしまいましたw

 Red5の話が皆さんとできるなんて凄い羨ましい!!
 
 平日の夜というのが地方者には厳しいですが何とか参加できないかなぁ・・・。


 申し込みはこちら
 http://atnd.org/events/4020

Silverligh:JSONデータを扱う

 SilverlightでJSONを扱う必要があったのでメモ。

ローカルのCakePHPでJSON出力



 まずはCakePHPでJSON形式で出力。
 Debug設定を0以外に設定していると出力に余計なものがついてしまうのでJSON形式を使いたいような場合は、

$this->layout = 'ajax';


 とすることで余計な出力をしないようにしておく。
 あとはJavaScriptヘルパーを使いたいので、

public $helpers = array('javascript');


 をコントローラーの変数宣言時に指定しておく。
 今回はとりあえずJSON形式で出力するのが目的なので決め打ち的にViewファイルの中で、

$data = array("hoge" => "dddddd", "hige" => "ひげ");

echo $javascript->object($data);


 これで、以下のような出力を得ることができます。

{"hoge":"dddddd","hige":"\u3072\u3052"}


Silverlightで受け取る



 SilverlightでHTTPリクエストを行う場合、セキュリティ侵害のエラーと出会うことは良くあります。
 VisualStudioからデバック起動する場合もホストは同じlocalhostでもSilverlight起動ポートが異なるためセキュリティサンドボックす障害が発生します。

 これは、

clientaccesspolicy.xml


 を設置することで回避します。
 記述内容はこことかが参考になります。

 SilverlightからHTTP通信するには簡易的なWebClientクラスを用いる方法と、より詳細なHttpWebRequestクラスを用いる方法がありますが、今回はHttpWebRequestを使ったサンプルを載せておきます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;

namespace HttpRequestTest
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
HttpWebRequest request = WebRequest.Create(new Uri("http://localhost/web", UriKind.Absolute)) as HttpWebRequest;
request.Method = "POST";

IAsyncResult asyncResult = request.BeginGetResponse(new AsyncCallback(RequesCallback), request);
}

private void RequesCallback(IAsyncResult result)
{
System.Diagnostics.Debug.WriteLine("RequesCallback");

HttpWebRequest request = (HttpWebRequest)result.AsyncState;
HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);

Stream stream = response.GetResponseStream();

using (StreamReader reader = new StreamReader(stream))
{
System.Diagnostics.Debug.WriteLine(reader.ReadToEnd());

DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Sample));
Sample hoge = (Sample)serializer.ReadObject(stream);

System.Diagnostics.Debug.WriteLine(hoge.hige);
}

}
}
}


 Sampleは受け取り用に定義したクラスで、hogeとhigeのプロパティを持つだけの定義クラスです。

 DataContractJsonSerializerがJSONパースを行うクラスですが、このクラスを使うにはSystem.Service.Web.dllを参照する必要があります。

 Serializerを通すことでマルチバイトも元の形に復元されてクラスに収まります便利っ!!

 という感じでSilverlightでJSONデータを扱ってみました。


参考書籍



 Silverlightのと外部サーバーとのデータのやり取りを調べたい場合書籍ならこれが現在ベスト。
 ASP.NETを知らないと読み難い部分があるがJSONの処理などもしっかり書いてあります。



2010年04月12日

MySQL:Windows環境のコマンドラインでだけ文字化け

 ひさしぶりに色々さわるとはまりますね・・・。

 MySQLをutf-8で利用しており、PHPなどのプログラムなどからは普通に使えるけどコマンドプロンプトで接続して日本語の入ったデータを取得する際に文字化けする場合の対応。

 mysql> SHOW VARIABLES LIKE 'char%';
+--------------------------+----------------------------------------------+
| Variable_name | Value |
+--------------------------+----------------------------------------------+
| character_set_client | utf8 |
| character_set_connection | utf8 |
| character_set_database | utf8 |
| character_set_filesystem | binary |
| character_set_results | utf8 |
| character_set_server | utf8 |
| character_set_system | utf8 |
| character_sets_dir | C:\Program Files\xampp\mysql\share\charsets\ |
+--------------------------+----------------------------------------------+


 プログラム上から日本語が文字化けしない設定が上記ですが、
 コマンドラインから見る場合は接続語に、

set names sjis;


 してあげる。

mysql> SHOW VARIABLES LIKE 'char%';
+--------------------------+----------------------------------------------------
+
| Variable_name | Value
|
+--------------------------+----------------------------------------------------
+
| character_set_client | sjis
|
| character_set_connection | sjis
|
| character_set_database | utf8
|
| character_set_filesystem | binary
|
| character_set_results | sjis
|
| character_set_server | utf8
|
| character_set_system | utf8
|
| character_sets_dir | C:\Program Files\xampp\mysql\share\charsets\
|
+--------------------------+----------------------------------------------------


 となればコマンドプロンプト上で正常に表示されるはず。

 一生懸命に、
 #set names utf8;

 していたのは内緒で。

CakePHP:開発備忘録20100412

 久しぶりにCakePHP1.2をさわったのでメモ。

ルーティング



ルートにアクセスした場合にtopコントローラーのindexメソッドに対応するページを表示したい場合。

app/config/routes.phpを編集。

Router::connect('/', array('controller' => 'top', 'action' => 'index'));


 参考ページ

開発に便利なdebug_kit



 ・ページ表示に利用したメモリ容量を表示することができる。(PHP5だとかなりのメモリを消費していますねぇ。自分の環境だと初期化だけで3.7MB)

 ・Viewに渡された値を見ることができる

 ・SQLクエリのExplainを見ることができる

 などなど、かなり便利ですねぇ。

 debug_kitでできることについてはこのページが秀逸です

SimpleTest導入時にモックテーブル作成時にenum型が無視される




 ・・・enum型問題は結構前からありましたよね。

 SimpleTestでfixturesを設定するとモックDBが簡単に利用できるのですが、該当テーブルにenum型がある場合は注意です。

 対応方法としては型を自動判別させずにコードに指定するか、テストのの度にテーブルをドロップしないで最初に作成したテーブルを使い続けるかが早いですが、テーブルをAlterした場合にfixtureコードを変更したりモックのテーブルもAlterしなければいけない面倒も発生します。

Cashがかなり便利になっている



 CakeのキャッシュといえばViewキャッシュだと思っていましたが1.3はかなり便利にキャッシュを利用できるようになっています。

 このページにあるように、Key-Value的にキャッシュが利用できます。

 これでModelキャッシュも可能ですねぇ。
 素晴らしいです1.2。


JSONがPHP4系でもモジュールインストール無しで使える



 今使っている環境が5.2系なのでPHP4系では試していませんがjavascriptヘルパーで簡単にJSON形式が利用することができます。
 (多分CakePHPなので4系でも使えると思います)

 注意したいのはマルチバイト文字を変換する場合utf-8でないと空文字("")として出力されてしまうこと。
 文字コードはutf-8に直してから渡してあげましょう。

いまだにリファレンスが貧弱



 久々にWebリファレンスを眺めてみましたが、あんまり充実してませんねぇ。
 かなり知名度も成熟度も増したと思うので、もうちょっと詳細な説明があるかと思ったのですが・・・。

 まぁ、いざとなればソースコードを見れば動きが追えるのですが・・・

 個人的にはキャッシュとdebug_kit(拡張ですが)がGoodですねぇ。


Silverlight:開発備忘録20100412

 いじくりまわし中に気がついた点をメモ。

JavaScriptを呼び出す方法



SilverlightからJavaScriptコードを実行する方法。
FlashだとExternalInterfaceクラスを利用するところですね。

Evalの方はApp.xaml.csファイル内にこの書き方をしていたので知りました。

// Evalを実行する
System.Windows.Browser.HtmlPage.Window.Eval("alert(\"test\");");
// こっちが通例
System.Windows.Browser.HtmlPage.Window.Invoke("alert", "hoge");


RootVisualの変更



App.xaml.csファイル内のApplication_Startupメソッド内に下記のように書く。

private void Application_Startup(object sender, StartupEventArgs e)
{
  TextBlock textblock = new TextBlock();
  textblock.Text = "RootVisual";

  this.RootVisual = textblock;
}


UIなら何でもOKということでしょうね。

new のあとのクラス名に()が必須



 ・・・いや、ActionScriptが省略可能なので、よくやるんですよね。

// エラー
Canvas canvas = new Canvas;

// もちろんOK
Canvas canvas = new Canvas();


IDからクラスを取得可能



button_sampleという名前のボタンコントロールが存在する場合、

Button button = (Button)FindName("button_sample");

button.IsEnabled = false;


 以上、忘れないうちに小ネタメモでした。


 (ただいま読書中)
 Silverlightの全体図をさらっと眺めるのにいいですね。
 あとちりばめられたTipsは裏側の実装について書かれていて、コーディングしているだけでは中々気がつかないところまで学べます。


 

2010年04月11日

Re5:クライアントからサーバーのメソッドを呼び出す方法まとめ

 Hokuriku.NETの第三回は5月29日固まりそうです。
 正式に決定しましたらまたアナウンスしますのでお待ちください。

 あとFlexユーザーグループでも、もうすぐ大きなイベントが開催されますので、そちらもこうご期待!!

 宣伝終わり。

 という話とまったく関係なく、Red5サーバーに対してFlashからやり取りする方法をまとめてみました。
 本当はサーバーから呼び出す側も書くつもりだったのですが、量が多くなってきたので次回ということにしました。

 記事を見てみる

http://localhost/site/flash_red5/article_20

2010年04月08日

書籍紹介:SoftwareDesign総集編 2000-2009

 プログラマーになって早4年が経過し、5年目に突入です。
 ずいぶん時間がたった気がしますが、Software Design 総集編はそれを遥かに超える10年分の記事が詰まっています。

 凄いですねぇ。

 本書を手に取るきっかけになったのは2008年1月号のRed5の記事「オープンソースFlashサーバーRed5」を読むため、一時期本屋でバックナンバー探したものですが、こういう形でお目にかかれるとは。

 (Red5について特集された雑誌記事ってこれが唯一なんじゃないでしょうかねぇ。)

 購入動機になったRed5の記事自体は「さわりだけ」という感じでしたが、10年前の記事の特集を眺めてみてもシェルスクリプトやSamba、TCP/IPなどいまだにためになる内容が多いですね。

 新技術の潮流は早いですが、しっかりと枯れた技術を見につけるのも大事だなぁと最近特に感じます。

 10年分の記事を脳にインストールできればねぇ・・・・



Profile

シーラカンス

Recent Comments
QRコード
QRコード
livedoor Readerに登録
RSS
livedoor Blog(ブログ)