CSS・Javascript

jQueryMobileよりも軽量なフレームワークの紹介

http://www.extjs.co.jp/products/touch/
Sencha Touch 2.0
世界初のHTML5対応JavaScriptフレームワークをうたうSencha Touch
2010/11/15よりSencha Touchの商用ライセンスが無料になった模様。

http://jqtouch.com
jQTouch
ウェブサイトでは更新が止まっているようで未だにiPhone3Gの画像を使っているうえ、フレームワークの内容もiPhone初期の頃のUIが見受けられる。

http://zeptojs.com
ZeptoはjQuery Mobileライクなフレームワーク
MITライセンス

http://www.jqmobi.com
従来より8倍軽量になったというjQ.Mobi
jQueryMobileの対抗はこれが本命といえるだろう。

CDNも用意されている(jQ.Mobi 1.11)

query selector libary
http://cdn.jqmobi.com/1.11/jq.mobi.min.js”>jq.mobi.min.js
library
http://cdn.jqmobi.com/1.11/jq.ui.min.js”>jq.ui.min.js

default theme
http://cdn.jqmobi.com/1.11/jq.ui.css”>jq.ui.css
carbon theme
http://cdn.jqmobi.com/1.11/jq.ui.carbon.css”>jq.ui.carbon.css
eco theme
http://cdn.jqmobi.com/1.11/jq.ui.eco.css”>jq.ui.eco.css
frosty theme
http://cdn.jqmobi.com/1.11/jq.ui.frosty.css”>jq.ui.frosty.css
slate theme
http://cdn.jqmobi.com/1.11/jq.ui.slate.css”>jq.ui.slate.css
volcano theme
http://cdn.jqmobi.com/1.11/jq.ui.volcano.css”>jq.ui.volcano.css
Vectory icon library
http://cdn.jqmobi.com/1.11/icons.css”>icons.css

jqUi style builderも用意されておりカラーカスタマイズが簡単にできる。
http://www.jqmobi.com/style.php

WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone(wp-pda)はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css

ファイルを開き、最後に以下のスタイルシートを追加する

.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

各項目の解説

background:
ヘッダ、タイトル、ナビ選択状態の背景色

color:
ヘッダ、タイトル、ナビ選択状態の文字色

border:
回りのラインの色(同系色の濃いめにすると良い)

text-shadow:
タイトル文字の影(同系色の濃いめにすると良い)

background-image:
複数あるが、多くのブラウザに対応させるためのもの(同じ色で指定していく)

WordPress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。

症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。

修正するのは以下のファイル
plugins/wp-pda/jqmobile-theme/index.php

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>

のように修正。具体的には

$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');

の部分に「&depth=1」を入れて階層取得を1階層に制限するだけの話。

この1行を修正するだけで、表示バグは直る。

jQuery Mobile 1.2.0の正式版が公開

100以上の機能強化や修正が含まれているが、リストビューが折り畳めるcollapsbileは便利そう。

またGoogle mapsを使うページには、今回のjQuery Mobile 1.2.0で追加されたポップアップウィジェットのひとつであるオーバーレイも便利な機能となるだろう。

jQuery Mobile 1.2.0正式版公開にあたり、iPhoneStyleのiPhone版も jquery.mobile-1.0.1.min.css ↓ jquery.mobile-1.2.0.min.css jquery-1.6.4.min.js ↓ jquery-1.8.2.min.js jquery.mobile-1.0.1.min.js ↓ jquery.mobile-1.2.0.min.js と、すべて最新版に刷新。

jQuery Mobile 1.2.0が実稼働するスマートフォン対応サイトをご覧になりたい方は以下のURLへ。

iPhoneStyle
http://iphone-sns.com/

Google Mapsで複数マーカー表示とオリジナルマーカーを同時に使うサンプル

既にGoogle Maps V3が一般的になっているが、V2で作られているサイトに修正が必要となり、複数のマーカーを一度に表示する必要があったり、オリジナルのアイコン・画像を使ったマーカーにしなくてはならないこともあるだろう。
V3であれば、サンプルも多く覚えるメリットもあるが、今更V2を復習するのは苦痛なはず。
ということで、そのまま使えるサンプルを以下に掲載する。

必須条件としてはmapキーは既に取得済であること。

