DESIRERY » Development http://www.t2-designing.com/blog Sun, 05 Sep 2010 07:12:45 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 jQuery Plugin hovtive 2.1 http://www.t2-designing.com/blog/2010/08/31/450/ http://www.t2-designing.com/blog/2010/08/31/450/#comments Tue, 31 Aug 2010 04:50:57 +0000 Toyoshima http://www.t2-designing.com/blog/?p=450 jQueryプラグインのhovtiveをVersion 2.1にアップデートしました。jQuery1.4.2で動作確認しています。

hovtive 2.0では機能追加と改善をしています。

  1. New: 画像のプリロード(キャッシュに先読み)
  2. Improved: メソッドをlive()へ変更
  3. Fixed: バグフィックス

hovtive 2.1では高速化とバグフィックスをしています。

  1. Improved: eachからforへ変更
  2. Fixed: input:[src]要素でClassを記述していなくてもhovtiveが動いてしまうバグ

2.0では楽にeachでやっていましたが気になったのでforに変更。15倍以上の速度差があったので。他jQuery CoreのContext指定の動作を勘違いしていたためのバグがあったので変更しています。

詳細は後ほど追記します。たぶん。

]]> http://www.t2-designing.com/blog/2010/08/31/450/feed/ 0 jQuery Plugin hovtive 1.1 http://www.t2-designing.com/blog/2010/08/01/431/ http://www.t2-designing.com/blog/2010/08/01/431/#comments Sat, 31 Jul 2010 18:57:39 +0000 Toyoshima http://www.t2-designing.com/blog/?p=431 Mouse Over, Downで画像を入れ替えるプラグインのバグフィックス版です。

以下簡単なサンプル。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>hovtive | DESIRERY</title>
  6. <script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript" src="/hovtive-1.1.min.js"></script>
  8. <script type="text/javascript">
  9. $(function() {
  10. $(".hovtive").hovtive(
  11. {
  12. flag: false,
  13. hover: '_over',
  14. active: '_down',
  15. stay: '_stay'
  16. }
  17. );
  18. });
  19. </script>
  20. </head>
  21.  
  22. <body>
  23. <nav>
  24. <ul>
  25. <li><a href=""><img src="/nav_01_stay.png" alt="HOME" width="69" height="27"></a></li>
  26. <li><a href=""><img src="/nav_02.png" alt="ABOUT" width="69" height="27"></a></li>
  27. <li><a href=""><img src="/nav_03.png" alt="CONTACT" width="69" height="27"></a></li>
  28. </ul>
  29. </nav>
  30. </body>
  31. </html>

基本はaタグにClass hovtiveを追加して$(".hovtive").hovtive();な形で動かしています。1.0から1.1への変更はデフォルトのプロパティを変更しました。上記サンプルの物がデフォルトのプロパティになります。

  1. Flag(boolean):  Mouse Down EventをDisable or Enabled
  2. hover: Mouse Overの画像でファイル名の末尾を指定
  3. active: Mouse Downの画像でファイル名の末尾を指定
  4. stay: Stay表示(HomeであればHome Buttonを表示)の画像名を指定

4のStayについては_stayがファイル名末尾にあればMouse Over, DownのEventは発生しません。ナビゲーションでstay表示をimgタグでする場合ファイル名末尾に_stayといれておけばマウスイベントが起きないため画像の入れ替えはしなくなります。

]]> http://www.t2-designing.com/blog/2010/08/01/431/feed/ 0 フルフラではoutlineを http://www.t2-designing.com/blog/2009/12/18/323/ http://www.t2-designing.com/blog/2009/12/18/323/#comments Thu, 17 Dec 2009 19:28:43 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/18/323/ fullfla

FF13発売だったんですねー。PS3ないけど。外観のデザインがまた変わったら考えよう。

で、ここフルフラッシュのサイトなんですが画面をクリックでスクロールバーが出ます。たまにこういったサイトがあるんだけどFirefoxではoutlineを消さないとこういった残念なサイトになります。Firefoxは対象外ですと言われたらそれまでだけど。回避方法は下記CSSを加えるだけ。

  1. Element {
  2. outline:none;
  3. }

