常連

注目の的

回答者

ベストアンサー

拍手喝采

自己紹介

### 前提・実現したいこと

通常スライダーの画像とドットナビの数は1:1ですが、
例えば６枚の画像（A1～C2)に対してドットナビを半分の３つにすることは可能でしょうか
調べてみましたが類似質問やサンプルなども見つからなかったので質問しました。

添付画像のような流れにしたいです。
![イメージ説明](be1e39320dfec56c9cbd00cb95e2501b.png)

sliderはslick sliderしか使ったことがないので slickで実現出来ればベストですが
別のスライダープラグインでも希望動作が可能なら取り入れたいと考えています。
slickでは無理だというような意見だけでも助かりますのでご存じの方お願いいたします。


### 試したこと
1→2に変化するgifを作成しスライダーに設定しようとも考えましたがスライダーの速度を変更した際に
gifも作り直す必要があるため断念しました。

### 仕様と経緯
・実際は画像が12枚ありすべてを見てほしい　(1と2は関係性のある差分）
・ドットが12個並ぶのは見栄えはよくない、また見る気が失せるのではないか
・当初は動画やgifで対応しようとしたが動作が重くなるので断念

上記の点からこのような仕様でコーディング可能かデザイナーから確認がありました。
現在は実現可能か引き続き調査しながら
代替案としてドットを無くし、全体枚数と現在のスライド番号(1/12など)とprev、nextボタンの設置で打診中です。

ドットを押したときの挙動ですが
１番目ならA1、２番ならB1、3番目ならC1が表示されるようにしたいです。



### 追記コード(間引き)
```ここに言語を入力
customPaging: function(slider, i) {
  if(i % 2 == 0) {
    return $('<button type="button" />');
  }
},
```

### 追記コード(奇数偶数による表示切替)
index.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="css/reset.css" rel="stylesheet">
  <link href="css/slick.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="hero">
    <div class="dots"></div>
    <section class="slide_test">
      <div class="slide_img img01"></div>
      <div class="slide_img img02"></div>
      <div class="slide_img img03"></div>
      <div class="slide_img img04"></div>
      <div class="slide_img img05"></div>
      <div class="slide_img img06"></div>
    </section>
  </div>


<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="js/slick.min.js"></script>
<script src="js/slider-conf.js"></script>

</body>
</html>
```
style.css
```css
img {
  max-width: 100%;
  height: auto;
}
.hero {
  position: relative;

}

.dots {
  position: absolute;
  right: 50px;
  bottom: 80px;
}
.slick-dots {
  z-index: 2;
}

.slide_test {
  position: relative;
}

.slide_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.img01 {
  background-image: url(http://placehold.it/1920x1080?text=A1);
}
.img02 {
  background-image: url(http://placehold.it/1920x1080?text=A2);
}
.img03 {
  background-image: url(http://placehold.it/1920x1080?text=B1);
}
.img04 {
  background-image: url(http://placehold.it/1920x1080?text=B2);
}
.img05 {
  background-image: url(http://placehold.it/1920x1080?text=C1);
}
.img06 {
  background-image: url(http://placehold.it/1920x1080?text=C2);
}

```
slider-cong.js
```javascript
$(document).on('ready', function() {
    $('.slide_test').slick({
      arrows: false,
      dots: true,
      appendDots: $('.dots'),
      autoplay: true,
      autoplaySpeed: 1000,
  　});
  
  // $(".slick-dots > li:nth-child(odd)").show();
  $(".slick-dots > li:nth-child(even)").hide();

  $('.slide_test').on('afterChange', function(slick, currentSlide){
    $(".slick-dots > li:nth-child(odd)").toggle();
    $(".slick-dots > li:nth-child(even)").toggle();
  });
});
```
slick-theme.css
```css
.slick-dots
{
    position: absolute;
    /* bottom: -25px; */

```

スライダーのドットナビ１つに対して複数の画像を設定することは可能でしょうか

PCとスマホで同一のURLに見せる方法については、以下の質問のベストアンサーの回答によって.htaccessで実現できました。
- [PCとスマホで同一のURLに見せる方法](https://teratail.com/questions/24398)

###やったこと
以下のファイルを設置
- /index.html (PC)
- /.htaccess
- /iphone/index.html (スマホ)

```
# /.htaccessの記述
RewriteEngine on
RewriteCond %{REQUEST_URI} ^(/|index.html)$
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ /iphone/$1 [L]
```
スマホで/index.htmlにアクセスするとURLはそのままで/iphone/index.htmlを表示することができました。


### 問題点
しかしこの方法だと
1. /iphone/ディレクトリに直接アクセスできてしまう
2. クロールされてしまう

上記2点の問題が発生すると思います。
/iphone/ディレクトリ直下に.htaccessを設置し、スマホで/iphone/フォルダにアクセスすると/index.htmlにリダイレクトさせようとしましたが、案の定ループしてしまいうまくいきませんでした。
これを解決するにはどうすればよいでしょうか？

PCとスマホで同一のURLに見せる方法とスマホディレクトリへのアクセス制限

Javascript で、「四倍精度浮動小数点数」ないし「拡張倍精度浮動小数点数」を扱えるライブラリ・プラグイン等はありますか？
Google で検索しましたが、それっぽいものは確認できませんでした。

自分で頑張ってビット演算なり何なりを駆使して、オレオレライブラリを書くしか無いのでしょうか

Javascript での「四倍精度浮動小数点数」ないし「拡張倍精度浮動小数点数」計算の方法

###実現したいこと
ホバーで表示されるツールチップについて、その横幅を文の長さに応じて可変にしたいです。

現状では、``min-width``指定のせいで文が短いときに横幅があまるのでそれをやめて、``max-width``だけの指定をしたいです。



###発生している問題
ツールチップはボタンの兄弟要素として``.append()``されます。

そのため、``width``指定をしなければ、親要素の幅までになってしまいます。

そこで親要素の幅を超えるために``min-width:200px;``を指定しました。

すると今度は短い文のときに幅が余ってしまうというジレンマです。

これを``max-widht``指定だけ残しつつ、親要素の幅を無関係に（文の長さぴったりに）できませんでしょうか？

[下記ソースコードのサンプル](https://jsfiddle.net/aqnmu3ey/)

###該当のソースコード
これがツールチップのコードです。

まずはHTMLです。
```html
<div class="items">

  <div class="item" data-type="1">
    <button type="button" class="tooltip">
      <span class="icon">■</span>
      <span class="text">ボタン１</span>
    </button>
  </div>

  <div class="item"  data-type="2">
    <button type="button" class="tooltip" data-type="2">
      <span class="icon">■</span>
      <span class="text">ボタン２</span>
    </button>
  </div>

</div>
```
続いてCSSですが、ここで``min-width: 200px;``と指定しないとツールチップは``.item``という親要素の幅を超えることができません。
しかし、指定すると今度は文が短いとき200pxに達せず幅が余ってしまうわために悩んでいます。
```css
.items {
	display: flex;
}
.item {
	position: relative;
}
.tooltip {
	position: relative;
	z-index: 2; 
}
.tooltip_hover {
	position: absolute;
	display: inline-block;
	padding: 7px 10px;
	border-radius: 3px;
	text-align: left;
	left: 0;
	z-index: 1;
	color: #333;
	background: pink;
	min-width: 200px; /* 指定しないと .itemの幅を来れられない */
	max-width: 300px;  
}
.tooltip_hover::before {
	content: "";
	position: absolute;
	top: -25px;
	left: 10px;
	border: 15px solid transparent;
	border-bottom: 15px solid pink;
}
```
以下はホバー時のjQueryです。
```jquery
$(document).on('mouseover','.tooltip', function(){
  const type = $(this).parent().attr('data-type');
  let mes;
  if( type=='1' ){
  	mes = '横幅があまる';
  }else{
  	mes = '文章が長ければ横幅が余ることはない';
  }
  const top = parseInt( $(this).outerHeight() ) + 10;
  $(this).parent().append('<span class="tooltip_hover" style="top:'+top+'px">'+mes+'</span>');	
});

$(document).on('mouseout','.tooltip', function(){
  $(this).parent().find('.tooltip_hover').remove();
});
```

###試したこと
CSSで、文の長さに応じて指定すれば上は解決できます。
```css
.tooltip[data-type="1"] .tooltip_hover {
	min-width: 100px; /* 短い文のときは短い幅にする */
}
.tooltip[data-type="2"] .tooltip_hover {
	min-width: 200px;
}
```

ですが実際には、文が（``let mes;``が）ランダムなのでこの方法は使えませんでした。

どうすれば、親の``.item``の幅を超えて、文の長さに適度な（普通に``width:auto;``指定のときのような）幅にできるでしょうか？

親要素の横幅を無視したい

### 前提・実現したいこと

グーグルフォームを回答したら、回答先のスプレッドシートの指定したセルにアカウントメールアドレスを貼り付けたいです。
(↑ここまで出来ました。)
また、AというアカウントからBというアカウントに切り替えたら、Bのメールアドレスを貼り付けられるようにしたいです。
(↑ここがどうしても作成者Aのメールアドレスになってしまいます。)

### 発生している問題
```
～事前準備～
・下記のスクリプトを入力
・トリガーを「スプレッドシートから」「フォーム送信時」に設定

～手順～
1、フォーム作成
2、回答先を選択
3、回答先のスプレッドシートのA列とB列の間に列を1つ追加
4、フォーム送信したら以下のスクリプトが発動し、A列の最終行をセレクト
5、1列右に移動しグーグルアカウントを貼付け

※アカウントを切り替えたら、切り替え後のメールアドレスを貼り付けたいです。。

```

### 該当のソースコード

```ここに言語名を入力
function onFormSubmit(){

　var bk = SpreadsheetApp.getActiveSpreadsheet();
　var sh = bk.getActiveSheet();
  var objUser = Session.getActiveUser();
  
　var rng = sh.getRange('A1').activate();
 
  var rngrow = sh.getCurrentCell().getNextDataCell(SpreadsheetApp.Direction.DOWN).activate();
　rngrow.activate();
   
  rngrow.offset(0, 1).setValue(objUser);
}
```

### 
すみませんがご教授のほどお願い致します。

GAS　フォームを送信したら送信先のスプレッドシートの指定したセルにアカウント情報を貼り付けたい

### 目的：**GAS**と**Chatwork**の**Webhook**の連携

Google App Script(GAS)とChatworkのWebhookを使って、
以下の処理をしたいのですが、失敗してしまいます。
1. Chatwork上でメッセージを送る
2. GAS上で、送信されたメッセージを検出
3. 送信メッセージがトリガーとなって、「doPost(e)」が実行される


### 問題：「doPost(e)」がメッセージに反応しない
GAS上で「ウェブ アプリケーションとして導入」して、
アプリケーションのURLと「ルームID」等をWebhookを設定したが、
Chatwork上にメッセージを送っても、「doPost(e)」が反応してくれない。
(設定画面の画像はこの投稿の下部に貼り付けています。)

### ソースコード
下記のURLを参考にしてWebhookをテストしています。
https://tonari-it.com/gas-chatwork-webhook-omikuji/

```javascript
var API_TOKEN = 'xxxxxxAPIトークンxxxxxx';　//チャットワークAPIトークン
 
function doPost(e) {
  var json = JSON.parse(e.postData.contents);
  /* リクエスト用パラメータ・URLの準備 */
  var params = {
    headers : {"X-ChatWorkToken" : API_TOKEN},
    method : "post"
  };
  
  var roomId = json.webhook_event.room_id;
  url = "https://api.chatwork.com/v2/rooms/" + roomId + "/messages";
  
  /* json内に「おみくじ」メッセージがあればチャットワークに送信 */
  if(json.webhook_event.body === "おみくじ"){
    
    var accountId = json.webhook_event.account_id;
    var messageId = json.webhook_event.message_id;
    
    var body = ''
    body += '[rp aid=' + accountId;
    body += ' to=' + roomId + '-' + messageId + '] '
    body += '[info]おみくじの結果：' + generateOmikuji() + '[/info]'
    params.payload = {body :body};
    
    UrlFetchApp.fetch(url, params);
  }
}
```

### 試したこと
手動でスクリプトを実行する形のものだと、
Chatwork上のメッセージを検出して、
アウトプットを再度チャットに送信できるのですが、
「doPost(e)」を使用すると、GASが反応していないように思います。

その他にウェブアプリケーションのバージョンを上げてみたり、
新しいGASのファイルで導入をしてみたりしたのですが、
全く反応なしです。。。


### 補足情報
参考までに：webhook上では、このような設定です。
その他に変更できる所はありますでしょうか？？
![ChatworkのWebhook上の設定です。](55302424334ae048d3388b2b5fadd8b5.png)

GASとChatwork doPost(e)反応なし

gasでスマホ用のwebサイトを構築したのですが、googledriveに保存したicoファイルをhtmlに組み込んでも表示されません。

何か方法があるのであれば教えて頂きたいです。
よろしくお願いします。

HTMLは以下のように書いています。

<head>
  <link rel="apple-touch-icon" sizes="152x152" href="https://drive.google.com/open?id={driveID}}">  
</head>

gasでfaviconの設定

画面にdivを3列に、タイル状に敷き詰めたいです。
・divの横幅は均一で全て画面の3/1幅です。
・divの高さは2種類で、300pxと、600px。

600pxのdivの後ろに次のdivが回り込まず、段落ちしてしまします。
コードの、5番目と10番目の後ろです。

空白を出さず、全画面にdivを敷き詰めたいのですが、どうしたら良いでしょうか。


どなたかご教示いただけますと大変助かります...!!
よろしくお願いいたします。


```html
    section.blog.cf
      .article_box
        .text
          span 1
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 2
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 3
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 4
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 5
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 6
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 7
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 8
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 9
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 10
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 11
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
      .article_box
        .text
          span 12
          p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
          
```

```css


.blog {
  width: 100%;
  margin: 0;
  font-size: 0; }
  .blog .article_box {
    float: left;
    margin: 0;
    font-size: 0;
    display: inline-block;
    width: calc(100% / 3);
    height: 300px;
    background: url("../img/test.jpg") no-repeat center center;
    background-size: cover; }
    .blog .article_box .text {
      margin: 20px; }
      .blog .article .text span {
        font-size: 48px; }
    .blog .article_box:first-of-type, .blog .article_box:nth-of-type(5n) {
      height: 600px; }

```