Web

2018.05.08

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

ASP.NET Web API を作る・その5』の続きです。1.前提と2.作成手順概要は再掲載します。

1.前提
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (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>

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

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

ASP.NET Web API を作る・その4』の続きです。1.前提と2.作成手順概要は再掲載します。

1.前提
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (5) IISに仮想ディレクトリ・アプリケーションの設定

私のWeb ServerのAPIは、サーバー名称/ws/API名称 という形式で作成していますので、この形式で設定を行っています。なので、wsに対して仮想ディレクトリの追加・アプリケーションの設定を行います。
まず、wsをポイントします。(マウスで左クリック)
2018050461

続いてマウスを右クリックして「仮想ディレクトリの追加」をクリックします。
2018050462

「仮想ディレクトリの追加」画面に対して、
エイリアス(A): はAPIの名称を指定します。この場合は、WebApplication1 を指定。
物理パスは右側の[...]をクリックして、「フォルダーの参照」画面で。このプロジェクトのフォルダの1階層下のプロジェクト名称を指定します。
そして[OK]をクリックします。
2018050463

設定が出来たら、[OK]をクリックします。
2018050464

続いて追加された仮想ディレクトリをポイントして右クリックして、「アプリケーションへの変換」をクリックします。
2018050465

「アプリケーションの追加」画面に対して、そのまま[OK]をクリックします。
2018050466

設定した名称のアイコンがローカルフォルダから方写真のように図案が変わっていれば完了です。
2018050467

以上で「IISに仮想ディレクトリ・アプリケーションの設定」は完了です。この後は、確認用AjaxHtmlの作成&実行を行います。
ASP.NET Web API を作る・その6』に続きます。

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

2018.05.07

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

ASP.NET Web API を作る・その3』の続きです。1.前提と2.作成手順概要は再掲載します。

1.前提
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (4) 公開用DBのテーブルにアクセス権の設定

「SQLServer Management Studio」を管理者権限で起動し、目的のDBを開きます。
公開の対象となるテーブルを右クリックし、プロパティ(R)をクリックします。
2018050451

「テーブルのプロパティ」画面で、左側「ページの選択」で「権限」を選択します。
このテーブルはAPI公開用に作成したばかりなので権限の設定は未だありません。
そこで、右側の[検索(E)]をクリックします。
2018050452

「ユーザーまたはロールの選択」画面で、[参照(B)]をクリックします。
2018050453

「オブジェクトの参照」画面で、ASP.NETゲストユーザ用のアカウント[IIS_IUSRS]を✔し、[OK]をクリックします。
2018050454

「ユーザーまたはロールの選択」画面で、[IIS_IUSRS]が設定されたので、[OK]をクリックします。
2018050455

「テーブルのプロパティ」画面の下方の「IIS_IUSRSの権限(P)」に対して、このテーブルは内容の公開だけ行うので「選択」の行の「許可の有無」欄に✔を入れる。左記により「許可」欄は自動的にチェックが入る。
その後、[OK]をクリックする。
2018050456

[OK]すると、「テーブルのプロパティ」画面は消えるが、再度開くと「権限の許可者」欄が記載された行が増えている。
2018050457

以上で「SQL Serverアクセス権の設定」は完了です。この後IISの設定を行います。
ASP.NET Web API を作る・その5』に続きます。

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

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

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

1.前提
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (3) Web API コントローラの作成
画面右の「ソリューション エクスプローラー」のControllersにポイントされた状態で右クリック →追加(D) →コントローラー(T) と順にクリックします。
2018050434

「スキャフォールディングの追加」画面の「Entity Framework を使用したアクションがある Web API 2 コントローラー」を選択して、[追加]をクリックします。
2018050435

「コントローラーの追加」の モデル クラス(M):には、右側のタブをクリックして一覧が出てきたら、『テーブル名称(プロジェクト名称)』を選択する。
2018050436

「コントローラーの追加」の データコンテキストクラス(D):には、右側のタブをクリックして一覧が出てきたら、『データ接続の選択画面で設定した接続設定名称(プロジェクト名称)』を選択する。
2018050437

上記設定が出来たら、[追加]をクリックする。
2018050438

スキャフォールディング中... が表示され、
2018050439

これで、Web APIは出来上がりです。
2018050440

以上で「Web API」は出来上がりですが、このAPIを使用するための設定をSQL ServerとIISにこの後行います。
ASP.NET Web API を作る・その4』に続きます。

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

2018.05.06

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

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

1.前提
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (2) ADO.NET Entity Data Model の設定
ASP.NETでデータベースを連携するときは、EntityFrameworkを使用します。
新規にデータベース定義を行う時は、「ADO.NET Entity Data Model」の追加から始めますが、ここでは、既にあるデータベースのTableを利用することにし、その手順を述べます。(1)で作成したプロジェクトに定義を追加していくことになります。

画面右の「ソリューション エクスプローラー」のプロジェクト名称にポイントされた状態で、画面左側のプロジェクト(P) →新しい項目の追加(W) をクリックします。
2018050417

「新しい項目の追加」画面で、「ADO.NET Entity Data Model」を選択します。
名前(N):は、とりあえず Model1 のままとし、[追加(A)]をクリックします。
2018050418

「Entity Data Model ウィザード」画面で、「データベースから Code First」を選択し、[次へ(N)]をクリックします。
2018050419

「Entity Data Model ウィザード」画面のデータ接続の選択で、[新しい接続(C)]をクリックします。
2018050420

「接続のプロパティ」画面の、データソース(S):は、[Microsoft SQL Server(SqlClient)](多分そのまま)、
サーバー名(E):は、SQL Serverが存在するサーバー名称を入力する(タブで選択できる場合もある)、
「データベースへの接続」は、データベース名の選択または入力(D):を選択し、タブで選択または名称を直接入力する。
確認のため、[テスト接続(T)]をクリックする。
2018050421

設定内容が正しければ、『テスト接続に成功しました。』が表示されるので、[OK]をクリックする。
2018050422

「Entity Data Model ウィザード」画面のデータ接続の選択で、設定内容が表示される。
「接続設定に名前を付けて Web.Configに保存(S):」に✔、名称は仮定値をそのまま使用する。
そして、[次へ(N)]うぃクリックする。
2018050423

「Entity Data Model ウィザード」画面のデータベースオブジェクトと設定の選択で、
モデルに含めるデータベースオブジェクト(W)に、データベース内のテーブル一覧が表示されるので、
作成するAPIで使用するテーブルに✔を入れる。
また、その下の、生成されたオブジェクトの名前を複数化または単数化する(S)にも✔を入れる。
そして、[完了(F)]をクリックする。
2018050424

設定が出来たので、ここで一度目のビルドを行う。
Visual Studioの画面から、ビルド(B)→ソリューションのビルド(B)をクリックする。
2018050432

Visual Studioの画面下方の「出力」欄でビルドが正常終了したのを確認する。
2018050433

以上で「ADO.NET Entity Data Model の設定」は完了。
ASP.NET Web API を作る・その3』に続きます。

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

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

2018050410_22016年11月にWeb API(ASP.NET版)を初めて作成しましたが、その手順をまとめていなかったので、その時使用した参考書が行方不明になってしまったため、作り方が分からなくなってしまいまいした。
片付けをしていたら参考書(写真右)が見つかったので、作成手順をまとめることにしました。
なお、以下の手順・環境ではクロスドメインに対応していないので対応については要検討。

1.前提
 よくある参考書ではテスト環境でのことが多く、実際に稼働するときに使えないので、本稼働環境の手順とします。
 言語: C# を使用
 サーバー環境:
  OS:Windowsserver 2012R2
  DB:SQL Server 2014
  Web Server IIS Ver8.5
  ツール:VisualStudio Professional 2013 Update 4

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


3.作成手順詳細
 (1) ASP.NET Web API プロジェクト新規作成
Visual Studio を起動し、ファイル(F)→新規作成(N)→プロジェクト(P) を順に選択する。
2018050411

▷インストール済み→▷Visual C#→▷Web → ASP.NET Webアプリーケーション を順に選択する。
2018050412

新規 ASP.NET プロジェクト画面で、
テンプレートの選択(S): → Web API を選択する。
以下にフォルダー及びコア参照を追加: → MVC と Web API に ✔ する。
画面右側の[認証の変更(A)]をクリックする。(認証無しにするため)
2018050413

認証の変更画面で、
認証なし(N) を選択して、[OK]をクリックする。
2018050414

[認証の変更(A)]
認証: 認証なし を確認して、[OK]をクリックする。
2018050415

「ユーザーの ASP.NET アプリケーション 画面」で、「プロジェクトの作成が完了しました」が表示されれば、この項番の作業は完了です。
2018050416

ASP.NET Web API を作る・その2』に続きます。

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

2018.01.27

Javascriptお勉強5(書式を指定して表示)

2018012701とりあえず完成

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

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

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

2016.04.24

動的webページの更新日時取得方法

webページの更新日時を取得するには、JavaScriptならば、
string = document.lastModified;
を使用したり、C#ならば、HTTPでGETしてHttpWebResponseのLastModifiedで取得する方法があります。

どちらも同じことをしているわけですが、この方法は静的Webページには有効ですが、ブログ・掲示板などのように動的にhtmlを生成する動的Webページには使えません。動的Webページの場合、LastModifiedはhttpリクエスト時点での日時が返されます。

ブログ・掲示板などはWebページ上に更新日時が表示されていることが多いので、htmlを読込みその中の最初に記載されている更新日時を取得すればいいわけです。
この方法で作成したリンク集は、↓です。
http://www.hagimoto.org/webapp/link/WebLink.aspx?site_id=1000

動的webページの更新日時の取得方法を以下にまとめました。
(厳密にいえばWebページの更新日時ではなく、それぞれの記事の更新日時ですが)

1. teacup 掲示板
表示例→投稿日:2016年 4月16日(土)04時31分27秒
html内容↓
<SPAN CLASS="Kiji_Created">
 投稿日:2016年 4月16日(土)04時31分27秒 <!-- Remote Host:・・・以下省略
html parseの開始タグを'投稿日:'、終了タグを' <'として、投稿日時本体(年月日時分まで固定長、秒は可変長)を取得し、先頭からの文字数の位置決めで年月日時分を取得する。秒は1桁or2桁の時があるので、桁数に応じて取得する。

2. ameblo
表示例→2016-04-12 01:45:54
html内容↓
<span class="date">2016-04-12 01:45:54</span>
html parseの開始タグを'<span class="date">'、終了タグを'</span>'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。

3. excite blog
表示例→2016-02-16 15:02
html内容↓
<tr><td class="SMALL">at 2016-02-16 15:02</td></tr>
html parseの開始タグを'<td class="SMALL">at '、終了タグを'</td>'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分を取得する。秒はないので、00としておく。

4. goo blog
表示例→2016-04-15 22:35:39 又は、2016年04月15日
html内容↓(<rdf:Descriptionの箇所を使う)
dc:date="2016-04-15T22:35:39+09:00"
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。

5. FC2 BLOG
表示例→2016-04-05 又は、2016.04.15 又は、Mar 28
html内容↓(<rdf:Descriptionの箇所を使う)
dc:date="2016-04-05T12:14:18+09:00" />
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。
又は、
dc:date="2016-03-28T14:
<%topentry_minute:39+09:00" />
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(固定長)を取得し、年月日時は先頭からの文字数の位置決めで取得し、分は後方から2文字分とし、秒は、00とする。

6. YAHOO!ブログ
表示例→2016/4/1(金) 午前 0:16
html内容↓(<rdf:Descriptionの箇所を使う)
dc:date="2016-04-01T00:16:21+09:00" />
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。

7. yaplog
表示例→April 14 [Thu], 2016, 22:53
html内容↓
<div class="date">
<a href="http://yaplog.jp/accordion0210/monthly/201604/">April</a>
<a href="http://yaplog.jp/accordion0210/daily/201604/14/">14</a>
[Thu], 2016, 22:53
</div>
html parseの開始タグを'<div class="date">'として先頭位置を取得したら、Next開始タグを'/daily/'、終了タグを'+09:00"'として、投稿日時本体(可変長)を取得し、先頭からの文字数の位置決めで年月日を取得する。
さらに、後方から文字数をカウントして、時分を取得する。ただし、時は可変長(1時は1、10時は10と記載)。秒は、00とする。
なお、html内容では改行記号はUnicodeの場合2文字分カウントされるので注意。

8. So-net ブログ
表示例→2016-04-16 15:15
html内容↓(<rdf:Descriptionの箇所を使う)
dc:date="2016-04-16T15:15:15+09:00"
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。

9. LocomotionのPHP掲示板
表示例→2016/03/14(Mon) 18:46:42
html内容↓
<span class="com_foot"> ... 2016/03/14(Mon) 18:46:42 [181]</span>
html parseの開始タグを'<span class=\"com_foot\"> ... '、終了タグを' ['として、投稿日時本体(固定長)を取得し、先頭からの文字数の位置決めで年月日を、後方からの位置決めで時分秒を取得する。

10. jugem.jpブログ
表示例→2015.10.31 Saturday
html内容↓(<rdf:Descriptionの箇所を使う)
dc:date="2015-10-31T8:23:38+09:00"
html parseの開始タグを'dc:date="'、終了タグを'+09:00"'として、投稿日時本体(可変長)を取得し、先頭からの文字数の位置決めで年月日時分秒を取得する。
ただし、時は可変長(1時は1、10時は10と記載)である。

11. @Nifty cocolog
rssのアドレスに対してLastModifiedで更新日時を取得することができる。
rssのアドレス表示がないブログでも、
http://xxxxx.cocolog-nifty.com/のブログのrss(rdf)は、
http://xxxxx.cocolog-nifty.com/blog/index.rdf で、
rss(xml)は、
http://xxxxx.cocolog-nifty.com/blog/rss.xml で取得できた。

以上

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