Javascript

2018.05.08

ASP.NET Web API を作る・その６

『ASP.NET Web API を作る・その５』の続きです。１．前提と２．作成手順概要は再掲載します。

１．前提
　言語： C# を使用
　サーバー環境：
　　ＯＳ：Windowsserver 2012R2
　　ＤＢ：SQL Server 2014
　　Web Server IIS Ver8.5
　　ツール：VisualStudio Professional 2013 Update 4

２．作成手順概要
　(1) ASP.NET Web API プロジェクト新規作成
　(2) ADO.NET Entity Data Model の設定
　(3) Web API コントローラの作成
　(4) 公開用DBのテーブルにアクセス権の設定
　(5) IISに仮想ディレクトリ・アプリケーションの設定
　(6) 確認用AjaxHtmlの作成＆実行


３．作成手順詳細
　(6) 確認用AjaxHtmlの作成＆実行

最初にWebAPIが動作しているか確認します。
http://サーバー名称/ws/WebApplication1/api/テーブル名称/テーブルのKEY/
でアクセスしてみて、
2018050471

このようになればOKです。
実はjson形式で帰ってくるのを期待していたのですが、どこかで設定の誤りがあるかもしれません。
クロスドメインを考慮しなければこれでもOKです。
もう一つKEYを指定しないで、
http://サーバー名称/ws/WebApplication1/api/テーブル名称/
でアクセスしてみて、
2018050472

テーブルの内容が全件表示されればOKです。

続いてAjaxをつかってテーブルの内容を表示させてみます。
2018050473

ここで［一覧ロード］ボタンをクリックすると、
2018050474

テーブルの内容が全件表示されます。あとはhtmlの内容を加工すればアプリケーションとしては完成です。
ソースリストを以下に載せときます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<body>
　　<div id="site">
　　　　<header>
　　　　　　<h3>
　　　　　　　　ajax01.html
　　　　　　</h3>
　　　　</header>
　　　　<nav>
　　　　</nav>
　　　　<section>

　　<input id="loadButton" type="button" value="一覧ロード" />
　　　　<table id="result" class="table"></table>
　　
　　　　<script type="text/javascript">
<!--
$(function () {
　//ボタンのクリックイベントにハンドラを割り当て
　　$("#loadButton").click(function () {
　　　　$.ajax({
　　　　　　//WebサービスのURLを作成
　　　　　　url: "http://サーバー名称/ws/プロジェクト名称/api/テーブル名称/",
　　　　　　//データ形式はJSON
　　　　　　dataType: "json",
　　　　　　//結果をid=resultのdivタグに設定
　　　　　　success: function (data) {
　　　　　　　　$("#result *").remove();
　　　　　　　　$(data).each(function () {
　　　　　　　　　　$('<tr>' +
　　　　　　　　　　　'<td>' + this.hatu1 + '</td>' +
　　　　　　　　　　　'<td>' + this.syubetu + '</td>' +
　　　　　　　　　　　'<td>' + this.bansen + '</td>' +
　　　　　　　　　　　'<td>' + this.ikisaki + '</td>' +
　　　　　　　　　　　'<td>' + this.jikoku + '</td>' +
　　　　　　　　　　　'<td>' + this.hensei + '</td>' +
　　　　　　　　　　　'</tr><tr>' +
　　　　　　　　　　　'<td>' + this.hatu2 + '</td>' +
　　　　　　　　　　　'<td>' + this.syubetu2 + '</td>' +
　　　　　　　　　　　'<td>' + this.bansen2 + '</td>' +
　　　　　　　　　　　'<td>' + this.ikisaki2 + '</td>' +
　　　　　　　　　　　'<td>' + this.jikoku2 + '</td>' +
　　　　　　　　　　　'<td>' + this.hensei2 + '</td>' +
　　　　　　　　　　　'</tr>').appendTo('#result');
　　　　　　　　});
　　　　　　}
　　　　})
　　});
});
// -->
　　　　</script>
　　　　</section>
　　　　<footer>
　　　　</footer>
　　</div>
</body>

2018.05.08 Web, C#, Javascript | | コメント (0) | トラックバック (0)

2018.01.27

Javascriptお勉強５（書式を指定して表示）

2018012701とりあえず完成

最初はJavascriptで始めましたが、途中CSVファイルの読込が現在の仕様では出来なくなっていたので、途中からプログラムをphpで書いていますが、最後の文字色を変えるところをJavascriptにして、一応『横浜駅 発車案内』は完成しました。
http://yyhs.sakura.ne.jp/test/jstest08.php

これはデータをCSV形式で持っていていますが、これを今風のWebAPIに変更して次作に臨みます。

2018.01.27 Web, PHP&MySQL, Javascript | | コメント (0) | トラックバック (0)

2018.01.20

Javascriptお勉強４（取得した現在データに基づきWebページを表示する。）

まず、現在時刻を取得し、その時分をhh:mmの形式で表示する。
CSVデータを読込、上記で指定した時間以降のデータを1行だけ読み取り表示する。
という順でやってみます。（PHPでやっています）

1. 現在時刻を取得
　$timestamp = time() ;

2. hh:mmの形式で表示
　echo date("H:i", $timestamp);

3. CSVデータを読込、現在時刻以降のデータを1行だけ表示
　$chk =date("H:i", $timestamp);
　$fp = fopen("hama_hei19990310_data.csv", "r");
　while (($data = fgetcsv($fp)) !== FALSE) {
　　if ($data[4] < $chk){
　　　continue;
　　}
　　echo ' ',$data[0],' ',$data[1],' ',$data[2]・・・;
　　if ($data[4] >! $chk){
　　　break;
　　}
　}
fclose($fp);

