常連

### 実現したいこと

質問フォームから画像やコメントを記入して、テーブルの中に入れたい

↓↓実際に表示されているイメージです↓↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-26/1ca6e0c0-574f-468a-8498-d1b9a8f16757.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-26/e3567742-793b-47b1-b9f5-57b3c9840ce2.png)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

### 前提

HTMLとJavascriptを使って”表への追加項目”の内容をテーブルにまとめられるようなポートフォリオを作りたい。


### 試したこと

WEBの全体像です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-26/9dba769c-a023-49ce-903b-38a07c116c43.png)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

下記のようにコードを作成して試してみましたがテーブル内に画像が組み込めませんでした。

```ここに言語を入力
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PAIN LIST</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/send_url.js"></script>
  </head>
  <body>
    <header>
      <a href="/" class="header-logo">PAIN LIST</a>
    </header>
  
    <div class="container">
      <div class="container-header">
        <h1>疼痛状況</h1>
      </div>

      <table id="table1" >
        <tr>
          <th width="18%">画像</th>
          <th width="20%">動作・部位</th>
          <th width="8%">痛みの度合い</th>
          <th width="51%">memo</th>
        </tr>
        
        <tr>            
          <td width="18%">(例)画像</td>
          <td width="20%">(例)ジョギング・膝関節</td>
          <td width="8%">(例)強い</td>
          <td width="51%">(例)10分程度ジョギングをすると膝の内側が徐々に痛くなってくる。</td>
        </tr>
          
      </table>
      
       <b><a id="download" href="#" download="pain_list.csv" onclick="handleDownload()" class="csvdownload">csvファイルダウンロード</a></b>
      


       <hr color="#896000" size="3px">



       <h4>表への追加項目</h4>

         <p class="form-label" >画像</p>
         

         <input name="table1_cell_value" type="file" id="th_value1"  multiple>

           
           <div id="preview"></div>
  
           <script>
  
            function previewFile(file) {
             // プレビュー画像を追加する要素
              const preview = document.getElementById('preview');
  
             // FileReaderオブジェクトを作成
             const reader = new FileReader();
  
             // ファイルが読み込まれたときに実行する
              reader.onload = function (e) {
               const imageUrl = e.target.result; // 画像のURLはevent.target.resultで呼び出せる
                const img = document.createElement("img"); // img要素を作成
               img.src = imageUrl; // 画像のURLをimg要素にセット
               preview.appendChild(img); // #previewの中に追加
             }
  
              // ファイルを読み込む
              reader.readAsDataURL(file);
            }
  
  
            // <input>でファイルが選択されたときの処理
            const fileInput = document.getElementById('th_value1');
            const handleFileSelect = () => {
             const files = fileInput.files;
             for (let i = 0; i < files.length; i++) {
               previewFile(files[i]);
             }
            }
            fileInput.addEventListener('change', handleFileSelect);
  
           </script>


         <p class="form-label" >動作・部位</p>
         <input name="table1_cell_value" id="th_value2" type="text" class="form-text">
         <p class="form-label" >痛みの度合い</p>
　　　　　<input name="table1_cell_value" id="th_value3" type="text" class="form-label2" >
         <p class="form-label" >memo</p>
         <input name="table1_cell_value" id="th_value4" type="text" class="form-label2" >
    

        <input class="delete-submit" type="button" value="表に上記内容を追加 (クリック)" onclick="add_line()" >

      </div>


       <script>
        function previewFile(hoge){
         var fileData = new FileReader();
         fileData.onload = (function() {
           //id属性が付与されているimgタグのsrc属性に、fileReaderで取得した値の結果を入力することで
           //プレビュー表示している
           document.getElementById('preview').src = fileData.result;
         });
         fileData.readAsDataURL(hoge.files[0]);
        }
       </script>
        
      <script>
        //ここから表の行追加のコード
        function add_line() {
          for(var i = 0; i < document.getElementsByName("table1_cell_value").length; i++){
            if(document.getElementsByName("table1_cell_value")[i].value ==""){
                alert("未入力項目があります。");
                return false;
            }
          }

          var table = document.getElementById('table1');//id=table1という要素を取得
          var row = table.insertRow(-1);//id=table1の中にtrタグを最後の子要素として追加
          var cells = new Array();
          for(var i = 0; i < table.rows[0].cells.length; i++){
            cells[i] = row.insertCell(-1);//新しく作ったrowの中にtrタグを最後の子要素として追加
            cells[i].innerText=document.getElementsByName("table1_cell_value")[i].value;
            document.getElementsByName("table1_cell_value")[i].value="";//入力フィールドの初期化
          }
        }
        //ここまで表の列追加のコード
        //ここからCSV出力＆ダウンロード
        function handleDownload() {
            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);//文字コードをBOM付きUTF-8に指定
            var table = document.getElementById('table1');//id=table1という要素を取得
            var data_csv="";//ここに文字データとして値を格納していく
    
            for(var i = 0;  i < table.rows.length; i++){
              for(var j = 0; j < table.rows[i].cells.length; j++){
                data_csv += table.rows[i].cells[j].innerText;//HTML中の表のセル値をdata_csvに格納
                if(j == table.rows[i].cells.length-1) data_csv += "\n";//行終わりに改行コードを追加
                else data_csv += ",";//セル値の区切り文字として,を追加
              }
            }
    
            var blob = new Blob([ bom, data_csv], { "type" : "text/csv" });//data_csvのデータをcsvとしてダウンロードする関数
            if (window.navigator.msSaveBlob) { //IEの場合の処理
                window.navigator.msSaveBlob(blob, "pain_list.csv"); 
                //window.navigator.msSaveOrOpenBlob(blob, "test.csv");// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
            } else {
                document.getElementById("download").href = window.URL.createObjectURL(blob);
            }
    
            delete data_csv;//data_csvオブジェクトはもういらないので消去してメモリを開放
        }
        //ここまでCSV出力＆ダウンロード
    </script>
    </div>
  </body>
</html>

```

