Good Sleep｜Webデザイナーの日々のスキマ

６月、最初で最後のエントリー

Yama — 2009-06-30T10:57:01+09:00

あっという間に６月も終わりですね。

今月は仕事ではなく、私事でバタバタしており、全然更新できませんでした。申し訳ないです。
もうしばらくバタバタが続きそうですので、ご了承下さい。

健康が第一ですので、皆さんご自愛下さい。

Google Chartsのグラフを簡単に

Yama — 2009-05-17T18:07:07+09:00

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

Yama — 2009-05-15T20:48:03+09:00

いろいろできる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のプラグインでツールチップ

Yama — 2009-05-14T21:09:54+09:00

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」のページからデータをダウンロードして、色々試してみて下さい。

ちょっとリニューアル

Yama — 2009-05-10T10:38:08+09:00

ウチのサイトもリニューアルしてから２年が経ち、HTMLの構成的にもCSSの記述的にも少し改善してみました。（アッ、もちろんデザインも少し変えました）
…とは言っても、コンテンツ自体は全く同じなので新鮮味はありませんが。

本当は連休中にアップしたかったんですが、4/29から突然の歯痛に悩まされたり、ちょっと遊びに出かけたりでかなりズレ込んでしまい…。
まあ、今まで使っていたAjaxを無理矢理使っているトコロもあるので、もう少し調整が必要ですが。

とりあえず、ちょっとリニューアルというコトで。

…ついでに、このブログもサイトに併せて、ちょっとリニューアルしてみました。