5509

jq.carouselっていうカルーセルのjQueryプラグインつくった

githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。

ドキュメント・サンプルは以下のリンク先を参考にしてください。(変な英語ですけど、なんとなく言いたいことは分かると思います。

日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ!っていう方は見てみてください。

特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。

要望とかバグ報告などはgithubのIssuesへお願いします。

電光掲示板をあのmarqueeとCSS3のグラデーションで

元ネタ

これおもしろいなーと思って、でもすごい重くて・・・wよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん

↓ サンプル

HTML

HTMLは超絶シンプル

【横須賀線 遅延】

CSS

CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で

marquee {
  position: relative;
  color: #ffab00;
  background-color: #0a0600;
  font-size: 40px;
}
marquee:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(#0a0600 1px, transparent 0px),
    linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
    -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
    -moz-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
    -o-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
    -ms-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-size: 2px 2px, 2px 2px;
  z-index: 10;
}

IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど

ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた

jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it

forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS

追記:なんかやっぱり一部環境で重くなるときがあるらしい

フロントエンドの開発を加速するCodeKit

また紹介エントリーか。。。Sass布教活動の一貫です。どうも。

SassとかLESSって使ってますか?書くのがとても億劫なCSS(個人の感想です)を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります(個人の感想です)。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。

というか

をみてください。

浸透しにくい理由は色々ある気がしますが・・・

コンパイルがめんどい

そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。

黒い画面がちょっと・・・

ではSassをインストールしましょう!OS Xの方はターミナルを開いて

$ gem install sass

を入力するとしばらくしてSassがインストールできるので、

$ mkdir ~/Sites/my-first-sass
$ mkdir ~/Sites/my-first-sass/styles
$ mkdir ~/Sites/my-first-sass/styles/scss
$ cd ~/Sites/my-first-sass/styles
$ touch scss/style.scss
$ sass --watch scss/style.scss:style.css

で、まずはコンパイルしてみまs・・・

なるほどですね。特にSassは黒い画面じゃないとだめみたいな先入観があるのではないでしょうか?

OS X Lionのみなさんは素晴らしいソリューションがあります

それがCodeKitです。

Winのことはよくわからないので、同じような事を誰かが書いてくれるでしょう。フロントエンドの制作でOS Xじゃない方が弊害が多い気がしますけど、個人の感想ですね。

Read more

Chromeで超簡単にUser Agentを変える方法

@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です
以下、見たことのある内容が続きます

全然気がつかなかった・・・いつからだろう・・・ > 17からだそうです
Chromeにビルトインされてるのですぐ使えます。

ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。

通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと

右下にギアアイコンがあって、そこからインスペクタのSettingが開けます
すると Override User Agent という項目があるので

チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます
試しに iPhone – iOS5 を選択してみましょう

リロードするとUAが変わっているのが分かります(分かるページでやると

※書き忘れてましたが、インスペクタが開いている状態でのみ有効です

タイプライターっぽいエフェクトを実行できる jq.typewrite

今さらなんでもないメソッドですけど、せっかく作ったので記事書いておきます。対象要素内のテキストを一文字ずつ表示するだけです。

ホスト / ダウンロード

使い方

そのままつかう

最初に $.typewrite(jQueryオブジェクト) で初期化しておきます。あとは任意のタイミングで .play() メソッドでエフェクトを実行できます。
.play(4) のように実行時に duration を決めることもできます。

.play() メソッドは jQuery Deferred オブジェクトを返すので、完了時に何かしたいときは .done() でつなげばOKです。

JavaScript

var typewrite1 = $.typewrite($('#typewrite1'));
$('#do_typewrite1').click(function() {
  typewrite1.play();
});

HTML

This is typewrite

オプションとDeferredも使う

JavaScript

var typewrite2 = $.typewrite($('#typewrite2'), {
  duration: 2,
  hide: false,
  end: '|'
});
$('#do_typewrite2').click(function() {
  typewrite2.play().done(function() {
    alert('completed');
  });
});

HTML

This is typewrite
This is typewrite

jQuery プラグインとして使う

jQuery プラグインとして使う場合は、play() メソッドが typewritePlay() メソッドに変わります。

var typewrite4 = $('#typewrite4').typewrite({
    end: '|'
});
$('#do_typewrite4').click(function() {
    typewrite4.typewritePlay(2);
});

オプション

オプション 説明
duration エフェクトが始まってから終わるまでの時間。1(s)のように秒で指定 (def 1
hide 初期化時にテキストを隠すかどうか (def true
end 入力カーソルを指定できます (def _(underscore)
wait ハッシュで対象の文字と待ち時間を渡すとその文字のときに余分に待つ(次の項へ

wait

デフォルトは日本語の4文字だけ指定してるので変えてください

文字列 待ち時間
0.1
0.1
0.1
0.1

指定するときはこんな感じで

$.typewrite(hoge, {
  wait: {
    ',': 0.3,
    '.': 0.3
  }
});

使うときの注意点

対象の要素は、
以外のHTML要素を含むことができないので、その辺よろしくおねがいします。

Author

nori
nori
- UI Engineer
Location
- ,