常連

インフルエンサー

注目の的

社会貢献

質問力

情報収集家

支持者

鑑定士

自己紹介

有名人

## やりたいこと
お世話になっております。
文字列の'1/2'をfloatの0.5にするためにはどうすれば良いでしょうか？

## ためしたこと
```ruby
[23] pry(#<xxx::xxx>)> '1/2'.to_f
=> 1.0
```

## ruby version
2.7.0

文字列の有理数(分数)を小数に変換したい(例: '1/2' -> 0.5)

```ruby
irb(main):001:0> 1/4r + 1/6r
=> (5/12)
```

上記計算では、約分されていますが、
約分しないで10/24 と出力するにはどうすればよいでしょうか？
できれば、
「分数を約分しないで計算する」
という一般的な回答を頂けたらと思っています。

分数を約分しないで計算するには？

processingでの矢印の描画方法が知りたいです。
単純な矢印（←や→）すら描画できません。。

そしてその矢印を左右にランダムに向かせるにはどのようなコードを書けばよいのでしょうか、、教えてください。

processingでの矢印の描画

shellscriptのprintfコマンドで、途中で改行がしたい。

XUbuntuデスクトップをノートPCにインストールしてSSHで接続しているのですが.bash_profileを設定してもログインししなおすと設定が元に戻ってしまいます。

うろ覚えですが.bash_profileを新規作成して設定を書いた気がします。もしかしてubuntu19.04はデフォルトでの読み込みが.profileになっていてここに設定を書かなければならないのでしょうか？それとも/etc/profileあたりに設定を書くものなのでしょうか？

詳しく知っている方教えてください。


バージョンは以下の通りです。
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=19.04
DISTRIB_CODENAME=disco
DISTRIB_DESCRIPTION="Ubuntu 19.04"

ubuntuの.bash_profileの設定が反映されない

件名の通りシェルスクリプトの特殊変数「$?」について質問があります。
「$?」は直前実行したコマンドの終了値（0は成功、1は失敗）という認識なのですが、
インターネットでは場合によっては他の値もあると書いてありました。
下記がその、URLです。
http://shellscript.sunone.me/exit_status.html#%E7%B5%82%E4%BA%86%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%81%A8%E3%81%AF

また、以前シェルスクリプトで下記の様な書き方をしていたのを見た記憶があります。
```ここに言語を入力
if [ $? -eq 2 ]
```


この2はどのような意味を持っているのでしょうか。
どなたか分かる方教えてください。

シェルスクリプトの特殊変数「$?」について

###前提・実現したいこと
カラー画像の勾配を計算したいのですが、良い方法が思いつきません。
単純に、グレースケールに変換した後にSobelフィルタを用いれば簡単な勾配を求めることはできますが、カラー画像ではあきらかに色の境目があるものでもグレースケールでは境界が潰れてしまうことがあります。

例えば下の画像では、真ん中上のトマトと服の間に明確な境界があるように見えますが、グレースケールでは目立った境目は見えず、Sobel計算でも勾配は殆ど検出されていないように見えます。

色相や彩度も考慮した勾配の計算方法はないのでしょうか？
勾配方向も計算できれば有り難いですが、勾配強度だけでも計算できれば助かります。

説明不足かもしれませんが、よろしくお願い致します。

![元画像](4f5733e290cada3e1e17515011e223bd.jpeg)
![グレースケール](b44d40ced46b35033af01070baa80dd0.jpeg)
![Sobelフィルタ](68e11a554b56bd3b687bfee15ad47b10.jpeg)
###考えたこと
ピクセルごとにHSV三つの要素を持っていると考え五次元空間で勾配を計算すればどうか、と考えましたが具体的な実現法までは頭が追いつきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
C言語

色相を考慮したカラー画像の勾配の計算法

##実現したいこと
aduinoのセンサーから得られたデータをシリアル通信でprocessingへ送り、得られたデータをprocessingで作ったグラフ上にプロットするプログラムを描きたいです。
またそのプロットしたデータをCSVで保存できるようにしたいです。

