[3037] Appleのサイトを見るだけで欲しくなる理由

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■アンビエントメディアの夜明け［17］
Appleのサイトを見るだけで欲しくなる理由

川井拓也
< https://bn.dgcr.com/archives/20110509140300.html
>
───────────────────────────────────
ゴールデンウィークも終わり、強烈な「サザエさん症候群」の方も多いと思いますがいかがお過ごしでしょうか？

この連休中にAppleの新製品を買ってしまった人も多いと思います。iPad2？　iPhone4ホワイト？　iMac？　出費の額は違えど、すでに持っているにもかかわらず、新しいものが出るたびに欲しがらせるAppleマジックも、最近は神がかり的なものを感じます。今日はそのマジックのひとつについて言及したいと思います。

「アップルのサイトの文章はすべて未来形の語り口でコピーライティングされている。あれにやられるのだ。」

これは私がtwitterでつぶやき多くRTされたつぶやきです。Appleのサイトは英語版も日本語版も同じであり、同じ文脈で統一されています。その文章はサブリミナル的な魔力を持っており、webを訪れたユーザーがまだApple製品を持っていないにもかかわらず、持っていたらどんな素晴らしいことが起こるか？ということを語りかけてきます。主要な製品の書き出しでそれを検証してみましょう。

●iPadが33％も薄く、最大15％も軽くなりました。手に取れば、その違いが分かるはず。そしてそのまま手放せなくなるはずです。（iPad2）

●かつて誰もが「未来の電話」としてイメージしていたものを、iPhone4 がごくあたりまえのものにします。画面をタップするだけで、出張先から自宅にいる子どもたちに手を振ったり、国境を越えて笑顔をかわしたり、仲のいい友だちがあなたの話で大笑いするのを見たり。（iPhone4）

●ますます小さくスリムになった新しいApple TV。あなたをもっと楽しませるために生まれ変わりました。一世代前のモデルに比べ80パーセントも小さくなって、電源も内蔵。ワイドスクリーンテレビの横に置いても、キャビネットに並んだAV機器の間に置いても、すっきりフィットします。（AppleTV）

●フラッシュストレージの長所を活かしたiPod、iPhone、iPadを持っている人なら、その信頼性、スピード、効率の良さをすでに実感しているはず。MacBook Airのような極めてコンパクトなノートブックにフラッシュストレージを採用した理由もおわかりいただけるでしょう。（MacBookAir）

どのコピーにも共通するのが自信たっぷりな物言い。そして、もうユーザーがその製品を使っている、触れているという前提でその性能の素晴らしさを共に確認していこうとする文章なのです。なんてことはない文章に見えますが、これと同じ文体を使うメーカーはほとんどありません。

今のAppleは10年前のAppleとは違い、間違いなくすべての人にとって最先端企業であると認識されていますが、その実力があってはじめて説得力を持つ文体と言えます。このコピーを読んでいるだけで、ユーザーは「そうだ、この素晴らしい製品を私が使わない手はない！」と妙な確信を持ってしまい、あとで嫁に「あんた！　持ってるになんでまた買うのよ！」と怒られることになるわけです。

筆者が注目するのは、もちろんiPad2。アンビエントメディアとしてのiPadの有効性についてはかねてからこの連載で言及していますが、それはiPad2になっても同じ。ちょっとしょぼいという噂のカメラも、しばらく使えば飽きるはず。なによりiPadの最大の問題点は、それを使う時間が一日の中で意外に短くなってしまう人が多いということにあります。

ならば、能動的に使う時間は少なくとも、会社でパソコンの横にiPadをたてかけてアンビエントに情報を表示させて元を取るのも悪くありません。今回のiPad2の純正カバーであるSmartCoverは日本では「風呂のフタと完全に一致！」として発表日から話題になっていましたが、本体が発売されてすぐにリリースされたアプリに「SmartTub」があります。

これは文字通りiPad2を風呂にするというアンビエントアプリ。SmartCoverの青と組合わせることで最高の効果があります。そんなことのためにiPad2を買ったのではない！　と怒るあなたも会社のOLちゃんに「このアヒル可愛い！」と言われること間違いなし。まずはお試しあれ。

< http://kuracyan.net/archives/10907
>
フロ桶アプリ　ステキ過ぎる。 ｰSmartTub

