制作実績「有限会社 永大ホーム」さん

株式会社リンクネット様からお話をいただき、有限会社 永大ホーム様のデザイン・コーディングを担当させてもらいました。

クライアント様のご要望が比較的スタイリッシュなモノでしたので、画像や色使いを吟味し、シンプルかつ品良くまとめました。
ただし、ターゲットは、家を建てたりリフォームしようとしている一般の方々なので、冷たい印象にならないよう適度な柔らかさも持たせています。

また今回、いくつかのページはクライアント様がご自身で更新なさるというコトで、CMSツールを用いました。その際のプログラム的な部分は、株式会社リンクネット様に制作していただきました。

URL：http://www.eidaihome.com/

制作実績「石川被害者サポートセンター」さん

ひょんなコトからお話をいただき、今回リニューアルを担当させていただきました。

既存の内容を細かく見てみると、意外と内容が多く、ターゲットも支援を必要とする方、ボランティアで活動していただける方、賛助会員・寄付にご協力していただける方など幅も広い。
しっかり構成を決めて作らないとツギハギだらけで雑多な感じがしてしまうので、まずサイトの構成をスッキリとまとめる作業から始めました。

次にデザイン。
全体をアースカラーでまとめ、優しく見やすく分かりやすいサイトになるよう心がけました。
「文字を多くしたくない」という要望もあり、イラストや挿絵をなるべく多く使うようにし、瞬間的に内容が分かるページづくりを目指しました。

機能的にも、きっちり細部まで丁寧に仕上げましたので、どなたにでも分かりやすく親切なサイトになるよう心がけています。

URL：http://www.ishikawa-vsc.org/

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

ちょっとリニューアル

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

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

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

続きを読む "ちょっとリニューアル"

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

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

これまでは手作業で、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要素にも応用できるかも？
今度実験してみます。

CGIのカレンダーを2ヶ月表示させる

cgi designさんのsche38.cgiをカスタマイズ

簡単に管理・更新できる営業日カレンダーをサイトに載せたいという案件があり、いろいろと調べてみました。
フリーのCGIでも結構使える物が多いんですが、シンプルな機能で良かったので、cgi designさんの「特定日を色付でき、カレンダーをインラインフレーム形式で表示するCGI（sche38.cgi）」を使ってみるコトに…。

まずは、仕様ページにダウンロードファイルと設置手順・使用方法が書かれているので、参照して下さい。

１ヶ月だけ表示させるのなら、このままでOKなんですが、今回３ヶ月表示させたいという要望があり、ネットで調べて、ネットショップ作成支援さんの「CGI営業日カレンダー2ヶ月表示の作り方 」というページを参考にしました。
ただ、この方法だと毎月カレンダーを手作業で更新しなければならず、クライアントは難色を示すだろうと考え、簡単な（…お粗末な、とも云う）JavaScriptをかまして自動的に更新できるようにしてみました。

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

続きを読む "CGIのカレンダーを2ヶ月表示させる"

制作実績「九九夜話」さん

きものスタイリスト 秋月洋子さんと銀細工職人 山口緩奈さんが始められたブランド「九九」。「九九」では、お二人で作られた銀細工の帯留を取り扱っております。

「九九」の商品と秋月洋子さんの活動を紹介するサイトが、この「九九夜話」になります。非常にシンプルで品良くまとめたつもりです。…いかがでしょうか？
シンプルなデザインですが、機能的にはしっかりこだわって作っております。そのあたりの抜かりはございません。
秋月洋子さんのブログ『日々のこと。』もありますので、ぜひ訪れてみて下さい。

URL：http://www.ququyawa.com/

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

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

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

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

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

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

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

jsRSS++｜大黒屋本舗

ブログなどのRSS Feed を表示させる方法はいろいろあります。
このブログでも、下記のように過去に何回か紹介しましたが、なかなか表示状態のカスタマイズが難しいかったりするんですよね。

・RSSリーダー2(2005.07.18)
・RSS をHTMLに組み込む(2007.06.20)
・RSS をHTMLに組み込む２(2007.08.06)

そこで登場するのが、「大黒屋本舗さんのjsRSS++」です。
CGIなので、多少の知識は必要ですが、各ファイルに対するパーミッションの設定が分かるくらいで大丈夫です。
テンプレートを自分で作るコトができるので、好きなように表示状態をカスタマイズできて、非常に便利だと思います。…もっと早く知っていれば良かったです。

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でプルアップメニューっぽくスライド表示"

外部ファイルで内容を管理するFlashメニュー

Flashを起動せず更新可｜web creators 2008 7月号

バタバタしておりまして、すっかり更新をサボっております…。
少し古いネタで申し訳ないんですが、今回はweb creators 2008 7月号の「動くサイト、感じるサイトをつくる」という特集に紹介されていた「外部ファイルで内容を管理するスライドメニュー」を作ってみます。
ボタンテキストや読み込み画像を外部ファイルで管理しているので、更新も楽ですし、AS2.0を使用しているので、プログラムが苦手な方でも難しくないハズです。

何はともあれ、サンプルです。

続きを読む "外部ファイルで内容を管理するFlashメニュー"

カラー写真をセピア色にして古くさせるサイト

幕末古写真ジェネレーター｜web creators 2月

あけまして（…数日経ってしまいましたが、）おめでとうございます。本年もよろしくお願い申し上げます。

さて、今年１発目なので、サクサクっとしたテクニックを１つ。web creators 2009年2月号の「Web Design Style-UP Tips」に紹介されていますが、カラー写真から手軽に古い写真を作成できるサイトを紹介してみます。
「幕末古写真ジェネレーター」というサイトに元の画像をアップロード、またはURLを入力して、「古写真風にする」をクリックすると、簡単にカラー写真が古い写真に変換されます。

実際に下の画像を変化してみます。

↓↓↓こんな感じです。↓↓↓

非常に手軽でクオリティも高いので、興味が湧けば是非お試しください。

PCサイトをケータイで見る裏技

Google Wireless Transcoder

今回もまたまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
ケータイのGoogleで検索すると、PCサイトだと自動的にCSSを省略して余計な装飾が省かれ、長いページは自動的に分けてくれます。今回はこのサービスを利用して、PCサイトをケータイ用に手軽に変換してしまおうというテクニックです。

方法は簡単です。
例えば、変換したいURLが、http://www.ex-yz.com/index.htmlだとすると、
http://www.google.com/gwt/n?u=http://www.ex-yz.com/index.html&_gwt_noimg=1
とし、アクセスするとCSSが省略され、左下のようなケータイで見やすいサイトに変換されます。

右のようなQRコードをPCサイト上に配置して、ケータイへ誘導するコトも効果的なので、利用しない手はないでしょう。
ただし、この方法で変換した際にしっかり見えるようにするには、正しいコーディングでサイトを作る必要があります。適正なマークアップと正確なCSSを日頃から心がけておきましょう。

ロールオーバー時に動きを与える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"

ページが見つからない時のページを作る

404 Error - Fot Found の対応策｜web creators 8月

web creators 8月号の「WEBデザイン スタイルアップTips」に載っていますが、サイトをリニューアルする際に、元のページのファイル名を変えたり、階層を移動したり、削除してしまわなければならない場合も出てきます。
しかし、元のページをブックマークしている人もいるだろうし、元のページがYahooやGoogleなどの検索サイトに登録されている場合もあると思います。
…で、せっかくアクセスしてくれた人に下記のような「Not Found」と書かれたページを表示しまえば、たいがい見るのを辞めてしまいますよね。

そこで対応するエラーページをきちんと作っておきましょう。
仕組みは簡単です。まず、エラーページを適当な場所（仮に「error/notfound.html」とします）に作ります。
次に、「.htaccess」というファイルを作ります。ただし、Windowsでは拡張子から始まるファイルを作成できないので、htaccess.txtなどとしておき、アップロードした後に名前を変更するようにしてください。
…で、肝心の「.htaccess」には、
ErrorDocument 404 /error/notfound.html
という１文を書き込むだけです。
※エラーページに設定した階層にあわせてください！

これでリンク切れのページにアクセスした際に、下記のようなページに導くコトになり、見ている人に親切なサイトになります。

Photoshop でアンチエイリアスなし（MacOS 10.5）

Webの仕事では、ページサンプルのデザインを作る仕事もよくあります。まず、トップとセカンド（フォーマット）を作ってOKが出たら、それを元にコーディング、という流れです。
デザインする際、文字が画像なのか流し込みのテキストなのか判るように（本当はWinXP IE6or7の画面と同じようになるように）、流し込みのテキストはアンチエイリアスなしの状態で表示するように作るコトが多いです。
…で僕の場合、ページのデザインをする際、慣れているのでPhotoshopを使っています。

（前置きが長くなりましたが）
この前、OS をMacOS 10.5に、Photoshop をCS3 にアップグレードしたんですが、アンチエイリアスなしのテキストを入力する際に少々問題発生！…ガタガタになってしまい、キレイに表示できないではありませんか？！
これまでだと、MSゴシックで12pxに設定すれば、キレイなアンチエイリアスなしの文字が表示できていたんですがねぇ…。

しかし、調べてみると解決策はありますね！
「栃木県那須塩原市のWEB制作｜Re:design アールイーデザイン」というページで紹介されていますが、MSゴシックで11pxに設定すれば良いとのコト！ただし、このままだと文字間隔が詰まり過ぎているので、トラッキングを90に設定するコトで12pxと同じ程度の文字間隔になります。

ちなみに、少し大きめの14px の場合は（MacOS 10.5・Photoshop CS3の環境でしか試していませんが）、小塚ゴシック Proを使うとキレイに表示できました。

制作実績「鶴一屋」さん

Webの仕事を本格的に始めたのが2005年。
そんな右も左も解らない頃に、いしかわSOHOプラザの発注情報を見てアクセスしたトコロ、鶴一屋のご主人から連絡があり、トップページのデザインをさせてもらいました。
それから３年半。お歳暮ギフトのページを更新する際にあたって、サイト自体をリニューアルしたいというお話があり、今回は構成・デザイン・コーディングとまるごと担当させていただきました。

ふだん制作会社の下請け仕事が多いので、企業や学校などのサイトを作成するコトが多く、ウェブショップというのは不慣れな分野なんですが、商品のターゲット層に合わせて、落ち着いた色使いと分かりやすいサイト構成にしました。また、自分がユーザーとして訪れた際に使いやすく、信頼感のあるサイトになるよう作ったつもりです。…いかがでしょうか？
URL：http://www.e-udonya.com/

