Visual Studioで作成するSharePointアドイン開発

Line風Chatアドイン

２０１６年５月

SharePoint Onlineカスタマイズ

今回のお題

ディスカッション掲示板をLINE風の

インタフェースでリアルタイムにチャットしたい

利用する仕組み

• SharePointホスト型アドイン

•カスタムWebページ

•ディスカッション掲示板

掲示板のインスタンスを作成

ChatのベースはSharePoint標準のディスカッション掲示板を利用します

掲示板を操作するJS

ディスカッション掲示板をアクセスするライブラリを探してみる

Working with Discussions List via SharePoint Client Object Modelhttps://blog.vgrem.com/2014/01/20/working-with-discussions-list-via-sharepoint-client-object-model/

技術調査

LINE風メッセージ表示

WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法

http://nelog.jp/line-bolloon-css

技術調査

カスタムWebページのロジック

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");function initializePage(){

var context = SP.ClientContext.get_current();var user = context.get_web().get_currentUser();context.load(user);context.executeQueryAsync();

$(document).ready(function () {//ページ表示処理

});

function autoUpdateMessages() { //自動更新はsetTimeoutを利用しているupdateMessages(currentDisscussion, autoLatestUpdated, function () {

setTimeout(autoUpdateMessages, 5000);});

}}

クライアント側のJavaScriptでロジックは記述。ページの初期表示はsp.jsを読み込んだ後のdocument readyのタイミングで行う。自動更新はsetTimeoutを利用している

掲示板の検索

function createAllMessagesByDisscussionIDQuery(disscussionId, lastmodified) {var qry = new SP.CamlQuery;var viewXml;if (lastmodified) {

viewXml = "<View Scope='Recursive'> ¥<Query> ¥

<Where> ¥<And> ¥

<Eq> ¥<FieldRef Name='ParentFolderId' /> ¥<Value Type='Integer'>" + disscussionId + "</Value> ¥

</Eq> ¥<Gt> ¥

<FieldRef Name='Modified' /> ¥<Value Type='DateTime' StorageTZ='TRUE' IncludeTimeValue='TRUE'>"

+ ISODateString(lastmodified) + "</Value> ¥</Gt> ¥

</And> ¥</Where> ¥

</Query> ¥</View>";

} else {}qry.set_viewXml(viewXml);return qry;

}

CAMLを使うと複雑な検索もできる！！

リストの検索

SharePoint JavaScript オブジェクトモデルを利用したリスト検索は効果的にデータを取得するため独特のステップが必要

1•検索条件をCAMLで構築

camlQuery.set_viewXml()

2•リストを検索（実際には検索されない）

completedItems = employeeList.getItems(camlQuery);

3•取得するプロパティを指定

clientContext.load(completedItems);

4•検索の実行（実際に検索）

clientContext.executeQueryAsync(success,fail);

全体レイアウト

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"><div id="navigation-area">

<div><p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/Chat/AllItems.aspx';" Text="掲示板の管理" />

</p></div><p>ディスカッション</p><ul id="discussion-items"></ul>

</div><div id="main-area">

<table id="discussion-messages"><tbody> </tbody><tfoot>

<tr><td></td><td><div id="input-message-area" style="display:none;">

<textarea rows="5" cols="10" id="input-message" ></textarea><input id="send-message" type="button" value="送信" />

</div></td><td></td></tr>

</tfoot></table>

</div></asp:Content>

カスタムページとCSSを利用して全体レイアウトを作成するHTMLと少しWeb Formの知識があれば簡単

完成

掲示板の管理でディスカッションを作成

左のディスカッション一覧から選択してチャットが可能

まとめ

• SharePointのディスカッション掲示板を利用してChatツールを作成

• SharePointホスト型でクライアント側のロジックだけで実現（お手軽に組み込める！！）

• SharePoint JavaScript オブジェクトモデルは機能が豊富で様々なアドインを作成することができる

• ソースコードhttps://github.com/akihiroe/SharePointChatAddin

http://www.proaxia-consulting.co.jp

Azure＆SharePointアプリケーション開発についてのお問合せ[担当] akihiro.ehara@proaxia-consulting.co.jp

SharePoint Onlineとファイルサーバーを統合するCloud Storage Lighthttps://www.cloudstoragelight.com

SharePoint 上のファイルをエクスプローラ感覚でサクサク操作するSharePointエクスプローラhttps://www.cloudstoragelight.com/sharepointexplorer/