Google Chartsのグラフを簡単に

jQuery Google Charts｜web creators 2009年6月

今回もweb creators 6月号の「Webデザイン スタイルアップ Tips」に紹介されているテクニックです。
「Google Chart API」は、簡単にグラフを作るコトができる便利なサービスですが、パラメータの記述がややこしい。そこで登場するのが、今回紹介する「jQuery Google Charts」です。

「jQuery Google Charts」にアクセスすると、ページの右側に「↓Download」というボタンがあるのでダウンロードして下さい。いろいろとファイルが入っていますが、とりあえず必要なのは、jgcharts.jsとjquery.jsです。

まずは、サンプルです。（このブログのアクセス数と訪問者数をグラフにしてみました）

↑このサンプルはこちらからダウンロードできます。

各種パラメーターの設定は、サンプルのHTMLの9〜23行目付近に記述していますが、詳しくは「jQuery Google Charts」を見てもらった方が分かると思います。
グラフの種類も変更できますし、他にもいろいろとパラメーターを設定するコトで、気に入ったようにカスタマイズするコトができると思いますよ！

※ただし、IE6では日本語表記ができないので、お気をつけ下さい。 どうしてもGoogle Chart APIを使って、日本語表記のグラフを作成したい！という方は、「moBlur.org - Google Charts GUI with jQuery」を試してみると良いかも知れません。その際は、下記のページを参照するコトをオススメします。

［参考ブログ］
→Google Chartsのグラフを日本語で作成できる簡単グラフ作成サービス - WEBマーケティング ブログ

最後の行だけ違うスタイルにするJavaScript

いろいろできるyuga.js｜web creators 2009年4月

若干古いですが、web creators 4月号の「Webデザイン スタイルアップ Tips」に紹介されていたKyosuke.jpさんの「yuga.js」は、小粒ですがなかなか痒いトコロに手が届くスクリプトが集まっています。

中でもcss3classは、CSS3からサポートされる予定の「:lastChild」や「:firstChild」という疑似要素を現状のブラウザでも指定できてしまう。
これを利用すれば、リストやテーブルの先頭の行や最後の行のスタイルを変えるコトが手軽になります。
HTMLで特定の行にclass定義してしまえばそれまでなんですが、更新や修正でいちいち直す必要がなくなるのは、正直非常にありがたいのでは…。
例えば、各行に下線をひくが、最後の行だけは下線なしにしたいとか云う場合にもってこいです。

というコトで、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

また、yuga.jsには他にもいろいろな機能が盛込まれています。
ロールオーバー、
現在のページをハイライト表示、
外部リンクは別ウインドウを設定、
画像へ直リンクするとthickboxで表示、
ページ内リンクはするするスクロール、
簡易タブ機能、
奇数、偶数を自動追加などなど

ホントに至れり尽くせりと云う感じで、使いたい機能が凝縮されています。
また、jQueryを使うトコロもGood！入れておいて損はないと思いますよ。

→「yuga.js :: Kyosuke.jp」

jQueryのプラグインでツールチップ

jQuery「Beauty Tips」｜web creators 2009年6月

web creators 6月号の「Webデザイン スタイルアップ Tips」でも紹介されていますが、jQueryのプラグイン「Beauty Tips」は非常に使い勝手が良い。
スクリプトさえ組み込めば、手軽に見栄えの良いツールチップが表示できる。また、いろいろとカスタマイズできるので、サイトにあわせたツールチップを作成するコトができる。
これはとても重要なコトなので、かなりありがたい。

…という訳で、「Beauty Tips」のページからデータをダウンロードして、web creatorsに載っている通りに作ってみましたが、IEでは表示に不具合が出てしまった。何故？？？

まあ、サイトからダウンロードしたデモデータはきちんと表示できているので、ソースを調べてみると、IE用には他のスクリプトを読み込まないといけないようである。
その件については、コリスさんの「これ最強かものツールチップスクリプト -BeautyTips」というページを見ていただくと分かると思いますので、お読み下さい。

少し前置きが長くなりましたが、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

カスタマイズですが、サンプルのHTMLの16〜30行目付近を参考にしてみて下さい。
padding、widthは説明しなくても分かりますよね？
spikeLengthとspikeGirthは、吹き出しのくちばし部分の設定、
cornerRadiusは、角の丸さ、
fillは背景の設定で、RGBを0〜255で設定し、最後に不透明度を少数点で設定します。
strokeWidthとstrokeStyleは、枠線の太さと色、
cssStylesは、文字のスタイルを設定します。

ツールチップには、画像を入れたHTMLを表示させたり、いろいろな設定もありますので、是非「Beauty Tips」のページからデータをダウンロードして、色々試してみて下さい。

テーブルの背景色を１行おきに変更してみる

今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。
縦に長い表だと、視認性を上げるために１行おきに背景色を変更するなんてコトも常套手段となる訳です。

これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。
Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。

前置きが長くなりましたが、
調べた所、jQueryを使えばとても簡単だ！というコトが分かり、紹介してみます。
参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。

まず、jQueryから最新のスクリプトをダウンロードして下さい。
HTMLソースにスクリプトを読み込み、下記のように記述
（例）
<script type="text/javascript"><!--
$(function() {
    $(".stripe tr:even").addClass("even");
});
//--></script>

次に適用するtable要素にstripeとclass指定して、
CSSで例えば、
.stripe .even td {
    background-color: #FBF8EE;
}
と、定義してみて下さい。

これで勝手に偶数行のtd要素の背景色が変更できます。項目の並びが変更されようが、追加・削除されようが全然OKです。
さらに、table要素に限らず、li要素などにも応用できます！

…んっ！？
もしかして、プログラムから生成するようなtable要素にも応用できるかも？
今度実験してみます。

JavaScriptでスライド表示するサンプルギャラリー

noobslideによるスライド表現｜web creators 2008年8月

