トップ &gt; PHP &gt; PHP - 人気ブログ(Blog)検索結果詳細 (2008年12月1日 11時)

第14回 htmlの制御 jQueryによるJavaScript入門

サンプルではbody要素にmeaningfullnameと言う名前で、データを保存しておき、ボタンがクリックされた際に取得しています。

jQueryのセレクタを活用しよう

jQueryにはたくさんのセレクタがある。CSSセレクタだけではなくjQueryのオリジナルセレクタも多用しよう。

よく利用するのは以下のセレクタです。

:input

例：:inputはページ内のinput要素、select要素、textarea要素などを指定できます。

[attribute=value]

例：input[name='container']はname属性の値がcontainerのinput要素

:eq(index)

例：table:eq(3)はページで4個目のtable要素

たくさんのDOMを操作する場合はlivequeryプラグインを利用しよう

livequeryプラグインを利用すると、あとで追加する予定の要素に対してイベントをバインドしておくことが出来ます。

$('div.edit').livequery('click', function(){
//go into edit mode
});

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

Ajaxを利用してたくさんの要素を操作し、イベントを制御するときに便利です。

Ajaxでformを送信する場合はformプラグインを利用しよう

jQuery Form Pluginを利用すると

$(form).ajaxSubmit();

という簡単な記述でformの送信が出来る。

classをflagとして利用しよう

addClassメソッドを利用してclassを追加しておけば、hasClassメソッドを利用してflagとして利用することが出来る。

[リクリ]第14回 htmlの制御 jQueryによるJavaScript入門

リクリでブログ書きました。HTMLの制御を行う方法を解説しています。

次回は、HTMLの挿入についての予定。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年11月18日 15時21分

javascript javascript jquery recreatorspartykansai

ブログに承認機能を付けるMTプラグイン「EasyWorkflow」

EasyWorkflowはブログに承認機能を付けるためのMTプラグインです。

製作者のにっくさんより、「PostToMail」を参考にしたとのご連絡いただいて、非常によさそうですので紹介します。

「ライター」や「ユーザー」などのブログ投稿者に対してブログの公開権限を与えず、「未公開（原稿）」もしくは「未公開（承認待ち）」の状態でエントリーを保存することが出来ます。

「未公開（承認待ち）」が選択された場合は、プラグインで設定した承認者のメールアドレスに承認確認のメールを送信します。

承認者は、承認権限のあるユーザー(「ウェブサイト管理者」、「ブログ管理者」、　「編集者」)でログインして公開を行うという、承認のワークフローを実現できます。

EasyWorkflowを利用すればPostToMailより厳格な承認フローが実現できますので、必要な方は試してみてください。

現場のプロから学ぶXHTML＋CSS 発売されました。

『現場のプロから学ぶXHTML+CSS』が本日発売しました。

336ページとかなりのボリュームですが、基本から応用までかなり充実した内容です。

書店などで見かけた際には、ぜひ手にとって内容を確かめてみてください。

Amazonで購入
 楽天市場で購入

連動イベントの2009年1月17日に行われる「CSS Niteビギナーズ in 大阪」も残席33席と残りわずかです。申し込みを忘れている方はお早めに!

[リクリ]第13回 textによるテキストの制御 jQueryによるJavaScript入門

リクリでブログを書きました。(久々かも)

第13回 textによるテキストの制御- jQueryによるJavaScript入門

textメソッドの使い方について解説しています。次回はhtmlメソッドの予定。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年11月6日 13時29分

[pdf]はじめてのSubversion（サブバージョン）

[書評]検索にガンガンヒットさせるSEOの教科書

アイレップの渡辺隆広さんの「検索にガンガンヒットさせるSEOの教科書」を読んだので感想を。

前作の「検索にガンガンヒットするホームページの作り方」も昔読んだのですが、内容量は100ページ増えて価格は80円増しの1680円なので非常にお得感がありますね。

内容としては、SEOの情報などをずっと追っている人にとっては目新しいものはありませんが、ベーシックなテクニックから、あまり知られていないテクニック、少しレガシーなテクニックまでの網羅度が非常によいので、SEOしている人には復習確認、これから始める人やSEOがあまりわからない人には知識の習得に、最適な一冊ではないかと思います。

SEOに関しては新しい知識が重要になりますので、新しい目の知識のほうがページをさいて重点的に説明してくれています。

特に、6章のSEOキャンペーンの戦略設計などは重要ではないかなと思います。今だに検索結果の順位にのみ固執して、サイトの目的達成のアプローチとしてSEOを利用できてない方も多いのでそういう方には是非読んでいただきたいです。

XSSの脆弱性を限りなくなくす方法

XSSがはやっているので便乗しておきます。

私がよく使う方法なんですが、この方法を利用するとXSSの脆弱性を限りなくなくすことが出来ます。

~~対応方法は、PHPファイルの最初に以下のコードを挿入するだけ。~~

foreach($_GET as $key => $value){
	$_GET[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES);
}
foreach($_POST as $key => $value){
	$_POST[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES);
}