##状況
表を描画する方法はわかりました。
下にプログラムを書いておきます。
この表示されたグラフに、リアルタイムでセンサーが得た値をプロットしていきたいです。
第一象限領域での描画を想定しています。


##どんなプログラムにしたいのか
動作としましては
センサーからarduinoに値x、yが入力され、それをシリアル通信にてprocessingで出力する、といった内容です
① arduinoに入力された値x、yをシリアル通信でprocessingに送る
② その数値をグラフにプロットする
③ delayを0.1秒くらい置いて①、②をループ
④ エクセルにてプロットした座標をxとyの列で区切って書き出し、保存
① ~④を10回繰り返したら終了
みたいな感じをイメージしています。④のデータ出力は最後に一括で出来たらそうしたいです。
データを取っていくと散布図のような形になることを想定しています。

##表を描くプログラム
下のプログラムはprocessing上で表を描くプログラムです。

int xgap = 30; // xの間隔
int ygap = 30; // yの間隔
int xorg = 100; // x の原点
int yorg = 550; // y の原点
int xsize = 640; // screen width
int ysize = 640; // screen height
int a = 1;
int b = 0;
int c = 0;
int valgap = 1;
PFont f;
 
void setup()
{
 size(640, 640);
 f = createFont("Arial", 16, true);
}
 
void draw()
{
 background(255);
 
 // draw horizontal and vertical lines
 stroke(0, 0, 0);
 for (int x = xorg; x > 0; x -= xgap) {
 line(x, 0, x, ysize);
 }
 for (int x = xorg; x < xsize; x += xgap) {
 line(x, 0, x, ysize);
 }
 for (int y = yorg; y > 0; y -= ygap) {
 line(0, y, xsize, y);
 }
 for (int y = yorg; y < ysize; y += ygap) {
 line(0, y, xsize, y);
 }
 line(xorg-1, 0, xorg-1, ysize);
 line(xorg+1, 0, xorg+1, ysize);
 line(0, yorg-1, xsize, yorg-1);
 line(0, yorg+1, xsize, yorg+1);
 
 // グラフの座標を表すテキストを表示
 fill(0);
 textAlign(CENTER);
 textFont(f, 16);
 int xx = xorg;
 int valx = 0;
 for (; xx > 0; xx -= xgap, valx -= valgap) {
 }
 xx += xgap;
 valx += valgap;
 for (; xx < xsize; xx += xgap, valx += valgap) {
 text(str(valx), xx, yorg + 15);
 }
 int yy = yorg;
 int valy = 0;
 for (; yy > 0; yy -= ygap, valy += valgap) {
 }
 yy += ygap;
 valy -= valgap;
 for (; yy < ysize; yy += ygap, valy -= valgap) {
 text(str(valy), xorg - 15, yy + 5);
 }
 
}

##質問内容
①aduinoから送られてきたセンサー値をpurocessingで受け取り表にプロットする方法
②プロットした値をCSVに出力する方法

こちらが知りたい内容となります
ながながと失礼いたしました。

どうか皆様のお知恵お借りできませんでしょうか、、、

processingにて表にデータをプロットする方法。またそのデータをCSV出力する方法。

### 前提・実現したいこと
画像一枚中の様々な場所から、画像のトリミングをしたい


### 発生している問題・エラーメッセージ

下記のコードの用に入力するとうまく画像を切り抜くことができるのですが、
```ここに言語を入力
width=448
ymax=1280
xmax=960
 #中央
    if number == 0:
        img_trim = img[ymax//2-width//2: ymax//2+width//2, xmax//2-width//2: xmax//2+width//2]
    #左上
    elif number == 1:
        img_trim = img[0:width, 0:width]
    #右上
    elif number == 2:
        img_trim = img[0:width, xmax-width:xmax]
    #左下
    elif number == 3:
        img_trim = img[ymax-wob-width:ymax-wob, 0:width]
    #右下
    elif number == 4:
        img_trim = img[ymax-wob-width:ymax-wob, xmax-width:xmax]

```
以下のように淵以外の場所を切り取りしようろするとすると、実行できなくなります。
この原因は何なのでしょうか。教えてください。
一応ほかの計算に使う関数も記載しております。関数部分は上記の実行できるものとなんら変更しておりません。
また、元画像サイズは縦960*幅1280です。
切り抜きたいサイズは448*448です。
wobは画像の下に黒い淵があるのでそれを考慮したためです。
wob=64です。

