詳細
http://atnd.org/events/26983

当日のTL
https://twitter.com/#!/search/%23p4dhack%20

GW前、しかも先月のイベントなんでかなり
遅くなってしまいました…。。。

最近よく「ハッカソン」やってるとこ増えてますが
デザイナーがちゃんと混じれてるところってないなーと感じてまして。
そんなときにちょうどTwitterで回ってきたのがこのイベントの情報。

参加者さんの傾向からRuby on Railsでの開発が大半で、
普段MSもとい.NETな方々と一緒にいることが多いので
とても新鮮でした(・∀・)

今回ペアになったのは主催者さんである
@satococoaさん。
技術面はじめ色々なところで支えて下さり
本当にありがとうございました…！m(_ _;)m

今回はGit hubを使ってプロジェクトを共有、
それぞれ機能実装とビジュアルデザインとで役割分担して
開発しました。

名前は聞いたことあったけど実際に使ったのは初めて。
最初はGUIでいじってたけど途中で意外と細かい所に
手が届かないことがわかり黒画面をいじることに…！

多分今までで一番黒画面をいじった日だったかもしれないｗｗ

で、うちらが作ったものですが
勉強会等の主催者、参加者と話をしてみたい…
でも勇気が（ry って人のための
きっかけツール、といった感じでしょうか。
Twitterのフォロワーで「会いたい人」一覧
作れるみたいな。

名前は「comugi」。communicationから取ったけど
なんとなく音がかわいいからというのが主な理由ｗ

全部で15組だったかな。
どれも面白いアプリ・サービスばかりで
ほんとよく思いつくもんだなと。

そして短時間できれいなビジュアルを当てられる
ベテランデザイナーさんSUGEEEE!!

私も事前にある程度コンセプトと雰囲気決めていったけど
なかなかしっかり作りこむことはできずorz

参加してみて強く思ったのは
「ハッカソンは登録したその時から始まっている」
てことですね…！
なーんも用意しないでほんとにその日（というか数時間）のうちに
ある程度動くレベルまで作るってのは
まず無理すわ…。
いや作れる人もいるんでしょうが
大多数は無理なんじゃないかと……。

ただ、その日になって
一気に作りこむのはなかなか楽しいですね＾＾
なので今回は、ものづくりの楽しさ・難しさ・大変さを
同時に体験できた貴重な機会でした。

またこういったデザイナーが関われる
勉強会があったら是非参加してみたいです＾＾
勉強会ブームという割にはデザイン関係のって
意外とないんですよね～。。

最後に、当日作成したデザインをば。
「1日で作る」ってのを真に受けるとえらいめにあうということを
身を持って体験しました(^q^)

ログイン画面

メイン画面

「こむぎ」という響きから
ベージュ系で暖かいイメージで。
一応事前勉強会はじめ、
何度か開催前に打ち合わせとかしたものの
やはり1日では足りないすな＾＾；
まぁ今の自分がどれだけ作れるか知りたかったのもあるんだけど。
ともあれもっとしっかり作りこみたいすね(´ω`)

実践（という名のお絵かき）で学ぶベジェ曲線
http://atnd.org/events/27139

きっかけはTwitterで、
「ベジェってよくわからない」
「おえかき難しい」
という話になったのがきっかけ。

じゃあちょっと勉強会的なことやってみるかー、
というわけで勢いで会場借りてやってみました。

人数が10人、最大で12人したのは
私が仕切れる人数がそのくらいだからなのと
よくある講師→参加者というスタイルではなく
みんなで実際に触って作ってわいわいやる
ワークショップ的なスタイルにしたかったから。
「実践」とつけたのもその為です。

さて。当日はIllustrator、Inkscape、Expression Design、
さらにはiDrowと様々なベジェ絵ツールがｗ
私は普段使い慣れてるIllustratorで説明させて頂きました。

作った（描いた）のは「桜」。
流石にリアルなものではなく、春の幼稚園や小学校入学式で
よく見かけるデフォルトの絵です。
こんな感じ↓

ツール固有の機能を使わず、
飽くまでペンツール共通の機能を使って覚える、というのが主体です。
あと、ベジェやお絵かきが初めての人、
苦手意識を持っている人を対象としているので
サイズや角度などは細かく決めませんでした。
飽くまで「それっぽく」かければOKです。

私は普段イラレの機能に頼りまくってるので
いざペンツールオンリーだと見ての通りひどいことに＾＾；；；

因みに、一応Inkscapeもインストールし、ペンツールの軽い確認は
しておいたものの流石に付け焼刃じゃダメでしたorz
学生時代に結構使ってたとのことで@mitsuba_tanの
御力を借りてなんとか＾＾；；
みつばさんありがとうございます。m(_ _)m

そして当日過程は@a_onoさんが
部屋にあったホワイトボードに記録してくださっていました…！
恐縮です。゜（゜´Д｀゜）゜。
http://twitpic.com/9cqkrd

今回の会で一番伝えたかったのは、
オブジェクトを重ねて作るのではなく、
アンカーポイントをうまく使ってほしい
ってことです。

例えば今回の形だと、
楕円ツールで縦長円作って上に
ペンツールで尖った形作ってそれを重ねる、
て方法で作っちゃうパターンが少なからず
あるのではないでしょうか？

それだと、外側に余計な形が出るので
正確なサイズが出ない上に
逐一背景と合わせた色にする必要があります。
また、オブジェクトの数が倍になり
下手したらデータが巨大化しかねないことも。。。
いずれにしろデメリットの方が多いです。

最後に、ベジェを使うにあたっての基礎ポイントのまとめをば。

【アンカーポイントの操作は新規追加だけじゃない】
（パス上への）追加、削除、移動、接続、切断 ができる。

【アンカーポイントもハンドルも怖くない！】
アンカーポイントをひとついじると、隣接している
別のアンカーポイントとそのハンドルにも
影響が出ます。しかしそれは当然のこと。
形が崩れても落ち着いて根気よく整えていきましょう。

みなさん楽しいベジェライフを！ヽ(´∀`)ﾉ

