blog | SevenStyleWeb

JQueryの強力ライブラリのinterface.js。
いまさらながらブックマークの意味も含めて、メモ。


http://interface.eyecon.ro/

久々にjavascriptのライブラリ・・・というか、関数を作ったので、また公開します。

久々にlaboの公開です。

よかったら使ってみてください。

■laboページ
http://sevenstyleweb.com/labo/index.html

■作成したプログラム
http://sevenstyleweb.com/labo/mklist/

コリスさんのサイトの中に、ページスクローラーの最新版がアップされてた。
（しばらくネットが使えてなかったので、いまさら・・・ですが）

http://coliss.com/articles/build-websites/operation/javascript/296.html

このページスクローラーは、本当に役に立つ。

使わせてもらおう。...んでいつか作ってみよう。

メモ。

セクシーな動きをするLightBox


http://www.coders.me/ejemplos/sexy-lightbox/

IE6などで、png画像を表示させたいときの処理。
IE7.jsについての記事とは別の方法。

まずは前回のを参考までに。。。
http://sevenstyleweb.com/blog/2008/05/ie6png.html

ってことで、これとは別のpng表示用のpngfixです。

http://homepage.ntlworld.com/bobosola/pnghowto.htm
使い方は↑をみる。

そもそものプログラムはここ↓
http://homepage.ntlworld.com/bobosola/pngfix.js

とりあえず、メモ。
こっちのほうが影響が少なくよさげ。

javascriptのメモ。
スクロールを実現するライブラリ。

http://lab.centralscrutinizer.it/the-tiny-scrollings/

jqueryなどを使っていないので、軽量か？
ただ今サイトで使っているようなjqueryを使ったスクロールのような滑らかな動きはない。

とりあえず。メモ。
サイトの中のほかのライブラリもあとでチェック。

javascriptやらajaｘやらを使って色々エフェクトをかけている最近な感じのするサイトが紹介されていた。

↓
http://acomment.net/16-top-javascriptajax-effects-for-modern-web-design/246


こういうeffect関係も徐々に増えていくんだろうなぁ。何がいいかはその時々だろうけど・・・。
２個前に書いたCSS3のほうで、色々出来ていることがやはりこの中にもちょろっとある。まだjavascriptで書かないといけない部分も多分にあるみたいね。まぁそうだわな。

ということで、メモ。

このブログのアーカイブページを作成してみた。一覧性を求めてテーブルで再現。
その際に、テーブルが使いやすくできるように、とあるライブラリを使用。

使用したのは、to-Rさんのsortable.js系。
http://blog.webcreativepark.net/2007/09/24-172811.html

使用方法などはto-Rさんを参考してみてください。

右サイドバーの上部から。   

ちょっとテスト事項として、

HTMLファイルに埋め込まれているswfファイルの上にimgタグなどの画像をのせたい。

というものを行ってみた。
ちなみに、swfファイルは、<embed>タグでよみこんでる。とする。
そのまま、例えば、CSSなどで、

embed{z-index:1;}

ってして、該当imgをそれより上にすれば・・・と思ってみたが、案の定そうはカンタンにはいかない。

色々調べてみると、
http://oshiete1.goo.ne.jp/qa3134334.html
などの記事で「なかなかできんよーそれは。」と書いてあるものが引っかかる。うーむ。中々難しいんじゃの～。と思いながらクドクド探していると、

見つかった。
http://staff.ark-web.jp/~takemura/public/pukiwiki/27.html

なんと、embedタグにとある値を設定してやるといいとな。
それは・・・それは・・・それは・・なんと！

wmode="transparent"

・・・。
なんじゃこれ。しらん。よーわからん。しかもembed自体はCSSでどうこう値を設定できるもんじゃないので、直接書き込むしかない。

んで、書き込んでみたら・・・
あらーできたじゃない。すばらしい。ちなみに、今回はswfobjectを利用していたので、javascriptのほうから書き込む形となったけど、うまくいった。ひとつの手として使えるぜこれは。

という情報でございました。

今日はセミナーに参加しております。
サイバーガーデンの益子さんのクリエイティブCSS実践講座 東京です。金額はドンとしておりますが、前回の参加でかなりの刺激を受けたので、今回も思い切って参加。