### 試してみた結果

上記のコードを試した結果、下の画像のように文字のみがテーブルに入ってしまう状況です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-26/87466270-a25e-4c8b-8ef3-e2910d24b0d9.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-26/971443ee-cec9-4c10-9a3b-cdce4581b83f.png)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

どのように書き換えれば目標とする動作になるのか路頭に迷っている状況です。
ご教授いただけたら幸いです。
何卒宜しくお願い致します。

【HTML・JavaScript】質問フォームから画像やコメントを記入して、テーブルの中に入れたい

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

副業でプログラミングを始めたいと思っています。完全独学（掲示板での質問、書籍・各種Webサービスは利用する）で副業できるレベルまでを目指したいです。準備期間（学習期間）が半年〜1年ほどあると仮定した場合、どのような言語や仕事が適しているでしょうか。

## 背景、状況

現在メインでしている仕事では、勤務中に暇な時間が多くあります。せっかくならこの時間を使って何か勉強して仕事にできるものがあればなあと思って質問させていただいた次第です。私の現段階のプログラミングを述べますと、Progateというサービスを利用して、HTML・CSS、Javascript、Python等の基礎文法を簡単に学習した程度です。





今から独学でプログラミングを始めるなら、どんな言語がおすすめですか？

### 実現したいこと
配列に特定の文字列が含まれる場合にのみ処理を繰り返して表示させたい。

<?php
$user = [
'tarou' =>
[
'name' => 'たろう', //名前
'age' => '15', //年齢
'sort' => 'タ', //頭文字
],

'tanaka' =>
[
'name' => '田中', //名前
'age' => '19', //年齢
'sort' => 'タ', //頭文字
],

'hanako' =>
[
'name' => 'はなこ', //名前
'age' => '16', //年齢
'sort' => 'ハ',//頭文字
],

]
?>

という配列があったときに、
まず以下を実行する
$kashiramoji = array_column($user, 'sort')　//'sort'の配列$kashiramojiを新しくつくる
$first = array_search('タ', $kashiramoji) //配列$kashiramojiの中から'タ'に該当するものを抽出する


$kashiramojiが'タ'に該当するもの全てに対して以下の情報をページ上に表示させたい。
<?php foreach($first as $data) {;?>
<?php echo $user['name'];?>
<?php echo $user['age'];?>
<?php } ?>

つまり表示結果は以下のようになってほしいです。

たろう
15
田中
19

まずsortが「タ」に当てはまることを条件にしたいのですが、以下の内容をif文の中に書いて絞込みすることは可能でしょうか？

$kashiramoji = array_column($user, 'sort')　//'sort'の配列$kashiramojiを新しくつくる
$first = array_search('タ', $kashiramoji) //配列$kashiramojiの中から'タ'に該当するものを抽出する

さらに結果を表示させようとすると、
引数がbool型になっているというエラーになります。


php、js共に初心者なので
変な質問になっていましたらごめんなさい。

どなたかお力をお貸しください。

配列に特定の文字列が含まれる場合にのみ処理を繰り返したい

### 実現したいこと

ftpソフトでアップロードしたhtmlをブラウザ表示にしたら、一部にcssが反映されておらず困っています。
どなたか良い方法を教えてください。

### 前提