商品写真を数点、ギャラリー的に見せたいという案件があり、以前から気になっていた「noobslide」を 使ってみました。
少し古いですが、web creators 2008年8月号の「すぐに使えるCSSデザインテクニック」でも詳しく紹介されていますので、本格的に使いたい方は読んでみて下さい。

noobSlideのページを見ていただくと分かりますが、いろいろな演出ができます。その中で気に入ったモノがあれば、使ってみるのも良いでしょう。
ただし、カスタマイズは結構複雑でした。僕の場合は、web creators 2008年8月号のサンプルデータをカスタマイズしたんですが、多少分からないトコロもあり、CSSで無理矢理非表示にしたりしています。

とりあえず、サンプルです。

続きを読む "JavaScriptでスライド表示するサンプルギャラリー"

JavaScriptでクロスフェード

DIV要素をクロスフェード

このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。
「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。

「Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。
このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単！使わない手はないでしょう。

とりあえず、サンプルです。

続きを読む "JavaScriptでクロスフェード"

JavaScriptでプルアップメニューっぽくスライド表示

情報ブロックをスライドさせて表示｜web creators 2008 9月号

以前、このブログの「JavaScriptでプルダウンメニュー」という記事に「ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか？」というコメントが付き、「これっ！」という対策がなかったので、Flashで作ることをおすすめしましたが、web creators 2008 9月号の「表現の制約を乗り越えるWEBデザインの技」という特集に載っていたサンプルを使えば、なんとか作れそうなので紹介してみます。

「Andrew Sellick - Fancy Sliding Tab Menu V2」というページからライブラリがダウンロードできます。
デモ画面は以下のURLでも見るコトができます。
・www.andrewsellick.com/examples/tabslideV2/

プルアップメニューというよりは、ブロック要素をスライドして表示させる仕組みなので、「sexy sliding menu」に近いと思います。

兎にも角にも、サンプルです。

続きを読む "JavaScriptでプルアップメニューっぽくスライド表示"

ロールオーバー時に動きを与えるJavaScript

jQuery - BackgroundPosition plugin

今回もまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
jQueryの「BackgroundPosition plugin」というプラグインを使うと、メニューボタンにロールオーバーした際にFlashのような滑らかなアニメーションを施してくれます。
ちなみにサンプルは下記のページ。
→jQuery Background Test

仕組みとしては、メニューボタンの下に配置する変化のある背景画像を用意し、その背景画像をJavaScriptで移動させるコトによって、ロールオーバー時にアニメーションさせる…というモノです。

下記のサイトからJavaScriptをダウンロードして読み込ませます。
→Downloading jQuery - jQuery JavaScript Library
→Plugins | jQuery Plugins

とりあえず、サンプルはこちら。

続きを読む "ロールオーバー時に動きを与えるJavaScript"

プルダウンメニューに動きを与えるJavaScript

Flashのような滑らかなアニメーション｜MenuMatic

このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。

ちなみにサンプルは下記のページ。
→horizontal（水平）のサンプル
→vertical（垂直）のサンプル

メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。
…で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ！JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。

サンプルはこちら。

続きを読む "プルダウンメニューに動きを与えるJavaScript"

写真を簡単に加工するJavaScript

透き通ったボールのようなアイコン｜Sohere.js

このブログでも何度となく紹介している「www.netzgesta.de」というサイトがあります。このサイト、画像にいろんな効果を与えてくれるJavaScriptを紹介しています。
今回は、web creators 2009年1月号の「Web Design Style-UP Tips」にも載っていた、Sohere.jsを紹介してみます。Sohereという名前だけあって、画像ソフトを使わなくても、かなりキレイにガラス玉のような加工を施してくれます。パラメータを変更するコトで、いろいろと微調整もできて便利です。

サンプルはこちら。

続きを読む "写真を簡単に加工するJavaScript"

Lightboxのクローン、SexyLightBox

Lightboxではつまらないという方に｜web creators 1月

AjaxといえばLightboxというくらいメジャーなJavascriptライブラリですが、普及しすぎているが故、単純なLightboxでは、つまらないと思っている方も多いかも知れません。
巷にはLightboxクローンのライブラリというモノが色々とあり、今回紹介する「SexyLightBox」もその１つで、Lightboxに少し変化を加えたい人にはうってつけです。

web creators 2009年1月号には、「JavaScript入門＆徹底活用バイブル」という小冊子が付いてきます。デザイナーにとっては大変便利な特集になっていると思います。「SexyLightBox」もそこに紹介されています。
「» Sexy Lightbox v1」というページのDescargarから、ライブラリとサンプルがダウンロードできます。ちなみにサンプルはこのページです。

↓早速、自分のサイトでも使ってみました。

続きを読む "Lightboxのクローン、SexyLightBox"

透過PNGを効果的に使ってみる

透過PNG＋CSSデザインがやってきた！｜web designing 2008年9月

またまた9月号のweb designingからですが、「透過PNG＋CSSデザインがやってきた！」という特集が組まれています。
最近は僕もページを作る際に、絶対配置と組み合わせて透過PNGをよく使うようになりました。IE6がネックなんですが、手軽なJavaScriptもいろいろと公開されてますので、これを機に試してみるのも一興かと思います。
…で、今回は以前にこのブログで紹介した「JavaScriptで今日の日付」という記事を透過PNGを使って再構築してみます。

サンプルはこんな感じです。

続きを読む "透過PNGを効果的に使ってみる"

YouTubeのタグ機能を利用した動画集

AJAX Video Bar｜Web Designing 2008年8月

今回も8月号のWeb Designingの特集、「使い方はあなた次第！未来形Ajax」から１つ紹介してみます。
Google Ajax API を使い「YouTube」の共通のタグを持つ動画のサムネイルを並べることができるサンプルです。「Google AJAX Search API - AJAX Video Bar」というページで使用されています。
このサンプルでは、YouTube内の各動画に付けられたタグをキーワードに、該当する動画をランダムに表示してくれます。もちろんGoogle AJAX Search API を利用しているので動画検索も可能です。

百聞は一見に如かず、サンプルです。

続きを読む "YouTubeのタグ機能を利用した動画集"

iPhoneのメニューアイコンのような glossy.js

canvasタグで画像を劇的に変化させるエフェクト(NetzGesta.de)｜Web Designing 2008年8月

前回チラッと紹介しましたが、8月号のWeb Designingの特集、「使い方はあなた次第！未来形Ajax」はとても勉強になります。いろいろあるサンプルの中から、今回もcanvasタグ絡みのモノを１つ紹介してみます。
このブログでも以前、「JavaScriptで画像加工」という記事で紹介している「NetzGesta.de」にglossy.js というスクリプトがあるんですが、これを使えば、簡単に画像にiPhoneのメニューアイコンのようなエフェクトをかけることができます。

百聞は一見に如かず、サンプルです。

続きを読む "iPhoneのメニューアイコンのような glossy.js"

canvas要素でデータからグラフ作成

多様なライブラリが用意されているHTML5.JP｜Web Designing 2008年8月

8月号のWeb Designingの特集、「使い方はあなた次第！未来形Ajax」でも触れられていますが、HTML 5の草案の仕様として自由にグラフィックスを描画できるcanvasタグが組み込まれており、現段階でもIEを除くモダンブラウザでは、ほぼ対応しているようである。
また、canvasタグを利用したAjaxもすでに誕生しており、IE環境でもcanvasタグの機能をエミュレートするライブラリがいくつかあるので、使ってみようという試みであります。

今回は「Ajaxハジメマシタ」でも取り上げられている「HTML5.JP」というサイトからグラフに関する３種類のライブラリの紹介してみます。
どれも数値を入れるだけで簡単にキレイなグラフを描画してくれます。簡単なモノだったら、わざわざグラフィックソフトを使って作成しなくても充分じゃないでしょうか？（※ただし、IEではエミュレートの関係で表示が少し異なります）

百聞は一見に如かず、サンプルです。

続きを読む "canvas要素でデータからグラフ作成"

JavaScriptを使わずにGoogleマップを表示

Google Static Maps API｜web creators 2008年6月

なんだか急にバタバタし始め、なかなか時間が取れずに結構間が空いてしまいました。
早速ですが、時間もないので困った時のお手軽tipsの紹介です。
Googleマップは非常に便利なので、Webサイトで現地を紹介する時など僕もよく利用させてもらっています。
ただし、JavaScriptで構成されているため、携帯電話やJavaScript非対応の環境では表示することが出来ないのです。
しかし、そこは流石のGoogleで新しく｢Google Static Maps API｣というAPIを公開しました。（web creators 2008年6月号の「WEBデザイン TIPS&TRICKS」で紹介されています）
これを利用すればJavaScript非対応の環境でもGoogleマップを表示することが出来ます。（※JavaScriptを使っていないので動きませんよ！…念のため）

では、サンプルです。

続きを読む "JavaScriptを使わずにGoogleマップを表示"

マウスオーバー画像を簡単に作るJavaScript

知っていると結構便利です｜imagelink.js

バタバタしている内に結構間が空いてしまいました。
またコツコツと更新していきますので、よろしくお願いします。
さて、今回はweb creators 2008年4月号の「WEBデザイン TIPS&TRICKS」に載っていたJavaScriptですが、知っていると結構便利に使えると思うので紹介してみます。

ライブラリは、｢Style Your Image Links｣というページからダウンロードでき、このライブラリを使うと、簡単にマウスオーバー時の画像を作ることができます。
仕組みは、マウスオーバーされた画像に「.imageOver」というクラス名を付けられたspan要素を重ねるようです。
なので、今回紹介する方法以外にも応用が利くと思います。

では、サンプルです。

続きを読む "マウスオーバー画像を簡単に作るJavaScript"

入力した値をチェックするJavaScript

リアルタイムに入力した値をチェック｜Live Validation

以前に「JavaScriptでユーザーに親切なフォーム入力」というタイトルで、フォーム入力時に空欄や形式のチェックを行うスクリプトを紹介しましたが、web creators 2008年5月号の「WEBデザイン即効テクニック76」に載っていたスクリプトもなかなか便利なので紹介してみます。

スクリプトは、｢Live Validation｣からダウンロードでき、このスクリプトを使うと、リアルタイムに入力した値をチェックしてくれるようになります。
ただし、難点というかなんというか…。
例えばメールアドレスなんかだと、
xxx@xxx.xx …打ち込んで、メールアドレスの形式だと確認できるまで、ＯＫだと判断してくれません。
なので、Webに対するリテラシーが高くない人達をターゲットにする場合は、利用しない方が良いかもしれないです。
ただ機能的には、必須・数字・メールアドレス・文字数…などをチェックしてくれるので、使い勝手は結構良さそうです。

では、サンプルです。

続きを読む "入力した値をチェックするJavaScript"

XMLデータをWebページに表示する

Spryを利用してXMLデータをページに表示

ちょっと古いネタですが、web creators 2007 10月号の「TIPS&TRICKS」に載っていたSpry framework for Ajaxを使ってXMLデータをWebページに表示させる仕組みを紹介してみます。

頻繁に更新するデータなどを実際のページから切り離してXMLで管理できるので、クライアントさんが更新作業をする場合などに提案できるかもしれません。
ただし、ソースコードを編集できるクライアントさんじゃないと難しいと思います。また、実際のページのソースは変更されず元のままなので、SEOを重視する場合は不向きです。
まあ、iframでページとは切り離してデータを管理する方法に似ているでしょうか？ 更新システムをちゃんと作るのであれば、CMS Designer等のCMSツールを使用した方が良いでしょう。

では、サンプルです。

続きを読む "XMLデータをWebページに表示する"

