What happened to the design?

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

このイベントは去年？一昨年？ぐらいから知ってるのですが、実は初参加。

たまには裸になってマークアップを見直そうぜ？的な企画であってるかしら？
とは言え、3pingさんのVicunaテンプレートを使わせていただいてるのでマークアップは素敵です。

こういうイベントがあると、デザインやマークアップを見直す良い機会になるのでリニューアルしなきゃなーとか思ってしまいます＞＜

今回、CSS Naked DayというWordPress用のプラグインを使用してCSSを脱ぎ脱ぎしております。
このプラグインを入れておくだけで、CSS Naked Dayになったら勝手に脱いでくれるのラクチン。
ただし、毎年CSS Naked Dayの日付が違うようなのでどこまで対応してるの不明。来年も使えるのかな？(n'ω' `)

最近jQueryの勉強をしてるので、ソレで昼休みに作ってみました。
ポップアップするファイルを1つのフォルダにまとめておけば、自動的にポップアップでやってくれるよ！
これはナウい。ただし、ウィンドウサイズは固定なのでチョベリバ。

//ポップアップで開く
<a href="./shop/popup.html">ポップアップで開く</a>
//同じウィンドウで開く
<a href="./food/apple.html">同じウィンドウで開く</a>

//A要素のURLに「./shop/」と入っていればポップアップでウィンドウを開く。
$(function(){
$('a[@href~="./shop/"]').click(function(){
window.open(this.href, "shop","width=400,height=300");
return false;
});
});

もちろんネタですよ？

6月16日（土）、Twitterの@miniturboのこの一言から始まったモバイル勉強会に参加してきました。
前日はTwitterのオフ会で終電で帰ったので、寝坊しないか心配だったんだけど何とかセーフ。

会場は株式会社ノッキングオンさんに無料で貸していただきました。ありがとうございます。

俺はWebデザイナーでプログラムはちょっと分かる程度のひよこなので実際どこまで理解してるのか危ういです。
なので、勘違いしてる箇所がいっぱいあると思いますので、発見したら指摘してくだしあ＞＜
そのうちどこかで動画が上がるとの事なので、詳しい部分はそちらを待ってもらったほうがいいかもしれません。

そろそろiアプリについて一言言っておくか - yoshioriさん

• 前日のTwitterオフからほぼ徹夜で勉強会に参加！お疲れ様です！
• iアプリはダウンロードしたドメインと同一ドメインでしか通信できないらしい。
  • でもまぁゴニョゴニョできるよね
• 電話帳などにも制限付きでアクセスできる。
  • ただし、変更はもちろん検索ですら不可能。制限厳しいのね・・・
• iアプリからカメラからバーコードリーダーやらGPSやら基本的には何でもいじれる。
  • カメラも起動させることは出来るが、自動で撮影などは不可能。撮影自体はユーザーが行う。
• 携帯はいろんな機能があって、APIもいろんなものがあるよ！
  • 使うえる物から、何考えて作ったか不明な物まで
• 昔ボツったネタ公開。
  • 都内オリエンテーリング、ヴァーチャル便所の落書き（これは面白い！）
  • ボツった理由は金と企業的に責任が取れないから・・・なるほど・・・でも面白い企画！
• 開発環境はWindowsばかりらしい。Macだと大変。

MovaTwitterと実世界指向プログラミングについて - f-shinさん

• 実はマッシュアップいろいろやってる！
  • 住所変換サービス - 緯度経度から住所が拾えるやつ。個人サービス？
  • はてなAPI、ブックマーク、フォト
  • Googleのモバイル変換
• 開発環境は当日持ってきていたMacBookとEclipse。
  • EclipseにMac版があるの知らなかった。
• 実世界指向プログラミング
  • プログラムを意識することなく透明な存在として使うようにしようぜ！って考え方。初耳でした！
  • モバイルは誰でも持ってるし、透明な存在としてもっと活用できるよね！

キャリア/機種判別のお話 - yosukeさん

• 機種判別はUAで判別を基準にしている
  • でもそれだとFirefoxなんかで偽装できるよね？
  • UAだけだとセキュリティ的に甘いのでIPでのチェックも併用してる。
  • そのIP情報は公開されていないので、各社独自で判別してるらしい。
    • IP情報は各社公開してるけど更新のお知らせとか来ないし（RSSも無い）、そもそもすぐ更新されるとは限らないため、勝手サイトだと大変だよね。（訂正しました。cipherさんありがとうございます！）
  • 公式サイトになればキャリアから送られてくるよ。
• Softbankの場合、X-Jphoneでさらに細かい情報が取れるよ！
  • でもSSLかましてると上手く吐いてくれない事があるから信用できない。
• Softbankな変な挙動をする機種があるよ
  • GETしか使えない機種（アリエネー）だとか、リンクされてない画像にフォーカスしたり・・・
• UAから取得できる情報は、キャリア、機種以外にもあるけど実際どうしてるの？
  • UAが吐く機種以外の情報（画面の幅とか）は取得しないで、自社のDBを利用してる。
• 1ページあたりのキャッシュは非QVGAは5k、QVGAは9kだと間違いは無い。（セーフティな容量）
• パターンとルールを決めよう。
  • nikuってファイル名の画像だったら、gif、pngなど名前は一緒でキャリアごとの拡張子で表示できるようにするとか。
• 名言：「No●iaは変態っすね。」　「でもDoCoMoのNo●iaは素直だよ」

ケータイの絵文字の話 - Arakiさん

• 各キャリアで絵文字数が違うし、時計のアイコンでも複数があるので注意。
• 1対複数でやるのがいいよね。
• SoftBankは絵文字が並べると勝手にまとめてくれるよ！（余計なことを・・・）

FLASH Lite2.0動的生成 - sp1rytusさん

• 経歴見てビビった・・・何このエリート・・・(　ﾟдﾟ)
• Smartyのテンプレートエンジンを使って、キャリア（機種）ごとにページを生成してるらすぃ。
• セッションをFlashでも維持させるためにFlash内部の変数を書き換えて動的生成するみたい。
• Flashの動的生成にSwftoolsというのを使ってるらすぃ。

モバイルでのXHTML/CSSのお話 - kzさん

• Web（PC）業界の@pruto、@woopsdezと「CSSのプロパティとか見ると安心するね」と会話。
• XHTMLは、W3Cの「XHTML Basic」とOMAの「XHTML Mobile Profile」の2つがあるよ。
• CSSは、W3Cの「CSS Mobile Profile」とOMAの「WCSS（Wireless CSS）」の2つがあるよ。
• プロパティは色々削られてるけど、実用には十分使えるレベルだと思う。
• WCSSでdisplay: -wap-marquee;っていうのがあるらしい・・・ﾅﾆｿﾚ。
• WCSSで-wap-accesskeyで、アクセスキーに指定できるらしい。なんでCSSでやんの？
• DoCoMoではWAP2.0互換とうたってるのに、link要素をサポートしてない。ﾅﾆｿﾚ
• auとSoftbankはそれなりに実装されてるから、現状では「DoCoMo」と「AU＆Softbank」の2種作る必要あるよね。

初心者向け3キャリア共通モバイルサイト作成講座 - yuzuhoさん

• 全国の女子中高生を囲ってるyuzuhoさん、ギャル語が読めるぜ！スゲーそれだけで尊敬＞＜
• 話題のケータイ小説の宣伝サイトを作ってみよう！
  • ケータイ小説って、読者の反応で内容が変わることがあるらしい（作者による）。知らなかった＞＜
  • そういや、韓国のドラマも読者の反応で変わるらしい（関係なし
• 3キャリア共通ということで、絵文字は無し。画像と顔文字。
• ヘッダーだけPHPで分けてインクルードして、コンテンツ以下は共通で作ろう。
• i-Mode用：XML宣言の前にapplication/xhtml+xmlを送信しないと、実機でCSSが表示されない。
• 共通BODYでstyle要素だけじゃなく、古い機種用にHTMLにも直接記述。
• PCで見られても困らないようにコンテナを1つ作る。
• ページ内リンクは、古い機種でも使えるようにidとnameを入れよう。
• PC用サイトとは違うので、携帯用サイトは整理よりカオスがいいよ！

Opera モバイルブラウザの紹介＆Opera用Webサイトの作り方 - kaoritterさん

• Web標準でちゃんと作ればモバイルだってちゃんと見れるんだよ！
• OperaはwiiやDSを初め、auのPCサイトビューワーなどなど名前を変えて色んな所にいるよ。
• スモールスクリーンモードは、上から強制的にCSSをあててるイメージなので、XHTMLの順番に気をつけて記述しよう！

Twitterオフに続いて「紫色の何か」

勉強会終了〜！呑みいくべ！

一次会。
聞いちゃいけない話がいっぱい・・・((((；ﾟДﾟ))))
携帯業界ドロドロですか！？

二次会。
yosukeさんとの話がスゲー熱かった！
名言：「みんなコンピューター持ち歩いてるんだぜ！こんな楽しい事は無いよ！」

三次会、始発までカラオケ。

ココからAmachangが合流！

@yoshioriさんのライトセイバーで遊ぶAmachang。うれしそうｗ

モバイルは普段使ってるのに、知らない事が一杯ですごい勉強になりました。
また、以前のようなWeb（PC）のおまけ的な扱いでは無くて、携帯でしか出来ないこと、携帯ならもっと面白いことができるっていうのが知れて面白かったです。
あと、いろんな人が「これからは携帯だよな」的なことを発言してたのが印象的でしたｗ

他の方のレポート

モバイル勉強会に行ってきた(070616) - yosukeさん

モバイル勉強会が開催されました！ - miniturboさん

モバイル勉強会メモ -ELFさん

6/16（土）モバイル勉強会をレポートします - Arakiさん

第1回 モバイル勉強会 - yuzuhoさん