ディスカッション掲示板をLINE風のインタフェースでリアルタイムにチャットする

1. Visual Studioで作成する
SharePointアドイン開発
Line風Chat アドイン
２０１６年５月
SharePoint Onlineカスタマイズ

2. 今回のお題
ディスカッション掲示板をLINE風の
インタフェースでリアルタイムに
チャットしたい

3. 利用する仕組み
•SharePointホスト型アドイン
•カスタムWebページ
•ディスカッション掲示板

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

5. 掲示板を操作するJS
ディスカッション掲示板をアクセスする
ライブラリを探してみる
Working with Discussions List via
SharePoint Client Object Model
https://blog.vgrem.com/2014/01/20/working-with-discussions-list-via-sharepoint-
client-object-model/
技術調査

6. LINE風メッセージ表示
WordPressにCSSをコピペし「LINEぽい
吹き出し」を作って会話を入力する方法
http://nelog.jp/line-bolloon-css
技術調査

7. カスタム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を利
用している

8. 掲示板の検索
function createAllMessagesByDisscussionIDQuery(disscussionId, lastmodified) {
var qry = new SP.CamlQuery;
var viewXml;
if (lastmodified) {
viewXml = "<View Scope='Recursive'> ¥
<Query> ¥
<Where> ¥
<And> ¥
<Eq> ¥
<FieldRef Name='ParentFolderId' /> ¥
<ValueType='Integer'>" + disscussionId + "</Value> ¥
</Eq> ¥
<Gt> ¥
<FieldRef Name='Modified' /> ¥
<ValueType='DateTime'StorageTZ='TRUE' IncludeTimeValue='TRUE'>"
+ ISODateString(lastmodified) + "</Value> ¥
</Gt> ¥
</And> ¥
</Where> ¥
</Query> ¥
</View>";
} else {
}
qry.set_viewXml(viewXml);
return qry;
}
CAMLを使うと複雑な検索もできる！！

9. リストの検索
SharePoint JavaScript オブジェクト モデルを利用したリスト検索
は効果的にデータを取得するため独特のステップが必要
1
• 検索条件をCAMLで構築
camlQuery.set_viewXml()
2
• リストを検索（実際には検索されない）
completedItems = employeeList.getItems(camlQuery);
3
• 取得するプロパティを指定
clientContext.load(completedItems);
4
• 検索の実行（実際に検索）
clientContext.executeQueryAsync(success,fail);

10. 全体レイアウト
<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の知識があれば簡単

11. 完成
掲示板の管理で
ディスカッションを作成
左のディスカッション一覧から
選択してチャットが可能

12. まとめ
• SharePointのディスカッション掲示板を利用してChat
ツールを作成
• SharePointホスト型でクライアント側のロジックだけ
で実現（お手軽に組み込める！！）
• SharePoint JavaScript オブジェクト モデルは機能が豊
富で様々なアドインを作成することができる
• ソースコード
https://github.com/akihiroe/SharePointChatAddin

13. http://www.proaxia-consulting.co.jp
Azure＆SharePointアプリケーション開発についてのお問合せ
[担当] akihiro.ehara@proaxia-consulting.co.jp
SharePoint Onlineとファイルサーバーを統合するCloud Storage Light
https://www.cloudstoragelight.com
SharePoint 上のファイルをエクスプローラ感覚でサクサク操作するSharePointエクスプローラ
https://www.cloudstoragelight.com/sharepointexplorer/