2012-04-27

WebStorm/PhpStorm メモ - Sass コンパイル時の出力先

External Tool の設定方法はメインのブログで書いた WebStorm / PhpStorm から Sass をコンパイルするを見てもらうとして、今回はその出力先を設定する方法。

上記リンク先のように

"$FilePath$":"$FileDir$\$FileNameWithoutExtension$.css"

でやると、SCSS ファイルが置いてあるのと同じディレクトリに CSS ファイルが出力される。ただ、これだとファイルの管理がめんどくさいので、ディレクトリ構造を以下のようにしたい。

css/
├ scss/
│ └ style.scss
└ style.css

css/scss/style.scss をコンパイルしたら css/style.css に出力してほしいわけです。その設定ですが、External Tools の設定でパスの指定を次のようにします。

"$FilePath$":"$FileDir$\..\$FileNameWithoutExtension$.css"

同様に、

include/
├ scss/
│ └ style.scss
└ css/
   └ style.css

みたいな場合は

"$FilePath$":"$FileDir$\..\css\$FileNameWithoutExtension$.css"

で大丈夫です。

@azu_reさんありがとうございました。

2012-04-17

画像置換のあれ

元記事 http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
紹介記事 http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html

元記事の最後にこういう文があります。

Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.

で、元記事に寄せられた Paul Irish によるコメント。

Over at the HTML5 Boilerplate project we’re taking a look at this. So far, we’re unable to reproduce the performance advantage on modern hardware. It may just join the ranks of css gradients and box shadows as things to avoid on old hardware before things like the webkit-box-shadow perf fixes went in. http://wkb.ug/22102
https://github.com/h5bp/html5-boilerplate/issues/1005 We’re still investigating…
But to put this into perspective, removing one script tag from your head would have, at a minimum, around 300x more impact than this reflow optimization. But if you’re optimizing reflow on iPad 1 devices, then it’s certainly worth looking into.

超適当に言うと「HTML5 Boilerplate プロジェクトで話し合った結果、最近のハードウェアだとパフォーマンス上の利点は見つからなかった。でも初代 iPad に最適化するという視点から見たら価値がある」みたいな感じです。
(この訳があってるかは知らない)

このテクニックの良し悪しはともかく、一応元記事は見たほうがいいんじゃないかなーと思いました。

追記：
補足してもらいました。
http://terkel.jp/archives/2012/04/css-image-replacement-2012/

2012-03-27

ツールチップにリンク先のドメインを表示する

以前スラドがリンク先のドメインを表示してるのを見て便利かもなーと思った。
けど自分で使う場合に地の文に出すのはちょっと……となって、ならツールチップ使えばいいんじゃねと考えて作ってみた。

http://unformedbuilding.com/demo/test/20120327/

さすがに装飾を施したツールチップは邪魔なのでブラウザデフォルトのものを使った。つまり title 属性を作って入れた。
じゃあ最初から title 属性があるものはどうするんだ、となるので、そっちには何もしないことに。最初からある文字列に追加してもいいけど長くなるのでやめた。

一応、内部リンクを除くために http と ftp から始まる URL のみにした。
同様の理由で除外ドメインを指定できるようにしてある。

jQuery(function ($) {

  var exclude, excheck;
  exclude = ['www.bing.com', 'www.yahoo.co.jp'];
  excheck = function (url) {
    for (var i = 0; i < exclude.length; i++) {
      if (url === exclude[i]) {
        return true;
      }
    }
    return false;
  };

  $('#target').find('a').each(function () {
    var tip = $(this).attr('title');
    if (!tip) {
      var url = $(this).attr('href');
      if(url.match(/^(https?|ftp)/)) {
        url = url.replace(/^(https?|ftp):\/\/([0-9a-zA-Z\.\-_]+\.[0-9a-z]+)\/?.*$/, '$2');
        if (!excheck(url)) {
          $(this).attr('title', url);
        }
      }
    }
  });

});

向こうのブログに書く必要もないというか、そもそもちゃんと試してないのでこっちに置いとく。

追記：

http://twitter.com/hell2u/statuses/184461790657249280
ということなので title 属性の有無に関わらず表示するようにした。
最初から入ってる title 属性値の直後に改行を追加する(Firefox は12からだそうで、今はだめ)。

http://unformedbuilding.com/demo/test/20120327-2/

2012-03-18

Twitter で CSS や Sass の@なんちゃらを書いちゃった時のリプライ先

調べた日：2012年3月18日

まあ@なんちゃらってツイートするときは代わりに at-foo みたいに書くか、@ の直後にスペースとかゼロ幅文字( / &zwj; / &zwnj;)とか入れるといいんじゃないですかね。

@charset https://twitter.com/#!/charset
活動中。

@media https://twitter.com/#!/media
最終投稿：2011年6月25日

@import https://twitter.com/#!/import
凍結されてた……。

@font(-face) https://twitter.com/#!/font
活動中。ウェブフォントのアカウントっぽい。

@counter(-style) https://twitter.com/#!/counter
投稿なし。

@region https://twitter.com/#!/region
最終投稿：2008年10月10日

