2012.11.27 [火] Adobe MuseでWebサイト

先日、約3年ぶりに行われた「WCAN mini Markup」のLTをしてきました。内容は「Adobe InDesign」を使ったものだったのですが「Adobe Muse」も検証をしたので、今後に役に立つかもしれないなと、使い方を紹介しておきます。
とりあえず、体験版を試すためにAdobeのサイトからMuseをダウンロードします。

今回は、こんなサイトを作ろうと思います。

起動そして、準備

起動画面は正方形ですね。AdobeCS6シリーズとは違います。

まずは、新規Webサイトの作成です。ファイルメニューから新規サイトを選択してダイアログを表示させます。新しく作成するサイトの“横幅”“マージン”“パディング“を設定してOKボタンを押します。


最初はプランモードが表示されますので、ページや階層などを構築していきます。また、ヘッダーやフッターなど統一されたものは、マスターページに制作をすれば流用が簡単です。このへんは、「InDesignの操作に似ている」とよく言われてる部分です。
カーソルを合わせると左右下に「＋」ボタンがでてくるので、横はグローバルメニュー、下はローカルメニューのページが作成されます。


今回は6ページほどのページで作ろうと思います。これで、準備は完了です。

マスターページを設定

ヘッダーとフッターのデザインは統一して流用したいので、マスターページを設定します。マスターページもページと同様、左右に「＋」ボタンがありますので、複数作成することができます。「A-マスター」のサムネイルをダブルクリックすると編集ができるようになります。ツールは数が少なくシンプルです。


ヘッダー領域に“サイトタイトル”と“グローバルナビゲーション”、フッター領域に“コピーライト”を作成します。
グローバルナビゲーションは、ウィジェットライブラリ＞メニュー＞水平方向をドラッグ＆ドロップするとプラン画面で作成したページ数、ページ名を反映したメニューが生成されます。
ウィジェットライブラリを使うとHTMLが<li>でマークアップされますし、自動的にページリンクもしてくれます。


あまり複雑な形には変換できませんが、四角や角丸、グラデーションなど変更ができます。


ウィジェットライブラリーには他にもライトボックスやツールヒントを実装できる「コンポジション」や「スライドショー」、アコーディオン、タブつきパネルなどの「パネル」、「フォーム」なども用意されていて、JavaScriptやHTML, CSSを知らないとできない表現が簡単に取り入れられるようになっています。

フッター領域に配置したいアイテムは、右クリックをして「フッターアイテム」にチェックを入れておきます。チェックが無いと、領域に移動させることができません。



これで、マスターページは完成です。プランモードを確認してみると、すべてのページに反映されているのがわかります。

Topページの作成＆段落スタイルの設定

続いて、ページの作成をしてきます。テキストは他のグラフィックソフトと同じく、テキストボックスを使用します。


画像は、ファイルメニュー>配置で読み込みます。ハンドルや数値で大きさなどを決めます。最初からマスクが設定してあり、画像をワンクリックした場合はマスクの大きさ、ダブルクリックして枠が茶色っぽくなれば中身を変更することができます。ここは、他のグラフィックソフトのように“ダイレクト選択ツール”などツールの使い分けではないので、少々迷うかもしれません。


段落スタイルの設定は「InDesign」とほぼ一緒です。

1. 登録したいテキストにカーソルを合わせます。


2. 段落スタイルパネルで名前と段落タグ（p,h1～h6）を設定します。

これでHTMLに書き出した時に、設定したタグでマークアップされます。

その他の便利な設定

Museには、その他にも便利な設定が最初からついています。
まず、各オブジェクトには、最初からステート設定されており“通常”“ロールオーバー”“マウスダウン”“アクティブ”時のビジュアルを変更することができます。いまのWebサイトでは、ボタンのロールオーバーは必須になっているので、これはとても便利です。


ページ内のリンクも簡単に、ドラッグ＆ドロップでアンカーをつけられます。さらに自動でアニメーションの処理がされます。

HTMLで書き出し

サイトの確認は、プレビューモードで確認できます。


また、ブラウザでも確認ができます。


確認ができたら、HTMLで書き出せば終了です。
ディレクトリもわかりやすく、html, css, script, imageに分かれます。


また、パブリッシュをするとAdobe Business Catalystにアップされます。アップされるとアクセス解析など、独自の管理ツールが使えるようです。


Adobeのグラフィックソフトを使っている人であれば、簡単に操作することができると思います。Adobeが提唱している通り、htmlなどを知らない人でも簡単にとはいかないにしろ、手軽に数ページの静的サイトが完成できるのは、魅力的です。
また、コーディングができる人は、簡単にワイヤーフレームを作って、そのまま書き出したhtmlを使って作業を進めることで時間短縮にもつながるかもしれません。簡単にWebサイトを制作するソフトも色々とあると思うのですが、Museは構造がわかりやすくなっているので、html, cssのカスタマイズもすんなりできそうです。
今回サンプルとして制作したサイトはこちら。

今ぐらいのシンプルなメニュー数、ツール数でバージョンアップしていってくれると嬉しいですね。（今は、表組とかはできない、みたいです。）
書き出したら、とても長い記事になってしまいました。

追記：モバイル/タブレットレイアウト機能を追加した3.0が公開されているようです。

2012.11.25 [日] JSクリニックに参加してきました。

