ブログ
SharePoint Server 2019でWebサービス経由でアイテムを取得する
ルーツ。起源。私のエンジニア人生はどこから始まったのだろうか。
気づけばエンジニアになって8年が経っていた。
パソコンに疎い、ずぶの素人がエンジニアとして仕事ができるようになった根源。
それは今でもはっきり覚えている。
初めて配属された現場で扱ったシステム「SharePoint Server」だ。
SharePoint Serverとはマイクロソフト社が提供する、グループウェアやエンタープライズコンテンツ管理の機能を提供するサーバー製品である。
当時の私はろくなプログラミング知識を持たぬまま、わけもわからず現場に配属され、このわけもわからない製品と戦い続けた。
そして他の現場も色々経験した現在、ふと思い返し、思うことがある。
顧客のニーズを実現しようとがむしゃらに試行錯誤を繰り返したあの日々。
その試行錯誤こそが今の私のエンジニアとしての技術を支えている。
そして、ここに断言しよう。
「SharePoint Serverはエンジニアの好奇心をかりたてる技術の塊」であると。
さて、前置きが長くなりましたがSharePoint Serverの環境を構築していきます。
私が業務で使っていたのはSharePoint Server 2010でしたが、現在はSharePoint Server 2019が最新のようです。どうせなら新しい方がいいので、SharePoint Server 2019の環境構築をしていきます。
以下の作業を実施していけば良いです。
1.VirtualBox
– 1-1.VirtualBoxのインストール
– 1-2.VirtualBoxの設定
2.Windows Server
– 2-1.Windows Server 2019のインストール
– 2-2.Active Directoryのインストール
– 2-3.ドメインコントローラへ昇格
3.SQL Server
– 3-1.SQL Server 2019のインストール
– 3-2.SQL Server Management Studio (SSMS)のインストール
4.SharePoint Server
– 4-1.ソフトウェア必須コンポーネントのインストール
– 4-2.SharePoint Server 2019のインストール
– 4-3.サービスアカウント用のADユーザを作成
– 4-4.SharePointファームの構成
– 4-5.サイトコレクション作成
正直、かなり作業ボリュームがあります。これだけで1つ記事が書けますが、本題とズレるのでまた機会があれば触れていきたいと思います。
SharePoint Serverは動作に結構なスペックが要求されるので仮想マシンにはメモリ8GB、CPUプロセッサ4を割り当てました。
気長にぽちぽち構築作業を進めていくと・・・
はい。できました！私の知っているSharePointとはだいぶ見た目が違います。
フラットデザインっぽくなっていて、フレキシブル表示にも対応していそうです。
さて、ようやく本題であるWebサービスを使ってみましょう。
まず、準備としてリストを作成していきます。
リストとはDBでいうところのテーブルにあたるものです。
歯車マークのサイトコンテンツから追加していきます。
リストが追加されました。
続いて、リストに列を追加していきます。
列とはDBでいうところのカラムにあたるものです。
列が作成できたら、適当にアイテムを追加していきます。
アイテムとはDBでいうところのレコードにあたります。
これで、取得対象の準備は完了です。
次は実際にデータを取得し、取得データを描画するページを作っていきます。
「ページ」から新しくWebパーツページを追加します。
レイアウトが選べるので、領域が広く使えそうな「ページ全体, 縦型」にします。
追加されたページにスクリプトエディターWebパーツを追加します。
追加されたスクリプトエディターのスニペットを編集から以下のHTMLを挿入し、編集を終了します。
単純に表示しても面白くないので、DataTablesを使って表示してみようと思います。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- datatables css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<div class="container">
<div id="main" class="col-xs-12 mt-4">
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- datatables js -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="http://win-cnu3nt79m1f/Shared%20Documents/test.js"></script>
仕上げに上記の最終行で読み込ませているtest.jsファイルを作成し、ドキュメントライブラリにアップロードします。
test.jsの内容
$(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>TestList</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Category' /> \
<FieldRef Name='Stock' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "http://win-cnu3nt79m1f/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: Result,
contentType: "text/xml; charset=\"utf-8\""
});
});
function Result(xData, status) {
var contents = $("<table id='list-items' class='table table-bordered'> \
<thead> \
<tr> \
<th>ID</th> \
<th>商品</th> \
<th>カテゴリー</th> \
<th>在庫数</th> \
</tr> \
</thead> \
<tbody> \
</tbody> \
</table>");
$(xData.responseXML).find("z\\:row").each(function() {
var trElem = $("<tr>");
trElem.append("<td>" + $(this).attr("ows_ID") + "</td>");
trElem.append("<td>" + $(this).attr("ows_Title") + "</td>");
trElem.append("<td>" + $(this).attr("ows_Category") + "</td>");
trElem.append("<td>" + Math.trunc($(this).attr("ows_Stock")) + "</td>");
contents.find("tbody").append(trElem);
});
$('#main').html(contents);
// datatableの設定を変更
$("#list-items").DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"
}
});
}
test.jsをアップロード
先ほど追加したページを開くと、アイテム取得と描画ができていることがわかります。
DataTablesによる取得データのページングやキーワード検索も可能です。
最後に、応用編として在庫数が40以下の商品を取得を試してみましょう。
Webサービスに送付するリクエストに以下のようなqueryタグを入れます。
これはいわゆるCAML(コラボレーションアプリケーションマークアップ言語)と呼ばれるものです。
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>TestList</listName> \
<query> \
<Query> \
<Where> \
<Leq> \
<FieldRef Name='Stock' /> \
<Value Type='Integer'>40</Value> \
</Leq> \
</Where> \
</Query> \
</query> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Category' /> \
<FieldRef Name='Stock' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
先ほどの画面を再描画すると・・・
無事、在庫数40以下の商品が表示されました！
今回はWebサービスとしてSOAP形式のものを利用しましたが、RESTによるデータ取得などもできるようです。どちらのサービスもアイテムの取得だけでなく、作成・更新・削除が可能なのでCRUDアプリケーションを開発することができます。
今回初めてSharePoint Server 2019を触りましたが、見た目や操作性などが様変わりしていて懐かしさと新鮮さを同時に感じました。
みなさんも自身のエンジニア人生のルーツを今一度たどってみてはいかがでしょうか。
関連記事
2024.09.30
2024.09.30
2024.04.08