———
あまりこういったゆるい感じのデザイン系勉強会って
見ないというか少ない？のでせっかくだからちまちま
続けていこうかなと。(・ω・)
次回は財布的な事情で（…）6月あたりを検討中です。
ネタはいろいろやりたいのはあるんですが
まだ決めてないので近くなったらで。

こないだDeveloper Preview出たかと思ったら
もうConsumer Preview出ましたね～（´ω｀）
DPは乗り遅れてちろっといじっただけだったけど、
今回は（予定外に）普段使いのマシンに入ったのでいろいろいじり中（＾ω＾）

箇条書きだけだけど取り急ぎ感想とか
希望とか不満とかｗ
けどまだCPなんで中途半端ところがちまちまあるのは仕方ないんだけどね。
あと、全部を見てるわけじゃないんで、もしここになかったら
他の方のブログ等を探してみてください＾＾；
因みにマシンはLenovo Think Pad X61を使用。

・時計表示がデスクトップ以外に今のところ見当たらない→Metroのライブタイルにほしい
・メモ帳もMetroにほしい
・WindowsWriterもメトロで使えるようになってほしい
・というかLive系のアプリ全部メトロアプリで使えるといいな
・ソリティア重い＆ストック表示が3枚出しのみでつらい
・メトロアプリとデスクトップのIEは別物
・メトロ版IEの使用法
・文字を変えるとき→テキストボックスにカーソルをあてると自動で「あ」または「A」と出るのでそれをクリックすることで切り替える。
・タブ追加または既に開いているページに移るとき→右クリックすると上からメニューが下りてくるのでそれを選択。全画面はとても見やすい
・ピン止めしたページとIE起動はそれぞれ別ページ
・お気に入りはピン止めとイコール
・新規タブ追加のデフォルト表示は「よくアクセスするサイト」。その状態で下に出る検索ボックスに言葉を入れると「よくアクセスするサイト」内の検索になってしまうので注意。一度左上の戻るボタンをクリックしまっさらにしてから検索すればBing検索になる。
・天気、地図、ファイナンスは日本未対応
・XBOX関係のメトロアプリもまだ見対応？

・Windowsアクセサリから右はすべてデスクトップ上で起動
・メールは右側にプレビュー表示がデフォルト。現時点では設定変更は不可能っぽい。
ただフィードバックメニューがあるので文句のある人はそれを使うべし。
・あとメール自体を開いて見るのってどうやるの…orz
・フォトはローカル内の他、Windows Live上にあげたもの、Facebook、Flickerと連動している

ついったでもちょくちょく言ってるけどメトロ版IE10の
デフォルト全画面はほんとによいですな(・∀・)
あくまで個人的にはなんだけどｗｗｗ
他のタブに表示されてるページ見るために
いちいち右クリックするのはちとめんどいけど。

私個人としては結構面白いOSだと思うし
スレートやKinectみたいな新しいタイプの入力装置を
前提にしたデザインはこれから必要になってくると思う。

とはいえ、ここ↓
http://www.gizmodo.jp/2011/10/windows_vistawindows_8.html
でも危惧されてる（とはちょっと違うかｗ）けど
がらっと変わると今のところほぼ確実にクソ扱いになってるんだよね＾＾；
私が本格的にPCいじるようになったのってXPからなので95やMeのひどさは
話にしか聞いたこと無いけどVistaはそんなにひどいOSとは感じなかったんよね。
単にえらく変わったってだけで。
（深い場所いじったりいバリバリ開発する人にとっては違ったんだろうけど）

つまりこのままだと多くがこの変化についていけず
ダメな子として扱われるかもなぁ。。。
ただでさえ未だXPが現役でようやっと「7に乗り換えよう！」って声が大きくなってきた程度だし。
製品版が出るのがまだ先とはいえ状況ががらっと変わるとは思えん…。

けど、iPadやギャラタブとかにならんで
スレートPCもう少し普及してそっちではWin8が、
一般企業とかのデスクトップは7が主流になってるって時期がありうるかも。
仕事では変わりすぎて使いにくくても普段のネットやメール、ゲームするために
使うなら受け入れられそう。…スレートがそれなりに流行れば（普及すれば）。。

