Skip to content
2010.06.11

jQueryのスライドショー、jcarouselliteを使う

by haruma

スライドショーにjQueryプラグインのjcarouselliteをつかいました。

head内

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousellite.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $(".anyClass").jCarouselLite();
});
//-->
</script>
</head>

body

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

基本的にこれで動作します。
オプションを指定するには、下のようにします。

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

オプション

btnPrev
クリックすると前の写真に移動する「前へ」ボタンのセレクターを指定します。

btnNext
クリックすると次の写真へ移動する「次へ」ボタンのセレクターを指定します。

btnGo
ボタンを押すと、その写真が中心にくるような動きをさせる。

<div class="externalControl">
  <button class="1">1</button>
  <button class="2">2</button>
  <button class="3">3</button>
</div>
$(".externalControl .jCarouselLite").jCarouselLite({
    btnGo:
    [".externalControl .1", ".externalControl .2",".externalControl .3"]
});

mouseWheel
マウスホイールで回転させます。
Mouse Wheelプラグインが必要です。

auto
自動でスクロールするようにします。間隔は1ミリ秒の値を指定します。

$(".auto .jCarouselLite").jCarouselLite({
    auto: 800,
    speed: 1000
});

speed
写真がスライドするスピードを指定します。0にするとスライド効果をつかいません。

easing
イージングの種類を指定します。

$(".bounceout .jCarouselLite").jCarouselLite({
    easing: "bounceout"
});

easein: ゆっくり移動開始
easeinout: ゆっくり移動開始/終了
easeout: ゆっくり移動終了
expoin: 非常にゆっくり移動開始
expoinout: 非常にゆっくり移動開始/終了
expoout: 非常にゆっくり移動終了
bouncein: 最初に跳ねる感じで移動
bounceinout: 最初と最後に跳ねる感じで移動
bounceout: 最後に跳ねる感じで移動
elasin: 左右に揺れる感じで移動開始
elasinout: 左右に揺れる感じで移動開始/終了
elasout: 左右に揺れる感じで移動終了
backin: 開始時に一度反対方向に移動
backinout: 開始時に一度反対方向に移動し、終了時に行き過ぎた後に戻る
backout: 終了時に行き過ぎてから戻る

vertical
スライドの方向を指定します。falseは横方向、trueは縦方向です。

circular
falseならスライドが最後まで到達すると停止し、trueなら最後まで到達すると先頭に戻ります。

visible
見える写真(要素)の数を指定します。3だと3つの写真が表示され、3.5は3つと写真半分が表示されます。

start
いくつめの写真(要素)から表示するか指定します。

scroll
一度のスライドで移動する写真分を指定します。

beforeStart
スライドのアニメーションが始まる前に関数を実行します。

$(".callback .jCarouselLite").jCarouselLite({
beforeStart: function(a) {
alert("Before animation starts:" + a);
},
afterEnd: function(a) {
alert("After animation ends:" + a);
}
});

afterEnd
スライドのアニメーションが終わった後に関数を実行します。

2010.05.22

エクセルの表をHTMLに変換する便利サイト

by haruma

エクセルの表をHTMLのテーブルにすることってよくあります。
そんな時はエクセルシートをHTMLテーブルに変換しちゃう君が便利です。

「STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け」とありますが、CSVでなくてもエクセルシートを範囲選択してペーストすればいけるようです。

2010.05.22

都道府県のエリアの分け方

by haruma

WEB制作で都道府県をわかりやすくエリアでわけることがあります。
そのたび、調べたりするのが面倒なので自分なりにまとめることに。
※このエリアの分類は確実なものでなく、例えば三重が中部にはいったり近畿にはいったりします。
http://www.lasdec.nippon-net.ne.jp/cms/1,0,14.htmlを元にエリア分けしています。

都道府県のエリア分け

北海道エリア(01北海道)
東北エリア(02青森、03岩手、04宮城、05秋田、06山形、07福島)
関東エリア(08茨城、09栃木、10群馬、11埼玉、12千葉、13東京、14神奈川)
中部エリア(15新潟、16富山、17石川、18福井、19山梨、20長野、21岐阜、22静岡、23愛知)
近畿エリア(24三重、25滋賀、26京都、27大阪、28兵庫、29奈良、30和歌山)
中国エリア(31鳥取、32島根、33岡山、34広島、35山口)
四国エリア(36徳島、37香川、38愛媛、39高知)
九州エリア(40福岡、41佐賀、42長崎、43熊本、44大分、45宮崎、46鹿児島、47沖縄)

※先頭の2桁数字はJIS都道府県コード(総務省の自治体コードと共通)です。

コピペして使えるようにhtml。

<ul>
<li>北海道</li>
<li>東北</li>
<li>関東</li>
<li>中部</li>
<li>近畿</li>
<li>中国</li>
<li>四国</li>
<li>九州</li>
</ul>
2010.05.20

さくらインターネットのCRONでcakePHPを実行する

by haruma

さくらインターネットではCRONが使えます。
わかりやすい解説サイト:さくらインターネットのCRON設定を可能な限り簡単に解説したい

で、cakePHPの処理をCRONで実行する方法。
(いろいろな方法があると思いますが)

例えばCRONで実行したい処理が下のような場合

http://host.com/users/check/

下のようなファイルを作成します。仮にcron.phpとします。

<?php
    $_GET['url'] = "users/check/";
    require_once( dirname( dirname(__FILE__) ) . "/index.php" );
?>

作成したファイルをwebrootに置いた場合
CRON スケジュール設定の実行コマンドを下のように指定します。
***は環境にあわせて変更してください。

cd /home/****/www/***/app/webroot/; /usr/local/bin/php cron.php 1>/dev/null

参考サイト:cronを使う

2010.05.17

syntaxhighlighter wordpressプラグイン

by haruma

このブログでつかっているwordpressにコード表示をみやすくするためのプラグイン「syntaxhighlighter」をいれました。
下のようにコードをみやすく表示します。

<div id="container">
  <p>コンテンツ</p>
</div>

導入方法や注意はこちらから
http://smkn.xsrv.jp/blog/2009/09/wordpress-syntaxhighlighter-evolved-plugin/
特に注意が必要なのはリンク先にありますが、テーマファイルに必ず<?php wp_head(); ?>と<?php wp_footer(); ?>という記述がいること。これがないと動作しないようです。

よく使うオプションまとめ

gutter=”false”とすると行番号を表示しなくなります。
[html gutter=”false”]

2010.05.17

jQuertでフォームでよく見かける利用規約で同意するにチェックを入れると送信できるようになるやつ

by haruma

登録フォームでみる、「利用規約に同意する」チェックボックスにチェックをいれると送信(submit)できるサンプルをjquery.jsを使ってつくってみました。

html

<input type="checkbox" />同意する<br />
<input type="submit" />

javascript

$(":submit").attr("disabled", "disabled");
$(":checkbox").click(function() {
	if (this.checked) {
		$(":submit").removeAttr("disabled");
	} else {
		$(":submit").attr("disabled", "disabled");
	}
});
2010.05.14

window7でFLASHプロジェクタをフルスクリーンにしたときの不具合

by haruma

FLASHで
fscommand(“fullscreen”,true);
としてフルスクリーンにして、プロジェクタを作成していたのですが
windows7で「画面が真っ白」になるという報告がありました。

調べてみると64ビット版windows7で発生する不具合のようです。
FLASHハードウェアスケーリングまわりの問題のよう。
FLASH CS3で作成したプロジェクタファイルで発生して、CS4では発生しないみたいです。
このためだけにCS4を購入するわけにいかないので対策を調べます。

FlashPlayer10なら不具合は起きないようなので、
プロジェクタをFlashPlayer10で書き出せるようにします。

1.スタンドアロン版Flash Playerを10に変更する
http://www.adobe.com/jp/support/flashplayer/downloads.html
から、「Windows Flash Player 10 プロジェクタコンテンツデバッガをダウンロード (EXE, 5.18 MB)」のファイルを実行。
これでパブリッシュするとswfがFlashPlayer10で書き出されるようになります。

2.プロジェクタの書き出し
書き出したswfファイルを開き、「ファイル」→「プロジェクタの作成」でプロジェクタを作成します。

これでFlashPlayer10で動く、不具合の解消したプロジェクタができたはずです。