2014年2月20日

ASP.NET MVCでは, プロバイダーという機能があります. この機能を使用すれば, DBを使用したログインの設定などを実装したWebアプリを簡単に実装できます. この機能は, デフォルトの設定では, Microsoft SQL Serverが設定されています. そこで今回は, MySQL及びMySQL互換のDBを設定する方法を説明します.

, , 2014年2月4日

前々回,前回と紹介してきました,Skeleton.jsですが,第3弾となる今日は,前回の最後に少し登場したModelクラスについて詳しくみてみます. プロパティ モデルの重要な要素はプロパティです.モデルのプロパティとはClassのプロパティとして定義するだけでなく,以下のように静的プロパティのpropertiesに列挙する必要があります. [javascript] var MyModel = Skeleton.Model.extends({ constructor: function(){ this.property1 = this.property1 || "property1"; this.property2 = this.property2 || "property2"; } }, { properties: ["property1", "property2"] }); [/javascript] このように,propertiesに列挙することによってproperty1, property2はモデルプロパティとなります.モデルプロパティとなったプロパティはバインドをすることができます. たとえば次のように, [javascript] var mymodel = new MyModel(); mymodel.bind("property1", function(value){ //mymodel.property1に変更が生じた際に呼び出される }); [/javascript] bindメソッドを使い,プロパティの変更にフックできます.また,前回同様,Viewにもバインドできます. [javascript] var MyView = Skeleton.View({ template: [ "div", [ "h1", { "data-bind": […]

, , 2014年2月1日

さて,前回のフロントエンドMVCフレームワーク – Skeleton.js – その1ではSkeleton.jsの基盤となるClassクラスを紹介しました. 今回は,Viewクラスを詳しくご紹介したいと思います. とりあえず使ってみる 手っ取り早くコードを見ていきましょう. [javascript] var MyView = SKeleton.View.extends({ template: [ "h1", {"class": "myview"}, [ "span", "MyView" ] ] }); window.onload = function(){ new MyView.renderTo(document.body); } [/javascript] このように使用します.Skeleton.jsではテンプレートエンジンとしてJsonMLを採用しています. テンプレートもJavaScriptで記述できるため,無用なDOMをHTMLに書く必要もないですし,Viewごとにファイルを分けられるのでJsonMLを使用しています. JsonML JsonMLはXML/HTMLをJsonで表現し,JavaScript上で扱いやすくしたものです. BNFはこんな感じです. element = ‘[‘tag-name’,’attributes’,’element-list’]’ | ‘[‘ tag-name ‘,’ attributes ‘]’ | ‘[‘ tag-name ‘,’ element-list ‘]’ | ‘[‘ tag-name ‘]’ […]

, , 2014年1月24日

さてみなさん,Backbone.jsやAnglurJSなどの名前は聞いたことがあるでしょうか. これらはみな,MVCフレームワークとよばれ,複雑かつ,大量のコードを書かなくては実現できないリッチUIをWebサービスで実現する際にその負担を軽減してくれるものです. 主にMVCフレームワークは複雑なUIを作成するのにとても役に立つ機能を数多く提供していますが,最大公約数的な機能をひとつあげるならば,バインドです. バインドはイベントのバインド,モデルのバインドの2種類あり,両方とも提供されている場合が多いです. イベントのバインドとは,ご察しの通り,onClickなどのDOMイベントをJavaScriptオブジェクトと紐づけることです. モデルのバインドとはID名などをJavaScriptオブジェクトのプロパティに持たせ,それをDOMオブジェクトに反映させることです. 前者はViewとControllerのバインド,後者はModelとViewのバインドと呼ぶことができるでしょう. さて,本題となるSkeleton.jsですが,これもMVCフレームワークです.特徴としては500行程度の非常に軽量なMVCフレームワークだということです. 今回,Qaramellを作成するにあたって,開発しました.今回から数回に分けてこのSkeleton.jsの機能を説明していきます. Skeleton.js – GitHub JavaScriptにもしっかりとしたクラスほしいよね 今回ご紹介する機能はClassです.JavaScriptの有名なライブラリを見ても何らかの形で独自のクラスが定義されていることと思います.JavaScriptはもともとプロトタイプ継承を採用していますが,使い慣れている継承機能を持ったクラスがほしいと思い作成しました. 使用方法 まず,Skeleton.jsを読み込み,そのあと,アプリケーションを書くJavaScriptファイルを読み込みます. [html] <script type="text/javascript" src="skeleton.js"></script> <script type="text/javascript" src="app.js"></script> [/html] 以下,app.js内での作業となります. 継承 Classが提供することは,Classの継承機能をを継承した子クラスを作成することです.ためしに,Classを継承したMyClass1を作成してみましょう. [javascript] var MyClass1 = Skeleton.Class.extends(); var MyClass2 = MyClass.extends(); [/javascript] Classを継承したMyClassはClassと同様に継承機能を保有します. 属性 Classは次の3種類の属性を提供しています. プロパティ 共有プロパティ 静的プロパティ それぞれ,次のように定義します. [javascript] var MyClass3 = Skeleton.Class.extends({ constructor: function(){ this.property = "プロパティ" } […]

CATEGORIES