─[PR]─────────────────────────────────
有料メールマガジンをとってもお得に読めるサービスがついに登場。
たったの【294円】で【3000円分の有料メルマガ新規購読料】が【タダ】に！
☆★さらに、お得な豪華6つの特典付き★☆
↓↓↓詳しくはコチラ↓↓↓
http://a.mag2.jp/9ycV
─────────────────────────────────[PR]─
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【日刊デジタルクリエイターズ】 No.3278 2012/06/11.Mon.14:00.発行
http://www.dgcr.com/ 1998/04/13創刊 前号の発行部数 10042部
情報提供・投稿・広告の御相談はこちらまで mailto:info@dgcr.com
登録・解除・変更・FAQはこちら http://www.dgcr.com/regist/index.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
--PR------------------------------------------------------------------
★吉田印刷所が電子書籍販売サイト「印刷の泉」をオープンしました
┃ https://www.ddc.co.jp/estore/ ≪≪≪
印
刷 ●オリジナルの電子書籍・デジタルコンテンツを自由に販売可能
の ●販売価格は50円〜設定可能なので小さなコンテンツでも対応可能
泉
★デザイン・印刷・製本・DTPなどの印刷関係コンテンツ専門のサイトです
-----------------------------------------------------------------PR---
《どっちにする？ それとも…やめる？》
■明日もデザインで食べていこう！［35］
スマホアプリ、PhoneGap環境とTitanium環境で苦労した後に
Flash CS6環境で苦労をする
秋葉秀樹
■クリエイター手抜きプロジェクト［320］Illustrator CS3/CS4/CS5/CS6編
自動的にトレースしSVG/PNG形式で保存する
古籏一浩
■講師だって、最初は初心者だもの［番外］
Dreamweaver CS6 「可変グリットレイアウト」〈後編1〉〜CS6 その2〜
森 和恵
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［35］
スマホアプリ、PhoneGap環境とTitanium環境で苦労した後に
Flash CS6環境で苦労をする
秋葉秀樹
< http://blog.dgcr.com/mt/dgcr/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」と表示されるわけです。（下記画像参照）
< http://media.tumblr.com/tumblr_lfq8rvv7DE1qz7kgs.jpg >
「タップされたら別のウインドウを開く」といったプログラムを仕込むことも
できますので、ボタン代わりに使うことも一応可能です（ただしボタンはボタ
ンらしいデザインの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やAction
Scriptで書かれたコードを、ネイティブのコードに解釈しなおすことでカメラ
やコンパス、音楽プレイヤーファイルなどにアクセスできます。
しかしこれらの機能に、例えばiPhoneアプリをObjective-Cで制御できる新し
い機能が追加されたとしたら、それを解釈できるAPIというプログラムが実装
されるまで、その機能を使うことはできない可能性があるのです。
ただ、ひとつお断りをいれておくと、これらの手法やプロダクトはやはり便利
ですばらしいと思います。だから、否定するつもりはないです。でも言いたい
ことは、大事なことはこれから仕事として始めたい人は、こういったリスクが
存在するんだということをはじめに知っておく必要がある、ということです。
結局私はFlashというプラットフォームが一番向いているかな、と思いました
（人それぞれってことです）。「ワンソースでマルチデバイス」とか「Web技
術でつくれる」とか、うたわれていますが、その反面リスクにも注意しながら
向き合っていくべきと考えた方がいいでしょう。
◎Flash環境でカメラ撮影〜サーバに送信する
実はとても便利で楽しいです、ハマると大変だけど、それでも「根性」で問題
解決できる人が生き残れるんだろうな……。
さて、以前の記事でTitaniumでカメラアプリをつくり、WEB上のPHPファイルに
写真を送るというものを書きましたが、Flashではどうなるのでしょう？
< http://blog.dgcr.com/mt/dgcr/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形式で保存する
古籏一浩
< http://blog.dgcr.com/mt/dgcr/archives/20120611140200.html >
───────────────────────────────────
今回は、Illustratorで選択したフォルダ内にあるJPEG画像を、トレースして
SVG形式またはPNG形式にして保存するスクリプトです。
トレースした画像データをベクター形式で保存できるSVG形式であれば、HTML
5対応のブラウザでも表示することができます。ベクター形式の場合、ブラウ
ザで拡大しても画像がモザイクのように粗くなってしまうことがありません。
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〜
森 和恵
< http://blog.dgcr.com/mt/dgcr/archives/20120611140100.html >
───────────────────────────────────
こんにちは。森和恵です。先週から梅雨入りしましたね。天気が悪いと遊びに
行く足は鈍りますが、そのぶんインドアでじっくりと何かに取り組むには絶好
の機会です。読みそびれていたメルマガの記事を、まとめて読み返すいい機会
かもしれませんね。(^^)
さて、次回に引き続き、Dreamweaver CS6 新機能の目玉「可変グリットレイア
ウト」について、まとめたいと思います。今回は少しスケジュールがタイトな
ため、ショートバージョンでお送りします。ゴメンナサイ！
●前回のまとめ
スマートフォン・タブレット・デスクトップ……マルチデバイスに一つのHTML
ファイルで対応するべく、「表示する画面サイズの変化に応じてレイアウトが
変化する」ページのことを、「レスポンシブウエブデザイン」と呼びます。
「可変グリッドレイアウト」は、スマートフォン・タブレット・デスクトップ
の3種類用のレイアウトを、プレビュー（ブラウザに表示されている状態）を
見ながら、直感的に作成するための機能です。
前回は、概要から「可変グリッドレイアウト」の基本操作までをお話しました。
【前回】Dreamweaver CS6「可変グリットレイアウト」〈前編〉
〜CS6 その1〜
< http://blog.dgcr.com/mt/dgcr/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使わなくてイイじゃん、的な）。
【画面】< http://r360studio.com/dgcr/dgcr-extra21-001.jpg >
【参考】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のファイルでも、デスクトップ用としても使われるので、ある程度は下
位互換が必要ということですね。勉強になります。
【画面】< http://r360studio.com/dgcr/dgcr-extra21-002.jpg >
●続いて、タブレットとデスクトップ画面も
画面が広くなるのに応じて、列数を増やしていきました。今回はサンプルなの
で、画面設計をしていませんが、実際にこの作業をする時は、そのサイトでど
んなコンテンツが必要かをきちんと洗い出して、行き当たりばったりではなく
枠取りしていく必要がありそうです。（後で「あ！ あの部分いれる枠を取っ
てなかったよ（泣）」とかになると、かなり面倒くさそう）
【画面】< http://r360studio.com/dgcr/dgcr-extra21-003.jpg >
【画面】< http://r360studio.com/dgcr/dgcr-extra21-004.jpg >
●ちょっとコツ。というか、お約束的なこと
可変グリッドレイアウトの新規ページを作ると、最初に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メンバーズオンデマンド
< http://www.youtube.com/watch?v=-E-8_wDgN7c >
深海の一反木綿
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
発行 デジタルクリエイターズ < http://blog.dgcr.com/mt/dgcr/ >
編集長 柴田忠男 < mailto:shibata@dgcr.com >
デスク 濱村和恵 < mailto:zacke@days-i.com >
アソシエーツ 神田敏晶 < mailto:kanda@knn.com >
情報提供・投稿・プレスリリース・記事・コラムはこちらまで
< mailto:info@dgcr.com >
登録・解除・変更・FAQはこちら < http://www.dgcr.com/regist/index.html >
広告の御相談はこちらまで < mailto:info@dgcr.com >
★等幅フォントでご覧ください。
★【日刊デジタルクリエイターズ】は無料です。
お友達にも是非お奨め下さい （^_^）/
★日刊デジクリは、まぐまぐ< http://mag2.com/ >、
melma!< http://melma.com/ >、
めろんぱん< http://www.melonpan.net/ >
のシステムを利用して配信しています。配信システムの都合上、
お届け時刻が遅くなることがあります。ご了承下さい。
★姉妹誌「写真を楽しむ生活」もよろしく！ < http://photo.dgcr.com/ >
Copyright（C）, 1998-2012 デジタルクリエイターズ
許可なく転載することを禁じます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎クリエイターへ【日刊デジタルクリエイターズ】
のバックナンバー・配信停止はこちら
⇒ http://archive.mag2.com/0000005757/index.html
━【広告するなら、まぐまぐ！】━━━━━━━━━━━━━━━━━━━━━
大量に配信、確実な登録。メルマガ広告はクリック先のユーザー登録に強い！
３０種類以上のメニューから、お客様に最適なプランをご提案いたします！
お問い合わせはこちらから⇒ http://a.mag2.jp/iIks
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▽こちらもいかが？ビジネス・キャリアジャンルの注目メルマガ
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
●がんばれ建設〜建設業専門の業績アップの秘策
http://www.mag2.com/w/0000177186.html 週刊
建設技術者、建設業支援コンサルタント、そしてベストセラー「今すぐできる
建設業の原価低減」の著者である降籏達生（ふるはたたつお）。「儲かる」「
身につく」建設業関連データから厳選し、建設技術・経営・業界の最新情報を
配信。建設会社の業績アップ／現場代理人育成／技術提案／原価低減ネタはお
まかせ！
★発行者webもご覧ください↓
http://www.hata-web.com/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━【まぐまぐ！】━
┏┛￣￣┗┓
┣┳┳┏┻┃今なら！まぐポイント 【100億円】相当 プレゼント中！
┃┃┃┗┳┛~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
┗┻┻┫┃ イマナラ！
…… ┃┃ 新規の有料メルマガ購読に使える【まぐポイント】を
…… ┃┃ 全ユーザ様にもれなく 【1000pt】 プレゼント！
…… ┗┛ 詳しくはURLへ！！
http://a.mag2.jp/FrB1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
0 件のコメント:
コメントを投稿