2013のトップリンクバーをボタン風にデザインしてみた（osloテーマで）

SharePoint2013のトップリンクバーって、なんだか地味ですよね。
そんなところにナビゲーションがあったんだ？！って感じで。

特にosloテーマの場合サイドリンクバーがないだけに、もうちょっと自己主張させてもいいかも・・・、と思い、CSSでボタン風にデザインしてみました。（ついでに「リンクの編集」メニューも隠してみました）

余談ですが、SharePoint2013だとサイドリンクバーやトップリンクバーにこの「最近使った項目」ってやつが出てしまうのがなんとも・・・しかもこれ最近「使った」ではなく「作った」なんですよね・・・というわけで、これを隠すやり方についてもおいおい書きます。

さて、ソースコードはこんな感じです。

.ms-core-listMenu-horizontalBox {
    padding-top: 20px;
    width: 100%;
}
.ms-core-listMenu-horizontalBox li.static {
    padding: 0.5em 1.5em;
    vertical-align: middle;
    display: inline-block;
}
.ms-core-listMenu-horizontalBox li.static.selected, .ms-core-listMenu-horizontalBox li.static:hover {
    background-color: #0072c6;
}
.ms-core-listMenu-horizontalBox li.static:hover > a, .ms-core-listMenu-selected, li.dynamic:hover .menu-item-text, li.static.dynamic-children:hover > span > span{
    color: #fff !important;
}
.ms-core-listMenu-horizontalBox a.static {
    display: table-cell;
    text-align: center;
}
.ms-core-listMenu-horizontalBox a.selected {
    font-weight: bold;
}
.static.ms-verticalAlignTop.ms-listMenu-editLink.ms-navedit-editArea{
    display: none;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{
    margin-right: 0;
}
ul.dynamic{
    box-shadow: none;
    left: 0 !important;
    width: 150px !important;
    padding: 0;
}
li.dynamic{
    display: block !important;
    width: 100%;
    padding: 5px;
}
li.dynamic:hover{
    background: rgba(136, 179, 215, 0.84);
}
li.dynamic::before,
li.dynamic::after,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
li.dynamic,
.ms-core-listMenu-horizontalBox li.static,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

なお、上記CSSではこちらの記事を参考に、マウスオーバーでボタンの色がフワッと変わるようなエフェクトも入れています。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld.

サイトデザインの参考にしていただけるとうれしいです！

注目リンクをページャを出さずに折り返して全部表示する

SharePoint2013から追加された新しいリスト、「注目リンク」。
いわゆるタイルUIで、SharePoint2013の画面デザインにもしっくりきますし、積極的に使っていきたいアプリではあると思います。

しかしリンクアイテムの数が増えてくると、デフォルトでは画面から見切れてページャが出てきてしまいます。

ページャなしで折り返して全部見せたい！
そういう場合は、以下のCSSをスクリプトエディタ webパーツでページに埋め込みます。

<style>
.ms-promlink-header{
	display: none;
}
.ms-promlink-body {
   	width: 100%;
} 
.ms-tileview-tile-detailsBox{
	background-color: rgba(0,68,112,0.75);
}
</style>

上記サンプルコードでは、画像にオーバーレイするキャプションの背景色も変えてますが、この辺はお好みで。
すると、こんな感じで表示されます。

いかがでしたでしょうか？参考にしていただけるとうれしいです。

ログインユーザーの権限をJavaScriptでチェックする

ひさびさの更新になってしまいましたがちゃんと生きてますよ！！
というわけで、生きている証を立てたいと思います。

ログインユーザの権限に応じて、サイトのUIの一部を非表示にしたいといった要望は多いですよね。
そこで、今回はClient Object Modelを使ってユーザー権限をチェックするコードをJavaScriptで実装してみたいと思います。

Client Object Modelでユーザー権限を取得するには、SP.Web.effectiveBasePermissions propertyを使います。
これで、ユーザーがサイトに対して持っている権限の一覧が取れるので、そこからユーザー権限を判断します。
たとえば、「Webサイトの管理」権限を持っていればフルコントロール権限があるだろう、とか。

では、ログインユーザーが「Web サイトの管理」権限を持っているかチェックするサンプルコードを書いてみます。jQueryも使ってます。

$(function(){
    ExecuteOrDelayUntilScriptLoaded(CheckPermissionOnWeb, "sp.js");
});

function CheckPermissionOnWeb() {
    var ctx = new SP.ClientContext.get_current();
    var web = ctx.get_web();

    var currentUser = web.get_currentUser();
    ctx.load(currentUser);
    ctx.load(web,'EffectiveBasePermissions');
    ctx.executeQueryAsync(Function.createDelegate(this, onSuccessMethod), Function.createDelegate(this, onFailureMethod));        

    function onSuccessMethod(sender, args) {
        if (web.get_effectiveBasePermissions().has(SP.PermissionKind.manageWeb)) {
            console.log('You are Site Admin.');
        }
    }

    function onFailureMethod(sender, args) {
        console.log('Error:' + args.get_message());
    }
}

上記で「SP.PermissionKind.manageWeb」の「manageWeb」のところを変えれば、別の権限を持っているかもチェックできます。
たとえば、「manageLists」ならリストの管理権限があることになります。
具体的には、以下をご参考に。
https://msdn.microsoft.com/en-us/library/ee556747.aspx