ウェブ技術ネタのままとめ

異なるマークアップの意味

コンテンツを校正・編集・デザインするという意味合いが Web になると少し異なるのですが、この感覚が多くの方と共有されないまま 2012 年を迎えています。

従来の、つまり紙における校正・デザインは一種の独裁支配といえます。

紙によるコンテンツ配信は、発信する側が最適と考える見た目を、完全な形で読者に届けます。読者が扱い難いと思おうが関係ありません。紙におけるコンテンツ配信の質は、校正・編集そしてデザインにおいて作られた厳密な世界を届けれるかどうかにかかっています。

しかし Web は、配信者側による独裁支配ではありません。骨組みは設計されているものの、あとは読者が自由にコントロールできます。文字サイズが小さいと思えば、自由に大きさを調整できます。白色背景が目にキツいと思えば、色を反転させることもできます。とにかくじっくり読みたいと思えば、Instapaperのようなツールを使ってデザイン要素をすべて省いてコンテンツを消費することも出来ます。

従来の「支配する」校正・デザインの感覚をそのまま Web へ適応することは出来ません。もちろん、コントールをすることは出来ますが、発信者側がコントールすればするほど、コンテンツが届く利用者の数は減ります。Webデザインにある駆け引きとコダワリでも紹介しましたが、サイトデザイン全般だけでなく、コンテンツにもスタイリングと柔軟性の駆け引きがあります。

ひとりでも多くに、そしてひとつでも多くのデバイスにコンテンツを配信するにはマークアップは無視出来ない存在ですが、ここでも言葉の壁が存在します。

そもそもマークアップ（markup）とは、原稿用紙に印刷に関する指示の記号を書き加えることを意味しており、主に文章の各部分にどのようなスタイル、書体、サイズを適用するかの指示が書くことを指します。これは HTML というマークアップ言語で使うマークアップの意味合いとは大きく異なります。しかし、印刷デザインの感覚で HTML というマークアップ言語を捉えると、見た目を制御するために使われるものと考えても不思議ではないわけです。マークアップが印刷機になっているのは、こうした言葉のギャップがあるからかもしれません。

しかし、今後様々なデバイスを通して多くの方にむけてコンテンツを配信していくのであれば、今までのような見た目のコントールだけのマークアップは不要です。そして、より早く適確に配信するには、校正・編集している方自らマークアップをしていく必要性もあると思います。

見た目ではなく意味合い

WYSIWYGは、印刷をはじめとした従来の編集・校正感覚で見た目を調整しやすいものの、見た目に囚われてしまい、コンテンツの意味を見失いやすくなります。文字サイズを大きくしたり、太文字にするだけで、いかにもヘッダー文字のように見せることが出来ますが、実際は異なります。デバイスやソフトウェアによってヘッダーと認識できないので、操作に支障がでてきたり、読み難くなる可能性もでてきます。

WordPressのWYSWYG: 現在出回っている多くの CMS には高機能のビジュアルエディタが実装されているものの、コンテンツパブリッシングの視点から見ると重荷になることもあります。

Microsoft Wordを利用している方でも、見た目に囚われて、意味合いが理解しにくいコンテンツになっている場合があります。フォーマットを使わず文字サイズを変えている人、リストがあるけど「■」「●」といった記号を使う人、横線を挿入する場合も「＿＿＿＿＿」のような文字記号を代わりに使う人・・・こうした使い方をしている人は後を絶ちません。

媒体を限定し、そこでの見た目が良いのであれば、どういったマークアップでも気にすることはないでしょう。しかし、ひとつでも多くのデバイスにコンテンツを配信したい、ひとりでも多くの人に読んでもらいたい、未来に出てくるであろう未知のデバイスにも対応したい・・・という想いがあるならば、マークアップを無視するわけにはいきません。

校正・編集する人にマークアップを覚えるよう呼びかけるのは、無茶なように聞こえなくはないですが、不可能ではないと思います。

極めるのは大変ですが、HTML はプログラミングの知識がなくても書ける簡単な言語です。コンテンツに関わる部分に絞れば、すぐに習得できます。マークアップをすることで、よりコンテンツがどのように書かれているべきなのか、どう見られるのかを想像できるようになるはずです。