JavaScriptでユーザーに親切なフォーム入力

Ajaxによるフォーム入力作業のサポート｜Web Designing 5月号

フォーム入力に関するJavaScriptはいろいろありますが、Web Designing５月号「Ajaxハジメマシタ」に載っていたスクリプトもなかなか便利そうなので紹介してみます。

サンプルでは３つのライブラリが盛り込まれ、ユーザーに親切なフォーム入力が作れます。どんな機能があるかというと…、
１）空欄と入力データ形式をチェック（JSVallidareライブラリ）
２）郵便番号から住所を自動入力（AjaxZip2.0ライブラリ）
３）日付の入力時にカレンダーを表示（protocalenderライブラリ）
…以上の３つです。

早速、サンプルはこちらです。

続きを読む "JavaScriptでユーザーに親切なフォーム入力"

テーブルの列をソートできるようにする

テーブルをもっと便利に使いやすく２｜TableKit

前回に引き続き、Web Designing４月号「Ajaxハジメマシタ」の“テーブルをもっと便利に使いやすく”からもう１つのスクリプトを紹介してみます。

TableKit（僕好みのシンプルでキレイなサイトです）というスクリプトなんですが、各列ごとにソートができるようになります。まさに静から動へのテーブルに変化してしまいます。
使い方によっては非常に便利なデータテーブルが作れそうです。

サンプルはこちら

続きを読む "テーブルの列をソートできるようにする"

マウスオーバーした行をハイライト表示するテーブル

テーブルをもっと便利に使いやすく１｜Highlight table rows

Web Designing４月号の「Ajaxハジメマシタ」に“テーブルをもっと便利に使いやすく”と題して便利なスクリプトが載っていましたので、紹介してみます。

Highlight table rowsというスクリプトなんですが、マウスオーバーした行の色を変えることができます。情報量の多いデータテーブルなどに使うと便利なのではないでしょうか。
また、最近は結構いろんなページで使われているので、見たことがある人も多いでしょう。

サンプルはこちら

続きを読む "マウスオーバーした行をハイライト表示するテーブル"

JavaScriptで文字サイズを変更２

カレント表示対応版｜styleswitcher.js

以前、｢JavaScriptで文字サイズを変更｣という記事を書きましたが、カレント表示（現在どのサイズで表示されているか）でつまずき、結局画像を使ったボタンにして、どのサイズで表示されているか？というコトが分からないサンプルを紹介しました。

実際に文字サイズを変更するような案件が出てきたコトもあり、何か対策がないものかと考えていると、灯台もと暗しというか何というか…、非常に簡単であるコトに気づきました。
styleswitcher.jsで読み込むalternate stylesheetにそれぞれのボタンの状態を記述すれば良いだけだったんですね。

…という訳でサンプルです。

続きを読む "JavaScriptで文字サイズを変更２"

JavaScriptでスライドショー

高機能な画像ビューア｜JonDesign's SmoothGallery

前回はFlashを使った画像ビューアを紹介しましたが、今回はJavaScriptでスライドショーができる画像ビューアを紹介してみます。

JonDesign's SmoothGalleryというサイトで紹介されていますが、かなりのスグレモノなので要チェックです！
こちらの方は更新が多少手間かもしれませんが、それでも数分で完了するでしょう。何より操作感が素晴らしいです。JavaScriptでここまでできるのなら、プログラムに不安のあるデザイナー（自分のコト）が力技のFlashで作る必要など要らないんじゃないかと思ってしまいます。

ともあれ、サンプルはこちら

続きを読む "JavaScriptでスライドショー"

JavaScriptで画像加工

ソフト要らずで更新が手軽！｜NetzGesta.de

今月号のWeb Designingに載っていたJavaScriptなんですが、結構使えるので紹介してみます。

写真をそのまま配置すると何だか味気なくて、角を丸くしてみたり、エッジをギザギザにしてみたり、ポラロイド風に加工してみたり…、
最近ではiTunesなどの影響で反射した映り込みを付けてみたりと画像ソフトを使っていろいろ加工していると思います。

しかし、NetzGesta.deというサイトで紹介しているJavaScriptを使えば、簡単なんですね！
右の本では５種類のJavaScriptが紹介されていますが、その中から実際に使えそうな３種類を紹介してみます。

百聞は一見にしかず、サンプルはこちら

続きを読む "JavaScriptで画像加工"

JavaScriptでアコーディオンメニュー

画像を利用したスライドメニュー｜imageMenu.js

またまた１月号のWeb creatorsからの使えそうなテクニックを…。
前回はFlashでauのオフィシャルサイトのようなアコーディオンメニューを作ってみましたが、今回はJavaScriptを使って同じようなモノを作ってみます。
サンプルはPhatfusionというサイトで確認するコトができます。肝心のJavaScript、imageMenu.jsのダウンロードページはないので、ブラウザにソースを表示してコピー＆ペーストして下さい。
また、mootools.jsも必要なのでサイトからダウンロードします。その時、Core、Class、Class.Extras、Array、String、Function、Number、Element、Element.Event、Element.Filters、Element.Slectors、Fx.Base、Fx.Css、Fx.Elements、Fx.transitions<をチェックして下さい。

サンプルはこんな感じです。

続きを読む "JavaScriptでアコーディオンメニュー"

クリックでスライド表示するコンテンツ

タブメニューでスライドするコンテンツ｜jQueryのCoda-Slider

今月のWeb creatorsは、「いま流行のWebデザインを身につける」と題して、いろいろと使えそうなAjaxやActionScriptを紹介しています。
まずは、タブをクリックするコトで、コンテンツをスライド表示させるjQueryのCoda-Sliderを紹介してみます。サイトから最新版のソースをダウンロードできますので、試してみて下さい。うまく作れば、こんなサイトも夢ではありませんよ！

映画やドラマで、刑事とか探偵が昔の新聞などをプロジェクタのようなモノに映して「ザッサー、ザッサー」と探し読みしている雰囲気がありませんか？（分かりにくい説明ですいません）

