JavaScript

	ブログをはじめるログイン

リアルタイムで日付表示　 [JavaScript]

日付をリアルタイムで表示する Javascript です。
日付が変わるのは１日１回なので、リアルタイムで表示する必要がないこともありますが、日付をまたいで利用するユーザーがいると想定される場合は、リアルタイムで表示を更新したくなります。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示</title>
<script type="text/javascript"><!--
function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = hiduke.getMonth()+1;
	var week = hiduke.getDay();
	var day = hiduke.getDate();
	var yobi= new Array("日","月","火","水","木","金","土");
	var msg = year + "年" + month + "月" + day + "日（" + yobi[week] + "）";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>

年月日と曜日を取得します。
曜日は、数字で返ってくるので、文字に変換します。
表示する文字列を作成し、id="rtDate" に表示します。
リアルタイムで表示を更新するために、setInterval() で１秒ごとに showDate() を実行しています。

JavaScript なので、ローカルのパソコンの日付設定を取得しています。
パソコンの日付設定が狂っていると、そのまま表示します。

表示桁数を２桁に固定して、2000年1月5日を 2000年01月05日と表示した方が見やすいかもしれません。。
曜日ごとに表示色を変えるなども考えられます。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = set2figures(hiduke.getMonth()+1);
	var week = hiduke.getDay();
	var day = set2figures(hiduke.getDate());
	var yobi= new Array("<font color='#ff0000'>日</font>",
	"月","火","水","木","金","<font color='#0000ff'>土</font>");

	var msg = year + "年" + month + "月" + day + "日（" + yobi[week] + "）";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>

このサンプルはテキスト表示なので、数字の画像を作って、日めくりカレンダー的な表示にもできます。
月単位のカレンダー形式にするのであれば、JavaScript ではなく、サーバー側で作った方がいい場合もあります。

タグ：リアルタイムカレンダー日付 JavaScript

2017-11-11 15:44 nice!(3) コメント(0)
共通テーマ：パソコン・インターネット

リアルタイムで時間表示　 [JavaScript]