鶴一屋さんのうどんはすべすべしていて本当においしいです。大袈裟じゃなく、ちょっと感動します。また、山の上町にあるお店もキレイで雰囲気が良いので、お近くの方はネットショップだけじゃなく、一度訪れてみるもの良いと思いますよ。

ActionScript 3.0 への序曲

Creative Suite 3 Web Premium

iMacを購入したのは他でもない。「そろそろActionScript 3.0への対応も考えないとな」と半年ほど前から思っており、Flash CS3購入を考えていました。
しかし、どうせなら、Creative Suite 3 Web Premiumにアップグレードして、PhotoshopからDreamweaverから、何から何まで新しくしてしまいたいなぁ等とも思いつつ…。

…そうなると、今のマシンのスペックで大丈夫？Intel Macにして、OSもLeopardにした方がいいんじゃない？
…いやいやいや、そんな金ねえよ！
でも、そろそろ買っとかないと、Creative Suite 4が出てしまうしなぁ。Creative Suite 3を今買っといた方が得なんじゃないの？

…などとウダウダ悩むコト、数ヶ月。いろんな条件も重なり、ついにiMacを購入し、Creative Suite 3もインストールしました。これで晴れて、ActionScript 3.0を触ってみるコトができます！

しかし、プログラムの知識はほとんどない僕です。どこまで出来るのかわかりませんが、初歩の初歩からやっていきたいと思います。ちょうど参考になるページも見つけましたので…。
まあ、ぼちぼちActionScript 3.0に関してもエントリーしていきますので、興味があれば覗いてやってください。

透過PNGを使ってテキストにグラデーション

画像を使わなくてもグラデーションくらいなら…｜web creators 2008年10月

今回もweb creators 10月号の「使えるCSS デザインの技152」から、ちょっとした小技です。

「SEOに配慮して、h1などの見出しに画像を使わずテキストのまま組んで欲しい」といった要望が最近までちょこちょことありました。（※ほとんど最近は、画像を背景にして、テキストをtext-indent: -9999px; として表示エリア外にとばしていますが）
そんな時、テキストの上に透過PNGを重ねてしまえば、画像を使わなくてもグラデーション効果が得られるというのが今回の小技です。

実際、画像を作った方がキレイですし、テキストに透過PNGを重ねるだけでは凝った効果を加えるコトもできないので、使う機会は限られると思いますが、とりあえずサンプルです。

続きを読む "透過PNGを使ってテキストにグラデーション"

サイトの画像を簡単に保存させたくない場合

cssで透明のカバーをかぶせましょう｜web creators 2008年10月

web creators 10月号には「使えるCSS デザインの技152」という特集が組まれています。結構使えるモノや定番のテクニックが載っていますので、手元に置いておくと便利かも知れません。

そんな中で今回紹介するのは、サイト上の画像を簡単に保存させないようにする小技です。
以前、建築デザイン事務所のサイトをコーディングした時に、施工実績である建築物の画像をダウンロードできなくするか、印刷できないようにして欲しいと言われたコトがありました。
画像をダウンロードできなくするには、背景にすればある程度は対応できますが、何百とある画像を背景にするのは到底現実的とは思えません。仕方なく、cssで印刷時には該当する画像を消すようにしました。

このような特殊な事情の時に使えるのが、今回の小技です。
実際、ソースから画像のURLを辿るコトもできますし、もっと簡単にスクリーンショットを撮ってしまえば、画像は手に入れられる訳ですが…。

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

続きを読む "サイトの画像を簡単に保存させたくない場合"

Tweenerで動きの制御

モーショントゥイーンはActionScriptで制御せよ

Flashと言えば動き。
…で、昔はタイムライン上でモーショントゥイーン機能を使って拡大縮小やら移動やら、アルファ値などを変えていました。Flash8からはフィルタ機能も加わり、ブラーでぼかすのも定番になりました。
しかし、モーショントゥイーンをActionScriptで制御するような流れになり、プログラムの知識のない人達は、かなり試行錯誤してFlashを作らなければならない時代に突入しています。
そんな中、１つの救いになろうとしているのが、このブログでも幾度となく紹介している「Tweener」ライブラリです。

（前置きが長くなりましたが…）ちょっとしたFlashの仕事があり、本格的にTweenerを使って、動きの制御を試みてみました。Tweenerの良いトコロは、モーショントゥイーンに限らず、様々なプロパティをトゥイーンでき、何より記述の仕方が非常にシンプルになるというトコロ！
今までだったら、プログラムの知識がなくて力業でやっていた作業が、たった数行でできてしまう。やはりコレは、使わない訳にはいかないです。

サンプルはこちら。
（スタートするには画面をクリックして下さい）

続きを読む "Tweenerで動きの制御"

手軽にラフイメージを作る無料ソフト

Firefoxの拡張機能「Pencil Project」｜web creators 2008年10月

今回もweb creators 10月号の「webデザイン スタイルアップ Tips」というコーナーで紹介されていますが、PowerPointなど既成のソフトウエアを使わず、Webサイトなどのラフデザインを作成できるFirefoxの拡張機能「Pencil Project」をこのブログでも紹介してみます。

まずサイトにアクセスして、ページ上部の「Downloads」をクリック。ダウンロード後、Firefoxを再起動して、ツールメニューから「Pencil Sketching」を選択します。
すると、作成画面が表示されるので、左側の「shape collection」の中からパーツを選び、右側のキャンバスにドラッグ＆ドロップで配置していきます。
なかなか既成のソフトウエアのように痒いトコロまで手が届いていませんが、何より無料だし、画像取込もでき、スクロールバーやチェックボックスなど、Web独自のデザインパーツを取り揃えてあるので、使い方によっては手軽に素早く小綺麗にラフを作れると思います。

操作画面はこんな感じです。

もちろんデータは保存できますし、PNGで書き出すコトもできます。
興味がある方は、試してみると良いかもしれません。

写真から手軽にイラスト作成

Funky Ways to Express Yourself｜web creators 2008年10月

web creators 10月号の「webデザイン スタイルアップ Tips」というコーナーで紹介されていますが、写真を簡単にイラスト風に加工してくれる「Funky Ways to Express Yourself (www.befunky.com)」というサイトをこのブログでも紹介してみます。
作り方は簡単です。
まずサイトにアクセスして、CARTOONIZERというコーナーの「GET STARTED」をクリック。３つの方法で加工したい写真を訊いて来ますが、とりあえず一番手軽な「FROM YOUR DESKTOP」を選んで、任意の画像ファイルを指定して下さい。
「CONTINUE CARTOONIZING」を選択、「SKETCH」タブをクリックすると、２つのスライダーとAPPLYボタンが表示されるので、スライダーを適当に動かし、APPLYボタンで適用させると線画のようになります。
同じように「COLOR」タブのスライダーを適当に動かし、APPLYボタンで適用させると写真とブレンドされてイラスト風な加工を施した画像が出来上がります。
あと２つのタブもいろいろと楽しいので、試してみて下さい。

サンプルはこんな感じです。（左は元画像、右が加工後）

いい感じに仕上がったら、「SAVE」ボタンで保存できます。思いがけない名作（迷作）に仕上がるかも知れないですよ。

まあ、お堅いサイトでの利用は無理かも知れませんが、個人的なブログとか、ちょっとルーズな感じでページを仕上げたい時など使えそうです。（画像によっては絵画のようになりますし…）
あと、イラストレータに頼むとお金がかかるし、絵は描けないし…、といった場合の苦肉の策などには利用できるかもしれないですね。

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

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

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

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

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

ActionScriptライブラリ「Tweener」

話題のトゥイーンアニメーションライブラリ｜web designing 2008年9月

以前にこのブログでも「auサイトのようなアコーディオンメニュー」と題して、Tweenerを紹介しましたが、9月号のweb designing「Flash開発の新規軸 ActionScriptライブラリ」という記事で詳しく紹介されています。
ホントに便利なライブラリですね！工夫次第では何十行もスクリプトを書かなければならなかったアクションがいとも簡単に作れてしまいます！！
AS3.0用のライブラリというコトですが、ウチのFlash８、AS2.0環境でも動作してますので、前回のサンプルをちょっと手直しして再び紹介してみます。

サンプルはこんな感じです。
（パネルをクリックすると中央に移動します）

続きを読む "ActionScriptライブラリ「Tweener」"

衣替え？！

衣替えには早いのか遅いのか分かりませんが、ウチのサイトを衣替えしてみました。…とは言っても、画像部分をちょっこと差し替えて、cssでカラーリングを多少いじった程度ですが。
連日暑い日が続くので、残暑見舞いでもないですが、涼しげな感じにしてみました。いかがでしょうか？

Googleドキュメントで手軽にアンケート

docs.google.com｜web creators 2008年9月

いつもながらGoogleは非常に便利である。
9月号のweb creatorsの「Web Design Style-UP Tips」という連載に載っていますが、「Google ドキュメント」を使えば、アンケートを手軽に収集できるのである。
通常はメールフォームCGIを準備して、フォームを作るだけでも一手間かかるし、集計などしようとするとひと苦労だ。それがオンライン上で簡単にできてしまうと言うから使ってみない手はないだろう。

では、サンプルです。

続きを読む "Googleドキュメントで手軽にアンケート"

制作実績「魚政亭」さん

以前にこのブログで触れていましたが、富山にある日本料理屋さんのサイトが公開となりました。ご夫婦お二人で営んでおられる予約制の小さな料理屋さんです。
時間がゆっくり過ぎるような贅沢な空間は、一度訪れてみる価値があります。また、お二人とも愉快で話上手なので、田舎に帰って来たような感覚にさせてもらえます。

…おっと、肝心のサイトの方ですが、魚政亭さんの伝えたいコトをお客さんに間違いなく伝わるように配慮したつもりです。決して奇をてらったり欲張ったりせず、今あるモノを最大限に活かすコトが何より魚政亭さんを表現するのに適している気がしました。
もう１つ、見ていただいた方にとって使いやすく都合の良いサイトにするコトも心掛けたつもりです。メニューや料金表などはプリントして見る機会も多いと思い、全ページのプリント状態を丁寧に制御しました。

…などと、格好の良い事ばかり書いてしまいましたが、果たしてどこまで出来ているでしょうか？
肝心のURLは、http://www.uomasatei.serio.jp/です。 一度見ていただければ嬉しく思います。

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マップを表示"

Flashで携帯コンテンツ

ケータイdeヒーロー度チェック｜Flash Lite 1.1