書くのが遅くなってしまいましたが、ベースキャンプ名古屋で行われた張山さん主催の「JSクリニック vol.1」に参加してきました。
参加者がJavaScriptを使用した案件でのお悩みなどを、ドクターハリーさんが解説してくれるという勉強会です。

今回は、マウスオーバーなどもできる画像を使ったチェックボックスを診断してもらいました。
自分で検索で探してきたプラグインを使用して制作をしたのですが、Internet EXPlorerでは、<label>の子要素に画像を入れられないので、それを回避しようとしてあるのですが、Internet EXPlorer9だとダブルクリックしか反応しないという怪現象が起きます。
「[jQuery]個別の画像をラジオボタンやチェックボックスにするプラグイン」RuputerFan

さらに、それを回避するためにIE9以上の場合のみ変更のスクリプトを記入しました。

$(function () {
    if ($.browser.msie && $.browser.version > 8) {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
    }
});

回避の回避でちょっと嫌な感じだったので「もっとわかりやすいプログラム」にしたいというのが希望でした。
解説していただいた内容を、復習のため自分で再度作り直してみたので、忘備録として書いておきます。

まず、htmlはlabelを使用せずpで画像をマークアップします。
checkboxも使いません。

  
東海三県の画像をクリックして送信
  

  

  

  

    

    

    

    

  

CSSは各ボタンの位置をpositionで配置してあります。

div#mainArea p img{position:absolute;
 }
#aichiButton{left: 140px;	
		　 top: 251px;
		　 z-index: 3;
}
#gifuButton{left: 80px;	
		　top: 50px;
		　z-index: 2;
}
#mieButton{left: 1px;	
		　top: 282px;
		　z-index: 1;	
}
div#mainArea form{position:absolute;
			　　left: 200px;
			　　top: 550px;
}

見た目の処理と値を送る処理を別にします。まずはhover（マウスを乗せると画像が切り替わる）の処理です。

jQuery(function($) {
// Initialization
$.lm = {
	init: function() {
		for (func in $.lm) {
			if ($.lm[func].init)
				$.lm[func].init();
		}
	}
};

// Image hover
$.lm.hover = {
	init: function() {
		$('.hover')
			.live('mouseover', this.enter)
			.live('mouseout', this.exit)
			.live('focus', this.enter)
			.live('blur', this.exit)
			.each(this.preload);
	},

	preload: function() {
		this.preloaded = new Image; //Imageクラスを使用して HTMLImageElement を作成
		this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_o$2");
	},

	enter: function() {
		if (!this.src.match(/^(.+)_o(\.[a-z]+)$/) && !this.src.match(/^(.+)_a(\.[a-z]+)$/)){
			this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_o$2");
		}
	},

	exit: function() {
		if (this.src.match(/^(.+)_o(\.[a-z]+)$/)){
			this.src = this.src.replace(/^(.+)_o(\.[a-z]+)$/, "$1$2");
		} else {
			this.src = this.src.replace(/^(.+)_a(\.[a-z]+)$/, "$1$2");
		}
	}
};

/* onload ***********************************************/
$.lm.init();

});

画像イメージについて（HTMLImageElement）は、JavaScript プログラミング講座
カプセル化 については、jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ（5509）
正規表現に関しては、 「webデザイナのタメのかんたん正規表現。
jQueryでの使い方と読み方」（がんばるデザイナ tuts!php,html5,photoshopとかがんばってみる） にわかりやすく解説されています（感動!!）。

次にクリックされた値をvalueに当てはめます。

var img = new Image();
img.src = "img/aichi_s.gif";

jQuery(function($){
	// 初期化
	$("#aichi").val(""); //id="aichi"のvalueを無しにする
	$("#aichiButton").click(changeCheckbox);　//clickした時に関数changeCheckboxを動かす
	$("#gifu").val("");
	$("#gifuButton").click(changeCheckbox);
	$("#mie").val("");
	$("#mieButton").click(changeCheckbox);
	
	function changeCheckbox(){
		var id = $(this).attr("id").replace("Button", ""); //変数idは.attrでクリックしたオブジェクトのidを取得し.replaceでButtonを消したもの
		var province = $(this).attr("alt"); //変数provinceはクリックしたimgのaltを取得したもの
		if($("#" + id).val() == ""){ //valueの値が無しだったら
			$(this).removeClass("hover"); //まずマウスオーバー処理を止める
			if($(this).attr("src").indexOf("_o.gif") != -1){ //hover画像であれば
				$(this).attr("src", $(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1_s$2")); //select画像に入れ替える※正規表現
			} else { //通常画像であっても
				$(this).attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_s$2"));　//select画像に入れ替える※正規表現
			}
			$("#" + id).val(province); //そしてvalueに変数provinceで取得した県名を入れる
		} else {　//何らかの原因でvalueの値が入っていたら
			$(this).attr("src", $(this).attr("src").replace(/^(.+)_s(\.[a-z]+)$/, "$1$2")); //通常画像にして ※正規表現
			$(this).addClass("hover"); //後からマウスオーバー処理を止める
			$("#" + id).val("");　//valueの値を無しにする
		}
	}
});

実際の動きは→ここ

いろいろと調べてコメントの記入をしていたら、ちょっと見づらくなってしまいましたが、コードとしてはわかりやすくなりました。張山さん、クリニック後のフォローもしていただいて、ありがとうございました。2回目も楽しみにしています！
コードの表示に「HIGHLIGHT.JS」を適用させていたら結構時間がかかってしまいました（言い訳）