~~これで自動的にエスケープの処理を行ってくれます。~~

通常のXSS対策がエスケープしたくない場所以外はhtmlspecialcharsを利用してでエスケープを行うのに対して、このコードを入れることによりエスケープしたくない場所にhtmlspecialchars_decodeを利用するといった全く逆のアプローチになります。

~~これでうっかりXSSスクリプティング対策忘れというのを防ぐことができます。~~

~~htmlspecialchars_decodeはPHP5から利用できる関数ですので、PHP4ではhtml_entity_decodeを利用すること大体同じような効果が得られます。~~

サンプルコードで一度デコードを行ってからエスケープを行っているのは実体参照化された文字列に更に実体参照化していくと「&amp;amp;amp;」とえらい事になるからです。

GETやPOSTで受け取る値の性質が変わるので、すべてのプログラムで冒頭に入れれば動作するという魔法のコードではないですが、導入すれば楽してXSS対策ができるかなと思います。

~~また、すべてのXSSの脆弱性に対応できるわけでもないのであしからず。~~

追記

いくつかの反応をみていると入力時ではなく、サニタイズせず出力時にエスケーブすべきとの反応が見受けられます。それに関しては全くその通りで否定はしないんだけども、XSS脆弱性の大半が「対策漏れ」から来るものだと思っていて、「対策漏れ」に関してはXSS対策の正しい知識があるかどうかとは別の次元の話だとおもう(だから一流のプログラマが参加しているようなシステムでもXSS脆弱性が発生してるんだよね)。あくまで「対策漏れ」をなくす一つのアプローチだと思っていただけたらよいかと。

ベストの対策はアプリの性質に合わせたエスケープなんだけども、これって完全になくすにはかなりの几帳面さが必要になるんじゃないかなと思います。(規模が大きくなればなるほど)

また、出力時に、エスケープするのはフレームワークなり何なり利用すればいいんだけども、それはシステムの出力アプローチによって色々変わるのでケースバーイケースで対応していく必要があるのではないかと。

当然「限りなくなくす」なんて書いている通り「完全になくす」方法ではないです。script要素内やstyle要素内、イベントハンドラ内で利用したらXSS脆弱性になるし、$_REQUESTを利用している場合もエスケープされない、また途中のコードによってはアンエスケープされたものを出力してしまうなど、完全になくそうと思えばやっぱり正しい知識が必要なるります。

~~別に出力時のエスケープと併用しても問題ないかなと思いますし。~~

~~さらに追記~~

~~「<」も「<」も「<」として表示されるので入力データを生で利用したい場合などには向きません。~~

生データを利用したい場合は$_REQUESTというのもありだけど、「<」と「<」を使い分けるような処理が必要な場合には、めんどくさくなるので私も使いません。

~~なんども書きますが「魔法のコード」ではありませんので。~~

さらにさらに追記

私が伝えたいことが全く伝わらないエントリーのようなので、全部delしました。

有効な局面でのみ利用すれば良いだけの話なんですけどね。。。

Yahoo!とアフィリエイト

ネタ元：リンクスパムとして報告されたURLのほぼすべてが「スパム」

Yahoo!検索スタッフブログから面白い発表がされています。

内容は「Yahoo!検索サイトエクスプローラー」の使い方なのですが、

リンクを受けたサイトが「リンクファーム」の一部としてみなされ、ランキングの降格やインデックス削除の巻き添えを食う場合がある

それを防ぐ為には、Yahoo!検索サイトエクスプローラーを利用してくださいとのこと。

Googleなどは外部からのリンクでは、受リンクサイトに対して悪影響を与えることはできない(と発表している)のに対してYahoo!は逆のようですね。(極端に言えば、外部リンクの操作により競合サイトを陥れることができるようです)

まぁ、個人的には競合を陥れるという行為はSEOとして不毛と考えているのですが、この発表を気にそういうスパムツールが出回るのではないかなと思います。

さて、そんなことより個人的には、このネタ元でスパムサイトとして定義しているものが興味深いです。

アフィリエイトのみで中身がないサイト。
ある特定のサイトへの誘導が目的のサイト。
自動で作成された文章に、アフィリエイトを掲載しているサイト（いわゆる「ワードサラダ」）。
他サイトからの引用で記事を作成し、アフィリエイトを貼り付けているサイト。

SEOでスパムサイトという言葉が使われる際に対象にされていたのが「検索エンジンに上位表示される為に、不正な行為をしているサイト」だったのに対して、今回は端的にいえば中身のない別の目的を達成させるサイトとして使われています。

ここに挙げられているサイトをスパムサイトとして定義するのに異存はありませんが、実際にはYahoo!はアフィリエイトが利用されているサイトにフィルタリングを掛けていると思われます。

アフィリエイトがメインではなくサイドにGoogle Adsense をちょっと張っているようなサイトもこのフィルタリングの対象です。

当然、Google Adsenseを張っている当サイトもこのフィルタリングの対象になっていると思われます。(to-Rで検索するとわかりやすいです。リンク知名度ともに劣る商用サイトのほうが本ブログより上位に表示されます。)

