第10回WordBench京都へ参加して(12/16)


※写真はまた後ほど(懇親会は別立てするので、たぶん肖像権問題がない写真だけにします)

今日は14時20分からです。選挙の投票に行く時間を考え12時過ぎに家をでました。しかーし、東福寺から京都駅に連絡するはずなのですが、スマホでウェブサイトを見ていたら伏見稲荷までいってしまいました・・・(>_<;)。とはいえ、なんとか14時すぎに会場到着。

今回のWSCコワーキング。ここの特徴は下の写真のようにかなりひろいベランダがあること。

ベランダ

さて、この勉強会は、講師自体が勉強中の方々で構成されていることが特徴です。つまり実際に勉強会に参加している方々の目線に近いところで話されるので分かりやすいんじゃないかなと思います。たとえば「◯◯の機能は実はわかってないけれど、とりあえず△△といれておくと動くんだよ」「英語サイトで□□を調べたけど、、、◇◇についてはよくわからなかったよ」というような言い回しも頻繁に出てきます。それはそれでいいと思います。発表することで発表者自身の理解が深まるとも思いますし。また、トラブル対応できるように可能な限り理由を調べたほうがいいのですが、事例をベースに話されると、説得力があり、またわかりやすく感じるものかなと思います。私は技術者なので理論から入ってしまう癖がついているので、得てして説明がわかりにくくなる傾向になったりする場合がありますが・・・。

以下、各セッションについてはメモ的な要素となります。※は私の思ったことや補足説明、それ以外は講師やその他の方の資料や発言されたことのメモです。

セッション1.LightBox風JavaScriptを使ってポップアップ上でカスタムフィールドを出力(@akiyum)

WordPress歴1年少々のデザイナーの方。

目的:LightBox風画像へキャプションを追加する。
準備:「jQuery」(Google AJAX APIでも可、WordPressにもデフォルトで入っているから大丈夫かも?)、「colorBox」、「Custom Post Type UI、Advanced Custom Fields」(カスタム投稿用)のプラグインを導入

カスタム投稿タイプとは?

「投稿」をもう一つ作る、みたいな感じ。
たとえば、ブログのために「投稿」が用意されているが、たとえば「料理のレシピ集」のような投稿については、分けて管理したいと思うことがあるはず。なぜなら、調味料やジャンル、その他細かいカテゴリー分けが考えられ、他の投稿と分けた方が管理しやすいため。

カスタム投稿の設定

投稿タイプ名を「food」と仮定する。

archive-food.php(archive.phpをコピーしてから変更していく)をおいて、カスタム投稿のタイプを「料理」として、その他、料理のフィールドの出力を「加熱法」「ジャンル」などに設定。パーマリンク設定のカスタム構造で「/%category%/%postname%/」を設定することで、URL固定(固定ページでも可能なはずだけど)。

archive-food.php:カスタム投稿の出力宣言とサムネイル表示部分の2つに大きく分かれている。

苦労点

  1. Custom Post Type UIの設定で「has archive」をtrueにしておかないと、「archive.php」が投稿タイプのスラッグを認識してくれない
  2. colorBoxのポップアップ表示を内包するコードのidを振り分けないと、ポップアップが正しくでない(最初の1つしかポップアップされない)
  3. Advanced Custom Fieldsの画像フィールドの出力コードが、参考サイトをみてもうまくいかなかった。
    img srcを入れるだけではだめだった。

質疑応答

  • jQueryの利用選定:「WordPress標準、Google  AJAX API、手動導入(外部読み込み含み)の3つぐらいあるが、どれを使われた?」
    手動導入した。「追加質問:どれ使うのがいいのか?」
    WordPress標準搭載のものはカスタマイズされており、これを使うと書き方が変わる。
    Google AJAX APIを使うほうが高速化されているのでよいのではないか(CDN等)
  • jQueryの重複をなくすには?
    ※「WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例」というところの説明が詳しそう。
    ※各プラグインや手動登録するときには「wp_enqueue_script」メソッドを使うのが吉。つまり重複しててもその中での最新版が自動選択されるため。