【川井拓也 / Takuya Kawai】
mail:kawai@himanainu.jp　twitter @himanainu_kawai

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［274］Illustrator CS4/CS5編
アートボード別にJPEG/PDFファイルとして保存する

古籏一浩
< https://bn.dgcr.com/archives/20110509140200.html
>
───────────────────────────────────
今回のスクリプトは、Illustrator CS4/CS5で標準の機能で行うことができるものなので、他のスクリプトと組み合わせて使わないと威力を発揮できないかもしれません。

最初のスクリプトは、アートボード別にJPEG形式で保存するものです。


(function(){
var num = app.activeDocument.artboards.length;
var saveFolder = Folder.selectDialog("保存先のフォルダを選択してください");
for(var i=0; i<num; i++){
app.activeDocument.artboards.setActiveArtboardIndex(i);
var filename = new File(saveFolder+"/"+i+".jpg");
saveJPEG(filename);
}
// JPEG保存
function saveJPEG(fileObj){
var opt = new ExportOptionsJPEG();
opt.antiAliasing = true; // アンチエイリアス ON
opt.artBoardClipping = true; // アートボード内だけを保存
opt.horizontalScale = 100; // 水平の割合
opt.verticalScale = 100; // 縦方向の割合
opt.optimization = true; // Web用に最適化
opt.qualitySetting = 80; // 画像品質
opt.saveAsHTML = false; // HTMLファイルは同時に保存しない
app.activeDocument.exportFile(fileObj, ExportType.JPEG, opt);
}
})();


次はアートボード別にPDF形式で保存します。


(function(){
var num = app.activeDocument.artboards.length;
var saveFolder = Folder.selectDialog("保存先のフォルダを選択してください");
for(var i=0; i<num; i++){
app.activeDocument.artboards.setActiveArtboardIndex(i);
var filename = new File(saveFolder+"/"+i+".pdf");
savePDF(filename);
}
// PDF保存
function savePDF(fileObj){
var opt = new PDFSaveOptions();
opt.trimMarks = true; // トリムマークあり
opt.compatibility = PDFCompatibility.ACROBAT7;
opt.generateThumbnails = true;
opt.trimMarks = false; // トリムマークなし
activeDocument.saveAs(fileObj, opt);
}
})();


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

「iPhone/iPad×HTML5アプリ制作」は、韓国と台湾でも翻訳されて出版されるようです。翻訳されて出るのは久しぶり。初めて線量計見ました。中国製。でも、なぜか充電できず......。

・"ソーシャル"なサイト構築のための Web APIコーディング
< http://www.amazon.co.jp/dp/4844361937/
>

・すべての人に知っておいてほしい WEBデザインの基本原則
< http://www.amazon.co.jp/dp/4844361813
>

・iPhone/iPad×HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>

・HTML5＋JavaScriptアイデア＆実践サンプル
< http://www.amazon.co.jp/dp/4048704486
>

・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>

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

・Adobe Illustrator CS3＋JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［03］
もっと調べておきたい、HTML5のこと。

森　和恵
< https://bn.dgcr.com/archives/20110509140100.html
>
───────────────────────────────────
ご無沙汰です。森和恵です。
段々と暑くなって、日に日に夏が近づきますね。GW明けでだる〜いですが、焦らずゆっくり進みましょう。

さて。
今回は、Visual Web Developer 2010 Express（VWDE）にはお休み頂いて、HTML5の文法的な事項をもう少しご紹介します。

▼HTML5で変更される要素、消える要素

前回、HTML5で追加される新要素を紹介しました↓が、
< https://bn.dgcr.com/archives/20110411140100.html
>
削除される要素や、同じ要素でも意味が変わる要素もあります。

【削除される要素】

<font>　<u>　<s>　<big>　<center> ...など、見栄えを指定する要素や、<frame>　<frameset>　<noframe> ...など、フレーム関連の要素が削除されました。

【変更される要素】
<hr>　水平線 → "内容的な区切り"へ
<section> など、ひとまとまりの文章中で区切りとして使用します。

<a>　インライン要素 → "インタラクティブ・コンテンツ"へ
ユーザーが操作する要素（インタラクティブ・コンテンツ）へと幅を広げました。単にテキストをマークするだけではなく、<div> など、ブロックを内包できます。また <a name="××">など、アンカーとしての利用は廃止されました。

<strong>　強調 → "重要"へ
注意喚起など、物事の重要性、大切さを伝える時に使用します。

<em>　強調 → "調子を強める・強調"へ

文脈で強めたい箇所を指定する場合に使います。強める箇所が変わることで文章の意味が違ってくる場合に使用します。

　｜例えば、「"私は"明日は行きません」と"私は"を強調すると、
　｜「私は行かないが、○○さんは行きます」のような意味合いを表します。
　｜「私は"明日"は行きません」と"明日"を強調すると、
　｜「明日は行かないけど、今日は行きます」のような意味合いを表します。
　｜このように、文章中で特定の言葉を強めたい時に使います。

<small>　小文字 → "細目"へ
免責事項や著作権表記など、細目となるコンテンツに使用します。

　｜<big> は削除されたのに、<small> は意味が変わって残っていたり、
　｜<frame> 無くなったけど、<iframe> は残っているなど、面白いですよね。
　｜※たぶん、<iframe> は利用頻度が高いので現状に即して残ったのかと...。
　｜HTML5の全要素は、下記サイトにくわしくまとめられています。
　｜< http://html5.jp/tag/elements/index.html
>

▼HTML5 向けのリセット・スタイルシート

第一回で、HTML5未対応のInternet Explorerで新要素を認識するのにhtml5.jsを読み込む対策をしました。
< https://bn.dgcr.com/archives/20110207140200.html
>

これで未対応ブラウザも新要素を認識しますが、デフォルトのスタイルがなにも設定されていません。

例えば、<header> <nav> <article> <section>...の新要素をブロック要素として扱うために"display:block;"を指定するなど、必要なスタイルをCSSで指定しておく必要があります。

ケースバイケースで指定するプロパティは違ってきますが、
「HTML5 Reset Stylesheet」
< http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html
>
で標準的なHTML5 向けのリセット・スタイルシートが紹介されているので参考にしてみてください。

▼ HTML5を取り入れた事例

国内にもHTML5を取り入れたサイト事例は増えてきています。どんな風にHTML5を使っているのか比較すると面白いです。

Google　< http://www.google.co.jp/
>
ローソン　< http://www.lawson.co.jp/index.html
>
無印良品ネットストア　< http://www.muji.net/store/
>
アドビ & HTML5　< http://adobe-html5.jp/
>

　｜個人的に面白かったのがGoogle。HTML5宣言しているのに<center> を
　｜使ってたり、閉じタグが極力なかったりします。
　｜なんと、最後は</script>で終わってるんですよ！
　｜たぶん、表示高速化を計るためだと思いますけれど。

HTML5未対応ブラウザにも対応すべく、本来のHTML5の使い方をしていないサイトも多いようです。

例えば、HTML5のDOCTYPE宣言をしているものの、新要素を使わずに<div> でレイアウトしていたり、<header class="entry-header">など新要素のタグセレクタは使わずに、クラスで定義するケースも目立ちます。

個人的には、文法に準じるのが必ずしも良しとは思いません。スムーズな運用ができれば、則していなくてもOKかと思います。ただ、そうすることが適切かどうかを考えつつ、これらの事例を参考にしてください。

　｜どれぐらいHTML5の文法に則しているかは、
　｜バリデーターチェック↓である程度判断できます。
　｜HTML5 Validator(W3C)
　｜< http://validator.w3.org/
>

　｜海外のサイト事例は日本より断然多いです。
　｜HTML5マークアップの参考にしてみましょう。
　｜海外サイトの事例紹介− HTML5 Gallery
　｜< http://html5gallery.com/
>


...はい。今回は、ここまでにしましょう。
次回からは、コンテンツのパターン別にHTML5でページを作ります。
マークアップのケースを学びましょう。
どうぞよろしく。（＜ゝω・）綺羅星☆

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

【森和恵 r360studio 〜 Web系インストラクター 〜】
<site: http://r360studio.com
>　<twitter: http://twitter.com/r360studio
>
<mail: r360studio@gmail.com >

近況報告：
大阪iMedioさんの今年度のセミナーがスタートします。木曜日は恒例の導入セミナー。2時間で、さくっと自社サイト運営に必要な事項を確認できますよ。

『Webサイト導入［超］入門　〜ホームページをこれから始める方のために〜』
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=11840
>
※サイト運営をこれからする人向け。
※制作担当の方は、よくわかってない上司の人とかオススメしてみてください。

『Webサイト［出直し］入門　〜あなたのサイトには何が足りないか〜』
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=11841
>
※サイト運営をなんとなくしてるけど、いまひとつなんだよねとか、
※制作会社に丸投げしてるけど、ホントにこれでいいのかとか悩んでる人向け。

あと変わったところでは、インストラクターさん向けのセミナーをやります。これは自分でも初めての試みで、準備に気合い入ってます。

『教える技術--わかりやすいセミナー進行の極意』
< http://m2.cap-ut.co.jp/event/semi03.html
>

宣伝ばっかですみません。（汗）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（5/9）
・ようやくわが家もすべてのテレビの地デジ化を達成した。最後のテレビを地デジ化するために導入したのが、録画機能搭載地デジチューナーBUFFALO DTV-H500Rである。シングルチューナーなので録画中の裏番組の視聴はできないが、わずか1.5万円で地デジチューナーと500GBのHDDレコーダーが手に入ったのだからベストな選択だと思う。いずれテレビを買い替えても、HDDレコーダーとして使い続けられるのもいい。録画・再生もVHSより簡単操作だから、このテレビのメインユーザーの妻もご機嫌だ。VHSデッキは再生専用機としてわたしの部屋に持って来た。地デジチューナーとVHSのケーブルを差し替えすれば、我がアナログテレビは大昔に録画した映画を楽しめるのだ。テレビもVHSデッキも壊れるまで使い続けるつもりだ。
　菅総理が浜岡原発全面停止の要請（命令）を出した。「浜岡は止めた方がいい派」のわたしだが、この男にだけは言われたくなかった。読売では「菅首相が（略）異例の措置に踏み切ったのは、国民の原発に対する不安感を軽減し、東日本大震災の対応の不備で失墜した政権の信頼回復につなげる狙いがある。ただ、政府内で十分に検討された形跡はなく、支持率低迷に苦しむ政権が反転攻勢のために繰り出した苦肉の策との見方も出ている」とある。まさしくその通りで、世間受けを狙ったパフォーマンスに浜岡を利用しただけだ。どこまで小汚い手をつかう元市民運動家なのか。わたしの中でも矛盾しているが、中部電力には首相の命令に唯々諾々として従うことなく、徹底的に抵抗して欲しいと思う。最終的には浜岡は止めて欲しいが、それは熟議したうえの結論とするのが民主主義の姿である。民主党主義はもう政権から下りてくれ。それが国民の「要請」である。（柴田）
< http://buffalo.jp/product/multimedia/chideji/tv-tuner/dtv-h500r/
>
BUFFALO DTV-H500R

・一台ある我が家のテレビは地デジ対応だった。あとはワンセグのDSテレビだから問題なし。ただし、レコーダーが非対応なのよね〜。／現行政権に未来を見据えての動きは見えない。先読みできない、思いつきの政策に見える。日本経済のこと考えてくれているのか？　被災地のこと本当に考えてる？　霞ヶ関や国会近辺だけが日本じゃないよ。／すぐにSandy Bridgeの新製品が出そうと思いつつも、我慢できずにMac miniを購入。まとまった休みのとれるこの時期に使えるよう整備しておきたかった。4G×2枚のメモリを8,000円余りで購入。安くなったなぁ......。乗せ換えにはドライバー不要。蓋をスライドさせて開き、留め金はずして入れるだけ。現行マックのデータは移行アシスタントで。時間のかかることかかること。最後の1分未満表示から12時間経過しても表示変わらず。キャンセルしようとしたら、それはおすすめできないと画面で注意を受ける。検索すると、一日かかった、二日かかったという話がごろごろ。一日半ほどで諦めてキャンセル。が、データは移行されているし、いまのところトラブルはない。GW中に移行作業して良かったな〜とつくづく思うよ。1分未満で待たされたとはいえ、全部のアプリやらデータを手動で移行する手間を考えると、こんなにラクなのってないよねぇ。（hammer.mule）
< http://support.apple.com/kb/HT4413?viewlocale=ja_JP
>
移行アシスタント