<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"><channel><title>Spine / Drkcore</title><link>http://blog.kzfmix.com/Spine</link><description>Programming, Music, Snowboarding</description><language>ja</language><lastBuildDate>Sat, 29 Sep 2012 08:41:47 +0919</lastBuildDate><item><title>Spine.jsでつくるスクラムボード</title><link>http://blog.kzfmix.com/entry/1348875045</link><description>&lt;p&gt;&lt;a href="http://d.hatena.ne.jp/ninoseki/20111203/1322918474"&gt;クライアントサイドフレームワークbrunchでアプリを作ってみた&lt;/a&gt;が面白かったので、&lt;a href="http://spinejs.com/"&gt;Spine.js&lt;/a&gt;で書いてみた。&lt;/p&gt;
&lt;p&gt;&lt;img alt="spine scrum" src="http://www.kzfmix.com/images/blog/sscrum.jpg" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://kzfm.github.com/spine-scrum/"&gt;demo&lt;/a&gt; (&lt;a href="https://github.com/kzfm/spine-scrum"&gt;source&lt;/a&gt;)&lt;/p&gt;
&lt;p&gt;jQueryUIをslug.jsonに含めると&lt;a href="https://groups.google.com/forum/?fromgroups=#!topic/spinejs/ZLZJcGP6c1s"&gt;jQueryが定義されてないというエラー&lt;/a&gt;になるので、application.jsを実行した後に読み込んでいる。&lt;/p&gt;
&lt;p&gt;resizeイベントにバインドすると固まるのでデモではサイズの状態が保存されないようにしているが、&lt;a href="http://jqueryui.com/demos/resizable/"&gt;ドキュメント&lt;/a&gt;見てたらresizeStopにバインドすればいいような気がしてきた。というわけでjQueryUIとの連携のさせ方もわかった。&lt;/p&gt;
&lt;p&gt;ほかにCSSまわりのTipsも勉強になった。cursorプロパティ初めてなのとinline-blockの使いどころとか。もっとCSS覚えなきゃならないことも理解した。&lt;/p&gt;</description><pubDate>Sat, 29 Sep 2012 08:41:47 +0919</pubDate><category>javascript</category><category>Spine</category></item><item><title>SpineのTodoをちょっと書きなおしてGitHub Pagesで公開してみた</title><link>http://blog.kzfmix.com/entry/1348745934</link><description>&lt;p&gt;Spineを使いそうな案件が増えそうなので、ちょっと復習でもしておくかなと&lt;a href="http://blog.kzfmix.com/entry/1334219794"&gt;前にやった&lt;/a&gt;サンプルを動かしてみたらなぜか動かなかった。&lt;/p&gt;
&lt;p&gt;結構な時間を費やしたのち、slug.jsonのjquery.tmplを消せば良いと気づいたのだけど、hem serverはエラーを吐かずに動き続けるので気付かなかったのだけど、おもむろにhem buildをしたところ、エラーが出てきたので解決したのだけど、ココらへんはちょっと不親切かもと思った。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://kzfm.github.com/spine-todo-hem/"&gt;spine todo&lt;/a&gt; &lt;a href="https://github.com/kzfm/spine-todo-hem"&gt;(source)&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;spineはまだまだドキュメントも少ないしサンプルも少ないので試行錯誤を強いられるけど、コードの見通しは良いと思う。僕はCoffeeScript好きなので。&lt;/p&gt;
&lt;p&gt;&lt;p&gt;&lt;div class="awsxom"&gt;
    &lt;a href="http://www.amazon.co.jp/exec/obidos/ASIN/487311554X/ref=nosim/kaerutyuuihou-22"&gt;
    &lt;img src="http://ecx.images-amazon.com/images/I/51dU7xncMJL._SL160_.jpg" align="left" hspace="5" border="0" alt="ProductName" class="image" /&gt;
    &lt;strong&gt;ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;
    Alex MacCaw&lt;br /&gt;
    オライリージャパン / 2940円 ( 2012-06-09 )&lt;br /&gt;
    &lt;br /&gt;
    &lt;br clear="all" /&gt;
    &lt;/div&gt;&lt;/p&gt;&lt;/p&gt;</description><pubDate>Thu, 27 Sep 2012 20:44:41 +0919</pubDate><category>javascript</category><category>Spine</category></item><item><title>Backbone-HangmanをSpine+Flaskで書きなおしてみた</title><link>http://blog.kzfmix.com/entry/1334750243</link><description>&lt;p&gt;Spineはサンプルとかドキュメントがまだまだ少ないので苦労することが多い。sofにも質問が70位しか投稿されてないしね。&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/trivektor/Backbone-Hangman"&gt;Backbone-Hangman&lt;/a&gt;っていうSinatra+Backbone.jsで書かれたよさげなサンプルがあったので、これを&lt;a href="http://spinejs.com/"&gt;Spine&lt;/a&gt;+&lt;a href="http://flask.pocoo.org/"&gt;Flask&lt;/a&gt;で書きなおしてみた。Flaskのほうはさくっと終わったんだけど、Spineで書きなおすのに1週間以上かかってしまった。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="kzfm / spine-hangman"&gt;kzfm / spine-hangman&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img alt="spine hangman" src="http://www.kzfmix.com/images/blog/spine_hangman.png" /&gt;&lt;/p&gt;
