読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

vue.jsでMVVMパターン その8:プロパティの変更監視をして、functionを実行したい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 前回はプロパティの変更に応じて、プロパティを変更してみました。 今回はプロパティの変更を監視して、functionを実行したいパターン。 <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> //jQuer…</html>

vue.jsでMVVMパターン その7:Reactiveプログラミングしたい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 ボタン押すのめんどいから。Reactiveプログラミングで、answerプロパティが自動で変わるようにしてみた。 <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> //jQueryはここでしかつかってな…</html>

vue.jsでMVVMパターン その6:Commandパターンを使ってみる

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 OnClickでイベントを発火させるんじゃなくて、VMにfunctionを書いておいて、Command的に実行する。 でもC#と違って、イベントでもCommandでもthisとかvmとかで、vmの値をいじれてしま…

vue.jsでMVVMパターン その5:VMのプロパティに値をセットする。

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 前回と違って、VM初期化時にdataのプロパティを作っておいて、あとから値を設定するかんじに書き換えてみた。 <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).ready(fun…</html>

vue.jsでMVVMパターン その4:VMのdataをメソッドで作るようにしてみる

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 VMのdataを返すようなfunctionに分けてみました。 <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).ready(function(){ //Model ホントはAja…</html>

vue.jsでMVVMパターン その3:型指定したい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).ready(function(){ var vm = new Vue({ el: "#demo", data: { data1:…</html>

vue.jsでMVVMパターン その2:とりあえずvue.jsを使ってみた。

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 とりあえずvue.jsを使ってみたサンプル <html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).ready(function(){ //Vueを使った場合 //#demo以下にda…</html>

vue.jsでMVVMパターン その1:vue.jsを使わないとき。

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 今回はvue.jsを使わずに、べたべたに書いた時のサンプル。 id振り振りなかんじ。 一番コード量は少ないけど、viewを直接書き換えたりしてて、いやんなかんじですね。 <html> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).</html>…

WebでもBindingしたい!Vue.jsを使ってMVVMしてみる。

タイトルのまま。xamlでいうと、例えばTextBoxとTextBlockのTextを同期したい。 そんな時は方法は3つあって、 1.KeyUpでTextBlock.TextにTextBox.Text突っ込む。 2.Text同士をControl Bindingする。 3.きちんとVMにプロパティ用意して、Bindingする。…

#<Document>の中身を表示する

jQueryで返ってきた object #<Document>の中身をだばっと表示したいときは以下のようにかくと良いです。 var serializer = new XMLSerializer(); alert( serializer.serializeToString( document_object ) ); いままでglobal変数に逃がして、デバッガで確認してた・・・</document>

ProcessingをMetroStyleAppsで

みんな大好きProcessing!Javaは大っキライだけどProcessingはかわいい! http://processing.org/ さらにProcessingにはProcessing.jsっていうJSに移植したバージョンがあります。 http://processingjs.org/あれ。JSだったらMetroStyleApps化できるんじゃな…

SilverlightとHTML5の融合

Silverlight Advent Calendar 2011 21日目の記事だよ! http://atnd.org/events/22001Silverlight Advent Calendar 2011 3回目ですね!(やりすぎ Silverlight 1.0って触ったことありますか? その昔、SLはJavaScriptで開発してたんだよ。 XAMLなんてサクラ…

AptanaでjQueryのintellisenceをOnにする。

タイトルのまんまです。 Preferences > Aptana > Editors > JavaScript > Code Assist > Check jQueryからできます。

Adobe Labs - Spry framework for Ajaxでハマった。。。

最近、JSでちょっといつも使ってるのと違う Spry framework を触っているのですが、見事にハマった。。。。SpryはHTMLの中でループ回したり、置き換えたり、入力チェックとか多機能で便利です。 しかも、prototypeとかjQueryとも今のところ競合してません。…

hack-test

JavaScriptで書かれた認証をハックしていくサイトです。 JSをどれぐらいわかってるか、遊びもかねて面白いです。 http://www.hack-test.com/ちなみに蜜葉は、このサイトを見つけて、さくっと10分くらいでレベル6までクリアしました。

メディクリで作る作品のソフトウェアできた。

テノリオンのループ素材版みたいなのを作りました。 http://eidwinds.com/mitsuba/medicre/html5とかソースに書いてますが、それっぽく実装されただけで、html5ではありません。 オーディオ再生をswfにやらせてるらしい(ぇキーイベントはこんな感じに取って…

AptanaでUTF-8以外のファイルを開く

AptanaでUTF-8以外のファイルを開くと 文字化けしてしまうので[メニュー]−[ウィンドウ]−[設定]を開く。 [一般]−[ワークスペース]を選択。 [テキストファイルエンコード]欄で、shift-jisやEUC-JPを選択。なかったら手入力して、適用。これで、文字化けしなく…

ある数nが素数であるかどうか

任意の整数n>1が素数であるかどうかをチェックするコードを書いてみようと思う。まず、数学的に、nが素数かどうか判断する方法を書き出してみる。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー…

フィボナッチ数列を書いてみた。

フィボナッチ数列っていうのは 1,1,2,3,5,8,13,21 という感じに、今と一つ前の数字を足して次の数字を求める数列。これをJSで書いてみると、 function Fibonacci(x){ var i = 0; var p = 1; var f0 = 0; var f1 = 1; for(i=0 ; i<x ; i++){ //document.write(p+"<br>"); f1 = p + f0; f0 = p; p </x>…

JavascriptとC#の違いを痛感。

silverlightで作りたいものが思いつかず。 でもC#に慣れないと困る。 っということで、前も作った簡易メディアプレーヤーを作っているのだけれども。 スクリプト言語ばっかりやってた蜜葉にとって、コンパイル言語のお堅いところが大嫌いで。「型UZEEEEEEEEE…