2009年1月10日、CSS Nite ビギナーズで地元スピーカーを務めさせていただきました。以前から参加していましたが、まさか自分がやることになるとは…夢にも思いませんでした。
東京からはスイッチの鷹野さん、サイバーガーデンの益子さんに講師としてお越しいただきました。
テーマは「マークアップ選びのコツ」
東京版の講師・著者でもあるエスカフラーチェ 山田あかねさんの内容を、基本的にトレースする感じで進めさせてもらいました。
実際にしゃべるには、資料等を準備したり、内容を自分なりにふくらませてみたりと色々な作業がありました。こんな作業も自分が長年やってきた事の再確認にもなり、とっても勉強になりました。
当日は微妙な天気の中、100名超の方にご来場いただきました。誠にありがとうございます。
うちのSpellマスターに発注して、かなり実用的なJavascriptを作ってもらいました。
こんな条件で実現できるJavascriptです。
まず、<head>〜<head>にJavascriptを記述します。これは外部JSファイルにしてもOK
<script type="text/javascript">
window.onload = function (){
var node_a = document.getElementsByTagName('a');
for (var i in node_a) {
if(node_a[i].className == 'popup'){
node_a[i].onclick = function() {
return winOpen(this.href, this.rel)
};
}
}
} ;
function winOpen(url, rel) {
var split = rel.split(',') ;
window.open(
url,'popup',
'width='+ split[0] +',height='+ split[1] +',toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');
return false;
};
</script>
次、HTMLのa要素には下記のように記述します。ポイントはclassとrelを使用すること。
たとえば、class=”popup”とrel=”横幅数値,縦数値” みたいに書きます。
<a class="popup" rel="300,500" href="http://www.yahoo.co.jp">ウィンドウを開く</a>
ウィンドウ幅を固定するのはいかがなものかといったユーザビリティの観点からの意見もあると思いますが、この出し方の要望はお客さんによってまだまだあります。とりあえずhrefの中身をファイルで呼べるのでSEO的にも不利にはならないはず。よろしければお試し下さい。
Googleでモバイル端末用のゲートウェイが用意されています。
使い方は、引数でアドレスを渡してやればOK
http://www.google.co.jp/gwt/n?u=［サイトのURL］
となります。
実際に表示させるには
http://www.google.co.jp/gwt/n?u=http://www.magical-remix.co.jp
こんな感じ。
CSS周りの背景画像等は拾ってくれませんが、まぁ携帯で見るのを目的とするならば無くても全然問題ありません。
とりあえずHTMLをベースにしっかりと拾ってくれます。サイト内のリンクについては、ゲートウェイのURLに変換されて問題なく機能します。
ゲートウェイ込みでQRコードを作って、携帯サイトとして謳うのもアリかもしれませんね。
8/9にAERで開催されます。ご都合がつけば是非ご参加ください！
詳細・お申し込み：http://cssnite.bluebeck.jp
セミナー終了後のCSS Nite After Party “Shockadelica”（懇親会）にもご参加頂ける方は以下の料金設定となります。
自宅のWiiで自社サイトを見てみました。
昔ダウンロードしたものの、なかなか使う機会がなかったWiiのブラウザ。Operaです。
たしか9だったか8.5だったか…。ちゃんとと見られるものですね。
フォントがなめらかでキレイでした。
自社サイト
縮小して全体表示
拡大
昔のブログ
CSS Nite LPシリーズの第9弾は、2007年5月に開催した「LP3：Coder's High」の続編としてコーディング／マークアップにフォーカス、HTML5やCSS3についても取り上げます。
CSS系別ブログ
グルメブログもやってます