SharePointサイトをレスポンシブ・デザインにするときの情報源

こんにちは。世間は夏休み真っ盛りですが、私は絶賛仕事中です!!
電車が空いててうれしいぞ!!!

さて、ここのところSharePointサイトをモバイルでも美しく表示できるようにするべく、いろいろと実験していたのですがそのとき参考にした情報を備忘録として載せておきます。

基本的な前提と方針は、
・バージョンはSharePoint2013
・SharePoint Onlineへのマイグレーションも見据え、カスタムマスタページは作らない
(参考:Latest Advice on Office 365 Branding | Microsoft Trends.)
・よって、デバイスチャネルも使わず、レスポンシブデザインで設計
・とはいえ、JavaScriptは使いたいのでマスタページでのJavaScriptの参照は(しぶしぶ)許容する
といったところです。

デフォルトマスタページを使い、CSSだけで何とかするやり方はもうほぼこれでOKではないかと。
Making seattle.master Responsive | Our SharePoint Experience.

レスポンシブなCSSグリッド・システムを導入するやり方。まだ試してないけど、そのうちやってみたいと思います。
Apply grid system to SharePoint using SUSY | Stefan Bauer – n8d

マスタページをいじくらずにviewportを設定する裏ワザ。
Add viewport meta without editing the master page | Stefan Bauer – n8d.

グローバルナビゲーションをモバイルではアコーディオンメニューにしたい!
巷にあふれるプラグインをしつこくいろいろ試した結果これがよさそうです。
レスポンシブメニューを作成できるjQueryプラグイン「MeanMenu」 | たすデザイン.
具体的な導入方法は、いずれ別のエントリで書きます。

JavaScript内でユーザーエージェントを判別したいとき。
2015年版JavaScriptユーザエージェント判別・判定.

viewportの設定になやんだら?
もう逃げない。HTMLのviewportをちゃんと理解する – Qiita.

マスタページをいじくらずともサイト全体にカスタムJavaScriptを適用するにはこんなやり方もあるです。
JavaScript を使用して SharePoint サイト UI をカスタマイズする.
MSの推奨はたぶんこれ。私はまだ試してないです。アドイン作れとか言われると、とたんにハードルが・・・(汗)

新たにいい情報が出てきたら、今後も追加していく予定です。
また、こんなのも参考になるよ!なんてのがあったらTwitterでもなんでもお知らせください。

広告

コメントを残す

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

WordPress.com ロゴ

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

Facebook の写真

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

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください