SharePoint Online をJavaScript でイジる。

第9回 Office 365 勉強会2014/8/2

株式会社内田洋行 太田浩史

自己紹介

太田 浩史 （おおた ひろふみ）

• 株式会社 内田洋行 （http://www.uchida.co.jp）

• SharePoint をいろいろやる役

2013 - Microsoft MVPSharePoint Server

Ota Hirofumihttps://facebook.com/hrfm.jp

Hirofumi OTAhttp://www.slideshare.net/hirofumi_ota

@hrfmjphttps://twitter.com/hrfmjp

idea.toString();http://idea.tostring.jp

先日、Twitter を眺めていると…

『えっ！？SharePoint って、

JavaScript の API があるの！？』

といった、つぶやきを見かけたので…

あります。カスタマイズに利用できます。

http://msdn.microsoft.com/en-us/library/office/jj193034(v=office.15).aspx

なにができるの？

• いろんなことができます。

– サイトの作成、管理

– リストの作成、管理

– アイテムの作成、取得、編集

– 個人プロフィールの取得

– ナビゲーションの編集

– その他、いっぱい

サンプルコードは？

• 基本的な操作はこちらを参考に、SharePoint アプリ と同じ。

http://msdn.microsoft.com/ja-jp/library/office/jj163201(v=office.15).aspx

簡単に動作を確認するには？• SharePoint のページに「コンテンツ エディター Web パーツ」か、

「スクリプト エディター Web パーツ」で埋め込みます。

デモします。

デモの内容（メモ機能）

今回、JavaScript で作成した部分

標準のリスト Web パーツ

今回のサンプル コード<script type="text/javascript">

function createListItem(){

var ctx = new SP.ClientContext.get_current();

var oList = ctx.get_web().get_lists().getByTitle("メモ");

var itemCreateInfo = new SP.ListItemCreationInformation();

oListItem = oList.addItem(itemCreateInfo);

oListItem.set_item("Title", "");

oListItem.set_item("Body", document.getElementById("fBody").value);

oListItem.update();

ctx.load(oListItem);

ctx.executeQueryAsync(

function(sender,args){

//succeeded.

document.getElementById("bodyField").value = "";

},

function(sender,args){ //failed. } );

}

</script>

<div id="postForm">

<textarea name="body" id=“fBody" rows="3" cols="60" style="margin:8px;"></textarea><br/>

<button onclick="javascript:createListItem();">POST!!</button>

</div>

※ リスト名が含まれるので、他の環境ではそのままでは動きません。赤字のところ。

まとめ

• SharePoint には、JavaScript API が用意されています。

• アイテムの投稿など、簡単な操作はスグに実装できます。

• 全部を作るのではなく、標準機能も利用すると効率良く

機能を作れることがあります。

• jQuery などと組合わせると、もっと色々とできます。

• 30～1時間ほどで、”ちょっとだけ” 使い勝手を良くする機能

を開発するのも面白いです。