[3278] スマホアプリの環境に苦労は続く

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［35］
スマホアプリ、PhoneGap環境とTitanium環境で苦労した後に
Flash CS6環境で苦労をする

秋葉秀樹
< https://bn.dgcr.com/archives/20120611140300.html
>
───────────────────────────────────
こんにちは、秋葉です。

モバイルアプリを作らないといけない状況でみなさんはどう対応しますか？私ははっきり言って、iPhoneアプリもAndroidアプリも新しい言語を学習してまで作りたいとは思わないです。だから人にお願いすると思うし、それでいいと考えています。

ここ最近では、共通の言語で開発できるソリューションがあって、そちらの人気もあります。スマートフォンのネイティブアプリケーション開発環境のなかでも、「共通のコードでつくれる」と耳にしたことがあるものを色々試し、Flash環境ではどうだろう？　と思ってちょっとだけ触ってみました。

私がつくるものは大したコードでもなく、俗にいう「Hello World!」を表示するだけでも精一杯という状況ですので、それぞれ専門でされている方にとってはあまり参考にならないかもしれません。あくまで、これからやってみようかな？　と思われている方向けに、です。

■Adobe Flash CS6環境

ご存知Flashです。基本的にFlash Biulderのような本格的なコード開発環境でなくても、簡単なアプリならこれでつくることができます。

CS5からこの機能が付き始めましたが、CS5発売直前になって急にAppleが「iPhoneにはXcode環境でないとダメ（緩く略すと）」というお布令が出て、一時期、心待ちにしていたFlash使いが残念な思いをしたこともあります。なお、Flashを動かす言語はActionScriptですが、ちょっとした注意点を覚えておいてください。

・アプリ書き出し用のActionScriptのバージョンは3.0でないとダメです。2以前だと使えないです。
・モーショントゥイーンのアニメーションもスマホで動きます。
・iPhone実機での動作確認は、デベロッパープログラム（有料）に参加登録しなくてはいけません、ただしAndroidでは実機で動作確認ができます。

ActionScript 3.0になって出来ることが幅広くなりました。ただし、それなりに学習コストが増えます。高度なことをやりたいのであれば、それ相当のスキルが必要となります。

一昔前はFlashといえば、いかに魅力的なアニメーションコンテンツを表現できるかが評価されていたのですが、今ではFlashの活用方法も変わったという感じもします。

一方ではどんどん高度なインタラクティブコンテンツを開発できる環境として活用されるその反面、昔ながらのアニメーション表現のニーズが減ったのはiOSのFlash非対応が大きな理由と言われています。

Flashでつくったモーショントゥイーンのアニメーションは、iPhoneでもAndroidでも動きますが、ここでいう「動き」というのは、あくまで「命令通り動くけど、パフォーマンスは期待しないほうがいい」という、一応厳しい言い方をしておきます。少ないムービークリップの動きでも、厳密に言えばパフォーマンスはガタ落ちします、が、一応動きます、という意味でとらえてください。

なので、ActionScriptの知識がない方でも、工夫次第では今までのFlash制作スキルだけでiPhoneなどのアプリがつくれる可能性はあります。もちろん、どんなアプリになるかによりますが。ちょっと試してみよう、という方であれば、スクリプトなしでもFlashアニメーションをiPhoneやAndroidアプリにできますので、「軽く試したい」という方にはおすすめです。

前述したとおり、iPhoneの場合はAppleのデベロッパープログラムに参加しないと、実機へアプリが転送できないので、気軽に試したい方はAndroid実機にて試すのがよいでしょう。

Flash Player11以降で「Stage3D」という、高度な描画処理にGPUを使う仕組みが搭載されたので、上手に使えばコンピュータの性能をフルに使ったインタラクティブコンテンツやゲームがつくれます。場合によっては、いままでのFlash Playerの1000倍近くの（ここは場合によりますが）パフォーマンスを発揮できると言われています。スマートフォンでもこの機能で貢献されるパフォーマンスがあるかもしれません。