### 該当のソースコード

```ここに言語名を入力
#(width*width)の正方形に切り出す
def trim(img, width, number, bar_switch,slide):
    ymax = img.shape[0]
    xmax = img.shape[1]

    if bar_switch == 'FE-SEM': # FE-SEM
        #width_of_bar
        wob = 64
    elif bar_switch == 'W-SEM': # W-SEM
        wob = 0
    else:
        pass

    #中央
    if number == 0:
        img_trim = img[ymax//2-width//2: ymax//2+width//2, xmax//2-width//2: xmax//2+width//2]
    #上1
    elif number == 1:
        img_trim = img[0:width, 0:width]
    #上２
    elif number == 2:
        img_trim = img[0:width, width:width+width]
     #上3
    elif number ==3:
        img_trim = img[0:width, xmax-width:xmax]
    #下1
    elif number ==4:
        img_trim = img[ymax-wob-width:ymax-wob, 0:width]    
    #下2
    elif number ==5:
        img_trim = img[ymax-wob-width:ymax-wob, width:width+width]
    #下3
    elif number == 6:
        img_trim = img[ymax-wob-width:ymax-wob, xmax-width:xmax]
    #中央1
    elif number == 7:
        img_trim = img[slide:width+slide, 0:width]
    #中央２
    elif number == 8:
        img_trim = img[slide:width+slide, width:width+width]
     #中央3
    elif number == 9:
        img_trim = img[slide:width+slide, xmax-width:xmax]
    #中央4
    elif number == 10:
        img_trim = img[ymax-wob-width-slide:ymax-wob-slide, 0:width]
    #中央5
    elif number == 11:
        img_trim = img[ymax-wob-width-slide:ymax-wob-slide, width:width+width]
    #中央6
    elif number == 12:
        img_trim = img[ymax-wob-width-slide:ymax-wob-slide, xmax-width:xmax]
    #中央7
    elif number == 13:
        img_trim = img[0:width, slide:width+slide]
    #中央8
    elif number == 14:
        img_trim = img[0:width, width+slide:width+width+slide]
     #中央9
    elif number == 15:
        img_trim = img[0:width, xmax-width-slide:xmax-slide]
    #中央10
    elif number == 16:
        img_trim = img[ymax-wob-width:ymax-wob, slide:width+slide]
    #中央11
    elif number == 17:
        img_trim = img[ymax-wob-width:ymax-wob, width+slide:width+width+slide]
    #中央12
    elif number == 18:
        img_trim = img[ymax-wob-width:ymax-wob, xmax-width-slide:xmax-slide]
    #中央13
    elif number == 19:
        img_trim = img[300:width+300, 0:width]    

    return img_trim


#(nosp*nosp)の枚数に画像を分割する
def trim2(img,ny,nx,ny1,nx1):
    ymax = img.shape[0]
    xmax = img.shape[1]

    img_trim = img[(ny1-1)*(ymax//ny):ny1*(ymax//ny),(nx1-1)*(xmax//nx):nx1*(xmax//nx)]
    return img_trim


def RGB_clahe_trans(img):
    # RGB --> YUV
    img0_YUV = cv2.cvtColor(img, cv2.COLOR_RGB2YUV)

    clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8,8))
    img0_YUV[:,:,0] = clahe.apply(img0_YUV[:,:,0])
    # YUV --> RGB
    img_clahe = cv2.cvtColor(img0_YUV, cv2.COLOR_YUV2RGB)

    return img_clahe


# Train, Validationデータを生成する関数.
def generate_train_val(img, SEM_select, clahe_select, path_tr_val, label_tr_val,slide):
    for i_tv in range(4):
        img = trim(img, 448, i_tv, SEM_select,slide)

        for j_tv in range(2):
            for k_tv in range(2):
                img_trim2 = trim2(img, 2, 2, j_tv+1, k_tv+1)

                # 適用的ヒストグラム平坦化 CLAHE
                if clahe_select == 'no':
                    pass
                elif clahe_select == 'clahe':
                    # clahe ( 関数内でRGB --> YCbCr --> Yに対してclahe --> YCbCr --> RGB )
                    img_trim2 = RGB_clahe_trans(img_trim2)
                else:
                    pass

                # 回転させる.
                set_angle = [0, 90, 180, 270]
                for l_tv in range(len(set_angle)):

                    if set_angle[l_tv] == 0:
                        img_Rot = img_trim2

                    else:
                        #画像回転
                        trans = cv2.getRotationMatrix2D((int(img_trim2.shape[1]//2), int(img_trim2.shape[0]//2)), set_angle[l_tv], scale=1.0)
                        img_Rot = cv2.warpAffine(img_trim2, trans, (img_trim2.shape[1], img_trim2.shape[0]))

                    # 保存用のパス生成.
                    original_file_name = path_tr_val.rsplit('/', 1)[1]
                    #print(original_file_name)
                    original_file_name = original_file_name.rsplit('.', 1)[0]
                    #print(original_file_name)

                    save_path = "./Databox_ver2/Train/"+str(label_tr_val)+"/"+str(original_file_name)+"."+str(i_tv+1)+"."+str(j_tv+1)+"."+str(k_tv+1)+"."+str(set_angle[l_tv])+".tif"
                    #print(save_path)

                    if save_images == "save":
                        # 画像保存
                        cv2.imwrite(save_path, img_Rot)
                    else:
                        pass
### メイン関数 ###################################################################
def main():

    # 1_set_preprocess.csv から指示を読み出し.
    SEM_select, clahe_select, mean_select = set_preprocess("./1_set_preprocess.csv")


    # 1_preprocess.csv を読み取り, データをTrain(Train, Validation)とTestに分ける.
    train_val_path, test_path = preprocess("./1_preprocess.csv")


    # フォルダ名にするため, labelを取得する.
    labels = np.unique(train_val_path.loc[:, 'label'])
    num_label = labels.shape[0]
    # 生成した画像を保存するためのフォルダを用意する.
    make_savedir(labels, num_label)
    
    slide=100

    # Train, Validationデータを1枚ずつ処理する.
    for i_tr_val in range(train_val_path.shape[0]):
    #for i_tr_val in range(1):
        path_tr_val = train_val_path.loc[i_tr_val, 'Dir']
        label_tr_val = train_val_path.loc[i_tr_val, 'label']
        print(path_tr_val, "is processing.")


        # 画像読み込み.
        img = cv2.imread(path_tr_val, 1)


        # TrainとValidationデータの生成関数へ.
        generate_train_val(img, SEM_select, clahe_select, path_tr_val, label_tr_val,slide)



```



### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

画像の切り取りがうまくできない

いつもお世話になっております。 
JavaScript初心者の者です

javascriptの外部スクリプトの読み込みが上手くいきません
参考書通りやっており、どうしてもどこが間違っているのかわかりません。 

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>JavaScript本格入門</title>
  </head>

  <body>
    <script type="text/javascript" src="scripts/hello_ex.js">
    </script>
    <noscript>JavaScriptが利用できません</noscript>
  </body>
</html>

```

hello_ex.js　　外部ファイル↓
```
window.alert('こんにちは、世界!');
```

### googleのコンソールでのエラーメッセージ
Failed to load resource: net::ERR_FILE_NOT_FOUND　　hello_ex.js:1 


読み込みの失敗だとはわかるんですが
間違った箇所がわかりません。
もしよろしければ、解決策をお願いします

JavaScriptでの外部スクリプトの読み込みが上手くいかない

こんばんは、
現在、URLからリンク先のタイトルやサムネイル画像などの情報を取得して
表示させたいと考えています。

しかし、プラグインなどもなかなかいいものが見つからず困っているので
実装方法やいいプラグインを知っている方がいれば教えて下さい！！

よろしくお願いします。

URLからリンク先の情報を取得

git labで下記コマンドを実行したところエラーが出ました。
gitは、殆ど素人で右往左往しています。
これはどういったエラーになるのでしょうか。
因みに、これまでは同じコマンドで問題なく動作していました。
何が変わったのか、こちらでは分かりません。

```git