サンプルはこんな感じです。

続きを読む "クリックでスライド表示するコンテンツ"

JavaScriptで階層型プルダウンメニュー

Ajaxで作る階層型メニューバー｜SpryMenuBar.js

以前、「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介しました。するとこの前、階層を増やしたサンプルはできませんか？という問い合わせがあり、試しに作ってみたしだいです。

以前プルダウンメニューを作る際、実は右の本に出ていたSpryMenuBar.jsを使って作ろうと思っていました。ただ、CSSの設定が結構複雑でちょっと触るとレイアウトが崩れてしまうし、ウチの環境では、IE6で２階層目のメニューがズレて表示されてしまうので、別の方法で作りました。それが前回のDropDownMenu.jsを使った方法です。
しかし、DropDownMenu.jsで３階層目を作ろうとした所、結構大変だという事が分かり、もう一度、SpryMenuBar.jsに挑戦せざるを得なくなりました。
SpryMenuBar.jsは、Adobeが提供しているフレームワーク（Ajaxライブラリ）、Spryを利用します。今回はサイトから一式ダウンロードしなおして使ってますが、ダウンロードするには、AdobeのＩＤとパスワードが必要です。
また、Dreamweaver CS3には、標準で組み込まれているようなので、もっと簡単に設置できるのではないでしょう？（…いいなぁ）

サンプルはこちら

続きを読む "JavaScriptで階層型プルダウンメニュー"

ポップアップ表示するツールチップ

jQueryのTooltip

Web creators 12月号に載っていたAjaxライブラリ、jQueryのTooltip.jsを紹介してみます。
ポップアップ表示するツールチップです。しかし、ウチの環境では本の通り作ってもIE6でうまく表示されませんでした。

下記のJavaScriptを外部ファイルにしているんですが、どうもそれがIE6ではうまく読み込めないようです。
なので、HTML内に直接記述しています。
$(function() {
/* Tooltipの表示をa.tooltipに限定 */
$('a.tooltip').Tooltip({
/* 表示位置の指定 */
top: 0,
left: 10,
/* タイトルと本文の区切り文字 */
showBody: "-",
/* URL表示ブロックの可視・不可視 */
showURL:false,
/* マウス移動時のTooltipの動き */
track:true
});
/* a.tooltipのクリック時、
href="#"によるアンカー移動をキャンセル */
$('a.tooltip').click(function(){ return false; });
});

また、本のサンプルではcssで透過処理をしていますが、それもIE6では不具合があるようです。
もう１つ、僕のサンプルでは背景に画像を使っています。ここでもIE6は不具合があって、うまく表示されなかったので不細工な感じで回避しています。まあ、実用にはもう少し試作を作ってみないといけないかなと…。

まっ、とりあえずサンプルはこちら

続きを読む "ポップアップ表示するツールチップ"

Ajaxで作る立体的回転式メニュー

Flashを使わなくてもここまでできます｜MooRevolver.js

Web Designing 12月号に載っていたAjaxライブラリ、MooRevolver.jsを紹介してみます。
Flashを使わなくても立体的に回転する演出が可能です。本ではメニューとして紹介されていますが、メニューでなくてもちょっとした演出として使えるのではないでしょうか？
僕のサンプルでは、透過gifを使っていますが、IE6を対象ブラウザから外せるのであれば、pngを使用した方が、効果的だと思います。（IE6とpngの組合せでは、拡大縮小がバグってしまいます。なにか対応策があるかもしれませんが…。）

サンプルはこちら

続きを読む "Ajaxで作る立体的回転式メニュー"

MooToolsのFancy menu

項目の幅に合わせてサイズが可変するスライドバー

昨日に引き続き、Web creatorsの記事からMooToolsライブラリのFancy menuを紹介してみます。ちなみにWeb creators９月号に載っています。サンプルデータはdevthoughtというサイトでダウンロードできますので、試してみて下さい。
カーソルに合わせてFlashっぽい動きで背景がスライドしてくる動きが楽しいです。メニュー項目にさりげない演出を加えたい時はうってつけだと思います。
僕も今回、中部ジェイ・シィさんのサイトで使わせていただきました。メニュー項目をいくつかカテゴリー分けしたい場合、デザインだけでなく、演出面でも差別化できるので良いのではないでしょうか。

サンプルはこちら

続きを読む "MooToolsのFancy menu"

今更なんですがThickBox

jQueryライブラリを使った画像のスライドショー

かなり以前にこのブログでもLightBoxを紹介しましたし、この前もLightWindowというAjaxライブラリを紹介してしまったので、今更という気もしないでもないんですが、Web creators４月号（結構古い記事ですいません）に紹介されていたように、デザインをカスタマイズして格好良くなったので紹介してみます。

実際、LightBoxに比べてファイルサイズが抑えられていたり、HTMLファイルを表示させることができたりとメリットもあります。ThickBoxの配布ページからダウンロードして試してみる価値もまだまだあるのでは？とも思っての紹介です。

サンプルはこちら…

続きを読む "今更なんですがThickBox"

住所自動入力フォーム

Ajaxな住所入力フォーム｜AjaxZip2

ブラウザが賢くなっているので、フォームの入力時に途中まで入力すれば、いくつか候補が出てその中から選択するだけでＯＫ、現状でもそんなに不便さは感じない各種入力フォーム。
なので、今回紹介するAjaxはそんなに便利じゃないのかもしれませんが、郵便番号を入力すれば、都道府県と市町村まで自動入力してくれるという代物です。

Kawa.netさんの「AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）」という記事に詳しく書かれていますし、そこでダウンロードもできますので、試してみて下さい。
※データ量が多いので、サーバにアップするのに多少時間がかかります。

サンプルはこんな感じです…
とりあえず郵便番号だけ打ち込んでみて下さい。

