to-R

12月のセミナー案内

2009-11-19T03:12:40Z

12月にサイバーガーデンbizでセミナーを行います。興味がある方は是非おこしください。

ゼロからはじめるPHP入門講座東京

2009年12月6日（日曜日）

PHPをまったく触ったことのない人、勉強中ながら実践に慣れていない人などを対象にした、1日間（6時間）のハンズオントレーニングです。Webプログラミングやシステム開発、フロントエンド実装、単なる基礎的なスキルの習得ではなく、お問い合わせフォームや簡単なCMSの制作など実践的なスキルを身につけていただく講座です。

［詳細・お申し込みはこちら］

SEO最新事情とライティング講座

2009年12月8日（火曜日）

以前とは大きく変わった検索エンジンの動向やSEO戦略、集客施策をきちんと押さえ、実践的なライティングスキル（キーワード選び、コピーライティング、文章表現）を身につけるための1日間（4時間30分）の講座です。Webサイトの戦略立案や制作業務、私とコンサルティングで多数の経験を持つ益子貴寛（サイバーガーデン）が講師を担当。前半をSEOの最新事情と戦略、後半をSEOライティングで構成します。演習を取り入れた実践的な講座です。

［詳細・お申し込みはこちら］

興味がある方は是非おこしください。

[ASCII.jp]IE6対応！jQueryで透過PNGのロールオーバーを作る

2009-11-19T02:55:57Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第18回 IE6対応！jQueryで透過PNGのロールオーバーを作るが公開されました。

ロールオーバーメニューを利用しjQueryで透過pngを取り扱う方法について解説しています。

興味があるかたは是非ごらんになってください。

Web creators (ウェブクリエイターズ) 2009年 12月号

2009-11-01T09:54:22Z

Web creators (ウェブクリエイターズ) 2009年 12月号が発売されました。

今回、私は「スペースを有効活用するJavaScriptライブラリ」と題して、少ないスペースに多くの情報を掲載するための「ツールチップ」や「タブパネル」、「アコーディオンパネル」、「メニューバー」、「ギャラリーシステム」などについて解説しております。

そのほかにも特集は「最新WEB配色トレンド」や「WEBタイポグラフィ」が紹介されています。
また、「イマドキのCMSとの付き合い方」や「知っておくべきケータイWEBサイト制作事情」なども紹介されています。

興味がある方は、ぜひご覧になってください。

Twitter Follow Badgeを付けてみた

2009-10-31T07:43:50Z

このサイトの右端に「Twitter Follow Badge」を付けてみました。「Follow me」スッキリとしたデザインで色も自由に選べられるので、どんなサイトでもだいたいしっくりとくると思います。

このバッチは「Twitter "Follow" Badge for your site/blog」で簡単に作れます。

ラベルは「Follow us」、「Follow me」、「Follow」、「My Twitter」から選べられます。いろんなサイトを見る限り「Follow me」が多かったので、「My Twitter」とどちらにするか数秒悩みましたが私も「Follow me」で。

色はRGBで自由に設定ができ、右に設置するか左に設置するかが選択でき、トップからの位置をピクセルで設定できます。

サイトやblogへの設置は、発行されるJavaScriptのコードを設置するだけなので簡単です。

追記

JavaScriptのコードは</body>の直前に記述しないとIEでエラーが出るようです。

[ASCII.jp] jQueryでロールオーバー！プリロード対応版

2009-10-29T09:31:57Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第17回 jQueryでロールオーバー！プリロード対応版が公開されました。

jQueryを利用したロールオーバーの作成方法やjQueryでの画像のプリロードの方法について解説しています。

興味がある方はぜひごらんになってください。

[ASCII.jp]透過PNG対応！jQueryでオリジナルツールチップ

2009-10-26T17:24:29Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第16回透過PNG対応！jQueryでオリジナルツールチップが公開されました。

HTMLや透過gif、透過pngなどを利用したツールチップの作成方法について解説しています。興味があるかたは是非ごらんになってください。

[ASCII.jp]jQueryでタブパネルを作るチュートリアル

2009-10-21T09:46:06Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第15回 jQueryでタブパネルを作るチュートリアルが公開されました。

jQueryを利用したタブパネルやAjaxを利用した更新システムについて解説しております。興味があるかたは是非ごらんになってください。

[ASCII.jp]jQueryでアコーディオンパネルUIを自作する

2009-10-10T07:19:13Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第14回 jQueryでアコーディオンパネルUIを自作するが公開されました。

縦形アコーディオンパネルや横型のアコーディオンパネルの作成方法について解説しております。

興味がある方はぜひご覧ください。

Ajax中にページ更新する際の注意点

2009-10-08T17:04:52Z

Ajaxで通信中にF5などを押してページをリロードすると通信エラーが帰ってきます。

詳しくは調べていませんが、どうもFirefoxでの挙動のようです。

参考：FirefoxでAjax中にF5押したとき « pocketo.net blog

このサイトのようにAjaxのXMLHttpRequestをabort()で中断すれば、この問題は解決できます。

var xhr = $.ajax( {....})
$( document ).bind( 'beforeunload', function() {
	xhr.abort();
} );

ただ、通信の数が多い場合は、毎回設定するのは少し面倒。

そういう場合は、以下のように設定しておくとjQueryでajaxを使うと自動でabort()を設定してくれます。

$("body").bind("ajaxSend", function(c,xhr){
	$( window ).bind( 'beforeunload', function() {
		xhr.abort();
	})
});

[ASCII.jp]jQueryで作る画像ギャラリーのチュートリアル

2009-10-01T17:54:11Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第13回 jQueryで作る画像ギャラリーのチュートリアルが公開されました。

jQueryを利用した、拡大ギャラリー、スライドギャラリーの作成方法について解説しています。

興味がある方は是非ご覧になってください。

Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する

2009-10-01T17:29:10Z

ネタ元：マークアップ・エンジニアのJavaScript入門 - 配列を理解する

「JS_practice.zip」の中に，「www.html」というHTMLが入っています。このHTMLの文中，全「p」要素の中の，「www」「WWW」「ウェブ」というテキストだけに，jQueryを使ってcssで背景色を付けてください

jQueryは使って良いようなので、以下のような方法のほうがjQueryっぽいかなと思います。

$(function(){
	$("p").find('*').andSelf().contents().not('[nodeType=1]').each(function(){
		$(this).replaceWith(this.nodeValue.replace(/(w{3}|ウェブ)/ig,"<span class='www'>$1</span>"))
	})
});

サンプル

JS_practice.zipのダウンロード方法がわからなかったのでサンプルのHTMLは適当です。

Web creators (ウェブクリエイターズ) 2009年 11月号

2009-09-29T15:26:39Z

Web creators (ウェブクリエイターズ) 2009年 11月号が発売されました。

今回、私はAjaxを利用したwebサイト構築について解説しております。

そのほかに、特集は「ユーザーを逃さないWebコンテンツデザイン大研究」と題して、会社案内や新着ニュースなどの定番コンテンツのデザイン考察が行われています。

興味がある方は是非ごらんになってください。

現場のプロから学ぶXHTML＋CSS 増刷（9刷）決定　2万部突破

2009-09-29T15:19:03Z

共著書、現場のプロから学ぶXHTML＋CSSの増刷が決定しました。

発売1年を待たずして、2万部突破いたしました。

基本から実践まで習得できる一冊ですので、読んだことがない方、興味がある方は、是非一度書店などで手にとっていただけたらうれしいです。

MTで検索結果(タグページ)の表示件数を変更する。

2009-09-29T03:22:31Z

MTの検索結果(タグページ)の表示件数は20件ですが、mt-config.cgiを修正することにより変更できます。

SearchMaxResults 10

SearchMaxResultsに対して表示件数を入れておけば変更されます。

[ASCII.jp]CSS3のセレクターで作るストライプテーブル

2009-09-26T03:11:41Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第12回 CSS3のセレクターで作るストライプテーブルが公開されました。

今回からは応用編ということで、実践的なサンプルを作っていきます。

CSS3を利用したストライプテーブルの作成方法と、テーブルの行や列のハイライト表示について解説しています。

ストライプテーブルはオーソドックスなテクニックですが、ハイライト表示に関してはかなりよい感じのTIPSかなと思います。

興味がある方はぜひ一度ご覧になってください。

[ASCII.jp]jQueryによるアニメーションエフェクトの基本

2009-09-20T14:54:09Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第11回 jQueryによるアニメーションエフェクトの基本が公開されました。

jQueryの魅力のひとつアニメーションの解説を行っております。

animate()の解説で利用しているクリックギャラリーなどは応用性が高いのじゃないかなと思います。