こんな簡単なのでFlashだからと言って動作確認の手を抜きすぎだろ。といった感じが拭えない。その他HTMLではナビゲーションなどfloatで横並びした際マウスダウンで落ちるとかあったりするけどそれもこれが原因。かといってリンクでoutlineを消すのは場合によって微妙なのでoverflow:hiddenではみ出したoutlineは切れる用にしておけば問題ないです。

]]> http://www.t2-designing.com/blog/2009/12/18/323/feed/ 0 jQuery Twitterプラグイン http://www.t2-designing.com/blog/2009/12/16/319/ http://www.t2-designing.com/blog/2009/12/16/319/#comments Wed, 16 Dec 2009 14:58:28 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/16/319/ tweenelalpha

tweenelをブログに貼りつけてみた。これはTwitterのAPIを使ってタイムラインを表示するもの。今のところ任意の1ユーザーだけを取得。Twitter自体軽いコンテンツなのでわざわざエリアを作って貼り付ける程でもないかなーということでレイヤー化して今のスペースを壊さない仕様。

今のところアルファ版な位置づけなのでIE対応もしていないです。対応したとしても他のブラウザとは分けると思います。アルファなし、アニメーションもなし。PNGおかしい上に遅いんで多分いろいろ無理。

ベータ版は今年できたらいいなーな感じでゆっくりゆっくり。

]]> http://www.t2-designing.com/blog/2009/12/16/319/feed/ 0 Twitter JSONデータ http://www.t2-designing.com/blog/2009/12/16/317/ http://www.t2-designing.com/blog/2009/12/16/317/#comments Tue, 15 Dec 2009 16:12:07 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/16/317/ TwitterのAPIへユーザタイムラインを要求した場合の戻り。ブラウザでアクセスすると改行がなく見にくかったんで載せときます。JSONは非常にシンプルでXMLより好感が持てますね。

フォーマットJSON、パラメータはscreen_name(Optional)指定とcount(Optional)を1にした場合。

  1. [
  2. {
  3. "favorited":false,
  4. "geo":null,
  5. "in_reply_to_user_id":null,
  6. "in_reply_to_status_id":null,
  7. "in_reply_to_screen_name":null,
  8. "source":"<a href=\"http://www.tweetdeck.com/\" rel=\"nofollow\">TweetDeck</a>",
  9. "user":
  10. {
  11. "profile_background_tile":false,
  12. "description":"= [ me:'Designer',
  13. career:'Geek',
  14. tweet:'Banzaaaaai!' ]",
  15. "statuses_count":87,
  16. "profile_background_color":"DBE9ED",
  17. "followers_count":19,
  18. "geo_enabled":true,
  19. "profile_sidebar_fill_color":"E6F6F9",
  20. "following":false,
  21. "friends_count":11,
  22. "time_zone":"Tokyo",
  23. "profile_sidebar_border_color":"DBE9ED",
  24. "notifications":false,
  25. "favourites_count":0,
  26. "protected":false,
  27. "url":"http://www.t2-designing.com/",
  28. "verified":false,
  29. "profile_text_color":"333333",
  30. "profile_image_url":"http://a3.twimg.com/profile_images/557330395/tw_normal.jpg",
  31. "location":"Tokyo,
  32. Japan",
  33. "name":"Toyotter",
  34. "profile_background_image_url":"http://s.twimg.com/a/1260393960/images/themes/theme17/bg.gif",
  35. "id":4977961,
  36. "utc_offset":32400,
  37. "created_at":"Tue Apr 17 09:58:14 +0000 2007",
  38. "profile_link_color":"CC3366",
  39. "screen_name":"Toyotter"
  40. },
  41. "truncated":false,
  42. "id":6627064652,
  43. "text":"\u304d\u3063\u3061\u308a\u30b0\u30ea\u30c3\u30c9\u3002effect\u306e\u4e92\u63db\u6027\u3092\u6301\u305f\u305b\u3066\u307b\u3057\u3044\u306a\u30fc\u3002JavaScript\u306e\u77e5\u8b58\u304c\u5f31\u3044\u30c7\u30b6\u30a4\u30ca\u306f\u3053\u306e\u8fba\u4e00\u756a\u89e6\u308b\u3060\u308d\u3046\u3057\u3002 http://tweetphoto.com/6356109",
  44. "created_at":"Sun Dec 13 11:43:47 +0000 2009"
  45. }
  46. ]

