javascript

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

2014年4月25日

·

master

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

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

2014年4月3日

·

master

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

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

2014年4月1日

·

master

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

設定方法

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>

同様に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の使い方

2014年4月1日

·

master

データベース不要、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で出力されるタグを変更したい時はこの方法

仕様が変わったIE11の判別をjavascriptでしたい時はこの方法

2014年3月20日

·

master

IE11ではユーザエージェントの文字列が、IE10等のいままでのIEの各バージョンとは表記のルールが変更されている。
そのため、古くから使われてきた、javascriptによるブラウザの振り分けでは判別出来ないケースが起きる。

(さらに…)

WordPressの投稿記事内でjavascriptを使いたい時

2013年4月11日

·

master

通常、WordPressでは記事内に書かれたjavascriptは、たとえテキストモードで入力しても自動的にエスケープされ動かない仕様となっている。

記事内でjavascriptを使いたい場合の解決策としてはカスタムフィールドを使用したりプラグリンを追加する等いくつかの方法があるが、最も簡単なのは　inline-javascript　というプラグインを導入する方法。
使い方はいたって簡単。
inline-javascript　をインストールしてプラグインを有効化。
あとは使いたいjavascriptの前後を
[inline]〜[/inline]
で囲むだけでいい。

例えばページを読み込んだら任意のページに自動的にジャンプさせたい時は
テキストモードにして以下のように記載する。

[inline]
<script LANGUAGE="JavaScript">
function autoLink(){
	location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
</script>
[/inline]

実際に上記を入力・保存すると分かるが、scriptのタグは自動的に [ ] に置き換わる。

[inline]
[script LANGUAGE="JavaScript"]
function autoLink(){
	location.href='http://www.digital-gate.com/';
}
setTimeout('autoLink()',0); 
[/script]
[/inline]

もちろんこのままできちんと動作するからこのままで良い。

Javascriptで引数からセレクトメニュー（プルダウンメニュー）を選択状態にしたい時

2013年3月15日

·

master

前回、Javascriptでセレクトメニュー（プルダウンメニュー）が変更されたらGETで送信する方法を書いたが、引数付きでジャンプした際、セレクトメニューはデフォルトの一番上が選択された状態に戻ってしまう。

PHP等の場合は、セレクトメニューを書き出す際にselectedを付加して書き出せば良いが、.htmlの場合はJavascriptで処理する。
例えば以下URLの場合

http://www.digital-gate.com/?c=2&g=1

下のHTMLを見れば分かるが、通常何もしない状態ではそれぞれのプルダウンは「全クラス表示」「全グループ表示」となるが、それでは表示されているであろう内容と合わないから「c」のプルダウンが「2組」、「g」のプルダウンが「グループ1」が選択された状態にしたい。

URLの引数を取得して、プルダウンメニューが選択された状態になるようにする方法は以下のサンプル

Javascript

function getVars(){
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i <hashes.length; i++){
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

上記Javascriptを使うと引数から設定値を簡単に取得出来る。

class = getVars()["c"];
group = getVars()["g"];

使い方はこんな感じ。

あとはjqueryを使ってプルダウンの選択を変更するだけ。
※別途jqueryを読み込んでおくこと。

$('#class-items').val(class);
$('#group-items').val(group);

具体的にはこんな感じ。

HMTL

<form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>

jquery mobileでプルダウンを選択状態にしたい時

2013年3月4日

·

master

javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

HTML

<form method="get" action="" id="select">
    <select name="menu" id="course">
        <option value="">選択してください</option>
        <option value="1">セレクト1</option>
        <option value="2">セレクト2</option>
        <option value="3">セレクト3</option>
        <option value="4">セレクト4</option>
        <option value="5">セレクト5</option>
    </select>
</form>

javascript

<script type="text/javascript">
    //選択済にしたい項目のvalue
    var co = 2;

    //該当するselectのIDにセット
    $('#course').val(co);

    //jquery mobile用の処理
    $('select').selectmenu('refresh',true);
</script>

最後の

$('select').selectmenu('refresh',true);

がポイント

ランダム文字列生成スクリプト（JavaScript版）

2013年1月29日

·

master

指定した文字種と文字数で、ランダムな文字列が作成できます。基本はローマ字小文字（a-z）追加したい文字種があればチェックします。

そのままコピペで使えるJavaScriptとhtmlは以下

<script type="text/javascript" language="JavaScript">
	function Generat(){
		var result = '';
		var source ='abcdefghijklmnopqrstuvwxyz';
		if(document.generator.c1.checked){source +='ABCDEFGHIJKLMNOPQRSTUVWXYZ';}
		if(document.generator.c2.checked){source +='0123456789';}
		if(document.generator.c3.checked){source +='-';}
		if(document.generator.c4.checked){source +='_';}
		var len = document.generator.c5.options[document.generator.c5.selectedIndex].value; 
		for(var i=0; i<len; i++) {result += source.charAt( Math.floor( Math.random() * source.length));}
		alert(result);
		return result;
	}
</script>

<form name="generator">
<input type="checkbox" name="c1" checked>ローマ字大文字（A-Z）<br>
<input type="checkbox" name="c2" checked>数字（0-9）<br>
<input type="checkbox" name="c3">ハイフン「-」<br>
<input type="checkbox" name="c4">アンダーバー「_」<br>
<select name="c5">
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<option value="32">32
<option value="33">33
<option value="34">34
<option value="35">35
<option value="36">36
<option value="37">37
<option value="38">38
<option value="39">39
<option value="40">40
<option value="41">41
<option value="42">42
<option value="43">43
<option value="44">44
<option value="45">45
<option value="46">46
<option value="47">47
<option value="48">48
<option value="49">49
<option value="50">50
<option value="51">51
<option value="52">52
<option value="53">53
<option value="54">54
<option value="55">55
<option value="56">56
<option value="57">57
<option value="58">58
<option value="59">59
<option value="60">60
<option value="61">61
<option value="62">62
<option value="63">63
<option value="64">64
</select> 文字<br>
<input value="作成" onclick="Generat()" type="button"><br>
</form>

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

2012年7月21日

·

master

１秒毎にリアルタイムに更新されるデジタル時計をサイトに導入したい時は、以下の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>