SharePoint2013 & Knockout.js で遊んでみた(その1)

ひさびさのSharePoint2013ネタです。長くなりそうなので、何回かに分けてお送りします(の予定)。
今回は下準備ということで、Knockout使い始めるまでのあれこれです。

今はやりのJavaScriptのMVC系フレームワーク使ってなんかやってみたいな~、と思いたち、お勉強も兼ねちょっと遊んでみました。

【実現したいこと】
・ユーザーさんが個別にカスタマイズできるリンク集的なウィジェットを作る
・リンクのデータは各ユーザの個人サイトに置く
・登録編集はそのリンクリストを直でいじるんではなく、ポータル内にインターフェースを置く

まあー表示くらいはwebサービスなりでデータをとってきて、jQueryでDOMをがりがり・・・でできなくはないですが、リンクの登録編集とかの実装になると気が遠くなりそうですよね?!私はなりそうです。
で、これはひょっとしてフレームワークの出番ではないか?!と短絡的に考えました。

最終的に、登録編集フォームとしてこんな感じのものを作ってみました。(小さくてすいません)
140521_2

さて、手始めに同じことを考えてる人はいないだろうか?いやいるはず!世界は広い!といつものようにググってみたら、こんなものが。
http://sympmarc.com/2013/09/10/spservices-stories-16-beginning-sharepoint-development-with-kosp-knockout-for-sharepoint-rest-api-and-sp-services/

おおっ。私の愛するSPServicesを使ってできそうではないですか。
とはいうものの、Knockout.js使ったことないので(汗)、とりあえず本家サイトでお勉強します。
http://knockoutjs.com/

いろんなとこで書かれてますが、ほんとここのチュートリアルは良くできてます。触ってて楽しい。いつまでも遊んでたい・・・のですが、そうしてると仕事にならないので適当なところで切り上げます(涙。

しかし困ったことに、上の記事はデータの表示方法のサンプルです。
やりたいのは登録・編集・削除だし、どうしよう~、と調べてたら本家サイトのExampleが使えそうだったので、これを参考に実装してみることに。
http://knockoutjs.com/examples/gridEditor.html
SPServicesを使ってのリストのアップデートはこの辺を参考にすればよさそう。
http://spservices.codeplex.com/wikipage?title=UpdateList&referringTitle=Lists

方針の決まったところで、おもむろに必要なファイルをDLします。
Knockout.js※導入方法もこのページに載ってますね。
http://knockoutjs.com/downloads/index.html
SPServices
http://spservices.codeplex.com/
KoSpJs
http://kosp.codeplex.com/

KoSpJsは、

KoSp provides custom knockout binding handlers that enables easy binding of json data from SharePoint lists retrieved via REST API with oData queries and  SP Services with CAML queries with client side controls.

との触れ込みなので実装が楽になるかも?と入れてみました。上で参照してる記事でも使ってますしね・・・

で、いつものようにDLしたファイルをカスタマイズファイル専用置場へアップロードしておきます。あ、jQueryもアップロードしてない場合はお忘れなく。

さいごに、自分の個人用サイトのなかにリンクを登録するリストをあらかじめ作っておきます。
これはもうカスタムリストでちゃっちゃと作りました。

リストタイトル:MyLinks
追加した列:
SiteURL (Single line of text)
SortOrder (Number)

これで、下準備は完了です(のはず)。

今回はこの辺で。続きはまた・・・

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中