HCDな2011年

今年は「HCD」な1年でした。
昨年の産業技術大学院大学の人間中心デザインの卒業メンバーが立ち上げたhcdvalueというコミュニティでTOYOTA SOCIAL APP AWARDに出してみたり、ワークショップやったり、研究会に参加したりHCDに関わった一年でした。
9月から第3期の人間中心デザインの基礎編を受講して、なんとか3ユニット受講完了して履修証明、もらえる、はず。

来年はHCDを職場に広めるべく小さくでよいので活動したいですね。
引き続きHCD、UX、IxDやUIの方に取り組んでいきたいと思います。Webに関しては、モバイル向けコンテンツとかWebFontとか気になっています。

2011年のエントリのトップ10

括弧内は昨年の順位です。

1. Macを初めて買った人にオススメするフリーソフト (1)
2. HTML5 で試しに Web ページを組んでみた (改訂版) (2)
3. HTML5 で試しに Web ページを組んでみた (3)
4. デフォルトブラウザは Safari でいいかもしれない (4)
5. CSS3 で新しいボックスレイアウト (6)
6. CSSでボックス要素を画面中央に表示させてみる (5)
7. Firefox のマルチタッチジェスチャーをカスタマイズ (New!)
8. iPhone/iPod touch用のWebClipアイコンの作り方 (8)
9. 細かい新機能で大きく進化した Keynote ‘09 (10)
10. SynergyKMの設定でつまづく (9)

まぁだいたい去年と同じですね。
2011年の記事としては、11位にCSS Nite LP, Disk 16「スマートフォン特集 (2) Android編が入っていました。

気になった作品 ー モノ編

青森産のシードルが配られていた

中央に人だかりができていたので覗いてみたら、青森のりんごを使ったシードル(いわゆるりんご酒)が無料配布されていたのでいただきました。

日本一のりんごの生産地、青森県産のりんごだけを使用し、本場ヨーロッパに負けないシードルを目指しました。現地での醸造にこだわり、低温でじっくり発酵させました。アルコール分は低めで甘口。口いっぱいに広がるフルーティーな香りが特徴です。この商品は(地独)青森県産業技術センター弘前地域研究所と六花酒造(株)の協力により生まれました。

アルコール分も感じられず、ちょうど喉が渇いていたのでぐびぐびと飲んでしまいました。僕が飲んだのは「スイート」というものだそうで、すごくおいしかったです。ノンアルコールのりんごジュースも置いてありました。
Webサイトを観ると他にも種類があるようですね。

気になった作品 ー デジタル編

森の木琴

CMで注目された森の木琴の一部が展示してありました。ちゃんと作ってたんだなぁと。これが40mくらいだったというのだから作るだけでもかなり大変そう。できれば実際に鳴らせるようになってたらよかったな。

旧サーバのバックアップ

1. DBのバックアップファイルをphpMyAdminでzipでエクスポート。WordPress Codexのデータベースバックアップページ参照
2. サーバ上のファイルをローカルにまるっとダウンロード。その際、パーミッションをサーバと変えないようにする。

今回の作業にあたり、こちらのページを参考にさせていただきました。

hetemlの設定

1. ドメインとか設定
2. メールアドレスの設定と転送定義も忘れずに

hetemlでWordPressのインストール

1. hetemlの管理画面からデータベースファイルを作成
2. hetemlの簡単インストールでWordPressをインストール。1. で作成したDBの情報で設定(wp-config.phpが併せて作成されるので便利)
3. uploads、plugins(wp-dbmanager以外)、themesのデータを置き換え、wp-super-cacheに関わるフォルダも作成しておく
4. phpMyAdminで、簡単インストール時に作成されたテーブルを削除し、バックアップファイルをインポート
5. ほんとはローカルのhostsファイル変更したりして確認するべきですが、なぜかこちらのソフト入れて再ログインしてもうまく見に行けなかったので、ドメインのネームサーバをhetemlに向けて変更
6. 新しいネームサーバに向いたところで、WordPressの管理画面にログイン
7. wp-super-cacheの設定を確認。wp-dbmanagerを新規インストールして設定

多分こんな感じで。一度ローカルにダウンロードしたファイルをそのままサーバにおいたけど、おそらくパーミッションがうまく引き継げなくて再現できなかったので、WordPressを再インストールしてやり直しました。

Android OSと現状のデバイス総まとめ
– あんざい ゆき@yanzm さん

30分ほど遅れての参加でしたが、フォローアップのスライドを拝見して、Androidとはなんぞや、から、iOSとは何が違うか、日本独自機能の紹介、今後のGoogleのAndroid戦略、までAndroidに関わる様々なトピックをぎゅっとまとめたお話でした。この資料は一度見ておいた方がいいと思います。

個人的には、キャリアが展開する独自マーケットでのアプリ配布方法の扱いが気になりました。資料を補足しつつまとめてみました。

ドコモマーケット

Android Marketへリンクしているのみ。ニュースやゲームの紹介、広告を掲載しており、ポータルサイト(いわゆるiMenu)のような作り

au one Market

独自にアプリの審査制を採り入れており、アプリ配布も独自に行っている

SoftBank ピックアップ

Android Marketアプリ内のタブ?に一画面を組み込んでいる

これには、各キャリアのスタンスが現れているんじゃないかと想像できますが、なかなか興味深いです。それぞれにPCからアクセスすると分かるのですが、auとSoftBankがサービスの紹介程度のページを用意しているのに対し、ドコモではAndroid端末で表示されるページをそのまま掲載しているなど、各キャリアの取り組みも注目です。

ちなみにau one Marketってどうやって配布しているんだろう？Android Market以外からのインストールには「提供元不明のアプリ」にチェックが必要だという認識だけど、au one Market要らないのかな？情報求む。

OSのバージョンごとのシェアのグラフも興味深かった。OS1.6以下のシェアはすでに4%程度しかないため、「対応は切っていいと思います」とのこと。OS1.6のブラウザはやっかいですからね･･･(HTML5未対応だったり)。ただ、日本でのシェアとは確実に異なる^[2]だろうからそれを含めた判断をどうすればいいのか気になるところ。

切っても切り離せないAndroidアプリとクラウドとの連携
– 華井 雅俊@MasatoshiHanai さん

スミマセン、細かいところはよくわかりませんでした＞＜
興味が沸いたのはC2DMについて。iOSのNotificationは「情報」を送るだけなので、それからアクションをとる(メールアプリ開いたり、とか)のはユーザが能動的に操作する必要がある。一方、AndroidのC2DMは「命令」も送ることができるため、(PCで観ているURLを端末のブラウザアプリを起動して表示する、など)端末にアクションを取らすことができる。

これは似て非なると思います。できることの幅も全然違う。iOSユーザのワタシとしては、PCで見てるサイトのURLをiPhoneにPushすることは思いついても、iPhoneのブラウザ立ち上げて表示させてしまうことまで想像できませんでした。想像できる幅も変わってくる。

ただ、このセッションを聴いて感じたのは、Web制作者の視点だと、このお話を聴いて参加者がどんな行動をとればいいのかわからなかった、というのが正直なところ。Web制作サイドとして「夢があるなぁ」と感じるだけ以上に、僕らにできることがあるのかという点で、専門家の方の考え方を聞きたかったな。

Android技術者とのデザイナーとのハッピーな出会い
– 杉本 札彦@yoshi_rr さん

感動した。これほどエネルギーで満たされたプレゼンを久しぶりに聴いたな、と思いました。熱意とエネルギーに満ちあふれていたお話でした。ざっくりといえば、デザイナーはプログラマと協力してAndroidアプリつくろうよ！今がチャンスなんだよ！というお話でした。印象に強く残っているのは以下の3つ。

• 「技術者を一方的に搾取するな」
• Androidのインテントは、「汎用的」「標準的」「拡張的」な取り決めであり、これがインターネットの黎明期と同じ可能性をもたらす
• すべてのチャンスは「かっこいいAndroidアプリから始まる」

特に3つ目。iPhoneによって、売れる・使われるアプリの条件に「かっこよさ」が加わったのはやっと認知されるようになってきましたが、「かっこよさ」はプログラマでは表現できない。デザイナーが必要なんです。逆にかっこいい見た目は作れてもデザイナーではアプリにできない。プログラマが必要なんです。

ビジネスとして大きく飛躍するAndroid OSのチャンスに乗るには、デザイナーと一緒にかっこいいアプリを作らなくてはいけない、と。

聴いていてすごくワクワクしました。

iPhone・AndroidアプリのUI・挙動はどこが違う？
– 石野 和明@akaitembin さん

iPhoneとAndroid端末のハード的な違いをおさらいした上で、「livedoor ニュース」では、iOS、Android向けにそれぞれの特性を考慮してUI設計をしているですよ、というお話でした。左右に眺めながらの比較はすごく参考になりました。

以下、気になった点をまとめました。ちなみに、太字は私のコメント。

Android向けサイトのはまりポイントと脱出法
– 執行 大介@mattari_panda さん

今回の中では最もCSS Nite系でノウハウ豊富なセッションでした。てことで箇条書きでざっとメモを転記します。太字は私のコメント。

• とあるサイトで計測したら、OS1.6の訪問率は1.4%だった。IE6よりも低い。
• AndroidはDroidフォントという大変ざんねんなフォントがデフォルトだが、これはどうしようもない
  国内モデルでは、UDフォントやモリサワ、AXISなど質の高いフォントをバンドルしていますね。
• Androidの「ブラウザ」アプリは、Webkitベースだが、Chromeではない。過信するとハマる可能性も
• 数字の羅列を勝手に電話番号と認識してリンクを張ってしまう。しかも端末ごとに挙動が違う。<meta name="format-detection" content="telephone=no">をして、個別に<a href="tel:番号">番号</a>する。
• -webkit接頭辞は付ける。今後のことを考えて接頭辞なしのも含める。順序は「接頭辞あり、なし」で記述する
• Androidでは、-webkit-tap-hightlight-colorが悪さをすることも。かといって消すとどこをタップしたか認知できない。
• -webkit-box-reflectはiOSとAndroidで記述方法が異なる
• AndroidのJavaScriptには要注意
  • よくわかんないところでresizeイベント頻発(ページが開いたとき、キーボード出したとき(数回出る)、変換候補でたとき)
  • touchイベントがiPhoneに比べて全然で取れない。だいたいiPhoneの1/3、端末によってバラバラ

個人的には、Androidは、JavaScriptの処理がしょぼいところが困ります。アプリっぽくJSで作り込もうとすると端末ごとのパフォーマンスにものすごく引っかかってしまい、結局端末によっては使い物にならなかったりする。これは最後のjQuery Mobileのお話にも関係してきますが。

Android向けサイト制作のあれこれ：viewportについて
– 高津戸 壮@Takazudo さん

viewportは奥が深いなぁと。とくにスマートフォンになって、dpiに気を遣わなくてはいけなくなって余計混乱を招いている気がする･･･。
viewportについては、現実的に利用するスニペットとしたら3つとのこと。

1. 固定 : PC向け

<meta name="viewport" content="width=xxx" />

2. リキッド : オススメ

<meta name="viewport" content=
	"width=device-width, initial-scale=1" />

3. リキッド(ズーム禁止) : 一番使われている

<meta name="viewport" content="width=device-width,
	minimum-scale=1, maximum-scale=1" />

ここまでviewportについてわかりやすくまとめたスライドもないと思いますので、後で要チェックですよ！

ちなみにCSS Viewportってどうなったんでしたっけ？

Androidサイト制作に jQuery Mobileを活用しよう
– たにぐち まこと@seltzer さん

トリは、スマホ対応サイト制作のバイブル「マカロン本」の著者のたにぐちさんによるjQuery Mobileの紹介。

冒頭に「ジャパネットたにぐち」と鷹野さんのご紹介されていましたが、結構話すスピードが速い(これはボリュームによる所もあると思いますが、)割に、たいへん聞き取りやすく、デモがたいへん美しく、すばしかったです。zen-cordingを使いこなされてるところに惚れました。

話の趣旨としては、

• スマホサイト対応は、とっても手間がかかります。(iOS, Android, スマホらしいデザイン、スマホらしいUI･･･)
• jQuery Mobileを使えば、iOS, Androidだけでなく、Pad端末などのマルチデバイスにこれ1つだけで対応できるんです！
• しかもHTMLを書くだけで見た目も動きも表現できます！
• HTMLの書き方に若干の作法があるけど、ソース観ればわかるレベルです。Web制作者の方なら問題ありません！
• 送料と分割手数料はたにぐちさんが負担します！

という、うれしいライブラリとなっております。、と言いたいところですが現実は･･･

• デザインは「それなり」。変更するのがしんどい=だいたいみんな同じ見た目になる
• 動きも若干不安定なときがある
• 作法に従って書くHTMLがあまり構造的ではない
• Androidの標準ブラウザでは(端末次第で)「使えない」レベル

最近アルファ版からベータ版になったばかりですので、まだまだこれからなんですが、十分期待できる可能性を持っているライブラリだとは思います。たにぐちさんも「モックアップ・Webアプリに使うのがベスト？」とまとめられていました。

個人的にはここまでいたれりつくせりじゃなくて、基本的な動きとかパーツをまとめた単なるjQueryの1プラグインがほしいなぁ。

まとめ

軸は「Android」で、アプリケーションからWebサイトまで広範囲をカバーしたセミナーでした。普及しつつあるといっても、やっぱりAndroidはまだまだこれからだと思う。
「Webサイトを表示する」上では、フォントとかブラウザとかまだ色々残念な感じです^[3]。しかしながら、市場はこのとおり待ってはくれないので、ドンドン対応してノウハウを溜めていく必要があるのが現実のようです。

個人的には「Android UIデザインのパターン」についてじっくりお話をきいてみたい。iOSの標準アプリ(Apple謹製)と違って、Androidアプリに関してはまだまだ「お作法」が確立していないように思えます。Androidの標準アプリみてもなんかパターンとかよくわかないところが多いです^[4]。

余談ですが、最近「iPhoneアプリ設計の極意」買いました。これから読みたいと思います。

今年の抱負

今年も昨年と同様Web編とプライベート編に分けて書きたいと思います。

昨年の反省会

2010年初エントリに書いたことの反省です。

2010年振り返り

2010年は、2月のサイトのHTML5リニューアルにはじまり、だいたい1ヶ月に1エントリ弱のペースでした。コーディングコンテストで賞をいただいたりと、個人的にこの年のキーワードはHTML5でした。

また、プライベートではついに就職するという人生の大イベントがありました。主にこっちに引っ張られて更新されてなかったとも･･･。埼玉に引っ越してきたので、CSS Niteには比較的気軽に数回ほど参加することができましたし、仕事かたわら産業技術大学院大学で人間中心デザインを学び始めました。こちらのキーワードは間違いなく就職と人間中心デザイン(HCD)だったと思います。

来年は「HCD」の割合がもっと大きくなる年になると思っています。HCD関連では、会社の人間としての自分とWebでのversionfiveが一緒になって活動しているところが昨年までの自分と違うところです。

Webはどうなるんでしょうね。今年はHTML5と共にスマートフォン対応サイト元年だったと思っているのですが、この辺りがさらに盛り上がるのかな(新年早々CSS Nite LP13もありますしね)。

好例の?2010年のエントリのトップ10

括弧内は昨年の順位です。

1. Macを初めて買った人にオススメするフリーソフト (1)
2. HTML5 で試しに Web ページを組んでみた (改訂版) (2)
3. HTML5 で試しに Web ページを組んでみた (4)
4. デフォルトブラウザは Safari でいいかもしれない (3)
5. CSSでボックス要素を画面中央に表示させてみる (5)
6. CSS3 で新しいボックスレイアウト (8)
7. 「iWPhone」でWordPressをiPhone/iPod touch対応に (6)
8. iPhone/iPod touch用のWebClipアイコンの作り方 (7)
9. SynergyKMの設定でつまづく (New!)
10. 細かい新機能で大きく進化した Keynote ‘09 (10)

残念ながら、2010年に書いた記事はトップ10に現れませんでした(ちなみに2010年に書いた記事では、13位に「CSS Nite LP9 第2回コーディングコンテストに応募しました」がきています)。

