2013-12-02

【jQuery】でスライドショーを自作してみる

jQuery

jQueryではすでに素晴らしいスライドショーのプラグインが数多くありますが、それをあえて自作してみます。

考え方

画像をリストタグで並べる
画像を同じ場所に重ねて表示させる
画像をz-indexを使ってレイヤー別にする
画像を一番上の表示されているものからフェードアウト
最後の画像がフェードアウトする前(つまり一つ手前)ではじめにあった画像を最後に移動させ、表示させておく
もとの最後の画像がフェードアウトした時に、はじめの画像を前面に移動させ、後ろにある画像をすべて再表示させる

実装

1．画像をリストタグで並べる

//HTML
<div class="slideShow">
  <ul>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
  </ul>
</div>

2．画像を同じ場所に重ねて表示させる

/* css */
.slideShow li{
  position: absolute;
  list-style: none;
}

3．画像をz-indexを使ってレイヤー別にする

こちらはjQueryで設定します。はじめにリストタグがいくつかを判別します。次に一番上にくる画像にz-indexの値を1000にします。(適当)そこからfor文で他の画像に1ずつ減らした値を入れていきます。

var len = $('.slideShow').find('li').length;
var idx = 1000;	
for(var i=1;i<=len;i++){
  $('.slideShow li:nth-child('+i+')').css('z-index', idx);
  idx--;
}

4．画像を一番上の表示されているものからフェードアウト

一定時間が過ぎたらフェードアウトしていく処理をjavaScriptのsetIntervalで実装してみます。今回は5000ミリ秒。

setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000)
}, 5000);

5．最後の画像がフェードアウトする前で、はじめにあった画像を最後に移動させる

画像をフェードアウトさせると同時にその下の画像がでてきますので、最後の画像が消える前に、次の画像を用意しておく必要があります。最後の次の画像、つまりはじめの画像を用意します。

今回は4枚の画像を使用しますので、4枚目が消える前に1枚目の画像のz-index値を996( 1000-4)にして用意しておきます。

cnt = 1;
setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
    cnt++;
    if(cnt == len-1){ // 最後から一つ手前の画像になったら処理
      $('.slide li:nth-child(1)').css('z-index', 1000-len).show();
    }		
  });
}, 5000);

6．もとの最後の画像がフェードアウトした時に、はじめの画像を前面に移動させる

z-indexを初期値に戻して、すべての画像を表示させる(画像の後ろで)

cnt = 1;
setInterval(function(){
  $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
    cnt++;
    if(cnt == len-1){ // 最後から一つ手前の画像になったら処理
      $('.slide li:nth-child(1)').css('z-index', 1000-len).show();
    }else if(cnt > len){
      cnt = 1; // 初期値に戻す
      for(var i=1;i<=len;i++){ //最後の画像になったら処理
        $('.slide li:nth-child('+i+')').css('z-index', idx).show();
        idx--;
      }		
  });
}, 5000);

まとめ

最後にfunctionでひとまとめにしてみました。

function(){
  var cnt = 1;
  var len = $('.slide').find('li').length;
  var idx = 1000;	
    for(var i=1;i<=len;i++){
      $('.slide li:nth-child('+i+')').css('z-index', idx);
        idx--;
    }
  setInterval(function(){
    var idx = 1000;
    $('.slide li:nth-child('+cnt+')').fadeOut(2000, function(){
      cnt++;
      if(cnt == len-1){
        $('.slide li:nth-child(1)').css('z-index', 1000-len).show();		
      }else if(cnt > len){
        cnt = 1;
        for(var i=1;i<=len;i++){
          $('.slide li:nth-child('+i+')').css('z-index', idx).show();
          idx--;
	}
      }							
    });
  }, 5000);	
})();

2013-11-25

噂？の『TogetherJS』を使ってみた

TogetherJS

米Mozillaが2013年10月16日にブラウザ上でチャットやボイスチャットが可能になるJavaScriptプラグイン『TogetherJS』を使ってみた！