今午前の休憩中。

とりあえず、ちょこちょこメモします。

まずはJqueryについて

http://jquery.com/からダウンロードするんだけど、
そのときには、packedがいい。Gzippedは実は実装時に一気に重くなる。

$(document).ready(function(){
    hogehoge
};
のように、
$(document).readyを使うことでロードよりも早くDOMの解析が行われる（？）

jqueryのチュートリアルは以下より
http://docs.jquery.com/Tutorials

thickboxすげー。外部HTMLの一部も読める。http://jquery.com/demo/thickbox/
jqueryと一緒にいろいろ試してみる価値があり。AJax系もいける。外のファイルも読める。しかし、本当にそれがthickboxで必要かどうかは見極める必要がある。

ちょっと仕事で使ったので、メモ。
IE6でpng画像...特に透過画像を使いたいとなったとき、いろんな方法があるけど、
なかでも簡単に使えそうなのが、IE7.js
googleCodeから利用可能。

詳しくは、以下から。
http://code.google.com/p/ie7-js/

こちら導入の仕方はピカイチ。なんだけど、ちょっと使いづらいことがわかった。
何が使いにくいかというと、背景に透過pngを置くとき。

pngデータを

hogehoge-trans.png

というファイル名で保存をしたあと、背景に使ってみると・・・

左上に配置されてしまいます。
しかもそこにポツンと。。。

つまり、IE7.jsで背景画像をpng画像で置くときには、次の制限がでます。

背景のリピートができない
背景に置いた画像の移動(background-positionの設定）ができない

ということで、利用には要注意。

builderの記事でこんなのがあった。

prototype.js を利用してコンテンツをインクルードする

SSIなどのやり方があるけど、実際これはサーバの具合などが結構面倒だからなーって思ってた。
JSで「document.write();」でやる方法もあるけど、jsがきちゃなくなるし、更新のとき気持ち悪いなぁって思ってた。

なので、この記事タイトルを見たとき、おーって思ったね。

さーて、どういうやりかたかっていうと。すんごくカンタン。

まず、prototype.jsを読み込む。

<script type="text/javascript" src="hogehoge/prototype.js"></script>

読み込み用の関数を作成。

<script type="text/javascript">
function my_include(id, file) {
document.open();
document.write('<div id="' + id + '"></div>');
document.close();

var options = {};
options.method = "get";
options.asynchronous = false;
new Ajax.Updater(id, file, options);
}
</script>

もちろん関数名などはなんでもよい。これをhead内に。直接書かなくても、こいつを別ファイルとしておいて、読み込んでもＯＫ。

...で、読み込みたいHTMLファイルを作成して、外部に置いておく。このとき、Ajax利用なので、当然の事ながら同じドメイン内においておくこと。
んで、以下のコードを差し込みたい場所に差し込んでおく。これでＯＫ。

<script type="text/javascript">my_include("sample_id","sample.html");</script>

これはいい。
ファイルの作成もHTMLを作るようにできるわけだし、サーバのことを考えなくてもよいわけだし。

これは今後使えるなら使っていこうと思います。

またまた自作のjavascriptを公開します。
こちらもまだベータ版として。ご意見いただければなぁとおもいます。

今回も画像表示関係のライブラリ。Macユーザならご存知のiPhotoのようにスライダーを動かすと写真の大きさが変わるやつを作りましたので、よかったらどうぞ。

今回は、prototypeとscript.aculo.usのslider.jsを使います。
それぞれダウンロードしてきます。（といってもscript.aculo.usのページからダウンロードすれば、自然とprototypeはついてきます。）

それから、こちらのファイルをダウンロードします。

http://sevenstyleweb.com/sample/iph/js/iphslider.js
コピーをして保存してください。

また、今回のスライドバー用のCSSをダウンロードします。
http://sevenstyleweb.com/sample/iph/css/slider.css
こちらもコピペでお願いします。

さーて、使い方ですぅ。
まず、もちろんですが、インポートします。

<link rel="stylesheet" href="css/slider.css" type="text/css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/iphslider.js"></script>

そして、

<script type="text/javascript"><!--
    window.onload = iphslider;
// --></script>

ページをロードときにスライダーのスクリプトを起動させるために、こちらの上記のコマンドを打ち込みます。これで準備はＯＫです。

さて、スライダーを機能させたい画像に対して、rel属性でiphを入力します。以下のようにいれます。

<img rel="iph" src="hoge.jpg" width="○○" height="○○" />

さらに、スライダーを表示する位置に次のHTMLを書き込みます。

<!--For SlideBar space Start -->
<div id="slidebar">
    <div id="sliderBG">
        <div id="ptr"></div>
    </div>
</div>
<!--For SlideBar space End -->

これで、完了です。スライダーに対応した画像を複数使いたい場合でも、同じようにrel属性を指定すれば、スライダーで同時に拡大縮小されます。
画像に対してfloatをかけていれば、結構面白い動きをします。

サンプルデモ

現状最小サイズは30%に設定してます。その設定は変更できます。
ダウンロードした、jsファイルのiphslider.jsの3行目
var min_per = 30;
の部分の数値を%で変更すると問題なくいけます。

よかったら使ってください。

サンプルサイトまとめたサイトをこちらからダウンロードできます。
http://sevenstyleweb.com/download/iphsample.zip

javascriptのライブラリのmootools。これをつかったスライドボックスの面白いやつを見つけた。その名もmooSlideBox3（もう３かい！）

ちょっと解説をしましゅ。

まずはmootoolsの中身をとりあえず全部とmooSlideBox3をダウンロードします。それを適当なフォルダに入れます。

HTML側で、

<script language="javascript" type="text/javascript" src="common/js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="common/js/mooSlideX.js"></script>

で両方のjavascriptを読み込みます。

スライドさせるコンテンツですが画像をスライドインさせるとき（といっても画像しかいかないけど）

<a href="hoge.jpg" rel="designSlide" title="Sample::testtest text">Slide</a>

と書きます。

mooSlideBox3を使うときは、rel属性にdesignSlideと記載します。title属性には、スライドインしてくるレイヤーに記載されるテキストを記載します。その際、タイトル部分と本文部分を分ける意味で、::（コロン２つ）を記載。これが区切り文字になります。

ものによっては、title属性では事足りないことがあります。
そのときは、その後に<div>タグなどで追記情報を記載します。

<div id="mycontent">
        <h2>test test test</h2>
        <p>テストストテストテストテストテストテスト</p>
</div>

上記のように追記情報を記載し、そのid属性の値（今回はmycontent）を先ほどのaタグにrev属性を書き加えます。

<a href="hoge.jpg" rel="designSlide" rev="mycontent" title="Sample::testtest text">Slide</a>

これで、追記情報も表示されるようになります。
ただし、ここで注意ですが、rev属性の部分は、追記情報がない場合記載をするとエラーになり大本すら動かなくなります。

画像表示を表現するのに結構おもしろいエフェクトじゃないでしょうか・・。

ちょっと使ってみたいのでした。

このブログでは珍しく、サイトの紹介。
すんごい気に入ってもうた。GOTOCHINAというサイト。こちら、完全CSSとJavascriptで作られている。なのに、なんか気持ちのいい動きをします。

javascriptってことで、若干動作に重さを感じることもありますが、最近のモダンブラウザなら問題なくサクット動くんじゃないでしょうか。

写真などを表示するのに、大きな画面のほうがやっぱりいいなーと思う。けど、リサイズのときに困るなぁとも思っていたけど、javascriptをうまく利用すればこんな感じでできるのねー。って関心したし、
背景画像が、一時的にloadingってなってるのが、また面白い。これは、CSSをきってみたらわかるけど、画像サイズに合わせるために、この背景画像は、背景画像ではなく、普通にimgタグで読み込んだものを指定場所に配置している。しかもこの背景用の画像は、ユーザビリティを考慮してか、HTMLでは終わりのほうに置いてある（本来必要内情報だから・・・？）。だから、loadingとだして、その場をしのいでいる。

すごい面白アイデアだなー。と思ったね。

久々に自作ライブラリのご提供。まだβ版にしておいてください。
これは、画像とかボックスの4隅にちらりと装飾をするというもの。

さてチュートリアルでございますが、
まずjsをインポートします。

<script type="text/javascript" language="javascript" src="js/waku.js"></script>

このwaku.jsを使っていくわけですが、枠を付けたいものにたいして、

rel="waku"

を指定します。

今反応しているのは、aタグとdivタグに反応するようになっているので、
画像にリンクをおきたいときは、

<a class="sample1" href="hogehoge.com" rel="waku">
    <img src="hoge.jpg" width="640" height="480" />
</a>

のようにaタグに指定をします。

画像にリンクをしたくないときは、ちょっと面倒ですが、

<div rel="waku">
    <img src="hoge.jpg" width="640" height="480" />
</div>

ついにオイラもjavascriptのライブラリを一個作っちゃった。なので、ちょっとこちらに紹介。
ダウンロードしてもらってかまいませんが、その際は、コメント入れてもらえるとうれすぃっす。

covers.js

初期状態で若干の暗さを画像に持たせておいて、マウスオーバーのときに明るくなるというエフェクト。

使い方
prototypeとscriptaculousのeffect.jsが必要になります。

上記各ライブラリとcovers.jsをダウンロードしたあと、ヘッダに以下コード入力

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/effects.js"></script>
<script language="javascript" type="text/javascript" src="js/covers.js"></script>

javascriptのprototype.jsとexCanvasというライブラリをもってきて、色々ごにょごにょすると、時計チックなものができるとな。でもこれって、IEには対応できていないという。その理由は、IEはCanvasタグをもっていないからだとのこと。

まぁ、テストというか遊びとして楽しめるのではないでしょうか。
こちらも、この週末に色々やってみようと思います。

http://snipersystems.co.nz/community/polarclock/polar.html

さてGlassBoxの各パラメータの説明簡単に。。
・init

myGlassBox.init( 'myGlassBox', '450px', '360px', 'hidden', 'white' );

初期化します。
第１引数：id名、第２引数：幅、第３引数：高さ、
第４引数：オーバーフローしたときの設定、第５引数：ボーダーのスキン
 

・vscreen

myGlassBox.vscreen( '50px', '5px' );

位置の設定　第１引数：左位置、第２引数：マージン

・ipos (inline position)

myGlassBox.ipos();

オブジェクトのインラインポジションの設定
 

・apos

myGlassBox.apos( '690px', '35px' );

オブジェクトの絶対位置を設定。

・lbo

myGlassBox.lbo( true, 0.50 );

第１引数：LightBoxのように表示するか否か、第２引数：透明度の設定。

・appear

myGlassBox.appear(3000);

表示するための時間。
 

・draggable

myGlassBox.draggable();

オブジェクトをドラッグできるようにする

・zindex

myGlassBox.zindex('100');

オブジェクトのz-indexを指定するためのもの

新しいやつがでてきた。LightBoxの改良版みたいなやつで、
すんごいおもろー！（世界のナベアツ風）

http://www.glassbox-js.com/

えっと使い方ですが・・・。

１．スクリプトの読み込みをする。

<script src="glassbox/glassbox.js" type="text/javascript"></script>

２．divタグでid(class)をふって、コンテナを一つつくる。

<div id="myGlassboxContent">
<!-- Content -->
</div>

３．で、スクリプトを初期化。ほんで、id(class)渡して・・・

<script type="text/javascript">
var myGlassBox = new GlassBox();
myGlassBox.init( 'myGlassboxContent', '400px', '300px', 'auto' );
myGlassBox.apos( '290px', '35px' );
</script>

４．指定したdivタグ内に色々書き込むって感じ・・・みたい。

それぞれパラメータもあるみたいだし、XMLの読み込みなども色々でけるみたい。
このあとちょろっと時間を見つけてサンプルを作ってみます。
ちょっと表示がおもいけど、なんかおもろー！（世界のナベアツ風）。

仕事関係でちょっとメモ。
SEVENSTYLEWEBのphotoページでも使っているけど、画像がスライドして入ってくるJSライブラリの紹介ページ。

□http://coliss.com/articles/build-websites/operation/javascript/496.html

ちょっとそれだけ。