Branberyheag!! Lab » library

Titanium Mobileでなんかを作ろう

isao — Fri, 03 Feb 2012 06:28:02 +0000

最近、仕事の合間をぬってTitanium Mobileでツールを作っている。せっかくiOSデベロッパーライセンスもあるので、いろいろと作ろう思って、Object-Cで始めるといきなり挫折しそうなので、Titanium Mobileで作ろうと思って、トライアンドエラーでがんばってみる。

わからないことが結構あるけど、ここを見ると結構分かるかも。

http://code.google.com/p/titanium-mobile-doc-ja/

サンプルを見ながら、解析していくのもいいかも。
ひと通りできたら、開発めもぽいものをここにのせて行く予定。

関連した記事

JQuery1.7リリース

isao — Tue, 08 Nov 2011 11:00:43 +0000

いつの間にか、JQuery1.7がリリースしていた。
今回のアップデートは、bind()やlive()に代わる新しいメソッドとかcallbackオブジェクトとかいろいろとアップデートしてるみたい。

JQUERY 1.7 RELEASED

ここを読めば分かると思うけど、一応メモ。

1.bind(), delegate(), live()に代わるon(), off()というものになる。

.on(events [, selector] [, data] , fn);
.off(events [, selector] , fn);

より、直感的になるんだろうと思う。Ginpenさんの記事にあったので、リンク。

2.jQuery.support.fixedPositionを追加

これも便利機能のひとつ。CSSのposition: fixed;を使えるか使えないかの判定ができる。
※検出方法がいろいろとあるらしいけど、こうやってライブラリに入っていると有り難い。

3.Callbackオブジェクトの追加

複数のコールバックを細かく管理できるオブジェクトのようだ。

JQuery 公式ドキュメント「Callbacks Object」
あんまり参考にならない。

Takazudo hamalogさんの
「jQuery1.7で追加された$.Callbacks」

関連した記事

「Phone Gap」が気になる

isao — Mon, 01 Aug 2011 09:48:10 +0000

HTML5/CSS3/Javascriptで作る「Phone Gap」というネイティブアプリが作れるツールがあるみたい。
「Titanium Mobile」とは違い、Webアプリを作る感覚で、簡単に変換してくれるツール。

ノリ的には、HTML/Javascriptで作るAdobe AIRみたいなようなものだ。カメラやファイル、位置情報などの端末の機能にもアクセスできるので、JAVAやObject-Cなどで作ったようなアプリが作れるみたい。

ゲームや簡単ツールを作るには、いいアプリケーションなのかもしれない。

なんか作ってみようかな。

RequireJSを使ってみた

isao — Wed, 13 Jul 2011 09:55:55 +0000

ポートフォリオをつくっていて、どうしてもJava Scriptの読み込みファイルが多くなってしまう。どうしようかな・・・と思っていたら、Require.jsというライブラリを見つけた。非同期でファイルを読み込みをしてくれる便利なライブラリ。早速試してみた。

main.js(名前はなんでも良い)を用意して、この中にロードしたいJSファイルを記述する。


require(

[

'jquery-1.6.min',

'skroll',

'jquery.ba-hashchange.min',

'placedata',

'hoge'

]

);

それからHTML内に

html5のカスタムデータ属性というものを使って、JSリストファイルをインクルードしている。こういうことができると便利だね。

これだけ！

data-main属性の部分は、ちゃんとパスを各必要がある。data-main=”js/main”みたいに。。。
いろいろとインクルードする際は、いろいろと気にかけなくちゃいけない部分があるけど、メモなのでここまで。

とても丁寧に書いている方がいたので、そちらをみたほうが理解できるとおもう。
あと、HTML5が使われているので、宣言文はHTML５のほうが良い。

関連した記事

JQueryプラグイン「skroll.js」

isao — Tue, 12 Jul 2011 04:42:26 +0000

JQureryプラグイン「skroll.js」がとても実用的だったので、メモ。

何が一番魅力的かというとやっぱり読み込みのファイルがひとつでよいということだと思う。試しに今つくっているポートフォリオに実装してみたら、あっさり組み込むことができた。これは、いい。しかも、iOSも対応なので、このプラグインひとつでスクロールは良いということになるね。これをまともに作ったら相当時間がかかる。自分も前に作ったけど大体失敗というか不完全燃焼にに終わっている。

ちなみにライセンスはMITライセンスになっています。

作り込みというかディテールまでしっかりと組まれているので、とても完成度が高い。

デモページはこちら

OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js関連した記事

Raphael.jsでアニメーション

isao — Thu, 23 Jun 2011 02:43:01 +0000

Raphael.jsでSVGをグニュグニュと動かしたいと思って、いろいろとやってみた。

アニメーションメソッドがいくつかあって、これがまたかなりパワフルというか分かりやすい。
種類として、２つあるようだ。
※間違っていたら、ごめんなさい。

シンプルなアニメーション
キーフレームアニメーション
パスに沿ってオブジェクトを動かすアニメーション

ざっと、これが主なものようだ。

1.シンプルなアニメーション


var c = paper.circle(10, 10, 10);
c.animate({cx: 20, r: 20}, 2000);

円が2秒間で大きくなる。

2.キーフレームでアニメーション


c.animate({
 "20%": {cx: 20, r: 20, easing: ">"},
 "50%": {cx: 70, r: 120, callback: function () {…}},
 "100%": {cx: 10, r: 10}
}, 2000);

そのくらい言ったら何をするのか細かく設定ができるぽい。
コールバックも設定可能。

3.パスに沿ってオブジェクトを動かすアニメーション


var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
 e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),
 b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
 e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
 e.attr({rx: 4, ry: 4});
 });
 });

これは、Rapael.jsで出力したパスに沿ってオブジェクト動かせる。
なんとなくFlashにも似ているかも。

パスを書くのにもイラレとか使ったり、自分で打ち込まないといけないけど、細かい設定やアニメーションのモードも便利なものもあるので、
かなりライブラリの恩恵は受けられると思う。

Raphael.jsリファレンス関連した記事

JQuery1.6リリース

isao — Wed, 04 May 2011 15:42:03 +0000

ゴールデンウィークで、遊びほけている間にJQuery1.6がリリースされていた。

大きく変わった点は、以下のとおり。

チェックボックスのtrue/falseでチェックの操作が、attr()からprop()に分離。
JQuryのパフォーマンスの向上。（バージョンアップするたびにあがっていて、すごい）

大きいところでは、こんな感じかなと思う。

あと、

attr(),val()の拡張
JQurey.map()が配列以外にも使える
アニメーションの完全同期

他にもいろいろとバージョンアップしているぽいけど、インパクトの大きいものは、少ないかも。

JQuery Blog

http://blog.jquery.com/2011/05/03/jquery-16-released/

GinPen.com
http://ginpen.com/2011/05/04/jquery1-6/

Shinya Blog
http://shinya-blog.blogspot.com/2011/05/jquery16-attrprop.html

関連した記事

Instagram APIについていろいろと調べてみた

isao — Tue, 08 Mar 2011 10:09:22 +0000

完全に乗り遅れた感じだけど、Instagram API（公式）が出てた。

写真系のSNSでしかも、やりたかったことができそうなので、すぐに食いついてしまった。
コメント、タグ、いいね！、は、できるみたいだけど、写真の投稿は、iPhone,iPodtouchからしかできないみたい。
それでも十分なすぎるくらいの機能なので、気にならない。

Instagramのいいところって、ロケーション機能がしっかりしていること。
これとGoogle Map APIを使って、写真と地図とリアルタイム性ていうのが、すごくひもづけられて面白いかも。

データ取得だけだったら、JSONなので、フロントエンドのみで遊べちゃう。
久しぶりに燃えてきたぞ。

Instagram API ドキュメント
http://instagram.com/developer/

Instagram APIを触ってみる
http://lab.branberyheag.com/wp-admin/post-new.php関連した記事

JQuery Mobile アルファ版リリース

isao — Sat, 16 Oct 2010 14:02:55 +0000

前から気になっていたJQuery Mobileのアルファ版がリリースした。

挙動はなかなかいい感じ。これなら、バックエンドでWebサービスを作ったり、Sales Forceとつなげてアプリケーションが作れそう。
一番気になるのは、Force.comとJQueryの組合わせ。これで、快適でクロスブラウザなアプリケーションが作れてしまうこと。ビジネスやWebサービスを手早く、シンプルにリリースできちゃう。

JQuery Mobile
http://jquerymobile.com/関連した記事

iPhone向けサイトやアプリケーションを作るときに役立ちそうなフレームワークなど・・・

isao — Sat, 11 Sep 2010 16:03:45 +0000

iPhone向けサイト、アプリケーションを作るときに役立ちそうなフレームワークなどをまとめた記事。

iPhone対応のサイト構築のニーズが徐々に多くなってくると思う。Webアプリケーションだったら、何か作れそうだし、いずれ検証機も買うので、何か作ってみたいと思った。

iPhone向けWebサイトの制作等に役立ちそうな情報まとめ関連した記事