常連

デザイナーへWordpressで作成するウェブサイトのデザインを依頼してます。
個人的に見づらさを感じる為、コンテンツの見やすさ（テキストデザイン）に関する投稿になります。

Wordpressの投稿記事、固定ページで作成したコンテンツのテキストデザイン（段落、引用など）や箇条書きのタグのバランスについて皆さんの意見を聞かせて欲しいです。

#### 段落、引用の文字間について
デザイナーが作成したテキストデザインのうち<p/>（段落）と<backquote/>（引用）の行間が異なり「引用」が行間が詰めすぎていて見苦しく感じています。
対して「段落」は風通しが良すぎる位に空いています。
ウェブサイトの全体的なデザインにまとめる為だと思っていますが、一般的なルールとして「段落」と「引用」の行間が異なるのは気にする事ではないのでしょうか。


#### 箇条書きリストのバランス等について
<ul />タグの<li/>タグにある先頭の「・」について「・」と次に始まるテキストとの間はスペース（マージンやパディング）を空けずに通常の文字間位のバランスでも問題ないでしょうか。

また＜ol/＞タグの数字が1～20まである場合のデザインとして、

01.個条書きタイトル
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
02.個条書きタイトル
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
09.個条書きタイトル
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト
10.個条書きタイトル
　テキストテキストテキストテキストテキスト
　テキストテキストテキストテキストテキスト

のような2桁前提で1桁の場合0で桁数を埋めるのは一般的なテキストデザインとしてアリなのでしょうか。


個人的な意見としてデザインも大事ですが、コンテンツの中身はもっと重要で見づらい・読みずらいデザインはありえないと考えます。
なので最低限な基本ルールとして

〇〇は揃えるのが一般的
〇〇はスペースを空けないのは通常ありえない

など皆さんの意見を待っています。


テキストデザインのルールについて教えてください。

### 実現したいこと
下記の配列に対して「true」というものだけを抽出し処理を行い、「希望する結果」にしたいと考えております。

```ここに言語を入力
$table = [
    [10, 'Alpha', true],
    [13, 'Beta', false],
    [15, 'Gamma', true],
    [21, 'Delta', true],
];
```

希望する結果
```ここに言語を入力
$result = [
    [10, 15, 21],
    ['Alpha', 'Gamma', 'Delta'],
];
```

その際に、各配列の値が増えた場合でも取得ができるように処理をしたいです。(=数が動的に変動する)

```ここに言語を入力
例  [10, 'Alpha', true, 'pen'],
```



### 発生している問題・分からないこと
◾️試した内容

in_arrayでtrueがある配列を抽出した後に、各値を格納する変数名を「動的に対応できそうな名前」で作成しました。

そして、3つの変数のボックスに各値が入ってくれることを希望していたのですが、配列が9こ作成されてしまいました。


◾️教えてほしいこと

１、動的に作られる変数名が3つだけになり各値を入れるにはどのように変更をすればいいでしょうか（おそらくループの記載位置などが間違っていると思いますが、どこに置いたら良いかまだわかりません、）

２、上記1の問題が解決された後に、trueが入る配列は除外して出力をさせるにはどうしたらいいでしょいか。

３、そもそも他のやり方でスムーズに実現ができる方法はありますでしょうか。







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

```php
◾️実際のコード
```ここに言語を入力
<?php

$table = [
    [10, 'Alpha', true],
    [13, 'Beta', false],
    [15, 'Gamma', true],
    [21, 'Delta', true],
];
$count = 0;

foreach ($table as $row) {

    if(in_array(true,$row, true)) {

        for ($i = 0 ; $i < count($row) ; $i++){
            $count = $count + $i;
                ${"box_".$i}[] = $row[$i];
          //      $val2 = ${"box_".$i};
                var_dump(${"box_".$i});
            }
    }
}
```

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
◾️出力結果
```ここに言語を入力