先日、知り合いの方からFlashを使って携帯電話用コンテンツは作れないかと連絡がありました。とりあえずウチの開発環境（Flash8）でもFlash Lite 1.1としてパブリッシュできるようなので、試しに作ってみたのが今回のサンプルです。
最初はクイズを作ろうと思っていましたが、Flash Lite 1.1ではActionScriptがFlash4相当のモノまでしか使えないので、かなり制約があり、簡単なスクリプトでもエラーが出てしまったり…（もうちょっと勉強しないとな）。
不本意ながら簡素化して、一種の診断チェックのようなモノを作ってみました。

そのサンプルがこちら。

続きを読む "Flashで携帯コンテンツ"

Webサービスと組み合わせた天気情報

マッシュアップで作るお天気Flash｜web creators 2007年2月

このところ毎回登場している「1ランク上の技を身につけるFlashの強化書」でも同じようなFlashが紹介されていますが、機能的にはこちらの方が断然実用的なのでweb creators 2007年1月〜2月の「Flash Creative Technique」に掲載されていたFlashを紹介してみます。

今回は「Weather Hacks - livedoor 天気情報」のAPIから天気情報をXMLデータとして受け取り解析することになります。
しかし、Flashはセキュリティ対策上、異なるドメイン間でのデータをやり取りするコトができません。
そこで、間にphpファイルを入れ、データのやり取りを行う対象を同じドメインに属すという構成にしてしまいます。
※この時点でほとんど僕のキャパをオーバーしているのですが…。
詳しくは、web creators 2007年1月〜2月号をじっくり読んで理解して下さい。

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

続きを読む "Webサービスと組み合わせた天気情報"

XMLで管理するFlashフォトギャラリー

swfはインターフェイスのみ｜web creators 2006年6月

前回紹介した「1ランク上の技を身につけるFlashの強化書」でも紹介されていますが、端折られている部分もあるので、Flashにあまり明るくない方は、web creators 2006年6月の「Flash Creative Technique」に掲載されている方が理解できるかもしれません。興味があれば購入して読んでみても良いかと思います。

さて、今回は「XMLで管理するFlashのフォトギャラリー」です。XMLでデータを管理するので、更新は各xmlファイルを修正するだけです。つまり、swfはインターフェイスのみ担当するので、一度作ってしまえば触る必要がなくなります。

このブログでも以前に「XMLデータを使った画像ビューア」という記事で、同じようにXMLで管理する画像ビューアを紹介しましたが、今回紹介するサンプルの方がいろいろと拡張性があると思います。
ただその分、スクリプトも難しいので、どちらが使いやすいか？とは言えません。自分の知識と何をしたいか？に合わせて使ってもらえればと思います。

まずは、サンプルです。（コンボボックスからタイトルを選択して下さい）

続きを読む "XMLで管理するFlashフォトギャラリー"

スクリプトで制御するタイポグラフィックス

プログラムを勉強しないと始まらないな…｜Flashの強化書

仕事で結構Flashを作って来ましたが、実際に使っているスクリプトはAS1.0に毛の生えたようなモノで、効率的なプログラムとはほど遠く、もう１度はじめから勉強しなければ…と、常々思っています。
その度に配列やら関数やらオブジェクトやらリスナーやらなんやらかんやらの壁に阻まれ、なかなかに向上しないのですが…。
だいたい参考書を読んでいても何故だか急に難しくなりませんか？
どこかごっそり見落としたんじゃないだろうかと思う程、聞き慣れない言葉や書式がいきなりドカッと出てきてしまう。
正直お手上げである。
しかし、こんなんじゃAS3.0時代にとてもじゃないけど着いていける訳がないので、何度目かの悪あがき（？）を始めています。

さて、今回紹介するのは「１ランク上の技術を身につけるFlashの強化書」出てくるサンプルですが、いままで手作業でやっていたモーションタイポグラフィをスクリプトだけで制御してしまおうという代物です。

まずは、サンプルです。（startを押して下さい）

続きを読む "スクリプトで制御するタイポグラフィックス"

マウスオーバー画像を簡単に作る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"

Safari用のCSSハック

モダンブラウザ用にCSSを記述していても、Safariだけ表示がズレてしまうといったコトがごく希にありませんか？
IE関係のハックやOperaのハックはいろんなトコロで紹介されていますが、Safariのハックもあるんですね。…世の中、いろんなコトを教えてくれる人がいるので助かります！
…というコトで、このブログでも紹介してみます。

html[xmlns*=""] body:last-child 要素名 {
   Safariのみに適用させるスタイル
}
といったように、適用させたい要素名の前に
html[xmlns*=""] body:last-child を付けてスタイル定義するだけでＯＫです。

その他にも、BLOG × WORLD ENDINGさんの「CSSハック」というページには、いろいろなハックが紹介されていますので、興味のある方は一度ご覧になると良いと思います。

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でユーザーに親切なフォーム入力"

Movable Type の再構築時にエラーになる…

ロリポップの場合はBerkeleyDBからSQLiteに移行しましょう

数日前からウチのサイト のマークアップとCSSを見直して、よりWeb標準準拠に基づいた修正を行っていました。…そこでMovable Type（3.2です）で構築している制作実績を紹介するページとFlashコンテンツのサンプルを紹介するページに不具合が発生！
もともとエントリー作成時や再構築時に良くエラーがでていたので、おそるおそる触っていたんですが、今回はインデックスページ以外、ほとんどで再構築エラーが発生するようになり…。
しかも、一度デフォルトに戻してみたものだから、それ以降カスタマイズしたテンプレートを受け付けてくれない…。自分のサイトなので、緊迫感はないけれど、結構困りました。
しかし、いろいろ調べていくウチに原因と対処法が分かりました。いやいや、Webってありがたい。

Movable Typeでは、もともとデータベースにBerkeleyDBを使っているんですが、パフォーマンスが悪いようです。特にレンタルサーバーにロリポップを使っていると、かなりの確率で再構築エラーになるみたいです。
なので、DBをBerkeleyDBからSQLiteに移行した方が良いというページを見つけ、その後もいろいろ調べて問題解決しました。
参考にさせて頂いたページを下記に書いておきますので、同じようにお困りの方は、一度読んでみるコトをオススメします。

・小粋空間さん「Movable Type で再構築エラーになる場合の原因と対処」
・小粋空間さん「Movable Type + SQLite」
・Ogawa::Memorandaさん「mt-db-convert.cgi: MTデータベースの相互変換CGIスクリプト」
・Ogawa::Code - Tracさん「MT_Database_Converter.ja_JP」
・The blog of H.Fujimotoさん「Movable Type 3.2アップグレードの際にBerkeley DBから他のデータベースに変える手順」

データベースを移行してからは今までがウソのように再構築エラーが出なくなりました。早めにやっておけば良かったです…。しかし、そろそろ3.2からバージョンアップしないといけないですね。

続きを読む "Movable Type の再構築時にエラーになる…"

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

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

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

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

サンプルはこちら

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

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

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

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

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

サンプルはこちら

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

デフォルトスタイルをリセットするCSS

リセットCSSとフォントCSS｜Web Designing 4月号

Web Designing４月号の特集「“読みやすさ”のためのXHTML＋CSSデザイン」は、スタイルシート中級者とって非常に役立つ特集でした。
僕も今まで本や既存のサイトを参考にしながら、毎回いろいろと試行錯誤してCSSを組んできましたが、リセット用CSSとフォント用CSSに関しては、今回スッキリとまとまったような気がします。

基本はYahoo! UI Libraryの「YUI Reset CSS」と「YUI Fonts CSS」を使います。ただし、YUI Fonts CSSは英字を想定しているので、カスタマイズした方がいいです。

それでは、サンプルはこちらから（それぞれのスタイルシートが開きますので、コピーしてお使い下さい）

リセット用CSS
フォント用CSS

また、もっと上級者の方には下記のサイトで実践と解説されていますので、参考にしてみると良いと思います。
3ping.org｜デフォルトスタイルの差異を無くすCSS

続きを読む "デフォルトスタイルをリセットするCSS"

JavaScriptで文字サイズを変更２

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

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

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

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

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

JavaScriptでスライドショー

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

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

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

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

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

XMLデータを使った画像ビューア

Flashで更新が手軽なスライドショー

あるデザイナーさんからFlashで更新が簡単な画像のスライドショーができないかと訊かれ、右の本に載っていたサンプルを参考に試作品を作ってみました。
XMLファイルからデータを読み込むので、ほとんど更新の手間が要りません。

しかし、小手先だけのFlashじゃもう全然ダメですね。やはりもっとプログラム的なコトを勉強しなきゃ、これからは厳しいとつくづく思います。サイトがどんどんインタラクティブになってきてますからね。

そんなこんなでサンプルはこちら。

続きを読む "XMLデータを使った画像ビューア"

JavaScriptで画像加工

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

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

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

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

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

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

ココログのカレンダーで月移動

かゆいトコロに手が届く｜ココログ最強カレンダー

先日、暴想さんの「ココログ最強検索」を紹介しましたが、もう１つ優れモノのスクリプトがあるので紹介します。
その名も「ココログ最強カレンダー」！
早速ウチのページにも取り付けてみましたので、ご確認ください。

ココログのカレンダーって月移動ができないので結構不便なんです。仕方がないから今まではサードバーにバックナンバーを付けていたんですが、リストは10個しか表示してくれないし、バックナンバー自体をクリックすると、何とも貧弱なページになってしまうしで、過去のページを見たい時にかなり不便でした。
他のブログでは普通に月移動できるカレンダーが付いているのに、niftyは何をやっているんでしょうね。

しかし、このスクリプト（ブログパーツ）があれば月移動がサクサクできるので、ホント便利です。
なんともかゆいトコロに手が届いてます！

ココログでサイト内検索

優れモノの検索ボックス｜ココログ最強検索

このブログの色づかいを仕事用のサイトに合わせるためチマチマと作業していました。いかんせん、ココログは月額950円もするプロプランじゃないとHTMLの編集ができないらしいので、CSSをいじくり倒してなんとか思うようなカタチに仕上がってきました。

…で、もう１つ。
記事数も多くなってきたので｢サイト内検索｣の検索ボックスを付けようと思っていました。いや、ココログが提供しているモノもあるんですが、オマケがいろいろ付いててページの上部に持ってくるとデザインがチグハグになるのでシンプルなモノはないかと探していました。
Googleの検索ボックスを付けようかと思っていたんですが、探すとあるモンですね！
暴想さんの「自分のココログを全文検索するブログパーツ」というページで紹介されています。早速付けさせていただきました。

非常に優れモノのスクリプトなんですが、欲を言えば、検索結果のリンク先を開くと新しいページが開いてしまうのが難点ですかね。
しかし、これは…
「検索するために一度全バックナンバーをロードしないといけなく、リンク先をそのまま開いて、ブラウザの戻るで戻ってくると検索結果を再び表示させるのに時間がかかります」
というコトなので仕方ないでしょう。