サンプルでは、二カ所のマーカー(吹き出しも可能)、マップセンターに別色のオリジナルマーカー(吹き出しも可能)となっている。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[取得済のマップキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
if(GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"), {size:new GSize(445,445)});
map.setCenter(new GLatLng(35.689488,139.691706), 10);
var icon = new GIcon();
icon.image = "http://maps.google.co.jp/mapfiles/ms/icons/green-dot.png";
icon.iconSize = new GSize(32,32);
icon.iconAnchor = new GPoint(16,32);
icon.infoWindowAnchor = new GPoint(16,0);
var marker = new GMarker(new GLatLng(35.689488,139.691706),icon);
map.addOverlay(marker);
GEvent.addListener(marker,'click', function(){
var point = marker.getPoint();
var msg = "緯度"+point.lat()+"<br />経度"+point.lng()+"<br />"
marker.openInfoWindowHtml(msg);
});
addMakers(35.643551,139.860315,"<a href='#'>葛西臨海公園</a>");
addMakers(35.715911,139.897929,"<a href='#'>篠崎公園</a>");
}
map.addControl(new GSmallMapControl());
function addMakers(lat,lng,text){
var mk = new GMarker(new GLatLng(lat,lng));
map.addOverlay(mk);
GEvent.addListener(mk,"click",showInfoWindow);
function showInfoWindow(){
mk.openInfoWindowHtml(text);
}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload();">
<div id="map"></div>
</body>
</html>

TwitterのタイムラインをRSSで取得していたのがエラーで取得できなくなった場合

いままで問題なくTwitterのタイムラインをRSSで取得出来ていたのが突然エラーで取得できなくなった場合の簡単な対応方法
2013年3月にTwitterのAPIが変更となりAPI 1.1になることは多くのサイトでも書かれているが、2012年の10月から既に仕様の変更が始まっている。
その一つの例が、ユーザーのタイムラインをRSSで取得するAPI
いままでは
http://twitter.com/statuses/user_timeline/androidstyle.rss
といった形式で、user_timelineに続けてタイムラインを取得したいユーザー名+rssで簡単に取得出来たが、現在ではこの方法はエラーとなり
Sorry, that page does not exist
が返される
長い目で見れば、この機会にAPI 1.1の仕様に変更すればよいがOAuth認証ロジックの追加も必要となるため大きな手直しが必要となる。
そこで、完全移行の2013年3月まで使用可能だと思われる、たった1行の変更で済む簡単な修正方法を紹介する。
エラーになる部分
http://twitter.com/statuses/user_timeline/iphonestyle.rss
http://api.twitter.com/1/statuses/user_timeline/iphonestyle.rss
に変えるだけ。
URLにapiが付くことと「1」の部分は所謂API 1.0が入る。
今まで通りRSSの形式で取得できるから、他の部分は変更しなくていいはず。

Twitter API 変更(API 1.1)に対応する方法

Twitterは2013年3月5日に向けて一部APIの廃止、レートリミット方式の変更、表示方式の厳格化、等を発表。
「表示方式の厳格化」はユーザー名の表示やタイムスタンプといった画面レイアウトに大きく関わるものもある。
現行のAPI 1.0からAPI 1.1に対応するためにはどうすればいいのかをピックアップして紹介する。
■認証
仕様変更によりOAuth認証をしないとAPIは扱えなくなる。
■REST API
REST APIは例えば
http://api.twitter.com/1/account/totals
http://api.twitter.com/1/notifications/follow
http://api.twitter.com/1/lists.json
といったものであり、廃止になるものと
http://api.twitter.com/1.1/〜
に変更されるものがある。
■検索API
API 1.0
http://search.twitter.com/search.json
API 1.1
http://api.twitter.com/1.1/search/tweets.json
例(要認証)
http://api.twitter.com/1.1/search/tweets.json?q=iphone&until= 2012-11-12&count=100
■TwitterへのPOST
API 1.0
$to->OAuthRequest(‘http://api.twitter.com/1/statuses/update.xml’, ‘POST’, array(‘status’ => $message));
API 1.1
$to->OAuthRequest(‘http://api.twitter.com/1.1/statuses/update.json’, ‘POST’, array(‘status’ => $message));

CSSで複数のclassを同時に指定したい時

CSSで複数のclassを使う場合、

<div class="aaa">
<div class="bbb">
</div>
</div>
のような表記をまとめて
<div class="aaa bbb">
</div>
とするのは知られているが、では、その両方のclassを持っている要素の指定はどうすればいいか。
方法は意外に簡単で以下の通り。
.aaa.bbb {
background:#000;
}

javascriptで1秒毎にリアルタイムに更新されるデジタル時計

1秒毎にリアルタイムに更新されるデジタル時計をサイトに導入したい時は、以下のJqueryとJavascriptを使えば簡単に設置が可能。
id=”mclock”の場所にデジタルが書き出されるから、id名に対してスタイルシートを用いることで文字サイズやデザインを変更できる。
さらに、サンプルでは「時、分、秒」としているが、Date();の書き出しを追加するだけで「年」「月」「日」の表示もできる

JAVASCRIPT

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(function(){
setInterval(function(){
var now = new Date();
hou = toDD(now.getHours());
min = toDD(now.getMinutes());
sec = toDD(now.getSeconds());
$('#mclock').text(hou +":"+ min +":"+ sec);
},1000);
});
var toDD = function(num){
num += "";
if(num.length === 1){num = "0" + num;}
return num;
};
</script>
<div id="mclock"></div>

 

超簡単で動かせる付箋・スティッキーズ風のモーダルウィンドウ

シンプルな構造で設置も簡単、マウスで移動も自由でボタンで消すことも出来る、MacやWindowsのスティッキーズ風のモーダルウィンドウ(Modal window)。ポップアップウィンドウに変更するのも簡単。
導入は以下のサンプルを貼付けていくだけで簡単にできる。
<head>〜</head>内にJqueryを取得するコードを記載

javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
付箋・スティッキーズ本体のJavascriptは以下
上記と同様に<head>〜</head>内に記載してもいいし、別ファイルにして呼び込んでもいい。
<script type="text/javascript">
function stki(stID,wx,wy,ww,wh,co,bc,lc,zi,tc){
$(stID).css({
position: 'absolute',
top: wy, left: wx,
width: ww, height: wh,
color: co,
'background-color': bc,
'border': lc,
'z-index': zi
}).fadeIn('slow');
$(stID + ' .stittl').css({'background-color': tc}).fadeIn('slow');
$(stID + ' .stittl .sticlose').click(function(){$(stID).fadeOut('slow');});
$(stID + ' .stittl').mousedown(function(e){
var mx = e.pageX; var my = e.pageY;
$(document).on('mousemove', function(e) {
wx += e.pageX - mx; wy += e.pageY - my;
$(stID).css({top: wy, left: wx});
mx = e.pageX; my = e.pageY;
return false;
}).one('mouseup', function(e){
$(document).off('mousemove');
});
return false;
});
}
</script>
最小限必要なスタイルシートcssは以下
別ファイルにして呼び込んでもいい。

CSS

<style>
.stittl {
padding: 1px 3px;
font-size: 13px;
cursor: move;
}
.sticlose {
float: left;
cursor: pointer;
}
.stimain {
padding:3px;
}
</style>
実際の付箋・スティッキーズは以下
<body>〜</body>のどこに記載しても構わない
ポイントはid=”stickies1″
後ほどid名で呼び出すから、id名を変えればいくつでも設置可能。

HTML

<div id="stickies1">
<div class="stittl"><div class="sticlose">□</div>&nbsp;</div>
<div class="stimain">
ここが画面に表示されるテキストになる
</div>
</div>
上記&nbsp;の代わりに文字を入れるとタイトル部分に表示される。
付箋・スティッキーズの呼び出しJavascriptは以下
<body>〜</body>のどこに記載しても構わない
<script type="text/javascript">
$(function() {
stki('#stickies1',100,100,300,200,'#666','#fff','1px solid #ccc',12,'#eee');
});
</script>
上記により付箋・スティッキーズ本体を表示させている。
変数は以下の通り
stki(id名,表示位置(左から),表示位置(上から),ウィンドウ幅,ウィンドウ高さ,文字色,本体背景色,ボーダー色,z-index,タイトル背景色);
個別のid名で自由な位置、サイズ、色で複数設置が可能。
初期表示をdisplay:none;にしておいてクリックで呼び出したり、スライドインなどのエフェクトで遊ぶのもいいだろう。