■TitaniumやPhoneGapとFlash環境、どっちにする？　それとも...やめる？

違い、というか結局「使い慣れている」ものを極めた方が早い、と考えています。これからFlashはどうなる？　とか小賢しいことを考えるより、Flash開発に慣れている方は、今までの自分のスキルも活かせるし、精神的な部分でモチベーションが上がるのは実は非常に重要です。

ある仲の良い現役バリバリのエンジニアが「開発に必要なこと、最後は根性だ」と言ってました。ただ単に精神論を言っているのではない、というのはすぐにわかりました。彼が言っているのは、動かないプログラムを動かすために信じられるものは自分しかいないということでしょう。

確かに今はネットでググるという便利な手段があるので、もちろんその恩恵をうけることはあるでしょう。しかし、「問題解決能力」を総合して「根性」でまとめるのは、決して間違いではないと考えています。

◎Titaniumの場合

基本、デザイン部分もロジック部分もJavaScriptを使ってコーディングします。最近ではそれ以外の方法もありますが、原則、という意味でとらえてください。例えばラベルひとつをつくるにも、JavaScriptで以下のように書いて表示させます。UIをコードで生成するという、デザイナーにはハードルの高い作業になるでしょう。

var label1 = Titanium.UI.createLabel({ // ラベルのオブジェクトを生成
color:'#999', // 文字の色を決める
text:'I am Window 1', // 表示される文字の内容
font:{fontSize:20,fontFamily:'Helvetica Neue'}, // フォントサイズなども決められる
textAlign:'center' // CSSでいうtext-align: centerです
});

win1.add(label1); // ウインドウに表示

これで画面に「I am Window 1」と表示されるわけです。（下記画像参照）
< >

「タップされたら別のウインドウを開く」といったプログラムを仕込むこともできますので、ボタン代わりに使うことも一応可能です（ただしボタンはボタンらしいデザインのUIが用意されています）。

TitaniumのメリットはiOSやAndroid OSで用意されている、UIパーツをそのまま使えることです。わざわざボタンのデザインを書きおこす必要はありません（むしろオリジナルの外観を生成する方がハードルとなる場合があります）。

◎PhoneGapの場合

基本的にHTML+CSS+JavaScriptといった、私たちが慣れ親しんだ技術を使ってできたWebページをアプリ側でラップするものです。なので、アプリの見た目や動作はWebページ（HTMLファイル）そのもの、と言ってもまあまあ大方は間違いではありません。

本来、ネイティブアプリとして配信する目的以外に、HTMLベース（Webベース）で不可能な、デバイスの機能アクセスを実現させることが目的でもあります。Webブラウザで、カメラで写真を撮ったり、連絡帳にアクセスしたりというのは不可能なので、その部分だけPhoneGapのチカラを借りて実現させるのです（ここで言う「不可能」とは案件ベースでという意味です。実際はAndroid 3以降では実現可能となりますが、iPhoneでは無理です）。

さらに、PhoneGapのAPIリファレンスを見ると、いくつかの仕様はHTML5で策定されている文法などに近いものがあるので、学習コストも避けられそうです。

最近ではAdobe DreamweaverがPhoneGapを採用していますが、CS6からは「オンラインで生成」することが可能になっています。Webサイトをつくる感覚で、専用のパネルからビルドするとオンラインでファイルを生成してくれるサービスで、そのパネルからアプリファイルをダウンロードできるというものです。

メリットはWebの標準技術でつくれる、もうその一点だけでしょう。ボタンもCSS3で角丸やグラデーションを現在は-webkit-ベンダープリフィックスを付けて記述するだけでOKです。ヘッダ、フッタ固定にして真ん中スクロールなどは、スマホサイトでおなじみのjQuery Mobileを使ってPhoneGapでラップすると、ネイティブアプリで良く見かけるエフェクトや横スライドなどもWebベースでつくれることが期待できそうです。

◎依存する怖さ