ともあれ、暴想さん、ありがとうございました！

IE7 への自動更新（IE6 を残す方法）

いよいよ明日 2月13 日、IE7 への自動更新が開始されるようです。しかし、IE6 を残しておきたい…、と思っている人も多いのではないでしょうか？
そんな時は今回紹介するサイトでスタンドアローン版をインストールしてみてはいかがでしょう？

Go my wayさんの｢複数のIEを共存させる方法｣というページに詳しく紹介されています。
スタンドアローン版ではうまくいかない場合のMultiple IEというのも紹介されてますし、至れり尽くせりでございます。

ちなみに、IE7 をインストールした後でIE6 に戻す場合はコントロールパネルの「プログラムの追加と削除」でIE7を削除すれば、自動的にIE6に戻るようです。

FlashでメールフォームCGI

Flash×フォーム＝簡単シミュレーター

仕事先からFlashで商品のカスタマイズをシミュレーションしながら注文がとれる仕組みができないモノか？と訪ねられ、少し考えてみました。
原理としては、Flash側でラジオボタンやMC（ムービークリップ）を使い、選択肢を設ける→そこで選択された値によって、商品画面を変更→選択された値はCGIを使って、サーバーに送信。（FlashからCGIへの連動はgetURL()を使用します）

…と、何となく仕組み自体は分かっていたんですが、実際に出来るかどうかはやってみないと分かりません。また、思いもしないトコロで不具合があって使い物にならない可能性もありますし。
確証が持てないコトに対して出来るとは言えない（営業マンには向いていない）性分なので、とりあえずサンプルを作ってみました。
インターフェイスもスクリプトも実際に使用するにはもっと改良しなければいけませんが、試作第１号としては、なんとか形になったのではないでしょうか。

そのサンプルがこちら。

続きを読む "FlashでメールフォームCGI"

簡単！CSSでデザインされたメニュー

メニューをカスタマイズしてダウンロード｜CSS Menu Maker

前回、手軽に利用できるツールバー（メニュー）を紹介してみましたが、もう１つ、もっと手軽にメニューが作れてしまうサイトがあったので紹介してみます。

これも２月号のWeb creatorsに紹介されていますが、CSS Menu Generatorというサイトです。縦・横メニューにドロップダウンメニュー（プルダウンメニュー）まで、20種類程揃っているので、気に入ったモノが見つけられると思います。
気に入ったモノが見つかったら、｢Custmize｣をクリックして、メニューの数と名前を設定します。｢Update your Menu｣をクリックすると、実際のイメージを確認できます。もちろんスタイルシートや画像を変えればカスタマイズもできます。
｢Generate Menu Code｣をクリックすると、コードが発行されますし、そのまま画像,html,CSSを丸ごとダウンロードするコトもできます。もちろんスタイルシートや画像を変えればカスタマイズも可能です。

サンプルはこちら

続きを読む "簡単！CSSでデザインされたメニュー"

Windows Vista風のツールバー

Windows VistaのツールバーをCSSで再現する

早いもので間もなく１月も終わってしまいます。この前、年が明けたと思ったいたのに…、歳でしょうか。
なんだかんだとバタバタしておりましてなかなか時間が取れず…、今回はちょっとしたテクニックを紹介してみます。

２月号のWeb creatorsに紹介されていますが、blog.itookia.comさんの｢How to create VISTA style toolbar with CSS｣というページからVISTA_toolbar.zipをダウンロードすると、手軽にデザイン性にも優れたツールバー（メニューバー）が作れます。
さすがにこのままでは仕事には使えませんが、個人的なページとかサンプルとして提案するくらいには利用できそうです。
もちろんスタイルシートや画像を変えればカスタマイズもできます。

サンプルはこちら

続きを読む "Windows Vista風のツールバー"

ロールオーバーでフォーカスする表現

Adobeのサイトみたいにはできませんが…

今回も例によって１月号のWeb creatorsからの使えそうなテクニックを…。
AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。
本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。（Webデザイナーとして恥ずかしい話ですが…）

さて、サンプルです。

続きを読む "ロールオーバーでフォーカスする表現"

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でアコーディオンメニュー"

auサイトのようなアコーディオンメニュー

Flash モーションライブラリ｜Google Tweener

また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか？でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議？！　簡単に作れてしまいます。

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

続きを読む "auサイトのようなアコーディオンメニュー"

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

タブメニューでスライドするコンテンツ｜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不要版）」という記事に詳しく書かれていますし、そこでダウンロードもできますので、試してみて下さい。
※データ量が多いので、サーバにアップするのに多少時間がかかります。

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

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

Webサイトのインターフェイス

Webサイトって、やっぱり使い易くなくてはならないと思う。
ユーザービリティ云々と難しい言葉じゃなくて、訪問者にストレスを感じさせることなく目的のページにたどり着かせられるか否か？まずそれが第一条件だと思う。
次は美しさ。単に見栄えだけじゃなく機能美としての美しさ。
その次に面白さユニークさ。それらが成立しているサイトはインターフェイスとして素晴らしいと思う。

以前はインターフェイスに凝ろうと思うと、HTMLでは限界がありFlashを使うしかなかったが、Ajaxライブラリが充実するにつれ、Flashを使わずともかなりの演出ができるようになってきている。アプリケーションなのかWebなのか境目が分からなくなる日もそう遠くない話だと思う。

今作っているサイトは、インターフェイスを充実しようと思っている。とは言っても本当に必要で、これがあると便利！という機能に絞って取り込んでみようと思っている。その中で出てきたテクニックなど、またこのブログで紹介していきますので、覗きにきてください。

…しばらく記事を更新していなかったので、とりあえず普通の日記を書いてみました。

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上にプルダウンメニューを重ねる"

Webでの適正な文字の指定って？

前回の記事絡みなのだが、Webサイトを作っていて適正な文字サイズの指定っていつも悩んでしまう。
僕自身はMacを使っており、ブラウザはほとんどFirefox。大きな文字だと扱いづらいので、環境設定で基本の文字サイズを14pxにして使っている。
そうすると、例えばAdobeのサイトだと文字が小さすぎて読めない。仕方がないので、文字サイズをアップして見ていたりする。

作る際に置いて、本などでは、16pxを基本のサイズとし、相対的なサイズを指示するように書いてあるが、僕のようにユーザー側のブラウザの環境設定で文字を16px以下にしてある人にとっては小さくなりすぎる傾向があると思う。

なので、WindowsのIE環境でも文字の可変ができるように、CSSでフォントサイズにsmallを指定していた。IE6以降、smallは12pxというコトになっているらしいので。

ただ、これでもMac環境で例えば、12pxに設定している人にとっては小さくなりすぎる事が分かった。

それからは、ハックを使い、WinのIE以外は12px、WinのIEにはsmallと指定するようになった。でもWinのIEで見ると少し文字が大きいんだよね。仕方がないので、いろいろ試した上でWinのIEだけさらに97%になるようにしてみた。
これでWinのIE、文字サイズ中で見た時でも他のブラウザとほぼ大きさが揃ったように見える。

前回の記事のCSSにはそういう指定がされています。興味のある方は参考にしてみてください。

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まで使うと演出過多のような気がしたので、シンプルなサンプルにしましたが…）

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

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

ブラウザに合わせて背景画像が拡大縮小

最近、Flashの勢いが復活してきたようだ。一時期はSEOに弱いと言われ、Webにとって諸悪の根元のように嫌われていたのだが、映像を取り込むという伝家の宝刀を手に入れたコトによってWeb表現の可能性が飛躍的に上がった。その影響が大きいんだろう。やっぱり見ていて楽しい方が良いからね。
作り手にとっては、技術やセンスが今まで以上に問われるので厳しい時代だが、面白い時代に突入してきたと思ってちょっとワクワクだ。

さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。

→サンプルを新規ウィンドウで開く
→このFlashデータをダウンロードする

下記のサイトに詳しく説明されていますので、一度ご覧ください。
FLASH-JP.COM - フォーラム｜背景は画面サイズで可変、メニューは固定にするには

多分、あまりFlashに明るくない方はデータを見ても作り方が分からないと思います。ポイントとしては、背景・メイン画像などの各MCは_rootのフレーム上には置かず、フレームアクションattachMovie();を_rootの1フレーム目に記述して読み込みます。

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ファイルを作ってみました。

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

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

Webサイト作りとは

Webサイトを作るコトは、家を作るコトと似ている。
各ページを適切にマークアップするコトはまさしく図面を描く作業だし、cssでレイアウトを調整するコトは目に見えない配線や配管工事をするコトに似ていると思う。
しかし、tableでレイアウトを整えたり、htmlに直接スタイルを書き込んだり…、僕に言わせるとプレハブの仮設住宅しか作れないのにWebサイトを作っているつもりの輩や会社もまだまだ多い。

見取図とリビングの仕様しか用意してないクセに、「図面と配線・配管工事をやってくれ」、「明日お客さんが見に来たいと言ってるからとりあえず作ってくれ」と無理な注文を言ってくる。
また何か不具合があった時も単に「水が出ないんだけど」としか言わない。台所なのかトイレなのか洗面所・風呂場なのかも分からない。状況が分からないからこっちはすべての水廻りを調べる。するとトイレのウォシュレットの水が出ないコトだったりする。

認識のズレが大きいとお互いストレスを溜めるだけなんだよね。プレハブしか想定できないのならプレハブ専門業者に頼めばいい。こっちは自分の腕一本で仕事している職人のつもりなので、今持っている技術をすべてつぎ込んで作り上げるだけ。

そういう僕もまだまだ勉強不足なので他の人から見ればどう映るか分かったモンじゃないけどね。日々勉強、やっぱりこれしかなさそうだ。

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

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

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

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

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

IE7とIE6を一緒に使う

IE7 Standalone

先日、ようやくWindowsXPが動くパソコンを購入しました。これで晴れて作成したWebサイトをIE7でも検証できるようになる（と思っていたが…）。（※ちなみにパソコンは、とにかく安く購入したかったので、パソコン工房というトコロのBTO-PCです）

…で、IE7をダウンロードして、インストール！
…しかし、肝心のIE6が上書きされてなくなっているではないか！！これでは意味がないので、共存方法をネットで調べてみる。
IE7を削除すれば、IE6に復旧できると知り、とりあえずプログラムの削除からはじめる。
続いてちょうど良い記事を見つける。URLを下記に記しますので、興味のある方は参照してください。
裏風 ...  IE6＆IE7共存！「IE7 Standalone」

…これで、共存完了！　どんと来いサイト制作だ。（何のこっちゃ）
そうそう、まだまだIE5環境の人もいるので、IEの各バージョンをダウンロードできるサイトもあります。
Multiple Explorers（英語）
※Win2000のときは、IE5.5も動いたんですが、XPにしてからは、起動後に強制終了してしまいます。IE5.01は正常に動きます。

…という訳で、IEの各バージョンでWebサイトを検証させようというお話でした。

アクセス解析

Google Analytics

いまだにアクセスカウンターを付けて欲しいというクライアントさんがいたりする。「あんまり意味がないですよ」と言って、アクセス解析CGIを入れる事を薦めたりしている。
そんな時いつも使うのは、futomi's CGI Cafeさんの高機能アクセス解析CGIシリーズである。Standard版は料金がかからないし、Professional版でも個人使用なら1,050円（商用は2,100円）とリーズナブル！新しいバージョンでは設置も非常に楽になっている！！

…と、思ってはいたのだが、試しにGoogle Analyticsなるモノを使ってみた。（今頃でスイマセン）これが結構使えるのである！しかもフリーで使えてしまう！！やっぱりGoogleはスゴイなと、あらためて感心してしまう。
※設置や使い方は、その名もズバリ「Google Analyticsアナリティクスの使い方」というサイトがあるので、参照してみてください。

まあ、サーバーにCGIを設置していた方が便利なコトもあるし、一長一短ではあると思うけれど、HTMLに特定のソースコードを埋め込むだけなので、サーバー側で独自CGIを許可していない場合やCGIはちょっと…と思っている人にとっては、大いに役に立つ　…というか、これしかないのでは！？と思ってしまうくらい優れモノです。興味があれば、一度試してみてはいかがでしょうか？

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や日付などは何とかカスタマイズしてみたのですが、本当は左側に日付、右側にエントリーのタイトルという新着情報に良くあるようなレイアウトにしてみたいのですが…。う〜ん、難しいモンですなぁ。

メールフォームでトラブル

♪何でもないようなコトがぁ〜、それは虎舞竜。…失敬。

（何事もなかったように先へ進めます）
６月に入り私用でバタバタしているウチに風邪をひいてしまい、すっかりご無沙汰してしまいました。

昨日はなんだかメールフォームで２件トラぶってしまい、終日その作業でした。１つは、おそらく納入先のウイルス対策のため、CGIからの送信メールが届かなくなっていたようです。先方の環境が分からないので、yahooでフリーのメールアドレスを取得して、そちらにもCGIからメールを送るように対処。納入先でもうまく受信できればいいのですが…。
もう１つは、こちらのsendmailの設定が間違っていたらしく、途中までは動作するんだけど、いざ送信しようとするとエラーが出てしまって、いろいろ試してもうまく動作しませんでした。困った挙げ句、一度自分のサーバーでCGIの処理をして、何事もなかったように本サーバーに戻すという力業を使って対処。でもなんだかスッキリしなかったので、今朝もまたいろいろ試した挙げ句、sendmailを自動的に認識する設定に直したらうまく動作、急いで直しておきました。

ホント、プログラム的なコトで躓くと時間がかかります。でも結局こういう失敗が血となり肉となって今後に生かされるんだと思う。「失敗は成功の素」じゃないけど、失敗から学ぶコトの方が多いしね。まあ、僕の場合不器用なので、こういうコトばかりで厭にもなるが…。

Web Developer は優れもの！

最近教えてもらったのだが、Firefoxの拡張機能の１つ「Web Developer」はとても優れものだ！
サイトのソースが丸裸になってしまう。htmlはもちろん、cssやJavaScriptも簡単に表示できとても便利である。まだまだ使いこなしていないが擬似的に編集もできてしまうようである。
便利なのはそれだけにとどまらず、ブラウザのウィンドウサイズを800×600に表示したり、ルーラーやガイドを表示してコンテンツのサイズを測ったり、テーブルやブロック要素を枠で表示させたりと、まったくかゆい所に手が届くツールなのである。
しかし最大のポイントは、HTML構文の検証をしてページを採点してくれるトコロ！windowsのIEにも似たようなツールはあったが、ここまで使い勝手は良くなかった（しかも英語だったし）

…という訳で、今作っているサイトはWeb Developerで採点して、全ページ90点以上はクリアしている。まあ、HTML 4.01なんで比較的高得点を取りやすいんだけど…。
それでも相変わらずwinのIE６は勘違い野郎だし、Safariも結構我が道を行くお方なので、各ブラウザでの表示を揃えながら、HTML構文的にも誤りを少なくするのは結構手間な作業ですな。IE６やMac版IEなんて、もう使わなくていいですよね！？（願望！）

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

タブで内容を変える｜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で今日の日付"

MacのIEとFlash８

最近、ブラウザはもっぱらFirefoxを使っていたので油断していた。
Flashを埋め込んであるページをDreamweaver８でいくつか更新したり、新しく作ったFlashコンテンツを埋め込んだりしていて、ふとMacOS X版のIE（ver5.2.3）で表示させてみた。

Flashが再生されない…。いや、OS９のIE（ver5.1.7）で再生されないのは知っていた。クラシック環境にプラグインを入れてなかったから。
ただ驚いたのは、プラグインをアップグレードしようと思ってサイトに飛んだら、「Flash Player upgrade for operating systems that do not support Flash Player 8 」というメッセージが出るではないか？！
Flash Player 8からはMacのIEに対してサポートしなくなったんだね！まあ、MacのIE自身、Microsoftから見放されてしまって久しいので仕方のないコトなのかもしれない。

だが、サイトを作る側としてはまだまだMacのIEを対象から外す訳にはいかないんだろうなぁ…。印刷業界ではいまだにOS９を使っている所もあるようだし、MacユーザーみんながFirefoxやSafariなどのモダンブラウザを使える訳ではないモンね。
とりあえず、こりゃ困るだろう！というページをしれーっと直しておこうと思う今日この頃である。

地図Ｚ

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

続きを読む "地図Ｚ"

プルダウンメニュー×画像

仕事の話。
左に画像エリア、右に３つのボタンを配置した、下図のようなFlash作成の案件がある。

仕様として、
１）ボタンに触らない場合、画像エリアはＡＢＣという３つの画像を一定周期で切り替える。
２）ボタン１にロールオーバーで、プルダウンメニューを出し、画像エリアはＡの画像に切り替える。
３）ボタン２,３も上記に準じた処理を行う。（つまりボタン２は画像Ｂに、ボタン３は画像Ｃに対応している）

プルダウンメニューは少々やっかいだが、何度となく作っているので、ActionScriptの仕様は割と早く出来上がった。
問題は画像エリア。
通常、３つの画像が一定周期で切り替わる。それは問題ない。また、ボタンにロールオーバーでそれに対応した画像に切り替える。それも問題はない。
問題は、ボタンかそれに付属するプルダウンメニューにロールオーバーしている間は表示されている画像でストップしておいて、ロールアウト後に３つの画像が一定周期で切り替わるように戻してあげるコトだ。

ここで何が問題なのか分からない方は、残念ですがここまでです。お付き合いありがとうございました。

続きを読む "プルダウンメニュー×画像"

論理演算

引き続き仕事の話。
その月が何月かによって、トップページのイメージが変わる仕組みのFlashファイルを作る仕事が入っている。Dateオブジェクトで何月か調べて、例えば１月はお正月のイメージ、２〜４月は春のイメージを当てはめようとした。
仕組みは至って簡単だ。まあでも吾輩のコトだから、すんなりとはいかないだろうなと思っていたら案の定だった。

○月〜○月までという範囲を、論理演算子を使い、「１より大きくて４以下は“春”」としてみたが、まったくうまく行かなかった。ここでもやっぱりなんだかんだと２時間ほど時間を費やす。
悩んだあげく、ここは手堅く（？）一番ずぼらな方法で１２カ月分のスクリプトを書く事に決めた。ああ、決めたさ。
しかし、こんなへなちょこなモノでも、プログラムって時間がかかるなぁ…。

続きを読む "論理演算"

jpgのプログレッシブ

仕事の話。
いくつか並んでいるサムネイル画像にロールオーバーすると、その拡大画像が表示され、その画像は外部読込にする。そんなFlashファイルを作る仕事があった。原理は難しくないし、前にもこういうモノは作ったコトがあるので、割と簡単に考えていた。

しかし、しかしである。外部に用意したファイルを読み込んでくれない。何度やっても画像が読み込まれるハズのムービークリップは真っ白けのままだ。
「どうして？？？」
試しに前に作った画像ファイルを読み込んでみた。
「ちゃんと読める…」
どこがどう違うのか、いろいろと試行錯誤。こういう時の１時間、２時間なんてあっという間さ。結局、jpgで保存する時にプログレッシブにチェックを入れていたのが、不具合の原因だったようだ。
「プログレッシブって何？」
Webで画像を読み込む時に、モザイク状で読み込まれる方式じゃないの？それが使いようによっては悪さするんだなぁ。
「プログレッシブ、恐るべし」

なんやかんやとバタバタと

ブログに書きたいコトがたくさんあったのに、なんだかバタバタしてて何も書けずじまいだ。…まあ、それは置いておいて今日の本題。

以前に作ったサイトの修正が入った。仕事を受けた先で修正するコトもあるんだろうとレイアウトの骨組みはテーブルで、細かなマージンやアイコン、ヘッダや段落の詳細などはcssで設定していたのだが、直すとなると結構手間がかかる。
やっぱりテーブルでレイアウトすると面倒くさいんだなぁとあらためて実感している。最近はほとんどソースを見ながらの作業なので、テーブルだと余計なタグが多くなりすぎて編集しにくい。無駄にソースが長くなるだけだ。
また、cssも移行段階初期に作っていたので、divが重複していたりして複雑きわまりない。idとclassの違いも何ら分かっていなかったので、結構むちゃくちゃだ。今ならもっとキレイで効率的に作れるのになぁ。
ホントは全部直したいトコロだが、２〜３日しか実作業できないし、またソースやcssをキレイにしたトコロで、クライアントには意味のなさないコトだと思うので、できる限りに留めておこう。
…今できるコトをできる限り詰め込もうとしてしまうので、我ながらそんな性分だと思う。

金沢も梅雨入りしたもよう

なんやかんやとバタバタしてて、先日のW杯日本戦のコトも書かぬまま数日過ぎてしまいました。
しかし、終盤６分間は（悪い方の）夢でも見ているような感じでしたね。それまで本当に良く守っていたのにかわいそうだった。まあ、サッカーについて語れるほど詳しくはないし、選手達が一番現状を把握していると思うんで、僕みたいなモンが余計なコトは言いません。クロアチア戦、キッチリ見届けるぞ！（まあ、他の試合も見届けるぞ！…悲しいかな地上波しか見れないが）