一応、基本編はこれで終了で次回からより実践的なTIPSに入っていきます。

[ASCII.jp] jQueryでAjaxを利用する基本チュートリアル

2009-09-11T18:45:37Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第10回 jQueryでAjaxを利用する基本チュートリアルが公開されました。

jQueryでAjaxを利用してサーバーと通信をする基本的な方法を紹介しています。

興味がある方はぜひごらんになっていただけたらと。

[ASCII.jp] jQueryによるフォームのデザインの基礎

2009-09-02T17:24:38Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第８回 jQueryによるフォームのデザインの基礎（前編）と第９回 jQueryによるフォームのデザインの基礎（後編）が公開されました。

フォームでのjQueryの機能や様々なＴＩＰＳを紹介しております。

なるべく実用的なサンプルを利用して、紹介しておりますので是非参考にしてください。

Web creators (ウェブクリエイターズ) 2009年 10月号

2009-09-02T17:12:55Z

Web creators (ウェブクリエイターズ) 2009年 10月号が発売されました。

今回、わたしはJavaScriptやCSSを利用したお問い合わせフォームのカスタマイズに関して解説しております。

特集では「CSSデザインテクニック最新最強テクニック」として様々なＴＩＰＳが紹介されています。

興味がある方はぜひ手にとって見てください。

Web creators (ウェブクリエイターズ) 2009年 09月号
 Web creators (ウェブクリエイターズ) 2009年 08月号発売されました。
Web Designing (ウェブデザイニング) 2009年 07月号で執筆しました。
Web creators (ウェブクリエイターズ) 2009年 07月号でGoogle Maps APIについて執筆
 Web creators (ウェブクリエイターズ) 2009年 06月号で執筆しました。
Web Creators12月号
 Webデザイナー白書2007
Web creators 10月号でalphafilter.jsが紹介されました。

9月のセミナー案内

2009-08-29T11:44:36Z

9月は以下の日程でセミナーを行います。興味がある方は是非おこしください。

9月25日まだある検索エンジン対策！　SEMによる訪問者数アップ術 [大阪]

SEM(Search Engine Marketing)とは検索エンジンマーケティング手法です。ターゲット層からの集客や自社サイトからターゲット層に適した情報発信を行う為のものです。

今回のセミナーでは、最近の検索エンジンで特に重要とされるマーケティング的視点をさらに意識したSEM対策として

[詳細・申し込み]

9月26日Webサイトの動的表現力を高める　WebデザイナーのためのJavaScript入門[大阪]

HTMLでは表現しきれない動的なページを簡単に作れるということから人気のあるJavaScript。数あるJavaScriptで表現できることはたくさんあると言われています。

この講座は、表現力をもっと高めたいWebデザイナーやマークアップエンジニアの為のJavaScript入門講座です。

[詳細・申し込み]

9月27日SEO最新事情とライティング講座 [東京]

以前とは大きく変わった検索エンジンの動向やSEO戦略、集客施策をきちんと押さえ、実践的なライティングスキル（キーワード選び、コピーライティング、文章表現）を身につけるための1日間（4時間30分）の講座です。

Webサイトの戦略立案や制作業務、コンサルティングで多数の経験を持つ益子貴寛（サイバーガーデン）と西畑一馬（to-R）が講師を担当。前半をSEOの最新事情と戦略、後半をSEOライティングで構成します。演習を取り入れた実践的な講座です。

[詳細・申し込み]

興味がある方は是非おこしください。

[ASCII.jp] jQueryのイベントをチュートリアルで学ぶ

2009-08-20T07:39:55Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第6回 jQueryのイベントをチュートリアルで学ぶ（前編）と第7回 jQueryのイベントをチュートリアルで学ぶ（後編）が公開されました。

クリックやマウスの操作などのjQueryイベントの使い方について簡単なギャラリーシステムを作成しながら解説を行っております。

だいぶ、プログラミングチックになってきましたが、簡単にここまで出来るんだというのを実感していただけると思います。

興味がある方は、是非ごらんになってください。

京都通り名ジオコーダ『ジオどす』

2009-08-20T07:02:31Z

知り合いが新しいWebサービスを公開したので紹介します。京都の通り名から経度緯度を取得できるWebサービス京都通り名ジオコーダ『ジオどす』です。