1年前ぐらいにアフィリエイトが利用されているサイトがYahoo!検索上位から軒並みいなくなるという現象がありましたが、それ以降フィルタリングの強弱は調整されていますがフィルタリングは健在です。
(感覚的には1年前以前にもフィルタリングがあったけど、1年前に非常に強化されたのではないかなと感じています)

いくつかのサイトをコンサルティングした際にサイドのGoogle Adsenseを取るなどのアドバイスをした所、ほとんどのサイトでYahoo!からのトラフィックが激増しました。
(広告収入を目的としたサイトの場合、トラフィックが激増しても収入が変わらない、もしくは減るといった現象になるのでここらへんのサジ加減はむずかしいですね。)

Yahoo!からのトラフィックにお悩みの方は、一度アフィリエイトへのリンクを外して様子を見てみるのもよいかなと思いますよ。

フリーランスの通帳事情

フリーランスのメリットの一つに「屋号付き事業用通帳」を作成できるというものがあります。

個人の場合は、通常ひとつの銀行につき、ひとつの普通口座しか作れないのですが、個人事業主は「屋号付き事業用口座」としてもうひとつ口座を作成できます。

銀行にもよるのですが、東京三菱UFJ銀行や三井住友銀行、りそな銀行などの大手では作成可能です。口座に屋号を入れれますので「フリーランス感」を実感できます。

私は東京三菱UFJ銀行に「ニシハタカズマ」と「トゥーアールニシハタカズマ」という二つの口座を所持しています。

さて、屋号付き事業用口座ですが作ってみたものの、いくつかメリットとデメリットがあり、今後使っていくかどうかが微妙なかんじです。

メリットは個人口座とのやり取りが同行扱いになるので手数料が安いです。これを他行にしてしまうとお金に移動に結構な手数料を取られてしまいます。

デメリットはインターネットバンキングが法人扱いになり月々2,100円の手数料を取られてしまいます。年間2,6200円と考えると結構な金額ですね。(東京三菱UFJの場合)
また、契約者と通帳の名義が同じでないと振込みを行ってくれないようなサービスには利用できません。(その為、アフィリエイトなどをやっていると入金口座の一元化が難しい)

現在はインターネットバンキングは利用せず、月に一度ほど入金確認の為、銀行に通っています。記帳もついでなのでそれほど手間はかかりませんが。

もしフリーランスになる方がいましたら、屋号付き事業用口座のメリット・デメリットを考ええてから事業用口座を決めたほうがよいかもしれません。

[書評]ちょいデキ!

最近まったく本を読んでなかったのですが青野慶久さんのちょいデキ！をいただいたので移動の合間に読んでみました。

このp.234というボリュームはよいですね。最近本を読む時間がなかなかを作れずに未読、読みかけの本が溜まってきましたが、久しぶりに完読しました。

内容は、「すごくデキル人」になるのは大変だけど「ちょっとデキル人」になるのは簡単だよねという感じで、日常の仕事でちょっとだけ気を付ければ効率よく進めるコツなんが書いています。

そんな気を張らずに気楽にいこうよという感じな「気配り」や、ここを少しだけ変えると印象が違うよといった感じのことが、いろいろと書かれています。

個人的に気に入ったのは、p225の「お金について」の一節。

「企業の目的は利潤ではない。利潤は存続の条件だ！」

経営学者ピーター・ドラッカー氏の言葉を引用しているのですがなるほどと思いました。

日々、「見積もり」「制作」「納品」という作業を繰り返しているとなかなか忘れてしまいがちになりますね。

ちょっと仕事にストレスを感じている人にはお勧めの一冊です。

現場のプロから学ぶXHTML+CSS

CSS Nite ビギナーズの連動書籍『現場のプロから学ぶXHTML+CSS』が完成しました。

昨日の夜までいろいろとやり取りをしており、やっと完成したという感じです。

内容はXHTML+CSSの基礎から応用、マルチデバイスに対応する為のテクニック、そしてJavaScriptライブラリと盛りだくさんになっています。

私は8章『JavaScriptライブラリとCSS』と9章『CSSトラブルシューティング集』の一部、そしてミニコラムを何本か書かせてもらっています。

現場の最前線でWeb制作に携わる7人のプロ直伝の、「いま知っておくべき」XHTML+CSSの知識とテクニックを集成した1冊です。

これからXHTML+CSSを学びたい方から、すでに覚えたけどうまく使いこなせてないと感じる方にまでお勧めの一冊になりますので書店に並んだ際には、是非手に取っていただけたらと。

CSS Nite in Osaka vol.12終了

CSS Nite in Osaka vol.12が終了しました。

私は『はじめてのSubversion（サブバージョン）』と題してSubversionに関してのお話をさせていただきました。

講演内容の資料を公開します。音声は追ってCSS Nite公式サイトより公開されます。

はじめてのSubversion（サブバージョン）

View SlideShare presentation or Upload your own. (tags: subversion)

Subversionについて

