-JavaScript

androidだけに適用させるCSS

Androidのバージョン違いによるレイアウトがひどいのでなんとかしたいので、こんなものを見つけました。

引用
http://kotori-blog.com/css/css_browser_selector/

『CSS Browser Selector』の使用方法
ダウンロード
下記の公式サイトの「DOWNLOAD」のところにリンクがはってあるのでそこからjsをダウンロードします。
CSS Browser Selector
『CSS Browser Selector』の読み込み
より前で、ダウンロードした「css_browser_selector.js」を読み込みます。

<script src="css_browser_selector.js" type="text/javascript"></script>

CSSの記述方法
jsを読み込んだらあとはCSSにコードを書くだけです!
ブラウザやOS毎にCSSを記述することができます。
公式に載っている記述方法の例です。

html.gecko div#header {
    margin: 1em;  /*geckoエンジンのブラウザのみ*/
}
.opera #header {
    margin: 1.2em;  /*operaのみ*/
}
.ie .mylink {
    font-weight: bold;  /*ie(全バージョン)のみ*/
}
.mac.ie .mylink {
    font-weight: bold;  /*Macのieのみ*/
}

OSとブラウザのセレクタの間にはスペースは入りません。
『CSS Browser Selector』で利用可能なOSのコード
利用できるOSコードの一覧載せときます。

.win {
    /*Windows (全バージョン)のみ*/
}
.vista {
    /*Windows Vistaのみ*/
}
.linux {
    /*linux(x11とlinux)のみ*/
}
.mac {
    /*Mac OSのみ*/
}
.freebsd {
    /*FreeBSDのみ*/
}
.ipod {
    /*iPod Touchのみ*/
}
.iphone {
    /*iphoneのみ*/
}
.ipad {
    /*ipadのみ*/
}
.webtv {
    /*WebTVのみ*/
}
.j2me {
    /*J2ME Devices(例えばOpera mini)のみ*/
}
.blackberry {
    /*blackberryのみ*/
}
.android {
    /*Google Androidのみ*/
}
.mobile {
    /*全てのモバイルデバイスのみ*/
}

『CSS Browser Selector』で利用可能なブラウザのコード
利用できるブラウザコードの一覧も載せときます。

.ie {
    /*Internet Explorer(全バージョン)のみ*/
}
.ie8 {
    /*Internet Explorer 8.xのみ*/
}
.ie7 {
    /*Internet Explorer 7.xのみ*/
}
.ie6 {
    /*Internet Explorer 6.xのみ*/
}
.ie5 {
    /*Internet Explorer 5.xのみ*/
}
.gecko {
    /*Firefox(全バージョン)とCaminoのみ*/
}
.ff2 {
    /*Firefox 2のみ*/
}
.ff3 {
    /*Firefox 3のみ*/
}
.ff3_5 {
    /*Firefox 3.5のみ*/
}
.ff3_6 {
    /*Firefox 3.6のみ*/
}
.opera {
    /*Opera(全バージョン)のみ*/
}
.opera8 {
    /*Opera 8.xのみ*/
}
.opera9 {
    /*Opera 9.xのみ*/
}
.opera10 {
    /*Opera 10.xのみ*/
}
.konqueror {
    /*Konquerorのみ*/
}
.webkit {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
    /*Safari 3.xのみ*/
}
.chrome {
    /*Google Chromeのみ*/
}
.iron {
    /*SRWare Ironのみ*/
}

まとめ
もっと早く出会いたかった!!!!
これに尽きます。
ホント簡単でシンプルですばらしすぎます。
煩わしいハックタグとはおさらばです。

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用サイトではレイアウト切替ボタンはイラネーという線が濃厚になるのも仕方がないことかもしれませんね。

CSSの達人

CSSの達人になりたいと思っているのとは別に、WPを触っていて、時々そのページだけCSSを編集したい、という場合に、重宝する機能
カスタムCSS custom CSS

これは便利です。こちらから引用(Thanks!)

下記のデータをfunction.phpに書き込む

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

ついでにJSも

JavaScriptを追加できるようにする場合は、以下をfunctions.phpに記述します。
//Custom JS Widget
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
	add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high');
}
function custom_js_input() {
	global $post;
	echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
	echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
	if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_js = $_POST['custom_js'];
	update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
		endwhile; endif;
		rewind_posts();
	}
}

