html5

PC用とスマホ用のレイアウト切替ボタン

「現在のサイトをスマホ対応にもして欲しい」との依頼

ここは Google大明神の推奨する方法でやるしかないでしょう。
(https://developers.google.com/webmasters/smartphone-sites/details)
という事で、いわゆるレスポンシブwebです。
(あまりに古いサイトは、サイトをリニューアルした方が良い場合もあります)

その流れで、サイトのPC用レイアウトとスマホ用のレイアウトの切り替えボタンが必要になり作成しました。
「ボタンを押せばレイアウトが切り替わる」という例はいくらでも検索で見つかりますが、では、選択したレイアウトを利用してページを推移した時に選択したレイアウトは維持されるのか?と言えば細工をしないと無理です。

いろんな実装方法があると思いますが、今回は、jQueryでクッキーを操作して作成して、参照する先のCSSファイルを保持したままページの推移をしています。
こんな感じ。

ポイントは、

  • jQuery cookie の使い方
  • CSSのリンク先を記述(分岐するように)
  • 読み込むcssの中身(htmlとcssの知識)

でしょうか。
切替ボタン作成に関しての作業は、

  • jQuery を読み込ませる
  • クリックしたときのイベントを書く。CSSのリンク先を記述も
  • 読み込むcssの中身を作ってゆく

こんな感じでしょうか。私の場合は、先にスマホ用表示のレイアウトを、お客さんのサイトを見ながらCSSを書いて、ボタン作成作業で、それらをドバっとスマホ用のCSSに載せました。

残る実装作業は、
このボタンをPC用サイトでも表示するのか・しないのかなど、運用・使用上の問題をお客さんと話し合って実装(たぶんメディアクエリー使用)という流れになります。

最後に、PC用のレイアウトで、スマホ用の切り替えボタンを表示しているサイトが少ないように思うので、こんな意見を載せておきます
(私個人的には、PC用のサイトでもレイアウト切替のボタンは表示させておく方が良いのではと思っています)

http://www.elezea.com/2012/09/responsive-design-expectations/ このページのより
ここでは
「スマホで通販サイトを見て、購入前にはパソコン用のレイアウトに切り替える」「それは、スマホ用のサイトは、PC用のサイトに比べ情報量が少ないと思っているから、」というように書かれています。
どうでしょう。実は私もそんな風に思っています。本当に同じ情報なのか確かめたくなります。
ということで、スマホで見た時にレイアウト切替ボタンは必須である事は間違いありません。
上の英語の記事は、「スマホサイトにPC用にレイアウト切替ボタンはつけておく方が良いよね」という事になっています。

PCでサイトで見た時はどうでしょう。パソコンで見てスマホ用のレイアウトに切り替える人はいないかもしれませんが、
「あーレイアウトが切り替わるだけね」と確認してもらうためにも、表示させておいた方がよくありませんか・・・・
「混乱させないためにPC用レイアウトには切替ボタンは非表示」という考え方もありますが、私は余計なパターナリズムかなと今のところは思っています。

後日追記:
上記のように、PCサイトにも切替ボタンつけた方が良いかも、と書きましたが、実装していて気づきました。
PCサイト上でのクロスブラウザーでの検証と対策、スマホ用ブラウザーはバリバリにCSS3.0とHTML5で対応なので、PC用の旧ブラウザーでの検証の実作業が発生するので、費用が「さらに倍」となりかねなかったです。作業時間と効果を考えれば、PC用サイトではレイアウト切替ボタンはイラネーという線が濃厚になるのも仕方がないことかもしれませんね。

Html5とスタイルシートのリセットCSS

Html5が言われてずいぶんと経ちますが、PC向けサイトよりいち早くスマートフォンサイトでは、Html5+CSS3.0でというのが定番ではないでしょうか。
しかし、スマートフォンのブラウザーのバージョンによっては、Html5に対応していなかったりするようで(iPhone3.2)、PC向けサイトだと、まだまだこれからではないでしょうか。
少し古い記事ですがリセットCSSの記事があったので掲載しておきます。

参照サイト http://html5doctor.com/ より

HTML5 Reset Stylesheet
Monday, July 27th, 2009 by Richard Clark.

We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.

The code

Let’s start with the complete CSS stylesheet:

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark – http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

So what’s new?

Quite a bit! The next few sections explain what I changed and why I changed it.

The basics

I started by removing elements that have been deprecated from the HTML 5 specification, like ,

and . (We’ll cover deprecated elements in more detail in another post). I also added new HTML 5 elements, like and, in order to remove any default padding, margin, and borders. I’ve also added an explicit display:block property for elements that are required to render as blocks.

I also removed the explicit unstyling of the :focus pseudo-class. There are two reasons for this. First, by declaring outline:0, you remove the focus identifier for keyboard users. Second, Eric released his stylesheet in good faith that people would explicitly style :focus, but they generally don’t, so it’s safer to leave the default :focus styles in place. (I also set defaults for , since I don’t think that got updated very often either.)

I’ve left the default list styles in place simply as a personal preference. I tend to add the list style back when using Eric’s reset anyway. I have, however, included nav ul {list-style:none;} to remove those pesky bullets from your navigation.

Using attribute selectors

You’ll notice that I’ve included attribute selectors for and . This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.

What’s that bit about mark?

is a new element introduced in HTML 5 used to (you guessed it) mark text in a document. According to the spec: ““The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.””. I anticipate it will be used for highlighting phrases in search results and other similar purposes. We’ll post more on soon.

Where are all those application elements?

Application elements is a term I’ve loosely used to describe elements like menu, etc. These elements are more likely found in web apps than web sites. I left these out since, at the time of writing, browsers implement barely any of what was “Web Applications 1.0″. Also, this stylesheet is intended primarily for authors serving their pages as text/html, not XML.

Go grab it

The stylesheet is released under a Creative Commons license in the public domain, so you can use it for both personal and commercial work. I thought I’d let Google take care of the hosting, so go grab it from Google Code and let us know about any improvements you make!

長い引用でしたが、html5 としてのポイントは、「新しいタグが対応していないブラウザーだとブロック要素として認識しない」という点で、

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

特にこの部分が重要だと思われます。

—————–追記 旧IE対策でこれをヘッドに書いておく ————————
Googgleさんから、IE9.js を読み込んでます。
詳細: https://code.google.com/p/ie7-js/
[html]
<!–[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<![endif]–>
[/html]

ピアノ(html5とJavaScriptで)

ピアノ
iPhoneで鉄琴の音を鳴らせるアプリを作りたかったのですが、自宅にMacが無いので、「Webアプリもどき」を作ってみました。
PC上では、そうでもないですが、iPhone や Androidなどのモバイル端末では反応の厳しいものしか出来ませんでした。
まだまだ研究の余地ありです。

今回は、AIで作成したデータに、SVGインタラクティブパネルでJavaScriptを指定し、SVG書き出しして活用するまでの一連の流れ

http://www.wgn.co.jp/store/blog/item-1205.html?utm_source=works&utm_medium=mailmagazine&utm_campaign=%282726%29+2%2F15%A1%A1%A5%A4%A5%C8%A5%A6%C0%E8%C0%B81

まずは、AIで普通にデータを作成します。当然ながら、複雑なオブジェクトは書き出した後にSVGのソースが長くなります。今回は、AIで作成したテキストをアウトライン化したものをSVGで書き出してみます。

作成したオブジェクトに、JavaScriptのイベントを適用したい場合に、SVGインタラクティブパネルから、イベントを設定することが可能です。
AIで作成したオブジェクトを選択しておき、SVGインタラクティブパネルから、イベントの種類を選択した後、直接記述します。イベントとは、そのオブジェクトをクリックした時にどうする、マウスカーソルを添えたときにどうする、というような動作を設定できるものです。今回は、そのオブジェクトをクリックしたときに、「イトウ先生のTipsnote」というアラートウインドウを返すように設定します。この場合は、SVGインタラクティブパネルのJavaScriptの箇所に、【alert(“イトウ先生のTipsnote”)】と書いておくだけです。外部JavaScriptと連携させる場合には、SVGインタラクティブパネルのパネルメニューから、「JavaScriptファイル…」を選択し、外部ファイルと連携させることも可能です。

●SVGで保存する

ファイルメニュー→保存を選択し、SVG形式で保存します。書き出したSVGのソースを使用してWebブラウザに表示するため、SVGプロファイルはSVG1.1を選択しておきます。SVG Tinyという形式は、携帯電話用の形式になります。

書き出したSVGファイルを、任意のテキストエディタで開き、SVGタグの有効範囲内をコピーして、HTMLファイル内にペーストし使用します。

●SVGサンプル

以下のWorksCorporationのオブジェクトが、AI CS5から書き出した、SVGのサンプルです。ブラウザの表示を拡大(SafariやFirefoxなどほとんどのブラウザは、command【Ctrl】+「+」キーで拡大表示)して、画質の劣化が無いことを確認してみましょう。
なお、IE8以前をお使いの場合には、この段落の下に何も表示されないため、IE9以降かそれ以外のブラウザで確認してみてください。
また、このオブジェクトの上でクリックし、アラートが表示されることを確認します。WorksCorporationの黒い部分で正確にクリックしてみてください。なお、ブラウザのJavaScriptが無効になっている場合には、クリックしてもアラートウインドウが表示されませんので、ブラウザの「JavaScriptを有効にする」をONにして試してみてください。

使い方は非常に簡単ですね。なんといっても、拡大しても画質の劣化が無いというのがSVGの特徴です。SVGを使用することで、画像ではできない表現が可能ですので、ぜひ活用してみてください。

もっとJavascriptを活用したい方は!
JavaScriptの基礎知識の受講がオススメです!

▼JavaScriptの基礎知識