Subversionは色々と使いこなすとより高度にプロジェクト管理を行うことができます。

ひとまずはご自身のファイルをバージョン管理してみてください。

バージョン管理だけでなく、外付けHDDやUSBメモリにリポジトリを設定しておくことによって、PC本体が壊れた場合などのバックアップツールとしても活用できますので。

御礼

最後になりましたがご来場された方、本日はありがとうございました。

SQLインジェクションについて

ネタ元：$_GETを安易に受け入れちゃダメ！

前に書いたエントリー(re:キケンなSQLインジェクション)が誤解を与えてしまったようですので、もう少し補足しておきます。

まず、結論から書くと、

mysql_queryの場合はチェックが要らないって言ってるわけではないです。

そして、

mysql_real_escape_stringを過信してはいけません

様々なSQLインジェクション

複合クエリ

$sql="select * from geekDB where id = " . $_GET['id'];
$result = pg_query($sql);

これは$_GET['id']の値が以下のような場合問題が発生します。

'';DELETE FROM geekDB;

テーブルを丸ごと消すことが可能です。

前回のエントリー(re:キケンなSQLインジェクション)でmysql_queryは複合クエリに対応していないので消すことができないと書いていますが、基本的にDBを考慮せずにこの対策は行ったほうがよいです。

脆弱性の多くが知らなくて発生しているのではなく、知っていて対処忘れが原因で発生するからです。対応する・しないを毎回考慮するのではなく、常に対応するの姿勢だと間違いが少なくなる為です。

WHERE句

$_GET['id']の値が以下のような場合にもSQLインジェクションが発生します。

'' OR effective=0

これは複合クエリではない為、mysql_queryの際にも発生します。

実行されるSQL文は以下のようになり、

select * from geekDB where id = '' OR effective=0

effectiveが0のレコードを取得というSQL文に変わりします。

WHERE句を自由に設定できるということは、そのテーブルのデータを好きなように取得できるということになります。

UNION句

$_GET['id']の値が以下のような場合にもSQLインジェクションが発生します。

'' UNION SELECT * FROM geekDB_secret

UNIONを利用して他のテーブルのデータと結合して、geekDB 以外のテーブルのデータを取得することも可能です。

このようにmysql_queryの際にもSQLインジェクションは発生しますので忘れずに対策する必要があります。

mysql_real_escape_stringを過信しない

SQLインジェクションについてmysql_real_escape_stringを利用するのは定石ですが、正しく使わないとSQLインジェクションは防げません。

$sql="select * from geekDB where id = " . mysql_real_escape_string($_GET['id']);
$result = mysql_query($sql);

このコードにはまだSQLインジェクションの脆弱性が含まれています。
というかほとんど改善されていません

$_GET['id']が以下のようなSQLの場合、結局WHERE句を自由に変更することが可能です。

1 OR effective=0

mysql_real_escape_stringがエスケープする文字は『\x00』、『\』、『'』、『"』、『\n』、『\r』、『\x1a』なので、なにもエスケープされずにクエリを実行することが可能です。

$sql="select * from geekDB where id = '" . mysql_real_escape_string($_GET['id'])."'";
$result = mysql_query($sql);

数値などのデータでもWHERE句などに入れる際には'(シングルクオーテーション)で包むことで対策することが可能です。

以下のサイトも合わせてごらんになるとよいかなと思います。

SET NAMESは禁止
 PHP の extract 関数は危険という話
 HelloWorldプラスアルファからさらに上を目指すために

10月のセミナー案内

10月に以下の日程でセミナーを行います。
興味があるかたは是非おこしいただけたらと思います。

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

10月11日（土曜日） 10:00-16:00

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

CSS Nite in Osaka, Vol.12

10月15日（水）18:30〜20:30

Subversion（サブバージョン）とは、プロジェクトのファイルのバージョン管理を行うソフトウェアです。Subversionとは何か？　どのようなメリットがあるのか？　どのように利用するのか？について解説します。

私の担当時間は19:20～19：40です。

詳細

MTテンプレートカスタマイズ実践

10月18日(土) 13:00～19:00

Movable Typeで商用サイトを作成する際には『脱blog』が重要になってきます。その際に重要なのがテンプレート設計です。この講座では、MTタグを使いこなす為の概念や高度なカテゴリー操作、テンプレート操作を実装する為のTIPSを交えながら、Movable Typeで商用サイトを構築する実践的なテクニックを学んでいただきます。
また、Movable Typeで開発を行う上で、テンプレート修正のたびに再構築を行っていては非常に開発効率が悪いです。その点を改善するための開発環境の構築についても併せて紹介します。

ゼロからはじめるPHP入門講座大阪

10月19日（日） 10:00～16:00

Ajax基礎講座

10月22日(水) 13:00～19:00

JavaScript が備える特殊な通信機能を用いたWebアプリケーション開発手法の新しいアプローチを『Ajax（エイジャックス）』と呼びます。米国大手検索サイト Google が新サービス"Google Suggest"や"Google Maps"を開発する際に、この技術を用いたことで一躍脚光を浴び、現在では多くのWebアプリケーションで採用されています。 Ajax を簡単に利用できるように開発されたAjaxフレームワーク『jQuery』を利用し、『Ajax』を実践的なサンプルを通して詳しく解説します。