こうするとかなり、私たちのスキルを活かせるということで期待できそうですが、なかなかそうもいかない場面もあります。TitaniumもPhoneGapもFlashも同じことが言えますが、ビルドで失敗することや実機転送で失敗することは当たり前にあると思っておいてください（一概にいえないところはどれも同じ、すんなり思い通りにいかないものです）。

そのとき、私たちは自身のスキルで対処できるでしょうか？　きっと困難に遭遇する覚悟が必要でしょう。そもそもネイティブな作り方をしていない以上（つまりiPhoneではXcode環境でなかったり、AndroidだったらJavaで書かなかったり）一度トラブルに見舞われてしまったら、その解決策を探すだけで相当の労力を要求されます。

たとえば、Xcodeの設定にトラブルの原因があったとしても、Xcodeを触ったことがない人にとっては、そこからが未知の領域です。

iPhoneアプリは前述の通り、デベロッパープログラムに登録することで実機転送が可能ですが、プロビジョニングファイルの作成、AppIDとのひも付け、さらにテスト用実機の登録までサイト上で行わないと実機テストは不可能です。ここをスムーズに行うだけでも、それなりに経験と知識が要求されるので、初心者にはハードルが高いのです。

他にも問題があります。これらのプロダクトは、基本的にJavaScriptやActionScriptで書かれたコードを、ネイティブのコードに解釈しなおすことでカメラやコンパス、音楽プレイヤーファイルなどにアクセスできます。

しかしこれらの機能に、例えばiPhoneアプリをObjective-Cで制御できる新しい機能が追加されたとしたら、それを解釈できるAPIというプログラムが実装されるまで、その機能を使うことはできない可能性があるのです。

ただ、ひとつお断りをいれておくと、これらの手法やプロダクトはやはり便利ですばらしいと思います。だから、否定するつもりはないです。でも言いたいことは、大事なことはこれから仕事として始めたい人は、こういったリスクが存在するんだということをはじめに知っておく必要がある、ということです。

結局私はFlashというプラットフォームが一番向いているかな、と思いました（人それぞれってことです）。「ワンソースでマルチデバイス」とか「Web技術でつくれる」とか、うたわれていますが、その反面リスクにも注意しながら向き合っていくべきと考えた方がいいでしょう。

◎Flash環境でカメラ撮影〜サーバに送信する

実はとても便利で楽しいです、ハマると大変だけど、それでも「根性」で問題解決できる人が生き残れるんだろうな......。

さて、以前の記事でTitaniumでカメラアプリをつくり、WEB上のPHPファイルに写真を送るというものを書きましたが、Flashではどうなるのでしょう？
< https://bn.dgcr.com/archives/20120416140300.html
>

いきなり両方のOS対応だと敷居が高いので、実機転送が簡単なAndroidに絞ってやってみました。Flashの方が得意という方はちょっと参考にしてください。

動作としては、ボタンをタップ→カメラ起動→撮影終了→画像が大きいので縮小→縮小した画像をビットマップにつくり直す→サーバに送信となります。解説のためシンプルな実装となるので、撮影終了したら無条件にPHPに送信します。

・開発環境 Flash CS6
・コンピュータ iMac
・テスト実機 Galaxy S2
・使用ライブラリ　JPGEncoder（ビットマップをJPEGに変換するためのライブラリ）
< https://github.com/mikechambers/as3corelib
>

Android機をUSBでiMacにつなぎます。パブリッシュすると自動的に実機にインストール・起動するには「ファイル　→　Air3.2 for Android 設定　→　デプロイ」内で設定できます。最初は証明書の作成が求められますので、同じ画面から証明書をつくってください。とくに登録はいりません。

タイムラインの1フレーム目にシャッター用のムービークリップでボタンの形を作ります（これがタップされるとカメラが起動するようにつくります）。ムービークリップの名前を「btn」としましょう。

その上に新規レイヤーを作成してスクリプトを書きましょう。
以下のActionScriptになりますがその前に、JPGEncoderの読み込みをしっかり設定しておきましょう。
「環境設定　→　カテゴリ（ActionScript）　→　ActionScript 3.0 設定...」
内で設定しておきます。設定方法がわからなければこちらを読みましょう。
< http://help.adobe.com/ja_JP/flash/cs/using/WS3e7c64e37a1d85e1e229110db38dec34-7fa4a.html
>