そもそも、校正や編集の仕事は見た目を整えることだけではありません。書かれている文章の意味を理解し、文章に命を吹き込む作業だと思います。そのひとつとして、スタイル、書体、サイズを調整するという作業があったと思いますが、Web におけるコンテンツ配信では、見た目のだけではなく、文章の意味付けをどうするかがより重要になってきます。文章に命を吹き込むという、校正・編集の仕事からマークアップはそれほどかけ離れてはないはずです。

In this talk from YUIConf 2011, YUI engineer and former jQuery user Derek Gathright (@derek) explains why you should consider using YUI to build your web apps. In particular, he stresses how YUI is designed to serve as an extensible set of building blocks (like Legos) and not just a collection of ready-to-use components (like pre-molded plastic toy cars).

Links

• View in HD on YouTube
• Full YUIConf 2011 Playlist on YouTube

Advertise here via BSA

HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that, you can decide if and how to put each of these features to use.

The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.

Requirements: HTML5 Browser Support
Demo: http://html5please.us/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

今後デザインしていく上で重要となる文脈の理解。文脈と一言でいっても範囲が広過ぎて何処から何をすれば良いのか分かり難い言葉です。文脈によって活かされるコンテンツ配信で取り上げたような実例があると「あぁこういうことか」と分かるものの、実際自分でするとなると始めるための具体的な要素が知りたくなります。

文脈は、ヒューマンとテクニカルの２つに大きく分類することが出来ます。ヒューマン側のコンテキストは人間の態度・行動・思考への理解が必要になる分野です。社会学・心理学とったアカデミックな分野も取り込んで研究するのも手段ですし、ペルソナを用いたデザイン思考プロセスでも導き出すこともできます。

テクニカル側のコンテキストは今の技術をつかって取得することが出来ます。HTML5 の geolocation はその典型的な例ですし、スマートフォンであれば様々なデバイス情報を取得することができます。また、アクセス解析のような今まで蓄積されたデータを基にして利用者傾向を想定するのもテクニカル側のコンテキストです。

以下にヒューマンとテクニカルで理解が深まる文脈の要素をまとめてみました。

テクニカル側の文脈をみると分かりますが、数年前は取得が難しかったこと、今だから取得することに意味がある要素が幾つか見られます。場所情報は昔から取得することが出来ましたが、ピンポイントではありませんでしたし、わざわざ取得することの意味が見つけ難い状態でした。しかし、今では場所情報の取得が難しくなくなっただけでなく、情報を得ることで、利用者の使い勝手を向上させることが可能になりました。

ヒューマン側の文脈の中には、今後テクニカルに移行する可能性がある要素があります。「好み」は千差万別ではありますが、Facebook や Google Plus のようなソーシャルネットワークに蓄積されている好みの傾向を取得できるようになるとしたらどうなるでしょう。そこから、利用者の行動や思考パターンも読み取れるようになるかもしれません。

可能性があるからといって、実装するかどうかは判断が難しいところ。プライバシーへの理解は開発側だけでなく、利用者側にも求められます。また、何でも気を利かせて利用者に情報を提供すれば良いのかというと、そうではありません。人によっては、プライバシーを可能な限り守りたい方もいます。また、自動化を好まず自分で操作したいと感じる方もいるでしょう。様々な文脈を技術的に取得可能になってきているからこそ、そこを理解した上で、どうヒューマン側に注目したデザインが出来るかが課題になるでしょう。

