CUTPLAZA TERMINAL

わずか1.3KBの軽量で、快適に動作するアコーディオンのスクリプト「JavaScript Accordion」



ちなみにこちらが試してみたデモページ。

【JavaScript Accordion「アコーディオンみたいにスライドして展開表示する」】[デモ]

以前、同じようなスライド式で、アコーディオンのようにスライドして展開表示するJavaScriptを使った事があります。

忘れもしないクリスマスの前夜。

とてつもなく重いそのJavascriptは、次の日には取っ払われていたというお話。
まぁ、それは良いのですが、それから6年。Ajaxだとかjqueryとか、こんな軽いJavascriptが出てきてしかも軽い。
時代の流れとともに、技術もまた道具とともに変わっていくものなのですね。

スタイルシートをIEだけに適用する大胆で簡単な条件式というのを見させていただきまして、この記述方法を始めて目にする事に感動しつつ、やはりちょっとソースが汚くなるのが気になったのです。
(※まぁ、そんな、綺麗にソースとか書けませんが)

それより、Google Chromeが登場したり、FireFox3だのOPERA9.6だのが登場して、すごく早いブラウザが首位を争っている第三次ブラウザ大戦(笑)のこの時期に、やっぱりブラウザごとにあわせて、表示させる方法を考えておくべきだと思いましたの

っで、うちでよく使う手法でSSIなら条件分岐的なSSIの制御構文を使って出来そうだったので作って見ました。

【SSIで様々なブラウザにあわせてスタイルシートを変更】

これならスタイルシートをスタイル指定やなんかで部分的に指定出来る上に、

HTMLのソースは元のままで汚さない表示方法かなと。

※ちなみにSSIの制御構文の箇所は、改行無くして一行にしてTITLEのタグの後ろにでも置かないと、やはり数行の空白が出来てしまいます。

これは前に誰かがしていたような気がするんですが、とにかく自分で作れて良かったです。

画像をクロスフェードさせながら変更するjQueryのプラグインを利用した「CrossSlide」

【CrossSlide - 画像をクロスフェードさせながら変更 - jQuery】



フラッシュを使わなくても、こういう動きのある画像の見せ方も出来るというのは、Webデザインを見せる幅も広がっていいかも。

YouTubeの動画で面白い所を見せたい時に、再生する箇所から再生できる方法があるそうですの

なのでYouTube再生時間指定のコードを、Tomoの利用しているYouTube表示のPHPに組み込みました。

各自、見せたい場所からの再生が可能になっています。

【やしがに「お風呂に入ろう（父と娘編）」-動画-CUTPLAZA】
【やしがに「お風呂に入ろう（夫婦編）」-動画-CUTPLAZA】


■「YouTubeの動画の再生時間指定」関連：
【YouTubeの動画の再生時間を指定する「ディープリンク」が対応。省略した指定も。：CUTPLAZA TERMINAL】


※秒数で指定なのですが、若干ずれますねw

YouTubeの動画貼り付け用のコードやYouTubeの動画ページのアドレスに

&start=[再生を開始させたい秒数]

とすると、再生を開始したい場所から動画の再生が始まります。

そして再生時間と同様に終了時間の指定も可能ですね。

&end=[再生を終了させたい秒数]

ちなみに、

&autoplay=1

というのを付け足すと、こんな感じに勝手に再生が始まります。
【やしがに「お風呂に入ろう（8年以上一緒にお風呂に入っていない夫婦編）」-動画-CUTPLAZA】[※自動再生します。]

ちなみにループさせるようにもしていて、

&loop=1

上のコードを付け足して再生をループさせています。

つまりこれらは&start=20&end=50&loop=1といった事が出来るという事です。

フラッシュ作成ソフト「Adobe Flash」を使わないでFlash作成するためのソフトを改めて探していましたの



これまで使った物としては

・ParaFla!
・Powerbullet
・gif2swf
・MotionSWF

いつから使っているのか調べたら2005年くらいからみたい。

その頃は、GIFが動くだけで笑ってた時期だからw

以下に、この頃流行のFlash作成ソフトとか、Tomoの使ってたFlash作成ソフトを紹介しておきます。

見出しなどでJavascript表示によりテキストの部分を画像で表示してくれるスクリプト。

HTML的にはテキストに見出しのタグをつけている状態で、これをJavascriptによって画像で表示するというのは、とてもSEO的にも良いのかも。

【【Javascript】見出しなどのテキストを画像に置換するスクリプト】[サンプル]

Javascript表示の際のタグを見てみたけれど、確かにイメージタグで表示されてました。

Movable TypeをやめてWordPressに切り替えてからしばらく経つのですが、まだ切り替えを行っていない所も数箇所あるので、いつか「Movable Type 4」に切り替えるときが来た時のためのメモです。

【CUTPLAZA DIARY ≫ Movable TypeからWordPressへURL込みの移行しました】

ただ、あのMovable Typeの再構築の遅さを体験しているから、どうも二の足が出ない・・・

ウエブデザインを作るのには欠かせないスタイルシートですが、ブラウザによってCSSの表示が異なるため、それの対策に囚われ時間を費やす事もしばしば。

それならいっそ最初に全部のブラウザのデフォルトスタイルをリセットしちゃえば良いじゃないという発想からくるスタイルシートのサンプルがあります。

これは去年くらいからうちの一部のブログで採用していますけど、なかなかどうして使い勝手が良いですよ。

CGIでURLから「CGIスクリプトへパラメータを渡す」という物を使う必要に迫られて、ちょっと調べ物。

結局、

METHOD=GETで渡す
http://...../cgi-bin/xxx.cgi?名前1=値1&名前2=値2

というような形で使う事になりそうだ。

いか、CGIのフォームとかの処理関連の参考リンク。

スライドショー的にサムネイルの写真を拡大したり次の写真を表示する事が出来る「lightBox」

これのjQuery版lightBox「jQuery lightBox plugin」があるとの事で試してみました。



Ajaxで色んな事が出来るようになって、最近は本当に面白い。