PhoneGapについて
PhoneGapがAdobeに買収されたときいてまた高額な製品かつあまり使えない売り出すのかと心配していたけどそんな心配はしなくてもよさそうです。個人的にはFlexみたいなものをつくられるとエンジニアもデザイナーもつかわないだろうなーなんて思ってましたが、DWという馴染みのあるプラットフォームに組み込んだのは正解な気がします。
http://tv.adobe.com/jp/watch/cs-55-web-premium-feature-tour/9451/
Webデザイナーがスマートフォンアプリケーションを開発できるツールはそろってきた、といったところでしょうか。
生成されるコードはまだみてないですけど、JQueryMobileとのエンジニアの意見などもはいって良い感じになっているんじゃないでしょうか。実際さわってみるといい感じでした。
JQueryMobileの公式スポンサーに名をつらなねていることが気になっていたのですが、JQueryMobileのカスタマイズツールとしてもかなりいいかんじです。CS6からはさらに連携が強化されたみたいなのです。
ちょっと古いですが、さくさくつくれちゃうよ事例です。
http://ascii.jp/elem/000/000/600/600424/
PhoneGapで面倒なAndroidの設定とかxcodeの設定とか自動でやってくれるみたいです。そうゆう話はよくある話なのですが実際やってみると動かないとかよくあり、道具に使われ時間消耗なんてことよくあるのですが、このへんはお金だしてる強みで動かなければサポートに文句言えるのがいいですね。^^;
これからPhoneGapアプリつくるなら過去のバージョンはばっさりぎりすてadobeベースのに乗り換えたほうがなんて思います。adobeに買収されてから2.0までいろいろ迷走したみたいなので古いバージョン使うと運用で泣けるんじゃないか、とか思ったりします。
DWベースで生成されるコードがメンテできそうにないものの可能性もあるので一概にはadobe環境で統一しましょう、ともいえないのですが。
試したら報告します。
HTML5勉強会(8/22)
縁あって今日デジハリで開催されたHTML5勉強会で発表させていただきました。
社外で知らない人の前で技術プレゼンをする機会がなかったのでいろいろ悩み、そしてとてもいいプレゼンとはいえませんでしたが、刺激をもらえた、可能性を感じたなどの感想をいただけたので本当嬉しかったです。
ご清聴いただいた皆様、貴重の場を用意していただきましたHatchUp様ありがとうございました。
あまりいい出来ではないのでどうしようかまよったのですが参考になる人もいるかもしれないのでスライド公開することにしました。
プレゼンで動作させたテストプログラムなどはまた人がさわれる感じになったら公開しようかと思います。
backbone-rails
backbone-railsを試してみました。あまり話題になっていないのでいまいちなのかなとも思ったのですが、なかなか幸せになりました。できることはいかのような感じです。
- Backbone.jsとRailsの組み合わせてScaffoldを作成
- Backbone.jsのModelに適したrestfulなAPIの自動生成
- Backbone.jsのRouterの自動生成
- Viewに対応したUnderScoreのテンプレートの自動生成
導入方法などはgitに書いてあるのでそれ呼んでもらえればと思います。
生成されるコードはRails向けなのでCoffeeScriptです。
まずはExampleのBlogをためしにつくりコードを読むことをおすすめします。
Routerの使い方や効率のよいModelやCollectionの使い方の参考になります。
├── application.js ├── backbone │ ├── bbblog.js.coffee │ ├── models │ │ └── post.js.coffee │ ├── routers │ │ └── posts_router.js.coffee │ ├── templates │ │ └── posts │ │ ├── edit.jst.ejs │ │ ├── index.jst.ejs │ │ ├── new.jst.ejs │ │ ├── post.jst.ejs │ │ └── show.jst.ejs │ └── views │ └── posts │ ├── edit_view.js.coffee │ ├── index_view.js.coffee │ ├── new_view.js.coffee │ ├── post_view.js.coffee │ └── show_view.js.coffee └── posts.js.coffee
Routerと Viewだけ生成したい場合もできます。
rails g backbone:router ${contoller} ${page1} ${page2} ... ${pageN}
これでrouter,view,templateが一気に生成されます。コンテンツ量が多い場合はここで得られる幸せは半端ないと思います。
ただ生成ごとにrouterをoverwriteする仕様なので、routerには最低限のこと以外は書かないほうがいいです。
本番でrails使うかどうかはさておき、開発段階で利用することで、クライアントサイドはかなり効率的に開発をすすめれそうです。
jit.gl.multiple
jitterで複数のジオメトリをぐりぐりしたい。色々方法はありそうだけど、とりあえずいきついたのがjit.gl.multipleオジェクトを使った方法。
すごくざっくり書くとこんな感じ。
- 動かすジオメトリを定義。nameをつける。
- jit.gl.multipleを配置。ターゲットに1.で作成したジオメトリのnameを指定。
- オブジェクトの配置をマトリクスで指定する。
あとは位置を決めるマトリクスをスケールさせたりして動きをつけたり、
jit.gl.multipleに指定するMatrixの数を増やすといろんな動きをつけることができる。
ヘルプをみても使い方がよくわからなかったのだけど赤松先生のサンプルパッチをみて、
ようやく理解できた。
ただ球体をmultipleで並べているだけど、とても参考になった。
とりあえずつくってみました。わかりずらいですが球体をいくつもならべています。
上の例はオブジェクトを動かすのに一つのMatrixのみを使ったのですが、multipleは複数のMatrixを組み合わせて複雑が動きをつくることできます。ちょっとやってみました。
続)javascriptの読み込み順について
前回かいた記事の続編となるのですが、JavaScriptファイルの読み込み順についてです。
そもそもJSの読み込み順が順不同でも大丈夫なような対策はできないかと考えてみました。
順不同で読み込まれた問題となるのは以下ようなパターンです。
- Hoge.view.postを生成使用しようとした場合にHoge.viewsのが定義されてない場合
- クラスを定義したファイルが生成されていない状態でインスタス生成されてしまう場合
1.に関してですがコードの頭に以下のようなコードをうめることで回避することが可能です。
Hoge.Views || = {}
クラス定義前にもし変数が定義されてなければ、その場で定義してしまうという回避策です。
クラスなどを変数にまとめている場合は上記のようなコードをいれることで変数定義より前に読み込まれた場合でもクラス定義を格納することができると思います。
2.に関してですが、アプリケーションのブートをhtml内で行うことで解消できます。
<script type="text/javascript">
$(function() {
var App = new Apps();
});
</script>
すべてのJSファイルの読み込みが完了したタイミングでアプリケーションインスタスが生成されるため、それ以降インスタンスを生成する際にclassファイルが存在しないといったことがおきません。
railsの場合、assetをきっちり設定するのもいいのですが、こちらのほうが汎用的なのでベターかもしれません。
MaxforLiveでMax5からMax6に変更する
Max6を使い始めて安定していることがわかったので乗り換え！！
ところでMaxforLiveでMax6使うにはどうしたらいいのか・・・
公式ページにはいまいちみつからずフォーラムみてたら書いてあった。
環境設定からフォルダを選択しなおせばいいらしい。
試し5で制作したパッチを動作させてみたら無事動いた。
これでGen~で節電パッチをM4Lでも動作させることできます。
Ruby On Rails AssetPipelineで読み込まれるJSの順番指定について
サーバへの負荷を経験するたに1アクセスあたりのコネクション数をできるだけ減らすためにcssやjsを1回で取得できるようにする、というのが最近の当たり前だと思うけど、この作業がけっこう手間だったりする。Ruby On Railsの3.1あたりから実装されたAssetPipelineを使うとasset下にあるJSをまとめて1ファイルにして圧縮をかけてくれる、というかなり便利な機能がある。
ファイルを増やすたびに定義ファイルを更新しなくてもいい、というのは全く幸せなのだが、JSは読み込む順番によっては参照しようとしているオブジェクトがまだよみこまれていないのに参照してしまう、といった現象が発生してしまう。
このあたりの回避策について調べたのでメモ
デフォルトの設定は以下の通り。requireのあとにライブラリ名を記述する、require_tree . がディレクトリ内のJSを圧縮対象になる。
この書き方の場合、最初にJQueryが読み込まれて、そのあとに他のJSが順不同で呼ばれる。
For example, a new Rails application includes a default app/assets/javascripts/application.js file which contains the following lines:
// ... //= require jquery //= require jquery_ujs //= require_tree .
自前でつくったライブラリはどうするのか。力技でいくなら追加するたびにここに記述してもいいけど、ファイル数が増えるとうんざりしそう。
そのファイルをcatしてもいいと思うけどそれだと本末転倒な気もする。
個人的にはファイル追加だけで済ませたい。
公式マニュアルをみるとrequire_directoryを使えばいいよと書いてあったので早速ためしてみた。（といってもかなり前にやったことを書いているわけですが・・・）
この記述の定義の目的はライブラリをよんで、パッケージ化されたライブラリの読みこみ、自分で定義したクラス群、それらを制御するアプリケーションクラス、最終的アプリケーションをブートするmain関数がはいったプログラム、といった順番で読んでほしい、という意図で分けました。
//= require jquery //= require jquery_ujs //= require jquery.transit.min //= require underscore //= require backbone-min //= require underscore //= require_directory ./package //= require_directory ./classes //= require_directory ./Apps //= require_directory ./main
階層はこんな感じです。
├── Apps
│ └── AppView.coffee
├── application.js
├── classes
│ ├── CycleModel.coffee
│ └── CycleView.coffee
├── main
│ └── main.coffee
└── package
└── package.coffee
これベストかというとちょっとわからりませんが現状はこんなところで。
Classの中でも依存関係があったりするのでもうちょっと細かい階層分けが必要になるかもしれません。
他にも色々設定があるのでRailsGuideをチェックしてみださい。
spinejsは自動的に依存関係を解消する仕組みが実装されていました。
簡単に試してみてなるほどと思ったのですが、長くなるのでこのへんで。