リンクは勝手にやってねってことっすね。リンクは実装する人がやらないといけないのでURLをPOSTする際は半角スペースなどを入れ区切るのが無難です。それと時間はローカル時間に変換が無難そう。それぞれの時間と見る人のローカル時間並べたいなーってのはアプリ使ってて思うんだけどネタはtime_zoneしかなさそう。

]]> http://www.t2-designing.com/blog/2009/12/16/317/feed/ 0 Dreamweaver 環境設定 http://www.t2-designing.com/blog/2009/12/07/306/ http://www.t2-designing.com/blog/2009/12/07/306/#comments Mon, 07 Dec 2009 14:08:52 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/07/306/ Dreamweaverの環境設定について。文字コードについて数年ボケていたようでメモ。

dwcs3document

ファイルを開いた際metaタグがない場合SJISで開くのが鬱陶しいなーとかどっかのXML書き換えないとだめかなーとか思ってたら新規ドキュメントの「エンコーディングが指定されていない既存ファイルを開くときに使用」のチェックを外すだけでした。

また、MacであればApple Developer Connectionに登録済の場合Xcodeが手に入るのでFileMergeを比較ツールとして使えます。日本語環境には微妙だけど結構使えます。あとはMAMPでMySQLはunicodeに決め打ち。MySQLの設定だけが悪いんだよねこれ。

開発環境「Xcode Tools」付属の差分表示ツール「FileMerge」をUTF-8対応に

dwcs3edit

その他ファイルタイプも設定してます。コードビューで開くにはhtaccessとhtpasswdは入れときます。それに画像についてはビューアを指定。できるだけDreamweaverから離れなくていい環境にしておくと楽。大体そんな感じであとはヒストリーを増やしてるぐらい。Dreamweaverは文字数が多いファイルとFTPが速ければもっといいんだけど。

]]> http://www.t2-designing.com/blog/2009/12/07/306/feed/ 0 jQuery 複数画像のローディング http://www.t2-designing.com/blog/2009/11/20/280/ http://www.t2-designing.com/blog/2009/11/20/280/#comments Fri, 20 Nov 2009 10:32:18 +0000 Toyoshima http://www.t2-designing.com/blog/2009/11/20/280/ JavaScriptで複数画像を読み込む際のローディング処理。全て読み込んでからエフェクトをかけたい場合などで使えます。

ライブラリはいつもどおりjQuery 1.3.2。やり方は単純にloadを使います。1枚画像であればimgタグにonloadが手軽。

下記ソースはeach内で呼び出している関数。XMLを読み込んでループ処理という流れ。

  1. function loadHandler(obj) {
  2. var li = d.createElement("li");
  3. var img = d.createElement("img");
  4. $(img).attr({"src": obj.find("src").text(), "class":"reflect rheight10 ropacity40"});
  5. $(li).append(img);
  6. $("#container> ul").append(li);
  7. $("#container> ul").css("display", "none");
  8. $(img).load(
  9. function()
  10. {
  11. if($("#container> ul").get(0).count-- == 1) rendering();
  12. }
  13. );
  14. }

  1. XML読み込み
  2. lengthをul Elementのcountというプロパティに挿入
  3. eachでloadHandler()呼び出し
  4. DOM Elementの準備とimg要素にloadを追加
  5. 画像を読み込んだならul Elementのcountをデクリメント
  6. countと読み込み完了の回数がそろったら読み込み終了フラグキター
  7. rendering()呼び出して描画

n/nを読み込みました的なローディングはこれで完了。あとはローディング中や読み込み完了後のデザインを当て込むだけ。

]]> http://www.t2-designing.com/blog/2009/11/20/280/feed/ 0 jQuery 何番目かを取得 http://www.t2-designing.com/blog/2009/11/16/274/ http://www.t2-designing.com/blog/2009/11/16/274/#comments Mon, 16 Nov 2009 10:09:36 +0000 Toyoshima http://www.t2-designing.com/blog/2009/11/16/274/ 10分ほどはまりかけたのでメモ。jQueryでクリックしたのは何番目か取得する。

  1. <ul id="id">
  2. <li><a href="#"><img  src="" alt="" width="140" height="88" /></a></li>
  3. <li><a href="#"><img src="" alt="" width="140"  height="88" /></a></li>
  4. <li><a  href="#"><img src="" alt="" width="140" height="88"  /></a></li>
  5. </ul>

  1. function list(obj) {
  2. $("a").click(
  3. function()
  4. {
  5. var dom = $(this).parent().parent();
  6. var id = dom.get(0).id;
  7. var index = dom.children().index($(this).parent());
  8. $(obj).find("cat#"+id+" items:eq("+index+")").children().each(
  9. function()
  10. {
  11. alert($(this).text());
  12. }
  13. );
  14.  
  15. return false;
  16. }
  17. );
  18. }