cyberduckを使ってhtmlをアップロードしました。vscodeでサイト制作していたのですがブラウザに表示させ確認を行いながら制作を進め完成させたのですが、アップロードしたhtmlを確認したところ一部にcssが反映されていませんでした。デベロッパーツールで調べてみたところ、反映されていない部分にはスペースをあけてcssコードを入力したのですが、アップロードしたhtmlにはスペースが空いてなくcssが反映されていませんでした。ここの部分をどうにかしたいのですが、どうすればよいのでしょうか？

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

ftpソフトでアップロードしたhtmlの一部にcssが反映されていない。

### 該当のソースコード
html
<main class="main">
    <div class="firstview">
      <div class="firstview-message">
        <span class="red">M</span>y-<span class="red">P</span>ortfolio
      </div>
    </div>

css
.firstview-message{
align-items: center;
 display: flex;
 font-size: 3rem;
 justify-content: center;
 height: 100%;
 letter-spacing: 0.3rem;
}
.firstview-message .red{
  color: #42a5ec;
}

アップロードしたhtml
<main class="main">
    <div class="firstview">
      <div class="firstview-message">
        <span class="red">M</span>y-<span class="red">P</span>ortfolio
      </div>
    </div>

css
.firstview{
  background-image: url(../image/hero.jpg);
  height: 700px;
  background-size: cover;
  background-position: center;
}

.firstview-message{
align-items: center;
 display: flex;
 font-size: 3rem;
 justify-content: center;
 height: 100%;
 letter-spacing: 0.3rem;
}
.firstview-message.red{
  color: #42a5ec;
}
### 試したこと
vscodeにはスペースをあけてcssを入力しているため反映されています。一応にスーパーリロードやキャッシュを削除など試したのですが反映されず、またcyberduckに何度も上書きとアップロードを繰り返したのですがどうしてもスペースが詰められて反映されませんでした。

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


ftpソフトでアップロードしたhtmlの一部にcssが反映されていない。

###実現したいこと
お世話になります。
最近javascript勉強始めました。
初めて質問させていただきます。
よろしくお願いします。

・javascriptを使用して、JSONデータを取得。
・JSONデータの配列のtitle部分をリスト表示
・「全件」をクリックしたら、全てのリストが表示
・「未完了」をクリックしたら、completedが「false」になっているもののみを表示
・「完了」をクリックしたら、completedが「true」になっているもののみを表示

このような振る舞いをしたいのですが、
全件をリスト表示することができなくて作業が止まってしまっております。

### 前提
javascriptでJSONデータを取得できました。
その取得したデータのtitleに記入されている部分をボタンをクリックすると、
添付画像のように全件リスト表示させたいです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/6fe7fcde-753b-4664-a686-02886df2843e.png)

### 発生している問題・エラーメッセージ
JSONデータの取得をして、
ボタンを押すとtitleに記載している文字が表示されるところまでいきましたが、
一気に表示されてしまいます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-10/19e1dd6e-0cb6-43d3-aa07-b25855e532d8.png)
### 該当のソースコード

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>lesson06 検索フォーム</title>
    <link rel="stylesheet" type="text/css" href="base.css">
</head>

<body>
    <div id="wrapper">
        <form id="sampleForm" method="post" action=""
        name="sampleForm" onsubmit="return submitStr()">
            Completed:
            <select name="select" id="select">
                <option value="">全件</option>
                <option value="0">未完了</option>
                <option value="1">完了</option>
            </select>
            <button type="submit" id="submit">Todo表示</button>
        </form>
        
        <ul id="list">
        </ul>
    </div>

    <script>
        const element = document.getElementById('list');
        let li = document.createElement('li');

        async function getData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/todos');
                const data = await response.json();
                console.log(data);
                let titles = data.map(item => item.title);
                li.textContent = titles;
                    element.appendChild(li);
            } catch (error) {
                console.log('エラーが発生しました', error);
            }
        }

        let myForm = document.forms['sampleForm'];
        const btn = document.getElementById('submit');

        btn.addEventListener('submit', submitStr);
        function submitStr(){
            event.preventDefault();
            let submitStr = document.forms.sampleForm.select.value;
            console.log(submitStr);
            if(submitStr == ''){
                getData();
                }
            }


    </script>
</body>

</html>
```

```css
@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    text-align: left;
    list-style-type: none;
    border-collapse: collapse;
}

textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}

html {

}

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* 上の部分は気にせずここから書く */
#sampleForm {
    margin: 20px 0 0 20px;
}

#box {
    margin: 20px 0 0 20px;
    width: 320px;
    height: 180px;
    background-color: #fdd;
}
#list li {
    list-style-type: disc;
    margin-left: 40px;
}