@namespace https://twitter.com/#!/namespace
最終投稿：2012年2月29日活動中だと思う。

@page https://twitter.com/#!/page
活動中。

@keyframes https://twitter.com/#!/keyframes
活動中。

@phonetic(-alphabet) https://twitter.com/#!/phonetic
活動中。

@document https://twitter.com/#!/document
活動中。

@viewport https://twitter.com/#!/viewport
最終投稿：2012年2月14日活動中だと思う。

@supports https://twitter.com/#!/supports
投稿なし。

ここから Sass

@extend https://twitter.com/#!/extend
最終投稿：2010年10月20日

@debug https://twitter.com/#!/debug
投稿なし。

@warn https://twitter.com/#!/warn
最終投稿：2011年8月25日

@if https://twitter.com/#!/if
活動中。

@for https://twitter.com/#!/for
最終投稿：2012年2月28日活動中だと思う。

@each https://twitter.com/#!/each
ツイートなし。

@while https://twitter.com/#!/while
最終投稿：2012年1月19日活動中だと思う。

@mixin https://twitter.com/#!/mixin
最終投稿：2011年10月26日

@include https://twitter.com/#!/include
活動中。

2012-02-14

PS3 v4.10 ブラウザで画像アップロードができない件の続き

PC でファイルサイズを変えたり、画像解像度を変更したりして色々やってみたけど、どれも上手くアップロードできた。
自分の結論としては PS3 で撮ったスクリーンショットはゲームでもブラウザのスクリーンショットでもアップロード不可というもの。

500kb のウェブサイトスクリーンショットはできず、PC で加工した 700kb のゲームのスクリーンショットはアップロードできた。
同様に横 1090px のウェブサイトスクリーンショットはできず、PC で加工した横 1090px のゲームのスクリーンショットはアップロードできた。

PS3 から PC へ移動して、少し画像を変更(解像度ちょっとだけ下げるとか)したものは PS3 からアップロードできた。
PS3 → PC → PS3 で未加工の場合はダメ。

というわけなので、ファームウェア v4.10 の PS3 でスクリーンショット撮って直接アップロードしたりメールに添付したりするのは諦めたほうがよさそうです。
大人しく USB メモリ使うしかないんじゃないですかねー。

02/15追記
スクリーンショット画像をテキストエディタなんかで開くと「PlayStation」の文字が入ってるので、それを判別してるのかもしれない。
Vita からは加工しなくてもそのままアップロードできるようだ。

03/30追記

スクショ取る
メッセージに添付して自分のサブアカに送る
サブアカで画像を保存
任意のアカウントでアップロード

PC ない場合はこれで対応できる。

2012-02-09

PS3 v4.10 のブラウザで input type=file が変

昨日(02/08)、PlayStation 3 のファームウェアのアップデートがあって、ブラウザが新しくなった。
PS3、ファームウェアv4.10からWebKitへ。 - あまたの何かしら。

そのブラウザで、たとえば PS3 で撮ったスクリーンショット画像をアップロードしようとしたができない。
自分でやってるサイト、Yahoo!メール、Gmail で試したが、どれも失敗した。

普通のアップロードフォームと Gmail は、送信ボタン(type="submit") を押したらローディングアイコンがずっと表示されたままになり、[中止] をするしかなかった。
Yahoo!メールでは「画像が選択されていません」になって送信不可。

上のような内容で問い合わせをしたら回答は次のようなものだった。

PS3はインターネットブラウザーをご利用いただき、パソコンなどに
向けて作成されている一般的なウェブサイトをご覧いただけますが
各サイトが求める推奨環境に完全に適合していない場合があり
正常に表示できない、また機能が利用できないことがございます。
システムソフトウェアバージョン4.10にて
インターネットブラウザーの表示機能について変更がございましたが
各ウェブサイトの動作については個別に動作確認をおこなっておりません。
そのため、お知らせくださいました症状については
お客様へご案内できる情報がございません。
なにとぞご了承くださいますようお願いいたします。
しかしながら、お寄せいただいた内容は担当部署に申し伝え
今後の参考にさせていただきます。
今後も、皆様からお寄せいただくご意見、ご希望を参考に
より多くのお客様にご満足いただける商品の開発に努力してまいります。

一応、自分のサイトのフォームは前のバージョンのブラウザでは正常にアップロードできていた。
他、デスクトップブラウザでも不具合は起きていない。

続き：http://d.hatena.ne.jp/ub-pnr/20120214/1329221187

2012-01-23

CSS linear-gradient()

ちょっと前に書き方が変わったので表示テストしてみた。

http://unformedbuilding.com/demo/test/20120123-linear-gradient/

to ありキーワードの方は Opera 11.60 / Aurora 11.0a2 で表示されたのを確認。古い書き方でも大丈夫。
webkit は駄目っぽい。Chrome 18.0.1016.0 canary で見てみた。
IE10 PP4 はないから分からない。
@hell2u さんが試してくれましたが、IE10 PP4 駄目でした。

angle (角度指定) はどれも古い方でしか使えないっぽい。