23

2013/05

Backbone.js読書会1日目

Backbone.js読書会1日目

Webも徐々にGUIアプリのような振る舞いが求められていく世の中になってきたし、技術的に可能になってきたと。クライアントでそんな振る舞いをしてくれてるのが現状javascriptです。僕たちはどんどんjavascriiptを利用して多種多様な振る舞いをしていかなければいけないけど、現状のjQueryでばんばん書いていくのにも限界がきてるんじゃないか。そのとき、外国で話題になっていたフレームワークをほそぼそと勉強しはじめ、今や業務にまで導入できることに成功しました。(まだ、いろいろ課題はありますが。。。)

そんなときに、満を持して洋書よりも早く日本の書籍がでてしまったので早速基本に振り返るがてらみんなで知識深めようという目的で読書会はじめました。

「Backbone.js ガイドブック」

Backbone.jsガイドブック
Backbone.jsガイドブック

はじめは概要なのですらっと。

一つ話題になったのは、基本は「.extend」を利用してインスタンス用のプロパティを作成していくのが基本だけど、クラス用のプロパティってどこで利用するケースがあるかってこと。

var Parent = Backbone.View.extend(
  {
    instance_p: 1,
    instance_m: function(){ return 'instance_m';}
  },
  {
    class_p: 2,
    class_m: function(){ return 'instance_m';}
  }
    
);

サンプルみただけだとふーんですよね。僕もいまのところふーんです。

ケースとしてはクラスプロパティにテンプレートをぶち込んでおくのがよさげなのかしらね。例えば、Viewが管理している内部でモーダルを管理しているとき。モーダルは基本一つなのでクラスプロパティであらかじめ作成しておけば使い回しがきくと。$(‘modal’)とかで毎回DOMを操作しなくて済む。

ふと思った訳です。

var Parent = Backbone.View.extend(
  {
    instance_p: 1,
    instance_m: function(){ return 'instance_m';}
  },
  {
    modal_template: null,
    class_m: function(){ this.modal_template = $('#modal').html()}
  }
    
);

こんなかんじ。

あと、なんだかんだ実装しながら確認してたら時間かかってしまったので1章の半分くらいで終了。バタリ。

さ。来週もすすめていきますよ。

追記

洋書は今月末にでるようだ。

Developing Backbone.js Applications
Developing Backbone.js Applications

20

2013/05

欲求不満フルリニューアルかけた。 現在、自分で全て管理している「欲求不満(www.frustration.me)」ですが、数年前 にリリースを行い( http://blog.nakajijapan.net/?p=2685 )、デザインのリニューアル、 機能追加が粛々と気の向くままに開発していましたが、ついに3年目にしてソース・デザイン全て リニューアルをかけました。構想は去年の12月から徐々に着手し始めていまして、年初めにはリニューアル できるものかなと安易にかんがえていたけど(仕様そんなに難しくないしねーてきなのり)なかなか 大変で一部機能を削ぎ落しての妥協リリースになってしまいました。。。無念です。あと、これ要らねーだろう っていうやつは消してますけど。

見た目は今時風にしたかったので、それっぽくしました。あとは自分の開発モチベーションあげたいので言語をRubyに変更しました。

内部的には結構細かいことしてまして。

  • デザインをTwitterBootstrapをベースにした
  • ZendFramework(PHP)からRails(Ruby)に対応
  • jsのフレームワークにBackbone.jsを導入
  • APIの検索周りの処理をGem化
  • ユーザの画像一式を全てS3で管理
  • Paasを導入してsqale.jpで管理するようにした

的なことしています。

デザイン

なんか自分で眺めててあきないようにしたくて、いろんなサイトから参考にしましておこぼれちょうだいしてます。 デザイナ不在なので慣れないコーディングを全て自分やることになりましたが大変勉強になりました。あとTwitterBootstrapがなかったらもっとCSSのコーディングが大変になっていたしそこそこのデザインに鳴らなかったと思います。

スクリーンショット 2013-05-16 10.20.30

ちなみに初期のデザインはこれ

frustration

ちょっとは成長しました。。。

Paasはsqale.jp( http://sqale.jp )

スクリーンショット 2013-05-20 3.27.57

弊社サービスで運用しています。 http://sqale.jp で欲求不満を運用するようにしました。 インフラのことは何も考えず、ただひたすらコードをデプロイするだけなので一心不乱にコーディングができるところがすばらしいです。

今後やっていくこと

誰も使わなくても改善していきます!!!!10年使い続けられる物欲管理サービスになります!!

  • Backbone.jsをもっとフル活用する
    • もっと動きをjs側に処理を依存させる
    • よろしくない記述が多々あるのでリファクタリングに励みます。
  • 自分でもっと画像作れるようにする
    • cssでデザインするのには限界ですね
  • jsの動きがまだ見た目的によろしくない箇所が多々あるので修正を行っていきます。
  • 失われた機能を追加します。。。