&lt;p&gt;今思うと、Spineがわかっていないというよりは、イベントドリブンなコードの読み方がちゃんとわかっていなかったんだろうと。モジュールごとに読んでも混乱するだけで、イベントごとにちょっとづつ組み立てていかなきゃあかんわなと。そういえば、backbone.jsのチュートリアルもそんな感じだったし。&lt;/p&gt;
&lt;p&gt;spine.appはディレクトリが存在するとappオプションで作成できないので適当なディレクトリでスケルトンを作成して中身をmvした。それからFlaskのstaticにbuildされるようにslug.jsonにpublicを追加&lt;/p&gt;
&lt;div class="codehilite"&gt;&lt;pre&gt;  &amp;quot;&lt;span class="n"&gt;public&lt;/span&gt;&amp;quot;&lt;span class="p"&gt;:&lt;/span&gt; &amp;quot;&lt;span class="o"&gt;./&lt;/span&gt;&lt;span class="n"&gt;static&lt;/span&gt;&amp;quot;&lt;span class="p"&gt;,&lt;/span&gt;
  &amp;quot;&lt;span class="n"&gt;dependencies&lt;/span&gt;&amp;quot;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &amp;quot;&lt;span class="n"&gt;es5&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;shimify&lt;/span&gt;&amp;quot;&lt;span class="p"&gt;,&lt;/span&gt; 
    &amp;quot;&lt;span class="n"&gt;json2ify&lt;/span&gt;&amp;quot;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="p"&gt;...&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;


&lt;h3&gt;今回理解したこと&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;独自イベントのトリガーとバインド&lt;/li&gt;
&lt;li&gt;elの使い方&lt;/li&gt;
&lt;li&gt;ecoのロジック&lt;/li&gt;
&lt;li&gt;spine.appとFlaskの連携のさせ方（ディレクトリ構成）&lt;/li&gt;
&lt;li&gt;jQueryとcssを使ったウェブアプリの作り方の理解が甘いこと&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;放置したものはテストのやり方。モデルはまぁ分かるんだけどコントローラーのテストは一度やっておく必要がある。console.logのデバッグは疲れる。&lt;/p&gt;</description><pubDate>Wed, 18 Apr 2012 21:07:23 +0919</pubDate><category>Flask</category><category>Spine</category></item><item><title>SpineのtodoサンプルをSpine.appで書いてみた</title><link>http://blog.kzfmix.com/entry/1334219794</link><description>&lt;p&gt;&lt;a href="https://github.com/maccman/spine.todos"&gt;Spineのtodoサンプル&lt;/a&gt;をSpine.appを使って書いてみた。これは&lt;a href="http://brunch.io/"&gt;Brunch&lt;/a&gt;(Backbone.js)みたいに、モデル、ビュー、コントローラーをバラバラに開発してbuildすると一つのjsファイル(cssも)にアセンブルしてくれるツールですね。テンプレートは&lt;a href="https://github.com/sstephenson/eco"&gt;eco&lt;/a&gt;を使っています。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/kzfm/spine-todo-hem"&gt;spine-todo-hem&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;index.coffeeの役割がわかりづらかったので理解するのにちょっと時間がかかった。&lt;/p&gt;
&lt;div class="codehilite"&gt;&lt;pre&gt;hem model task
&lt;/pre&gt;&lt;/div&gt;


&lt;p&gt;とかやるといっしょにテストのひな形が作られるのとlocalhost:9294/testにアクセスすれば&lt;a href="http://pivotal.github.com/jasmine/"&gt;jasmine&lt;/a&gt;のテストが走るようになっているので使いやすそう。&lt;/p&gt;
&lt;p&gt;そして以下の素晴らしい三部作を読んで&lt;a href="http://sinonjs.org/"&gt;Sinon.js&lt;/a&gt;の便利さに目覚めたので積極的に使っていこうと感じた。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html"&gt;Testing Backbone applications with Jasmine and Sinon – Part 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://tinnedfruit.com/2011/03/25/testing-backbone-apps-with-jasmine-sinon-2.html"&gt;Testing Backbone applications with Jasmine and Sinon – Part 2. Models and Collections&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://tinnedfruit.com/2011/04/26/testing-backbone-apps-with-jasmine-sinon-3.html"&gt;Testing Backbone applications with Jasmine and Sinon – Part 3. Routers and Views&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Spine.Model.AjaxつまりRESTのAPIはFlaskを使おうと思っているんだが、&lt;a href="http://pypi.python.org/pypi/Flask-Restless"&gt;Flask-Restless&lt;/a&gt;を利用するのが手っ取り早くていいかなぁと。&lt;/p&gt;</description><pubDate>Sun, 15 Apr 2012 15:17:10 +0919</pubDate><category>Python</category><category>javascript</category><category>Flask</category><category>Spine</category></item></channel></rss>