「効率的なサイト制作のためのDreamweaver活用seminar」行ってきました

どうも。ハロウィンがもうすぐで、ルンルンなみまです。

スマートフォン対応の勉強会に行ってきました。
タイトルにDreamweaver活用とありますが、DWだけでなく
スマートフォン向けのサイト制作の根本的な考え方や他の便利ツールの紹介など幅広く教えて頂きました。
色々なところにネタが仕込まれていて、面白かったです。
スマートフォン対策自体は、Media Queriesを使ったことがあるくらいです。
あとは、jQuery Mobileをちょっと弄ったり作ってみたりです。
この勉強会に参加しピンポイントな知識しか無かったことに気づき、また、幅広く手法や作成ポイントなどについて触れることが出来ました。
以下、まとめです。

レスポンシブWebデザイン

UI設計について

色んな使い方をしている人がいる。
自分の使いやすいだけが全てじゃない。
しかも、Android端末は３９９７種類あり、幅と高さと比率がそれぞれでちょっとずつ違う。

スマホ用に作成する方法

1.アプリにする
2.スクラッチ（別途作る）
3.流用系(PCサイト用を使う)

2.スクラッチ

PCサイト用とは別に作るタイプ。

jQuery Mobileを使う

jQuery Mobileの難点として、デザインがばればれになる。
UIを凝ろうとすると大変。

★jQuery Mobileのオススメサイト
QueryMobile Gallery　（http://www.jqmgallery.com/）

DWでjQuery Mobileページを作成する際のポイント

モバイルスターターの新規ページを作成する際の選択肢にある、「CDN：コンテンツデバイスネットワーク」。

これは、jsをローカルに置かないで作業が出来る。
キャッシュされるので軽い。

DWは、オプション+F11を押すとライブ画面になる。
ライブ画面内リンクをクリックして別ページに移ったらDW上の戻るボタンを押すと元の画面に戻る。

Q１：なぜ１つのhtmlページ内に全ページ分のソースを入れるのか。
１ページ内に全て入っているため電波が切れても、キャッシュされていて見ることが出来る。
（外部ページに飛ぶ際にはエフェクトがかからないと思われがちだが、アニメーション有りで飛ぶことが出来る。）

・DWでiPhone Similatorモードを使うには
iOSシミュレータ.app（x-codeを入れたら入ってくるやつ）を入れて、DWで登録する。
（※ macでしか使えない。）

メニュー＞挿入＞ヘッド＞ビューポート
を選択するだけでビューポートのソースが入る。

ちなみに、
「device-width」の記述があるとiphoneの場合は、320pxで認識される。

ウィンドウメニュー＞挿入＞jQueryMobile＞ボタン
でボタンを挿入出来る。

ウィンドウ＞jQuery Mobileスウォッチでボタンの種類や色変換が簡単に可能（CS6〜）

PSとSPの切り換え方法

1. js
2. .htaccess

1.jsで切り替えた場合
スマホ用のサイトを表示しますか？とポップアップで聞いてきて選択出来る。

3.流用系

PCサイトを修正してスマフォでも見れるようにする。

★Media Queriesのオススメサイト
・Media Queries　（http://mediaqueri.es/）
・Hello Fisher　（http://hellofisher.com/）
・「cssnite 伊原力也」
これで検索すると、CSS Nite LP, Disk 13サイトが出てきます。
スライドが参考になります。

DWでのSVN設定方法

残念ながら、DWはGitをサポートしてない
サイトの管理＞編集＞バージョンコントロール＞アクセス＞Subvertion
設定してみようかな・・・と思ったら、便利ソフトをご紹介頂きました。

★おすすめソフト
foreverSave2　(有料)※macのみ
DWのファイル、１０分ごとにセーブとかが出来る。

レスポンシブデザインとは

→フレキシブルリキッド（リキッドレイアウト）
→Fluid　images(フルイドイメージ画像・可変）
こんな感じのソース。

  　img{
     　max-width:100%;
     　height:auto;
　　　　}

     background-size: 100% auto;

    background-size: cover;

coverを使うことで上下左右に伸び縮みする。

metaタグでの読み込み方法

1.linkで書く

無駄な長さが・・・しかし、重い@importよりこっちの方が軽い。

2.@importで書く

     @import url('style.css');

メンテナンスしやすい。

3.@mediaで書く

     @media only screen and
　　　(min-device-width : 320px)and
　　  (max-device-width : 480px) {
     hogehoge:hogehoge;
     }

httpリクエストを減らすにはコレ。

DWでMedia Queriesを使う際のポイント

ソースは、モバイル向け→タブレット向け→PC向けの順に書いた方が無駄が少なくなる。
（例えば、わざわざフロートさせたコンテンツをフロート解除させたり）
DWだと、グリッドレイアウト新規作成をすると、最初からモバイル記述から始まる。
そして、DWでは、デザイン画面でidを変えるとhtmlもcssも全て変わってる。
変更漏れ防止になる。

【重要】いくらシミュレータで表示を確認しても、実機確認は必要！！

便利

Zen-Coding
macだとデフォルトのコマンドきかないから変えるそうです。
あと、文字を入力した後にulなどのタグを挿入出来ることを知りました。
テキストを全部選択してCtrl＋Hあたりで出来るようです。

これから

Googleが「スマホ対応はレスポンシブの方がいいんじゃないの？」って発表した。
が、本当にそうなのか？
「PCと同じ画面が表示されると思ったのに」って人は意外と多い。
（＝PCと同じものを表示させたいって人、多い。）

スマフォだけで閲覧している人は、外したコンテンツを一生見れないことになる。
そして、ロイヤリティが高いユーザーほどいつもと違った画面に悩む。

作り手の配慮が必ずしも喜ばれるとは限らない。
それじゃ、PCサイトとスマホサイト、切り換えリンク必須じゃないの？！

切り換えを実装されたそうです。
DTP Transitサイトだったと思うのですが、、、実装ページ見つけられませんでしたT△T
ソース、見たかったなー。。。

最後に
レスポンシブを考えるのではなく、
どういうコンテンツをどういうユーザーに提供するか
が重要。

質問コーナー

スマホのバグを調べる方法は？
「スマートフォン　若松　スライドシェア」
で検索。
「スマートフォンブラウザ不具合特集」です。

西畑さんのto-Rサイトでは制作の際に困ったところがよく挙げられているそうです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以上、まとめでした。
スマートフォン対応って大変ですね。
「解決方法があって、実装が大変」
というレベルではなく、バグや機種が多すぎて「どうしよう？」と模索していかなければいけない大変さです。
出来れば、避けたいですね。
うん。。。
iPhoneアプリ作りを頑張ります。
Androidいやです＞＜。
仕事ではスマホ対策、頑張りますがね、、、

Mima Memotto