JavascriptとDOMについての良書が出ました。
DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~
DOMについての良書はそれなりにあるんですが、Javascriptについての良書って、実は結構少ないんです。
今回購入したこの本は、JavascriptおよびDOMについて、実に丁寧に書かれています。
内容もわかりやすく、ステップを踏んで説明されているので、きちんとJavascriptの基本を学びたい人や、DOMを使ってインタラクティブなサイトを構築したい人にうってつけです。
久々に自信を持って他人に進められる参考書が見つかった・・・そんな気持ちにさせてくれる書籍です。
Microsoft Expression Blendで今度はRSSの取得をしてみます。
新規プロジェクトを作成。
[Combo Box]と[Text Block]を配置します。
[Objects and Timeline]パネルでLayoutRootを選択します。
画面右側の[Projects]パネルで[Data]の[+XML]をクリック。
[Add new XML data source]ダイアログが開きますので、取得したいRSSフィードのURLを入力します。
ちなみにRSSフィードの取得に失敗するとエラー画面が表示されます。
続いて、[Properties]パネルで[Common Properties]の[Data Context]のNEWボタンの横にある[Advanced property options]をクリックして、[Create Data Binding]ダイアログを開きます。
Microsoft Expression Blendをちょこちょこと触っています。
今度はデータのバインドのやり方です。
ちなみに画面はすべてMicrosoft Expression Blend RC（英語版）です。
話もRC（英語版）で進めていきますが、ベータ（日本語版）でもそんなに違いは無いと思います（たぶん）
■STEP1
新規プロジェクトを作成。
[ToolBox]にある[Asset Library]からアートボードにつぎの4つを配置していきます。
まず[ScrollViewer]を配置。
これはスクロールバーが出る領域と考えてください。
次に、その中に[TextBlock]を追加。
中に適当に長いテキストを流し込みましょう。できれば[ScrollViewer]の領域をはみ出るくらいに。
※注意点その１
[TextBlock]オブジェクトが[ScrollViewer]内にあることを確認しましょう。
画面左下の[Objects and Timeline]パネルに、オブジェクトの階層が表示されています。
子要素を持つオブジェクト名の左側には白い逆三角マークがついています。
[ScrollViewer]の左側に白い逆三角マークがついており、そこをクリックすると[TextBlock]が表示されることを確認しておきます。
※注意点その２
[TextBlock]のサイズはAutoにします。
[TextBlock]を選択した状態で、画面右にある[Properties]パネルの[Layout]にWidthとHeightがあります。
ここに数字が入っている場合は、その欄の横に[Set to Auto]（四角に矢印が入っているマーク）があるので、クリックしてサイズをAutoにしておきます。
すると、横幅は親要素である[ScrollViewer]の範囲一杯に広がり、縦幅は流し込んだテキストが終わるまでに広がると思います。
次に[Slider]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントサイズを変更できるようにしたいと思います。
画面右にある[Properties]パネルの[Common Properties]があります。
[Maximum]の項目に100と入力。
[Minimum]の項目に5と入力。
[Value]の項目に12と入力。
続いて[Combo Box]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントを変更できるようにしたいと思います。
[Combo Box]の子要素として[ComboBoxItem]を配置します。
[Objects and Timeline]パネルで[Combo Box]と[ComboBoxItem]がツリー上に階層表示されていることを確認して置いてください。
[ComboBoxItem]が[Asset Library]に表示が無かったら、[Asset Library]ウインドウの右上にある[Show All]にチェックを入れれば出てくると思います。
[ComboBoxItem]を選択して、画面右にある[Properties]パネルの[Common Properties]を表示させます。
[Content]欄があるので、そこにフォント名を入力します。例えば、「Arial」とか、「Tahoma」とか、「Courier New」などなど。
Google Ajax Feed APIを使って、livedoor blogからRSSを取得して、別のサーバーに新着情報として表示させていたときのことです。
どうも、キャッシュデータを表示しているんではないか？ ということが頻繁に起こりました。
修正したはずのエントリーが、古いままで表示されたり・・・
削除したはずのエントリーが、表示されたり・・・
All Aboutの「YUI+Google AJAX Feed API」という記事に、回答が載っていました。
引用させていただきますと・・・
GoogleのGAF用サーバーを経由したデータは、通常のプロクシサーバーと同じようにキャッシュされています。したがって、一度キャッシュされたデータは、次にGoogle側でリフレッシュされるまでの間は、もとのRSSが書き換わっていても反映しないことになります。
もし、これをどうしても強制的に書き換えたいというような場合には、URLクエリにダミーを追加する方法なども有効です。(下記では、ダミークエリ「?123」をURLに追記しています。)
だそうです。
そこで、下記のようにソースに手を加えて、いわゆる「キャッシュ騙し」をします。
Microsoft Expression Blendは制御するためのプログラム言語に複数の選択肢があるのが特徴です。
Expression Blend RC（英語版）でもVisual BasicとC#が選択できます。
■Visual Basicの場合
■C#の場合
Microsoft Expression Blendで今度はWMVビデオを追加とコントロールをしてみます。
ちなみに前回でインストールしたExpression Blend RC（英語版）で話を進めていきます。
Menu > Project > Add Existing Item...で、配置したいムービーファイルを追加します。
今回はWMVファイルにしました。
ツールパネルのAsset LibraryのMediaタブに選択したムービーファイルが表示されます。
アートボードにムービーを配置します。
ついでボタンを2つ配置。
イベント・トリガで、ムービーをポーズさせるボタンと、ムービーを再開させるボタンを作成します。
アートボードに配置したボタンには必ず[プロパティ]パネルで名前をつけておきます。
選択ツールでボタンオブジェクトを選択。
左上の[トリガ]パネルでイベント・トリガを追加します。
ポーズボタンを作成するのだったら、Pause。
プレイボタンを作成するのだったらResumeを割り当てます。
これでプロジェクトをビルド、ショートカットのF5でプロジェクトのテストをすれば確認できます。
この要領で、ムービーをストップさせたり、最初から再生させたりするボタンをどんどん作成できます。
Microsoft Expression Blend：RC(英語版)をダウンロードしました。
RC=Release Candidate つまり、リリース候補っていうことで、いよいよ製品版に近づいてきたわけです。
英語版ではありますが、ベータ（日本語版）を使ってみたところ、特にメニューとかが英語に変わっても問題無さそうだったので、RC（英語版）を使ってみることにしました。
インストールするにはベータ（日本語版）をアンインストールする必要があります。
添付されているサンプルがクオリティの高いものになっています。
■Animation Studio
→お絵かきソフトです。
Google Ajax Feed API にFeedControlというクラスが追加されました。
これを使うと何ができるかと言いますと・・・
前回の記事「Google Ajax Feed API を試す（その２）」で日付フォーマットの成型について説明しましたが、このFeedControlというクラスを使用すると、そんなことをわざわざしなくても、勝手に日付フォーマットも成型してくれます。
定型的なフォーマットは3種類。
では、さっそく実行結果を見てみましょう。
Expression Blendの続きです。
今度はコードを記述せず、イベントとアニメーションの基礎をやりたいと思います。
前回と同じように、ボタンとラベルを配置します。
前回はボタンオブジェクトを選択して、右側にある[プロパティ]パネルにある雷マークのついた「イベント」をクリックして、イベント・ハンドラを定義しました。
Expession Blendでは、トリガという機能を使うと、コードを記述しなくてもUI部分の動作をさせることができます。
例えば、ラベルの文字を変えたり、ボタンを色を変えたりすることが、コードを記述しなくてもできるのです。
トリガは2種類あります。
イベント・トリガとプロパティ・トリガです。
イベント・トリガは、ボタンをクリックしたりとかイベントが発生したときに実行されるもの。
プロパティ・トリガは、プロパティの値が変更されたときに実行されるものです。
次の例は、ボタンをクリックしたときに実行されるイベント・トリガです。
まず、アートボードに配置した、ボタンオブジェクトを選択します。
イベント・トリガを作成するには、［組み合わせ］パネルの［トリガ］にある［＋ イベント トリガの追加］ボタンをクリックします。
トリガのオブジェクト（ボタンとかウインドウとかラベルとか）と、対応するイベントがドロップダウンリストで選択できます。
選択したボタンオブジェクトと、イベントにClickを選択することで、ボタンをクリックした際に実行されるトリガになります。
ドロップダウンリストの右下にある、プラス記号のマーク（［新しい値の追加］ボタン）をクリックして、このトリガに対するアクションを追加します。
「使用できる、またはコントロールできるタイムラインが存在しません。タイムラインを1個作成します。」というダイアログが表示されますので、[OK]をクリック。
