javascriptDBで出力されるタグを変更したい時はこの方法

JavaScriptのみでデータをMySQLのように使えるjavascriptDBの使い方(その1)で、javascriptDBの簡単な設定方法は説明したが、ページ内に埋め込むことを考え、スタイルシートが使えるように出力されるテーブルにidやclassを設定したり、タグを設定するための方法を説明する。

設定方法

jqueryおよびダウンロードしたdb_core.jsを読み込む

JAVASCRIPT

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="db_core.js"></script>

同様にheader内でjavascriptDBの設定
(別ファイルにしても構わない)

JAVASCRIPT

<script>
var DBTest = new Database ("DBTest");
DBTest.CreateTable("members",Array("id","login","passwd","tel"));
DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
var selectArr1 = DBTest.Select('select * from members');
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);
$(document).ready(function(){
$("#output1").html(selected1);
$("#output2").html(selected2);
});
function mView (o){
var res = "<table>";
for(i = 0; i < o.length; i++){
res += "<tr>";
for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
res += "</tr>";
}
res += "</table>";
return res;
}
</script>

ボディ内の書き出したい場所にid=”output1″、id=”output2″を設置

HTML

<body>
<h2>select * from members</h2>
<div id="output1"></div>
<h2>select passwd from members where login="joan"</h2>
<div id="output2"></div>
</body>

サンプルページ

上記サンプルにアクセスすると以下のデータが出力される

<h2>select * from members</h2>
<div id="output1">
<table>
<tbody>
<tr>
<td>1</td>
<td>rosibel</td>
<td>clau</td>
<td>934856890</td>
</tr>
<tr>
<td>2</td>
<td>joan</td>
<td>palafrugell</td>
<td>934856890</td>
</tr>
</tbody>
</table>
</div>
<h2>select passwd from members where login="joan"</h2>
<div id="output2">
<table>
<tbody>
<tr>
<td>palafrugell</td>
</tr>
</tbody>
</table>
</div>

解説

1. データベースをセット

var DBTest = new Database ("DBTest");

2. テーブル名とカラム名をセット

DBTest.CreateTable(“members”,Array(“id”,”login”,”passwd”,”tel”));

3. データを挿入

DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));

4-1. セレクト文にて全データを出力(mySQLと同様)

var selectArr1 = DBTest.Select('select * from members');

4-2. MySQLと同様にwhereを使って条件抽出も可能

var selectArr2 = DBTest.Select('select passwd from members where login="joan"');

5. 各抽出データをテーブルに成形 ※1

var selected1 = mView(selectArr1);
var selected2 = mView(selectArr2);

6. 各データをjqueryを使って書き出し

$(document).ready(function(){
$("#output1").html(selected1);
$("#output2").html(selected2);
});

※1 javascriptDBの結果をテーブルに成形するfunction

function mView (o){
var res = "<table id='my-tbl'>";
for(i = 0; i < o.length; i++){
res += "<tr>";
for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
res += "</tr>";
}
res += "</table>";
return res;
}

※1で javascriptDBの結果をテーブルタグで書き出すように設定しているが、サンプルのように<table>にidを設定(<table id=’my-tbl’>)したり、必要に応じて<hd>の代わりに<th>を使ったり<td class=’col-ab’>のようにすることができる。
あとは書き出したタグに対応したスタイルシートを設定すればいい。

CSS

<style>
h2 {
margin-bottom:1px;
font-weight:normal;
font-size:1em;
}
table {
border-collapse: collapse;
}
table td {
padding:2px 8px;
text-align:center;
border:1px solid #ccc;
}
</style>

JavaScriptのみでデータがMySQLのように使えるjavascriptDBの使い方

データベース不要、PHP等が使えなくてもHTMLとJavaScriptだけでMySQLのようなselect文が使えるのはもちろん、whereでの条件設定も使えるという便利なjavascriptDBはお手軽なデータベース構築におススメ。

db_core.jsのダウンロードは以下のURLから

http://jsdb.sourceforge.net/usarho.html

設定方法

jqueryおよびダウンロードしたdb_core.jsを読み込む

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="db_core.js"></script>

使い方

body内でjavascriptDBを設定

JAVASCRIPT

<script>
var DBTest = new Database ("DBTest");
DBTest.CreateTable("members",Array("id","login","passwd","tel"));
DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
DBTest.View(selectArr2,document);
</script>

サンプルページ

上記のコードをブラウザで見るとただの文字だが、body内に以下のデータが書き出されている

<table>
<tbody>
<tr>
<td>palafrugell </td>
</tr>
</tbody>
</table>

上記サンプルの場合、1単語1件のみのデータだが、内容に関係無くテーブル形式のデータとして出力される

解説

1. データベースをセット