aタグにイベントを設定することが多いのでそのやり方でn番目を取得。変数indexへ値を入れているメソッドがそれになります。

  1. aタグ(this)からparent()2回でulを選択
  2. ulにchildren()でulの子要素liを選択
  3. liへindex()を使いn番目取得
  4. index()の引数にはaタグ(this)にparent()を使いthisの親要素liを選択
  5. var indexに0を基準にn番目の値が入る

thisを基準に相対パスで指定している感じです。CSSでもこれがほんとほしい。基本上からだけ。下から上ができないっていうのは条件分岐的なことができるCSS 3であってもやっぱり不便。

]]> http://www.t2-designing.com/blog/2009/11/16/274/feed/ 0 jQuery Plugin Hovtive http://www.t2-designing.com/blog/2009/11/15/273/ http://www.t2-designing.com/blog/2009/11/15/273/#comments Sun, 15 Nov 2009 11:40:45 +0000 Toyoshima http://www.t2-designing.com/blog/2009/11/15/273/ hovtive

hovtive

jQuery用のプラグイン、Hovtiveをアップしました。手っ取り早くてきとーに作っていたところ使いまわしたくなったのでプラグインに変更。たいした物でもなく使い道も限られてるのでソースは特に詰めてないです。

このプラグインではロールオーバーの画像処理をします。CSSで言うhoverとactiveの両方に対応。使い方は下記ソースコード参照。

  1. //default
  2. $(d).ready(function(){
  3. $(".hovtive").hovtive();
  4. });
  5.  
  6. //custom
  7. $(d).ready(function(){
  8. $(".hovtive").hovtive(
  9. {
  10. flag: false,
  11. hover: "_over",
  12. active: "_down"
  13. }
  14. );
  15. });
  16.  
  17. /*
  18. デフォルトの設定
  19. flag : true (activeを使わないならfalse)
  20. hover : "_hover" (hoverのファイル名末尾)
  21. active  : "_active" (activeのファイル名末尾)
  22.  
  23. hover activeのファイル名末尾には区切り文字としてアンダーバーと[a-z]の文字が使用できます。
  24. Ex)
  25. $(".hovtive").hovtive({hover: "_over",active: "_down"});
  26. ・ファイル名
  27. nav_01_over.png
  28. nav_01_down.png
  29. */

HTML側ではaタグにclass名「hovtive」を付けて完了。画像のプリロードについては下記リンク先の方法でさっくりできます。

Preloading Images with jQuery

]]> http://www.t2-designing.com/blog/2009/11/15/273/feed/ 0 Google Closure http://www.t2-designing.com/blog/2009/11/06/265/ http://www.t2-designing.com/blog/2009/11/06/265/#comments Fri, 06 Nov 2009 12:50:14 +0000 Toyoshima http://www.t2-designing.com/blog/2009/11/06/265/ GoogleｇがJavaScript開発ツールClosureを公開。JavaScriptはデザイナーであっても軽くは触れないと話にもならないわけでデザイナー視点で触ってみた。

Closure

Closure-Compiler-Service

Closureにはいくつかツールがあるけれども触るとしたらClosure Compilerになるかなと思います。JSの圧縮のほか警告やエラーなども出力してくれる。さらにjQueryやExt、Prototypeなど主要ライブラリも追加できる。これらがブラウザ上で扱えるのですごく手軽。そのほか最適化、フォーマットの項目はデフォルトで問題ないと思います。

そのほかのツールはClosure LibraryとClosure Templates。Libraryは必要に応じて、Templatesはデザイナーでは触ることはないかなーと思います。

]]> http://www.t2-designing.com/blog/2009/11/06/265/feed/ 0