⇒http://togetherjs.com/

導入

導入はとても簡単でページにコードをコピーペーストするだけ

<script src="https://togetherjs.com/togetherjs-min.js"></script>

JavaScriptを呼び出して…

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

ボタンを設置するだけ。

すると、ページにそのまま貼りつけると「Start TogetherJS」が表示されていると思うので、押すとメニューがでてきます。

f:id:yk0105000:20131125210811p:plain

ボタンを押すと右側にメニューがでてきます。

f:id:yk0105000:20131125210930p:plain

メニュー内容

一番上のボタンを押すと名前の変更、アイコン画像の変更、カラーの変更

f:id:yk0105000:20131125211311p:plain

メニューの二番目を押すと友達をURLが表示されているので、ここのURLから入ってもらえばすぐに参加できます。

f:id:yk0105000:20131125211706p:plain

3番目はボイスチャットです。URLの下にメッセージがでてるから、それを許可してねということです。最新のブラウザだったら対応とのこと。

f:id:yk0105000:20131125212242p:plain

4番目でチャットができます。

f:id:yk0105000:20131125211914p:plain

まとめ

アイコン画像や名前を一度変更すると次回は行った時も引き継がれていました。(どこに保存されているの？)
同じドメイン上で複数のページで起動可能。
招待される方は特に何も準備する必要がない。
本当は説明なんていらないんじゃないかってくらいシンプル。

2013-11-25

『Station Ride in 南房総』レポート

イベント

概要

2003年11月23日に開催された『Station Ride in 南房総』というサイクリングイベントに参加しました。千葉県南房総の道の駅を回りながら一週するという海沿い満喫コースでございます。今回は記念すべき1回目の開催ということでした。

f:id:yk0105000:20131124145450p:plain

100Km、75Km、70Km、45Kmコースがあって、今回は100Kmコースに参加してきました。

道の駅富楽里とみやま→道の駅三芳村鄙の里→

道の駅ローズマリー公園→道の駅ちくら潮風王国→

道の駅南房パラダイス→船形漁港ふれあい市場→

道の駅とみうら枇杷倶楽部→道の駅三芳村鄙の里→道の駅富楽里とみやま

レーススタート

f:id:yk0105000:20131123084642j:plain

▲当日は雲ひとつないサイクリング日和！軽快な司会進行のもとスタートです。

自分が選択したのスピード関係ないフリー枠、攻めではなくゆったりの方向で。フリー枠のグループは当然ながら先導の人がいないので、即効で道に迷いました。

どっちどっち？と地図を確認している時に後続の人が来て颯爽と曲がっていった。

「あれ？自信満々に曲がっていったけど、でもあっち違くね？」と知らない人と相談しながら進んで行きました。

地図そこまで見なくても看板とか分かれ道にスタッフがいるよね！という期待をしてしまったけども、実際はスタッフなんて立っていなかった！いや、これは事前にちゃんと地図を確認しなかった自分がいけないんだ！と、一つ目の休憩所まで行ったらちゃんとルートを確認しながら行きました。

f:id:yk0105000:20131123093738j:plain

▲道の駅三芳村鄙の里は「びわ饅頭」ごっそさん

f:id:yk0105000:20131123103954j:plain

▲道の駅ローズマリー公園では「びわソフト」ごっそさん

f:id:yk0105000:20131123111646j:plain

▲道の駅ちくら潮風王国では自転車の撮影会

f:id:yk0105000:20131123123119j:plain

▲道の駅南房パラダイスではおにぎりをごっそさん

f:id:yk0105000:20131123141512j:plain

▲道の駅とみうら枇杷倶楽部では再び「びわソフト」ごっそさん

これは「びわ」と「びわシロップ」がかかっているのです。

f:id:yk0105000:20131123145200j:plain

▲道中では畑の中を走って行ってとても開放的でした。

f:id:yk0105000:20131123154323j:plain