****@**** MINGW64 ~/OneDrive/ドキュメント/gitlab/git_space (v001)
$ git remote

****@**** MINGW64 ~/OneDrive/ドキュメント/gitlab/git_space (v001)
$ git push origin v001
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.


```

gitエラー　fatal: 'origin' does not appear to be a git repository

```ruby
def d(ary)
  ans = []
  ary.each_cons(2){|i| ans.push(i[1] - i[0])}
  ans
end

ary0 = (0..5).map{|i| i ** 3}
ary1 = [2, 3, 5, 7, 11, 13]
p d(ary0)
p d(ary1)
```
上記ｄのように（一般の数列に対し）階差数列をかえすようにしてみたのですが、
もっと簡単に階差数列を作れないでしょうか？

階差数列を作るには？

### 前提・実現したいこと

paizaラーニングの練習問題「日付のフォーマット」を解いています。

・"YYYY/MM/DD"の形式の10文字からなる
・YYYYは4つの数字からなる
・MMは2つの数字からなり、"01"から"12"の12種類のいずれかである
・DDは2つの数字からなり、"01"から"31"の31種類のいずれかである

上の条件を満たす場合に「Yes」／そうでなければ「No」を出力します。

・入力されるのは半角英数字と"/"のみ
・入力される文字列は20文字以内

### 発生している問題・エラーメッセージ

```
「aaaa/bb/cc」と「2018/09/21」など、文字列の場合と数字の場合の区別ができない
```

### 該当のソースコード

```Ruby
#標準入力で文字列を取得
s = gets
#取得した文字列を”/”で文字列の要素に分割
t = s.split("/")

year = t[0]
month =t[1]
day = t[2]

if t.count==3 &&    #”/”で区切られる要素数が3つの場合
    year.length ==4 && month.length == 2 && day.length ==2 &&   #要素の文字数指定
    year.to_i<=9999 && day.to_i <=12 && day.to_i <=31 #要素の最大値指定
　　#ここでabcdなどの文字列も数字に変換してしまっているので、もともとが数字なのか文字列なのか区別がつかない
    puts "Yes"
else
    puts "No"
end
```

### 試したこと
list = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
list.any?{|str| ymd.include?(str)}
元の文字列が一文字じゃないので、include?では検出できなかったです


### 補足情報（FW/ツールのバージョンなど）
使えそうなメソッドがあるか、そもそも考え方の方向性が間違っているのか、なにかヒントをいただければ幸いです。

【Ruby】splitで分割した要素の、数字と文字列の区別の仕方

### 前提・実現したいこと

hello.pyを作成して実行しています。
認証システムが必要と思いapp.pyにflask_httpauthを利用して認証させました。
認証してOKの場合hello.pyを実行する方法（呼び出し？）が分かりません。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード
```Python
コード
```
###hello.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return "Hello World!"

if __name__ == '__main__':
    app.run()
```Python
ソースコード
```

### 試したこと
```Python
コード
```
###app.py
from flask import Flask

from flask import Flask
from flask_httpauth import HTTPDigestAuth

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret key here'
auth = HTTPDigestAuth()

id_list = {
    "hoge": "hoge"
}

@auth.get_password
def get_pw(id):
    if id in id_list:
        return id_list.get(id)
    return None

@app.route('/')
@auth.login_required

def index():
    return "Hello, %s!" % auth.username()

if __name__ == '__main__':
    app.run()
### 補足情報（FW/ツールのバージョンなど）
app.pyで認証後hello.pyを実行したいです

app.pyからhello.pyを実行したい

zshの存在を知り便利そうだったのでbashからzshに切り替えたときに
```bash
/Users/xxxxx/.zshrc:9: command not found: rbenv
```
とエラー表記が表示されてしまいます。
ターミナルアプリはitermを使用していますが、
立ち上げるたびに指定するrubyのバージョンがmac初期の`2.3.7`になってしまいます。
パスの指定がおかしいのかもしれませんが、どれが正しくてどれが間違っているのかわかりません。
わかる方いらっしゃれば教えていただきますようよろしくお願いいたします(m_ _m)



###エラー内容
- `/Users/xxxxx/.zshrc:9: command not found: rbenv`のエラーが表示される
- rubyのバージョンがitermを再起動するたびにmac初期の`2.3.7`になってしまう
```bash
# (起動時 or 新規タブ読み込み時)
#=>/Users/xxxxx/.zshrc:9: command not found: rbenv