11月のセミナー

11月1日（土）にCSS Nite ビギナーズが開催されます。

当初180席でしたが追加枠として60席追加されています。(残席29席)

セッション内容も公開されており私は、「JavaScriptライブラリとCSS」という内容でお話させていただきます。

大阪版は2009年1月17日（土）ですが、10月17日までは早期割引として1000円安く申し込めます。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年10月6日 6時31分

CSS Niteビギナーズ大阪版

CSS Niteビギナーズ大阪版の募集が開始されています。

2009年1月17日と少し先のお話になってしまいますが、10月17日までの申し込みは早期割引として1,000円安い4,000円で申し込めます。東京版は、開催1ヶ月前でもうすぐ満席のようですので、大阪版もギリギリで申し込もうとすると満席になっていることが考えれますので、興味がある方はお早めにご検討ください。

内容

ここ最近、CSSのテクニックの情報が出尽した感じはありますが、まだCSSでの制作に移行できていない方やCSSを勉強中の方も少なくありません。

そういった、これから取り組みたい方や、改めてじっくり学びたい方の為のセミナーになります。

ターゲット

現在、テーブルレイアウトで作業しており、CSSレイアウトを勉強したい方
CSSレイアウトについてステップアップしたい方
DTPを通してスタイルシートなどの知識がある程度あり、WebのマークアップやCSSレイアウトを勉強したい方
社内教育を担当されている方、教員・インストラクターなどの方

CSSというWebサイトを構築する上で、避けては通れないスキルの入門セミナーになりますので、以下のような普段の業務でCSSをバリバリは使ってないけれども、必要になることがあるという方にもお勧めです。

企業のWebマスターの方
コーディングなどをあまり行わないWebディレクターやプロデューサーの方
Webプログラマー

また、Nintendo Wii/DSやiPod touch/iPhone対応から、JavaScriptライブラリなどの最近のトレンドにも触れますので、もう一度CSSの基本を確認しながら最新トレンドを把握したい方にもよいと思います。

ゼロからはじめるPHP入門講座大阪

2008年10月19日（日曜日）にサイバーガーデンbizでゼロからはじめるPHP入門講座大阪を行います。

PHPに興味がある方、勉強中の方を対象に、PHPの基礎や、MySQLとの連携、初心者がおちいりやすいセキュリティー問題、また、入門講座ではありますが、お問い合わせフォームや簡単なCMSなど実践的なサンプルをもとに進めますので明日から使える知識を習得できます。

講座内容

PHPの基礎知識
セキュア（安全）なPHPプログラミング
PHPとMySQLの連携
データベースの利用にあたり注意すべきセキュリティ問題
お問い合わせフォームの制作
既存のWebサイトに設置できる簡単なCMSの制作

興味がある方はぜひおこしください。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月24日 1時59分

第11回 attrによる属性値の制御　jQueryによるJavaScript入門

seminar セミナー

[リクリ]第11回 attrによる属性値の制御　jQueryによるJavaScript入門

リクリに寄稿しています。

attrメソッドの使い方について解説しています。

次回はcssメソッドによるcssプロパティの取得を予定してます。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月17日 9時26分

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」

IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。

そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。

使い方

ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。

<script type="text/javascript" src="./wordBreak.js"></script>

word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追加してください。

<table class="wordBreak">

IEやsafari、Google Chrome用にはCSSで別途word-break:break-allを定義してください。

.wordBreak{
	word-break:break-all;
}

Firefoxは3以上のバージョンを対象にしています。

MITライセンスで公開しますのでご自由にお使いください。

バグ、不具合はコメント欄よりお願いいたします。

CSS Niteビギナーズ

2008年11月1日に東京、2009年1月17日に大阪でCSS Nite ビギナーズというセミナーが行われます。

ここ最近、CSSのテクニックの情報が出尽した感じはありますが、まだCSSでの制作に移行できていない方やCSSを勉強中の方も少なくありません。

そういった、これから取り組みたい方や、改めてじっくり学びたい方の為のセミナーになります。

ターゲット

現在、テーブルレイアウトで作業しており、CSSレイアウトを勉強したい方
CSSレイアウトについてステップアップしたい方
DTPを通してスタイルシートなどの知識がある程度あり、WebのマークアップやCSSレイアウトを勉強したい方
社内教育を担当されている方、教員・インストラクターなどの方

企業のWebマスターの方
コーディングなどをあまり行わないWebディレクターやプロデューサーの方
Webプログラマー

今回のCSS Niteビギナーズでは連動書籍の制作を行っており、セミナーでは伝えきれない情報も盛り込まれています。

私は『第8章：JavaScriptライブラリとCSS』や、『第9章：CSSトラブルシューティング集』の一部などの執筆を行っています。

