Stimulator

機械学習とか好きな技術話とかエンジニア的な話とかを書く

Workplace by Facebookを使いやすくするTips

- はじめに -

業務で社内SNSとしてWorkplaceを使っていた。

デフォルトのWorkplaceは「人気の投稿」や「チャット」が常に画面内に表示されており、見辛く辛い部分が多いので、それらを解決するTipsを書いておく。

Workplaceユーザ向け。


 

- Chrome拡張を導入する -

以下のChrome拡張によって、Workplaceの視認性が向上する。

chrome.google.com


以下GithubのReadmeに解説が載っている。

github.com


また以下記事の筆者が作成している。

qiita.com


導入するだけで変化が見られるので楽。
Workplaceを社内で使うなら導入しておいた方が生産性が100倍高い。

- Chrome拡張でさらにCSSを触る -

Chrome拡張によってブラウザで見ているWebサイトの見た目を書き換える方法はいくつかある。

私は適当にStylishを使っているので以下。

chrome.google.com

導入後は拡張から「スタイルを作る」

f:id:vaaaaaanquish:20171004114948p:plain:w400:h300

スタイル設定画面で見るべきは以下赤枠の4つ

f:id:vaaaaaanquish:20171004115308p:plain

左上から

  • スタイルの名前の設定と保存
  • CSSコード記述フォーム
  • 適応先
  • セクションの追加

まずスタイルの名前を設定し、適応先を「ドメイン上のURL:facebook.com」とする。

私がfacebook.comドメイン上に適応しているCSSは以下
ありとあらゆる情報を消して、自分が「お気に入り」に登録しているグループ以外表示しない設定。