続きを読む "住所自動入力フォーム"

Flash上にプルダウンメニューを重ねる

swf上にHTML要素をレイヤー表示する際の解決策

少し前に「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第２弾です。

この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。

何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろ本を眺めていた。

するとやっぱりあるんですね。Ｗeb creatorsの10月号に載ってました。
<object>〜</object>の中に、
<param name="wmode" value="transparent">
というパラメータを追加して、
Flash要素より、HTML要素（今の場合はプルダウンメニュー）のz-index設定の数値を大きくしてやるコトで実現できるようである。

サンプルはこちら

続きを読む "Flash上にプルダウンメニューを重ねる"

JavaScriptで文字サイズを変更

CSSを切り替えるJavaScript｜styleswitcher.js

ユーザビリティを考えると、文字の大きさを可変できるコトは必須だと思う。僕もCSSを組む時は、WindowsのIEでも文字サイズを可変できるように相対的な数値を指定している。ただ、文字サイズを変えるメニューがどこにあるのかも分からないユーザーも多い。特に高齢者で大きい文字の方が読みやすい方たちに多いと思う。
また、ブラウザで一律に文字を拡大してしまうと、レイアウトが崩れてしまうので、デザイナーにとっては必要以外のトコロは元のサイズのままで、できるだけ体裁を保ちたいという欲求もある。

そこで今回のJavaScriptの登場です。
A List Apartが紹介しているstyleswitcher.jsというJavaScriptが有名らしい。
何ができるかというと、JavaScriptを使ってCSSを切り替えるコトができる。これを使って文字のサイズ別CSSをいくつか作り、切り替えようという寸法です。
早速、ページの下方にある「Download styleswitcher.js」というリンクからJavaScriptをダウンロードして使ってみる。

サンプルはこんな感じです。

続きを読む "JavaScriptで文字サイズを変更"

スライドインしてくるメニュー

Sexy sliding JavaScript side bar menu｜prototype.js

今月号のWeb Designingに載っていたAjaxライブラリ、Sexy sliding JavaScript side bar menu（長ッ！）を紹介してみます。
画面右端にタブが表示されていて、クリックするとメニューエリアがスライドして表示されます。ここまででもカッコイイのですが、例えば、Lightboxのようなライブラリと組み合わせる事で、もう１つ凝った演出も可能になるというのだから、使わない手はないと思います。
（僕の場合、Lightboxまで使うと演出過多のような気がしたので、シンプルなサンプルにしましたが…）

サンプルはこんな感じです。

続きを読む "スライドインしてくるメニュー"

Snap Shots でリンク先表示

JavaScriptはサイトで入手｜Snap Shots

いろいろサイトを見ていると、小さなウィンドウが出現して、リンク先のプレビュー画像が表示するモノがある。
なんでもSnap Shotsというモノらしい。
専用のAjaxライブラリがあるのかな？と思っていたら、Snap Shotsのサイトでいくつかのフォームに答えるとJavaScriptが入手でき、それをHTMLソースにペーストで簡単にできあがってしまう便利な代物だと分かる。
このブログは、ココログのプラスなのでHTMLテンプレートは編集できず、試せないのが残念なのだが、ウチのサイトの制作実績のページで試してみていますので、良かったら見てください。（※近頃リンク先のサムネイル表示というモノがあまり喜ばれていないようなので一旦取り外します。08.04.23）

ちなみに各種設定方法はヘルプ／ＦＡＱページに載っています。内部リンクにもSnap Shotsを表示させたり、Snap Shotsを表示させないリンクを作るコトもできます。
さて、最後に１つ重要なコト！
htmlがcharset=Shift_JIS"の場合は、WindowsのIEで表示されませんが、入手したJavaScriptにcharset="utf-8"と追加してあげると問題なく表示されるようになります。
（参考：「RYD-blog」より）

興味のある方は一度試してみるのも面白いかと思います。祈健闘！

JavaScriptでプルダウンメニュー

ドロップダウンメニュー｜DropDownMenu.js

プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューです。
タブの「分割コード」をクリックすると、JavaScript、css、htmlのソースが記述されているので、コピー＆ペーストで使えるようになっています。
いままでプルダウンメニューをいろいろと試してみたんですが、ブラウザによる表示のズレもなく、画像も問題なく使えました。何よりいつも使っているJavaScript（画像のロールオーバー時に使用）との相性も良かったので気に入っています。
編集も簡単なのでオススメの一品です。

では、サンプルです。

続きを読む "JavaScriptでプルダウンメニュー"

なんでも表示できるマルチメディアビューア

マルチメディアビューアで動画を表示（２）

９月号のWeb Designingに載っていたAjaxライブラリ、LightWindowです。
前回も言いましたが、画像イメージだけでなく、Quicktime Movies、Flash、PDFなどもリンクタグだけでスライド表示にするコトができ、非常に便利なライブラリです。
今回は、flvファイルを読み込んだswfファイルのビューアとして使ってみます。

サンプルはこんな感じです。

続きを読む "なんでも表示できるマルチメディアビューア"

ストリーミングビデオプレイヤー

マルチメディアビューアで動画を表示（１）

よく使うAjaxにlightboxがあります。画像の拡大表示がポップアップウィンドウやFlashを使うより簡単にできるので、よく利用させてもらっています。
ただ、画像の替わりにswfファイルやhtml、動画などを表示できないかと思い、うってつけのAjax、thickboxを試したりも…。
しかし、９月号のWeb Designingにもっと使い勝手の良さそうなAjaxが出ていました。こちらも大変便利なようです。これを使えば、画像データはもちろん、swfファイルや動画ファイル、外部htmlやpdfまでなんでもビューアの中に表示させるコトができてしまう！…世の中、いろいろ便利なモノを作ってくれる人がいて感謝します。
…で、早速使ってみようという訳ですが、今回は動画の表示に絞り、準備段階として動画をFlashで扱えるflvファイルに変換するコトから始めてみます。