セミナーの金額は、8,000円でセミナー連動書籍(2,800円)が付いてきますので、OJTの一貫としてもよいのではないかなと思います。

2008年11月1日の東京版では9月19日までにお申し込みの方は7,000円になりますので、参加を予定されている方、検討されている方は早めに。
(大阪版は申し込みが開始されたら、告知いたします。)

お申し込みはCSS Niteビギナーズ公式サイトよりできますので。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月10日 15時19分

seminar cssnite

「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想

先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。

資料が公開されました。

CSS Reloaded Ja

View SlideShare presentation or Upload your own. (tags: css css3)

■出典元：CSS Reloaded
■著者；John Allsopp
■リンク：Web Directions East

以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。）

CSSの歴史

1996年ぐらいからありました。

2000年にCSSのサポートが良いMac IEが登場

2000-2005年はCSS3の開発がストップ

2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded)

各ブラウザはCSS3を試験的に実装

プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。

Firefox 『-moz-』をつけたプロパティで利用可能
safari 、Google Chromeは『-webkit-』をつけたプロパティで利用可能

~~注意)Mozillaの独自拡張CSSは使わないでください - Web標準普及プロジェクト~~

追記)スピーカーの菊池さんより『mozillaのvendor prefixの-moz-ですが2005年の時点とは状況が変わり、OKになってるようです。』との補足をいただきました。

合わせて参考にしてください。
CSS 独自拡張用の接頭辞について
 mozillaのtext-shadowに関する記述(コメント欄も合わせて)

CSSプロパティ

::selection

選択された要素に対してCSSを指定

サンプル1

::-moz-selection{
	background:red;
	color:white;
}
::selection {
	background:red;
	color:white;
}

winのsafari3.1、Opera9.5、Google Chromeは『::selection』で動作します。
Firefoxは『::-moz-selection』で動作します。

:target

リンク先の要素に対してCSSを指定

:target{
	background:red;
	color:white;
}

winのsafari3.1、Opera9.5、Google Chrome、Firefox3は『:target』で動作します。

:first-child last-child nth-child

指定した子要素に対してCSSを指定

li:nth-child(odd){
	background:yellow;
}
li:nth-child(even){
	background:blue;
}
li:nth-child(3){
	background:gray;
}
li:nth-child(odd){
	background:yellow;
}
li:nth-child(even){
	background:blue;
}
li:nth-child(3){
	background:gray;
}
ul li:last-child{
	background:lime;
}
ul li:first-child{
	background:red;
}

winのsafari3.1、Opera9.5、Google Chromeは『:first-child』、『last-child』、『nth-child』で動作します。
Firefox3は『:first-child』、『last-child』のみ動作します。

プロパティ

column-width
カラムの幅を定義します。

column-count
カラムの数を定義します。

column-gap
カラムの境界を定義します。

p{
	width:450px;
}
p{
	column-count: 2;
	column-width: 50%;
	column-gap: 20px;
}
p{
	-moz-column-count: 2;
	-moz-column-width: 50%;
	-moz-column-gap: 20px;
}
p{
	-webkit-column-count: 2;
	-webkit-column-width: 50%;
	-webkit-column-gap: 20px;
}

プリフィックスを利用することによりwinのsafari3.1、Google Chrome、Firefox3で動作します。

text-shadow

テキストの影を定義できるプロパティ
CSS 2で定義されたプロパティで、CSS 2.1では削除され、CSS 3で再定義された

h1{
	text-shadow : 4px 4px 10px black;
}

Opera9.5とsafari 3.1で動作します。(safari 3.1ではカラーの省略などが出来ない)

text-stroke

テキストのアウトラインを定義するプロパティ

h1{
	-webkit-text-stroke-color:red;
	-webkit-text-stroke-width:2px;
}

safari 3.1で動作します。

box-shadow

ボックスの影を制御するプロパティ

span {
	border: thin solid;
	-webkit-box-shadow: 0.2em 0.2em 10px #CCC;
}

safari 3.1 Google Chromeで動作します。

border-radius

ボックスのボーダーの角丸具合を制御するプロパティ

h1 {
	width:300px;
	height:300px;
	border:2px solid blue;
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
}

safari 3.1、Google Chrome、Firefoxで動作します。

opaciy

ボックスの透明度を制御するプロパティ。
0～1の値で制御可能。子要素の透明度も変わるので注意が必要。

h1 {
	width:300px;
	height:300px;
	background:red;
	opacity:0.5;
}

safari 3.1、Google Chrome、Firefox、Operaで動作します。

transform

ボックスの回転やズーム率や位置、角度を制御するプロパティ

h1 {
	width:300px;
	height:300px;
	background:red;
	-webkit-transform: rotate(20deg);
}

safari 3.1 Google Chromeで動作します。

opaciy

背景色の透明度を制御できる
0～1の値で制御可能。opaciyと違い子要素の透明度は変わらない。

h1 {
	width:300px;
	height:300px;
	background:rgba(255,0,0,0.3);
}

safari 3.1、Google Chrome、Firefoxで動作します。

web-fonts

