デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

  • 日時データを経過時間に変換するPHPとJAVASCRIPTの方法

    ·

    master

    日時データ（2014-05-01 23:59:59）をTwitterなどで使われている「○秒前」「○分後」「○時間前」「○日前」のような表記に変換するには、以下のスクリプトを使う。
    (さらに…)

  • 背景画像をぼかすことができるjQueryプラグインVague.jsの使い方

    ·

    master

    webkitを搭載ブラウザ対応のみでよければ、CSS3のfilterを使う方法もあるが、FirefoxやChromeへの対応を考えた場合はこの方法は使えない。
    (さらに…)

  • txtSQLのselect文のwhereでandやorを使いたい時はこの書き方

    ·

    master

    txtSQLは資料が少ないので情報共有として
    (さらに…)

  • データベースが使えないサーバーでもMySQLのように使えるtxtSQLの使い方

    ·

    master

    txtSQL_01

    安価なサーバーでは、PHPは使えるけれどもDB（データベース）はオプションの場合がある。
    データ件数も少なく、高度な機能を必要としない場合は、txtSQLを使うのもひとつの選択だろう。

    (さらに…)

  • CSVデータを連想配列にして任意の項目の数値で並び替える方法

    ·

    master

    テキストファイルでデータを保存する方法は、データの件数が少ない場合やデータベースの使えないサーバーを利用している場合には簡単で便利なのだが、通常は読み込んだファイルに保存されている順に表示となる。
    (さらに…)

  • 三点リーダがブラウザで文字の下側に揃って表示されてしまう時のcss解決方法

    ·

    master

    三点リーダとは、いわゆる中黒「・」が３つ並んで１文字分になっている記号のこと。
    (さらに…)

  • JavascriptDBを使い外部ファイルからデータを抽出してスタイルシートで成形する方法

    ·

    master

    以前の記事「AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法」でAjaxを使って外部のCSVファイルを読み込み、JavascriptDBで表示するまでを解説したが、今回はまとめとして、スタイルシートでレイアウトして表示する部分を中心に説明する。
    (さらに…)

  • イラストレータでweb用に保存すると画像が汚い時はここをチェックで解決

    ·

    master

    illustratorを使って作成したファイルを「Web用に保存…」や「Webおよびデバイス用に保存…」にすると画像が汚くなる（荒くなる）ことがある。 (さらに…)

  • AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法

    ·

    master

    JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。
    (さらに…)

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

    ·

    master

    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>