flvファイルの作り方、Flashに読み込んでの制御の仕方は右の本に詳しく出ています。まあ、Flash Player7／Flash MX2004の時代の技術ですので、このページでは詳しく説明しませんが、動画をFlashに取り込んで他のmcと同じように扱えるというのは画期的ですよね。
（以前かかわった仕事でサイトのトップページに自社のＣＭ動画を入れたいという案件があって、この方法を提案したんですが理解されず、納入先でwmvファイルを埋め込まれてしまいました。…残念。）
…という訳で、flvファイルを組み込んだ簡単なswfファイルを作ってみました。

サンプルはこんな感じです。

続きを読む "ストリーミングビデオプレイヤー"

RSS Feed をHTMLページに組み込む２

Ajaxで作るRSSリーダー｜Google AJAX Feed

以前、HTMLにRSSフィードを表示させる仕組みとして、Feed2JS を紹介しましたが、もっと手軽でカスタマイズも効く方法がありました。
右の本にも紹介されていますが、Google AJAX Feed を使う方法です。
設定の仕方に関しては下記のサイトに詳しく書いてありますので、興味があれば参考にしてください。
Google AJAX Feed API を簡単カスタマイズ｜webnote

ちなみに僕の作ったサンプルです。

続きを読む "RSS Feed をHTMLページに組み込む２"

Flash を簡単に設置するJavaScript

Flashの代替表示｜swfobject.js

Flashを埋め込む仕組みもいろいろあるようですが、僕の場合、swfobject.jsというJavaScriptを使った方法をこのところ必ず使わせてもらってます。
ダウンロードと使い方は、trick7.com blogさんの「お手軽にSWFObjectでswfを埋め込む方法」という記事がありますので、参考にしてみてください。
何と言っても代替表示の作成が簡単だし、単純な一枚絵だけじゃなくHTMLを組み込めるので、ＳＥＯにも効果を発揮するトコロが画期的で気に入ってます。

たとえば、下記のようなFlashで作ったメニューの場合に、画像とHTMLでメニューの代替表示を作っておき、Flash Playerが対応していない時にそちらを表示させるようにしておきます。ソース上にはHTMLで書かれているメニューが存在しているので、Flashが苦手なＳＥＯにもちゃんと効果を発揮します。

サンプルはこんな感じです。

続きを読む "Flash を簡単に設置するJavaScript"

RSS Feed をHTMLページに組み込む

「Feed2JS」を利用してRSS フィードを HTML として表示させる仕組み

ウチのサイトのトップにこのココログのRSSリーダーのようなモノを付けています。
今まではmoondakotaさんのRSS FeedをJavascriptでウェブページに表示という記事を参考に設置していたんですが、たまに読込処理がうまくいかないのか空欄になってしまうので何か他に方法がないものかと思ってました。
また、仕事でもブログのRSS フィードを新着情報として使えないか？という話があったので、下調べ＆実験をしておきたかったと言うコトもあり…。

少し調べていたトコロ、小粋空間さんに「RSS Feed（フィード）を表示する」という記事を発見！
こちらはFeed2JS はフリーのツールをダウンロードし、サーバーにインストールして使うというモノなので、外部サーバーを経由しない分、読込処理も安定するかも？！と思い、早速設置してみる。
ダウンロードからインストールまでは小粋空間さんの記事に詳しく書いてありますので、ここでウダウダ書くよりも、そちらを参考にしていただいた方が分かりやすいと思います。

難点を言えば、カスタマイズの仕方がよく分からないコトです。
cssや日付などは何とかカスタマイズしてみたのですが、本当は左側に日付、右側にエントリーのタイトルという新着情報に良くあるようなレイアウトにしてみたいのですが…。う〜ん、難しいモンですなぁ。

クリックしたタブに応じて表示内容が変わる

タブで内容を変える｜Tabbedpanels JavaScriptライブラリ

ウチのサイトのprofileページにタブで表示内容を切り替えるdojoというライブラリを使っていたのだが、最初は右の本に載っていた Tabbedpanels というライブラリを使おうと思っていた。
しかし、floatの問題や他のJavaScriptとの相性の問題で重たいdojoを使っていたのであります。いろいろと試行錯誤やズボラな裏技を駆使（？）し、なんとかTabbedpanelsライブラリで表示可能となった。
こっちの方がタブのカスタマイズも利くので、僕にとっては重宝しそうである。今回起こった問題と対応策はまた次のお話ということで…。

サンプルはこんな感じです。

続きを読む "クリックしたタブに応じて表示内容が変わる"

クリックひとつでサブメニューをon/off

サブメニューを表示・非表示｜script.aculo.us JavaScriptライブラリ

ページの更新が適度にあり、サブメニューが増えてしまうようなサイトに使えないかなと思い紹介してみます。
script.aculo.us というJavaScriptライブラリの機能の１つなんですが、クリックでコンテンツを表示・非表示してくれます。使い方としては、初期画面では最新のサブメニュー５件くらいにしておいて、クリックすると過去のサブメニューが表示されると言うのも可能かと…。

サンプルはこんな感じです。（サブメニューが画像のボタンになっているという設定です。左側はコンテンツ自体が下に移動します。右側は表示エリアが下に広がります。）

続きを読む "クリックひとつでサブメニューをon/off"

コンテンツをアコーディオン形式で表示

コンテンツをアコーディオン形式に｜Rico JavaScriptライブラリ

もう１つ、Ricoというライブラリを使ってコンテンツをアコーディオン形式で表示できます。これも非常に便利ですので、興味のある方は参考にしてみて下さい。
使い方は「WEBデザインをはじめMT・Firefox・WEB2.0関連情報等の備忘録」の該当する記事を参照していただくとして、まずはいつものように「サンプルはこんな感じ」です。

続きを読む "コンテンツをアコーディオン形式で表示"