$ rbenv version
#=>2.3.8 (set by /Users/xxxxx/programs/ruby/directory-name/.ruby-version)

$ ruby -v
#=>ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

$ rbenv --version
#=>rbenv 1.1.2
```
 
###期待する動作
- itermで上記のエラーがでなくなる
- rbenvが正常に動作する

###動作環境
OS:mac(mojave)
rbenv: 1.1.2
###参考サイト
- [Macのzshでrbenvを使う - Qiita](https://qiita.com/seijikohara/items/79b479c9dd2e3b950301)
- [zshでrbenvを使うとき発生した問題点を解決したので整理した。 - Qiita](https://qiita.com/park-jh/items/deb61b956d90137d510d)


###試したこと
上記2つの設定を入れ替えて試しましたがうまく行きませんでした。

###現在の該当しそうなソースコード
```bash
# パスの確認
$ echo $PATH | tr ':' '\n'
/usr/local/bin
/usr/local/sbin
/Users/xxxxx/.rbenv/bin
/Users/xxxxx/.bin
/usr/bin
/bin
/usr/sbin
/sbin
/usr/local/opt/fzf/bin





# .zprofileの設定
$ cat .zprofile
autoload -U compinit
compinit


if [ -f ~/.zshrc ]; then
   . ~/.zshrc
fi

# my-settings
export PATH="$HOME/.bin:$PATH"
export PATH="$HOME/.bin/my-settings/bash:$PATH"

# ruby
# export PATH=/usr/local/bin:$PATH
# if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi

# node.js
export PATH=$HOME/.nodebrew/current/bin:$PATH

# python
export PYENV_ROOT=/usr/local/var/pyenv
if which pyenv > /dev/null; then eval "$(pyenv init -)"; fi

# VSCode
export PATH=/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/:$PATH

# MySQL
export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"

# yarn
#export PATH="$PATH:`yarn global bin`"







# ~/.zshrcの設定
$ cat ~/.zshrc

export PATH="$HOME/.bin:$PATH"


# rbenv
# https://github.com/rbenv/rbenv
# if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init - zsh)"

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# [zshでbrewがcommand not foundになる - 天才ブロガーごまの神的blog](https://gomasatan.hatenablog.com/entry/2018/03/18/010851)
export PATH="/usr/local/bin:/usr/local/sbin:$PATH"

# Path to your oh-my-zsh installation.
export ZSH="/Users/xxxxx/.oh-my-zsh"

source $ZSH/oh-my-zsh.sh

# User configuration

