拙著「Web制作の現場で使う jQueryデザイン入門」の増刷が決定しました。]]>
タイトルに「デザイン」を冠しているとおり、デザイナーやマークアップエンジニアの方が学習しやすいように構成しており、jQuery本ではめずらしいフルカラーになっておりますので楽しく学んでいただけると思います。
興味がある方はぜひ一度手にとっていただけたらと思います。
]]>拙著「Web制作の現場で使う jQueryデザイン入門」の増刷が決定しました。]]>
タイトルに「デザイン」を冠しているとおり、デザイナーやマークアップエンジニアの方が学習しやすいように構成しており、jQuery本ではめずらしいフルカラーになっておりますので楽しく学んでいただけると思います。
興味がある方はぜひ一度手にとっていただけたらと思います。
]]>[詳細・申し込み]
]]> 開催されるのは次の8講座です。私は「Webサイトの表現力を高めるjQuery講座」と「PHPの基本とメールフォーム制作」、「PHPとMySQLでつくる簡易CMS制作」を担当し、他の講座はサイバーガーデンの益子さんが担当します。
2講座目以降は3000円引きなので2講座以上受講されるなら大変リーズナブルな値段になっております。
興味がある方はぜひご検討ください。
[詳細・申し込み]
]]>
本日、MdNよりこもりさんやhamashunさんと書かせていただいた新著書「HTML+CSSコーディング ベストプラクティス」が発売になりました。本書はHTML+CSSはちゃんと書ける人を対象に、その次は何を考えれば良いのかというのをテーマに書かれています。
タイトルに「ベストプラクティス」を冠していますが、一律にこの方法がよいとおススメしている書籍ではありません。メンテナンス性を考慮した際や、パフォーマンスを考慮した際、チームでの作業を考慮した際など様々な条件化でのベストプラクティス(そしてデメリット)を紹介しています。プロジェクト毎に取捨選択し、結果としてベストプラクティスを導き出せるようになっています。
興味がある方はぜひ書店などで手に取ってみてください。
]]>
iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。
]]> そういった場合に利用できるのがメディアクエリーのorientationです。<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出来ます。
サンプル(縦向きの場合は赤、横向きの場合は青の背景になる。)
メディアクエリーのorientationはCSS3で定義されていますのでiPhone/iPadだけではなくSafariやFirfoxでも動作し、ウィンドウのサイズで読み込むスタイルシートが切り替わります。
参考：W3Cメディアクエリーの日本語訳
iPhone/iPadではonOrientationchangeというイベントが定義されており、このイベントで向きの変更を検出することが出来ます。また、window.orientationという変数には現在の角度が格納されており、この角度が90度(-90度)の場合は横向きと判定することが出来ます。
jQueryを利用すると次のような感じで向きが変更された際のイベントを得ることが出来ます。
$(function(){
$(window).bind("orientationchange",function(){
if(Math.abs(window.orientation) === 90){
$("body").html("横向き");//横向きになった際の命令
}else{
$("body").html("縦向き");//縦向きになった際の命令
}
})
})向きによって処理を変えるような場合は初期状態でも縦か横か判定すると思うので、そういった場合は、bind時にloadイベントも追加しておきましょう。
$(function(){
$(window).bind("load orientationchange",function(){
if(Math.abs(window.orientation) === 90){
$("body").html("横向き");//横向きの場合の命令
}else{
$("body").html("縦向き");//縦向きの場合の命令
}
})
})orientationchangeイベントは便利なのですが、iPhone/iPadでしか動作しません。PCでもorientationchangeと同様のイベントを実装したい場合は次のようなスクリプトで検出が可能です。
$(function(){
$(window).bind("resize load",function(){
if($(document).height()>$(document).width()){
$("body").html("縦向き");//縦向きの場合の命令
}else{
$("body").html("横向き");//横向きの場合の命令
}
})
})個人的には開発環境がwindowsということもあり、iPhone/iPadで検証が結構面倒なのでこの方法をよく利用します。(Macの方はiPhone/iPadシミュレータがあるのでそれほど面倒ではないと思いますが)
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター
$("p").data("dblTap",false).click(function(){
if($(this).data("dblTap")){
//ダブルタップ時の命令
console.log("ダブルタップ");
$(this).data("dblTap",false);
}else{
$(this).data("dblTap",true);
}
setTimeout(function(){
$("p").data("dblTap",false);
},500);
})data("dblTap")というフラグを用意して最初のタップでフラグをtrueに変換します。フラグは500ミリ秒後にfalseに戻ります。フラグがtrueの間（500ミリ秒経過する前）にもう一回タップされた場合はダブルタップと判定することが出来ます。(ダブルタップの感覚を調整したい場合はsetTimeoutの500を調整)
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
使い分けとしてはだいたい次のようになります。
ontouchstart = onmousedown
ontouchmove = onmousemove
ontouchend ≒onmouseup
ですのでjQueryを利用した場合、
var ua =navigator.userAgent;
if(ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('iPod') > -1){
var start = "touchstart";
var move = "touchmove";
var end = "touchend";
}else{
var start = "mousedown";
var move = "mousemove";
var end = "mouseup";
}
$("#hoge").bind(start,function(){....})
$("#hoge").bind(move,function(){....})
$("#hoge").bind(end,function(){....})などとするとPCとiPad/iPhoneでほぼ同様のイベントを設定することができます。
(イベントの発生のタイミングや状況などが若干異なるので細かい調整が必要になることもあります)
また、次のようなコードはiPad/iPhoneでエラーになります。
$("#hoge").bind(start,function(e){
console.log(e.pageX);//NG
})PCではイベント情報を｢e｣で取得できるのですが、iPad/iPhoneでは配列eventで複数の情報が返ってきます。次のように記述するとPCとiPhone/iPadで共通するイベント情報を取得できます。
$("#hoge").bind(start,function(e){
if(!e.pageX)e = event.touches[0];
console.log(e.pageX);//OK
})event.touchesには１本目にタッチされた指2本目にタッチされた指の順番に配列に格納されています。
さらに次のようなコードではイベント情報は取得できません。
$("#hoge").bind(end,function(e){
if(!e.pageX)e = event.touches[0];
console.log(e.pageX);
})ontouchendイベントはイベント情報を返してくれません。タッチが終了した時点で画面にタッチされていないからということらしいですが。。。
$("#hoge").bind(start,function(e){
if(!e.pageX)e = event.touches[0];
$(this).data("e",e);
})
$("#hoge").bind(move,function(e){
if(!e.pageX)e = event.touches[0];
$(this).data("e",e);
})
$("#hoge").bind(end,function(e){
if(!e.pageX)e = $(this).data("e");
console.log(e.pageX);
})このように記述すると最後にiPad/iPhoneではontouchstartもしくはontouchmoveが最後に発生した際のイベント情報をontouchendで取得できます。
これでiPhone/iPadでPCとだいたい同じようなJavaScriptのイベントを実装することができます。
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
8のjQueryのすごいTIPS
Dreamweaverの書籍は今まで何冊か読んだことがあるのですが、この｢効率的なサイト作成のためのDreamweaverの教科書｣が一番よかったです。]]>
多くの書籍がリファレンス的に機能の網羅になりがちですが、本書は逆引きリファレンス的に機能を紹介していますので機能と同時に実務でどう使うのかを習得することが出来ます。
また、Dreamweaverに限らずサイト作成に必要なHTMLやCSSの解説がいたるところにちりばめられいますし、iPhone/iPadやHTML5、CSS3などの最近のトレンドも網羅されていますのでDreamweaverに限らずに効率的なサイト作成のため知識を吸収できます。
また、本書の特徴を端的に示しているのがロールオーバーの解説です。普通の書籍だDreamweaverのMM_swapImageを紹介して終わるところですが、CSSの画像置換やCSS Sprite、jQueryなどのJavaScriptライブラリを利用した方法など様々な手法が解説されています。Dreamweaverに固執することなく読者が複数の選択肢から自分に最適な手法を選べるように配慮されています。（むしろMM_swapImageは過去の遺産と切り捨てられている。）
基本はDreamweaver CS5ですが、CS4に対するフォローもされているので、これらのDreamweaverを利用していている方にはおススメの一冊です。
現場のプロから学ぶXHTML+CSS
[書評]実践 Web Standards Design
Mac People 6月号でDreamweaver CS5について執筆しました
3週間でマスターWebデザインの教室―未経験でもWebデザイナーになれる本
【Adobe Spry TIPS】 目次
ここ数年来のビッグニュースです。Yahoo!JAPANは検索エンジンにBingを採用せずGoogle検索エンジンを採用するとの事。
]]> 思えばYahoo!がGoogleからYSTに切り替えてから6年近くたったわけですが、再びGoogleに戻ってきたわけです。先日のCSS Nite LP, Disk 10では多くのスピーカーの方が｢Y｣についてコメントしていましたが、YSTのアルゴリズムは、特性を知っていないと検索結果から除外されたり、特性を知っている人はスパム行為により上位表示が容易だったりと偏っています。
他にも多くのスピーカーの方が｢h1｣の重要性を語っていましたが、｢h1要素がHTML文章中に１個で、ターゲットキーワードを埋め込む｣という文章構造をまったく無視したコーディングルールをWEB業界に強いてきたのはやはりYSTでそれが有効だったからに他なりません。(時代がHTML5に流れる中h1要素の数を限定しなくちゃいけないなんてまったくレガシーな話です)
YSTがimg要素のalt属性を評価しないので画像置換を使ったほうがSEO的に効果があるとかいうのもありましたのね。
たぶん、今回の発表はYahoo!にとってもGoogleにとってもWeb業界にとってもよい発表だったんじゃないかと思います。
WEB製作者の為のSEOチートシート
マイクロソフトのYahoo!買収について
SEOとページ読み込み速度
画像置換とSEO
Yahoo!とアフィリエイト
前から気になっていたEC studioの山本さんが書かれたiPhoneとツイッターで会社は儲かるを読みました。]]>
ウリウリ感の強いタイトルですが、iPhoneやツイッターなどを利用した儲け話が書かれているわけではなく、EC studioの強みであるITによる経営支援をまとめられた一冊です。
Twitterをコミュニケーションツールとして「スタッフとのコミュニケーション」「社外とのコミュニケーション」を行った結果EC studioでどのような変化が起こったかなどが書かれています。
EC studioがITによる経営の効率化と、コミュニケーションを非常に大事にしているのが解ります。
IT企業では「情報伝達」、「情報共有」、「情報管理」をいかに効率よく行うかはひとつの命題だと思うのですが、EC studioが実践し、そしてどのように変化したかが書かれており非常に参考になります。
IT企業の管理職の方などには参考になる一冊だと思います。
[書評]Webデザイン知らないと困る現場の新常識100
[書評]ちょいデキ!
[書評]twitterコミュニケーション・バイブル
[書評]クチコミの技術-広告に頼らない共感型マーケティング-
[書評]モバゲータウンがすごい理由 ～オジサンにはわからない、ケータイ・コンテンツ成功の秘けつ～
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^/$ /iphone/ [R]これでiPhoneで「?mode=pc」というパラメーターがない場合のみiPhone用のサイトに転送されます。
つまり、iPhoneで「http://bar.net」にアクセスがあった場合「http://bar.net/iphone/」に転送されますが「http://bar.net?mode=pc」の場合は転送されません。
iPhone用CSSをメディアクエリで分岐する問題点
MTのコメントスパムをなくす.htaccess
htmlやhtmのファイル名でphpを実行する
errerページを作る！
お引越し
拙著「紀伊國屋書店BookWeb以外で入手がしづらいと言う事情があったにせよ大変光栄です。ご購入された方ありがとうございます！
Web制作の現場で使う jQueryデザイン入門 3刷決定
jQueryデザイン入門の在庫状況
Web制作の現場で使う jQueryデザイン入門が増刷、ネットショップでの販売が再開
Web 制作の現場で使う jQueryデザイン入門 書評一覧
web 制作の現場で使う jQueryデザイン入門 Amazonで通常購入可能に
オリジナルのFirebugと比較すると機能が限定されているがCSSデバッグには十分利用できるでしょう。
Firebug Liteはブックマークレットとして提供されています。ブックマークレットとはサイト上で任意のJavaScriptを実行する機能で、JavaScriptで実装されたFirebug Liteの機能が利用できるようになります。
まずは配布ページの中部にある「Debug bookmarklet」にある「Firebug Lite debug」というリンクを右クリックしてお気に入りに追加します。
利用方法は調査したいサイトに移動してお気に入りから「Firebug Lite debug」を実行します。
実行するとFirebugのコンソールパネルが起動します。
インターフェースは英語ですが「Firebugで始めるCSSデバッグ」で紹介した機能のうち次の2つ以外は利用することが可能です。
Firefoxではちゃんと表示されるがIEでは・・・というのは良くあることですのでIEではFirebug Liteを利用してCSSデバッグを行うことが出来ます。
Google Chromeではブックマークレットだけでなくエクステンションとしても提供されています。
Web Developerで行うCSSデバッグ
CSSをデバッグするツール色々
IE版のFirebug IE Developer Toolbar
ウェブデザイナーのための13のFirefoxのアドオン
FirefoxでHTTP ヘッダを確認する『Live HTTP Headers』
Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。
インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。
インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。
Firebugをインストールするとブラウザの右下に次のようなアイコンが表示されます。
このゴキブリホタルのアイコンをクリックするとFirebugが起動します。
起動したら表示されるパネルで様々な操作が可能になります。
Firebugは元々JavaScriptのデバッガーとして開発されている為、コンソールパネルを有効にすることで、様々なJavaScriptデバッグが可能になりますが、今回はCSSデバッグにフォーカスを当てて解説していきたいと思います。
要素の調査を行う為にまず、インスペクトモードを起動します。矢印のメニューをクリックするとインスペクトモードが起動します。
インスペクトモード時にWEBサイトの要素の上などにマウスカーソルを持っていくと要素が青色の枠で包まれます。
マウスの位置を調整しながら調査したい要素を指定しクリックします。インスペクトモードで要素をうまく指定できない場合は、左下のHTMLからも要素が指定できます。
要素が指定できたら右側のスタイルパネルでCSSの調整を行いましょう。
スタイルパネルでは、その要素に適応されているCSSの一覧を見ることが出来ます。他のセレクタにより打ち消されているプロパティなどは打ち消し線が表示されます。
ここでのデバッグのポイントは2つです。
指定してはずのプロパティが表示されていない場合は、スペルミスや;（セミコロン）の入力忘れなどで正しくプロパティが指定できていない可能性があります。一度スタイルシートを見直しましょう。スタイルシートのアップロード忘れや別ファイルを更新しいたなどの可能性もあります。
指定したプロパティに打ち消し線が表示される。カスケーディングにより他のプロパティが優先されています。詳細度を上げるなどして指定したプロパティが優先されるようにしましょう。
また、画像のファイル名にマウスを乗せると画像が表示されます。
画像のファイル名やパスが間違っていたり、アップ忘れなどがあると画像が表示されません。
CSSで指定した画像が表示されない場合はここでまず確認しましょう。
スタイルパネル上でプロパティの左をクリックすると中止マークが表示されそのCSSの指定を1時的に無効化することが出来ます。
思い通りのスタイルやレイアウトにならない場合など、どこかのCSSが悪さをしていることがあります。怪しい箇所などを無効化して確かめてみましょう。
CSSのプロパティや値をクリックすることで修正することが出来ます。
思い通りのスタイルやレイアウトにならない場合、編集してどのようになるか確認してください。
とくにmarginやpaddingなどの細かい数値の調整などに便利です。
右の余白をダブルクリックするとCSSの追加が可能になります。
他のプロパティを追加しながらCSSの調整を行いましょう。
累積タブを選択すると要素のすべてのプロパティの値が確認できます。
レイアウトタブをクリックするとボックスモデルが確認できます。
他にもいろいろとありますが、これらの機能を使うとCSSデバッグを効率よく行うことが出来るでしょう。
Web Developerで行うCSSデバッグ
CSSをデバッグするツール色々
IE版のFirebug IE Developer Toolbar
ウェブデザイナーのための13のFirefoxのアドオン
FirefoxでHTTP ヘッダを確認する『Live HTTP Headers』
拙著「Web制作の現場で使う jQueryデザイン入門」の増刷が決定しました。]]>
現在入手が困難になっておりますが、もうすぐ解決するかと思います。
現在以下のオンライン書店では入手可能ですので興味がある方はぜひご購入ください。
]]>Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。
インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。
インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。
インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。
インストールが成功したらFirefoxにWeb Developerツールバーが表示されます。ここから様々な操作が可能です。
非常にたくさんの機能があるためいくつかの機能をピックアップして紹介します。
ツールバーの右端に3つのアイコンが表示されます。
左から現在表示しているページで
を確認することができます。
問題なければ緑のアイコンが、問題がある場合は赤色のアイコンが表示されます。アイコンをクリックすると更に詳しい情報を見ることが出来ます。
自分ではちゃんと書いているつもりが、ちょっとしたスペルミスなどでエラーが出ていることがあります。
CSSを記述する際にはまず、ここでエラーがないかどうか確認しましょう。
メニューバーの一番右の『無効化』からJavaScriptなどを無効化することが出来ます。
JavaScriptをOFFにしているユーザーも考慮してJavaScriptを無効化してサイトがどのように表示されるか確認しましょう。
メニューバーの『CSS』からCSSを無効にすることが出来ます。
HTMLが適切に記述されていればCSSを無効にしても情報が伝わるはずです。CSSを無効化にして情報が全く伝わらない場合はHTMLの構造を再考する必要があるでしょう。
同じくメニューバー『CSS』の『スタイル情報の確認』から現在要素に適応されているCSSを確認することが出来ます。
『スタイル情報の確認』を実行すると画面下部にスタイル情報を表示するパネルが表示されます。マウスで調査したい要素をクリックするとスタイル情報にその要素に適応されているCSSを確認することが出来ます。
どのスタイルシートの何行目に記述されているかまで確認できますので、スタイルを編集したい際にひらくスタイルシートも一目瞭然ですね。
同じくメニューバー『CSS』の『CSSを編集する』から現在適応されているCSSの編集を行うことが出来ます。
ちょっとCSSを変更した場合にどのように表示されるかなどを実際の画面をみながら編集して確認することが出来ます。
編集したファイルはダウンロードも出来ますのでダウンロードして現在のスタイルシートと差し替えることも出来ます。
地味に便利なのが『フォーム』から利用できる『パスワードの表示』
フォームなどでパスワードを入力すると『●●●●●』だったり『******』と表示されてしまいますが、これをちゃんとした文字列で表示してくれます。
『画像』の『alt属性値を表示』から画像のalt属性の値を表示することが出来ます。
alt属性が適切に利用されているか、alt属性が抜けていないかなどをチェックすることが出来ます。
『情報』の『id属性とclass属性の表示する』からサイトで利用しているid属性とclass属性を確認することが出来ます。
自サイトの確認というよりかは他のサイトでどのようなidやclassを利用しているか確認するのに便利でしょう。
『枠表示』からはブロックレベル要素やh要素を枠で包んで表示することが出来ます。
どのような構造でどのように表示されているかが確認できます。
『その他』の『HTMLを編集』からHTMLのリアルタイム編集が可能です。
画面下部に表示されるHTMLが編集可能な為、HTMLを変更した場合どのように表示されるかが確認できます。
その他にもWeb Developerには様々な機能があります。これらを駆使することでWeb制作やCSSデバッグの作業を効率よく行うことが出来るでしょう。
ウェブデザイナーのための13のFirefoxのアドオン
マウスオーバーで英単語の意味を教えてくれるFirefoxアドオン『FireDictionary』
FirefoxでHTTP ヘッダを確認する『Live HTTP Headers』
ブロガーの強い味方(?)It's All Text!
最強のCSS編集ツール by Firefox
firefoxの便利な拡張機能
URLエンコードすれば大丈夫かなと思ったのですが、URLエンコードしたらURLデコードされずにtwitterに投稿されてしまいます。
titleの指定を取り除くことでちゃんと動作するようになります。
<div class="topsy_widget_data"><!--
{
"url": "http://blog.webcreativepark.net/2010/06/28-142926.html"
}
--></div>titleの指定がない場合はHTMLのtitle要素からタイトルが参照されます。
Twitter Follow Badgeを付けてみた
twitterでblogの更新情報を配信
jQuery を利用してDeliciousのブックマーク数を表示する
Facebook のLike Button(いいねボタン)の設置
SBO（ソーシャルブックマークオプティマイズ）のブックマークレット
取り寄せの箇所に関してはオンライン書店が明示している日付で入荷されない可能性がありますので注意してください。
]]>解決方法としては、Google Chromeの起動オプションに次のコードを追加します。
-allow-file-access-from-files起動オプションはWindowsですと、アプリのショートカットアイコンを右クリックしてプロパティを選択、リンク先を次のように変更することで付加できます。
C:\Users\...(中略)..\chrome.exe -allow-file-access-from-files
これでGoogle Chrome でもAjaxでローカルファイルにアクセスすることが出来るようになります。
Google Chrome が閉じたセキュリティーホールを空けてるので、その点は注意してください。（開発用のショートカットのみ起動オプションを付ける etc）
Ajax中にページ更新する際の注意点
Firefox3.6でメニューバーを消してしまった場合の対処方法
Firefox3とESET Smart Securityでアドオンが更新できない際の対応方法
Firefox3.0.9がソースの表示の際にクラッシュする件
<Files mt-comments.cgi>
SetEnvIf Referer "^http://blog.webcreativepark.net" ref
order deny,allow
deny from all
allow from env=ref
</Files>リファラーを確認してリファラーがサイトのドメインと異なる場合mt-comments.cgiへのアクセスを弾く仕組みになっています。
.htaccessはmt-comments.cgiがある管理ディレクトリに置いてください。
MTのキャプチャ認証の負荷を軽減する方法
MTで特定の文字数以降を「...」とトリミングする方法
MTとトラックバック
MTでopモディファイアを利用して複雑なレイアウトを行う
Movable TypeでSEO対策-Feed編-
MT5.02でのみ動作確認をしており、ページとブログ記事に対応しています。フォルダとかカテゴリのカスタムフィールドには対応していません。
ライセンスはLGPLで配布しますので、自由にご利用ください。
MTの画像挿入時に rel="lightbox"を挿入する「LightBox2MT」プラグイン
Movable Typeで公開状態が「未公開」の際に指定したメールアドレスにメールを送るプラグイン
Movable Typeのタグ入力を簡単にするtagSupportプラグイン
MTの編集画面にカラーピッカーを付けるcolorEditorプラグイン
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン
本エントリーはiPhone 4の発売前に書いたものです。
iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。
参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ
これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。
<link media="only screen and (max-device-width:480px)" rel="stylesheet" type="text/css" href="css/iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="css/import.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/import.css" />
<![endif]-->これはiPhoneの画面サイズが320×480だった為、画面サイズが480px以内の場合はiphone.cssを読み込むとしていた為です。
しかし、iPhone 4の画面サイズは960×640ピクセル。これまでの手法が通用しなくなりました。
そもそも画面サイズで特定デバイスかどうかを判断するというのはメディアクエリの本質とは異なりハックに近い手法だったと言わざるえません。
iPhone 4のブラウザの仕様などがわからない為、これまでと同じスタイルシートを適応してよいかなどの問題もありますが、やはり特定デバイスに向けてのスタイルシートの切り替えは素直にユーザーエージェントで行うのがよいでしょう。
たとえば次のような.htaccessを利用したスタイルシートの切り替えです。
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^css/import.css$ /css/iphone.css [R]ユーザーエージェントによる切り替えも問題ないわけではありません。例えばNintendo DSブラウザの場合、Nintendo DS /DS LiteとNintend DSiで全く異なるユーザーエージェントが適応されています。
Nintendo DS /DS Liteのユーザーエージェント
Mozilla/4.0 (compatible; MSIE 6.0; Nitro) Opera 8.50[ja]
Nintend DSiのユーザーエージェント
Opera/9.50 (Nintendo DSi; Opera/446; U; ja)
Nintendo DS /DS Liteでは共通のキーワードとして「Nitro」、Nintend DSiでは「Nintendo DSi」が利用されています。
iPhone 4 のユーザーエージェントはわかりませんが、もしかしたら「iPhone」のキーワードを含んでいないかもしれません。（追記：@tt__からiPhone 4 のユーザーエージェントの情報を教えてもらいました。）
なにがベストプラクティクスかというのはわかりませんが、目的のデバイスがバージョンアップした場合などに、すぐに対応できる指定をしたほうがよいでしょう。（個人的にはユーザーエージェントによる切り替えがマストかなと思っています。）
]]>jsonpの情報は次のようなURLで取得できます。
http://feeds.delicious.com/v2/json/urlinfo/[md5ハッシュ化したURL]URLをmd5ハッシュ化しなくてはいけないのですが、それにはmd5.jsを利用して行いました。
$(function(){
var md5hash = MD5_hexhash(location.href);
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: 'http://feeds.delicious.com/v2/json/urlinfo/' + md5hash,
success: function(data){
if (data.length > 0){
$('#delicious').html('<a href="http://delicious.com/url/'+ md5hash + '">' + data[0].total_posts + 'user</a>');
}
}
})
});このスクリプトでid属性が「delicious」の要素の内側が「10 user」などといったリンクに切り替わります。
jQuery基礎文法最速マスター
8の jQueryのすごいTIPS
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
JSONとJSONP
実務で使えるサンプル100本超の作成を通じて、手を動かしながらjQueryの基礎からしっかり学べる1冊です。
]]>Favicon - Adobe Fireworks Extensionsより拡張機能（ExportAsFavicon-100.mxp）をダウンロードします。
mxpはAdobe Extension Managerで利用できる拡張子で実行することでAdobe製品に拡張機能をインストールすることができます。
実行後、Adobe Extension Managerが立ち上がり拡張機能インストールの免責が表示されますので承認してインストールを行います。
(注意:Windows VISTAなどでUACが有効な場合「フォルダが作成できませんでした」とエラーが出てインストールできません。UACをOFFにしてインストールしてください)
メニューバーの「コマンド」に「Favicon」という項目が追加されていますので、ここからfaviconの作成を行います。
ファビコンを作成したら、「コマンド」の「Favicon」→「Export as Favicon」からfaviconの書き出しを行います。
これでFaviconが書き出せます。
作成した「favicon.ico」をサイトのルート直下に配置します。
これでOKです。
ルート直下にファイルを置く権限がない場合は次のようにlink要素を利用してfaviconを指定できます。
<link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico" />ルート直下にファイルを置く場合、次のようなlink要素は必要ありません。
<link rel="shortcut icon" href="/favicon.ico" />この記述がある場合、ファビコンへのリクエストが比較的早い段階で発生し他のファイルの読み込みの遅延につながります。link要素がない場合は他のリクエストが終了したあとにfavicon.icoへのリクエストが発生し表示の高速化につながります。
私のセッションで「jQueryの手軽さ」、次の徳田さんのセッションでjQueryを駆使することでの「jQueryの表現力の高さ」を実感していただけたと思います。
直前に高津戸さんがCSS3のアニメーションなどについて解説されていたので、「CSS3との使い分け」について質問をいただきましたが、CSSでできることはCSSで、CSSで出来ないことをjQueryやJavaScriptで補うという使い分けが理想です。ただ、IEなどCSS3に対応していないブラウザをターゲットブラウザに含める場合は、CSS3で可能なことでもクロスブラウザ対応としてjQueryで対応するというのが現時点での現実的なワークフローです。
また、「jQueryを使ってHTMLのテキストを消すのってSEO的にOKなのですか?」といった質問もいただきました。これは適切な利用方法を行っていれば問題ありません。スパムや隠しテキストとして利用するのはNGです。
jQueryに興味をもたれた方は「ASCII.jp：40分で覚える！jQuery速習講座 
jQuery基礎文法最速マスター[to-R] 
実務で使えるサンプル100本超の作成を通じて、手を動かしながらjQueryを基礎からしっかり学べる1冊です。
セミナーに参加されたみなさま、長時間お付き合いいただきありがとうございました。
]]>日時 2010年7月4日 日曜日 10:15-17:15 （昼休み1時間）
会場 NEC PCカレッジ 池袋西武校
受講料 28,000円 （税込）
興味がある方はぜひご検討ください。
[詳細・申し込み]
出演する間近なセミナー
]]>
6月26日に高松で行われるCSS Nite in TAKAMATSU, Vol.3 「CSS Nite ビギナーズ HTML+CSS編」に出演いたします。]]>
私は、「JavaScriptライブラリとjQuery」と題してJavaScriptライブラリ、そしてjQueryの利用方法について解説いたします。
CSS Nite ビギナーズはWeb制作の基本が一日でわかる構成になっておりますので、CSSが初心者の方以外にも、普段の業務でCSSをバリバリは使ってないけれども、必要になることがあるという方にもお勧めです。
残席があとわずかなようですので、興味がある方はお早めにご検討ください。
]]>Like Button(いいねボタン)は、Facebook上でフレンドに対してこのサイトよかったよと伝える役目があります。
FacebookのSocial plugins Like Buttonよりボタンのコードを発行します。
<iframe src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout=button_count&show_faces=true&width=50&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>http%253A%252F%252Fexample.com...の箇所はURLエンコードしたサイトのURLと差し替えます。MTだと次のような感じです。
<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=button_count&show_faces=true&width=50&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>これをページに貼り付けるだけでLike Button(いいねボタン)が設置されます。
国内でのFacebookの知名度を考えると、それほど効果はないと思いますが試してみたいと思います。
Twitter Follow Badgeを付けてみた
twitterでblogの更新情報を配信
SBO（ソーシャルブックマークオプティマイズ）のブックマークレット
リンク先のはてなブックマーク数を表示するブックマークレット
リンク先のlivedoorクリップ数を表示するブックマークレット
<ul>
<li>list1-1</li>
<li>list1-2</li>
<li>list1-3</li>
<li>list1-4</li>
</ul>
<ul>
<li>list2-1</li>
<li>list2-2</li>
<li>list2-3</li>
<li>list2-4</li>
</ul>:first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。
$("li:first-child").css("color","red");一方:firstで指定できるのは「<li>list1-1</li>」のみです。
$("li:first").css("color","red");:firstはセレクタで指定した要素のうち最初に登場した要素を指定できるのに対して、:first-childはセレクタで指定した要素のうち最初に登場した子要素を指定できます。
<dl>
<dt>list1-1</dt>
<dd>list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1list1-1</dd>
<dt>list1-2</dt>
<dd>list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2list1-2</dd>
</dl>このようなHTMLでlist1-1のdd要素を指定したいと考えた場合、:first-childでは指定できません。
$("dd:first-childe").css("color","red");これは、dl要素内の最初の子要素がdt要素でdd要素ではない為です。
こういった場合では:firstを利用することで指定できます。
$("dd:first").css("color","red");:lastや:last-childでも同様の挙動をとります。
細かい違いではあるのですが、ついついははまってしまう原因になる箇所ですので注意が必要です。
jQuery基礎文法最速マスター
8の jQueryのすごいTIPS
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
jQueryを使ったサンプルコード
実務で使えるサンプル100本超の作成を通じて、手を動かしながらjQueryの基礎からしっかり学べる1冊です。
]]>
Web制作の現場で使う jQueryデザイン入門が増刷されました。それにともない販売を停止していたいろいろなネットショップでの販売が再開しております。]]>
Amazon(ショップによりまだ品切れのショップ、入荷されたけどもう品切れになっているショップ等があります)
入荷をお待ちにされていた方は、これを機会にぜひご購入していただけたらと思います。
]]>以下、覚書です。不正確な情報等ありましたらご指摘お願いいたします。
これからの時代、インターネット上でソーシャルなサービスを展開する上での著作権というのが非常に重要になってきて、著作権を知らずにソーシャルなサービスを作成するというのは難しいです。
著作権は1440年代にヨハネス・グーテンベルクが活版印刷を開発した際に著作権の概念が生まれました。
もともと印刷により複製するための権利で、印刷物に対しても出版社の権利を守るもの為のものでした。
フランス革命により、もともと出版社の権利を守る著作権(copyright)から、著作者つまり著作物を作成した人への権利(right of auther)に変化していきます。
1886年にスイスでベルヌ条約が締結され国際的な著作権の取り決めがなされました。ベルヌ条約は現在136カ国での著作権法で利用されており、無方式主義（著作物が発生した時点で発生する権利）、著作者人格権の保護（著作権は他の人に譲渡できない）、著作権の保護期間（著作者の生存中、死後50年）などが定められています。
後半の質疑応答であったのですが 、著作権の保護期間は実際には死後50年とは限らず、「戦時加算」というものがあって第二次大戦中の連合国の著作物に関しては+25年の75年たたないと、著作権の影響を受けます。
(to-R補足:wikipedia(戦時加算 )によると、「戦時加算」の最大日数は12年程度なので、他の条件などあるかもしれません。)
日本では、世界と比較しても著作者の権利を強く守っている国です。
1899年に日本がベルヌ条約に加盟し著作権法が施行されましたが、日本はローマで行われた著作権法の会議でアジアで初の副議長国になっており、そのこともあり非常に著作者の権利について尊重する考えになっていた為です。
他の知的財産権との違いがわかりにくい（特許権、実用新案権、意匠権、商標権など）。
例えば写真を撮って、その写真に建物と女の子が移っていた場合。写真の著作権は撮った人のものだけれでも、建物の著作権は建物の作成者(設計者)のもの。女の子に関しては肖像権や未成年の場合また別の権利などが発生してしまう。
著作権と著作者人格権の関係が難しい。
著作権は譲渡できるが著作者人格権は譲渡できない。
著作権の譲渡に関しては、著作権などの譲渡可能な各種権利は譲渡し、著作者人格権などの譲渡不可能な権利に関しては行使しない。などの契約が必要。
著作物の定義があいまいでグレーゾーンが多い。
独創性があるかどうかで著作権が発生するが、定義があいまいな為、裁判をしてみないと著作権が認められるかどうかがわからない。
2010/1/1まではYouTubeやGoogleは日本では違法だった。（著作物をコピーしている為）
2010/1/1より著作権法の改定によりキャッシュに関しては合法化されました。
2010年で日本の著作権はこのレベル。著作権がネックになり新しいサービスなどを行いにくい。
従来の著作権はプロとプロが結ぶ契約だったが、インターネット上ではすべての利用者が発信者になれ、著作権の意味が変わってきた。
アメリカではDMCA(Digital Millennium Copyright Act)が施行されており、既存の著作権法とは異なり疑わしきは罰せず、問題があった場合に対応すれば罪には問われない。
自由なコンテンツの流通を促進する仕組み。
All Rights Reserved. →Some Rights Reserved.
クリエイティブコモンズは４つの条件で示す。
自由度を設定できる。
クリエイティブコモンズの コモンズ証を発行することでライセンス条項へのリンクが発生する、メタデータなどをページに埋め込むことで検索エンジンなどでクリエイティブコモンズが利用されるようになる。
問題点としては、アダルトサイトなど著作者の望まない形で再利用されるのを防ぐすべがない。（ただ、望まない形での再利用よりかは望む形での再利用のほうが圧倒的に多い）
(to-R補足：懇親会の際に岩瀬さんよりお伺いしたのですが、コモンズ証を発行するとその有効範囲はページ全体に及びます。本文だけのCCにしたつもりが、ロゴやメインビジュアルなどページで使われている素材までCCになってしまう。)
多くのプロダクトは先人が培った知識と知恵によって成り立っている。
著作権を守るのも大事だが、知識や知恵をシェアすることによって、これからもっと多くのものが産まれ、もっと豊かになれる。ただし、著作者へのリスペクトは忘れてはいけない。
Q.WEBサイトなどのCopyright表示は必要か？
A.なくても大丈夫だがあった方が裁判などで有利に働くことがある。
Q.Copyright表示に年表示は必要？
A.なくて大丈夫。これは昔一部の国で年表示が必要だった名残。
Q.著作権の裁判では著作者の権利は保護されるのか？
A.日本においては半分以上の場合は保護されない。著作物を真似したということの証明が難しいケースが多い。例えば地図の会社の場合存在しない路地を用意しておき、そこも含めて複製されている場合などに著作権が侵害されたと認められる(トラップの設置)。
Q.ネットでよく問題になっている事例は？
A.画像以外では音声なども。レイアウトなどは著作権として認定されにくい。
Q.著作権が切れた亡くなった画家などの作品を再利用するのはOK？
A.自身で写真を撮ればOK。ただしネットに出回っている写真などは写真を撮った人の著作権が発生しているケースがあるので注意が必要。
Q.ネットで公開されている著作者不明のコードやソースは使ってよいの?
A.著作者が著作権を持っているので勝手に使っては駄目。ただし、公開されていることで著作者が「黙示の許諾」を行っていると解釈できる場合には利用しても大丈夫。多くのケースが「黙示の許諾」で解決できる。
近く、CSS Nite公式サイトで資料、音声が公開されるはずですので興味がある方はそちらもご確認ください。
ご登壇された林 千晶さん、岩瀬吉和さん、非常に為になるお話しをありがとうございました。
]]>