CSS・Javascript

英語版のサイトで埋め込むGoogle Mapも英語表示にしたいときはこの方法

海外からの利用者に向けて二カ国語や多言語のサイトを構築する時、アクセスページなどに埋め込むマップもそのページの対応言語に合わせたいケースはよくある。
基本的にはアクセスしたユーザーの環境により表示は変わるのだが、クライアントの担当者が確認する時に日本語で地図が表示されているのは気持ち悪い。
続きを読む

iOS7に似合う極細書体を日本語部分に指定したい時の裏技

前回の「iOS7で使われる極細のHelvetica書体をcssで指定したい時」では、iOS7のシステム他で採用された極細のHelveticaNeue-UltraLightをスタイルシートで指定する方法を解説したが、日本語サイトの場合、タイトルのみに限定しても日本語が混じるケースが多いだろう。
実際、HelveticaNeue-UltraLightのみの指定では、日本語のフォントは太いままで、かなり不自然になる。

続きを読む

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>