```

.zshrc: command not found: rbenv のエラーが発生する

### 前提・実現したいこと

ブラウザでiframeの中身を操作したいのですが以下のエラーが出て操作できません。
CORS(?)が問題だということが分かったのでChromeの拡張機能でポリシーを無効にしたのですがそれでも同じエラーが出ます。

Chrome拡張機能4つ:使用時は1つずつ
[Allow CORS: Access-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)
[CORS Unblock](https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino)
[Cross Domain - CORS](https://chrome.google.com/webstore/detail/cross-domain-cors/mjhpgnbimicffchbodmgfnemoghjakai)
[Moesif Origin & CORS Changer](https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc)

[Test CORS](https://webbrowsertools.com/test-cors/)のサイトで確認してポリシーが無効になっていることは確認しました。

何か他にもしなければいけないことがあるのでしょうか？

宜しくお願い致します。


### 発生している問題・エラーメッセージ

```
Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame.
    at HTMLIFrameElement.ifrm.onload (http://127.0.0.1:5500/index.html:26:48)
```
これはVSCodeのLive Serverでの実行ですがサーバーにアップしてからでも同じエラーが出ます。

### 該当のソースコード

```HTML

    <body>
        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>
        
        <script>
            var url = "https://google.co.jp"

            ifrm.src = url;
            ifrm.onload = function(){
                console.log("読み込み完了");
                const ifrm = document.getifrmentById('ifrm');
                const doc = ifrm.contentWindow.document;
                console.log(doc);
            }
        </script>
    </body>

```

### 試したこと

iframeがこの拡張機能で無効化できるXMLHttprequestで通信しているのかがわからなかったので以下のコードで明示的にXMLHttpRequestを使って実行しましたが変わりません。

```HTML


    <body>
        <iframe src="" id="ifrm" width="400" height="300" style="opacity: 0.3;"></iframe>
        
        <script>
            var url = "https://google.co.jp"

            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.responseType = "document";
            request.send("");
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {
                    
                    var ifrm = document.getelementById("ifrm");
                    ifrm.src = request.response;
                }
            }
        </script>
    </body>

```


### 補足情報（FW/ツールのバージョンなど）

Google Chrome は最新版を利用しています。
バージョン: 87.0.4280.66（Official Build） （64 ビット）


コードを実行しているときは拡張機能をONにしています。
responseTypeをtext等にするとしっかり取得出来ているのですがdocumentの形式にしてiframeのsrcに入れるとまた同じエラーが出ます。
Google.co.jpは他サイトということの例です。


### 方法を1つ思いついたので追記
こういう事が出来るかは分からないのですが、プロキシサーバを用いてヘッダを書き換えると言うのは可能でしょうか？

プロキシサーバが何たるかもよく分かっていないのですが別の問題でこういう手段もあると言うのを見たことがあるので、、、

良ければこれについて何か意見をお願い致します。

CORSポリシーを拡張機能で無効にできない。

##vscodeでもbracketでもエクスプローラーから開いてもローカルホスト上のサイトでJavaScriptで記述したコードが読み込まれません

####エラーはこのようになっています。__****__Access to internal resource at 'file:///C:/Users/User/Documents/javascript_seito/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
__****__
###原因を確かめるために参考にしたコードをそのまま実行してもJavaScriptが実行されませんでした。　　console.log('hello')のみでも実行されなかったのでコード以外の原因があるようです。　　　　先週金曜日から解決法を見いだせていませんので力- リスト---をお貸しください。
[リンク内容](https://github.com/seito-developer/js-tutorial)

```
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <div class="container">

    <div id="js-question" class="mt-3 alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>

    <div class="d-flex justify-content-center">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="ml-1 btn btn-primary">Primary</button>
      <button type="button" class="ml-1 btn btn-primary">Primary</button>
      <button type="button" class="ml-1 btn btn-primary">Primary</button>
    </div>

  </div>

  <script src="index.js"></script>

</body>

</html>
```


```javascript

let unko = 'Hello World!';


const bigUnko = 'He..Hell...Hello World!';


const inoki = ['いーち','にーい','さーん','ダーー！！'];


let index = 0;
while(index < inoki.length){ //=4
  // 繰り返したい命令
  console.log(inoki[index]);
  index++; //index = 5
}

//if / else
if(inoki.length > 5){
  console.log('ボンバイエ！');
} else {
  console.log('ボンバ...！');
}

//関数
const test = (arg) => {
  //ここに実行したい命令を書く
  if(inoki.length > arg){
    console.log('ボンバイエ！');
  } else {
    console.log('ボンバ...！');
  }
};

//オブジェクト
const unko2 = {
  color: 'pink',
  size: 'large',
  purfume: 'mint',
  goToilet: () => {
    console.log('Hello world!');
  }
};

document.getElementsByTagName('button')[0].addEventListener('click', ()=> {
  //命令を書く
  window.alert('Hello World!');
});
```

##追記
##Access to internal resource at 'file:///C:/Users/User/Documents/javascript_seito/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
となっています

javascriptファイルが動かない

### データベースから受け取ったCSVファイルのデータを「OpenStreetMap」上にマーカー付きで表示させたい

初心者の質問で分かりづらい点があるかと存じますが、ご容赦くださいませ。
OpenStreetMapとLeaflet ライブラリを使用しHTML上に地図を表示させる事まではできましたが、CSVファイル内の緯度経度情報を使い、地図上に表示する方法がわかりません。 お分かりになる方、ご教授頂けますと幸いで御座います。宜しくお願い致します。



### 地図描画に使用したソースコード

```
				<div id="map"></div>
				<script src="js/map/leaflet.js"></script>
				<script src="js/map/leaflet-heat.js"></script>
				<script src="js/map/leaflet.rotatedMarker.js"></script>
				<script src="js/map/OSMBuildings-Leaflet.js"></script>
				<script src="js/map/leaflet-hash.js"></script>
				<script src="js/map/Autolinker.min.js"></script>
				<script src="js/map/leaflet.markercluster.js"></script>
				<script src="data/listcsv.js"></script>
				<script>


				L.ImageOverlay.include({
						getBounds: function () {
								return this._bounds;
						}
				});
				var map = L.map('map', {
						zoomControl:true, maxZoom:28, minZoom:1
				}).fitBounds([[35.685721,139.313577],[35.681259,139.520944]]);
				var hash = new L.Hash(map);
				map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
				var feature_group = new L.featureGroup([]);
				var bounds_group = new L.featureGroup([]);
				var raster_group = new L.LayerGroup([]);
				var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
						attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
						maxZoom: 28
				});

				basemap0.addTo(map);

				var basemap1 = L.tileLayer('http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
						attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>,<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash;Map data: &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
						maxZoom: 18
				});

				</script>
```

### 読み込みたいCSVファイル(data.csv)

```ここに言語名を入力
id,title,address,latlon
1,テスト1,武蔵境駅,35.702243 139.550422
2,テスト2,新宿駅,35.689975 139.699081
```

### 試したこと
参考サイトを見つけ、以下のソースコードを
追加してみましたが、CSVファイルを読み込む事はできませんでした。
```
omnivore.csv('data.csv', null)
  .on('ready', function(e) {
    drawMap(e.target.toGeoJSON());
  })
  .on('error', function(e) {
    console.log(e.error[0].message);
  });

function drawMap(shows) {
  var dataLayer = L.geoJson(shows).addTo(map);
  dataLayer.on('click', function(e) {
    var properties = e.layer.feature.properties;
    L.popup()
      .setContent('<b>Venue id:</b> ' + properties.id + '<br><b> title: </b>' + properties.title + '<br><b>address: </b>' + properties.address)
      .setLatLng(e.latlng)
      .openOn(map);
  }).addTo(map);
  map.fitBounds(dataLayer.getBounds());
```

JS - leafletにてCSVファイルを読み込み地図上に表示したい

[猫の足跡](https://blog.katsubemakito.net/firebase/firestore_readwrite_1)というサイトをもとに開発をしています。
下記のコードでfirestoreのデータの読み込みができるはずですが、うまくいきません。なぜでしょうか。
```html
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
```
```js
var db = firebase.firestore();
db.collection("users").get().then((query) => {
  var buff = [];
  query.forEach((doc) => {
    var data = doc.data();
    buff.push([doc.id, data.name, data.age]);
  });
  console.log(buff);
})
.catch((error)=>{
  console.log(`データの取得に失敗しました (${error})`);
});
```
上記のコードをCodepenで試しました。Configはすべて非公開ですが、もし必要であれば開示します。