はてさて。
次はVS11ならびにBlendでもいじりますかね。（´ω｀）
仕事の都合上IE10のHTML5＆CSS3の動き具合も見たい。
…ブログに書くかはわからんがｗ

この記事
【Atelier : Mitsuba】よーじょ、UI、機内にて
http://d.hatena.ne.jp/c-mitsuba/20120305/1330882234
を見てちょっと思ったことがあったので。
お昼のゆるい頭で考えたのであんまりまとまってないです。

Metroって地下鉄のサインを元ネタに作られたデザインだけど、
そもそも地下鉄のサインって「視覚伝達」のためのデザイン（のはず）。

けど、適用先はプロダクト。
つまり、本来「見る」ためのデザインを「触る」ものに転用（というと語弊あるけど）
したわけだ。

そう考えるとこの幼子の反応はとても正しいなと思った。
だってあの平面のぺったりした形ってあくまで「見る」ためのデザインだもの。
「触る」ものじゃないって判断したのは当然だろうね。

でもこの記事を読むまで気づかなかったなぁ。
すっかりPC（Web）上の動きや配置になれて、
「単に形や配置が変わっただけ」としか感じてなかった。
けどその「形」の変化が非常に大きな変化なんだよね。
いやはや恥ずかしい。

さて。
そう考えるとMetroって実はこれまでのマウスやキーボードでの入力はおろか
スレートやスマホにも向いてないんじゃないかと思ってしまう。
要は「触るもの」だととてもわかりにくい。
たとえ実際はガラスを叩いたり擦ってるだけでもね。

しかし、こう考えたらどうだろう？
「触らないもの」には？？

触らずして入力、といえばKinect。
ゲームやるとわかるけど、
入力に関しては「押す」という動作が無いんだよね。
というより要らないというべきか。

入力するもの、状態によってUIのデザインも変化する、すべき、と
考えると立体感が無いなら立体物じゃない入力（じゃあKinectの場合手足や体はどうなるんだとかいう話はさておきｗ）方法で。

そんなわけで（）
Metroが本当に向いてるのってKinectをフル活用できるものなんかなと。
まだまだ先だとは思うけども。

大変お久しぶりです…(´Д`)
気が向いたら書く、にも限度はあるよなぁと思いつつ
あまり治す気はなかったり（ぉぃ
ともあれ今年も引き続き超絶マイペースでお送り致しますm(_ _)m

さて、ひょんなことで@ch3coohさんからお誘いを受けて登壇することになってしまいまして＾＾；ｗ
こちらです

スマートフォン勉強会＠関東 #17
http://sumaben.jp/?SPWorkshopKanto17

「デザイン関するゆるい話」というタイトルで
いつものように（？）初心者さん向けのポイントなどをゆる～くお話してきますた(´ω`)
で、ようやっと公開用資料ができたのでおしらせ。

https://skydrive.live.com/?cid=311DE42BAE794AB0&id=311DE42BAE794AB0%21491

SkyDriveに上げているPDFに直接つながっています。
なぜPPTXではなくPDFなのかと言いますとフォントの問題です；
埋めこんで保存したはずなんですがうまく反映されなかったので
仕方なくPDFに。。。

あと、何より本当なら資料共々もっと早く出せればよかったのですがががが；；
今週は週末まで時間が取れずまる一週間後に；
失礼しましたm(_ _;)m

そうそう。
当日どんな雰囲気だったの？？て方向けに既にTogetterにまとめられているので是非。＾＾
http://togetter.com/li/256156

これまで開催してきたスマートフォン勉強会（以下すまべん）の中で動員人数が最高だったとか。確か54人でしたかね。

参加者の大半がスマホ持ち、しかも複数台＆複数回線当たり前。
何より、日本国内で圧倒的にシェアが少ないはずのWindows Phoneがそれを占めている…！
さすがです。
ガラケー1台のみってのは私だけだったんじゃないですかねｗｗｗ

とかくハイレベルどころじゃなく次元の違う方々が一同に介していましたｗ

