スクロールバー消したくてこれを読んでいたら固定幅(高さ)しかできなさそうだったのでいろいろ模索してみた。

ホバーするとliのサイズが変わる。

解説

ulの親要素にoverflow: hidden;を設けてあげてulにネガティブマージンをつけてあげると実現できる。

コード

<p>横スクロールできるけどスクロールバーを非表示にしてる</p>
<div>
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>  
  </ul>
</div>

div {
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 20px;
  margin: 0 0 -20px;
  width: 400px;
  background-color: #ddd;
}

li {
  margin: 0 4px;
  height: 100px;
  background-color: #ccc;
  transition: 0.2s height;
}

li:nth-child(2) {
  background-color: #f00;
}

li:nth-child(2):hover {
  height: 200px;
}

li:nth-child(4) {
  background-color: #0ff;
}

li:nth-child(4):hover {
  height: 50px;
}

余談

こっちはなぜか同僚が作った自動で高さが変わるようにしたデモ。

jsfiddle.net

2017-10-03

横スクロール出来るリストを作るときのCSSについて

多くの商品などの画像を並べるとき、↓のようなリストで実現することがある。僕は嫌いなのだがスマホやタブレット対応を考えると横スクロールに対応する必要がある。こんなリストをCSSで組もうとするといくつか方法が考えられると思うのでまとめておいた。

f:id:do7be:20171003210953p:plain

各実装方法

inline-blockによる実装

これは最も簡単で、最近のブラウザでなくてもレンダリング出来ることが強み。しかもデモにあるようにリストの両端にマージンを付与することが出来る。このマージンは単にデザインに必要という場合だけでなく、カルーセルだった場合にボタンを置く領域にもなる。個人的にはこれをおすすめしたい。

inline-block方式

methodと書いてあるところがミソ

flexによる実装

これも簡単なのでおすすめ。ただ、IE9以下だとレンダリングできず、両端にマージンをつけることが出来ない。許容出来れば良いと思う。

flex方式

tableによる実装

これはあまり使わない。border-spacingで間隔を空けるが両端のマージンについては対応が困難。一応両端のtdで実現はできそう。td自体にはwidthを指定できないのでtdの子要素で指定する必要がある。正直考えることが多いしコードもでかくなるので嫌い。

table方式

grid-layoutによる実装

リスト内の要素数が固定の場合は実装できそう。やったことないけど。

まとめ

inline-blockによる実装かflexによる実装がおすすめ。他にも簡単でレンダリングが崩れない実装があるかもしれないので色々試して欲しい。

2017-08-26

Chatworkでの発言をDiscordに流すようにした

GAS

けっこう前に適当に書いたコードの話。

某ゲームのChatworkグループに所属しているのだが、Discordしか見ないメンバーもいてDiscordでも見れるようにしてほしいとの要望から作りました。

こんなかんじ

f:id:do7be:20170826193721p:plain

書いたコード

GASで実装
15分ごとにChatwork監視(もっと頻度多くてもよさそう)
新規メッセージがあればDiscordのWebhookを叩く

function main() {
  var messages = getMessages();
  if(!messages) {
    return;
  }

  var message = [];
  for (var i = 0; i < messages.length; i++) {
    message.push(messages[i].account.name + ' > ' + messages[i].body);
  }
  message = message.join('\n');

  sendMessageToDiscord(message);
}

function getMessages () {
  var params = {
    headers : {"X-ChatWorkToken" : ChatworkAPI申請して取得したトークン},
    method : "get"
  };
  var room_id = Chatworkの部屋ID;
  var url = "https://api.chatwork.com/v2/rooms/" + room_id + "/messages";
  var rawRespons = UrlFetchApp.fetch(url, params);
 
  if(rawRespons == "") {
    return;
  }
  
  var response = rawRespons.getContentText();
  var json = JSON.parse(response);
  Logger.log(json);
 
  return json;
}

function sendMessageToDiscord (message) {
  var url = 'https://discordapp.com/api/webhooks/チャンネル番号/トークン';
  var payload = JSON.stringify({content: message});
  
  var params = {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'User-Agent': 'DiscordBot (http://example.com, v0.0.1)',
    },
    method: "post",
    payload: payload,
  };
  
  Logger.log(params);
  
  var rawRespons = UrlFetchApp.fetch(url, params);  
}

function test () {
  sendMessageToDiscord('テストでーすｗｗｗ');
}