さて、前置きが長くなりましたが本題。
ここ１年程、たまに「web creators」という雑誌を買っていたのだが、この４月から毎月買うようになった。
今まではデザインのネタにならないかなぁ…などと、特集ページでひっかかった時だけのお付き合いだったが、隅々まで読んでみると結構タメになるのである。特にFlashとCSSに対して連載があるのは心強いばかりだ。…今頃気付いて申し訳ない。（誰に対して言っておるのだ？）
やっぱり１つの雑誌を作るのって結構手間がかかっているんだなぁと、あらためて感心している。まあ、活かすも殺すも自分次第。ならば活かしてやろうじゃないか！（…という意気込みだけはある。最初はいつも。頑張ります、ハイ。）

ジーコ、招集した23人を活かしきってくれ！（結局そこに綱がるんかい！）

連休明けというコトもあり…

なんだかんだと仕事の連絡がありバタバタしてました。ありがたいコトである。
ちょっと一息ついてブログでも書いてみる。

しかし、やっぱり（…まどろっこしい書き方）ブログって便利だね。ケータイでしっかり見るコトができるんだね！
いや、いままでケータイでサイトを覗くコトはほとんどなかったんで（パケット定額にしてないから）、あんまり興味なかったんだけど、この前作ったブログサイトをケータイで覗いてみたら、しっかり読むコトができました。
何を今さら？！と思われるかもしれないが、ケータイ用に作った訳でもないのにしっかり構成されていたのは結構驚きでした！

やっぱブログなんだな…、これからの時代。

続きを読む "連休明けというコトもあり…"

データベースとしてのブログ

今日はちょっと時間があったので、前々からやりたかったコトをしていた。
なんでもブログというのは、手軽にデータベースが構築できるシステムなんだそうだ。単に日記を書くだけのモノではない。
分かりやすく言えば、エントリーした記事をカテゴリー別に登録でき、カテゴリー別に記事を再構築できるのである。…エッ？、分かりにくい？！

従来のサイトだとデザインと内容（テキストや画像）込みで１ページごと作っていたモノがコンテンツ（記事）を１つ作れば、いくつかのテンプレートを使って、様々な状態でページを構成できるようになるのである。…エッ？、もっと分かりにくくなった？！
まあ、高度なスキルや高いコストを用いなくとも、データベースが構築できるという画期的なシステムなのである。
今後、企業サイトなどはほとんどブログを使ったモノに切り替わっていくんだろうなぁ。サイト制作の知識や専用のツールがなくても簡単に更新できるしね。

…で、ここからが本題。
Movable Typeを使ってデータベースの実験をしてみた。とりあえず５年程前の私的なサイトで書いた映画の感想をデータベース化してみるコトにした。
まだまだトップページくらいしかちゃんとしてませんが、良かったら覗いてみてください。
>> Movie a GOGO! を覗いてみる

※実験なので、現在のエントリーは１つだけです。あしからず

一年前の自分を恨む

本日は去年作ったサイトの一部更新をしていた。
いやいや、知らないというのは恐ろしいモノだ。　よくもまあ、こんなきったないソースを書いていたなと…。
テーブルでガチガチに組んであるから修正しづらいしづらい。　まあ、あの頃はGoLiveに頼りっきりで、ソースなんか意識していなかったモンなぁ。

よく、GoLiveは使ったコトがないとか…、（ここからはWebを生業としている人の話）

続きを読む "一年前の自分を恨む"

もうこんな時間…

キリのいいトコロまで…と思ってやっていたら、もう４時半過ぎてる！　アタマがクラクラしてきたハズだ。　そろそろ夜も明けるんじゃないか？！

Ｗｅｂサイトを作るって真剣にやると結構時間のかかるモノだ。
更新するコトを踏まえて、どうやったら効率の良いサイトになるか等から始まって、画像にAltテキストを付けたり、パンくずを付けたり、はたまたいろんな環境で正確に表示されるか検証しなきゃなんないしね。
僕の場合はMacがメインなので、まずFirefoxで表示して、ＯＫならＩＥでチェックしてSafariでチェックして、最後にWinのＩＥでチェックする。
この作業を新しいページを作る度にやっているので、マメじゃないとできないね、ホント。

そうそう、今日ラジオで言ってたけど、やりがい・お金・人間関係の中で２つ満足していれば、その仕事は続けられるそうだ。
…結構的を得ていると思った。　自分の場合はどうだろうか？　…少なくともやりがいはあるな。

Movable Type

４月からの仕事の１つがなかなか本格的に始まらず（…とは言っても、大小あわせて３つ程仕事は抱えているのだが）、少し時間ができたので、Movable Typeを再びサーバーにインストールしなおしてみた。
ブログがこれだけ一般的になって、そろそろMovable Typeで思い通りのWebサイトを作る技術も習得しておかないとダメだろうと思ってるのである。
実は今年の初めに一度やってみてはいるのだが、何か設定を間違えていたらしく、２つ目以上の記事がブログに反映されなかったのである。
今度こそ！　と思いながら、下記の参考書を買ってきて、ダウンロードからやり直してみました。
…まあ、来週に入ると、そんな余裕もなくなるハズなので、どこまでできるコトやら？！　とりあえず、がんばってみます！
【そのブログはこちら...】

フラッシュdeクイズ

この前、FlashでクイズができるActionScriptを作りました。
元々プログラマーではないので、なかなか苦労しましたね。　仕様として、
１）２０問の中からランダムに５問出題する。
２）集計して、正解数に応じた結果を返す。
という２つだったんですが、特に（１）がややこしかったですね。
単にランダムに出題はできるけど、５問だけ選ぶって？？？
一度選んだ問題を外す仕組みって？？？
…配列を使えば簡単にできたのかもしれないけれど、そこは素人！なかなかうまく行かず、他の考え方でどうにかこうにかカタチにしてみました。
試行錯誤したあげく、結構カスタマイズのできる作りになったと思ってます。
※画面が小さいですが、遊んでみてください！

このActionScriptに興味がございましたら、こちらまでご連絡を。
>>>「エクスワイジーにメールを送る」（なんちゃって！　まあ、メールこんやろうな…）

続きを読む "フラッシュdeクイズ"

Flashでプルダウンメニュー2

ココログでswfファイル（Flashのファイル）が貼り付けられないかと思い実験してみます。

…どうでしょう？　ちゃんと動いてます？

という訳で、もう１つ。
アクセス解析していると、最近「Flash、プルダウンメニュー」というキーワードで検索されているらしい。　というコトで、この前作ったFlashのメニューのサンプルを貼り付けてみます。

…どうでしょう？　こんなプルダウンメニューは？
ポイントはボタンではなくムービークリップを使うコト、一度開いたプルダウンメニューを閉じるための透明な領域を作るコト。　あとは根気よくActionScriptを記述するコトですかね。
詳しくは下記の本を参照ください。

Flashでプルダウンメニュー

なんやかんやでバタバタしてます。
さて、この前　Flashでプルダウンメニューを作りました。　当初、簡単簡単と思っていたのですが、これが意外とややこしかった…。
ヨコに並んだメニュー（メニューバーのように）からプルダウンするのではなく、縦に並んだメニュー（リスト的）にロールオーバーすると、右にプルダウンにてサブメニューが表示されるというモノだった。
サブメニューのエリアが重なるのである。　上のメニューがうまく行けば下のメニューがおかしくなったり、逆もまたしかりで…。　半日程試行錯誤のあげく、何とか思い通りに動作するモノになった。　…嗚呼よかった。
そんなこんなで、ここしばらくでActionScriptの使えるレベルが１ランク上がったかな。　まあ、日々勉強ですな。
…と思っていたら、早速この技術を応用した仕事が入りそうである。　コツコツやってりゃ報われるんじゃぁぁぁ〜！

ActionScript

思えばこの１カ月更新していませんでした。　覗きに来てくれた方、ゴメンナサイ。
さて、Flashを使ってクイズを作るという仕事の話がありました。　Flashは何かと使ってますが、実際プログラマーではないので、ActionScriptは簡単なモノしか扱えないのが事実。
しかし、ちょっといいお金になるので、何とかできないかと持っている本を引っ張り出してもがいてみたり、新しく本を買ってみたり、プログラマーの知り合いに教えを乞うたり…、まあ、他の仕事もこなしながらの試行錯誤の日々でした。
２０問くらいの中からランダムで５問出題し、最後に結果を表示するという至って単純なプログラムではあるのだが、なかなかどうして、素人の僕にはかなり歯ごたえがありました。
オリジナル関数を作ったり、ランダムに乱数を発生させる関数を使ってみたり…。　集計して結果を表示する仕組みは割とすぐできたんですが、問題はランダムに５問出題する仕組みと、一度出した問題は外してしまうという仕組みでしたね。
しかし、ずーっと考えてれば何とかできるモンですね！　ようやくカタチになりました。　あとは先方の好みの演出に作る変えるだけでしょう。　いやいや、日々これ勉強です。

実家の犬：とうとう服まで着させられてます。

Movable Type で最初の一歩

前回紹介した下記の本を買ってきて、Movable Typeをインストールして、何とか記事が公開できるトコロまで漕ぎ着けました。

しかし、この本で紹介されているバージョンが古いのか、かなり設定が違う。　cgiファイルの設定の仕方も微妙に変えなきゃいけないし、つくらなくてもいいフォルダをつくるコトになってたり…。
あと、Movable TypeはMacではやはり使いにくいのかな。
ＩＥでもネスケでも表示されるべき項目がなかったりする。　特にネスケは使えないなぁ。　ＩＥはデータ送信中に止まるコトが多いからイヤなんだけど。　まあ。しゃーないか。
そうそう、肝心のブログはこちらです。

Movable Type

友達から、「ブログつくれるけ？」と電話があった。
そりゃ作れるけど、ココログとかプロバイダーやサーバー会社のサービスを使った上での話。　そろそろMovable Typeの勉強もしないといけないな…。
ちょっと本屋でも行ってみるか。

Action Script

この前から別の本でAction Scriptを勉強していたのだが、やっぱり難しいなぁ。　だいたい、関数ってなに？　演算子ってだれ？　メソッドってウマイ？　プロパティって強い？　という状態の僕にとっては敷居が高すぎた。
…という訳で、入門書（だと思われる）で勉強しなおしだ。

おしえて!!FLASH MX 2004 ActionScript

しかし、この本でも難しいんだよな。　ようやくモヤモヤっとした感じから固まりかけてきた気はするが、油断するとまた煙に巻かれそうだ。　やっぱ、プログラマーの人って頭いいんだなぁ。　ガンバルベェ〜！