まぁ、これからはPCだけでなくスマホをはじめとしたモバイルも
開発、デザイン関係なく重要になってくるんで、
興味のある方は是非一度ご参加してみては？(´∀`)

詳細
http://www.microsoft.com/japan/web/webcamp2/

トゥギャッターも既にあるようで
http://togetter.com/li/228624

ちょうど時間もあったし、なによりこれからはHTML5外せないし
FFのサイトネタってのも気になって参加してきました。
始まった時に司会の春日井さんも仰ってたのだけど
事実、結構濃厚な技術セッション目白押しでしたｗ
まぁでもマークアップも割と含まれてたし、
わかりやすく説明してくれてるものが多かったので
かなり有意義でしたね＾＾
もうひたすらメモってたｗｗ

自分の中で意外と印象的だったのがWebSocketの話。
これに限らず通信系ってほんと門外漢どころじゃないレベルなんですが、
とても簡潔でわかりやすい喩え（電話のやりとりを例にしてました）にしてて
その日初めてWebSocketがどういうものかやっとわかった…気がしましたｗ

さて、以下はメモとその日のハッシュタグ#html5jのツイートから
印象的だったものをピックアップ。
あとは現時点（12月18日17時現在）で公開されている公式資料のリンク。
ツイートは引用扱い＝斜め字にしてます。
（「誰のツイートだったか」までメモするの忘れてた…orz）
ご興味ある方はどうぞ＾＾

【HTML5 登場の意義と Web 標準とのつきあいかた】 深見 嘉明氏
・世界にはW3Cの研究機関が3つある：アメリカ ヨーロッパ、日本
→日本はSFC ※深見さんはそこで研究員をなさっている
・今年はWWW生誕20周年：CERNがドキュメントを公開＆
HTML4.01がRecommendationとして確定
・HTMLの本質とは＝Human Readable Content
リンクで飛べる文書 人間にとってのコンテンツ
・仕様策定プロセス：ドラフト→実装して他のグループとの整合性：ラストコール→実装例を待つ→ProposedRecommendation→ACによる投票→勧告
・C#やC++と同じ立ち位置にHTML/CSSやJavascriptがWin８には入ってる。なぜ？
→ネイティブでHTML/CSSでマークアップを、動きをJSで
・既にHTML5の次について話し合われてる：HTML.next
・パラダイムシフト：誰かの決めたルールに従う→共にイノベーションを作っていこう

<From Twitter>
実際W3Cは標準を決定する際に議決権がありません。つまり仕様決定は基本的に会員の意思に基づいています

【マイクロソフトの新しい Web ブラウザー Internet Explorer 10 と HTML5】奥主 洋氏＆物江 修氏
・IEテストセンター：http://samples.msdn.microsoft.com/ietestcenter/
・IE10のデモ集：http://ie.microsoft.com/testdrive/
・仕様の解釈だけでなくどこまで実装するかはブラウザ開発会社次第なのでその都度チェック
・IE10で対応してるHTML5要素～フォーム編～
テキストボックスのバリデーション自動設定
スライダーも自動生成：基本JS無し
特徴的なのは電話：電話用バリデーションは標準ではついてない→各国でパターン違う
そこでPattern要素追加して正規表現で
コンボボックスのデータリスト作成
・IE10だと外部リンクのJSファイルのデバッグも可能になる
・ブラウザでプレゼンする→コード参照：Test Drive

<From Twitter>
・今日ここにお越しの方は、WebデザインはもとよりWebサービスを提供している方々が多いなら、この form デモで与える影響度はどれくらいあるのかな？ほとんど無いようにも思う。何がどう便利で安全に実装できるのかを見せて欲しい。

・CSS3のプロパティを試せるサイト bit.ly/sTQPG8

【Presented by html5j.org。おれの HTML5 の話を聞け】
※3セッションで成り立っています。
<<Webソケットの基本：金城雄氏>>
・昔は静的なページ：HTTPはリクエスト／レスポンス型
→JSで動的なウェブページが登場：但し情報が最初から埋められているので画面遷移が必要
→定期的な更新ができるページ
→ページ内の隠しiframeの非同期通信（前者同様通信起点はClient） ※但し複雑で簡単に使えない
→Ajaxが誕生：サーバーとの通信が用意になった：但しサーバープッシュができない
→Cometの発明：接続起点はClientだが情報配信の起点はServer 応答を遅延させることで実現 Ajaxの応用：擬似サーバープッシュ技術。だが簡単には使えない
→WebSocketの誕生：サーバプッシュが用意になった
・電話の歴史みたいな感じ：WebSocketはホットラインみたいなもん
・昔は高い負荷や空白時間、無駄な接続の発生があった
・WebSocketは最初こそ高い負荷がかかるが再接続せずに送信（ずっと投げっぱなし）
・受信したという通知は来ない→応答の仕組みは要自作
・サーバ側の情報取得はComet同様リアルタイム
・クライアント側の情報送信も同じ接続内＝双方向通信
・[WebSocketの歴史の概要]２つの仕様：API＝現在勧告候補 W3Cが策定に関与 プロトコル＝ライブラリやブラウザ作りに必須 HTTPプロトコルに相当
・ドラフトのバージョンが９０くらいある上にバージョン間で互換性がない。しかしRFC化されたので混乱も収束するはず
・古いドラフトにはセキュリティホールあり：新しいもので改善 但しブラウザには古いドラフト使ってる場合もある
・ネット上の情報はまだドラフトの情報ばかりのため少し歴史を把握してると理解しやすい
・WebSocketとHTTPの関係：利用するポート番号はHTTP/HTTPSと同じ
・接続処理にHTTPを使う：機器は勘違いする 仕様1.1を巧みに利用
・接続時のヘッダはほぼHTTP
・接続にHTTPSを使うことでBody部が隠匿される
・ネットワーク機器からはHTTPに見える
・ネットワークの設定変更がほとんどない
・ただし脆弱性対策のためHTTPとの互換性が若干低下
・ブラウザとの関係：HTML5関連技術として策定されている
・各ブラウザが対応を進めておりブラウザのバージョンアップだけでOK
・ブラウザ上のJSからもAPI経由で使える
・バイナリも使えるようになった
・ブラウザ上で双方向デフォはWebソケットが初：これからのWebアプリの基礎になるかも
・一番新しいドラフト使ってるのはChrome16Beta
・Safariが5.0というセキュリティホールのあるもの使ってる
・IEは10でLastCallドラフト使用
・ブラウザの対応がまだ完全に出揃ってない：IE10リリースで主要なモダンブラウザが全部揃う
・ノウハウが不十分な為商用はまだそこそこリスクは高い

<From Twitter>
・AjaxやCometでは接続の処理を繰り返すので負荷が高い。一方WebSocketでは一回接続すればずっと接続しっぱなしになる

・IEなどでWebSocketを使うためにFlashでエミュレーションするライブラリがあります。gimite/web-socket-js – GitHub bit.ly/rKfZXl

<<Press F12!>> 井原雄太郎氏
・F12開発ツールでできること：HTMLとかをデバッグ IE8から標準搭載
・トレーススタイル：チェック外すと即反映
レイアウト；現在選択してる箇所のボーダーやパディングのPx数がわかる
属性：クラスやスタイルの変更
・いじったソースは別ファイルとして保存可能
・ガワだけ作ってブラウザで見ながらスタイルをこのツールで当てていくのも手
・適用してるCSSの一覧が見れる
・コンソール：その場でJS実行
・物江さんのブログに結構書いてある

<<SVGと地図とIEと私>> 若狭正生氏
・SVG；2001あたりにできてるがバージョン1.1 HTML5カテゴリの中にかなり古株
・途中Adobeが一押ししてくれてたがMacromedia買収して黒歴史になったりとか…
・SVGとCanvasはよく比べられるが違うもの
・SVGは基本ノープログラミング
・地図サービスの地図＝現状、タイルと呼ばれる画像を読み込んでる
・地図サービスの地図＝現状、タイルと呼ばれる画像を読み込んでる
・ベクターデータであるSVGは地図と親和性高い
・拡縮に強くモバイルなど通信が不安なところに強い
・アンドロイドアプリのGoogleMaps5は対応済
・ライセンスと地図：GoogpeMapsを画面キャプチャしてトリミングして…はライセンス違反
・地図サービスに有料化の波：寧ろ今まで無料だったのが不思議：そんなに高くはない
・オープンな地図のOpenStreetMapというところからひっぱってきて加工
・PNG、SVGなどいろんな形式で落とせる
・中身はXML
・ブラウザによってレンダリング能力違う
・SVGは1ファイル100MB普通とか大きくなりがち 多少ZIPで縮小は可能
・改善案：KDDIで、一気に全部ではなくある程度の縮尺になったら詳細を出すことで回避しようとしてる
・SVG＝フォーマット
・ノンプログラマーにやさしい
・マッシュアップにやさしい
・地図はじめ、チラシとか拡縮必須なものに強い
・SVGはVisioでも出力可能

【HTML5 プロジェクトの舞台裏～FINAL FANTASY XIII-2キャンペーンサイト～ 】
MS溝口氏 クレアテック磯田氏 十倉氏 阿蘇氏
・スクエニ側から呼ぼうとしたら向こうもキャンペーンで忙しくて無理だった
・純粋なWeb会社というより複数媒体扱う広告会社
・スクエニの仕事よく引き受けてる
・初めてのは2006年のチョコボと魔法の絵本シリーズのサイト、パッケージデザインや広告など
・2007年クライシスコアFF7のサイト
・2009年FF13公式サイトも
・ずっとFlashで作ってた
・FF13-2もFlash
・プロジェクト概要
・（IE9・HTML5で）最高のエクスペリエンス
・FFファン同士をつなぐ
・HTML5の力でFlashの表現力に挑戦
・ほぼ1ヶ月でPC版公開
・13-2のWin7テーマがある：グラフィックだけでなく音声も
・セクショニング要素を駆使してDivの入れ子を回避
・「なるべくDivを使わない」
・全体をDivとし中をSection
・CSS3：背景画像の複数指定
角丸、ドロップシャドウ
スケール、マウスイベント
・モーグリの形に沿って掴みたい→SVGのパスで描かれてる パスの部分にだけマウスを反応させるようにしてる
・透明の矩形の中にモーグリ：それを解消するためにVisibilityをうまく仕様
・Canvas：スコープ、雲、羅針盤の描画、背景アニメーションの描画
・スコープは暗く見える部分をCanvasで描画してる
・ジオロケーション使ってる
・SVGによるアニメーション
・３Dデータからアニメーション用SVGを全コマ書き出し
→重かったり欠けたりで最終的にはイラレで手直しレンダリング→高速アニメーション
・1秒24コマ
・IEはグラデーションSVG対応→サイトでもやるかも？
・Video、Audioタグのみで動画音声再生
・ブラウザごとに動画終了などの制御がまちまちなので調整した
・バックはAzure：クレアテックさん初 名前すら聞いたことなかった
・FTPサーバーを設置
・SQLAzureにデータ蓄積
・スマホは鋭意製作中:結構たいへん 重すぎたり
・今やっておくことでアドバンテージ：JS/マークアップの時代ｋｔｋｒ

先日公開した個人サイト、
AboutにもありますがWinでしか確認できない状況だったので
Macで見たらどうなるのかヒヤヒヤしてたんですが……
案の定／(^o^)＼なことに。。。

情報（画像）提供：@Posauneさん
ChromeのMac版とiPadで見て下さいました。感謝ー！

こちらがMac版Chromeで見たもの。
Win版Safariのデフォルトフォントで見たときにかなりギリギリだったので
短く整えたつもりだったんですがダメぽでした…orz
しかも黒かっこ（【】←これ 正式名称わからないので割愛）が
表示の都合とはいえ右寄りに。。。

こちらはiPad。同じことが起きてますね…(´・ω・`)