時間いっぱいいっぱいに使って16時ごろにゴールでフィニッシュでした。

終わった後はゴールの富山でアナゴ天丼を食しておかえり。

帰り道は鋸南富山ICからアクアラインを通るつもりが、木更津JCTからかなりの渋滞。アクアラインの海ほたるまで3時間くらいかかりそう…

眠いし、これはやばい！ということで木更津北ICで降りて木更津市街に行って、温泉に入って9時ごろまでゆったりしてました。

日帰りはみんなそのくらいで帰りますもんねーそうですよねー。

まとめ

車では何度か通った道。でも自転車だともっと景色を堪能できました。
道中、おじいちゃん、おばあちゃんが畑仕事に勤しんでいました。若い人がいない…過疎化を肌で感じました。
こういうイベントでSNSやブログで紹介するだけでもいい宣伝効果ね！
高低差はそこまでなかったけど、長めの坂も地味に疲れる。
館山の海岸沿いの家が素敵すぎ。
ゼッケンも付けられるような服装で（ゼッケンをつけるピンセットを刺す場所に悩む）
道はちゃんと事前に確認しておこう。

2013-11-19

【Illustrator】でガイドを編集する方法

f:id:yk0105000:20131119132331p:plain

なにかと便利なガイド、一度配置したガイドの再度編集したいときのやり方です。

初めはガイド編集にロックがかかっているので、ロックを外せば再編集可能です。

やり方は[編集]>[ガイド]>[ガイドにロック]のチェックを外せば編集できます。

ショートカットキー(Alt + Ctr + : )を押せばすぐに切り替え可能

2013-11-08

【jQuery】でブラウザを一定以上の幅を大きくした時に動的に表示させる

jQuery

ブラウザの幅を大きくした時のみに表示させたい時ってあるはず…

$(window).resize(function(){ //ブラウザの大きさを変えた時に発動
    var width = $(this).width(); //ブラウザの幅を取得
	if(width <= 1200){ //1200px以下になったら消える
		$('.box').fadeOut();
	}else{
		$('.box').fadeIn(); //1200px以上になったら現れる	
	}
});

2013-11-06

【windows7】標準搭載の画面キャプチャソフト「snipping tool」が使いやすい！

windows7

いままで画面をキャプチャする時はいつもキーボード右上にある[Print Screnn]キーを押して、画像編集ソフトを立ち上げて必要な場所を切り取ってから画像に保存するという一連の流れでした。

これって結構面倒ですよね。

そこで役に立つのがWindows7から標準搭載の[Snipping Tool]

f:id:yk0105000:20090515172142j:plain

スタートボタンから検索窓で[snipping tool]と打ち込めばでてきます。

機能はかなりシンプルでキャプチャしたものをそのまま画像にしてくれます。

キャプチャの仕方は4通りあって、新規作成の右側の▼ボタンを押せば変更できます。

四角で囲んだ場所のみ、フリーハンドで囲んだ場所のみ、特定のウィンドウのみキャプチャ、そして画面全体をキャプチャするものが選べます。

ちなみに画像の保存のほかにコピーボタンも存在します。

これを押せば、PrintScreenと同様に画像をペーストすることも可能です！便利！

初めはフリーソフトでないかなぁとネットで調べたんですが、まさかwindows7に標準でこんな便利なものが搭載されているとは思いませんでした。

2013-11-05

【wordpress】pagenationのNEXTとPREVに画像を使いたい時の対処法

wordpress

wordpressの'index.php'などで次のページなどを表示したいとき、'prefious_post_link('%link','NEXT')'を使うと思います。

この時、テキストリンクだった場合はこれでいいんですが、画像を使いたいときに'bloginfo(template_url)'が使えないのです。

なので代わりにこれを使ってテンプレート内の画像を引っ張ってきます。

'get_template_directory_uri()'

</div>

これで完了！

宿題ぶろぐ（Y）

気付いたこととか、発見しちゃったこととか