var DBTest = new Database ("DBTest");

2. テーブル名とカラム名をセット

DBTest.CreateTable("members",Array("id","login","passwd","tel"));

3. データを挿入

DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));

4. MySQLと同様にwhereを使って条件抽出も可能

var selectArr2 = DBTest.Select('select passwd from members where login="joan"');

5. 書き出し

DBTest.View(selectArr2,document);

単独で扱うにはこのままでも良いが、ページ内に埋め込むことを考えると出力されるテーブルにidやclassを設定したりテーブル以外のタグで書き出したい時もあるだろう。
javascriptDBの出力データの成形およびタグの設定については次の記事で掲載する。

javascriptDBで出力されるタグを変更したい時はこの方法

記号が小さく表示されてしまう時のスタイルシートはこれで決まり

記号が小さく表示されてしまう時は、スタイルシートで以下のfont-familyを指定するといい。

font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;

他の部分には影響させたくない場合は、以下のようにclassで設定しておくといい。

CSS

.kigou {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

HTML

<span>●や○を含む文字</span>

WordPressをスマートフォンに対応にするおススメの方法

WordPressで構築しているサイトをスマートフォンからのアクセスに対応させる方法として、phpのテーマファイル内で判別して出力する方法、javascriptで判別してそれぞれに最適化したスタイルシートを読み込む方法、レスポンシブルなテーマを利用して1ソースで済ませる方法。
1ソースは最近の流行でもあるが、パソコンからのアクセスに合わせたレイアウトとスマートフォンからのアクセスでそれぞれに最適なレイアウトで自由にレイアウトしたい場合は、プラグインを使う方法もおススメ。

代表的なWordpressのスマートフォン対応プラグインは

  • MobilePress
  • WordPress Mobile Pack
  • WPtouch
  • WordPress PDA & iPhone

などがあり、どのプラグインも独自のスマートフォン用レイアウトが表示されるようになる。

HTMLのコーディングに詳しくない人はそのまま使えるプラグインをおススメするが、オリジナルのデザイン・レイアウトにしたい場合は、カスタマイズされたレイアウトが逆に邪魔になることもある。

なるべく自分でデザインを設定したい人は、WordPress PDA & iPhoneをおススメする。
実はこのプラグイン、最終更新が2011年で停止しており、開発が終了している様子。ただし現在のアンドロイドやiPhone、その他スマートフォンからのアクセスを振り分ける機能としては問題なく作動するのでベースにこれを使う。

プラグインを導入すると、プラグインフォルダの中に以下のディレクトリが作られる

/wp-content/plugins/wp-pda/jqmobile-theme
/wp-content/plugins/wp-pda/pda-theme

カスタマイズするのは

/jqmobile-theme

フォルダ内の各ファイル
ファイルリストを見ると、通常のテーマファイルと同様にheaderやfooterをはじめとする各ファイルが存在することが分かるだろう。
この中のファイルはスマートフォンのアクセス時だけに呼ばれるから、この中の一式はパソコンからのアクセスには影響しないから、独立したテーマファイルとして作っていけばいい。

実際に、このサイトでもWordPress PDA & iPhoneを使った振り分け後にカスタマイズしたテーマファイルで構築している。
パソコンからアクセスしている人は是非、スマートフォンからアクセスしてもらいたい。

http://www.digital-gate.com/

カスタマイズすればここまでデフォルトとは違うレイアウトデザインが可能となるということが分かるはず。
デフォルトのjqueryは古いままなので、

jquery.mobile-1.3.2.min.css
jquery-1.9.1.min.js

を使用するようにしてある他、facebook風のメニュー等、オリジナルには無い機能も追加している。

jQuery Mobile 1.4のタブをカスタマイズしてタブらしいデザインにする方法

jQuery Mobile 1.4の新機能として追加されたタブ表示のための data-role=”tabs” は簡単なコーディングでタブレイアウトを実装出来るが、デフォルトのスタイルシートでの表示は、タブとしての機能にはなっていても、見た目としてはタブとイメージできない。

デフォルトCSSを使ったのサンプルページ

せっかくjQuery Mobile 1.4を導入してタブ仕様にするなら、スタイルシートをカスタマイズして「タブらしい」レイアウトにしたい。
jQuery Mobileへの指定の追加と少しのカスタムスタイルシートを追加することでサンプルのようなタブスタイルにすることが可能。

カスタマイズしたサンプルページ

設定方法

まずはベースとなるjquery mobile 1.4のスタイルシートを読み込む

CSS

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>

javascriptを読み込む
スマートフォンやタブレットなどの新しいモバイル端末がターゲットならjquery 1.11よりも軽量のjquery 2.1がおススメ
jquery mobile は最新版の1.4.2

JAVASCRIPT

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

タブの実装部分は以下

HTML

<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#fragment-1">タブ1</a></li>
<li><a href="#fragment-2">タブ2</a></li>
<li><a href="#fragment-3">タブ3</a></li>
</ul>
</div><!-- navbar -->
<div id="fragment-1">本文1</div>
<div id="fragment-2">本文2</div>
<div id="fragment-3">本文3</div>
</div><!-- tabs -->
</div><!-- main -->
</div><!-- page -->

デフォルト状態でのタブならこれで完成。

ここからがカスタマイズ

まず、デザインをカスタマイズするため、data-role=”page” に data-theme=”none” を指定する。

HTML

<div data-role="page" id="page1" data-theme="none">

次にスタイルシート
jquery.mobile-1.4.2.min.css の後に読み込む

CSS

<style>
div[data-role=navbar] ul li a {
color:#000;
border-color:#ccc;
border-width: 1px 1px 0px 1px;
}
li[aria-selected=false] {
background-color: #eee;
border-bottom:1px solid #ccc;
}
#fragment-3,#fragment-2,#fragment-1 {
margin:-1px 3px 0px 0px;
padding:11px 10px 10px 10px;
border:1px solid #ccc;
border-width: 0px 1px 1px 1px;
}
@media screen and (min-width: 321px) {
#fragment-3,#fragment-2,#fragment-1 {
margin:-1px 2px 0px 0px;
}
}
@media screen and (min-width: 641px) {
#fragment-3,#fragment-2,#fragment-1 {
margin:-1px 0px 0px 0px;
}
}
</style>

これだけで、タブらしいデザインにカスタマイズ出来る

補足説明

#fragment-3,#fragment-2,#fragment-1の指定にある

margin:-1px 3px 0px 0px;

は本文ボックスの右の縦罫線を揃えるためのおまじない

ウィンドウサイズによってズレの幅が違うからmin-widthで振り分け調整している。

@media screen and (min-width: 321px) {
#fragment-3,#fragment-2,#fragment-1 {
margin:-1px 2px 0px 0px;
}
}
@media screen and (min-width: 641px) {
#fragment-3,#fragment-2,#fragment-1 {
margin:-1px 0px 0px 0px;
}
}

スマートに出来る方法があったらコメントして貰えると嬉しい

わずが2KBのJQUERYモーダルウィンドウ実装スクリプト

Pop EasyはRemodalよりもさらに軽量。jqueryでモーダルウィンドウを実装するためのスクリプト。

通常版
jquery.modal.js → 5キロバイト

min版はさらに軽量で
jquery.modal.min.js → 2キロバイト

Remodalと違いデフォルトではスマートフォンには対応していないため、スマートフォン向けサイトで使用する場合はスタイルシートでポップアップウィンドウのサイズを設定する等の必要があるが、エフェクトの指定等も簡単に出来るからサイトの高速化を考えている人にはおススメなスクリプトと言えよう。

設置は簡単。

まずは最小限のスタイルシート

CSS

<style>
.modal p {
font-size: 14px;
text-align: left;
margin: 10px 0 0;
}
.modal p:hover {
cursor: pointer;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
.modal {
display: none;
background: #eee;
padding: 0 20px 20px;
overflow: auto;
z-index: 1001;
position: absolute;
width: 500px;
min-height: 300px;
}
</style>

javascriptはbody閉じタグの直前に

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type='text/javascript' src='./js/jquery.modal.js'></script>

オプションの設定のjavascriptを読み込む

JAVASCRIPT

<script type='text/javascript'>
$(document).ready(function(){
$('.modalLink').modal({
trigger: '.modalLink',
olay:'div.overlay',
modals:'div.modal',
animationEffect: 'fadeIn',
animationSpeed: 400,
moveModalSpeed: 'fast',
background: '000000',
opacity: 0.5,
openOnLoad: false,
docClose: true,
closeByEscape: true,
moveOnScroll: true,
resizeWindow: true,
videoClass:'video',
close:'.closeBtn'
});
});
</script>

オプションの一部を説明すると

animationEffect
スライドインまたはフェードイン

animationSpeed
moveModalSpeed
表示速度

background
オーバーレイの背景色

opacity
オーバーレイの透明度

HTML

呼び出しボタン(リンク)

<a class="modalLink" href="#modal1">Click</a>

オーバーレイのためのタグが別途必要

<div class="overlay"></div>

ポップアップするモーダルウィンドウはこんな感じ

<div id="modal1" class="modal">
<p class="closeBtn">Close</p>
<h2>モーダルウィンドウのサンプル</h2>
</div>

サンプルページ

ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

ダウンロードはこちら
http://thomasgrauer.com/popeasy/