Flashファイル 1フレーム目のスクリプト
----------------------------------------------------------------------

import com.adobe.images.JPGEncoder; //ダウンロードしたライブラリを読み込む

var btn:MovieClip = this.getChildByName("btn") as MovieClip;
//ムービークリップ「btn」を取得する
var photoBitmap:Bitmap;

if (CameraUI.isSupported) { // デバイスにカメラがサポートされているか？
var camera:CameraUI = new CameraUI();
camera.addEventListener( MediaEvent.COMPLETE, imageCaptured );
btn.addEventListener(MouseEvent.CLICK, onClick);
} else {
// カメラサポートされていないときの処理
}

function onClick(evt:MouseEvent):void {
// 撮影ボタンのタップでカメラを起動
camera.launch( MediaType.IMAGE );
}

function imageCaptured( evt:MediaEvent ):void {
//カメラ撮影が終了
var imagePromise:MediaPromise = evt.data;
var loader:Loader = new Loader();
if (imagePromise.isAsync) {
loader.contentLoaderInfo.addEventListener( Event.COMPLETE,
promiseLoaderLoaded );
loader.loadFilePromise( imagePromise );
}
}

function promiseLoaderLoaded( evt:Event ):void {
//撮った写真が縦のつもりなのに横になっているので縦に修正（任意で）
photoBitmap = evt.target.content as Bitmap;
var w:uint = 400; //横400pxとする
var scale:Number = w / photoBitmap.width; // 横サイズにもとづき縮小率を計算
var matrix:Matrix = new Matrix();// 座標はそのままで行列で変形させる
matrix.scale(scale,scale); //縮小
matrix.rotate(90*Math.PI/180); // 時計回り90度回転
matrix.translate(photoBitmap.height*scale, 0); // 右に「縦の長さ」分移動させる
photoBitmap.transform.matrix = matrix;
var sp:Sprite = new Sprite();
sp.addChild(photoBitmap); // ビットマップをスプライトに入れてみる
addChild(sp); // スプライトを表示
send2PHP(sp);
}

// 画像をPHPに送信
function send2PHP(sp:Sprite):void{
var bmd:BitmapData = new BitmapData(sp.width, sp.height);
// スプライト内に縮小された画像をビットマップデータにdrawしてサムネイル取得完了！
bmd.draw(sp);
var jpgEncoder:JPGEncoder = new JPGEncoder(); // JPEG作成
var byteArr:ByteArray = jpgEncoder.encode(bmd);
// JavaScriptでやるAjax通信のようなものが以下。JPEGデータをバイト配列でPOST送信
var urlRequest:URLRequest = new URLRequest( /*PHPのアドレス*/ ); //
CGIPath...サーバCGIURL
var urlLoader:URLLoader = new URLLoader();
urlRequest.contentType = "application/octet-stream";
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = byteArr;
urlLoader.load(urlRequest);
urlLoader.addEventListener(Event.COMPLETE, function (e:Event):void{
//送信が成功したときの処理
})
}

----------------------------------------------------------------------

PHPファイルの内容（同階層のphotoフォルダに写真をアップし、data.txtに画像ファイル名を書き込む）

----------------------------------------------------------------------

$fname = "photo/".date("Ymdhis").".jpg"; //ファイル名を決定
$bin= file_get_contents( "php://input" ); //バイナリデータを受け取る
// 画像ファイルとして書き出す
$fp = fopen( $fname, "w" );
fwrite($fp, $bin);
fclose($fp);

// テキストファイルにログを記録
$pointer=fopen("photo/data.txt", "a");
flock($pointer, LOCK_EX);
fputs($pointer, $fname."\n");
flock($pointer, LOCK_UN);
fclose($pointer);

//ActionScriptにメッセージを返す
print($fname."をアップしました");

----------------------------------------------------------------------

