node.js

Electron + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

投稿日:2016年1月28日 更新日:

はじめに

次のサイトを参考にした.
Electronでクロスプラットフォームのデスクトップアプリを作る
Backbone.LocalStorageをつかったTodoMVCのアプリがそのままElectronで動くぽい.

Backbone.js + Handlebars.js をgulp.jsで結合、コンパイルする
こっちは、gulpでBackbone.jsとHandlebars.jsを結合する記事.

ということで、CoffeeScript + Backbone.js + ecoで、backbone-on-railsぽい環境をgulpで作って、Electronで動かしてみた.

gulpの準備

package.json

gulp.coffee

gulp-concatは、srcを配列で与えると、その順番で結合してくれる.
backbone-on-railsのapplications.jsを参考に、templates、namespace、models、collections、viewsの順番で結合する.
とりあえず、tmp以下にtemplate.jsとapp.jsを作って結合している.

namespace.jsは最初はnamespaceの定義だけだったけど、appの起点にすることにした.
routerは使わないので、namespace.jsから各viewをrenderして動かす.
gulpfile.coffeeは次の通り.

Hello electron

electronのquick startを参考に.
CoffeeScriptなら分割代入ができて便利.

src/main.coffee

適当にindex.htmlを用意して、Electronの起動を確認する.

Hello Backbone.js & eco

まず、Backbone.Viewとecoテンプレートが動くか試してみる.
ecoテンプレートは、JST[‘ファイル名’]で呼び出せる.

github.com/easyPEP/gulp-eco

src/coffee/namespace.coffee

src/coffee/views/hello.coffee

ecoはEmbedded CoffeeScript templates の略.
ecoの開発は止まってるぽい.
github.com/sstephenson/eco
ectなどの開発も止まってるぽいので、今ならhandlebars.jsのほうがいいかも.
ちなみにecoについての過去の記事 > ecoテンプレートでヘルパーを使う

src/templates/hello.eco

これでgulpを実行したあと、Electronを実行して、Hello Worldが2つ表示されればOK

Bakcbone.LocalStorage

今回はBackbone.LocalStorageにデータを保存することにする.
namespace.coffeeでrequire.

そして、collectionとmodelを作る.
localStorage:のつづりやSが大文字のところを間違えると、モデルにurlプロパティがないというエラーが出るので注意が必要.

src/coffee/collections/tasks.coffee

src/coffee/models/task.coffee

Todoアプリ

index.html

Todoアプリは4つの部品をつくることにする.
Taskを入力するフォーム、Taskを表示するリスト、終了したタスクを消去するクリアボタン、Taskの総数や終了したタスク、終了していないタスクの数の表示をするタスクカウントの4つ.
index.htmlでは部品を置く場所にdivやulを作って、そこにecoテンプレートで部品を置いていく.

フォーム

フォームとリストについては、Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-railsのコードをほぼそのまま使った.

namespace.coffee

src/coffee/views/task_form.coffee

src/templates/task_form.eco

これでフォームに何か入力してエンターを入力すると、文字が消えます(localstrorageに保存される.)

リスト

保存したデータをリストに表示します.

namespace.coffee

src/coffee/views/task_list.coffee

src/coffee/views/task_li.coffee

チェックボックスの値はattrで取れなくて、propで.

src/templates/task_li.eco

src/coffee/views/edit_form.coffee

タスクの編集用のフォーム

src/templates/edit_form.eco

リストが表示され、再起動してもリストやチェックボックスの保持され、ダブルクリックでタスクの編集ができればOK

クリアボタン

チェックされたTaskを一気に消去するクリアボタンを設置する.
ボタンクリックすると、done=trueなモデルを削除.
Collection.whereでの返り値はcollectionインスタンスではなく単なるModelの配列.
collection.removeしてみたけど、うまく動かず、_.eachで回して、Modelをdestroyした.
すると、@collectionにremoveイベントが発火してリストが更新される.

namespace.coffee

src/coffee/views/clear_button.coffee

src/templates/clear_button.eco

src/coffee/views/task_list.coffee

removeイベントでリストを再描画する.

クリアボタンを押すと、チェックされたタスクが消えればOK.
下の通り、task_li.coffeeでViewの削除をする.

src/coffee/views/task_li.coffee

やっぱりmodelのイベントを監視して閉じる方が行儀がいいかも

タスクカウント

最後に、全タスク数、終了したタスク数、終了していないタスク数を表示し、リアルタイムで更新する.
@collectionへのイベントを監視すればOK.

namespace.coffee

src/coffee/views/task_count.coffee

changeとremoveを監視する.changeだけでいいかと思ったら、removeを見てくれないみたいで、removeを加えた.

src/templates/task_count.eco

src/coffee/models/task.coffee

このままだとUndoneの数が一致しない.
defaultでundefinedになっていることが原因だから、モデルでdoneのデフォルトをfalseに定義する.

タスク数が表示され、うまく更新されていればOK

できた

screenshot

-node.js
-,

執筆者:

関連記事

デスクトップアプリを作成できるフレームワークをWindowsで触ってみた~Electron

By: Adam Jenkins – CC BY 2.0 目次1 Electron2 前提3 electronのインストール4 Hello World5 パッケージング6 DevTool7 …

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …

Electronでsql.js

By: Dmitry Baranovskiy – CC BY 2.0 目次1 sql.js2 準備3 インストール4 main.coffee5 index.coffee6 index.ht …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …

Electronでmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …