[3176] Galaxy Nexus買ってみた......

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［26］
デザイナーはサーバサイドとフロントエンドとうまく会話するべきだ

秋葉秀樹
< https://bn.dgcr.com/archives/20111219140300.html
>
───────────────────────────────────
こんにちは、デザイナーやってます秋葉です。最近映像や3DCGの制作をやってないので、ちょっとウズウズしています、何か作りたいです。LightWave10が欲しくてしょうがないです（すいません、本題とは関係ないです）。
< http://www.dstorm.co.jp/dsproducts/lw10/index.html
>

さて、Webサイトのユーザインターフェイスに関わるデザイナーさん、エンジ
ニアさん、さらにはディレクターさんやHTMLコーダーさんの意識がもう少し必
要だと思った経験をひとつ、お話したいと思います。

●現場では古い考えのディレクタが意外と多く感じられた
フロントとサーバサイドへの理解度

分かりやすい例でいうとお問い合わせフォーム。「確認ボタン」が押された後、未入力がないか？　半角のところ、全角が混ざっていないか？　など行う「バリデーション」という作業が必ずといっていいほど入りますよね。

5年ほど前の多くのサイトでは、サーバーサイドのプログラムで処理をしていたように思えます。例えばPHPなどを使ったものですね。

しかしここ近年では、フロント側でバリデーションを行うことが今や多くなりました（統計は取っていません。あくまで僕の現場仕事の経験からです）。JavaScriptを使って行うので、画面遷移がいらないからユーザ側からしても瞬時にミスが分かりやすくなるのです。

状況によって、JavaScriptでHTMLを追加したり削除したり変更したりが出来るので、ユーザがフォームに何か文字を入力したタイミングで「NG」とかの文字を表示することなども可能です。

しかし、フロントばかりで処理をしてしまうとブラウザ側に色々な負担がかかりやすくなり、果てにはユーザにイライラ感をつのらせてしまいます。場合によっては、PHPなどのサーバーサイドプログラムに処理を任せた方が安定する、という考え方をいかに上手に切り分けるか？　が、ポイントになってくるケースもあるようです。

「この部分はJavaScriptで処理をするけど、ここの部分はPHPに処理をお願いしてデータを返してもらおう」と、どこでどちらのプログラムに処理をお願いするか？　を上手に設計することが、ユーザに向けてももちろん、制作現場を円滑に動かす、ひとつの重要な要素になっていることを感じています。

ちょっと前は、サーバーサイドでPHP、最近ではRubyで開発している現場に、僕がフロントエンドで入ったとき思ったことですが、いまだにサーバサイドの有利な部分とフロント側で行った方がいい部分を、最初の設計の中でしっかり切り分けていなくて、後で大変になっている現場もあるようです。

●UIに関わるデザイナーは必ず理解するべき
「イベントドリブン」という考え

これは実際、本業のエンジニアさんから出た言葉なんですが、「サーバーサイドと、フロントのイベントドリブンへの理解が出来てないプロジェクトが多すぎて、最近問題になってきている」という問題提起。

【MEMO】「イベントドリブン（イベント駆動）」とは、ユーザが何かアクションを起こすのを待機させている状態のなかで、「ユーザがボタンを押す、文字を入力する」など、ユーザのキッカケ（イベント）をもとにプログラムを処理（駆動）させることを主に言います。JavaScriptはこれが得意ですね。

プロジェクトマネージメント役が、このあたりを理解しないでプロジェクトを進めて、後で仕様変更していて大変になっている現場を最近よく目にします。「このボタンが押されたときに、処理をサーバに渡すのか？　フロントに渡すのか？」という設計はもとより、一旦フロントに渡してサーバに投げる、という方法もあり、そのへんで「出来ること、出来ないこと、やったほうがユーザフレンドリーだ」という判断は、フロントエンドとサーバーサイドのエンジニアも含めてしっかりとした「話し合い」が必要です。

●プログラマ同士だけの会話ではもはや成り立たない
Webサイトやアプリ制作事情

フロントエンドとサーバーサイド上でうまくやり取りを行うには、プログラマ同士の会話だけでは意味がありません。理由は単純で、プログラムへ処理を渡すタイミングはユーザの何らかの行動が多く、それはデザインから大きく問題が関わってきます。

デザイン（とくにWebやインターフェイスデザイン）とは、色やカタチだけではなく、ユーザによってインプットされるすべての行動の窓口を設計することを意味します。

もうひとつ付け足す言い方をすると、プログラムに処理を渡せるデザインでないと、それはデザインの役割を果たしていない、ということになります。

つまり、HTMLの構造がシステムに影響するので、Webデザイナーは、システムエンジニアや全体を設計する人としっかり会話が出来ないと「修正」が発生します。この修正は大規模なシステム開発になるほど、危険をはらむことはいうまでもありません。

●ビジュアルデザイナーももっとシステム設計に参加すべき

これはもうデザイナーとしての僕は当然と考えています。デザイナー的に「これは使いやすいし、見た目もいいぞ！」と自身を持って提案して採用されたインターフェイスデザイン。しかし、状況によって内部でどのような事が行われているか、理解しないとハマりやすいケースもあります。

たとえば、ボタンが押された時、フロントからサーバに処理を投げて、返事が戻ってくる間、そのボタンはもちろん、他のUIに対してロックをかける、つまり無効化しないといけないケースがあったりします。それがユーザに対し、「押せそう」に見えるのはNGだったりします。

さらにこのレイアウトがフロント側、あるいはサーバから帰ってきた値をもとに、どう変化していくのか、を理解する必要があるのです。

システム全体に目を通すのはとても大変ですし、量によっては無理が生じます。ですが、自分が受け持つデザインのインターフェイスの一つ一つは「どう処理されるのか」を理解しておきながらデザインを起こす必要は今後もっと増え続けていくでしょう。

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［300］Android編
Galaxy Nexus買ってみた......

古籏一浩
< https://bn.dgcr.com/archives/20111219140200.html
>
───────────────────────────────────
Androidタブレットがあまりよろしくない出来だったのですが、まあそんなものだろうと予想はついてました。予想を裏切らない駄目さ加減に納得しつつ、本命は12月2日に発売された最新のAndroid携帯「Galaxy Nexus」であろうと考えていました。

このGalaxy Nexusは最新のAndroid OSを搭載しています。OSのバージョンは4。現在多く出まわっているAndroid携帯のバージョンは2.x、Androidタブレットは3です。この2つを統合したものがバージョン4になります。バージョン2と3を足すと、5でなくなぜか4という計算になるわけです。

まあ、Androidタブレットはバージョン4の布石というか、単なる実験台だったということになります。Android 2と異なるのは、ハードウェアキーが減っていることです。戻るキーやホームキー、メニューキーがなくなっています。あるのはボリュームボタンと電源ボタン。

NTT Docomoの人に、他にGalaxy Nexus買った人はいますか？　と聞いたところ「いません」と回答されました。近くにEPSONがあって数千人規模で人がいますが、見向きもされないということなんでしょうか。会社で購入するからよいのかもしれませんが、個人で購入する人自体非常に珍しいようです。NTTの人もGalaxy Nexusは薦めていませんし、Galaxy S2 LTEかAQUOS PHONE（こっちの方が多くでていると言ってた）が、お薦めのようでした。

Android 4からは、ようやく画面キャプチャーが簡単にできるようになりました。Galaxy Nexusは「電源ボタン」と「ボリュームボタンの音量下げる側」を同時に押し0.5〜1秒待ちます。すると、画面がキャプチャーされて保存されます。とても簡単になりました......というのは半分嘘です。

実際にやってみるとタイミングが難しく、ボリュームが下がるだけだったり、電源を切りますか？　といったメニューがでます。Galaxy S2だと非常に高速で手軽に画面キャプチャーできたのですが、残念ながらGalaxy Nexusでは退化してしまったようです。

Android 4では、HTML+JavaScriptだけでカメラ画像を取り込むことができるようになりました。Canvasに転送してしまえば、後は自由に処理できます。加工した画像も読み出せるようになったので便利になりました。これで、ようやくiOS4.2くらいの機能が整ったことになります。ちなみに映像やマイク録音もできますが、こちらは手軽に再生とかできず難儀中です。

Android 4なら処理が高速になったということで、jQuery Mobileを使ってページを作成してみました。

jQuery Mobile
< http://jquerymobile.com/
>

jQuery MobileはiOSでは非常にきれいに動作します。ところが、Android 2.x/3.xでは秒間1〜3コマくらいしかアニメーションしないので、動きがガタつく以前に画面が切り替わるような感じです（アニメーションすらできないこともある。iPhone 3Gより低速）。低速というのもありますし、画面がちらつくことが多々あります。他にもおかしい部分はありますが、Androidなので仕方ないと思ってあきらめるのが吉です。

他のUIフレームはどうかと思って、iUIも試しにGaalxy Nexusで動かしてみました。

iUI
< http://www.iui-js.org/
>

まだ、α版ということもあるのでしょうけど、Galaxy Nexusではタッチした場所よりも、かなり下をタッチしたことになり、まともにボタンを押すことができません。Galaxy S2（Androdi OS 2.3）では正しく動きますが最新のGalaxy Nexusでは駄目という状態です。

Galaxy Nexusは他にも、回転させると設定した画面の解像度を忘れてくれるため、指定した表示サイズとは違ってしまうというバグもあります。画面の回転を禁止すればよいのですが、探せばかなり多くの不具合がありそうです。動作速度も画面描画が速くないので、同じプログラムを実行してもiPhone 4Sの方が非常にスムーズに見えます。

ということで、Android 5あたりに期待するのがよいかもしれません。速度も2倍くらいになれば、かなり快適に動くと思います。あと、UIが不統一で肝心のメニューを出すボタンがアプリによって異なっています。

標準のブラウザではメニューを出すボタンが右上にあり、片手で操作するには無理があります。でも、GMailは右下にあったり......。かと思えばギャラリーは右上で、さらにアイコンが何を示しているかが分かりにくいという......。

Windowsより前のMS-DOSのアプリケーションみたいな感じでしょうか。といっても、古すぎて分かる人の方が少ない気もしますが。

ということでクリスマス前ですが、よいお年を。
来年もよろしくお願いします。

【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

Galaxy Nexus。いいところも書いておくと、多少バッテリーの持ちはよいかなといったところです。さすがに原稿のストックがなくなってきたので正月には書きためておかないと......。

・Google API Expertが解説する Google Maps APIプログラミングガイド【発売中】
< http://www.amazon.co.jp/dp/4844331167/
>

・jQuery Mobile 1.0例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0/
>

・CSS3（スタイルシート Level 3）例文辞典
< http://www.openspc2.org/reibun/CSS3/
>

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>

・10日で覚えるHTML5入門教室【増刷になりました。補習講義でiOS5/Android 4に対応】
< http://www.amazon.co.jp/dp/4798124184
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［番外］
2012年はコレに注力します！ 〜2011年のWeb業界総括を踏まえて〜

森　和恵
< https://bn.dgcr.com/archives/20111219140100.html
>
───────────────────────────────────
こんにちは。森和恵です。もう師走ですね。みなさんの今年はいかがでしたか？...と年末は一年を振り返る時期ですね。忙しい時期ですが、これも大切なことです。今回は、Web業界の2011年のトピックスと、来年に向けての話を私の目線でお話します。

●スマートフォンやタブレット対応

今年は、スマートフォンの普及が更に加速した年でした。「スマートフォン＝iPhone」だったのが、いつの間にかAndroidの方がOSのシェアが上回ってしまいました。これまで一社独占だったのが、間口が広がったことで更に伸びたのだと思います。
< http://www.impressrd.jp/news/111108/kwp2012
>

タブレット端末も多数発売され、徐々にユーザー数が増えています。日本での普及はまだ少ないですが、「メールやネットが使えればいい...」というライトユーザーのなかには、パソコンの代わりにする人も増えているそうです。
< http://japan.zdnet.com/mobile/analysis/35005617/
>
< http://www.nikkeibp.co.jp/article/column/20110722/278565/
>

じっさい、電車やカフェなどの日常シーンでも、スマートフォンやタブレットを利用する人を頻繁に見かけるようになり、調査結果を裏付けているように思えます。

また、今年のWeb系セミナーの傾向や人気度合いから、制作者側もスマートフォンやタブレット対応のWebサイト制作技術への関心が高いと感じられました。恐らく、これらの普及に伴って制作の現場でも対応が始まっているからなのでしょう。
< http://sp-web.jp/
>

今年は、スマートフォンやタブレット対応を「みんなと同じように、とりあえずやってみた」という初期段階でしたが、来年はもっと実用的・戦略的なサイトが出てくるのでは？　と予想しています。単にパソコンのサイトの置き換えではなく、機器の特性や利用シーンに合わせたコンテンツの見せ方を考える段階がくると感じました。

種類も出揃い、ユーザー数も増えて、スマートフォンやタブレットは「使える」ツールに成熟しました。次はコンテンツを提供する側が、「どう使うと役立つか、楽しいか」の定番ルールを決める番なのかなと思います。

●HTML5とCSS3をいつ導入するか？

今年は、書店に行くとHTML5やCSS3の新刊がずらっと並んでいましたね。W3Cの仕様策定もある程度固まり、各社ブラウザの対応も整ってきたことで、実践段階に入った技術だと広く認識されつつあるのでしょう。
< http://kachibito.net/web-design/5-html5-gallery.html
>

しかし、新しいことだけに誤解も多くて「どう使うのが正しいのか？」がいまひとつハッキリしないなと思っている人も多いのではないでしょうか？

「HTML5やCSS3では○○ができます」という、ビジュアル面で派手な部分が目立ってしまい、その本質やなぜ新しくこれらが生まれることになったのか...という基本概念がなおざりにされていたような気がしています。

景気も下向きのわりには仕事も忙しくてお金も時間も取れない中、「今すぐ必要な技術」でなければ身につける余裕がないから、もっと後でいいや...となってしまう人も多いと聞きます。

一通り勉強した立場からみると、これから数年を見据えると導入しておくべきなのに...と思うと、もったいないなぁと感じます。既存サイトの更新ならともかく、新規サイトを作る場合は特に。なぜなら、HTML5とCSS3の普及でマークアップの変革が確実にくると思うからです。古い手法でこれから先を続けるのがよいと思わないからです。

とりあえず、HTML5とCSS3を使う「必要性」「メリット」「デメリット」を明確にする必要があると思います。その上で自分はどうすべきか？　を考えると、導入の方向性が見えてくるかもしれません。HTML5とCSS3は、けっして早すぎる技術ではないと思います（自戒もこめて）。

●FacebookなどのSNSの利用

mixi〜Twitter〜Facebookと、ここ数年のSNS利用も飛躍的に増えています。利用者数も利用時間も多くなりましたね。
< http://www.netratings.co.jp/news_release/2011/11/sns-report-Oct-2011.html
>

どのSNSもそれなりに利用しましたが、どれが良い悪いというより、自分の回りの人たちがどこに集まるのかによって、利用頻度が変わっていったような気がします。特に今年はFacebookの利用が増えて、プライベートも仕事もなくてはならないツールとなりました。

利用の増加にともなって、企業の集客ツールとしての側面も強くなりました。各SNSの企業アカウントや企業ページはもちろん、自社ページへのSNSボタンの設置も増えてきています。

増えた反面、ユーザーとのコミュニケーションの失敗や、うまくプロモーションに結びついていない例も聞くようになりました。例えば、「親しみを出すためにフレンドリーにつぶやいていたことが、企業としては非常識とクレームが来た」「自社ページにつけた〈いいね！ボタン〉が0件のまま...」「プロモーションをしてみたけど応募がほとんどない」などなど。

SNSマーケティングも「とりあえずやってみた」から、ユーザー動向を確認し、どのSNSに注力するか？　何時どんな手段やルールで使うか？　など、戦略が必要な時期にきたのではないかと思います。

●2012年はコレに注力します

スマートフォン＆タブレット対策も、HTML5＆CSS3導入も、SNS対策も...これまで新しい、流行とされていたことが「あたり前」になるのが来年からではないかと思います。目先の新しさだけではなく、実践・戦略的に使っていかないといけないんだろうなと痛感しました（今まではどちらかというと使われてた、振り回されてた観がありましたよね）。

個人的なことですが、来年からぼつぼつと自主開催的なセミナーを計画中です。また、自身の「教える」というコンテンツをいろんな形で提供しようとも思っています。そんなサービスを提供するサイトを新しく立ち上げる予定ですが、その制作や運営でこれらの技術を実践・戦略的に使って体感してみようと思います（依頼された制作案件じゃないので、好き放題実験できますしね）。

そのノウハウをまとめ、また「教える」ことで、広くみなさんに提供できればと思っています。「これを知りたいんです」的なセミナーネタがありましたら、ぜひ下記からご意見ください。
< http://bit.ly/gIHFfu
>

...ということで、今年のデジクリ登壇は終わりです。
さて、次回は、Facebookの話など。新しいタイムラインや秋に導入された新機能などをまとめてみたいと思います。
ではまた来年。よい年の瀬をお過ごしください。（＾θ＾）

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu
>

【 森和恵 r360studio　〜 Web系インストラクター 〜 】
< site: http://r360studio.com
>
< twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>

利益追求...も、Webサイト運営の重要な役割ですが、方法が明確ではなく、簡単にテクニックが身につくものではありません（私もそうですが、制作側の立場だとなおさら）。2月4日、大阪で開催される「Webの運営とマネタイズ」セミナーでは、そこのところを現場のプロに教えてもらうチャンスです。私も参加するのが楽しみです。
< http://kokucheese.com/event/index/22747/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（12/19）

・16日、野田首相が福島原発が「冷温停止状態」に達したとして、事故の収束を目指した工程表のステップ2を完了したと宣言した。記者会見で「事故は収束した」と自分の手柄のように言っていたが、記者の「収束という言葉は被災地では容認できない空気が強い。違和感はないのか」との質問には直接答えられなかった。今もなお原子炉内の状況把握は難航している。いわゆる「冷温停止」と今回の「冷温停止状態」はまったく違う定義である。発生時の危機的状況をかろうじて脱したとはいえ、まだ途中経過であり、収束といえる状態にはない。さらに除染、健康管理、賠償、避難住民の帰還などの課題が山積するなかで、あっさり用いる言葉ではない。一区切りがついたかのような印象を与えるパフォーマンスは国民に対する欺瞞である。米CNNテレビ電子版では「日本政府は画期的な出来事としようとしているが、現実は違う。過去、約半年間の原発の安全性に関する状況は基本的に変わっていない」などと懐疑的な見方を伝えている。そもそも「収束」とはどういう意味か。「おさまりがつくこと。おさまりをつけること。（岩波第四版）」である。なにひとつおさまっていないではないか。ところで「収束」と同じ発音で「終息」がある。新解さん（新明解国語辞典）によれば「［やんでほしいと思っていた混乱や状態］などがすっかり終わること」である。例：野田政権が終息した（笑）（柴田）

・没ネタからサルベージ。以前テプラSR3700Pを買ったと書いた。本当は別のラベルプリンターを買おうと決めていたが、このラベルプリンターのカートリッジのラインナップから上質紙シールが消えてしまった。このメーカーは宛名印刷用プリンターを発売していて、そちらに集約してしまったようだ。ラベルプリンターが欲しい一番の理由は、もちろん整理。メインはクリアファイルの内側から、透明シールに印刷した鏡文字を貼るため。もうひとつの理由は宛名印刷。請求書類は窓開き封筒をずっと利用している。お手伝いしてくれていた人が、封筒の宛名と中身を取り違えてから、二度と同じミスをしないようにと窓開き封筒に。が、これを利用できないような場面がある。封筒のサイズのためだったり、送付書類が相手方のフォーマットのもので住所欄がなかったり。手書きだとちょっと、と思うが、封筒に直接印刷できない場合。シート状の宛名ラベルを使うほどではない（1枚の印刷のために何度もプリンターに通したくない）、いちいちはがしやすいフィルムに貼付けての印刷も、とか考えてしまい、一枚だけ印刷できたらいいよなぁと考えていたのだ。で、ラベルプリンターの上質紙シール。感熱紙だからインク不要。Macなため最大印刷幅24mmのSR3700Pしか選択肢はなく、ギュッとした表示にはなるが、とりあえず住所ラベルの機能は果たす。フリーや小さな会社なら、36mmぐらい（24mmでも）の印刷ができるラベルプリンターで十分かもよ〜！／金正日死去！（hammer.mule）
< http://www.kingjim.co.jp/products/tepra/detail/_id_SR3700P
>
テプラSR3700P
< http://www.kingjim.co.jp/products/tepra/detail/_id_SR3900P
>
テプラSR3900P
< http://www.kingjim.co.jp/products/tepra/cartridge_pro/09
>
上質紙ラベル。オートカッターつきのプリンターで