実際はサーバーからエラーが帰ってきたときなどの処理も、ActionScript側で行うとよいでしょう。TitaniumやPhoneGapとJavaScriptでつくるカメラ投稿アプリと、FlashとActionScript 3.0でつくるカメラ投稿アプリ。

みなさんはどちらでやりますか？
え、やらない？
それも選択肢として正しいでしょう......。

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［320］Illustrator CS3/CS4/CS5/CS6編
自動的にトレースしSVG/PNG形式で保存する

古籏一浩
< https://bn.dgcr.com/archives/20120611140200.html
>
───────────────────────────────────
今回は、Illustratorで選択したフォルダ内にあるJPEG画像を、トレースしてSVG形式またはPNG形式にして保存するスクリプトです。

トレースした画像データをベクター形式で保存できるSVG形式であれば、HTML5対応のブラウザでも表示することができます。ベクター形式の場合、ブラウザで拡大しても画像がモザイクのように粗くなってしまうことがありません。

HTML5のインラインSVGにすると、JavaScriptで手軽に操作することもできます。以下のプログラムは、選択したフォルダ内にあるJPEG画像を開いて「カラー変換（16色）」でのトレースを行いSVG形式で保存します。

(function(){
var folder = Folder.selectDialog ("jpeg画像があるフォルダを選択");
if (!folder){ return; }
var fileList = folder.getFiles("*.jpg");
for(var i=0; i<fileList.length; i++){
var doc = app.documents.add(DocumentColorSpace.RGB, 384, 216);
var img = app.activeDocument.placedItems.add();
img.file = fileList[i];
var t = img.trace();
var trObj = t.tracing; // Tracing Object
trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);
// SVG Save
var savefile = new File(folder.fsName+"/"+i+".svg");
var opt = new ExportOptionsSVG();
opt.embedRasterImages = false; // 画像を埋め込む時は true
opt.embedAllFonts = false; // フォントを埋め込まない時は false
opt.documentEncoding = SVGDocumentEncoding.UTF8; // 文字コードは UTF-8
opt.fontType = SVGFontType.OUTLINEFONT; // アウトラインにする
opt.fontSubsetting = SVGFontSubsetting.GLYPHSUSED;
opt.compressed = false; // 圧縮する場合は true
app.activeDocument.exportFile(savefile, ExportType.SVG, opt);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
})();

次にPNG形式で保存するスクリプトです。

(function(){
var folder = Folder.selectDialog ("jpeg画像があるフォルダを選択");
if (!folder){ return; }
var fileList = folder.getFiles("*.jpg");
for(var i=0; i<fileList.length; i++){
var doc = app.documents.add(DocumentColorSpace.RGB, 384, 216);
var img = app.activeDocument.placedItems.add();
img.file = fileList[i];
var t = img.trace();
var trObj = t.tracing; // Tracing Object
trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);
// PNG Save
var savefile = new File(folder.fsName+"/"+i+".png");
var opt = new ExportOptionsPNG24();
opt.antiAliasing = true; // アンチエイリアシング。falseだとアンチなし
opt.transparency = true; // 透過させたくない場合はfalse
opt.saveAsHTML = false; // HTMLファイルも生成するか
app.activeDocument.exportFile(savefile, ExportType.PNG24, opt);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
})();

どちらのスクリプトも「カラー変換（16色）」でのトレースを行いますが、これ以外の形式でのトレースを行いたい場合もあります。その場合は、以下の行の app.tracingPresetsList[3] の3の数値を変更します。

trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);

この数値は以下のトレース形式と対応しています。

1.........単純トレース
2.........カラー変換(6色)
3.........カラー変換(16色)
4.........写真(低精度)
5.........写真(高精度)
6.........グレースケール
7.........手書きスケッチ
8.........詳細なイラストレーション
9.........コミックアート
10......図面
11......白黒のロゴ
12......単色ロゴ
13......ペン画
14......文字

また、ドキュメントサイズを設定していますが、書き出し時には無視されますので特に変更しなくても大丈夫です。

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

