クラウド時代の SharePoint 開発に備えよう

クラウド時代のSharePoint 開発に備えよう

アドバンスド・ソリューション株式会社及川紘旭

2016 年 05 月 21 日

Japan SharePoint Group in 東京

2

目次

はじめに自己紹介このセッションのゴールセッション内容の前提

SharePoint 開発についてSharePoint 開発の歴史これまでの SharePoint 開発の手法これまでの SharePoint 開発の特徴これからの SharePoint 開発SharePoint Framework 概要新しいページストラクチャ

将来の SharePoint 開発に備えるTypeScriptMicrosoft Graph APIAngularJSWebhooks

まとめ

参考

© SharePoint Developersharepoint.orivers.jp

はじめにセッションの本題に入る前に。

3

4

自己紹介


及川紘旭 ( おいかわひろあき ) Microsoft MVP

　 for SharePoint Server (2007-2014)　 for Office Servers and Services (2015)

アドバンスド・ソリューション株式会社SharePoint 開発担当

ブログ SharePoint Developer(http://sharepoint.orivers.jp)

Twitter @HiroakiOikawa

http://sharepoint.orivers.jp/

5

このセッションのゴール

SharePoint 2016 、 SharePoint Online の時代の SharePoint 開発に必要な技術

が

何なのかを理解する。


6

セッション内容の前提

本セッションの内容は、 5/4 に開催された「 The Future of SharePoint 」で紹介された内容に基づいておりますが、まだまだ不明瞭な情報が多い状態です。従って、本セッションで紹介した内容が、将来的には異なるものになっている可能性があることをご了承ください。

本セッションでの SharePoint 開発の対象は、 SharePoint に組み込む形式のプログラムを指します。外部から SharePoint の機能を呼び出す形式のプログラムは対象外です。


SharePoint 開発について

新しい SharePoint 開発の世界へようこそ。

7

8

SharePoint 開発の歴史

これまでの SharePoint 開発は、サーバーサイド開発 (SharePoint のサーバー上で動くプログラムを開発する ) を基本としていた。

2010 以降、クライアントサイド開発に徐々にシフトしている。


2001 2003 2007 2010 2013

ASP ASP.NET

JavaScript, .NET

サーバーサイド開発

クライアントサイド開発

バージョン

9

これまでの SharePoint 開発の手法


SPO 対応

ソリューション

アドイン

開発手法

ファームソリューショ

ンサンドボック

スソリューショ

ン

SharePointホスト

プロバイダーホスト

×

△非推奨

○

○

実行場所

サーバーサイド

サーバーサイド

クライアントサイド

クライアントサイド

対応開始バージョン

2007

2010

2013

2013

開発言語

C#,VB.NET

C#,VB.NET

JavaScript

C#,VB.NET

10

これまでの SharePoint 開発の特徴


1. サーバーサイド処理を基本としたフレームワーク

2. 巨大で複雑で癖があるが何でもできるクラスライブ

ラリ

サーバーサイドで動作するため、プログラムの不具合等の影響でサーバーや SharePoint のプロセスをダウンさせてしまう恐れがある。

SharePoint の開発スキルを身に着けるためには、 .NET Framework 、 ASP.NET だけでなく、 SharePoint 用の難しいクラスライブラリを理解する必要があり、初心者には手を出しづらい。

JavaScript が今よりも非力な言語で、ブラウザの互換性問題の影響も大きかったため、クライアントサイドよりもサーバーサイド処理を重視。

.NET Framework 、 ASP.NET を使用したサーバーサイドで動作するプログラムとして、 Web パーツやフィーチャーを開発。

SharePoint に対して何でもできるが故に、お作法、禁じ手を知る必要あり。

11

これからの SharePoint 開発

SharePoint Online の普及- マルチテナントが前提の SharePoint Online が普及したた

め、クライアントサイドのカスタマイズ手法が必要になった。

SharePoint Framework の登場- 完全なクライアントサイドのフレームワーク！

- JavaScript の機能向上、プログラムの接続性の向上などのテクノロジーの進化により、クライアントサイドで実現できることが増えた。

- クライアントサイドはオープンソースの各種ライブラリが充実。

- マイクロソフトの昨今の戦略とも合致！？© SharePoint Developer

sharepoint.orivers.jp

12

SharePoint Framework 概要

SharePoint Framework とは- SharePoint のページ、 Web パーツを開発するためのクラ

イアントサイドのフレームワーク。

- Microsoft Graph と連携ができ、オープンソースのツールやライブラリを利用することができる。

- 2016 年 Q3～リリース。

技術要素


領域技術要素

Custom Presentation

Client Side and Open Source

UX Extensions Client Side and Remotely HostedData Access REST and Cleaner ContractsEventing Web Hooks and Web SocketsSolutions Host Cloud SaaS and Client Side Logic

13

新しいページストラクチャ

SharePoint Framework Page Structure- ページ構造が刷新され、クライアントサイドで SharePoint

のページを構築することができるようになる。

- クライアントサイドの JavaScript と AngularJS などのテンプレートから UI を生成するタイプのフロントエンドフレームワークを使って、ページを構築することができる。


将来の SharePoint 開発に備える

クラウド時代の SharePoint 開発における重要な技術を今から押さえておきましょう。

14

15

TypeScript 概要

- マイクロソフトが開発したオープンソースのスクリプト言語。

- JavaScript は厳密さに欠ける (型指定が不要、何とでも書ける ) 部分があり、大規模開発には不向き。 TypeScript はその点を補いつつ JavaScript の代わりとして使用することができる。

- TypeScript で書いたコードは JavaScript にコンパイルされる。

SharePoint 開発での役割- C# 開発者が、これまで培ってきたプログラミング知識やス

タイルで SharePoint Framework を活用した開発ができるようになる。

参考 URL- http://www.typescriptlang.org/


http://www.typescriptlang.org/

http://www.typescriptlang.org/

16

TypeScript - サンプル - Class, Enum


TypeScript コンパイルして生成された JavaScript

17

TypeScript - サンプル - Method (TypeScript)


18

TypeScript - サンプル - Method (コンパイルして生成された JavaScript)


19

Microsoft Graph API 概要

- Office 365 のデータ (メール、 OneDrive 、などなど ) に接続するための単一の REST API エンドポイント。

- 2016 年 Q3 に Files API が、 2016 年度末までに、 Sites API がリリースされる予定。

SharePoint 開発での役割- SharePoint 内のデータ ( サイトやリスト ) へアクセスする

手段として使用する。

参考 URL- https://graph.microsoft.io/ja-jp/


https://graph.microsoft.io/ja-jp/

https://graph.microsoft.io/ja-jp/

20

AngularJS 概要

- Google が開発した JavaScript のフロントエンドフレームワーク。

- HTML ファイルをテンプレートとして、 REST API 等で取得したデータをノンコーディングでバインドすることができる。

SharePoint 開発での役割- SharePoint Framework の新しいページストラクチャの下、

SharePoint のページを作成する際のテンプレートとして使用する（ことができるようになると思われる）。

参考 URL- https://angularjs.org/


https://angularjs.org/

https://angularjs.org/

21

AngularJS - サンプル - HTML テンプレート


22

AngularJS - サンプル - コントローラのメソッド


23

Webhooks 概要

- アプリケーションから別のアプリケーションに対してリアルタイムにイベント通知するための仕組み。

SharePoint 開発での役割- SharePoint Framework の新しいページストラクチャの下、

これまでのイベントレシーバの仕組みに代わる新たなイベントレシーバの仕組みとして使用する。

参考 URL- https://github.com/bsimser/sphooks


https://github.com/bsimser/sphooks

https://github.com/bsimser/sphooks

まとめ本日のセッションのまとめ。

24

25

まとめ

日々勉強- SharePoint Framework の登場により、 SharePoint 開発

のスタイルがこれまでのスタイルから大きく変わります。

- 技術は進化するもの。置いて行かれないように、フロント側の技術をしっかり身に着けましょう。

- Office blog 「 SharePoint Framework – オープン性と接続性を強化したプラットフォーム」には、今回紹介しきれなかった技術がいくつも載っています。どれも重要になってくるので、漏らさずチェックしましょう。

SharePoint はこれからも重要なプラットフォームであり続ける- というようなことを、サティアさんが言ってました。

- だから、臆することなく進んでいきましょう！© SharePoint Developersharepoint.orivers.jp

26

参考

Office blogSharePoint Framework – オープン性と接続性を強化した新しいプラットフォームhttps://blogs.technet.microsoft.com/microsoft_office_/2016/05/17/the-sharepoint-framework-an-open-and-connected-platform/

The new SharePoint development model – client web parts, JavaScript frameworks, npm, Gulp, TypeScript etc.http://www.sharepointnutsandbolts.com/2016/05/the-new-sharepoint-development-model.html

Everything you need to know about the SharePoint Frameworkhttps://blog.mastykarz.nl/everything-about-sharepoint-framework/


https://blogs.technet.microsoft.com/microsoft_office_/2016/05/17/the-sharepoint-framework-an-open-and-connected-platform/



http://www.sharepointnutsandbolts.com/2016/05/the-new-sharepoint-development-model.html



https://blog.mastykarz.nl/everything-about-sharepoint-framework/

https://blog.mastykarz.nl/everything-about-sharepoint-framework/

Technology

クラウド時代の SharePoint 開発に備えよう