常連

注目の的

質問力

自己紹介

### 前提

こちらの内容と似ているのですが、解決できなかったので質問させていただきました。
https://teratail.com/questions/277236

### 実現したいこと

**SPACEキー**を用いて複数のチェックボックスを編集した場合でも、選択されている範囲（range）を正しく取得したい。

### 発生している問題・エラーメッセージ
イベントトリガーを使い、編集されたタイミングで処理を走らせているのですが、シート内に存在する**チェックボックス入力欄を複数選択し、SPACEキーを押してチェックを入れた場合**、rangeが正しく取得できません。
SPACEキーを使わず、Command ＋ V で貼り付けして編集を行った場合は上記URLの解答のようにうまくrangeが取得できます。なぜか**SPACEキーを用いると範囲内一番左上のセルの範囲しか取得できません**。
なぜなのか理由がわかる方、あるいは解決方法をご存知の方がいましたらご教示願います。

### 該当のソースコード

```
function onTriggerEdit(e) {
  const columnStart= e.range.columnStart;
  const columnEnd= e.range.columnEnd;
  const rowStart = e.range.rowStart;
  const rowEnd = e.range.rowEnd;  
  Browser.msgBox(rowStart + ', ' + columnStart + ', ' + rowEnd + ', ' + columnEnd);
}
```

### 試したこと

当初「変更時」で処理を走らせていたのですがうまくいかず、上記の質問にたどり着きました。
結果的にコピペではうまく行きましたが、SPACEキーを利用した編集ではうまく行きませんでした。



GASのイベントトリガー「編集時」による、SPACEキーを用いた複数チェックボックス変更時のrangeオブジェクト取得方法

### 実現したいこと

リアルタイムでプレビューされるhtmlエディターを作りたいと思っています。
プレビューするだけならば作ることができたのですが、さらにアレンジを加えたいです。

### アレンジの詳細

・<h1>を入力しようとしたとき、<h　まで入力するだけで予測変換ができるようにしたい。
・スペースキーを押すとhtmlの属性（styleやclassなど）の予測変換を出したい。
![こんな感じ](ab7dd4e67fa8e19a25f70b9f541c6e6d.png)