パララックス

今更かもしれませんが、前から気になっていました。
暇を見つけては勉強しているのですが、PCのブラウザーではおもしろいなぁというサイトも、スマホで確認すると全然ダメというパターンが多いので腰が引けていました。スマホだと全然見れないというパターンには、効果がおもしろい分とてもガッカリしてします。

スマホでも見れるサイトを紹介してくれているところを見つけたので引用させてもらいます。

http://fb-research.net/facebook/2012/07/_paralla/
こちらのサイトです。

NIKE「CHOOSE YOUR FIGHT」
これを見て衝撃を受けました。
やはりPCもスマホもバッチしOKですが、サイトのURLを変えています。
やっぱり普通にすれば、同じ仕組みではダメなのか・・・・
PCのURLでもモバイルに飛ばされるので気づかないのですが・・・

PC
http://www.nike.com/jumpman23/aj2012/
スマホ
http://www.nike.com/jumpman23/aj2012/mobile/

—————-

レッスン動画

http://dotinstall.com/lessons/parallax_html

substr()、substring() 覚書

substring()もあるので混乱しないように。。。

文字列String.substr()メソッド ⇒ 指定の位置から“指定の文字数分”の文字列を抜き出します。

文字列String.substring()メソッド ⇒ 指定の位置から指定の位置までの文字列を抜き出します。

****************************
String.substr()メソッド ・・・ 指定の位置から指定の文字数分だけ抜き出す

対応バージョン
コアJavaScript 1.2
コーディング形式
string.substr(start, length)
引数
start サブストリングの開始位置。この引数がマイナス値の場合、文字列の終端からの位置を示します。つまり、-1は最後の文字を示し、-2は終端から2番目の文字を示す、といった具合になります。 (0は、一番左端の文字 1は左から2番目の文字)
length サブストリングに含まれる文字の数。この引数が省略されると、返されるサブストリングには文字列の先頭から終端までのすべての文字が含まれます。

リターン値
(startが指定する文字を含む)文字列の先頭部分からlength文字までのコピー。lengthが指定されていない場合は、文字列の終端までのコピー。

解説
substr()メソッドは、文字列のサブストリングを抽出して返します。このメソッドはstringを変更しません。
substr()メソッドは、必要なサブストリングを文字位置とlengthで表します。このメソッドは、String.substring()や2つの文字位置でサブストリングを指定するString.splice()の代替として利用すると便利です。

使用例

var s = “abcdefg”;
s.substr(2,2); // cdを返す。
s.substr(3); // defgを返す。
s.substr(-3,2); // Navigatorではefを返し、IE 4ではabを返す。

バグ情報
マイナス値のstartは、IE 4では機能しません。文字列の終端からの文字位置を表す代わりに、文字位置を0に指定します。

*****************************

String.substring()メソッド ・・・ サブストリングを返す

対応バージョン
コアJavaScript 1.0、ECMA-262
コーディング形式
string.substring(from, to)

引数
from string内で指定されたサブストリングの先頭文字の位置を示す整数。fromの値は0からstring.length-1までの値でなければなりません。
to string内で指定されたサブストリングの最終文字の位置より1だけ大きい整数(省略可)。toの値は1からstring.lengthまでの値でなければなりません。

リターン値
stringのサブストリングを保持し、長さがto-fromの新文字列。この新文字列は、stringのfromからto-1までの文字で構成されます。

解説
String.substring()メソッドはstring中の指定されたサブストリングを返します。fromとtoが等しい場合、String.substring()メソッドは空の文字列(長さ0)を返します。fromがtoより大きい場合、この2つの引数を取り替えてから処理を進めます。

使用上のヒントと注意
String.substring()メソッドは使い方がわかりにくいかもしれません。from位置の文字はサブストリングに含まれますが、to位置の文字はサブストリングに含まれないことに注意しましょう。このような引数の指定方法なので、返されるサブストリングの長さは常にto-fromの値と等しくなります。
文字列からサブストリングを取り出す方法として、開始文字とサブストリングの長さを指定するほうが便利な場合がよくあります。(substr()の方が分かりやすい。)
以下に示す関数を使えばそのように指定できます。JavaScript1.2では、String.substr()を使ってこれを行うことができます。
またJavaScript1.2では、String.slice()メソッドも提供されています。このメソッドのほうがsubstringよりも便利な場合もあります。