メインマシンのOSが入っていたHDDがおかしくなったので、新しいHDDに交換しました。日立の4TB HDDにしたら、今までの2倍くらい速い状態になり快適になりました。しかし、今度はマシンの前に座る時間が減ってしまいました。こういう忙しいときは、ストック原稿があると楽。

・毎度おなじみアスキーの連載
　「File system APIでブラウザーで動くファイラーを作る」
< http://ascii.jp/elem/000/000/696/696368/
>

・PDF構造解説
< http://www.amazon.co.jp/dp/4873115493
>

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184
>

・AndroidのためのHTML5本格アプリ開発
< http://www.amazon.co.jp/dp/4897978971/
>

・新標準HTML5 & CSS3辞典
< http://www.amazon.co.jp/dp/4844331752/
>

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

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

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/
>

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［番外］
Dreamweaver CS6 「可変グリットレイアウト」〈後編1〉〜CS6 その2〜

森　和恵
< https://bn.dgcr.com/archives/20120611140100.html
>
───────────────────────────────────
こんにちは。森和恵です。先週から梅雨入りしましたね。天気が悪いと遊びに行く足は鈍りますが、そのぶんインドアでじっくりと何かに取り組むには絶好の機会です。読みそびれていたメルマガの記事を、まとめて読み返すいい機会かもしれませんね。(^^)

さて、次回に引き続き、Dreamweaver CS6 新機能の目玉「可変グリットレイアウト」について、まとめたいと思います。今回は少しスケジュールがタイトなため、ショートバージョンでお送りします。ゴメンナサイ！

●前回のまとめ

スマートフォン・タブレット・デスクトップ......マルチデバイスに一つのHTMLファイルで対応するべく、「表示する画面サイズの変化に応じてレイアウトが変化する」ページのことを、「レスポンシブウエブデザイン」と呼びます。

「可変グリッドレイアウト」は、スマートフォン・タブレット・デスクトップの3種類用のレイアウトを、プレビュー（ブラウザに表示されている状態）を見ながら、直感的に作成するための機能です。

前回は、概要から「可変グリッドレイアウト」の基本操作までをお話しました。

　　【前回】Dreamweaver CS6「可変グリットレイアウト」〈前編〉
　　〜CS6 その1〜
　　< https://bn.dgcr.com/archives/20120528140300.html
>

●まずは、スマートフォン画面

「モバイル・ファースト」という言葉があります。レスポンシブなページを作るときは、スマートフォン→タブレット→デスクトップの順、つまり画面の小さいものから大きなもの順にデザインしましょうという考え方です。「モバイル・ファースト」＝「モバイル（スマートフォン）が一番目」という意味です。

実際に作ってみるとわかるのですが、先に画面の大きなサイズでレイアウトしたものを小さいものに変更するのは、つじつまを合わせるのに一苦労します。画面の小さいサイズで必要なコンテンツを少数精鋭で作り、画面に余裕が出た分で次点のコンテンツを加えていくほうがやりやすいのです。

というわけで、まずはスマートフォン画面から。画面幅が小さいので、列組がしづらく、一列で連ねていくようにレイアウトしました。

注目しておきたいのが、追加された依存ファイル
（boilerplate.cssとrespond.min.js）です。

boilerplate.cssを開いてみると、HTML5に対応したリセットCSS（ブラウザスタイルの初期化を行うCSSのことを通称でこう呼ぶ）のようでした。冒頭のコメントを確認してわかったのですが、「HTML5 Boilerplate」というテンプレートが使われていました。

「HTML5 Boilerplate」は、HTML5サイトを構築するために有志の方々がまとめたテンプレートやフレームワークなのだそうで、どうやらAdobeさんが可変グリッドレイアウトのテンプレートにこれを採用したようです。

では次に respond.min.js は？　というと、「IE6〜8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にする」ためのJavaScriptファイルのようです。IE対策で使っているようですね。