### ソースコード

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>htmlエディタ</title>
<script>
$(function() {
  $('body').keyup(function() {
    $('#preview').html($('#src').val());
  });
});
</script>
</head>
<body>
<p>以下に記入</p>
<textarea id="src" rows="10" cols="80">
　　　　　ここにコードを記入する
</textarea>
<hr>
<div id="preview"></div>
</body>
</html>
```

### 試したこと

キー入力に関連したjavascriptについて検索してみた。（ただし見つからず…）

---
ご回答、よろしくお願いします。

リアルタイムプレビューhtmlエディターで予測変換機能を作りたい。

## 質問の背景
SEになって2年目のド素人です。
Linuxに関しては趣味でCentOS,Ubuntu,Debianを少し触ったことがある程度です。

先週、CentOS 8が2021年末で終了するというニュースがありました。
それを受けて2029年まで運用できることを期待していた開発者の嘆きの声と、そもそも本番環境でCentOSを使うべきではない(最初からRHELを使うべき)という批判を耳にしました。

## 知りたいこと
そこで気になったのですが、本番環境でCentOSのようなサポートなしの無償OSを使用するべきではない具体的な理由にはどのようなものがあるのでしょうか？
Web上の記事やツイッターを見てもわざわざ具体的な理由まで書いてくださっている方はおらず、本番環境にCentOSはよくないらしい、ということしかわかりませんでした。

具体的にこんな場面で困る・困った、という意見をお持ちの方がいらっしゃればご教示いただければありがたく思います。

私自身が考えるデメリットは下記です。

* 今回のように、突然開発が中止となる可能性がある
* 対応するソフトが有償のものに比べて少ない？

また逆に、何らかのトラブルがあった際に有償サポートがあったおかげで解決した、というお話があればそちらも知りたいです(OSベンダーのサポートによって解決する実務上の問題がどういったものか想像がつきません)。

何卒よろしくお願いいたします。

本番サーバーとしてCentOSなどのサポートなしの無償OSを使用することのデメリットについて教えて下さい

web上で画像を表示させる上で2点ほど気になることがあるため質問させてください。

■１点目
表示させる画像のサイズはどのようにして決めればいいのでしょうか？
あまりサイズが大きいと表示速度の遅延につながりますが、小さいと画質が荒くなってしまいちょうど良いサイズがわからない状況です。
ベストプラクティスがあればご教示いただきたいです。

■2点目
基本的にweb上で画像を表示させる際は、サーバーにある画像をhtml/cssで調整して表示すると思います。
サイズの大きな画像をサーバーに置いておくと表示速度の遅延につながる？ため、そのままweb上で表示するサイズの画像をサーバーに置いておき、html/cssで表示用に画像を縮小しなくても済むようにするのが理想なのでしょうか？

web上で表示させる最適な画像サイズについて

### 前提・実現したいこと
[Swiper](https://swiperjs.com/)を使ってカルーセルスライダーを実装しています。
下記はサンプルです。
[JSBin](https://jsbin.com/fiwelohado/1/edit?js,output)

画面幅に合わせて、プレビューするスライドの数を動的に変更したいです。

例えば
- 画面幅が小さい時は中央にアクティブなスライド１枚+両端に半分ほど見切れているスライド1枚ずつ
- 画面幅が大きい時は中央にアクティブなスライド１枚+両サイドに２〜３枚ずつ

のように、画面幅に合わせてスライドの表示枚数を変更したいです。

### 発生している問題・エラーメッセージ

アクティブなスライドしか表示されていません。
また、アクティブなスライドを中央に配置したいですが、現状は左端に寄っています。

### 該当のソースコード

```js
new Swiper(".swiper-container", {
  loop: true,
  slidesPerView: "auto",
  loopedSlides: 7,
  centeredSlides: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  }
});
```
```css
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background: black;
  overflow-x: hidden;
}

li {
  list-style: none;
}

.wrap {
  padding: 1em;
}

.swiper-container {
  border: solid white;
}
```
```html
<body>
  <div class="wrap">
  <div class="swiper-container"> 
    <ul class="swiper-wrapper"> 
      <li class="swiper-slide"><img src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_youtube-128.png"></li>
      <li class="swiper-slide"><img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-instagram-new-square2-128.png"></li>
      <li class="swiper-slide"><img src="https://cdn2.iconfinder.com/data/icons/social-media-applications/64/social_media_applications_6-twitter-128.png"></li>
      <li class="swiper-slide"><img src="https://cdn2.iconfinder.com/data/icons/social-media-applications/64/social_media_applications_1-facebook-128.png"></li>
      <li class="swiper-slide"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/windows-128.png"></li>
      <li class="swiper-slide"><img src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></li>
    </ul>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  </div>
  
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
```

### 試したこと

```slidesPerView```プロパティに```auto```を設定しているため、表示枚数はよしなにやってくれるのかなと思ったのですが効果はありませんでした。
また、```breakpoints```プロパティを設定すれば「画面幅が小さいときは何枚表示」ということができそうですが、画面幅が大きい場合かつ上限が無い場合は、最終的な枚数は具体的な枚数を設定するのではなく、```auto```を設定したいです。

Swiper.jsで表示するスライドの枚数を、画面幅に合わせて変更したい。

現在勉強の為、自力でDocker上にスケジューラを作成しようと奮闘しています。
カレンダーが必要だったので、[fullcalendar](https://fullcalendar.io/)を利用して実装しています。イベント登録の時に、モーダルウィンドウを付けたらイベントの登録が行いやすくなると考え、カレンダーの時間項目を触るとモーダルウィンドウが表示されるようにしたいのですが、そこで意図しない動きをしてしまい、３日ほど調べていましたが解決できそうになかったので、質問致しました。
fullcalendarはJavaScript側でDOMContentLoadedを利用して下記のように中身を宣言しております。
![イメージ説明](b6e674b0f2360d20c6ff435c3c267912.png)
```HTML
<div id='calendar'></div>
```

```JavaScript
var calendarEl = document.getElementById('calendar');
var today = getNowYMD();//今日の日付を取得する。
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'resourceTimeGridDay',
    initialDate: today,
    locale: 'ja',
    height: 'auto',
    editable: false,
    selectable: true,
    dayMaxEvents: false, // allow "more" link when too many events
    dayMinWidth: 200,
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceTimeGridDay,resourceTimeGridTwoDay,resourceTimeGridWeek,dayGridMonth'
    },
      
    views: {
        resourceTimeGridTwoDay: {
            type: 'resourceTimeGrid',
            duration: { days: 2 },
            buttonText: 'days 2',
        }
    },
    
    resources: [
        //公式ドキュメント通りなのでカット
        { id: 'd', title: 'Room D', eventColor: '#FF0000' }
    ],

    events: [
        //公式ドキュメント通りなのでカット
        { id: '5', resourceId: 'd', start: today + 'T10:00:00', end: today + 'T15:00:00', title: 'event 5' }
    ],

    select: function(arg){
        console.log('select');
    },

    dateClick: function(arg) {
        //===============================
        //時間の欄を押したら通るところ
        //===============================
        dateClick_function(arg);
    },
});

