{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/use-chatwork-like-slack/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"05d0c45d-e789-5ba0-8b42-219c03ab898e","excerpt":"なんとも日本語が不自由な感じのタイトルですが、始めます。 普段仕事でChatWorkを使っているのですが、どうにもUIが好きになれない。 別に使いにくくはないんですが、趣味でSlack使ってるせいでどうにも馴染めません。 でも仕事で使うのでどうにかして向き合わなければならない。 ならSlack…","html":"

なんとも日本語が不自由な感じのタイトルですが、始めます。
\n普段仕事でChatWorkを使っているのですが、どうにもUIが好きになれない。

\n

別に使いにくくはないんですが、趣味でSlack使ってるせいでどうにも馴染めません。
\nでも仕事で使うのでどうにかして向き合わなければならない。

\n

ならSlack使ってる感覚に陥るChatWorkであれば違和感なく使えるのでは…？
\nということで試してみました。

\n\n

完成物

\n

こちらです。スクショとかアイコン適当ですみません。
\nhttps://chrome.google.com/webstore/detail/chack/fdjillhmoogcihmmokkpiipbcgbfejek?hl=ja&gl=JP

\n

ソースはGithubに公開してあります。

\n
\n

GitHub – Leko/chatwork-skin-slack: Chrome extension to apply Slack skin to ChatWork

\n
\n

※ChatWorkのマークアップと密結合しているため突然動かなくなることが有ります。あらかじめご了承ください。

\n

チャット送信部分

\n

\n \n \n \n \n \n \n \n \n

\n

こんな感じにしてみました。

\n

チャット一覧

\n

\n \n \n \n \n \n \n \n \n

\n

だんだんそれっぽくなってきたと思います。 思い切ってチャットのアイコンを消して、1行に圧縮してみました。ロゴ部分もSlackっぽくしてみました。
\n白抜きまみれじゃねえか！ ！ という感じですが、見せられないものは仕方ないです。

\n

グループチャット（channel）と個人チャット(direct message)を分けようともがいてみたのですが、心が折れそうだったので諦めました。

\n

チャット部分

\n

\n \n \n \n \n \n \n \n \n

\n

TOとかREとかのアイキャッチと色、時間の位置はそのままにしておきました。
\nだいぶSlackっぽくなってきたと思います。

\n

メッセージをマウスオーバーすると

\n

\n \n \n \n \n \n \n \n \n

\n

Slackっぽくなります。

\n

チャット説明文あたり

\n

\n \n \n \n \n \n \n \n \n

\n

タイトルと説明文をざっくりと改変しました。
\n説明文をマウスオーバーすると全文出て来るようにしました。これもSlackっぽいはず。
\n画面の上の方だけ見てりゃいいので視線が右に左に行かなくて楽です。

\n

サイドバー

\n

\n \n \n \n \n \n \n \n \n

\n

タスク一覧くらいしか用がなくなったのでかなりおざなりです。
\nファイル一覧のツールチップとかは大きくいじってません。

\n

チャット作るところ

\n

\n \n \n \n \n \n \n \n \n

\n

こんな感じにしてみました。

\n

グローバルメニュー

\n

\n \n \n \n \n \n \n \n \n

\n

こんな感じに。Slackもここにあったので左上に持ってきてみた。

\n

使い心地どうなの

\n

とかとか、「あ、ChatWorkやだ」って思った時に拡張機能をちょこちょこ作っています。
\n実際に半年くらい使ってみての感想なんですが、 めっちゃ使いやすいです 。
\nデザイナーの方にはとても申し訳ないと思いつつ、この拡張がなかったら若干イライラするくらいには馴染んできてしまいました。

\n

まとめ

\n

歴史的経緯に挫けないための技術スキルなのではないかとすら思っている(✌ ՞ਊ ՞)✌

","timeToRead":5,"frontmatter":{"title":"ChatWorkだってSlackしたい！！","tags":["Advent Calendar","Chrome extension","JavaScript"],"date":"December 14, 2016","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='151'%20viewBox='0%200%20400%20151'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2076v75h87V0H0v76M28%208c0%202%201%202%206%202l5-1c0-2%200-2%201%200l1%202V9c0-2%200-2%201%200%201%201%201%202%202%201h2l1-1h1c1%202%205%202%205-1h1l2%202%201-2c0-2-1-2-2-2H35l-4-1c-3%200-3%200-3%203m269%2020v9l1%208h18V27h-9l-10%201M11%2062l-1%206-2%202%202%201%201%2035v34h68V56H11v6m87-2v11h13v-5c0-7-1-8-8-8-4%200-5%200-5%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.6507936507936507,"src":"/static/160f41172e96214dcd103bb1c116d9ec/64c42/featured-image.png","srcSet":"/static/160f41172e96214dcd103bb1c116d9ec/1ec58/featured-image.png 334w,\n/static/160f41172e96214dcd103bb1c116d9ec/ccb4a/featured-image.png 668w,\n/static/160f41172e96214dcd103bb1c116d9ec/64c42/featured-image.png 1018w","srcWebp":"/static/160f41172e96214dcd103bb1c116d9ec/d7d05/featured-image.webp","srcSetWebp":"/static/160f41172e96214dcd103bb1c116d9ec/cd98f/featured-image.webp 334w,\n/static/160f41172e96214dcd103bb1c116d9ec/7535d/featured-image.webp 668w,\n/static/160f41172e96214dcd103bb1c116d9ec/d7d05/featured-image.webp 1018w","sizes":"(max-width: 1018px) 100vw, 1018px"}}}}}},"pageContext":{"slug":"/use-chatwork-like-slack/","previous":{"fields":{"slug":"/create-cheap-apps-about-girlish-number/"},"frontmatter":{"title":"難波社長と「勝ったな ガハハ」できるクソアプリ作った","tags":["React","Youtube"]}},"next":{"fields":{"slug":"/how-to-run-testcase-of-selenium-ide-in-cli/"},"frontmatter":{"title":"Selenium IDEで作ったテストをCLI環境で動かしてみる","tags":["CI","Selenium"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}