フォント指定が確実なんだろうなぁ…とぼんやり思ってますが
今ちょっと余裕ないのでとりあえず文章短くして
かっこを黒四角（■）で囲むことで応急処置。。
タイトル系については画像かそれ的な表現がベスト…？

あとWorksのサムネイルの足もえらいことに＞＜
ここも数値いじって処置します。

こないだ「FlashオワコンｗｗｗｗｗHTML5サイコー」な記事が話題になってたけど
PCに関してはFlashやSilverlightみたいなプラグインでいいんじゃないかと
今回作って思ったり。。
OSの違いだけでなくさらにブラウザの違いも視野にいれてうんたらとか
結構手間だし寧ろそのせいで規格が持ってる表現力がフルに発揮できなくなるんじゃないかとか考えてしまう…。
まぁ、ちゃんとノウハウ身につけば楽になるんだろうけども。

こちら
http://coddledegg.net/

ようやっと最近のWeb技術を実際にいじくりまわしてみました…！
いやー…大変だった…！(;´Д`)
こんなしょぼいレイアウトとコンテンツでも
慣れない人間にとっては5種類のブラウザに合わせてあちこち調整するのは
マジで骨が折れますお…！
とりあえず今回は自分で作ってみることが目標だったのでまずは達成！
次というかこれからは少しずつリッチに仕上げていきたいと思います（｀・ω・´）

HTML＆CSSごにょごにょ自体は
大学時代に趣味で自分のイラストサイト作るのに3年くらい？やってたので
特に抵抗感はないんですけどね。
しばらくがっつりやってなかったし、
今回はHTML5・CSS3と技術が様変わりしてるんで状況が違ってたり…。
因みにJavascriptは当時ほぼ全くさわってませんでした。
変数の概念すら理解出来ないくらいにダメな人間だったので…orz
今回は前々職の経験が生かされて（笑）ネットの記事とにらめっことその道の友人に聞いてどうにかなりましたｗ

さて、
勉強がてら突貫で作ったのでいろいろ突っ込みどころは多いと思いますｏｒｚ
更新情報ないとかバナーないとかメールがフォームじゃないとかそもそもデザインが（ｒｙ などなど。。。
まぁ、まずは公開（後悔）して少しずつ良くしていくので長く見てやって下さい(ヽ’ω`)