function dateClick_function(arg)
{
    //ひとまず、HTMLを直接いじったら出来ないか奮闘中
    console.log(arg.dayEl.innerHTML);
}
```

モーダルウィンドウの方は、Bootstrapのmodalを利用しております。
[こちらのページ](https://getbootstrap.jp/docs/4.2/components/modal/#varying-modal-content)を今は表示だけ出来ればいいので、そのままコピーぺしている状態です。
この２つを組み合わせて、fullcalendarのHTMLを下記のように変更するとカレンダー全体**どこを押しても**モーダルウィンドウが表示されるようになってしまいます。
```HTML
div id='calendar' data-toggle="modal" data-target="#exampleModal" data-whatever="@calendar"></div>
```
なんとか時間の欄があるところをクリックした場合のみ、モーダルウィンドウを表示出来るようにならないでしょうか？
つたない質問で申し訳ございませんが、お答え頂けると幸いです。

```HTML全体
<html>
  <head>
    
    <link href="{% static '/modules/fullcalendar/main.min.css' %}" rel='stylesheet' />
    <script src="{% static '/modules/fullcalendar/main.min.js' %}"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        
    <script type="text/javascript" src="{% static '/js/calendar.js' %}"></script>
    <style>
      /* fullcalendar */
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
      }

      #calendar {
        max-width: 1100px;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <div id='calendar' data-toggle="modal" data-target="#exampleModal" data-whatever="@calendar"></div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New Event</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label">start time</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label">end time</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
```

fullcalendarによるイベント発火

### 前提・実現したいこと

djangoでサイトを作成しております。
ローカルで開発を実施しており、本番環境(VPS)への適用が完了しておりサイト公開はいつでも可能な状況なのですが、
このままサイトを公開した場合プログラムの修正を本番環境のソースを直接修正することになり、他の解決方法がないかを探しております。

### 試したこと

ローカルの開発環境をsqliteからpostgresqlに変更し、本番環境に近づけた。
→これはhttps化できていないなど、微妙に本番環境と異なる

djangoでサイト運用時のプログラム修正方法

### 背景色に合わせて自動で文字色を変更する方法について

添付のように画像の「TEST」の文字を背景色に合わせて、自動で変化（背景色or白）させることは可能でしょうか。
HTML実装の参考にしたく、CSSでもJavascriptでも大丈夫ですので教えていただけますと幸いです。
![イメージ説明](9b1cc88dc72fe2523d05966c3e6ebf10.png)

下記のようなサイトを調べましたがCSSで個別に指定していく方法が多く、
背景の白い円に合わせて文字色（TEXT部分）を背景色に自動で変化することができればと考えているのですが難しいでしょうか。。。
https://www.nxworld.net/tips/css-split-text-color.html
https://stand-4u.com/css/nongrid-text.html