時間をリアルタイムで表示する Javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示</title>
<script type="text/javascript"><!--
function showTime(){
	var jikan = new Date();
	var nowHour = jikan.getHours();
	var nowMin = jikan.getMinutes();
	document.getElementById("rtClock").innerHTML = nowHour + "時" + nowMin + "分";
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>

時間と分を取得して、表示する文字列を作成し、id="rtClock" に表示します。
リアルタイムで表示を更新するために、setInterval() で１秒ごとに showTime() を実行しています。

JavaScript なので、ローカルのパソコンの時間設定を取得しています。
パソコンの時間設定が狂っていると、そのまま表示します。

時間表示のカスタマイズは、いろいろ考えられます。
このままだと動いているか分かりづらいので、秒を取得して、１秒ごとに点滅させることも考えられます。
表示桁数を２桁に固定して、1時5分を 01時05分してもいいかもしれません。
２４時間表示ではなく、AM/PM 表示の方が見やすいという人もいると思います。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

// AM/PMと12時間表示
function setAMPM(hour){
	var ampm;
	var ret;
	if(hour < 12){
		ret = "AM " + set2figures(hour);
	}else{
		ret = "PM " + set2figures(hour-12);
	}
	return ret;
}

// 秒ごとに点滅
function setFlash(sec){
	var cnt = sec % 2;
	var ret;
	if(cnt != 0){		// 奇数
		ret = "+";
	}else{				// 偶数
		ret = "*";
	}
	return ret;
}

function showTime(){
	var jikan = new Date();
	var nowHour = setAMPM(jikan.getHours());
	var nowMin = set2figures(jikan.getMinutes());
	var nowsec = setFlash(jikan.getSeconds());
	document.getElementById("rtClock").innerHTML = nowsec + nowHour + ":" + nowMin;
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>

このサンプルはテキスト表示なので、数字の画像を作って、画像で表示すると時計らしくなります。
画像は、毎回読み込んでいるとアクセスに時間がかかるので、起動時にまとめて読み込むなどの工夫が必要になります。

タグ：時間時計リアルタイム

2017-11-11 15:11 nice!(3) コメント(0)
共通テーマ：パソコン・インターネット

textarea の行数をリアルタイムに数える　 [JavaScript]

textarea の行数を、リアルタイムに数える javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで行数を数える</title>

<script type="text/javascript"><!--
function CountLine( id, str ) {
    num = str.match(/\r\n|\n/g);
    if(num!=null){
        line = num.length +1;
    }else{
        line = 1;
    }
    document.getElementById(id).innerHTML = "行数：" + line + "行";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountLine('input1', value);">
</textarea>

<p id="input1">行数：1行</p>
</body></html>

javascript で、CountLine( id, str ) という関数を作り、textarea の onkeyup で呼び出します。

CountLine( id, str ) では、str.match() で改行コードかどうかチェックしています。

改行コードがあった場合は、0からカウントされるので、1を足します。

改行コードがなかった場合は、初期値の1を入れます。

表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの「行数：1行

」 は、初期値です。textarea は、画面に表示した段階で１行目が表示されているので、0行ではなく、1行としました。

textarea が複数あっても、id を変えれば対応できるようにしてあります。

今回は、リアルタイムに行数を数えたかったので、 javascript を使いました。リアルタイムで行数を数えたいということはあまりないと思うので、php などを使ってサーバー側で数えた方がいいかもしれません。

タグ：JavaScript 行数

2017-11-03 15:11 nice!(0) コメント(0)
共通テーマ：パソコン・インターネット

textarea に入力された文字数を、リアルタイムに数える　 [JavaScript]

textarea に入力された文字数を、リアルタイムに数える javascript のサンプルです。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで文字数を数える</title>

<script type="text/javascript"><!--
function CountStr( id, str ) {
	document.getElementById(id).innerHTML = "文字数：" + str.length + "文字";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountStr('input1', value);">
</textarea>

<p id="input1">文字数：0文字</p>
</body></html>

説明するほどのことでもないのですが、一応書いておきます。

javascript で、CountStr( id, str ) という関数を作り、textarea の onkeyup で呼び出します。

CountStr( id, str ) では、str.length で文字数が得られるので、表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの「文字数：0文字」は、初期値です。

textarea が複数あっても、id を変えれば対応できるようにしてあります。

この javascript では、改行コードも１文字として数えてしまいます。もし、改行コードを数えたくないのであれば、文字数から行数を引いてやる必要があります。

今回は、リアルタイムに入力文字数を数えたかったので、 javascript を使いましたが、リアルタイムでなくてもいいのであれば、php などを使ってサーバー側で数えた方がいいかもしれません。

タグ：文字数 JavaScript

2017-11-03 14:49 nice!(0) コメント(0)
共通テーマ：パソコン・インターネット

javascript に依存しない方がいい理由　 [JavaScript]

javascript(js) は、便利なスクリプト言語です。
ブラウザとテキストエディタがあれば始められるし、コンパイルやビルドといった作業も必要ないので、すぐに動作確認できます。
プログラムを組んだことの無い人でも、とっつきやすいので、javascript しか使えないという人も見かけます。

昔は、動作が重くて使い物にならなかったのですが、回線速度が速くなり、パソコンの処理能力が早くなり、ブラウザも javascript を高速処理するように作られるようになったので、今では当たり前のように使われています。

jQuery が出てきてから、かなり複雑なことが簡単にできるようになってきましたが、なんでもかんでも javascript を使ってしまう（javascript しか使えない？）という問題も出てきました。

javascript は、クライアントサイドのスクリプトなので、それを忘れていると、おかしな使い方をしてしまうことがあります。
よくあるのが、入力フォームの入力チェックを javascript でやってしまうこと。
これ自体は問題ないのですが、サーバー側に送った時点で、もう一度同じチェックをする必要があります。
javascript を使って、クライアント側でチェックをしても、サーバーに転送する途中で改変される可能性があるからです。
どうせ同じチェックをすることになるので、サーバー側でチェックすれば1回で済みます。
（この辺は、フォームの内容にもよりますが）
サーバー側に送るデータをあつかう場合には、javascript に頼らない方がいいのですが、クライアントサイドということを意識していないと、javascript だけでやった気になってしまいます。

また、javascript を使えない現場というのもたまにあります。
大企業などは、セキュリティポリシーを本社で管理している場合があります。
多くの場合、javascript の特定の命令を実行できないようにしてあったりします。
なので、大企業の出張所や地方の店舗などでは、javascript がうまく動かないということが起こります。
本社に掛け合っても、セキュリティポリシーを変更してもらえることはないので、javascript を使わない方法を考えるしかありません。

専用端末を使う場合も、javascript が動かないことがあります。
セキュリティ的に禁止している場合もありますが、専用端末の場合、ハードウェアが貧弱で javascript が動かないということもあるので、こちらも、javascript を使わない方法を考えるしかありません。

javascript は便利なのですが、あまり依存してしまうと問題になることもあります。
できれば、javascript だけでなく、サーバーサイドの言語（php や Ruby など）を習得して、javascript が使えない状況でもなんとかできるようにしておくことも必要です。

タグ：JavaScript

2017-10-07 22:42 nice!(2) コメント(0)
共通テーマ：パソコン・インターネット

JavaScript のクロージャとは？　[JavaScript]

ブックマークレットの作り方で、うっかり「クロージャ」とか書いてしまったので、ちょっと説明（というか解説）します(ToT;

クロージャとは、JavaScript の書き方の名前です。具体的に、「これがクロージャじゃ！」というモノではありません。
プログラムの世界では、考え方とか書き方とかに名前が付いていることがよくあります。実体がないので、文字や言葉で説明すると難しく感じてしまいます。調べれば調べるほど難しい用語が出てきて、余計に理解できないということもあります。
とりあえず、「クロージャ」という名前自体にはたいした意味は無いので、「こういう書き方もできるんだ！」くらいの理解で十分です。

ブックマークレットでは、グローバル変数問題の回避策として、クロージャを使っています。本当は、他にも使い道はあるのですが、その辺は、他のサイトを検索してください。

ブックマークレットのサンプルとして示したソース

001: javascript:(
002:     function(){
003:         function g() {
004:             var title = document.title;
005:             window.alert(title);
006:         }g();
007:     }
008: )();

このソースは、次のような意味になります。

１行目
ブックマークレットの定型文です。ブックマークレットは、 javascript: から始まります

２行目
名前の無い関数（無名関数）を定義しています。
この無名関数の中に書かれた変数は、他の関数などから呼び出されることはありません。関数に名前がないので、外から呼び出せないのです。なので、他のグローバル変数とバッティングすることはない、ということになります。

３行目
関数 g() を定義しています。
４行目と５行目が、g() の処理内容です。

６行目
関数 g() を実行しています。

という書き方になっています。
無名関数を使っているというところがポイントですね。

なので、次のような書き方もできます。

001: javascript:(
002:     function(){
003:         function g(title) {
004:             window.alert(title);
005:         }
006:         var title=document.title;
007:         g(title);
008:     }
009: )();

最初の例と同じ動作をするので、処理の流れを考えてみてください。

タグ：クロージャブックマークレット JavaScript

2016-01-10 19:11 nice!(1) コメント(0) トラックバック(0)
共通テーマ：パソコン・インターネット

ブックマークレットの作り方　 [JavaScript]

ブックマークレットとは、ブラウザのブックマークに登録して利用する、JavaScript で記述された簡単なプログラムのことです。１クリックで、ちょっと便利な機能を実行することができます。

ブックマークレットは、HTML と JavaScript が少し分かれば、簡単に作ることができます。

【ツールバーを表示しておく】
ブックマークレットは、ブラウザのツールバーに登録するモノなので、まず、ツールバーを表示させておきます。
ツールバーの名称は、「ブックマークツールバー」、「お気に入りバー」、「ブックマークバー」など、ブラウザによって異なります。
ブックマークレットは、リンクをツールバーに、ドラッグ＆ドロップするだけで登録することができます。

【簡単なブックマークレット】
ブックマークレットでは、JavaScript のクロージャという書き方を使うことが一般的になりつつあります。
これは、JavaScript のグローバル変数の問題を回避するためです。
ただし、ふる～いブラウザは、クロージャに対応していないこともあります。

とりあえず、簡単なブックマークレットのソース

javascript:(
	function(){
		function o() {
			var title=document.title;
			window.alert(title);
		}o();
	}
)();

いま見ているページのタイトルを表示するだけのプログラムです。
function() の中に function o() がありますが、これが、クロージャという書き方です（大雑把すぎる？）。
このソースから、空白を削除したり、特殊文字を変換したり、改行コードを削除したりして、１行にしないといけないのですが、手作業だといちいち面倒なので、こちらのサイトで一発変換します。

Website Tools：ブックマークレット変換（成形）

上記のソースをコピーし、このサイトに貼り付けて、［ブックマークレットへ変換］のボタンを押すと、１行に変換されます。

ついでに、［>> 変換結果を試してみる］というリンクが表示されるので、クリックして動作を確認することもできます。

さらに、［>> 変換結果を試してみる］というリンクをツールバーにドラッグすれば、そのままブックマークレットとして登録できてしまいます。

ブックマークレットの名前を変更したい場合は、ブックマークレットを右クリックしてプロパティから変更することができます。

これで、ブックマークレットの完成です。
あとは、プログラムを拡張していくだけです。見ているページのリンクを取得したり、反転させた文字列を検索したりといったプログラムも可能です。

【ブックマークレットを作るときに注意すること】
HTML や JavaScript が間違っていなければ、動作します。
ただし、ブックマークレットは、登録できるプログラムの長さに制限があります。
プログラムが大きくなってくると、文字数の制限に引っかかってしまいます。この場合、動作しません。
文字数の制限は、ブラウザの種類やバージョンによって違うので、怪しいと思ったら確認してみてください。

参考：ブックマークレット／Bookmarkletの作り方

【ぶっくま！のブックマークレット】
ぶっくま！のブックマークレットは、以下のようになっています。

javascript:(
    function(){
        function g(s) {
            var d=window.open(
              'http://www.bukkumaweb.com/bml.php?'+s).document;
        }
        var zu=location.href;
        var zt=document.title;
        if ( zt.length > 30 ) {
            zt = zt.substr( 0,30 );
        }
        var para="zu="+zu+"&zt="+zt;
        g(para);
    }
)();

ぶっくま！の場合、いろいろと複雑な処理をする必要があるので、主な機能は、サーバー側で処理しています。
この方法だと、仕様が変わっても、サーバー側のプログラムを直すだけ対応できます。

タグ：ブックマークレット作り方

2016-01-10 01:35 nice!(2) コメント(0) トラックバック(0)
共通テーマ：パソコン・インターネット

JavaScript で window.close するのはあきらめた！　[JavaScript]

ようやく、ぶっくま！のブックマークレット（ＰＣ用）を公開できました。モバイル用は、これから作ります・・・。

ブックマークレットを作っていて、ハマってしまったので、メモっておきます。

最初、ブックマークレットは、ウインドウ（小窓）を開く仕様にするつもりだったのですが、動作チェックをしていたら、ウインドウを閉じることができないことに気づきました。

ユーザーが手動で閉じることはできますが、JavaScript（ブログラム）から close() しても閉じないということ。しかも、ブラウザの種類やバージョンによって挙動が違う！

なんでできないの？と思って、調べてみたら、

　　JavaScript の close() を使った攻撃手法があり、
　　その攻撃を回避するために、各ブラウザが独自で対応している

ということらしいです。

ブラウザの種類やバージョンによって挙動が違うのは、独自に対応しているためですね。
独自に対応しているということは、これからも仕様がコロコロ変わる可能性があるということ。
実際、いままでも（各ブラウザとも）何回か仕様が変わってますし。
裏技的な方法でウインドウを閉じるように作っても、ブラウザのバージョンアップで使えなくなるのはちょっと問題です。

企業などが作っている Webサービスでは、ブラウザを判定して、別々のプログラムを動かしていたりしますが、ブラウザのバージョンアップにあわせて動作をチェックして、プログラムを作り直す作業が発生します。
企業が業務としてやっているなら別ですが、個人がそんなことできません！

ということで、別ウインドウを開くのではなく、別タブを開く仕様に変更しました。
ちょっと使いにくいかもしれませんが、動作しなくなるよりはいいかなと。

ちょうど、各ブラウザのバージョンアップやアップデートが目白押しな時期なので、タイミング的にも悪かったですね。

タグ：JavaScript ブックマークレットブラウザ

2016-01-08 21:25 nice!(1) コメント(0) トラックバック(0)
共通テーマ：パソコン・インターネット

JavaScript ブログトップ