京都通り名ですが、これはGoogle Maps APIでサービスを作っている場合、結構問題になってくることが多いです。わたしも以前、京都のホテルの観光案内システムをGoogle Maps APIで作成したことがあるのですが、やはりここが問題になりました。

簡単に言うと京都の方が使っている住所表記が、一般的な郵便住所と異なる為、Google Maps APIでは経度緯度が取得できません。

開発裏話によると、ほとんどの地図サービスはこの通り名に対応していません。

それを解決するのが今回紹介する『ジオどす』です。

使い方は簡単、公開されているAPIのスクリプトを読み込み、

<script src="http://geodosu.com/http://api.geodosu.com/gclientgeocoder_geodosuextension.js" type="text/javascript"></script>

通常、Google Maps APIでジオコーダを宣言する以下の表記を

geocoder = new GClientGeocoder();

以下のように変更します。

geocoder = new GClientGeocoderWithGeodosu("{APIキー}");

これで、getLatLng()時にGoogle Maps APIと照合し、経度緯度が取得できない場合は「ジオどす」で再照合が行われるようです。

免責事項によるとsearchorderを利用しない場合は1日50000リクエストまでは商用利用が可能のようです。

ニッチといえばニッチですが、必要な際は非常に便利なサービスですね。

興味がある方は試してみてください。

Firefox3とESET Smart Securityでアドオンが更新できない際の対応方法

2009-08-10T05:11:59Z

最近Firefoxでアドオンを更新しようとすると以下のようなエラーが出るようになりました。

「Firefox はファイルをインストールできませんでした。
URL = http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi
原因: ダウンロードのエラー - 228」

対応方法を調べたところどうもウイルス対策ソフトの「ESET Smart Security 」が原因のようでした。

詳細設定の「パーソナルファイアウォール」の「プロトコルフィルタリング」で「アプリケーションプロトコルフィルタリングを有効にする」のチェックを外せばエラーが出なくなります。

[ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する

2009-08-06T07:53:27Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第5回サンプルで学ぶjQuery：(X)HTML/CSSを操作するが公開されました。

jQueryを利用して(X)HTMLやCSS操作する方法について解説しております。

JavaScriptは基本的に(X)HTMLやCSSを操作するプログラミング言語ですので、ここを押さえておけば今後発展する様々なUI作成がすんなりと理解できるかと思います。

数が多いですが、パターンが決まっておりますので何が出来るかを理解しておくだけでもよいかなと思います。

8月26日SEO最新事情とライティング講座

2009-08-05T23:51:57Z

8月26日にサイバーガーデンbizでSEO最新事情とライティング講座を行います。

私は前半部分の「SEOの最新事情と戦略」についてお話させていただきます。

最近のSEOのトレンドや、有効的なSEO施工、また「コンテンツ」についていくつかの切り口からお話いたいと思っております。

後半はサイバーガーデン益子さんによるSEOライティングの話です。

興味がある方はぜひお越しいただけたらと思います。

[詳細・申し込み]

Web creators (ウェブクリエイターズ) 2009年 09月号

2009-08-04T07:25:08Z

Web creators (ウェブクリエイターズ) 2009年 09月号が発売されました。

今回、私はmarginを使った様々なTIPSについて解説をしております。

特集１では「WEBデザインはここで差がつく！カッコいいWebをつくる30の条件」です。デザインやレイアウトに関するTIPSが紹介されています。

特集2では「あのクリエイターがスゴイ結果を残すワケ」色々な方の仕事の取り組み方が紹介されています。

他にもlinkerさんの連載が開始されたりと盛りだくさんの内容になっております。

jQuery.suggestをIEの日本語に対応

2009-07-30T22:32:13Z

jQuery.suggestでサジェスト機能を実装しようとしたところIEでの日本語の認識が上手に行きませんでした。

調べてみたところ原因は100行目あたりの以下のコード。

} else if ($input.val().length != prevLength) {
	if (timeout) 
		clearTimeout(timeout);
	timeout = setTimeout(suggest, options.delay);
	prevLength = $input.val().length;
}

文字数で変化を取得しているので、たとえば「か」と入力したい場合、最初の「k」を入力した時点でサジェスト機能が動作し、「a」を入力して「か」になった段階では文字数が変わらないのでサジェスト機能が動作しない形になる。

} else if ($input.val() != prevLength) {
	if (timeout) 
		clearTimeout(timeout);
	timeout = setTimeout(suggest, options.delay);
	prevLength = $input.val();
}