サーバー上のfontを利用できる機能

サンプル
（fontはm+webfontsを利用）

@font-face {
 font-family: mplus-1p-regular;
	src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')　format("truetype");
}
h1{
	font-family: mplus-1p-regular;
}

safariで動作。

transionts

状態が変化する際の時間を制御するプロパティ

【PR】11月1日　CSSを学びたい方の為のセミナー『CSS Niteビギナーズ』開催

h1{
	background:red;
	-webkit-transition: all .5s ease-out;
}
h1:hover{
	background:white;
}

safari 3.1、Google Chromeで動作。

追記）Firefox3.1からサポートされるようです。
GeckoでCSS Transformsがサポートされた

CSS3を実際に使うには

最後にスピーカーの菊池崇さんが、「IEにあわす必要はない、CSS3を利用すればIEユーザーの体験を損なうことなく、CSS3対応ブラウザユーザーの体験を向上させることができる」とおっしゃっていました。これも一つの考え方ですね。

Web Directions East

Web Directions Eastの告知をされていました。
11月7日～9日に行われるイベントで、Eric Meyer（エリック・メイヤー）、Jeffrey Veen（ジェフリー・ヴィーン）、Dan Cederholm（ダン・セダーホルム）、Jeremy Keith（ジェレミー・キース）、Andy Budd（アンディ・バド）など世界のWeb業界の有名人が日本に集まるという素敵なイベントです。

感想

CSS3の使い方中心でしたが面白かったです。
(transiontsやtransformが話題になったときは未来のお話と思って関心も示さなかったので)

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月15日 5時53分

第10回 hoverとEffectの応用 - jQueryによるJavaScript入門

css css

第10回 hoverとEffectの応用 - jQueryによるJavaScript入門

Re:Creator's Kansai(リクリ)に寄稿しています。

hoverとEffectを利用して簡単なツールチップを作成しています。
次回はattrを利用した属性値の制御の予定。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月9日 17時15分

javascript javascript jquery recreatorspartykansai

9月のセミナー案内

9月に以下の日程でセミナーを行います。
興味があるかたは是非おこしいただけたらと思います。

実践的PHP入門

2008月9月18日(木) 13:00～19:00

継続的なウェブサイト運用の重要性が理解されつつある現在ですが、案件によっては、その規模や運用フローなど、さまざまな要因により既存のCMS パッケージやオーサリングツールが活用できないケースがしばしばあります。また、運用中の案件においても、動的なページの書き換えやフォームデータの集計などの要望が生じることもあるでしょう。

そういったシーンで活躍するのがPHPです。

開発者の増加、さまざまなフレームワークの登場など、どちらかというと大規模開発に目がいきがちなPHPプログラミングの昨今ですが、その本来の魅力は、比較的簡単に書け、すぐ動かせることにあります。
この講座では、そんな「小回りのきいた」対応が必要なシーンでのPHP活用を想定し、お問い合わせフォームや簡易CMSなど、実務でも活用できるものをつくりながらPHPプログラミングの基礎を学習していただけます。また、連携させるデータベース（MySQL）についての基礎知識や、通常の入門講座では取り扱われないことが多い、PHPを業務で活用する場合に必須のセキュリティ対策についても取り上げます。

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

2008年9月20日(土) 10:00～16:00

10月のゼロからはじめるPHP入門講座東京の詳細・申し込み

この講座はすでに満席です。10月にも同じ内容で行いますので、こちらにお申し込みください。

CSS上級講座

2008月9月24日(水) 13:00～19:00

CSSでのウェブ制作の効率アップと、より高度なレイアウトテクニックの習得を目標に、すぐにでも実務で活用していただけるノウハウとテクニックをご提供いたします。
講義形式でじっくり解説した後、最後にはPCを触りハンズオンで学んだことを覚えていただきたいと思います。

SEO実践講座

2008月9月25日(木) 13:00～19:00

有益なコンテンツを、検索エンジンへの適切な情報提供により公開することで、Webサイトはより多くの「それを求めるユーザー」を獲得し、ひいては、サイトが果たすべき目的を達成しなければなりません。

SEOは長らくその目的達成のために、検索エンジンでの上位表示を獲得する手段として普及してきました。しかし、検索エンジンの進歩やユーザーニーズにともない、その施策自体にも進化が求められています。

この講座では、SEOの本質である「検索エンジンから見て」よい施策、という観点から、適切な情報提供のできるWebサイト構築に役立つさまざまな手法をお教えいたします。

また、9月15日に予定しておりましたCSS Nite in Osaka, Vol.11での『はじめてのSubversion（サブバージョン）』の講演は2008年10月15日のCSS Nite in Osaka, Vol.11に変更されています。

その他のセミナー

9月は大阪で色々なセミナーが行われます。お勧めのセミナーをピックアップしましたのでこちらも一緒にチェックしてみてください。わたしもほとんどのセミナーに出席します。(9/6は他のお仕事があり参加できず。残念)