array (
  0 => 10,
)array (
  0 => 'Alpha',
)array (
  0 => true,
)array (
  0 => 10,
  1 => 15,
)array (
  0 => 'Alpha',
  1 => 'Gamma',
)array (
  0 => true,
  1 => true,
)array (
  0 => 10,
  1 => 15,
  2 => 21,
)array (
  0 => 'Alpha',
  1 => 'Gamma',
  2 => 'Delta',
)array (
  0 => true,
  1 => true,
  2 => true,

```


### 補足
特になし

PHPの配列内容が動的に変わった時にも対応できる処理がうまくいかない

### 現状・知りたいこと
WEBサイトに以下の機能を実装中です。

➀ ユーザがアイテムを「フォルダへ保存」できる
➁「フォルダへ保存」するとデフォルトフォルダに入り、フォルダ間でアイテムを移動できる
➂ フォルダはユーザが任意に作成でき、デフォルトフォルダは任意に変更できる

そして「1ユーザごとに、1つのデフォルトフォルダ」と制約したいのですが、そのための適切な方法を知りたいです。

### 発生している問題
以下のように`CREATE TABLE`しましたが、「1ユーザごとに、1つのデフォルトフォルダ」が制約できません。
つまり以下では`is_default=true`のレコードを、1ユーザが複数持ててしまいました。

```SQL
CREATE TABLE users (
    id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL
);

CREATE TABLE folders (
    id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    user_id INT UNSIGNED NOT NULL,
    name VARCHAR(100) NOT NULL,
    is_default BOOLEAN DEFAULT false,
    CONSTRAINT `folders__foreign__user_id` FOREIGN KEY (`user_id`) REFERENCES `users`(`id`)
);
```

### 自分なりの案
いくつか案を考えてみましたが、このどれが適切なのか？それとも他に適切な方法があるのか？がわかりません。

#### 案1
`folders.is_default` というカラムは削除し、`default_folders`というリレーションテーブルを作り、以下のようにする案です。
```SQL
CREATE TABLE default_folders (
    id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    user_id INT UNSIGNED NOT NULL,
    folder_id INT UNSIGNED NOT NULL,
    UNIQUE `default_folders__unique__user_id` (`user_id`),
    CONSTRAINT `default_folders__foreign__user_id` FOREIGN KEY (`user_id`) REFERENCES `users`(`id`),
    CONSTRAINT `default_folders__foreign__folder_id` FOREIGN KEY (`folder_id`) REFERENCES `folders`(`id`)
);
```

しかしわざわざ別テーブルを作ることが適切なのか？判断できません。
「なんかテーブルって少ない方が良さそうだよなぁ」という印象があります。

#### 案2
`folders.is_default` というカラムは削除し、`users`テーブルに`default_folder_id`カラムを設け、以下のようにする案です。
```SQL
CREATE TABLE users (
    id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    default_folder_id INT UNSIGNED NOT NULL,
    -- しかし以下の外部キー制約を課すとジレンマが生じる
    CONSTRAINT `users__foreign__default_folder_id` FOREIGN KEY (`default_folder_id`) REFERENCES `folders`(`id`)
);
```

しかし上のコメントにあるように、`users__foreign__default_folder_id`という外部キー制約を課すと、以下ABというジレンマが生じてしまいます。

A: `users`への`INSERT`の前に、`folders`への`INSERT`が必要 (`users__foreign__default_folder_id`のため)
B: `folders`への`INSERT`の前に、`users`への`INSERT`が必要 (`folders__foreign__user_id`のため)

このジレンマの解消は、`INSERT`のときはデータベースになんからのロックをかけて、次のPKを取得するという方法で回避できますが、そういう方法が適切なのか？判断できません。
「なんかロックって遅そうだよなぁ」という印象があります。

### まとめ
以上の2案についてどちらが適切か、または他にオススメの案がございましたら教えて頂けませんでしょうか？

適切さは全体の仕様次第でしょうけれど、WEBサイト制作経験がなくまるで判断できない状況です。

「まぁ私ならこうするな」「普通だったらこうだよ」「こうするとこういうとき便利だよ」など、経験豊富な皆様からのご意見を頂戴し、判断の指針にさせて頂ければと思っています。

### バージョン
php 👉 8.2
MySQL 👉 5.7 

よろしくお願い致します。

「1ユーザごとに、1つのデフォルトフォルダ」という機能の実装に適切なテーブル設計について

### 実現したいこと
<test.csv>
****************
A,B,C   <-- header
0,hoge
1,hoge
2,hoge
,,test_1
,,test_2
****************

上記csvファイルから” C ”というheaderに値があれば、その値を取得したいです。
今回であれば、test_1とtest_2を取得し、それぞれを何らかの変数に格納したいです。
test_1とtest_2は仮の値のため、xxx.equals("test_1")などを使用して実現したくありません。

### 発生している問題・分からないこと
csvを扱うことが初めてで全く分からない状況です。
よろしくお願いいたします。




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

```java
public class MainActivity extends AppCompatActivity {
    ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        try {
            InputStream is = getResources().openRawResource(R.raw.test); 
            BufferedReader reader = new BufferedReader(new InputStreamReader(is));
            String line;
            while ((line = reader.readLine()) != null) {
                String[] values = line.split(",");
//                ?
//                ?
//                ?
            }
            reader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
特定の位置の値を取得するような記事を見つけることができませんでした。

### 補足
特になし

Javaにてcsvの特定の値を取得したいです

### 実現したいこと
実行結果:

    // 実行するとalert画面に以下が表示されるようにしたい
    abort!          


### 発生している問題・分からないこと
[現代のjavascriptチーウトリアル](https://ja.javascript.info/fetch-abort)で勉強しています。
fetchのURL「'/article/fetch-abort/demo/hang'」でエラーが出ると思っています。
前にも質問したのですが、ここのコードの「'/article/fetch-abort/demo/hang'」はここでしか反応しないようなので、「index4.html」と同じフォルダに「{}user」を作成して実行しています。{}user＝＝{"message": "Aborted"}

### エラーメッセージ
```error
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
index4.html:80 Live reload enabled.
```

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

```ｊ
// 1秒で中止
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('/article/fetch-abort/demo/hang', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') { // abort() を処理
    alert("Aborted!");
  } else {
    throw err;
  }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ここのコードの「'/article/fetch-abort/demo/hang'」はここでしか反応しないようなので、「index4.html」と同じフォルダに「{}user」を作成して実行しています。{}user＝＝{"message": "Aborted"},
(async () => {}();をつけたりして実行すると、エラ－は消えるのですが、
意図する結果になりません。

### 補足
エディタはVSCode,実行はGoogle Chrome、エラ－確認はf12で行っています。
index4.htmlは「[現代のjavascriptチーウトリアル](https://ja.javascript.info/fetch-abort)」の「3.その他の記事」「3.ネットワークスクリプト」「4.fetch:abort」の
２番目の実行ソースコードです。前回の質問で１個だけは解決できたような気がしたのですが、promise,fetch,mocha,node.js勉強して解決しようとしたのですが、
うまくいきません。setTimeout(() => controller.abort(),1000);のあとsignalが出て、それはabort()をじっこうしているのでしょうか？そのあとの tryでcontroller.signalがエラーを返しているのでしょうか。
このあたりのコードの中身がよくわかっていないです。よろしくお願いいたします。

fetch を中止するコードでエラーが出る

---------------
public class Sample {
  private int id;
  private String name;
  public Sample(int id, String name) (
     super ():
     this. id = id;
     this. name = name;
  }
  public int getId () {
    return id;
  }
  public String getName () {
    return name;
  }
}
---------------
import java.util. Comparator;

public class SampleComparator implements Comparator ‹Sample> {
     @Override
     public int compare (Sample s1, Sample s2) {
        if (s1. getId() < s2. getId ()) {
         return 1;
       }
       if (s2. getId() < s1. getId ()) {
         return -1;
       }
}
---------------
import java.util. ArrayList;
import java. util. Arrays;
Import java.util, List;

public class Main {
   public static void main(String] args) |
       Sample[] samples = {
              𝗇𝖾𝗐 Sample (2. "B"),
              𝗇𝖾𝗐 Sample (3. "C"),
              𝗇𝖾𝗐 Sample (1, "A")
       }
       List‹Sample> list = new ArrayList<Sample> (Arrays. asList (samples)); 
       list. sort (new SampleComparator ());
       for (Samples : list) {
           System. out. println(s.getName ());
       }
  }
}
---------------

この3つのプログラムがある中で、メインメソッドの
「list. sort (new SampleComparator ());」に関して質問です。
ここではSampleComparatorクラスのcompareメソッドを記述していないのに、どうしてこのメソッドが実行されてソートされることになるのでしょうか。基本的な質問でしたらすみませんがよろしくお願いします。
※iPhoneでプログラムを打っている為インデントが汚いかもしれませんがお許しください。すみません。

Comparatorクラスについて

### 実現したいこと

プログラムコードが同一なら、表示結果も同じになるはず。
結果に違いが出るその理由を知りたい。

### 前提

C言語で1から13までのランダムな数字を、バブルソートで小さい順に並び替えるプログラムを2種のPCで実行したところ表示結果に違いが現れました。



### 発生している問題・エラーメッセージ

```
エラーではないのですが、表示結果に違いが現れます。
下記全く同じコードを2種類のPCで実行した際の結果が以下のように異なりました。
《表示結果》
LaVie: 0 1 2 3 4 5 6 7 8 9 10 11 12
VAIO : 1 2 3 4 5 6 7 8 9 10 11 12 13　←　望まれる結果


```

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

```ここに言語名を入力
C言語

ソースコード

#include <stdio.h>

int main(void)
{
    int a[13] = {13, 1, 5, 4, 3, 7, 9, 10, 8, 6, 11, 2, 12};
    int i, j, k, tmp;

    puts("並べ替え前:");
    for(i = 0; i < 13; i++) {
        printf("%d ", a[i]);
    }
    putchar('\n');

    for(i = 13; i > 0; i--) {           // バブルソート
        for(j = 0; j < i; j++) {
            if(a[j] > a[j+1]) {
                tmp = a[j];
                a[j] = a[j+1];
                a[j+1] = tmp;
            }
            for(k = 0; k < 13; k++) {   // 途中経過表示
                printf("%d ", a[k]);
            }
            putchar('\n');
        }
    }

    puts("並べ替え後:");
    for(i = 0; i < 13; i++) {
        printf("%d ", a[i]);
    }
    putchar('\n');

    return 0;
}

### 試したこと

上記全く同じコードを2種類のPCで実行した際の結果が以下のように異なりました。
《表示結果》
LAVI : 0 1 2 3 4 5 6 7 8 9 10 11 12
VAIO : 1 2 3 4 5 6 7 8 9 10 11 12 13

各々のPCに搭載されているCPUによって結果が変わったりするのでしょうか？
コードにミスはありません。2機種とも何度も同一コードで実施しました。
他に考えられる要因があるとすれば何でしょうか？ご教示ください。


### 補足情報（FW/ツールのバージョンなど）
PC二機種のスペックは下記のとおりです。
1.NEC LaVie   CPU: Core i5-3317U. CPUクロック, 1.7GHz
                     OSは当初windows8.0 → 8.1 → 現状はWindows10へアップグレード

2.VAIO          CPU: Core i7-1065G7 1.30GHz 
                    OSは当初windows10から、現状はwindow11へアップグレード




CPU性能によりプログラム結果に違いが出る？

### 実現したいこと
運賃検索プログラムを作っています。
対区間別運賃より、普通運賃、小児運賃等々を出したいと思っております。
ところで、従来のやり方だと、同じ路線の場合にはいいのですが、
違う路線を入れた場合に困るなぁと思い、switch文で路線分けをしましたが、問題が発生しております。
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    出発駅:
    <select name="from" id="stations1">
      <option value="姫路">姫路</option>
      <option value="京口">京口</option>
      <option value="野里">野里</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>
  <div>
    到着駅:
    <select name="to" id="stations2">
      <option value="姫路">姫路</option>
      <option value="京口">京口</option>
      <option value="野里">野里</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>
  距離：<span name="distance"></span>km<br />
  区間：<span name="section"></span><br />
  普通運賃：<span name="adult"></span>円<br />
  小児運賃：<span name="child"></span>円<br />
</body>
</html>
乗車区間：
<span id="span1"></span>
～
<span id="span2"></span>
間
<script>
document.getElementById("stations1").addEventListener("change", function() {
  // value値を取得
  const str1 = this.value;
  document.getElementById("span1").textContent = str1;
});
document.getElementById("stations2").addEventListener("change", function() {
  // value値を取得
  const str1 = this.value;
  document.getElementById("span2").textContent = str1;
});
function calc() {
  var f = document.querySelector('[name=from]').value;
  var t = document.querySelector('[name=to]').value;

  // 駅間に一致するものを探す
  var eki_info = null;
  for (var i = 0; i < list.length; i++) {
    var eki1 = list[i].name[0];
    var eki2 = list[i].name[1];
    if ((eki1 == f && eki2 == t) || (eki1 == t && eki2 == f)) {
      eki_info = list[i];
      break; // 駅間が一致したらループを抜ける
    }
  }

  // 運賃情報を取得
  var far_info = null;
  if (eki_info) {
    far_info = customCalc(eki_info.section);
  }

  // 情報を設定
  if (eki_info && far_info) {
    document.querySelector('span[name=distance]').innerHTML = eki_info.distance;
    document.querySelector('span[name=section]').innerHTML = eki_info.section;
    document.querySelector('span[name=adult]').innerHTML = far_info.adult;
    document.querySelector('span[name=child]').innerHTML = far_info.child;
  }
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('select[name=from]').addEventListener('change', calc);
  document.querySelector('select[name=to]').addEventListener('change', calc);
});

// 新しい要件に基づいて、sectionの内容を修正して運賃を返す関数
function customCalc(section) {
  var customFarInfo = null;

  // 新しい条件に基づいて運賃情報を探す
  switch (section) {
    case "bantan":
      section = "jr_west_traffic";
      break;
    default:
      break;
  }

  // 該当する運賃情報を取得
  for (var i = 0; i < fares.length; i++) {
    if (fares[i].section == section) {
      customFarInfo = fares[i];
      break;
    }
  }

  // 運賃情報が見つかった場合、運賃を返す
  if (customFarInfo) {
    return customFarInfo;
  } else {
    return null;
  }
}
</script>
<script>
var fares = [
  { section: "jr_west_traffic", adult: 0, child:0 },
  { section: "orange" , adult: 190, child:200 }
];

var list = [
  { name: ["姫路", "京口"], distance: 1.7, section: "bantan_2" },
  { name: ["姫路", "野里"], distance: 4.3, section: "orange" },
];
</script>
</html>
```

### 発生している問題・分からないこと
switch文で完全一致するものしか拾ってくれません。部分一致するものを拾うにはどうなりますか。

### エラーメッセージ
```error
何もでなくなります。
どうすればいいのでしょうか。
```

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

```
```ここに言語を入力
  // 新しい条件に基づいて運賃情報を探す
  switch (section) {
    case "bantan":
      section = "jr_west_traffic";
      break;
    default:
      break;
  }

  // 該当する運賃情報を取得
  for (var i = 0; i < fares.length; i++) {
    if (fares[i].section == section) {
      customFarInfo = fares[i];
      break;
    }
  }

  // 運賃情報が見つかった場合、運賃を返す
  if (customFarInfo) {
    return customFarInfo;
  } else {
    return null;
  }
}
```
の部分で、完全一致する情報は拾ってくれますが、部分一致のものは拾ってくれません。
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
チャットgptで何度か質問しましたが、有益な情報は得られませんでした。
また、ワイルドカードも効かないです。

### 補足
特になし

switich分が完全一致するものしか拾ってくれないです。

## テーマ、知りたいこと

PHP、MySQLを利用して社内のシステムを作成しました。
いざ公開となったときに、会社のサーバーが使えないことが判明しました。

無料のレンタルサーバーではセキュリティ面で問題がありもちろん使用できません。
諦めて別の方法でシステムを作成するのが一番手っ取り早いですが、どうにか手段がないかと模索しています。

社内の人のみが閲覧する小規模なサイトの場合、サーバーを介さずとも公開する方法は何かないでしょうか？
また会社ではMicrosoftのShare Pointを利用しているのですが、活用はできないでしょうか？

どなたかご教示お願いいたします。


PHPで作成したサイトの公開方法

### 実現したいこと
chartjsを使ったレーダーチャートで、グラフの線に影をいれて、点に画像を設定したいです。

### 発生している問題・分からないこと
chartjsの線のスタイルや、点のスタイル変更を検索してみましたが、該当するものが分かりません。



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

```js
import './Graph.css';
import React, { forwardRef } from "react";
import { Radar } from "react-chartjs-2";

import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from "chart.js";
import Fetch, { failName } from './Fetch';
import { Cross } from 'recharts';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

const chart = {
  width: "503px",
  height: "806px"
};

const data = {
  labels: ["", "", "", ""],
  datasets: [
    {
      data: [30, 70, 50, 20],
      // グラフの塗りつぶしを無効化
      fill: false,
      // グラフの線の色の指定
      borderColor: "rgba(255, 99, 132, 1)",
      // グラフの線の太さを指定
      borderWidth: 4,
      //結合点の背景色
      pointBackgroundColor: "rgb(255,0,0)",
      //結合点の枠線の色
      pointBorderColor: "rgb(255,0,0)",
      //結合点の背景色
      pointHoverBackgroundColor: "rgb(255,0,0)",
    },
  ],
};

function Graph() {

  return (
    <dev className='Graph'>
      <div style={chart} className="Graph">
        <Radar width='40%' class="katamuke" data={data} options={{
          animation: false,
          r: {
            beginAtZero: true,
            min: 0,
            max: 100,
          },
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          scales: {
            r: {
              angleLines: {
                display: false
              },
              pointLabels: {
                display: true
              },
              ticks: {
                display: false
              }
            }
          },
          plugins: {
            legend: {
              display: false
            }
          }
        }} />
      </div>
    </dev>
  )
}

export default Graph;
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
線の方は全く分かりませんでしたが、点に画像を設定するというのは「pointstyle」が使えそうということが分かり、実際にdatasets内に書いてみましたが画像は設定されませんでした。。。

### 補足
グラフはこんな感じで、
赤の点を画像設定して、線に影を付けたいです。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-22/29c0fd24-8a08-4c46-a540-0275013a9f77.png)
線の影のイメージはこのような感じです
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-22/2dc26750-61c3-4382-b653-709d7a41bcf4.png)


chartjsのレーダーチャートで線に影を入れて、点に画像を設定したい

### 実現したいこと

今の状態では、index.php?url=example.jp/sample.mp4を開いても動画ファイルが存在しない場合の処理が実行されてしまいます。これを解決したいです。それと、以下を追加したいです。
- 新たに、index.php?url=example.jp/sample.mp4&pr=httpsのようにして、prでプロトコルを指定できるようにしたい。ローカルファイルも指定できるようになる（Windows）。
- 新たに、MP3やWAVなどのオーディオにもパラメータ（クエリ文字）はそのままで対応できるようにしたい。

### プログラムの概要・発生している問題

PHPでパラメータ（クエリ文字）に応じて動画を再生するのを作りました。nameとtypeの組み合わせ、またはurlだけで指定します。nameではvideoディレクトリ内に再生する動画ファイルがある場合に、そのファイル名の拡張子以外を指定します。typeではnameのときの拡張子を指定します。urlでは動画をhttp:// を除いた絶対パスで指定します（この部分は変更したいです）。しかし、urlで指定しても動画が開かれずに動画ファイルが存在しない場合の処理が実行されてしまいました。

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

```PHP
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VIDEO PLAYER</title><link href="../fonts/meiryo.css" rel="stylesheet" type="text/css"><style> video { width: 100%; } </style></head><body><?php
// videoディレクトリ内のビデオの場合：「index.php?name=【拡張子以外のビデオファイル名】&type=【拡張子】」
// http://～のビデオの場合（ローカルは不可）：「index.php?url=【http://を除くフルパス】」

// URLパラメータから必要な情報を取得
$name = $_GET['name'] ?? '';
$type = $_GET['type'] ?? '';
$url = $_GET['url'] ?? '';

// 動画ファイルのディレクトリ
$video_directory = 'video/';

// 動画ファイルのパス
$video_path = '';

// URLから動画ファイルのパスを取得
if (!empty($url)) {
    // URLを解析してパス部分を取得
    $parsed_url = parse_url($url);
    $path = isset($parsed_url['path']) ? $parsed_url['path'] : '';
    // 動画ファイルの拡張子を取得
    $extension = pathinfo($path, PATHINFO_EXTENSION);
    // 動画ファイルのパスを設定
    $video_path = $video_directory . basename($path);
} elseif (!empty($name) && !empty($type)) {
    $video_path = $video_directory . $name . '.' . $type;
}

// 動画ファイルが存在するか確認
if (!empty($video_path) && file_exists($video_path)) {
    // HTMLのvideoタグを出力
    echo "<video controls><source src=\"$video_path\">Your browser does not support the video tag.</video>";
} else {
    // 動画ファイルが存在しない場合の処理
    echo '申し訳ございません。アクセスされた動画は存在しません。<a href="javascript: history.back();">Back</a><br>決まったURLの場合、「index.php?name=【拡張子以外のビデオファイル名】&type=【拡張子】」、ほかのURL（http://から始まる）の場合、「index.php?url=【http://を除くフルパス】」と入力します。';
}
?><div style="font-size: 8px;">©2024 KAN-KOFUN</div></body></html>
```

### 試したこと

"と'などの間違いがないかなどよく確認しましたが、わかりませんでした。


PHPで作ったクエリ文字で動画を開くのが開けない

### 実現したいこと
特定の画面幅だけ画像をロードしたい

### 発生している問題・分からないこと
### 断念方法1(display:none)
cssのメディアクエリごとにdisplay:none;すると、ロードしなくていい画面幅でもロードが発生する。
### 断念方法2(pictureタグ)
pictureタグだとimgタグ1つとsourceタグ1つ以上となり、結果として画像指定を最低2つ行わなければならない。1000px以上だけ表示させたい場合にsourceタグに画像を指定したとしても、999px以下には表示が不要なimgタグの方の画像まで読み込まれてしまう。



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

```html

<picture>
  <source media="(min-width: 1000px)" srcset="hoge.webp">
  <img src="999px以下は画像のロード不要。何を記述すべきか。">
</picture>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
pictureタグを使う方法が出てきた。

### 補足
特になし

特定の画面幅だけ画像をロードしたい

### 実現したいこと

画像のようなチャートをchart.jsで再現したい

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-25/099edd69-840c-44c3-852f-0fb51bf6c0bb.png)

↑実現したいイメージ

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-25/a8fc550f-c30f-4abe-a9f1-6fa7a15fa7d5.png)

↑現在のコードで実現できている図
### 前提


フロントエンドの開発をしています。chart.jsで画像のようなグラフを作成したいです。

### 発生している問題・エラーメッセージ

以下の部分がどうすればいいか分からないです。

- 背景のグリッドを点線にする方法
- x軸の目盛りの'CP'をy軸の目盛りのところと重なったところから始めるのではなくて、右に少しずらしたところから始めること
- 外枠を黒い実線で囲むこと



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

```javascript
  function createChartConfig(ctx) {
        return {
          type: "line",
          data: {
            labels: ["CP", "NP", "A", "FC", "AC"], // X-axis labels
            datasets: [
              {
                label: "My Dataset", // Dataset label
                data: [35, 60, 40, 55, 85], // Y-axis data points
                backgroundColor: "rgba(135, 206, 250, 0.2)", // Background color of the line area
                borderColor: "rgba(0, 0, 255, 1)", // Border color of the line
                borderWidth: 3, // Border width of the line
                pointBackgroundColor: "rgba(0, 0, 255, 1)", // Color of the points
                pointBorderColor: "#fff", // Border color of the points
                pointBorderWidth: 2, // Border width of the points
                pointRadius: 5, // Radius of the points
                fill: false, // Fill area under the line
                tension: 0.1, // Bezier curve tension
                borderDash: [6, 6],
              },
            ],
          },
          options: {
            responsive: true,

            scales: {
              y: {
                type: "linear",
                borderDash: [8, 4],

                min: 0,
                max: 100,
                ticks: {
                  stepSize: 5,
                },
                gridLines: {
                  // You can change the color, the dash effect, the main axe color, etc.
                  borderDash: [8, 4],
                  color: "#348632",
                },
              },
              xAxes: [
                {
                  gridLines: {
                    // You can change the color, the dash effect, the main axe color, etc.
                    borderDash: [8, 4],
                    color: "#348632",
                  },
                },
              ],
            },
            plugins: {
              borderColor: "red",
              borderWidth: 2,
              borderDash: [5, 5],
              borderDashOffset: 2,
            },
            layout: {
              padding: {
                // Add padding to avoid cutting
                top: 10,
                right: 10,
                bottom: 10,
                left: 10,
              },
            },
            elements: {
              line: {
                borderWidth: 2, // Border width of the line
              },
              point: {
                radius: 5, // Radius of the points
              },
            },
          },
        };
      }
```



### 試したこと

chart.jsの公式ドキュメントや記事、chatGPTなどで調べてみましたが、やり方がなかなか出てきません。特に背景のグリッドを点線にする方法がなかなか出てきません。

chart.jsで線グラフを作成する方法を知りたい

### 実現したいこと

CirclePanelというJPanelを継承したクラスがあり、その中で作っている図形をクリックした時だけmouseClicked（）を反応させたいのですが、どこをクリックしてもmouseClicked（）が反応します。どうすれば「特定のpaintComponent(Graphics g)」だけを指定してmouseClicked（）メソッドが反応するようになるのかどなたか教えてください。よろしくお願いします。


### 発生している問題・エラーメッセージ

```
なし
```

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

```java


import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.geom.Ellipse2D;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class TestFrame extends JFrame implements ChangeListener,MouseListener {
  public static void main(String[] args) {
    new TestFrame().setVisible(true);
  }

  private JSlider slider;
  private JLabel label;
  private CirclePanel circlePanel; //stateChanged メソッドで使うのでフィールド化

  TestFrame() {
    super("Swingサンプル（円の描画）");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setSize(800, 800);

    circlePanel = new CirclePanel();
    circlePanel.addMouseListener(this);
    setContentPane(circlePanel);

    label = new JLabel("test");
    label.setBounds(300, 10, 100, 100);
    add(label);

    JLabel label2 = new JLabel("テスト");
    label2.setBounds(300, 500, 100, 100);
    add(label2);

    slider = new JSlider(50, 150, 100); //最小値, 最大値, 初期値
    slider.addChangeListener(this);
    JPanel p = new JPanel();
    p.add(slider);
    p.setBounds(300, 300, 200, 50); //見易いようにちょっと大きく
    add(p);
  }

  public void stateChanged(ChangeEvent e) {
    label.setText("値：" + slider.getValue());
    int value = slider.getValue();
    circlePanel.setDiameter(value); //直径をスライダーの値に変更
  }
  
  
  private static class CirclePanel extends JPanel {
    private final int X = 350, Y = 250; //円の中心
    private int diameterOfCircle = 100; //円の直径

    CirclePanel() {
      super(null); //レイアウトマネージャ無し
      setBackground(Color.WHITE); //背景色
    }

    /**
     * 円の直径を設定する
     * @param diameter 直径 [px]
     */
    void setDiameter(int diameter) {
      this.diameterOfCircle = diameter;
      repaint(); //再描画依頼(後に Swing が paintComponent を呼んでくれる)
    }

    @Override
    protected void paintComponent(Graphics g) {
      super.paintComponent(g);

      Graphics2D g2 = (Graphics2D) g;
      g2.setColor(Color.BLUE);
      Ellipse2D ellipse = new Ellipse2D.Double(X-diameterOfCircle/2, Y-diameterOfCircle/2, diameterOfCircle, diameterOfCircle);
      g2.fill(ellipse);
    }
  }


@Override
public void mouseClicked(MouseEvent e) {
	// TODO 自動生成されたメソッド・スタブ
	System.out.println("合計=");
	
}

@Override
public void mousePressed(MouseEvent e) {
	// TODO 自動生成されたメソッド・スタブ
	
}

@Override
public void mouseReleased(MouseEvent e) {
	// TODO 自動生成されたメソッド・スタブ
	
}

@Override
public void mouseEntered(MouseEvent e) {
	// TODO 自動生成されたメソッド・スタブ
	
}

@Override
public void mouseExited(MouseEvent e) {
	// TODO 自動生成されたメソッド・スタブ
	
}
}
```



paintComponent で書いている図形をクリックした時だけ mouseClicked() を反応させたい

### 実現したいこと

DBとストアの定義部分を一つのファイルにまとめて、モジュールやインポートの形で読み込みたい

### 前提

indexDBをDexie.js を使用してDB接続や出力を行っています。
データを保存するページ’（index.php,index.js）と保存したデータを表示するページ（list.php,list.js）の二つのページがあります。
index.jsでもlist.jsでも、DBとストアの定義を書かないといけないのでその部分は分割ファイルとして一つのファイルにまとめて、モジュールやインポートの形で読み込みたいですが、分割しないとすべてうまくいくのですが分割するとエラーになってしまいます。
また、
**ストアの部分のエクスポートの仕方が分かりません。**
ストアの部分をexportしても、import先で「 'list2' is declared but its value is never read.」という文字がvscode上に出てきて、読み込まれない模様です。
助けてください。

### 追記
幾つか修正しましたが未だに解決せず、別のエラーが発生しました。

【修正点】
・ローカル環境では上手くいかないとの情報をサイトで見つけたためxampp化にフォルダを入れた。
・回答者からご指摘いただいた点（define.jsと他のjsでのスキーマ情報が違う（ミス））


### 発生している問題・エラーメッセージ(index.php,list.phpともに)

```
GET http://localhost/js/define.js net::ERR_ABORTED 404 (Not Found)
```


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

```index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="txt1">text</div>
    <div id="txt2">text2</div>
    <button id="post">登録する</button>
    <a href="list.php">リストへ</a>
    <script src="node_modules/dexie/dist/dexie.js"></script>
     
    <script src="./js/index.js" type="module"></script>
    
</body>
</html>
```

```list.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="dataListBody">
        
      </div>
    <a href="index.php">トップへ</a>
    <script src="node_modules/dexie/dist/dexie.js"></script>
    
    <script src="./js/list.js" type="module"></script>
</body>
</html>

```

```difine.js（共通となるDBとスキーマの定義）
// DBの定義
export const list = new Dexie('listDB'); 

// スキーマの定義
export const list2=list.version(1).stores({
    data: '++id, memo1, memo2',
});
```

```index.js(index.phpに読み込ませる)


import {list} from "/js/define.js";

// 'list2' is declared but its value is never read.という表示になり、読み込まれない模様
import {list2} from "/js/define.js";

// ボタンをクリックすると、テキストをDBに保存
document.getElementById('post').addEventListener('click', () => {
    console.log("クリックされました");
 
    const memo1 = document.getElementById('txt1').textContent;
    const memo2 = document.getElementById('txt2').textContent;

 
      // データをIndexedDBに保存
      list.data.add({ memo1,memo2 })
          .then(() => {
              alert('データが保存されました。');
          })
          .catch((error) => {
              console.log('データの保存中にエラーが発生しました: ' + error);
          });

        //   list.data.clear();
   
});


```

```list.js（list.htmlに読み込ませる）
import {list} from "/js/define.js";

 // 'list2' is declared but its value is never read.という表示になり、読み込まれない模様
 import {list2} from "/js/define.js";


// データベースからデータを取得して表示
list.data.toArray().then((data) => {
    const tableBody = document.getElementById('dataListBody');
    list.clear();
    data.forEach((item) => {
        const body = document.createElement('div');
        const memo1cell = document.createElement('p');
        const memo2cell = document.createElement('p');
        
        

        memo1cell.textContent = item.memo1;
        memo2cell.textContent = item.memo2;
        
        
        body.appendChild(memo1cell);
        body.appendChild(memo2cell);
       
        tableBody.appendChild(body);
        console.log("取得します");
        
    
       
    });
      
});
```

### 試したこと

下記など参考にしましたが解決しませんでした。
https://note.com/rodz/n/nbd0406a3422e
https://teratail.com/questions/157447
https://qiita.com/uhyo/items/6b111815ef5495f4e490

### 補足情報（FW/ツールのバージョンなど）

Vscodeで検証中
サーバーはxamppです

使いまわすDBの定義・スキーマ部分を一つのファイルにまとめて読み込みたい　javascript　indexDB Dexie.js

### 実現したいこと
以下3つのテーブルがあります。
＜books テーブル＞
|id|name|
|:--|:--:|
|1|吾輩は猫である|
|2|人間失格|
|3|銀河鉄道の夜|

＜tags テーブル＞
|id|name|
|:--|:--:|
|1|タグ1|
|2|タグ2|

＜tagging テーブル＞
|id|tag_id| book_id|
|:--|:--:|--:|
|1|1|1|
|2|2|1|
|3|2|2|

本には複数のタグを設定することができるため、taggingsテーブルのような形になっています。
今回、「タグ1」が設定されているbooks**以外**を取得するSQLを書きたいと思っています。
つまり、取得したいbooksは、「人間失格」と「銀河鉄道の夜」です。

そこで、以下のようなSQLを書いてみました。
```sql
SELECT DISTINCT * FROM books WHERE id NOT IN (
  SELECT book_id FROM taggings WHERE tag_id IN (1)
)
```
（含めないタグは**複数指定したい**ので、INを使いました。）

### 発生している問題・分からないこと
ただ、「サブクエリは処理時間が遅いから、できるだけサブクエリは使わずに結合だけで書いたほうが良い」という旨を、ネット記事で見つけ、
どうにか結合だけで書けないか考えているのですが苦戦しています。

今回のような場合、サブクエリを使うしか方法はないのでしょうか。
大変お手数をおかけしますが、もしサブクエリを使わずに、結合だけでの書き方がわかる方がいらっしゃいましたが、教えていただけないでしょうか。



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

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
INではなくEXISTSを使うことも、チューニング方法として有効という記事を見つけたのですが、
そちらも結局サブクエリを使うので、結合だけの方法が分からずでした...。

### 補足
特になし

サブクエリを使わずに、結合だけで書ける方法があれば教えてください！

楽天市場やYahoo!ショッピングではCSVファイルを使った商品の登録ができます。

この商品登録用のCSVファイルを読み書き（ドメインのデータへのコンバート）するシステムをPHPを使って作成しているのですが、CSVファイルをオブジェクトとして取り扱うにはどのようにすればいいのか悩んでいます。

これらネットショップの商品CSVファイルは項目数も多く、設定できる値が制限されていたり値の書式が決まっているなど取り扱いが大変です。

また、ショッピングモール側の仕様変更が度々あり、項目が増えたり廃止されたり入力ルールが変更されるなどメンテナンスが必須です。

現状はCSVファイルを配列で管理しているのですがメンテナンスしやすくするためにクラスとして定義してみようと考えてみました。

・CSV全体のクラス
・CSVファイル1行分のクラス
・CSVファイルの各項目のクラス

項目1つ1つをクラスとして定義して、各項目の入力ルールを定義しようというアイデアですがこれだと100項目あれば100個のクラスになってしまいます。

こういうクラス設計をやったことがないので加減が分からないのですが、100個でも200個でもあるだけ作っていくものなのでしょうか？

それともある程度意味のあるまとまりでまとめておく方がいいでしょうか？

皆様のご意見を教えていただければ幸いです。

CSVファイルをクラスとして定義する場合のクラス分割

### やりたいこと
下記のような文字列から"なんと"という文字列を取得したいと考えています。
```Javascript
var str = "Aさん 東京にお弁当を持ってBさんに会いに行く。Aさん なんとBさんに会えず"
```

### 試したこと
そこで、以下のような正規表現でstr.matchをすると`東京にお弁当を持って`を取得してしまいます。
```JavaScript
var pattern = /Aさん (.+?)Bさん/;
```

なるほど、前段に最短でマッチするものが存在していることに気が付きました。今度はこのマッチしてほしくないケースについては、必ずその間に東京か大阪が含まれる文脈であることがわかっているため、以下のようなパターンを当ててみました。

```JavaScript
var pattern = /Aさん ^(?!東京|大阪)(.+?)Bさん/;
```

そると期待する`なんと`は取得できずに何も一致が得られない結果となりました。どのように東京、大阪を含む記載を否定して、`なんと`を取得できますでしょうか？




特定の文字列に挟まれているが、その中に特定の文字列を含んでいない正規表現

ポケモンをオブジェクト指向でゲームを作る際の質問です
私にはjava php javascriptのオブジェクト指向の簡単な知識しかありません

①主人公やライバル、主人公の母親などは一人しかいないので
シングルトンというインスタンスが一つだけのクラスを作るのですか?（主人公クラス、ライバルクラス、母親クラスなどを作って）

②カスミなどのジムリーダーも一人づつしかいないのでジムリーダークラスのインスタンスの一つをカスミにするのか
カスミクラスやマチスクラスを作りシングルトンのインスタンス一つだけにするのかどちらが正しいオブジェクト指向の考え方なんでしょうか?

③サカキはロケット団クラスとジムリーダークラス両方に属していますが多重継承が認められない言語で開発する場合どうするんでしょうか?
サカキクラスはジムリーダークラスを継承してロケット団インターフェースを実装するとかそんな形になるんでしょうか?
でもロケット団クラスがあるのに（ロケット団モブは多いので作る必要があると思います）
しかし、それとは別にロケット団インターフェースをサカキのためだけに作るのもおかしい気がします


気になってググって調べましたが、サカキや主人公をオブジェクト指向でどう作るかヒットしませんでした
回答よろしくお願いいたします

ポケモンをオブジェクト指向で作る際主人公などはどうするのか

### 実現したいこと

直近12か月の年月を取得


年のコンボボックスと月のコンボボックスがそれぞれ12個あります。
1番初めの年月のコンボボックスを選択すると以下11個の年月のコンボボックスに値が自動でセットされるプログラムを作成したいです。

