楽天ROOMでいいね💗ボタンって小さくて押しにくいですよね。ミスも起きるし効率も悪くなります。押しやすくする方法を考えたのでブログにまとめます。
ROOM活動の生産性向上、効率向上に必須の施策です。
設定は10分程度です。無料で実施できます。
ROOM活動の困りごと
ROOM活動やってますか？
フォロワーとつながることで自分では探せないものが見つかったりと面白い仕組みですね。
シンゴもROOM使っています。困ったことに、ユーザの商品一覧についている「いいね💗」のボタンが押しにくいのですよ。
アイコン小さいし。ちょっとマウスが外れるとクリックできないし、商品画像を触ってしまうと商品ページに行ってしまいますしね。あー、いらいらする。
これをもっと使いやすく改造します。
実施後のイメージ
実施するとこんな感じになります。
右側のグレーの部分はどこでもクリックするといいね💗です。
これだけクリックする場所が広くなると押しやすいですね。狙いを定める必要はありません。間違えて商品画像をクリックして画面が変わってしまうことも防げると思います。
ハートのサイズも大きくなっているので、一覧でみたときにどの商品にいいね済みかどうかわかりやすくなります。
押せる部分が少なくなっていますが、商品ページを確認したいときは上のほうにちょっとだけ残してある白い部分をクリックします。
という仕掛けです。
設定は一式に掛かる時間は10分くらいです。
最初は面倒ですけど、あっという間に取り返せます！時間が短縮になるのもよいですが、イライラが減って最高です。ROOM活動の生産性向上、効率向上に必須の設定です。
Google Chrome拡張のインストール
いいねアイコンをビックにする方法は、PC版のROOMにしか使えません。残念ながらスマホアプリは対象外です。この先は、PC版のGoogle Chromeを使って作業してください。
Stylusのインストール
まず最初に、この機能を実現するためにGoogle Chromeに拡張機能を入れます。Stylusという拡張機能です。Stylusは特定のURLを表示したときに、CSSを上書きして見た目を変更することができるソフトウェアです。
Google Chromeで上のURLにアクセスして、Chromeに追加ボタンを押してインストールしましょう。
Chromeに追加を押すと、アドレスバーの横にSのアイコンとメッセージが出ます。このアイコンは一旦非表示になってしまうので、常に表示にしておくと便利です。
パズルのピースのアイコンをクリックして、Stylusをピン留めしておきます。これをやるとツールバーにいつも表示されるようになります。不要だったらピン留めを外してください。
Stylusの設定を新規作成
インストールが終わったので、次はROOM向けの設定追加作業をやります。
まずは誰のURLでもよいので、ROOMの個人ページを開いてください。僕のでも大丈夫です！
個人ページはこんな感じ。まだ設定をしていないので、普通の見た目ですね。
ROOMを開いた状態でツールバーのStylusボタンを押します。小さい画面が出てくるので「管理」ボタンを押します
次の画面で「新スタイルを作成」を押します。
こんな画面が開きます。左側、右上、右下に設定画面があるので順番に説明します
名前の設定（左側）
ROOMのアイコンを大きくする仕組み自体に名前を付けます。名前は何でも大丈夫です。あとで見返したときにわかる名前にしておきます。
コードの設定（右上エリア）
次は一番重要なコードの部分です。
ここに書いたコードがROOMの個人ページを開いたときに自動的に実行されます。このコードをそのままコピーして貼り付ければOKです。
button.image-icon--3WJIY {
right: 0px;
bottom: 0px;
height: 85%;
width: 100%;
border-radius: 0;
}
div.type-icon--3g0D- .rex-favorite-outline--1fWWY {
display: none;
}
div.type-icon--3g0D- .rex-favorite-filled--384Eu {
font-size: 60px !important;
}
13行だけですね。下のようになればOKです（画像なのでコピペできません）
コードを適用するURLの設定（右下のエリア）
最後は右下のURLの設定です。
初期状態は「すべて」になっています。このままだとROOM以外のサイトにも上のコードが適用されてしまいます。実際のところ適用されたところで特になにも起きないと思いますけど、ROOMのURLの範囲だけにしておきます
修正前
修正後
左側を正規表現に一致するURLに変更し、下の文字をいれるだけ
https://room.rakuten.co.jp/.*/items左上にある保存ボタンを押します。保存を忘れるとやり直しになるので気を付けてください。Ctrl+Sでも保存できます。
これで完成です。
動作の確認
設定が終わったら、誰かの個人ページを開いてください。開いた時点で見た目が変わっていると思います。自分のページは自分でいいねができないので、フォロワーのだれかのページで確認しましょう。
変更前の状態
変更後の状態
グレーの枠が大きくなっていますね。写真の大部分はクリックできて、いいねができます。いいねをしていない状態の白いハートは消しています。赤いハートがあるか、無いかで判断できるからです。
うまくいきましたか？
この設定をしておけば、いいねのクリックミスが激減すること間違いなしです。
見た目を元に戻す方法
一度、Stylusの設定をするとすべての個人ページが見た目が変更になってしまいます。元の見た目に戻したいときの方法も書いておきます。
やり方は簡単です。
ツールバーのSアイコンをクリックし、いま有効になっている設定名称のチェックを外して無効化です。同じ手順でONとOFFは簡単に切り替えできます。
最後に
楽天ROOMのイライラが解決したでしょうか？
シンゴの場合、まずクリックのミスが激減し、そのうえクリックのスピードも速くなって10倍くらいの生産性向上になりました。細かくマウスを狙うのがとってもストレスでした。
コードとやり方は公開しておきますので、自由に使ってもらって大丈夫です。記事の紹介はOKですが、転載は止めてください。
やってみて上手くいったとか、感動したとか、逆にうまくいかなかったとか、こういうケースにも対応してほしいとか、ありましたら、ブログのコメント欄やTwitterで反応いただけるありがたいです。次の改善に生かせます。
最後に注意事項を2点
楽天ROOMの画面構成が変わるとうまく動かなくなる可能性が高いです。動かないなと思ったらできるだけ修正をしてTwitterに載せるようにします。ROOMに飽きたら自分で使わなくなるので飽きないように頑張ります。
この作業をして仮に何か問題がおきても責任はとれません。高速にいいねするとアカウントが停止になるとか噂はありますので、自己の判断のもと作業を行ってください。
もしお役に立てたようであれば、うちの楽天ROOMにもお立ち寄りください。で、いいねの練習をしつつ何か買って行ってくれると助かります。
Amazonのリンクも置いておきます。
コメント