ひとばん寝かせたカレーはとてもおいしい

Twitterに載っけられない長文置き場

Hoppiiをちょっとだけ使いやすくしよう

PC Chrome限定。
Hoppiiの無駄な情報が多くて嫌気がさしたので、サッとできる範囲でHoppiiのいらない要素を消したり直したりしてみました。
Hoppiiがちょっとだけ使いやすくなります(マジでちょっとだけ)
大した違いはないですが、弊学に叛逆したい方がいれば一緒にやりましょう。

いらない要素

  • TOPページの「No SSO」←いつ使うねん
  • 左上にあるただの「法政大学」の文字 ←押したらトップに戻れると思うやろ
  • どのボタンを押せば最初のホームに戻るのかわかりにくい
  • 授業ボタンが小さくて押しにくい


やり方

ブラウザはChromeを使用します。
まずChrome拡張機能「Stylebot」を導入してください。これは、特定のサイトにだけ任意のCSSを当てられるという拡張機能です。
簡単なので、下のサイトを参考にして導入してください。

Stylebotの導入
www.naporitansushi.com

導入したら、Hoppiiのトップページ(ログインする前のページ)を開いて、「Stylebotを開く」をクリックします。
「コード」というタブを開いて、以下のCSSコードをコピー&ペーストしてください。

/* 左上の「法政大学」を削除 */
span.Mrphs-headerLogo--institution2 {
  display: none;
}

/* ここからMy Workspaceのスタイル */
/*ボタンを右上に移動*/
.Mrphs-sitesNav__menuitem:first-child {
  position: fixed;
  top: 6px;
  left: 6px;
  background-color: #15597E;
  z-index: 1000;
}

/*文字色を常時白にする*/
span.Mrphs-sitesNav__menuitem--myworkspace-label {
  color: #FFF;
}

/*ボタンに文言を追加*/
span.Mrphs-sitesNav__menuitem--myworkspace-label:after {
  content: "に戻る";
}

/*家アイコンの右に余白を追加し、常時白にする*/
span.fa.fa-home {
  margin-right: 4px;
  color: #FFF;
}

/*展開バーを削除*/
.Mrphs-sitesNav__menuitem:first-child a.Mrphs-sitesNav__dropdown {
  display: none;
}

/* ここまでMy Workspace */

/* 「授業」弁当箱メニュー */
div.Mrphs-sitesNav__menuitem.view-all-sites-btn {
  position: relative;
  top: 0;
}

i.fa.fa-th.all-sites-icon {
  margin-right: 4px;
}

/*各授業ボタンのスタイル変更*/
a.link-container {
  height: 36px;
  border-radius: 2px;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

nav.Mrphs-siteHierarchy {
  display: none;
}

.instruction {
  display: none;
}

/* TOPページ */

/*No SSOを削除*/
#loginLink2 {
  display: none;
}

/*いらない表記を削除*/
.Mrphs-mainHeader.is-minimized tbody tr:nth-child(1) {
  display: none;
}

/*ログインボタンのスタイル変更*/
.Mrphs-mainHeader.is-minimized tbody tr:nth-child(2) {
  display: inline-block;
  width: 200px;
  height: 32px;
  font-size: 16px;
  background: #FF9301;
  border-radius: 2px;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: relative;
}

.Mrphs-mainHeader.is-minimized tbody tr:nth-child(2)::after {
  content: "login >";
  position: absolute;
  top: 48%;
  right: 4%;
}

.Mrphs-mainHeader.is-minimized tr td a {
  text-decoration: none;
  position: absolute;
  top: 48%;
  left: 12%;
}

以上で完了です。

イメージ

Before
After
ボタンがちょっと押しやすくなったり、文言が追加されたりしています。
ログイン後の個人ページについてはあまり変わっていないように見えますが、これでも実はいらない要素が消えています。つまりそれだけ私たちにとって不要な情報が画面内にデカい顔して鎮座していたということです(怒)

動機と感想

こんなことをやろうと思ったきっかけはタスク欄に各授業の数だけ追加された「感染症に係る授業欠席等配慮願 提出箱」がウザすぎるので消したかったからです。
こいつを消そうとしたのですが、本当にやらなければいけない課題が非表示になってしまうとマズいのでそれは断念しました。
JavaScript使って同じようなことをすれば、特定の文字列を含むテーブル行だけ非表示にするみたいなことが多分できるはず。そこまでやる気力はなかった。

いやしかし、Hoppiiは本当にクソすぎる。UIという概念を教えてあげたい。
テスト提出画面の「前」ボタン、最初意味わからんかったよ。「前に戻る」までちゃんと書け。
一つ一つのボタンを押したときに何ができるのか、非常にわかりづらい。