ここ近年のAdobeさんの傾向としては、なんでも自社開発するのではなく、一般的に広まっているのであれば既にオープンにある技術を取り入れるようです。現実に則してしている、という面ではよいところだと思います（ただ、それをやりすぎるとメーカーの特色が失われるような気がしているのですけれど。だったら、別にDreamweaver使わなくてイイじゃん、的な）。

　　【画面】< >

　　【参考】HTML初心者が知っておくべきリセットCSS と3つのポイント
　　< http://blog.3streamer.net/html-css-beginner/reset-css-1/
>

　　【参考】HTML5 Boilerplate, Initializrをこれから使う人が押さえるべ
　　き5つの原則
　　< http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/5-fundamentals-when-using-h5bp/
>

　　【参考】IE8以下でレスポンシブWebデザインを実現するRespond.js
　　< http://lab.informarc.co.jp/javascript/ie_responsive_webdesign.html
>

　　【注意】
　　［表示］-［ビジュアルエイド］-［可変グリッドガイド］メニューがオフ
　　になっていると、可変グリッド時のビューになりません。
　　Dreamweaverを再起動したときなど、見ためが違うな？　と思った時は要
　　確認です。また、画面右下の「デバイスの切り替えボタン」で、「モバイ
　　ルのサイズ」を選ぶとスマートフォンサイズになります。

IE対策は他でもうかがえます。例えば、最初の保存時に任意の名前で作成するCSSファイルの冒頭にある「.ie6 img」というセレクタですが、ie6というクラスセレクタでIE6時のブラウザ振り分けをしています。

なぜそれだけで振り分けが実現するかというと、作成したHTMLファイルの冒頭を見ると、IE条件分岐を使ってIEバージョンごとのクラスを付加していました。IE6の場合は、html要素が「<html class="ie6 oldie">」となり、「.ie6 img」のセレクタが成り立つ、というわけです。

HTML5のファイルでも、デスクトップ用としても使われるので、ある程度は下位互換が必要ということですね。勉強になります。

　　【画面】< >

●続いて、タブレットとデスクトップ画面も

画面が広くなるのに応じて、列数を増やしていきました。今回はサンプルなので、画面設計をしていませんが、実際にこの作業をする時は、そのサイトでどんなコンテンツが必要かをきちんと洗い出して、行き当たりばったりではなく枠取りしていく必要がありそうです。（後で「あ！　あの部分いれる枠を取ってなかったよ（泣）」とかになると、かなり面倒くさそう）

　　【画面】< >
　　【画面】< >

●ちょっとコツ。というか、お約束的なこと

可変グリッドレイアウトの新規ページを作ると、最初にIDセレクタ「#LayoutDiv1」が適応されたdiv要素が一つ作られます。また、3画面に対応するための仕組みとして（この辺、次回解説します）同名のIDセレクタが3つ存在します。

「#LayoutDiv1」という名前は、実務でページを作る時の名前としては少し使いにくく、名前変更するのもやりにくいという状況なので、私は削除してしまいました（タグセレクタで、<div#LayoutDiv1>を選択し消して、CSSスタイルパネルで#LayoutDiv1を3つとも削除）。

今回のサンプルでは、<div#header> や <div#footer> のように管理しやすい名前にしています。

下記にアップしたので、ソースを見てみてください。test.htmlはコンテンツの中身がシンプルなもの、test2.htmlは、ダミー画像やテキストを入れたものになっています（ダミーテキストを入れたものを使って、次回お話しする予定です。挿入されている画像のタグなどを見てみてください）。

　　【素材】今回作成したページ
　　< http://r360studio.com/dgcr/dgcr-extra21.zip
>

......ということで、今回は終わりです。短めですみません（汗）

次回、「可変グリッドレイアウト」の後半編残りと、Dreamweaver＋Fireworksで簡単に画像レスなCSS3ボタンを作る！　をお話しする予定です。
ではまた！（＾θ＾）

※記事へのご意見・ご要望は下記より受付ます。
< 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
>

もう一度ダメ押しでご連絡。6月28日 大阪 iMedioにて開催するCS6新機能セミナーを担当します。ぼちぼちお申し込みをいただいているようです。どうぞよろしくお願いします！
[ Adobe Dreamweaver＆Fireworks CS6で作る簡単スマホ対応サイト ]
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=13703
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記（06/11）