フェードイン切替のスライドショー

Flashを使わずにフェードするスライドショー｜Rico JavaScriptライブラリ

昨日紹介したRicoというライブラリを使うと、フェードインで画像を切り替えるFlashのような演出も可能です。これも右の本に載ってますので、興味のある方は参考にしてみて下さい。しかし、画像が切り替わるだけですが、Flashを使ってこの程度の演出しかやっていないサイトもまだまだありますよね。そんなサイトにはうってつけだと思います。
１つ気がかりなのは、windowsのIE6で表示させてみると、最初に全画像を読み込むのが見えて多少不細工です。ウチの環境が悪いんですかねぇ…。何か対応策があるのでしょうか？

サンプルはこんな感じです。

続きを読む "フェードイン切替のスライドショー"

画像を使わずに丸角を作る

画像なしでDivの四隅を丸くする｜Rico JavaScriptライブラリ

実際にはまだ仕事で使ったコトはないんですが、画像を使わずに丸角を作るJavaScriptライブラリを紹介します。右の本にも出ていますが、Ricoというライブラリです。
単色の背景にしかなりませんが、ちょっとしたアクセントになります。また、どの角を丸くするかという指定もできるので、工夫次第では面白い使い方もできそうです。欲をいえば丸角のサイズも指定できるといいんですけどね。jsのソースをいじれば変えられるのかな？！

サンプルはこんな感じです。

続きを読む "画像を使わずに丸角を作る"

画像のスライドショーにもなります

実はドラッグすると動かせます｜highslide JavaScriptライブラリ

４月号のWeb Desingningに大変便利なAjaxライブラリが幾つも載っていた。どれもこれも実践で即役立ちそうなモノばかりだったんですが、前に紹介した画像アルバムとはまた違うテイストを持ったライブラリを紹介してみます。
このhighslideというライブラリも表示画像に拡大画像がリンクされている作りになっています。クリックすると拡大画像が読み込まれるのですが、今度はドラッグで動かせます。また、矢印キーを押すコトでスライドショーにもなります。こちらはこちらで大変便利かなと。
…という訳で、ウチのサイトの写真のページに使いました。

サンプルはこんな感じです。

続きを読む "画像のスライドショーにもなります"

プログラム不要のリッチな画像アルバム

JavaScriptでカンタン画像アルバム｜Lightbox

このJavaScriptライブラリもいつか使ってみたいと思っていました。設置も非常に簡単です。ヘタなFlashよりよっぽど見栄えがいい。工夫しだいでは凝った使い方もできるのではないかと思っています。
とりあえず今回はウチのサイトのイラストレーションのページで使ってみました。
実際に使い場合は付属のcssやjsの階層を変えると思いますが、その時のパスだけ気を付けてください。

サンプルはこんな感じです。

続きを読む "プログラム不要のリッチな画像アルバム"

ページは変えずにタブで内容を変える

プログラムの記述なしにタブ切替｜dojo JavaScriptライブラリ

右の本に載っていたdojoというJavaScriptライブラリを使って、「htmlページは変えずにタブで内容を変える」というコトをやってみました。
仕事で会社概要のページを作る機会も多いんですが、大きくないトコロだとあまりページが埋まらないんですよね。１ページにまとめて表組みにしたりもするんですが、味気なくなってしまうコトもあります。
そんな時、このライブラリーは使えるのではないかと思ってました。今回、ウチのサイトの事業所概要のページで使っております。

サンプルはこんな感じです。

続きを読む "ページは変えずにタブで内容を変える"

Googleマップを設置しよう

サイトで使うTips｜GoogleマップAPI

以前、Googleマップを簡単に貼り付けられるコードを作成してくれる「地図Ｚ」というサイトを紹介したのだが、こちらのサイトもかなり優れモノである。
「Google Maps簡単作成ツール：GMapCreator」というサイトなのだが、こちらも入力項目を埋めてやればHTMLコードを書き出してくれるし、ブログ用に便利なiframe用のコードまで書き出してくれる。
気に入っているトコロは、コントローラーをカスタマイズができるトコロと余計な額縁が付かないので、サイトの雰囲気を壊すコトがないトコロ。
まあ、座標の指定方法が分からなかったので、HTMLコードに手動で入れてやる必要があったのだが、それはいくらでも知る方法があるので（前記の「地図Ｚ」でも簡単に分かります）、あまり問題ではないと思う。

サンプルはこんな感じです。（※続きを読んでください）

続きを読む "Googleマップを設置しよう"

JavaScriptで今日の日付

ウチのサイトで使うTips

現在のウチのｗｅｂサイト、おおもとは２年半程前に独学のＦｌａｓｈで作ったので、今にして思えば、ずいぶんと不格好なサイトになっている。所々つぎはぎ程度な修正はしてきたのだが、そろそろ全面的にリニューアルしたいと思う今日この頃。
最近はCSS、JavaScriptなども理解しながら設置できるようになってきたし、魅力的なAjaxライブラリもいろいろと出てるので、使い易く機能的で見栄えの良い物にしたいモノである。

…というわけで、しばらくはこのブログで、リニューアルするウチのｗｅｂサイトで使うTips等を紹介していきます。
第一弾はJavaScriptを使って表示する「今日の日付」です。サンプルはこんな感じです。（※続きを読んでください）

続きを読む "JavaScriptで今日の日付"

地図Ｚ

Google Mapは非常に便利だと思う。
なんでもAjaxなるモノを使うのだと云う。 Ajaxとは言っても新しい技術ではなく、 JavaScriptとXMLから成っているモノらしいので、プログラマーでない僕なんかでも手も足も出ないという訳ではないようだ。
Google Mapを貼り付ける方法もいくつかあるのだが、一番手っ取り早い「地図Ｚ」というサイトでタグを作り↓に貼り付けてみた。サンプルはこんな感じです。（※続きを読んでください）

続きを読む "地図Ｚ"