昨年順位を見てみても、このサイトを代表する記事が固まってきた気がしますね。特に上位2記事は他を圧倒しています。去年4位だったHTML5に関する記事が、Safariのプラグインを紹介する記事を抜いて3位になったのは、HTML5の話題で盛んだった2010年ならでは。この小さなサイトの中でも伺えます。

3年前の記事が未だによく読まれていることは大変うれしいことですが、来年はこの上位だったコンテンツを最新版にアップデートしたいところ。できるかなーー

サンプル

下の画像の上にポインタを持ってきてみてください。

コード

<a href="#" class="viewMore">過去の記事一覧を見る</a>

a.viewMore {
  display: inline-block;  /*blockでもOK*/
  overflow: hidden;  /*テキストを拡大したときに崩れないように*/

  width: 142px;  /*viewmore-alpha.gifの横幅*/
  height: 20px;  /*viewmore-alpha.gifの縦幅*/
  line-height: 20px;  /*viewmore-alpha.gifの縦幅*/

  background: transparent url(viewmore-alpha.gif) no-repeat 0 0;

  color: rgba(255, 255, 255, 0);  /*文字色を透明に*/
}

a.viewMore:hover {background-position: 0 -20px;}

/*選択したときの文字色を標準に戻す。
注：バラバラに書かないとFirefoxがちゃんとパースしません*/
a.viewMore::-moz-selection {  /*for Firefox*/
	color: #000;
	background-color: #b5d5ff;
}
a.viewMore::selection {
	color: #000;
	background-color: #b5d5ff;
}

かんたんなしくみ

しくみは本当に簡単で、hover時にtext-indent: -9999px;などで飛ばしていた画像をcolor: rgba(255, 255, 255, 0);と置き換えて常に透明にしただけ^[1]。

これだけの違いでなにがいいかといえば、テキストが選択できてコピーできることです。これまでのtext-indentで飛ばしていた方法はもちろん、HTMLに直接img要素で画像を記載する場合でも画像にあるテキストをマウスで選択してコピーすることはできませんでしたが、この方法なら画像の文字で検索したかった時も比較的楽にできます。
僕としては、常にテキストを飛ばしている状態よりいいのではないかと考えている途中です。

また、当然rgba()が使えないブラウザ(IE7以前とか)では利用できません^[2]。よって、この手法も前回同様IE6, 7がなくなり、ユーザに認知されるほど採り入れられる手法になったときに、力を発揮する手法であると言えますね。

書きたいなーと思っているコト

Webセミナー

• CSS Nite LP, Disk 11「Designer’s High」Part 1
  結構前のセミナーなので、もはや書けない･･･
• CSS Nite LP, Disk 12「Designer’s High」Part 2
  以前までの網羅的なレポートはやめて、2010年のデザイントレンドのところだけまとめておきたいところ

人間中心デザイン関連

• コンセプトデザイン方法論：早川さん(リコー)
• 情報アーキテクチャ設計論：長谷川さん(コンセント)
• 情報デザイン教育研究会：浅野先生(横浜デジタルアーツ専門学校) 主催

マークアップネタ

• HTML5 で試しに Web ページを組んでみた (改訂版2)
  仕様が若干変わっているので修正したい
• 画像置換ネタ
  実用性あるのかわかんない
• before, after疑似要素ネタ
  完全に思いつき。実用性ゼロ

気になった作品

ARが拾えません

今回の企画の1つとして、GnGというiPhoneのARアプリケーションと連携したARイベントというものがありました。
この中に、スタッフの背中に印刷されたARマーカーを読み取ろう、というものがあったのですが、スタッフの人はフツーに仕事で歩いてて話しかけにくいし^[1]、肝心のマーカーがTシャツのシワで読み取りにくいし、そうこうしているとなんかスタッフの人の雰囲気わるくなるし･･･。おもしろい試みなのにたいへんビミョーな気分になりました;(

スタッフとコミュニケーションをとるのが目的の企画だとしたら、もーちょっとなんとかなった気がします。それが目的でなかったら、ノミネート作品の中にこっそり設置するくらいがいいと思います。