._3pk8 {display: none;}
.sidebarMode .fbChatSidebar{display:none;}
#contentArea {
    width: 100%  !important;
    min-width: 502px;
}
#headerArea{
    width: 100% !important;
    min-width: 502px;
}
.sidebarMode #globalContainer{padding-right: 0px;}
._2yq ._2t-d, ._2xk0 ._2t-d{width: calc(100% - 100px);}
.timelineLayout #contentArea {
    width: calc( 100% - 330px) !important;
    min-width: 502px;
}
._5nb8 {
    width: calc(100% - 345px);
    min-width: 512px;
}
li._4lh .fbTimelineTwoColumn[data-type="s"] {
    width: calc(100% - 345px);
    min-width: 512px;
}
.timelineLayout #contentArea {
    max-width: 100% !important;
    width: calc( 100% - 150px)!important;
}
._4_7u {
    max-width: 100% !important;
    width: calc( 100% - 350px)!important;
}
.fbTimelineUnit {
    max-width: 100% !important;
    width: 100% !important;
}
.fbTimelineTwoColumn {
    max-width: 100% !important;
    width: 100% !important;
}
.timelineUnitContainer {
    max-width: 100% !important;
    width: calc( 100% - 25px)!important;
}
.fbTimelineUFI {
    max-width: 200% !important;
    width: calc( 100% + 20px)!important;
}
.letterboxedImage {
    max-width: 200% !important;
    width: 100% !important;
}
@media screen and (max-width: 1400px) {
    #globalContainer {
        width: calc( 100% - 100px) !important;
        min-width: 500px;
    }
}
@media screen and (min-width: 1401px) {
    #globalContainer {
        width: 1200px !important;
    }
}
@media screen and (max-width: 2000px) {
    .sidebarMode ._50tj{
        padding-right: 20%;
        padding-left: 20%;
    }
}
@media screen and (max-width: 1600px) {
    .sidebarMode ._50tj {
        padding-right: 10%;
        padding-left: 10%;
    }
}
@media screen and (min-width: 2001px) {
    .sidebarMode ._50tj{
        padding-right: 25%;
        padding-left: 25%;
    }
}
h4.navHeader {
    background-color: #999;
    padding: 3px;
}
h4.navHeader .sectionDragHandle {color: #fff;}
._1cwg {
    color: #fff;
    font-size: 9px;
}
._5vb_,
._5vb_ #contentCol {background-color: #ccc;}
h4.navHeader {padding: 3px;}
._1cwg {font-size: 9px;}
._bui .sideNavItem .imgWrap .img {display: none;}
#leftCol{position: fixed;}
._wmx .homeSideNav .navHeader .sectionDragHandle{color: black;}
._2xk0._5vb_.hasLeftCol #leftCol{width: 240px;}
html ._2xk0._5vb_.hasLeftCol #contentCol{margin-left: 240px;}
._wmx ._bui ._5afe .linkWrap{
    margin-left: 10px;
    max-width: 228px;
}
._55y4 ._bui .sideNavItem .linkWrap {margin-right: 2px;}
._wmx ._bui ._5afe .linkWrap.hasCount{max-width: 220px;}
._wmx .homeSideNav#pinnedNav ._bui ._5afe{padding-left: 20px;}
#pagelet_company_logo{display:none;}
#appsNav {display: none;}
#navItem_230259100322928{display: none;}
#navItem_4748854339{display: none;}
#navItem_1434659290104689{display: none;}
#navItem_2344061033{display: none;}
#workGroupsTeamNav{display: none;}
#workGroupsTeamNav{display: none;}
#workGroupsAnnouncementNav{display: none;}
#workGroupsFeedbackNav{display: none;}
#workGroupsSocialNav{display:none;}
._wmx._wmx .homeSideNav .navHeader{display:none;}
._55y4 ._bui .sideNavItem .linkWrap{font-size: 13px;}
._wmx._wmx ._bui ._5afe .linkWrap {max-width: 100%;}
#rightCol ._5zny{display:none;}
div._4-u3._5dwa._5dwb{
    display:none;
    padding:0px;
}
#rightCol ._i7m{display:none;}
.uiBoxWhite{border:0px;}

 
上記CSSだけでは所謂本家のFacebookページに弊害が出たり、グループページで適応されない場合があるので、グループページに対してのみ以下を設定する。

先程の「他のセクションを追加」して、以下のようにコード2を設定。

f:id:vaaaaaanquish:20171004120326p:plain:w400:h300

適応先は「正規表現に一致するURL:.*facebook.com/groups/.*」とし、グループの情報ページに適応させている。

#rightCol ._4-u2._3-96._4-u8:nth-of-type(n+2) {display: none;}
#rightCol {
    width: 100% !important;
    min-width: 502px;
    float:left;
    display:block;
}
#pagelet_rhc_footer {display: none;}
.fixed_elem {
    position: absolute !important;
    top: 0px !important;
}
._5ks6{
    height:40px;
    width:40px;
    padding:0px;
}
#groupsRHCMembersFacepile,
.profileBrowserGrid,
._5ks4{
    height:40px;
    width:100%;
}
#groupsNewMembersLink div:nth-of-type(3){display:none;}
#groupsNewMembersLink{display:none;}

 
上記に加えてグループフィードの中でも適度にCSSを書き換えて閲覧。
新しいセクションを作り、適応先を「正規表現に一致するURL:.*facebook.com/(?!.*groups).*」とすることで、グループフィードのページにCSSを適応。

#rightCol{display:none;}
.timelineLayout #contentArea{width:100% !important;}
._4gt0{display:none;}
.fbTimelineStickyHeader .stickyHeaderWrap{display:none;}


ほとんどの情報が消えるので気になるなら所々display:noneにしてあるところを外していく。


 

- おわりに -

これで大体Workplaceでやっていたことが記事にできた。

Workplaceは、デフォルトだとFacebookみたいで本当に見にくいサービスだが徐々に改善が見られるので今後に期待という感じである。

日々機能が増えていくのはありがたいが、UI/UXをまず見直してほしい…


APIでの操作の記事も書いてある。

vaaaaaanquish.hatenablog.com