.error {
    font-size: 12px;
    color: #f00;
    /* display: none; */
}

```

### 試した内容
３7,38行目を削除して、下記for文を入れてみましたが、
エラーは出ていないものの、リスト表示されませんでした。
for (let i = 0; i < titles.lenght; i++) {
                    li.textContent = titles[i];
                    element.appendChild(li);
                }
                
### 補足情報（FW/ツールのバージョンなど）

javascript　jsonデータ　リスト表示

端末上にキャッシュが残っていると、新たにアップしたHTMLやcssが反映されないとお聞きしました。
自身で確認したい場合は自分でキャッシュを削除すれば良いと思うのですが、
他の人（サイトを訪問する人）たちにも反映させるにはどうすればよいのでしょうか。

キャッシュについて。

### 実現したいこと

ifameで差し込んだページの一部をiframeタグで指定した値からはみ出して表示したい。

### 前提

WEB系のコードは初心者なので、質問の仕方が悪かったらすみません。

下の図のようにヘッダー①②があり、①のみスクロールしても動かないように固定しています。
ヘッダー①②をiframeにしているのは別のページでもヘッダー部分を使用したいためです。

ヘッダー①の一部にulタグでマウスカーソルを重ねると、表示されるメニューを付けました。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-02/3e6058c3-0bf7-47b7-a068-619f23d0e9d0.png)


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

iframeタグの高さ分しか画面上には表示されない為、ヘッダー①の高さのみをiframeの高さに設定したときに、メニューが切れてしまう。

### 該当のソースコード
index.html
```html
<div id="header_1">
            <iframe id="h_1" src="header_1.html" frameborder="0" scrolling="NO" width="100%" height="210px"></iframe>
        </div>
        <div id="header_2">
            <iframe src="header_2.html" frameborder="0" scrolling="NO" width="100%" height="650px"></iframe>
        </div>

        <div id="main">その他要素</div>
```
```css
#header_1{
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	text-align: center;
	z-index: 100;
}
```
header_1.html
```html
<div id="header_navi">
    <ul id=head_tab>
        <li class="header_navi_lst">
            <a href="" target="_parent"><span class="span1">Menu</span><br><span class="span28"></span></a>
                <div class="sub_menu">
                    <div class="sub_index">
                        <p><a href="" target="_top">A</a></p>
                        <p><a href="" target="_top">B</a></p>
                        <p><a href="" target="_top">C</a></p>
                    </div>
                </div>
            </div>
        </div>
   </div>
```
```css
.sub_menu{
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}
.header_navi_lst:hover > .sub_menu {
	visibility: visible;
	opacity: 0.8;
	z-index: 100;
}
```

### 試したこと

iframeのheightの数値を大きくして、メニューの要素が表示されるように設定しましたが、ヘッダー①をスクロール固定でおいておくために#h_1のz-indexの値を他より高く設定したため、iframeの高さ分ヘッダー②以下の要素がクリックできなくなってしまいました。


html iframeの要素をはみ出して表示させる方法

## 自社開発アプリの開発環境・開発言語について
・社内で自社開発するアプリケーションの開発環境や開発言語について皆様の意見が聞きたいです。
また、皆様の社内ではどのような感じか現状をお聞きしたいです。

## 状況
・現状弊社のシステム部では社内で使用するアプリケーションを開発やシステムの保守管理しております。
私がシステム部に配属される以前はHTAアプリケーション、VBAを使用したアプリケーションの2種類がありました。そのアプリが開発されたのは2000年ごろです。そこから多少はアプリの改修はされていますが、そこまで大きな変化はありません。
現在そのアプリを作った方は定年で退職されています。
システム部でプログラミングができるのは若干名でVBAがなんとなくわかる程度です。（今まで新規でアプリを作る事が無く改修しかしてないのでなんとなくで何とかなってたみたいです。）

・最近になってVBAやHTAのアプリで不具合が発生しているので、この機会に当たらいいアプリにリニューアルしようと提案はしてるのですが、他の言語がわかる人が私しかいないのであまりOKが出ません。

私は主なプログラミング言語としてC#、Python、Java、C、HTML、Ruby、VBAが使えます。プログラミング言語といえるか分かりませんが、SQLもわかります。

やはりまだVBAでの開発が主流なのでしょうか？

・現在社内で動いているアプリケーションとしては以下のようなものがあります
●サーバへのファイルのアップロード、ダウンロード
●データを決まったフォーマットに成形してテキストファイルの作成。
●Webサイトからの自動情報取得
●毎日の決まったメール送信

**_皆様の社内での現状や、主流の言語などありましたらご意見お聞かせください_**




HTML5