先週配信した Automagic Podcast (#30) では、プライバシーを話題にしました。今回の記事と関連したことを話しているので興味がある方はぜひ聞いてみてください。

ある Anonymous Coward 曰く、

ご存じの方も多いだろうが、Google はこれまで数多くのサービス間で個別に設けていたプライバシーポリシーと利用規約を全面改定し、多くのサービスで統一して用いる新しいプライバシーポリシーと利用規約を公表した。3 月 1 日から適用される (ポリシーと原則、日本経済新聞の記事、ITmedia エンタープライズの記事より) 。

この改定により、Google はユーザー情報を各サービスで横断的に利用できるようになる。これにより Google は新しいプライバシーポリシーのもとでサービス間での情報や履歴の連携をより強化し、よりパーソナライズされたコンテンツ、検索結果、サジェスチョン、広告などを提供していく模様。例えば『Google検索で「タブレット」を検索すると、Gmail　の画面に Amazon Kindle の広告が表示される』『「Jaguar（ジャガー）」という単語を検索した場合に、動物の Jaguar か車の Jaguar か、ユーザーが意図する検索結果を適切に返したり』などがあるという。これには Android によるアカウント・サービスも含まれ、たとえば『Google カレンダーの予定、Android 端末の GPS データ、Google マップの交通情報などのから、ユーザーが予定に遅れそうだと警告できる』と説明している様だ。優しきビッグブラザー?

また、利用規約はそれまでの条文的な文体を改め、ユーザーに分かりやすい一般的な文体となっている。こういった利用規約は珍しいのではないだろうか? 他のサービスにも広まってほしい所だが、しかし法的に見て曖昧さはトラブルを招かないか? とも思う。識者のコメント求む。

すべて読む | ITセクション | Google | IT | プライバシ

関連ストーリー：
Google+、年齢制限を「13歳以上」に引き下げ 2012年01月30日
Webサイトのプライバシーポリシー、大部分が不適切 2011年12月03日
プライバシーポリシーには何を書いて欲しい？ 2003年03月10日

ある Anonymous Coward 曰く、

民放キー局 5 社と電通が VOD サービス「もっと TV」を 4 月 2 日に開始するという (ITmedia +D LifeStyle の記事より) 。

「現在放送中の番組に連動して過去放送などを提供する」など、「テレビのリアルタイム視聴を促進する」というのが特徴だという。利用には対応するインターネット TV が必要だが、まだ対応 TV は発表されていないとのこと。

レコーダーの普及と高機能化、そして動画サイトなどの普及によって「リアルタイムに TV を見る」という人は少なくなっていると思われるが、リアルタイムに番組を見せたいテレビ業界側の思惑は成功するのだろうか?

すべて読む | ITセクション | テレビ | インターネット

関連ストーリー：
ニコニコ動画、PPV 型の映画 VOD サービスを開始 2011年11月15日
NHK、VODサービス対応の実施基準（案）への意見を募集中 2008年09月14日

以前に似たような企画があったような気がしないでもないが、悪くないアイデアなのでご紹介。

Go Halfsiesでは、「定価を払ってハーフサイズのご飯を食べよう！そしてその半額分は食糧不足の国に寄付ができるよ！（正確にいうと寄付分の10%は運営に回される）」という企画を推し進めているようだ。

現在、実験的にテキサスやニューヨークで参加してくれるレストランを募っているらしい。

たしかに飽食の時代だし、ご飯を残す人も多い（特にアメリカでは）。そしてもちろん食べ過ぎちゃう人も多い。

そう考えると「健康のために半分の量でいいんじゃない？」と啓蒙しつつ、寄付ができるこの仕組みは悪くないですな。

Googleは27日、同社のSNS「Google+」の年齢制限を現行の「18歳以上」から「13歳以上」に引き下げたそうだ（Internet Watch、本家/.）。

今回の変更で、Google+の年齢制限はFacebookと同じになった。また、この変更に伴い子供が安全にGoogle+を利用するための機能が盛り込まれた。まずデフォルトでは、自身がサークルに追加したユーザ以外からはコンタクトができない設定となっている。また、投稿等を公開する際に「一般公開」もしくは「友だちの友だちサークル」を選択した場合、「サークルに追加していないユーザーがあなたの投稿を閲覧したりコメントできるようになります」というメッセージが表示され注意が促される。

最大10人でビデオチャットできる「ハングアウト機能」に関しては、サークル外のユーザがチャットに参加してきた場合には18歳未満のユーザにその旨が表示され、強制的にミュートされるとのこと。ユーザはその後そのまま退室するか、チャットに復帰するかを選択できる。

ただしこのような安全設定は全てユーザ自身のアカウント設定から変更することができるとのことだ。

すべて読む | ITセクション | Google | IT

関連ストーリー：
Facebook、Twitter、Myspace から Google へメッセージ「Don't be evil」 2012年01月26日
インドも本格的な SNS 検閲に踏み切るか 2012年01月17日
Google、検索に Google+ の情報を統合 2012年01月12日
3 月 1 日、Google がプライバシーポリシーと利用規約を改定、各サービスで統一へ 2012年01月30日

Between Page and Screenは、ARを活用した詩集だ。

文字の見せ方がなんとも立体的で素敵である。同サイトにあるデモ動画を是非みてもらいたい。

ARを使うのでカメラがついたPCが必要ではあるが、その面倒さを上回る驚きがあるだろう。

これからの時代の「飛び出す絵本」はARが代替していくかもしれないですな、と思える新感覚なサービスだ。

Googleは昨年8月、処方薬を米国へ違法に輸出販売するカナダの薬局の広告を掲載した件に関して、司法省に5億ドルの罰金を支払うことで合意したが、違法な広告掲載について経営陣が容認していたことが疑われている( PCMag.comの記事、 WSJ.comの記事、 本家/.)。

違法広告の掲載について証拠を固めるため、連邦検察官は詐欺で服役中のDavid Whitaker氏の協力を得てGoogleに対するおとり捜査を行った。Whitaker氏は以前、メキシコからGoogleの広告を通じてステロイドやヒト成長ホルモンを販売しており、Googleの広告申し込みシステムを使用せずに広告担当の重役と直接交渉できたとのこと。「処方箋不要」の文言を入れることも許可されたという。捜査を指揮した検察官によれば、違法広告の掲載についてラリー･ペイジCEOが知っていたことを示す証拠があるそうだ。また、当時Googleの重役だった現Facebook COOのシェリル・サンドバーグ氏も知っていたとみられている。

すべて読む | ITセクション | ビジネス | 日記 | 法廷 | Google | 広告 | idle | お金

関連ストーリー：
Facebook、Twitter、Myspace から Google へメッセージ「Don't be evil」 2012年01月26日
Google、広告過多サイトに対する検索アルゴリズムを修正 2012年01月25日
Google、広告の表示理由を確認できるようにリンクを追加 2011年11月03日
ロゼッタストーン社、AdWords による商標権侵害で Google を提訴 2009年07月15日
Google広告にウイルスサイト 2007年04月28日

Merckx UMX-R, fixie based on the Merckx hour record ride in Mexico '72.

Buzzihood, an acoustic cocoon to do a phone call in peace. Perfect color spot for a big office. Designed in Belgium!

rm -fr 曰く、

米ハーバード公衆衛生大学院の研究者らがタブレットコンピューター使用時の首や頭部への負担について研究し、タブレットを机の上に立てて使うことで首の痛みを軽減できるとの結果をまとめた。研究成果は「Work: A Journal of Prevention, Assessment and Rehabilitation」に掲載されている(AFPBBの記事、
大学の広報記事、
掲載論文)。

研究ではタブレットを使い慣れた15人の被験者に対し、AppleのiPad 2とMotorolaのXoomを使って下記4種類の姿勢で作業を行ってもらい、首の屈曲角度を調査したという。

1. タブレットを膝の上に置き、片手で保持してもう一方の手でタッチスクリーンを操作
2. 専用ケースに入れたタブレットを膝の上に置き、両手でタッチスクリーンを操作
3. 専用ケースに入れたタブレットを机の上に置き、両手でタッチスクリーンを操作
4. 専用ケースに入れたタブレットを机の上に置き、映画を鑑賞

すべて読む

| ITセクション

| モバイル

| テクノロジー

| ハードウェア

| IT

関連ストーリー：

ゲームコントローラ付きのWindowsタブレットPC「Project Fiona」
2012年01月12日

タブレット型端末をメイン端末にしてる?
2011年12月07日

タブレット端末でノートを取りたい。良い方法は?
2011年11月18日

NEC、52インチディスプレイ搭載のタブレット端末を発売
2011年11月08日

Microsoft、どこでもタッチスクリーン技術を開発中
2011年10月23日

タブレット型端末の使用場所、職場やトイレにまで広がる
2011年08月27日

Android 3.2 タブレットが出るけど、論文などに最適なのはどのタブレット ?
2011年08月23日

お風呂でもタッチスクリーンを操作できる「鼻スタイラス 」
2011年05月08日

数学の教科書に iPadを使う試み、カリフォルニア州で行われる
2010年09月11日

NICT、何もないテーブルの上に立体映像が浮かび上がるディスプレイを開発
2010年07月05日

お、これは便利。

Phone-Sizeでは、ちまたで出回っているスマートフォンの大きさを比較することができる。

iPhoneとGalaxyのこれ、どっちが大きいのかな、といったときに便利だろう。

また、表示する画像を揃えることもできるので一番大事なディスプレイ性能を（ある程度は）比べることもできる。

日本のキャリアさんもこういうサイトを作ってくれるといいかもですよねぇ・・・。

NECは26日、2011年度通期の純損益予想を1,000億円の赤字に下方修正し、国内外で1万人規模の人員削減計画を発表した（プレスリリース、 日本経済新聞の記事、 ロイターの記事、毎日jpの記事）。

減収減益の原因としてタイの洪水や個人向けPC事業の非連結化、携帯電話事業の減少、ディスプレイ事業の売り上げ減などをあげており、事業構造改革費用としては400億円を計上している。今回の人員削減は、マクロ環境・事業環境の急回復が見込めない中、コスト削減により利益体質への転換を図るためのものだという。2013年3月期の前半をめどに国内7,000人（うち5,000人は協力会社など外部委託先）、海外3,000人の削減を予定。携帯端末をはじめ不採算部門を中心に、生産現場などハード部門とソフト開発部門の両方を想定しているとのことだ。

NECはリーマンショック後にも2万人超の人員削減を行っているが、その際は電子部品製造のNECトーキンが多くを占めていた。/.J諸氏への影響はいかほどだろうか。

すべて読む | ITセクション | 日本 | ビジネス | ニュース | IT | お金

関連ストーリー：
理研とNEC、「京」からの離脱係争、2億円で和解 2011年12月27日
NEC、52インチディスプレイ搭載のタブレット端末を発売 2011年11月08日
タイ洪水の影響でバルクHDDが記録的値上がり、単体販売を中止するショップも 2011年11月04日
NEC、「とことんサポートPC」を発表 2011年10月12日
NEC、フルキーボード付きのAndroid端末を発表 2011年02月17日
スペースシャトル退役とともに NASA で 1200 人規模のレイオフ 2010年10月05日
Microsoft、Intel、および IBM にて人員削減 2009年01月24日
マイクロソフト、全世界の従業員の 17% 削減？ 2009年01月07日
Sun、3四半期連続黒字でもリストラへ 2007年08月09日

Foundation by Zurb, a HTML/CSS framework for any kind of device.

Some ideas to get you thinking about typographical effects with CSS3 & jQuery.

Advertise here via BSA

Resumable.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

Resumable.js allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state. Currently, it is limited to Firefox 4+ and Chrome 11+.

Requirements: HTML5 and JavaScript Framework
Demo: https://github.com/23/resumable.js
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Google+は「より包括的なユーザー名の利用規約」を目指すとして、これまでの実名主義の方針を修正し、今後ユーザーはニックネームや旧姓、アルファベット以外の文字での表記も実名と併せてプロフィールに表示できるようになるとのこと（本家/.）。

例えば、Dwayne Johnson氏のニックネームがThe Rockだとしたら「Dwayne “The Rock” Johnson」となり、旧姓がSmithのJane Doeさんは「Jane Doe (Smith)」となる。また、歌手のマドンナのように広く知られた芸名の場合は実名の表記がなくてもよいとのこと。GoogkeのBradley Horowitz氏がGoogle+で明らかにした。

だが、通名なら何でもかんでも許されるという訳ではないようだ。「Dr」や「Rev」、「Professor」といった職業を表す冠名の使用や、「個人」を表さない企業名やブランド名、団体名の使用は認められないそうだ。またニックネームに★や@、$といった記号や数字を挟みこんだ表記（例えば「John246」や「★★Shelley★★」）も新規約のサポート対象から外れるとのこと。

すべて読む | ITセクション | Google | SNS

関連ストーリー：
Facebook、Twitter、Myspace から Google へメッセージ「Don't be evil」 2012年01月26日
Google、広告過多サイトに対する検索アルゴリズムを修正 2012年01月25日
Google、検索に Google+ の情報を統合 2012年01月12日
ソーシャルメディアでの個人情報公開への抵抗薄れる 2011年09月23日
Googleのエリック・シュミット曰く「Google+ はアイデンティティサービス」 2011年08月31日
Facebookのランディ・ザッカーバーグ曰く「インターネットの匿名性は無くすべき」 2011年08月05日

Ubuntuは30年来のメニューシステムを一新した「Head-Up Display」を導入することを決めたそうだ（本家/.）。

この「Head-Up Display（HUD）」ではドロップダウンメニューからコマンドを探すのではなく、検索ボックスにコマンドを入力するようになる。たとえばGIMPで「Rad」と入力すれば「Radial blur」（ぼかし半径）が候補として表示されるなど、入力はオートコンプリートされるとのこと。また「あいまいコマンドのマッチング」機能も搭載されており、過去の入力履歴から正しいコマンドを導き出しユーザに提案してくれるとのこと。

CanonicalのMark Shuttleworth曰く、HUDは新しいソフトウエアにより早く慣れるのを手助けしてくれるとのこと。ヘビーユーザーでない人やWindowsインタフェイスに慣れたユーザにとっては不慣れなメニューからコマンドを探すのは手間である。しかしHUDでコマンドを入力すれば、メニューで迷子になることなく目的を達成できるようになるという。

開発チームはPCのGUIを何十年にも渡り支配し続けていたWIMP（Windows、Icons、Menus、Pointer）システムを変えるべく長い時間をかけて検討を重ねてきたとのこと。行き着いたのがアプリケーションに直接指示を出すという考えに基づき、ユーザが自身の意図を入力すればアプリケーション側が実現の道筋を導いてくれるHUDであるという。

HUDはUbuntuの次期リリースである12.04に搭載されるとのことで、OSと共に出荷される全てのアプリケーションで利用可能になるとのこと。また、従来のシステムを好むユーザのためにも今までのメニューも利用できるとのことだ。

PC Proの元記事にはHUDのスクリーンショットや、動画も掲載されている。

すべて読む | Linuxセクション | Linux | ソフトウェア

関連ストーリー：
新世代GUIは本当に嫌われているのか 2011年11月13日
Windows 8 では異なる 2 種類の UI が選択可能に 2011年09月05日
次世代 Firefox UI のモックアップが公開される 2011年08月03日
今日のUIは高齢者には優しくない？ 2011年05月24日

あ、これはナイスなアイデア、かな。

Hashtag Momを使えば、「お母さん、着いたよ！」メッセージを自動化してくれるようだ。

つまるところはFourSquareでチェックインするときに「#mom」のハッシュタグをつければ、あらかじめ指定した番号にSMSや電話をしてくれる、というものだ。

リアルに電話してあげるのが一番ではあるが、なんらかのタイミングで忘れてしまったり、時間がないときもあるだろう。そうしたときにいいかもですね。

親子のコミュニケーションを補助してくれるこうしたサービスは他にも考えられそうだ。

The Swedish Murder Machine.

via Bandito

Second illustration that I feature here from the Heartwork series.

via Allan Peters

My motto each time I’m climbing with my bicycle.

via Graham Pilling

Self explanatory.

via pixelgraphix

Anything with a bicycle in it has my seal of approval.

via Jackie Besteman

It Does a Body Good. The shadow is the cherry on the cake.

via Mikey Burton

Beautiful bokeh and it makes me think of Summer.

via Samantha Lamb

North By Northwest. Inspired by the famous title sequence by graphic designer Saul Bass of a movie by Alfred Hitchcock.

via Justin Mezzell

New media at SXSW.

via Moker Ontwerp