このように.lengthを取ってやればちゃんと動作します。

[ASCII.jp]初めてのjQuery：セレクターAPIを一挙解説

2009-07-30T04:08:03Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第3回初めてのjQuery：セレクターAPIを一挙解説（前編）と第4回初めてのjQuery：セレクターAPIを一挙解説（後編）が公開されました。

jQueryの魅力のひとつ『セレクターAPI』について解説しております。

『セレクターAPI』とはjQueryで操作したい要素を簡単に選択できる機能です。

わかりやすいように、解説と簡単なサンプルをセットにしていますので、リファレンスとしても活用できるのではないかなと思います。

[ASCII.jp] jQueryのダウンロードとインストールのチュートリアル

2009-07-22T09:11:30Z

ASCII.jpの連載「Web制作の現場で使えるjQuery　UIデザイン入門」で第２回 jQueryのダウンロードとインストールのチュートリアルを公開しました。

jQueryのダウンロードとWebサイトでの利用方法、Google AJAX Libraries APIの利用方法などについて執筆しております。

興味がある方はごらんになっていただけたらと思います。

to-R

12月のセミナー案内

ゼロからはじめるPHP入門講座 東京

SEO最新事情とライティング講座

[ASCII.jp]IE6対応！jQueryで透過PNGのロールオーバーを作る

関連エントリー

Web creators (ウェブクリエイターズ) 2009年 12月号

関連エントリー

Twitter Follow Badgeを付けてみた

追記

関連エントリー

[ASCII.jp] jQueryでロールオーバー！プリロード対応版

関連エントリー

[ASCII.jp]透過PNG対応！jQueryでオリジナルツールチップ

関連エントリー

[ASCII.jp]jQueryでタブパネルを作るチュートリアル

関連エントリー

[ASCII.jp]jQueryでアコーディオンパネルUIを自作する

関連エントリー

Ajax中にページ更新する際の注意点

関連エントリー

[ASCII.jp]jQueryで作る画像ギャラリーのチュートリアル

関連エントリー

Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する

関連エントリー

Web creators (ウェブクリエイターズ) 2009年 11月号

関連エントリー

現場のプロから学ぶXHTML＋CSS 増刷（9刷）決定 2万部突破

関連エントリー

MTで検索結果(タグページ)の表示件数を変更する。

関連エントリー

[ASCII.jp]CSS3のセレクターで作るストライプテーブル

関連エントリー

[ASCII.jp]jQueryによるアニメーションエフェクトの基本

関連エントリー

[ASCII.jp] jQueryでAjaxを利用する基本チュートリアル

[ASCII.jp] jQueryによるフォームのデザインの基礎

関連エントリー

Web creators (ウェブクリエイターズ) 2009年 10月号

9月のセミナー案内

9月25日まだある検索エンジン対策！ SEMによる訪問者数アップ術 [大阪]

9月26日Webサイトの動的表現力を高める WebデザイナーのためのJavaScript入門[大阪]

9月27日SEO最新事情とライティング講座 [東京]

関連エントリー

[ASCII.jp] jQueryのイベントをチュートリアルで学ぶ

関連エントリー

京都通り名ジオコーダ『ジオどす』

関連エントリー

Firefox3とESET Smart Securityでアドオンが更新できない際の対応方法

関連エントリー

[ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する

関連エントリー

8月26日SEO最新事情とライティング講座

Web creators (ウェブクリエイターズ) 2009年 09月号

関連エントリー

jQuery.suggestをIEの日本語に対応

関連エントリー

[ASCII.jp]初めてのjQuery：セレクターAPIを一挙解説

関連エントリー

[ASCII.jp] jQueryのダウンロードとインストールのチュートリアル

関連エントリー

ASCII.jpで連載開始しました「Web制作の現場で使えるjQuery UIデザイン入門」

ゼロからはじめるPHP入門講座東京

現場のプロから学ぶXHTML＋CSS 増刷（9刷）決定　2万部突破

9月25日まだある検索エンジン対策！　SEMによる訪問者数アップ術 [大阪]

9月26日Webサイトの動的表現力を高める　WebデザイナーのためのJavaScript入門[大阪]

ASCII.jpで連載開始しました「Web制作の現場で使えるjQuery　UIデザイン入門」