サイトのトップにもありますが、
基本はChrome、Firefox、IE、Opera、Safari（全てWindows版／そして何気に個人的優先順…）の各現時点の最新バージョンで確認しながら作ってます。
どなたかMacで確認できる方ご連絡くれると地味に嬉しいです(´ω`)

基準サイズは1280＊1024。左寄せで作ってるのでそれより大きいと右が余る形になります。
ほんとは常にセンター寄せで作りたかったんですけどね…。
Centerタグがなくなったのもあってかなり面倒なことになってるようで…。
そこで詰まってても仕方ないので今回は妥協しますた。

サイト自体もいいけど、
まずはメインコンテンツである作品を増やしていくのが先ですかね。
とりあえずここ2ヶ月で作ったもの4つほど。
2ヶ月で4つって相当遅いな……orz
アイデアが出る＆固まるまで結構時間かかってるのがネック。。
とにかく作りに作ってスピードアップを図りたいところです。

そうそう。
作品内にWordPressテーマのものがありますが、
アレ後々こちらに適用してみようかなと考えてます。
まぁ、その前にそのテーマについて勉強しなくてはいけないので結構先になりそうですが…。（そしてその間に新しいのができそうだ…ｗ）

現代は作るにも情報発信するにもいろんな技術があって
大変で面白いですね！(ﾟ∀ﾟ)

技術といえば、
今回初めてがっつり今流行りのHTML5／CSS3／Javascriptに向き合ったのでそこで思ったことや詰まったことなどを別途記事にしようと思います。
まぁ、その道の人にとっては初歩もいいとこでしょうけどもね！
記すことが大事なのです。（

さて、Twitter、Tumblr、ブログにサイトが加わって何がなにやらですが……＾＾；；；
ま、変わらず引き続き気の向くままに更新し続けます。
今後共よろしくお願いしますm(_ _)m

私のメインブラウザはGoogle Chrome。
多分、出たばかりの頃から使ってるんじゃないかな。
なのでもうかれこれ3年？くらいは使ってるかも。

で、ここ最近、このChromeの機能拡張にハマリ中。
きっかけは、
Chromeで「（任意のブラウザ上の画像を）デスクトップの背景にする」
てのはどうやるんだろう、と思ったこと。
IEだと右クリックすれば出るんだけど、それがてっきり
どこのブラウザも同じと思ってた^^;;
そこで入れたのがこれ。
Set image as wallpaper (Windows)
https://chrome.google.com/webstore/detail/ddkmiidlgnkhnfhigdpadkaamogngkin

そしてこれが一番最初にいれたエクステンションになった。
それから色々と放り込んで、結構便利に使ってるｗ
どんどん便利になっていくのが楽しいんだねｗｗ

といっても、私はただのユーザーなんで
そんなにガスガス入れてるわけじゃないんだけどね。
飽くまで自分にとって便利なものしか入れてないので
大した数は入れてないんだけど。

今入れてるのは、前述のSet image as wallpaper含めてこの8つ。

Auto Replay for YouTube
https://chrome.google.com/webstore/detail/kanbnempkjnhadplbfgdaagijdbdbjeb
一度曲にハマるとずっと何回も流したくなる人なので^^;

AutoPagerize
https://chrome.google.com/webstore/detail/igiofjhpmpihnifddepnpngfjhkfenbp
検索結果でいちいち「次へ」ってクリックするのって何気に億劫…。
でもこれ、同じページ内で検索ワード変えて再検索しても、2ページ目以降の
検索結果が最初と同じになってしまうので別なエクステンションを検討中…(´・ω・`)

Awesome Screenshot
https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
これはもう、有名所ですなｗ
ほんといろんなことができる。
ただ、もっと軽いのがいい、という人はGoogle謹製のこれ↓を使うといいかも。
Screen Capture (by Google)
https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg?hc=search&hcp=main

Eye Dropper
https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka
仕事で資料調査をしているときに、
「この色いいんだけどコードはなんだろう？」
て時にすぐブラウザ上でわかればいいな、と。
それまではいつも、わざわざ切り取ってフォトショ起動して…とやってた；
そらめんどくさい罠…。

Minus
https://chrome.google.com/webstore/detail/kgphklnbopgbelmcambccnaecijlnhno
ちょっと前に話題になった、「Minus」てのがよさげだったので入れてみた。
最近使ってない^^;

YAGBE
http://www.jimnuzzi.com/YAGBE/
ChromeってGoogle製なのにGoogleブックマークとデフォルトで連動とかしてないんだよね…。
何か意図があるんだかなんだかわからんけど…。
そこで入れたのがこれ。
わざわざブックマークページに飛ばなくても開けるのはもちろん、
任意のページを登録＆タグづけすることも可能。

Taberareloo
https://chrome.google.com/webstore/detail/ldcnohnnlpgglecmkldelbmiokgmikno
ついさっき入れたばかりｗ
Tumblrと連動させようと思っていれたもの。
この辺はFire foxのTumblooが有名だけど、Chromeだとこれが便利みたい。

使い方によっては、もっと色々あるしもっと数も入れられると思うけどね。
現状ではこれで満喫中。まぁ、また増えるだろうけどｗｗ
因みに、入れすぎるとChromeが壊れるらしい……
http://web-marketing.zako.org/web-tools/best-google-chrome-extensions.html

追記—————————————–
@masaru_b_cl さんより検索ページツールの情報を頂きました。
情報ありがとうございますm(_ _)m
これだとちゃんと2ページ目以降も検索ワード変更に対応しています。
というわけで乗り換えｗ

AutoPatchWork
https://chrome.google.com/webstore/detail/aeolcjbaammbkgaiagooljfdepnjmkfd?hl=ja

その1からちょっと時間があいてしまいましたね＾＾；
その1はこちら↓
http://blog.coddledegg.net/?p=211
資料公開が主です。

さて、2は主に感想をば。
私は恥ずかしながら途中から来たクチなので自分のセッション以降のことしか書けません；；あしからず。。。。

前半は開発寄りのUXネタだったようですが、
後半はよりUXの概念についてのものが多めでした。

特に、川西さん・東さんのセッションは、
お二人とも「UXといえばこの人！」と言われる御方々だけにとても重みのある内容でした。
（東さんのセッションは次期Windows OS「Windows 8」を中心とした話だったので
「概念」よりかは結構具体的だったかも。）
しかし、トリの尾上さんもご自身では「UXについては素人」と謙遜しつつ
そのセッションは前述のお二人しかつっこめないレベル…！
自分はそういった概念系の知識は本当に乏しいのでこの御三方のセッションはめっさ為になりました！まだまだ勉強不足を痛感＞＜

とりあえず御三方のセッションで印象深かった言葉など。資料からのものもあれば、当日の言葉もあります。
ただ、（特に当日の言葉は）文章そのまま覚えてるものが少ないので要約になります；；

【川西さんセッション】
・ソフトウェアにはアフォーダンスがない
→「アフォーダンス」って、そのモノを見てほぼ反射的にそのモノが持ってる機能がわかること（かなり大雑把な説明…）なわけですが、ソフトウェアって純粋な「モノ」とはちょっと違うんですよね。この言葉聞いたとき私の中でかなり衝撃でした＾＾；