Ｆｌａｓｈの勉強もせなならん！

今週末はちょっと時間が取れそうなので、前に買っておいたActionScriptの本を引っ張り出して勉強しよう。

macromedia FLASH ActionScriptスーパーサンプル集
Flashはある程度使っていますが、ActionScriptはホント、基本的なモノしか使えないのが現状。
ActionScriptを使いこなせれば…、

続きを読む "Ｆｌａｓｈの勉強もせなならん！"

『Ｗｅｂサイトを作る』というコト

いろんなトコロで評判が良いので前から読んでみたかったのが下の本です。
（スタイルシート・スタンダード・デザインガイド）

いやいや、ホントに良い本ですね！　Ｗｅｂサイトを作っている人にとっては必須の本だと思います。
発行されてから１年以上になりますが、今からでも遅くはないので、読んでいない方は是非。
Ｗｅｂサイト・コンテンツページを作るにあたって何が必要で何を重視するのか、というコトがよく分かります。
僕は石川県に住んでいますが、このような地方のＷｅｂ制作の現場は…、

続きを読む "『Ｗｅｂサイトを作る』というコト"

Internet Explorerはどうなの？

最近、Internet Explorer（Mac版5.23）で問い合わせフォームなどを入力していると、文字化けするページが多くなっているように思う。
それでなくても、現在のWeb標準から、Internet Explorerは１歩も２歩も遅れているのである。
（まあ、この点ではMac版の方がまだマシである）
世の中で一番普及しているブラウザなだけに困ったモンである。
…という訳で、NetscapeやOperaを使うコトが多くなってきた。　専門的な話になるが…、

続きを読む "Internet Explorerはどうなの？"

特殊文字の入力

ホームページを作っていて、特殊文字の入力で困ったコトはないでしょうか？
実際僕も著作権の©　が出せなくて、（c）などと誤魔化していました。　でも、ちゃんと出てるでしょ？　これは、＆ｃｏｐｙ；と小文字で打てば出てくるのです。
あとは、平方メートル、立方メートル。『m²』『m³』、これもちゃんとでるでしょ。（実はこうやってます、『m<ｓｕｐ>2<／ｓｕｐ>』『m<ｓｕｐ>3<／ｓｕｐ>』※すべて小文字で！）　記号入力で入れてしまうと、WinとMacなどOSの違いで文字化けしてしまいます。有名なのは○付きの数字ですね。
こういう特殊文字のコードに関しては、こちらのサイト（http://e-words.jp/p/r-htmlentity.html）に詳しく載っているので、覗いてみるのも良いかも知れません。
しかし、Dreamweaverって、こういうコトが結構簡単にできるからいいよね。

Dreamweaver MX 2004 & Fireworks MX 2004―For Windows & Macintosh

続きを読む "特殊文字の入力"

『ＳＥＯ対策』

先日アップしたジョアンさんのサイトをＷｅｂ標準準拠にもとづいて（…まあ、現状で分かる範囲でだが）、リフォームしてみた。
しかし、ここで困った問題が発生した。　テスト用に自分のサーバーに挙げていたサイト（リフォーム後）の方が、本来のサイト（リフォーム前）より検索エンジンで上位に表示されるようになってしまった。　どこにも登録や推薦をしていないのに、である。（本サイトの方は、１５件程のサイトに登録・推薦した：予算がないので無料のモノばかりだが）
正しくマークアップするコト（…と言っても、僕の場合まだまだ発展途上の段階だが）の重要性を身をもって体験した。　言い換えるなら、構造化してサイトを作れば、別段なにもしなくとも　ある程度ＳＥＯ対策ができてしまうのだ！（また、その反映速度にもちょっとビックリ）

ちなみに、この本を参考にしてリフォームしてみました。

「XHTMLマークアップ&スタイルシート」リフォームデザインガイドブック―「Web標準」を学びたいWebデザイナーのための指南書。

続きを読む "『ＳＥＯ対策』"

『パン屋さんのWebサイト』

本日、パン屋さんのWebサイトをアップしました。
金沢の三ツ屋町、「つのパン」でおなじみの『フレッシュベイク・ジョアン』さんです。
実は僕も前からこのお店のファンで、ほぼ毎週、ジョアンさんでパンを買ってます。　なので、この話をいただいた時はホント嬉しかったですね。
…で、今回はちょっとオシャレな料理本をイメージしてデザインしてみました。　今後も定期的に更新していきますので、お店ともどもごひいきの程、よろしくお願いいたします。

『元祖、つのパンの店　ジョアンさんです。』

続きを読む "『パン屋さんのWebサイト』"

『Dreamweaver』

やっと『Dreamweaver』を使って、サイトを作り始めている。（…とは言っても、30日間限定の試用版だが。　…とは言っても、まだ正式にＧＯのかかっていない案件のトップページだけだが。）

前にも書いたと思うが、いままでレイアウトはテーブルをギチギチに組んで、そこに画像なり文章なりを埋め込んでいた。　しかし、今後は＜divタグ＞でボックスを作り、cssで表示スタイルを定義する方法に変えますっ！（さぁー言い切った、さぁー言い切った、サァーやるしかないぞ、サァーやるしかないぞ、いいんだな俺、いいんだな俺：なかやまきんに君風）
勝手知ったる『Golive』でテーブルを組んでチャッチャッと作ってしまえば、早いコトは早い。　でも、それじゃあダメなんだ。　それじゃあ、WEBデザイナーとして失格なんだよぉぉぉ。（…と思う。）

続きを読む "『Dreamweaver』"

『いざ、Web標準へ』

２つ抱えていた仕事の１つが手元を離れました。　現在、すでにサーバー上にアップされていますが、諸事情により紹介するコトはできません。　残念！
ちなみに、今回気を付けたトコロは、正しいマークアップ。　HTMLとCSSを今持てる知識と技術で、できうる限り分け、構造化することを心掛けました。
…というか、勉強していくウチに、今までのサイト作りを全面的に見直さなければならないコトに気付きました。　見栄えに囚われすぎていて、構造的に見るとほとんど素人の作り方だったと思います。
タイトルに『いざ、Web標準へ』なんて書きましたが、ホントこれからです。　勉強して見た目も構造的にもクールなサイト作りを目指します。

『暑゛じぃ〜な、毎日…』

『XHTMLとCSS２・Dreamweaver』

週末、前に担当した仕事の修正が来るハズだったのだが、連絡が来なかった。
金沢コミュニティシネマからもページの追加依頼が来るんじゃないかと思っていたが、来なかった。
抱えている仕事達も終わってはないのだが、先方から修正や追加の依頼が、やっぱり来なかった。
…というわけで、図らずも盆休みになってしまった。　いやホント、のんびり休んでいるつもりはなかったのに、思うようにはいかないね。

時間が出来たので、『Dreamweaver』の勉強を始めた。
実は今まで、『GoLive』を使ってサイトを作っていたのだが、ほとんどの仕事先では『Dreamweaver』を使っているし、『Dreamweaver』じゃないと、仕事を出しにくいというトコロもあるので、早めに習得しようと思っていたのである。

いや、実際今日から始めて、まだまだかじっただけだけれど、こっちの方が断然、構造的なサイト作りが出来そうだ。
『HTMLで構造を作って、CSSで視覚的効果を指定する』という、Web標準のサイト作りには欠かせないツールだと思われる。　やっぱり、使われてるだけのコトはあるんだなぁ。
まあ、Macユーザーの僕としては、まだまだCSSだけではレイアウトが崩れてしまうコトが多いので、テーブルも組みながら、CSSも利用するという作りになるとは思うが、理想のサイト作りに１歩１歩近づけるコトであろう。　やったね！　…というか、やったるぜッ！

しかし問題は、その価格。　50,000円は正直痛いなぁ…。　それもネックだったんで、『GoLive』でやって来たのだが…。　う〜む、とりあえず３０日間は試用版で勉強します。

『XHTMLとCSS』

今、２つの仕事がキレイに重なって、結構しんどい。　いつもの２倍は働いてるな（ちょっと大袈裟）。　まあ、しばらくの辛抱、どちらか目途がつけば少し楽になるであろう。
その次の仕事も（話ぐらいは）そろそろ入って来てくれるといいのだが…。

さて、そろそろ「XHTMLとCSS」を勉強しないとな。
CSSは曲がりなりにもちょっとづつ使ってはいるが、本当に使い切れているかと問われるといささか疑問だ。　いや、いささか所ではないだろう。
ともかく、Web標準準拠では、「XHTML＋CSS」なのだそうだ。
なんでも、構造言語と表現言語を分離することによって、５つくらいのメリットがあるようだ。
でも、文章構造はXHTMLで作り、視覚表現をCSSで指定するとは言っても、実際まだよく分かっていない。　だからまた勉強である。
しかし、実際仕事で依頼させるモノには、そこまで求められていないけどね。　…というか、まだまだ構造化できるほど、内容のあるサイト作りも担当していないし、だいいち見た目がＯＫなら、それで良いというトコロも多い。
まあ、時代に取り残されないよう日々勉強ですな。　がんばるべぇ〜。

『電気通信工事業社さんのＷｅｂサイト』

タイトルにもある通り、電気通信工事業社さんのＷｅｂサイトを納品できました。　
電気通信工事業社さんというと、堅いイメージですが、金沢では有名なシミズシンテックさんです。

企業の特徴である先進性、洗練された感じ、清潔感をページを構成してみました。　いかがでしょうか？

さて、今度はとあるパン屋さんのＷｅｂサイトを作っております。　できあがりましたら、またこのページで紹介させていただくかもしれませんので、よろしくお願いします！
では、夜もすっかり更けてきましたので、Good Sleep!

『コンピューターって…』

昨日・おとといとWebサイトを担当している『金沢コミュニティシネマ』のサーバー移行を行っていた。　思ったよりは手間取ってしまったが、まあ順調にサーバー移行はできた。　問題はメールフォームだった。　実際、まだ正式な依頼（…というか、仕様）が来ていないので、正常に動くかどうか、今のウチに確かめておきたかった。
昨日『ガキ使』を見ながら、『三沢vs川田（プロレス）』を見ながら、やっていたのだが、どうしても動いてくれないので、一旦諦めて寝てみた。　…で、今朝起きて再チャレンジ。　サーバーのCGIに関する説明をながめながら、メールフォームCGIの仕様をながめながら、１個１個検証しながらやっていると、やっと正常に動いてくれた。（ミスは以外と簡単なトコロにあったのですが）
…というか、ホント　コンピューターって、融通が利かないよね。　１カ所でも間違ってるとワンともニャーともいわんからね。（当たり前じゃ、犬やネコじゃないちゅうねん！）
いやいや、ホントに。　しかし、間違いがなければ律儀に動きやがるのも事実。　使う人間が限界を持たなければ、どんどん出来るコトが増えていくんだよな。　幸い世の中には勉強熱心な方が大勢いるので、マニュアルや参考書のたぐいには事欠かないしね。
少しずつ出来る事を増やしておきたいと思う今日この頃。　…と、気分良く過ごしていたのも束の間、昼に仕事先からメールがあり、FLASH上のボタンからポップアップウィンドウを画面の右端に開きたいという修正依頼が。
『右端？！』、JavaScriptを使って指定するのは分かるんだけど、『画面の右端』ってどうするんだべか？？？　…まだまだ、まだまだ要勉強だ！

『ＲＳＳリーダー(2)』

このトコロ　週末も仕事をしていたが、今週末に限ってはちょうど仕事の切れ目で、思いがけず３連休になってしまった。　ちょっとは勉強もしたが、おおかた休みを満喫してしまった。　いいねぇ、連休って！　

さて、自分のサイトに　このココログのＲＳＳリーダーを埋め込んでみた（こんな言い方で正しいのか？！）。　…とは言っても、『MOON DAKOTA』というサイトの「RSS FeedをJavascriptでウェブページに表示」というページで、指示通りに入力すると、Javascriptのコードが発行されるので、誰でも簡単にできてしまうのだが…。
しかし、Ｗｅｂサイトにブログを導入するお店などが増えているので、これはかなり使えそうである。
良いモノを見つけてしまった。　作って下さった方、ホントありがとうございます！

日記029『メールフォームCGI』

それは勘違いから始まった…。

ちょっと意味ありげに書き出してみたが、なんの事はない、今日はてっきり『いしかわSOHOプラザ』主催のブログに関するセミナーがあると思ってて、朝から支度して地場産業振興センターに行こうと思っていた。
「１０時からだったよな？　念のため確認しよう」と思ったのが８時半過ぎ。　
いろいろ調べていたが、なんだかうまくたどり着けない。　それもそのハズ、セミナーは２日前に終わってました。　やっても〜た！

という訳で、ちょっと時間が空いたので、自分のサイトにメールフォームを付けてみた。
以前も付いてはいたのだが、それはレンタルサーバーのサービスでCGIに関してほとんど知識がなくても設置できるヤツ。
今回は、勉強も兼ねてシェアウエアのCGIを利用してみた。まあ、自分でプログラムした訳じゃないので大きな顔はできないが…。
この前のアクセスカウンターの一件で、パーミッションの設定の仕方が分かったので、わりとすんなり設置することができた。
これで、メールフォームのあるサイト作りを依頼されても大丈夫！（かな？）
いや、実は　今依頼されている仕事に必要だったのです。　いい実践勉強になりました。

さてと、そろそろ仕事の電話がかかって来るんじゃないだろうか？　ではこの辺で。

…おっと、肝心のメールフォームは、↓ここからアクセスしてみて下さい。
＜::【エクスワイジー】::　〜お問い合わせ〜＞　※お問い合わせフォームをクリックしてみて下さいね！

日記028『ちょっとした仕事』

先日、ある会社から『今日と明日のご予定はいかがですか？』という連絡があった。
何かと思えば、あるサイトをリニューアルする仕事があり、作業者が急遽対応できなくなったので、作業できる人を捜しているらしかった。
まあ、今後も仕事を請け負いたい会社だったので、引き受けてみた。　一応、デザインデータがあり、内容は現行のページから取って来ればいいという事だったので。

…が、確かにデザインデータは送られてきたが、jpgじゃん！　せめてpsdにして欲しいっす！
そんでもって、現行データには誤字が結構あったりしてね。　たとえば『陵』という文字が全部『陸』になっていました。　星陵高校出身者としては、ちょっと悲しかったです（…ウソです）。

まあ、そんなこんなでトップページ含め５ページを次の日の夕方までに仕上げました。
なかなかやるなぁ、俺！（自分で言うなっ！）
そんで、こういうイレギュラーの仕事って結構おいしいなぁ…。　今後もお願い申し上げます。
さて、Action Script の勉強の続きを…。

日記027『アクセスカウンタCGI』

風邪をひいてしまった。冬は良く風邪をひくのだが、夏は滅多にひかないのになぁ。やっと調子が戻りつつある。

…そんなコトはどうでも良く、タイトルの『アクセスカウンタCGI』について。
友達から、あるサイトにカウンターをつけてくれんけ？（金沢弁）という依頼があり、出来るかどうかわからんけど、やってみるわ（金沢弁）と答えておいた。
いろいろ調べ、試行錯誤したあげく、プロバイダーのサービス外で、用意してあるカウンターをつけておいた。
くやしいので、自分のサイトで合間合間にやってみていた。しかし、何故かカウンター画像が出てくれない。問題はパーミッションの設定ではなかろうか？　と推測したが、GoLiveでどうやって設定するの？　参考書に書いてないじゃん！　仕方がないから、windowsからデータをアップしてみたり（僕はMacユーザー）、Fetchを引っ張り出してもがいてみたが、どうしてもダメだった。
でも、さすがはインターネットだね！　わりとすぐ見つかった。（…というか、Adobeのページじゃん！　もっと早く調べろよ、俺！）

いやいや、カウンタ１つ付けるのに、こんなに苦労するとは思わなかった。
まだまだ道のりは険しいのぅ、ＣＧＩ！

日記026『再びAction Script』

今日は少し時間があったので、 この前買ってあった参考書を開き『Action Script』を勉強していた。もともと数学は嫌いじゃなかったのだが、高校から文系の僕にとっては『演算子』『代入』『変数』『関数』などと言う言葉が出てくる『Action Script』はかなりハードルが高いのである。
だいたい、
if (a >= 10){　//変数aの値が10以上ならば、
a = a/2;　　　//aの値を2で割る
}
なんのこっちゃねん！　『a』はいったい幾つやねん！
…頭の中でアホの軍団がダンスを踊りそうな程の訳のわからなさだ。
しかし、コレが数学。道理が分かると便利になるのだ。（たぶん）

おお、英語でしゃべらナイト！が始まってしまう。　では、この辺で。

日記025『ＲＳＳリーダー』

昨日、石川県産業創出支援機構で『ブログのここがスゴイ!ブログの魅力を徹底解説』というセミナーがあったので参加してみました。
ブログ、blogである。もちろんコレはココログだし、ブログなのだが、全然機能を使い切ってなかったんだなぁと思うコトしきりでした。
『トラックバック』もあんまし分かってないのに、『ＲＳＳ』って何？　まあ、聞いた事くらいはあるけど…。『メタデータ』『ＲＤＦ』『ＸＭＬフォーマット』なんじゃ、そりゃ？？？　というような感じでした。（少し大袈裟）
でも『ＲＳＳリーダ』というのは、とても便利なモノらしい。まあ、僕はMacを使っているので、リーダー自体　まだ限られたモノしかないのだが…。
ブログを用いる事でサイト作りが変わってきてるなぁ　と、うすうす感づいてはいたけど、ガラッと替わりそうな印象を受けました。
今まで、テーブルを組んでガチガチにデザインしてたけど、本格的にCSSを勉強しないとな。FLASHの勉強もしないとな。CGIの勉強もしないとな。　…人生、勉強ばっかりじゃ。

『にゃーっ』

日記023『住宅メーカーのWebサイト』

以前の記事で書いたのだが、週末に住宅メーカーのWebサイトを納品できた。
今回はメールフォームがあり、CGIは仕事をふってくれている友達の会社に作ってもらった。今後のコトを考えると絶対身につけておくべき技術である。
FLASHのaction scriptもまだまだ覚えなきゃいけないしな…。FLASHといえば、来週からWeb上でちょっとしたFLASHコンテンツを作る仕事が入った。
今後もこうやってなんだかんだと仕事が入って来ればいいのだが…。頑張らねば！

そうそう、肝心の住宅メーカーのWebサイトは…、
>>株式会社　中部ジェイ・シィ＜http://www.chubu-jc.com/＞さんです。
土地情報や建築事例紹介といったページは今後も頻繁に更新されますので、定期的にご覧いただくと、新しい発見があるかもしれません。お見逃しなく！

日記022『うどん屋さんのWebサイト２』

先日からサイトの制作を２つ抱えており、なかなかに忙しかったんですが、ようやく目途がついてきました。　１つは今週末に公開になると思われます。　いやはや、実際このペースで仕事をしていかないと生活できないんだろうなぁ…。　土日もなんもあったもんじゃないな…。

さて、以前の記事で書いていた『うどん屋さんのWebサイト』が先日公開となりました。
今回はトップページだけの制作だったので、実作業は３〜４日だけでしたが…。いしかわＳＯＨＯプラザの発注情報を見て、実際にアクセスして先方から連絡があった時は嬉しかったですね。
ご主人も気さくでいい方でしたし、何よりうどんがウマイ！　実はサンプルとして、いくつか商品をいただいて試食してみたのですが、すっかりファンになってしまいましたね！　たくさんいただいたのをすべて食べ尽くして、この前も買いに行ったくらいですから。（おまけしてもらいました。　ありがとうございます！）
今後はご主人自身がサイトの運営をしていくという事なので、頑張って欲しいと思います。　私めも微力ながら力になれればと思っております。

さて、引っ張ってしまいましたが、気になるそのうどん屋さんは…
山の上町にある『鶴一屋』＜http://www.e-udonya.com/＞さんです。　自慢の手延べ製法で作った『半生うどん』のツルツルスベスベ感はたまりません！　とてもキレイで明るいお店なので、お店の方にも一度足を運ばれたら…と思います。

以上、今回は２つの記事をお届けしました。　さて、『ガキ使』見て寝よう。

日記021『CSS』

今、とある住宅メーカーのWebサイトを作っている。先週の土曜日から１週間あまり、なんとか目途がたってきた。あと１〜２日程で第一弾は提出できるだろう。
今回、自分なりの課題は『脱、テーブル』である。…とは言ってもテーブル自体は組みます。表を作って罫線を描く時に、今まではテーブルを入れ子にして作ってたのだが、今回はCSSで作ってみている。
罫線だけでなく、背景やリストの行頭など、いろいろ試してみている。
WinとMac、各ブラウザ、そのバージョンごとに確認するのが手間だが、使いこなせれば結構便利になってくるハズである。今現在でもその効果をかなり実感しているし。
まあ、今はGoLiveの機能に頼ってしまっているが。今後はソースだけでも組めるようになりたいモンである。道のりはまだまだ遠いか…。