この実行例を、http://yyhs.sakura.ne.jp/test/jstest06.phpに示します。

2018.01.20 PHP&MySQL, Javascript | | コメント (0) | トラックバック (0)

2018.01.13

Javascriptお勉強３（CSVデータを読み込む）

さて、『３．CSVデータを読み込む。』まできましたが、ネットで検索してみると、現在のJavascriptの仕様では、サーバーサイドでCSVデータの読み込みができないことがわかりました。
しょうがないので、ここからはPHPベースで続けることにします。とりあえずCSVデータを読込Web表示が出来るようになったら、CSV読込をWebAPI読込に変更してJavascriptベースに戻ることとします。
ここでは、『３．CSVデータを読み込む。』と『４．現在時間に対応するCSVデータにアクセスする。』をやってみます。

CSVデータを読込、プログラムで指定した時間［07:09］以降のデータを1行だけ読み取り表示する。
確認のためデータ全てを先に表示させる。
この実行例＆ソースリストを、http://yyhs.sakura.ne.jp/test/jstest05.phpに示します。

CSVデータの読込
　　$lines = file("ファイル名称.csv");
読込んだデータの全件表示
　　foreach($lines as $line){
　　　　print $line."<br>";
　　}

2018.01.13 PHP&MySQL, Javascript | | コメント (0) | トラックバック (0)

2018.01.09

Javascriptお勉強２（1秒ごとにに処理実行）

１秒毎に表示の更新を行うために、一定時間で繰り返す処理を作成します。
参考にしたURLは、http://www.pori2.net/js/timer/1.html
setIntervalを使えばいいようですね。

確認用のソースリスト
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<body>
　　<div id="site">
　　　　<header>
　　　　　<h3>
　　　　　　jstest03.html
　　　　　</h3>
　　　　</header>
　　　　<nav>
　　　　</nav>
　　　　<section>
　　　　　<div id="result"></div>
　　　　　<div id="result2"></div>
　　　　</section>
　　　　<footer>
　　　　</footer>
　　</div>
</body>
<script type="text/javascript">
　　var count = 999;
　　window.addEventListener('load', function() {
　　　　func_init()
　　});
　　window.addEventListener('load', function() {
　　　　// document.getElementById("result2").innerHTML = "JS Test Windows load 結果2";
　　　　func_time1000()
　　});
　　function func_init()
　　{
　　　　count = 0;
　　　　document.getElementById("result").innerHTML = "JS Test Windows load 初期値表示";
　　}
　　function func_time()
　　{
　　　　count = count + 1;
　　　　document.getElementById("result2").innerHTML = "JS Test Windows load 時間毎表示" + count;
　　}
　　function func_time1000()
　　{
　　　　setInterval("func_time()",1000);
　　}
</script>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
実行例：http://www.hagimoto.org/jstest03.html

2018.01.09 Javascript | | コメント (0) | トラックバック (0)

2018.01.08

Javascriptお勉強１（html読込完了後に処理実行）

記事『D-HTMLから現在のJavascriptへ』の「１．htmlを最後まで読み込んだことを検知してWebページの初期化を行う。」をやってみます。
参考にしたURLは、https://byuzensen.com/javascript-window-onload

1. window.onload = function() { 処理 };と、2. window.addEventListener('load', function() { 処理 });の方法があるが、1.の方法は複数書かれると最後だけが有効となるので2.の方が良いとのこと。jQueryは今回対象外にしときます。

確認用のソースリスト
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<body>
　　<div id="site">
　　　　<header>
　　　　　　<h3>
　　　　　　　　jstest02.html
　　　　　　</h3>
　　　　</header>
　　　　<nav>
　　　　</nav>
　　　　<section>
　　　　　　<div id="result"></div>
　　　　　　<div id="result2"></div>
　　　　</section>
　　　　<footer>
　　　　</footer>
　　</div>
</body>
<script type="text/javascript">
　　window.addEventListener('load', function() {
　　　　document.getElementById("result").innerHTML = "JS Test Windows load 結果1";
　　});
　　window.addEventListener('load', function() {
　　　　document.getElementById("result2").innerHTML = "JS Test Windows load 結果2";
　　});
</script>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
実行例：http://www.hagimoto.org/jstest02.html

2018.01.08 Javascript | | コメント (0) | トラックバック (0)

2018.01.07

D-HTMLから現在のJavascriptへ

1999年頃の動きのあるHTMLの技術ということでD-HTMLというのがありました。これを使って、
2018010701
当時の横浜駅の発車時刻案内を作ってみました。
CSVデータに記載した時刻表データを読み込んで、このWebページを表示した時間の発車時間案内を表示するものです。このhtmlの中身は、CSVデータを読み込むOBJECTの『object classid="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83"』とJavascriptで動作しWindowsXPのIEでは表示されますが、最近のブラウザではこの機能がサポートされていないので、機能しなくなりました。
そこで、現在のブラウザでも表示されるように作り直すこととしました。
Javascriptでやってみますが、必要な機能は、
１．htmlを最後まで読み込んだことを検知してWebページの初期化を行う。
２．１秒毎に表示の更新を行うために１秒を検出する。
３．CSVデータを読み込む。
４．現在時間に対応するCSVデータにアクセスする。
５．取得した現在データに基づきWebページを表示する。
こんなところでしょうか。それでは、一つづつその機能を確認していきましょう。

2018.01.07 Javascript | | コメント (1) | トラックバック (0)

その他のカテゴリー

C# Javascript PHP&MySQL SQL Server VB.NET Tip集 VB.NETプログラミング日記 Web Windows Server アコーディオン 今月の一言 学生生活 演奏の記録