・スケッチとは心の会話
→ビル・バクストンの著書「Sketching User Experience」から紹介だったかな？
まずは目で見てわかるものに…書いて書いて書かないとね！

・UXに責任を持つ役割の人が必要。技術者だけでは崩壊してしまう。
→大抵、「デザイナー」「デベロッパー」の2つにわけてしまうけど、UXに責任を持つ人がとにかくいないと×。技術者だけでもだめだしデザイナーだけでも実際ダメだと思うんだよね。ただ、川西さんいわく「デザイナーの方が向いてるかも」。

・UXは銀の弾ではない
→あくまでデザイン時の「なぜ？」の糸口にすぎない、とのこと。バズワード状態だから勘違いしてる人確かにいっぱいいそうです。。

・早く失敗するほどたくさん失敗できる
→まさにそのとおりすぐる…。。たくさん失敗しないと成功への道はないんですよ…！
じゃあ、5分くらいでぱっと思いついて結果的にそれが大成功だった場合は？となるわけだが、これはすぎやまこういち氏の言葉を借りて「5分はただの5分ではなく年齢＋5分」。直接それに関わる失敗だけでなくそれまでの失敗経験も込みになるわけです。

・ビジネスはエクスペリエンスを売ること
→デザインもビジネス、モノから経験＝エクスペリエンスに移っています。
昔に比べると圧倒的に低コストで高品質なモノが大量に作れますからね～。

【東さんセッション】
・機能はそのままに見た目がこれまでの基準とは全く違うものに
→RSSリーダーでも、これまでのようにツリー構造でどうの、ではなくより内容が直感的にわかる、写真ギャラリー的なレイアウトになったりとか…。技術の都合でどうこう、ではなく飽くまで「ユーザーがその機能を使いやすい」形であることが最重視される。

・タイルはただのアイコンではない
→タイル自体がガジェットというべきか…。AndroidやiPhoneでもアイコン自体がメイン情報を表示するアプリみたいな動きさせることできるそうですしね。Windows 8（あと恐らくWindows Phoneも）ならそれがタイルに相当。

・OSが物事を提供する
→ここをクリックすると●●が出る、というパターンを教えるのがOSの役目。スタートボタンからアプリ選択などができる、というのがそれに相当するかも。でも実際は使ってない人も多く、それがきっかけで8ではメトロUIを採用し全く新しい手順を提供することに…。最初は誰だって戸惑うし、反発も必ずあるけど慣れるとそれがスタンダードになるものです。

・テンプレートからいかに超えられるか
→メトロUIはがっちりガイドラインがあるので、誰でも一定のクオリティのデザインができるようになっている。でも、そのテンプレートからいかにただそれに沿っただけじゃない、素晴らしいデザインができるかが勝負。
そのためにはまず原則を知っておくべし。

【尾上さんセッション】
・全く考慮していない特性や要素があると引きづられてしまう→最悪システム自体が消える
→どの特性が「落とし穴」になるかによるかもしれません。ただ、「使いやすさ」が全く考えられてないのは論外。。。

・ユーザーが言葉に出さない、潜在的な要求も洗い出せるプロセスが構築されるべき
→「ドリルを買う客はドリルがほしいんじゃない、穴を空けたいのだ」という比喩がありますがそれに通じるものがあるかなと。「なぜ」その機能（アプリ）がほしいのか、必要になったのかを知らないと作っても全然違うものができてしまいます…。それを避ける為にはまず要件定義など上の段階からUX（のための特性）を意識したプロセスが作られないと、というのが今回の尾上さんのテーマ（提案）でした。

・定量的に評価する試みがうまくいかなくても、その途中までの成果は必ず役に立つ
→UX等に限らず、あらゆることにおいてそのとおりだと思います。川西さんセッションで出た、スケッチみたいなもんですね。

この他にも、尾上さんセッションの質問タイムで川西さんから「UXは儲からない」、及び「儲からない」という思い込みが仕様やプロセスの改善に至らない、という話が出ました。
儲からない（と思い込む）→作り手側の改善もされない→ユーザーの心もつかめず→本当に儲からない→最初に戻る…という連鎖になっているわけですね。。。

続いてのお楽しみセッションはneuecc（ノイエ）さんとchachakiさん。
neueccさんのはバリバリの開発ネタだったのですが、門外漢な私には下手な説明すらできません；；
ただ、セッション内で出た
言語が思考を規定する
はとても印象深かったです。詳しくは公開されている資料にてｗ

chachakiさんのは、産業技術大学院大学の履修生を中心としたUX関連のコミュニティ「hcdvalue」と「UX白書」と呼ばれるものの紹介。
UXって世界では結構いろいろと研究されてるんですね。
でも日本でそれメインのコミュニティって意外と少ない気がするんだけど気のせい？？

はてさて、
ここまでつらつらだらだらと自分の感想（？）を述べさせていただきました＾＾；ゞ
飽くまで私個人の感想や捉え方なので、皆様と随分違ってるところが少なからずあると思いますがご了承を。。。

実際どんな内容だったのかは、公開されている各講師の資料で是非ｗ
現在公開されている資料はここでまとめてチェック。
http://silverlightsquare.com/index.php/tokyo04.html