2011-12-29

CSS 3D Transforms の参考リンク

あとで自分のブログでも書きたいのでまとめておく。
とりあえずこのあたり見とけば大丈夫っぽい。

WD (仕様)
http://www.w3.org/TR/css3-3d-transforms/

ED (仕様)
http://dev.w3.org/csswg/css3-3d-transforms/

MDN (仕様)
https://developer.mozilla.org/en/CSS/Using_CSS_transforms

3D CSS Tester (ジェネレータを兼ねたデモ。理解の手助けに)
http://thewebrocks.com/demos/3D-css-tester/

24 ways: An Introduction to CSS 3-D Transforms (基礎)
http://24ways.org/2010/intro-to-css-3d-transforms

Understanding CSS 3D Transforms 1 | eleqtriq (基礎)
http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

CSS 3D transforms by Bartek Szopka (デモを兼ねたスライド)
http://bartaz.github.com/meetjs/css3d/

20 stunning examples of CSS 3D transforms | Feature | .net magazine (サンプルや解説のまとめ)
http://www.netmagazine.com/features/20-stunning-examples-css-3d-transforms

2011-12-05

この間ちょっとしたサイトを作ったときのメモ

HTML と CSS は HTML5 Boilerplate をベースにした。
デザインに画像は使わなかった。
小さい画面向けのスタイルを書いて、@media で大きい画面向けのスタイルを追加していくのは予想以上に大変。
投稿のサムネイル画像は横幅が 300px より小さくなるようにしておくといいかもしれない。
ドロップダウンメニューは、タッチ環境ではタップで開閉、マウス環境はホバーで開閉すると使いやすいんじゃないかなーと思う。Modernizr で no-touch があるかどうかで判別したけど、実際どうなのかは知らない。
モバイル向けには文字が少し小さめ(13pxくらい)でもいいけど、ボタンのようなものはパディングを「大きいかな？」という程度に取っておくとタッチしやすい。
user-scale は指定しない。
[1][2][3]...[Next] みたいなナビゲーションはモバイルだとつらい。タッチ精度の悪いデバイスでは特に。
スマートフォンを縦向きで使っている場合 [Prev][Next] みたいなナビゲーションは左右中央のどちらかにまとめるより、[Prev] を左端 [Next] を右端のようにしたほうが操作しすいかも。
iPhone は <input type="file" /> が使えない(らしい)。衝撃だった。
Android は 2.2 以降なら使えるようだ。Windows Phone は分からない。今後対応っぽい？
なので、画像を投稿してもらうタイプのサイトで iPhone 対応するならネイティブアプリ作るかメールでやってもらうしかない。
メール投稿の場合でも iPhone では <a href="mailto:post@example.com">メールアドレス</a> のようなものからは画像が添付できないらしい。画像閲覧アプリからやってもらうしかないようだ。MMS ならいけるっぽいけど容量制限がある。
この辺の話は
http://www.1x1.jp/blog/2010/08/tips_for_receive_email_from_iphone_mms.html
http://www.1x1.jp/blog/2010/08/tips_for_upload_image_from_iphone_safari.html
が分かりやすかった。
メールを受信したら処理して投稿するのには
http://www.phppro.jp/phptips/archives/vol35/1
http://labs.uechoco.com/blog/tag/http_request2
を参考にした。

iPhone について「らしい」とか書いてるのは持ってないから。

2011-11-28

jQuery Lifestream にはてなブックマークを追加したい

jQuery Lifestream
http://christianv.github.com/jquery-lifestream/

見てて面白いなーと思ったので、はてなブックマークも表示してみた。
他のサービスの取得方法がいっぱい書かれてるのでほとんどコピペですけどね……。

(function($) {
$.fn.lifestream.feeds.hatena_bookmark = function( config, callback ) {

  var template = $.extend({},
    {
      posted: 'bookmarked <a href="${link}">${title}</a>'
    },
    config.template);

  var parseHatebu = function ( input ) {
    var output = [], list, i = 0, j, item;

    if ( input.query && input.query.count && input.query.count > 0
        && input.query.results.RDF.item ) {
      list = input.query.results.RDF.item;
      j = list.length;
      for ( ; i < j; i++) {
        item = list[i];

        output.push({
          date: new Date( item.date ),
          config: config,
          html: $.tmpl( template.posted, item )
        });
      }
    }

    return output;
  };

  $.ajax({
    url: $.fn.lifestream.createYqlUrl('select * from xml where '
      + 'url="http://b.hatena.ne.jp/' + config.user +'/rss"'),
    dataType: "jsonp",
    success: function ( data ) {
      callback(parseHatebu(data));
    }
  });
  return {
    "template" : template
  };

};
})(jQuery);

これを jquery.lifestream.js の最後あたりにでも追加して

list = [
  {
    service: 'hatena_bookmark',
    user: 'ub-pnr' // name
  },
  {
    service: 'twitter',
    user: 'ub_pnr'  // name
  }
];

表示するときのコードをこんな感じで書けばいい。アイコンは自分で用意。

わざわざ書くほどのものじゃなかった気がするけど気のせいだと思うことにする。

2011-11-12

WebStorm/PhpStorm メモ - 自動保存を停止したい

ウィンドウが非アクティブになったりしたときに自動保存されるのを停止したい。
そういう場合の設定。

Setteings -> IDE Setteings -> General -> Synchronization
の中にある
Save files on frame deactivation
のチェックを外す。
ちなみにそのすぐ下の
Save fules automatically if application is idle for [15] sec.
は、指定秒数操作しなかったら保存するという設定。

関連して、変更が保存されていないタブにアスタリスクを表示する設定。
Setteings -> IDE Setteings -> Editor -> Editor Tabs -> Tab Appearance
の中の
Mark modified tabs with asterisk
にチェックを入れる。

2011-11-09

id を取る

なんか今さらですけど、気になったので試してみた。

var id = $('#test');

より

var test = document.getElementById('test');
    id   = $(test);

のほうが速い(みたい)。

試したのはこれ。
http://jsperf.com/jquery-id

2011-09-27

cubic-bezier ジェネレータのリンク

使いやすいと思った順に並べてます。

Ceaser - CSS Easing Animation Tool - Matthew Lein http://matthewlein.com/ceaser/
cubic-bezier.com http://cubic-bezier.com/
Visualize and manipulate CSS transition functions http://cssglue.com/cubic
CSS cubic-bezier Builder http://www.roblaplaca.com/examples/bezierBuilder/
Cubic Bezier Timing Function http://www.netzgesta.de/dev/cubic-bezier-timing-function.html
Bezier control http://scope.bitbucket.org/ui-elements/bezier-control/index.xml

2011-09-14

IE10 の text-shadow

http://msdn.microsoft.com/en-gb/ie/hh272902.aspx#_CSSTextShadow

IE10 の text-shadow には spread distance の値があるみたいです。
ということは

h1 {
  font: 18px bold;
  color: white;
  text-shadow: 0 0 0 2px black;
}

で擬似縁取りできたり

h1 {
  font: 18px bold (font-family);
  color: transparent;
  text-shadow: 0 0 0 -1px black;
}

とかで細く見せたりできるんでしょうかね。

2番目はネタとしてもこれは他のブラウザでもできるようになるといいなと思いました。