セッション2.レスポンシブ・ウェブデザインによるスマートフォンサイト構築(@matsudasu)

*お断り・・・少しタイトルとずれている話しになると思うとのこと。

レスポンシブ・ウェブデザイン(RWD)とは?

Google翻訳等を駆使していろいろ調べたけれど、、、。

<link rel=”stylesheet” media=”screen and (max-width: 480px)”  href=”mobile.css” /> など

別の書き方としては

@media only screen and (max-width: 480px)
{
…….
}

*onlyは理解できないブラウザは無視するための設定(Internet Explorer 8以下は使えない)

特徴(1コンテンツ、1URLにできる)

サイト構造の一貫性(モバイルのための専用URLを用意する必要がない)

  1. 更新修正の省略化
  2. アクセス解析
      コンテンツごとのアクセス解析が容易(「1」と関連)
  3. 検索エンジン最適化
    Googleの公式ブログでの推奨(2012年6月12日)として「1」を推奨している。
    ※ただ注意点として「Googleが推奨しているのは、レスポンシブ・ウェブデザインではない!?」の記事とかも合わせてみておくといいかもしれません。

RWDを使う判断は?

  1. RWD vs PC・スマホ
    PC・スマホ版を作った方が簡単かも
  2. RWD vs PC・スマホ・タブレット
    まだ、PC・スマホ版を作った方が簡単かも
  3. RWD vs PC・スマホ(縦・横)・タブレット(7inch、10inch) and more
    増えていくと対応が大変だ・・・・。そろそろRWD対応を考えねば??

つまりマルチデバイス対応をするためには、遅かれ早かれRWDを考えていかないと持たないでしょう。

願望

2014年4月には、WindowsXPがサポート対応外になる、、、つまりInternet Explorer 8以下がサポート対応外になる・・・いやしたい(願望)。
※もし願望がかなったら、HTML5対応のみで良くなる!?
 

タイムスリップ(2年前)

2010年の春にAndroid 1.6の機器が出始め、2年後の今では多種多様なデバイスが乱立している。2年後はどうか!?予測できない状況は十分考えられる。つまり、処理能力、解像度、回線速度、ブラウザは?など複数の要因によって対応しないといけないことが爆発的に増える可能性がある。

◯◯ファースト

モバイルファーストとか、コンテンツファーストなどと呼ばれるものがある。

  • 設計と実装を分けて考える
  • インブラウザデザイン
    いまは、Photoshopなどできっちりとデザイン・レイアウトを作ってから、Webサイト構築をするのが主流だが、これは全部をブラウザ上で全部やってしまおうという方法(CSS3を活用)。
    ※こんな苦労をされているとか、こうやってやってるよとかいうブログがありますね。

スタイルを切り替える幅(ブレイクポイント)

Twenty ElevenとTwenty TwelveがRWDに対応している。

Twenty Twelveの場合には

@media screen and (min-width: 600px)
@media screen and (min-width: 960px)

のような記述がある。上の方はモバイルを意識したスタイルとなっている(第9回WordBench京都勉強会で@chachamaruさんが詳しく説明されていた)。
※その後にはInternet Explorerを意識した設定もあるようだ。

チェック方法

Chrome, Firefox, Viewport Resizer, Responsivatorで確認可能

※Chromeプラグイン「Resizer」も便利らしいですね。

オススメはPC向けから

モバイルファーストなどをうたわれると、モバイルから作成しないといけないと思うかもしれない。
しかし、PC向けから作ることが簡単。それは下記の理由があげられる。

  • フローやノウハウが豊富なため。
  • Internet Explorer 8にやさしい
  • スマホサイトはそれなりの経験が必要

意外と簡単

いろいろなサイトでは、「難しい」という情報が多い。しかし実際にやってみると意外と簡単と思うんじゃないかと思う。

