0 8月 2017 Archives

[2018/03/26 追記]

本記事には Word に自動保存機能がないと記載しておりましたが、その後、自動保存機能が実装されている事を確認しました。

Word にもいつのまに「自動保存」機能！そして気になる事を検証！

今日 Excel を触っていたら左上に「自動保存」なる文字が。グレーアウトされて目立たなかったから気がつかなかった？いつからだ？っていうかグレーアウトされているからオンにできません。

▼他もチェックしたら PowerPoint にもありました。

▼しかし、 Word にはありません。

で、グレーアウトされていたら使えないじゃん！と思って調べたところ、

【参照】

自動保存とは

OneDrive、OneDrive for Business、 SharePoint Online に保存されている時に有効になるとか。ローカルでファイルを作っていたからグレーアウトされていたという事か。

▼ SharePoint Online 上のドキュメントを開いてみると自動保存がオンに！

Excel Online でも開きつつ、Excel でも同じファイルを開いてみて、Excel上で編集してみると…

▼面白い！遠隔操作しているように excel Online 上に反映されます。

▼この「 SharePoint に保存 ▼」をクリックすると…

▼バージョン履歴が。「すべてのバージョンを表示」をクリックすると？

▼右側が開いてバージョン履歴が表示され、 SharePoint のライブラリのように復元もできるようです。

普段、クラウド上のファイルを直接編集する事がなく、ローカルPCで作成したものをアップロードする流れは未だに根強い方法かと思いますが、このようにクラウドならではの便利機能が増えるほど、色々と作業方法も変わっていくんでしょうかね。っていうかローカルPCでの作業でもこの機能欲しいなぁ。

僕自身も恥ずかしながらローカルPCで作業してしまう人間というか、そもそもあまりチームで共同作業をした経験がないので、複数人で編集した際の挙動などはよく把握していないので、今後色々と遊んでみようと思います。

「ファイルを編集している時は無意識にctrl＋sで保存するクセをつけろ！」なんて事もそのうち懐かしい昔話となるのでしょうか。

「注目リンク」リストは SharePoint 2013 から登場しましたが、それまでのリンクリストよりもデザイン性も良く、新しいタブ表示などにも対応できて、重宝されている人は多いのではと思います。

しかし、

タイルが大きすぎる！（150px × 150px）
1列でしか表示できない！（カルーセルUIっぽくなるけど）

ここら辺が弱点となり、利用に躊躇されているケースもあるのではと思います。

例えば、社内ポータルのトップページに、従業員が毎日利用する社内システムへのリンクを、見栄えも良くクリックしやすいタイルのリンク集を作りたい場合など。注目リンクを使うと大きくて社内ポータルのトップページに配置すると、他の重要なコンテンツの邪魔になったり、目立ちすぎて逆に困ったり。また、9個くらいリンクを置きたいのに全部配置しきれなく、カルーセルUIのようになるけど、矢印アイコンをクリックしないと表示されないリンクが出てきて、アクセシビリティが良くないなど。

とはいえ、注目リンクをやめて、コンテンツエディター WebパーツなどでHTMLで組むとメンテナンス性が悪い。（リンクの作成・編集・削除はリストで行いたい。）

では、CSSでライトにカスタマイズして実現しちゃえ！

※ SharePoint Online 環境でカスタマイズしています。
※ IE11／Chorome最新／Firefox最新のみ確認しました。
※タイルは100px × 100pxにしました。
※このサイズで3列で折り返しし、複数行表示されます。

▼こんな感じ。

これはビューにCSSを当てた感じですが、もちろんページにこれを表示させたい場合は、注目リンクリストをアプリパーツとして配置した後に、ページにCSSを当てればOKですね。そこまではここでは紹介しませんので、以下の過去記事を参照ください。

SharePoint のページにオリジナルのCSSを適用させる方法について

では、特に出し惜しみするものでもないので、CSSのソースも紹介しちゃいます。基本的には大きさの調整です。面倒なので全て!importantを付けています。強いて言えば、マウスホバー時の挙動に関して若干考えたくらいです。

※念のため。ご利用の際は、自己責任でお願いします。

.ms-promlink-root, .ms-promlink-body { width:330px !important; } .ms-promlink-header { display:none; } .ms-tileview-tile-root { width:110px !important; height:110px !important; } .ms-tileview-tile-content { width:100px !important; height:100px !important; } .ms-tileview-tile-detailsBox { top:50px !important; width:100px !important; height:100px !important; } .ms-tileview-tile-content [onclick*=”STSNavigate”] .ms-tileview-tile-detailsBox { top:0 !important; } .ms-tileview-tile-content img { width:100px !important; } .ms-tileview-tile-detailsListMedium { height:100px !important; }

あとは、好みの大きさに調整してみてください。

▼背景画像にアイコンを配置し、CSSの位置を調整すれば、こんな感じもいけちゃいます。（これ、実際に注目リンクです。）