9/6 Flash CS3と FlashDevelop3でAS3開発速度を上げる33の方法
 ワン・トゥー・テン・デザインの長井さんがFlash開発のテクニックを紹介するセミナーです。関西で屈指のクリエイター集団、ワン・トゥー・テン・デザインさんのお話が聞けるのすごく価値がありますね。

9/6 JavaScript/Ajax実践講座
 ロクナナの中村享介さんによるJavaScript/Ajaxのセミナーです。

9/7　CSS Reloaded
CSS3の実践的な使い方がアップルストア心斎橋で聞けます。

9/10 予算ゼロでWebサイトのユーザビリティを改善する
 TRANSのあらたさんのセミナー。ユーザビリティの講座などは珍しいので、ぜひチェックしてみてください。

9/13 FPS2008
Flashの一流のクリエイターが様々な事例を紹介してくれるセミナー。すでに満席とのことです。

9/15 CSS Nite in Osaka, Vol.11
アップルストア心斎橋で無料で株式会社ロフトワークの林千晶さんの『Webプロジェクトマネジメント　〜PMBOKでワンランク上のWebディレクションを目指す』などのお話を聞くことが出来ます。

9/27 Re:Creator's Kansai的ペチャクチャナイト
関西のWebクリエイターが集まって3分ほどのプレゼンをみんなでやるショートプレゼン飲み会です。

こう見ると、セミナー多いですね。

お好みのセミナーを探してみてください。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年9月2日 5時56分

float方向のmarginが倍増するバグへの対応

IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。

float方向のmarginが倍増するバグへの対応のサンプル画像

これに対応する為にはfloatを指定している要素に対して、display:inlineを適応します。

div#box{
	float:left;
	margin:20px;
	display:inline;
}

第8回 click時の$関数の第2引数 - jQueryによるJavaScript入門
 第9回 hover - jQueryによるJavaScript入門

これは、ボックスのdisplay値を変更すると言う意味ではありません。

CSSの仕様上、'float'が'none'以外の値を持つ要素のdisplayの値は強制的にblockに変換される為、この記述には全く意味がありません。

IE6に対してfloat方向のmarginが倍増するバグへの対応としてのみ活用できる記述になっています。

第9回 hover - jQueryによるJavaScript入門

Re:Creator's Kansaiに寄稿しています。

少しづつではありますが利用するメソッドのバリエーションを増やしていますので、jQueryらしい記述に近づいていっています。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年8月22日 3時52分

javascript jquery recreatorspartykansai

CSS Nite in Osaka, Vol.12

2008年10月15日にApple Store 心斎橋店で18:30からCSS Nite in Osaka, Vol.12が開催されます。

CSS Nite in Osaka, Vol.11でしゃべる予定でした私と秋葉さんが、CSS Nite in Osaka, Vol.12に変更されています。

内容は、

『脱・やらず嫌い！デザイナーさんのためのFlash ActionScript 3.0 入門以前編』〜「AS3.0は敷居が高い」へのアンチテーゼ〜
秋葉秀樹
はじめてのSubversion（サブバージョン）
西畑一馬(トゥーアール)
alt属性考
小嶋新（しゃらく）
ベジェ再入門
鷹野雅弘（株式会社スイッチ / CSS Nite）

あらたさんの「alt属性考」は非常におもしろそうですね。

興味がある方は、ぜひお越しください。

Yahooの検索順位を表示するGreasemonkeyスクリプト

今までYahoo!で検索結果に順番が振られていたのですが、つい先日から順番が表示されなくなりました。

これでは少し不便ですので、Yahooの検索順位を表示するGreasemonkeyスクリプトを作成しましたので、必要な方はお使いください。

numberyahooresults.user.jsをインストール

Greasemonkeyスクリプトの利用方法は姉妹スクリプトのnumbergoogleresults.user.jsで詳しく説明しているのでそちらを参考にしてください。

普段から検索結果の順位を見るクセを付けておけば、色々と見えてくるものもあると思いますので。

[Re:Creator's Kansai]第7回 Effectの制御2 - jQueryによるJavaScript入門

Re:Creator's Kansaiに寄稿しています。

第7回 Effectの制御2 - jQueryによるJavaScript入門

showメソッドやhideメソッド以外のエフェクト用のメソッド、slideDownメソッドやslideUpメソッド、slideToggleメソッド、fadeInメソッド、fadeOutメソッド、fadeToメソッドなどについて解説しています。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年8月9日 3時51分

javascript javascript jquery recreatorspartykansai

10月も東京でPHP入門講座をやります。

9月のPHP入門講座が満員になりましたので、10月11日（土曜日）にも東京のサイバーガーデンbizで「ゼロからはじめるPHP入門講座」を行います。

講座内容

PHPの基礎知識
セキュア（安全）なPHPプログラミング
PHPとMySQLの連携
データベースの利用にあたり注意すべきセキュリティ問題
お問い合わせフォームの制作
既存のWebサイトに設置できる簡単なCMSの制作

興味がある方はぜひおこしください。

作者: 西畑一馬 http://www.to-r.net

更新日:2008年8月7日 6時56分