質疑応答

  1. RWDチェックはどこを触るのか?もう一度教えてほしい
    Firefox(※直感的に分かりやすそう)
    ツール→Web開発→レスポンシブデザインビュー
    Chrome(※細かい設定ができるとのことだ)
    右上のツールアイコン→ツール→デベロッパーツールを選択
    右下隅の歯車アイコンをクリックして、「Overrides」タグの「Device metrics」を変更
  2. 書き方は?(考え方は?)
     たとえばPC版を複数のCSSなどでしっかりつくって、後は960pxを超えたときなど部分対応をすればいけるんじゃないか? つまり共通部分を書いた上で、マルチデバイス用に部分上書き(CSSの)しているということ。つまりデバイスごとにCSSを分けるんじゃなくて、コンテンツが◯◯のサイズならこうしたほうがいいというような考え方の方がいいということだそうだ。
  3. 960pxという数字ってのは何の基準?(WordPressの標準テーマで使われたりしてるが)
    何故1000pxじゃないのか。8で割り切れるからじゃないか。アスペクト比を考えたんじゃないか?
    基本的にサイドメニューを考慮が入っているので、1024pxとかじゃないんじゃない?とか。

セッション3.JQuery mobileを使ったスマートフォンサイト構築(@kyotokk)

2009年8月からWordPressに触り始めたWeb企画・構築等をしている方。

餅は餅屋ということわざ知ってる?

餅はスマホ、餅屋がjQuery mobileのこと。そうおもって話しを聞くと分かりやすいかと。

jQuery mobileを使うメリット

  1. 様々なデバイスを対応している(Internet Explorer も7からも対応している)
  2. デザインセンスがなくてもリッチなUIを構築できる
  3. ThemeRollersというサービス(高速開発が可能)

ドキュメント

基本的にドキュメント構造は日本語版も英語版も同じのため、日本語ベースにして新機能は英語サイトを参照にしたらいいんじゃないか。

ThemeRollerを使う

注意点:jQuery(jquery.minとか)を読んでから、jquery mobileを読みこまなくてはならない。
*Header Cleanerのようなツールを使う場合には、ここを除外するなどの措置が必要。

サイトで設定してダウンロードするとzipファイル等でゲットできる。このうちindex.htmlを変更していく。
※「 jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説」が詳しいか・・

デメリット

  1. jQuery Mobileっぽいデザインになってしまう
    http://www.jqmgallery.com 風の
  2. 不具合のときのデバッグが難しい
  3. デバイスによっては動作が遅い・・・らしい(Web情報)

利用の流れ

  1. ThemeRollerで作成し、ダウンロードしたフォルダをWordPressのThemesフォルダに入れる
  2. index.htmlをindex.phpへ変更, style.cssを作成。
  3. header.php, footer.php, function.php等 その他必要に応じていれていく。

プラグイン紹介

  • Theme Check(使い方はこことか)
    テーマを作ったらそれをチェックするもの
  • multi-device-switcher(使い方ははこことか)
    ユーザーエージェントによって使うテーマを変更することができる

質疑応答

  1. 出来ないことを実現するには?
    目指しているものが分かっていて、jQuery Mobileが使えないとわかっているなら、他の方法を模索することになるのでは。たとえば必要であればjQueryのライブラリで実装することは勿論できる。
  2. jQuery Mobileにアニメーション処理があるが、Android 4.0以下では不安定なことがあるが?
    ※ http://jquerymobile.com/gbs/ の4.0では、「Note: transition performance can be poor on upgraded devicesと書かれているので、何かあるのか。。。http://forum.jquery.com/topic/jquerymobile-1-0-does-not-support-android-4-0-ice-cream-sandwich などによれば、4.0のice cream機能とjQuery mobileの問題だったりするかもしれない(ボリュームあるので、最初の少ししか見てませんが)。

関連情報

2012年12月16日 木谷

広告

第10回WordBench京都へ参加して(12/16)」への1件のフィードバック

  1. ピンバック: 第10回WordBench京都 – 忘年会 - « Kimiya Kitaniの徒然なるブログ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中