●先週の金曜日に、国立新美術館で開催中の「大エルミタージュ美術館展　世紀の顔･西欧絵画の400年」を見に行った。我が家の玄関を出て美術館の入り口まで約60分と意外に近かった。10:30頃に入場すると、観覧コースに人がつながっていたが混雑しているという感じではない。音声ガイドのある作品のところがやや動きが悪い程度で、まあ見やすい方だった。

展示は、16世紀＝ルネッサンス：人間の世紀、17世紀＝バロック：黄金の世紀、18世紀＝ロココと新古典派：革命の世紀、19世紀＝ロマン派からポスト印象派まで：進化する世紀、そして20世紀＝マティスとアヴァンギャルドの世紀という5つのパートに83作家、全89点を配し、絵画の400年の歴史をたどるというみごとな構成だった。壁の色も時代に合った色に塗り分けられていていい感じ。わたしは西洋美術を勉強したことがないから（西洋史もよくわからない）、近世のおなじみの作家名を確認して満足するという程度で、せっかくの至宝に対してまことにもうしわけない観客であった。西洋絵画マニアの妻はすごくご機嫌だったからいいのだけど。

この展覧会の目玉はマティスの大作「赤い部屋（赤のハーモニー）」のようだ。ポストカード人気第一位もこれだ。わたしもこのデザインっぽい絵は好きだが、エルミタージュ美術館のイメージとしてはモダン過ぎるような気がした。わたしが一番素敵だと思ったのは、マリー・アントワネットの肖像画家として有名なエイザベト＝ルイーズ＝ヴィジェ＝ルブランの「自画像」（1800年）である。美しい女性だ。観覧コースをずいぶん進んでから、こっそり戻って見た。でも自画像に優れた作家って、なんか微妙な気がしないでもない。

その絵は「大エルミタージュ美術館展」のサイトにはなかったので捜したら、2011年、三菱一号館で開催された「ヴィジェ・ルブラン展」のサイトの一番上にあった。このサイトにはもうひとつの「自画像」もあった。それは1791年のもので、そっちも素敵だ。「大エルミタージュ美術館展」は西洋美術の歴史を通覧するには手頃な展覧会だった。世界史を勉強し直さないといかんなあと思ったのであった。（柴田）

< http://www.ntv.co.jp/hermitage2012/index.html
>
大エルミタージュ美術館展 世紀の顔･西欧絵画の400年
< http://mimt.jp/vigee/
>
ヴィジェ・ルブラン展

●後記ネタがない、後記ネタがないと話していたら、深川氏のサポートが入るように。最近のネタは彼がパスをくれるものも。未消化ネタもはっとく！／東心斎橋の事件をまったく知らなかった。テレビやネットニュース、SNSを見なければ世間のことを知ることはないんだな......。／SNSといえば、日本のFacebookユーザー数は899万人でアジア7位、なのだそうだ。もともと人口の少ない国だしと一位を見たらブルネイ。次いでシンガポール、台湾。あれ？　日本の人口って今どれだけだっけ？　とWikipediaでの国勢調査の結果を見ると2010年時点で128,057,352人、2005年より289,358人増加。が、日本人の数は125,358,854人で、37万人減少。これって......。とにかく7%の人がFacebookアカウントを持っているんだって。／WOWOWメンバーズオンデマンド。加入者限定の無料番組配信サービス。スマフォやタブレットで視聴できる。加入者一人につき端末を3台まで登録可能。まずは「UEFA EURO 2012 サッカー欧州選手権」の全31試合をライブ配信。見逃し視聴、ライブラリー番組配信なども。映画の配信をしてくれるといいなぁ。（hammer.mule）
< http://markezine.jp/article/detail/15808
>
日本のFacebookユーザー数は899万人でアジア7位
< http://www.wowow.co.jp/mod/
>
WOWOWメンバーズオンデマンド
< >
深海の一反木綿