かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

WinJS

WinJSのデータバインドでコンバーターを使う(TypeScript使用)

TypeScriptのmoduleにコンバーターを定義する方法です。 WinJS.Binding.converter関数を使ってコンバーターを作成します。 module Converters { export var sampleConverter = WinJS.Binding.converter((value: string) => { return value + value; }); } あ…

Firefox OSのブラウザのボタン背景のグラデーションを削除する

下の画像からわかるように変なグラデーションが入ってしまいます。WinJSのボタン真っ黒のはずなのに! ということでぐぐったら解決方法が書いてありました。 Remove Mobile Firefox Button Gradient とりあえず以下のCSSを追加 button, input[type=button] {…

WinJSをモバイルで見てみる

WinJSで作ったサンプルのheadタグにお約束の一文を追加します。 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes" /> そして、FirefoxOSのエミュレータで先ほどのサイトを見てみると…。 うん。悪くない。</meta>

WinJSのブラウザアプリで画面遷移

WinJSを使ったブラウザアプリで、どうやって画面遷移するのか試行錯誤してました。結論から言うとストアアプリと同じでした…。 ストアアプリからコピーして下準備 Windowsストアアプリのナビゲーションするアプリから、navigator.jsをコピーしてきます。そし…

WinJSのListViewでクリックされた項目に応じた処理をする

TypeScriptでページに対応するViewModelを作ります。今回はリストを持っただけのシンプルなやつ。 ポイントはアイテムが選択されたときに呼び出されるようにするclickプロパティ。WinJS.Utilities.markSupportedForProcessingを呼び出してるところ。これをす…

WinJSとTypeScriptの組み合わせ

WinJSにはTypeScriptの型定義も用意されています。winjs.TypeScript.DefinitelyTypedがそれになります。これを使うとWinJSに用意されてるWinJS.ClassやWinJS.Namespaceとか使わなくても名前空間とかクラス定義ができるのが個人的には性に合ってそうな気がし…

WinJSのRatingコントロールと双方向バインディング

RatingとspanをViewModelを介してバインドしてみたいと思います。 ViewModelは、JavaScriptでバインド可能なようにしておきます。 var viewModel = WinJS.Binding.as({ averageRating: 5 }); 次に、WinJS.UI.processAllの後にデータバインドをします。 WinJS…

WinJSでクラスの継承

WinJS.Class.deriveを使って継承もできるんですね。 使い方は第一引数に継承、第二引数にコンストラクタ、第三引数にインスタンスメソッド、第四引数にスタティックメソッドになるみたいです。ということで、オブジェクト指向でイマイチイメージが使えないAn…

WinJSでクラスを混ぜる

WinJSのWinJS.Class.mixを使うとオブジェクトを混ぜ合わせることができるようになります。 犬と人のキメラ 名前を持って自己紹介出来るオブジェクトと、わんわんと鳴く犬を作ってmixで混ぜ合わせます。 // 自己紹介できる人 var Person = { name: { get: fun…

WinJSでコレクションのバインド

以下の内容を試した感じです。 テンプレートを使ってデータをバインドする方法 (HTML) - Windows app development コレクションの基本的なバインド方法 WinJSでバインド可能なオブジェクトの定義はいろんな方法があるみたいで、上記のリンクではWinJS.Bindin…

WinJSでのクラスの定義とWinJSでバインド可能なクラスの定義方法

WinJSには、クラスを定義するための関数があります。WinJS.Class.defineがそれです。 Personクラスの定義 WinJS.Class.define関数は、第一引数にコンストラクタを渡して、第二引数にインスタンスメソッドを渡して、第三引数にスタティックメソッドを渡します…

WinJSで双方向バインド

特に双方向バインドとかないんですね…。 単一方向のバインドと、コントロールのイベント拾ってバインドのソースに書き戻す。地道な作業です。フォームの入力項目の数が多いとだるい感じですね。 といってもポイントはあります。 WinJS.Binding.as WinJS.Bind…

WinJSで一方向データバインディング

追記 FirefoxだとinnerTextは動かないみたいなのでinnerHTMLを使うのがよさそうです。 データバインド WinJS引き続きやってます。次はデータバインディングです。 データバインディングには、WinJS.Binding.processAll(DOMの要素, データ)という形のメソッド…

WinJSの空のひな形

Firefox OSのFx0買ったんですよ。 HTML5のアプリ作りたいじゃないですか。ということで、どうせならMSの作ってるWinJSで作りたいじゃないですか?(そうでもない?)ということで、WinJSをVisual Studioで始める方法を書いてみます。 プロジェクトの作成 と…