OmniAICreator/Qiita-1.07M huggingface dataset:
proxyかんでる社内環境でpip/anacondaを動かすときに注意事項。

Anacondaやpipでライブラリ追加ダウンロードがうまくいかなったので戦った。備忘。
結論からいうと

 1. Anacondaの場合　→　「.condarc」を作成してproxy設定を書く
 2. pipの場合 → pip コマンドの最後に --proxy でプロキシ情報を追記する


## Anacondaの場合
前提として私の場合、Anacondaおもてーということでminicondaで最低限をインストール 
→ 必要に応じてライブラリを追加インストールってことをしました。

### condaのインストール状況
以下ディレクトリにminicondaをインストール
```
 C:\Users\hogedahogeo\minic
```
※普通は、
```
C:\Users\[ユーザー名]\Anaconda3
```
もしくは
```
C:\Program Files\Anaconda3
```
とかがディフォルトのパスになるはず。

### minicの直下にファイル「.condarc」を作成
Anacondaのルートフォルダ(私の場合は C:\Users\hogedahogeo\minic)に
「.condarc」ファイルを作成する。
windowsで新規ファイル作成しようとすると、「.」が先頭で言い訳ねーだろが。と拒否されるので、 一旦
-  「hoge.txt」とかで新規ファイル作成
- コマンドプロンプトから　rename作業（以下のコマンドを実行）
 「ren hoge.txt .condarc」 

### proxy設定を追加
 .condarc 内に以下を書けばOK

```python
proxy_servers:
    http: http://[プロキシアドレス]:[ポート番号]
    https: https://[プロキシアドレス]:[ポート番号]
    ex)http://hogedahogeo:666@TheOmen.jp:8080
```
わたしはここで、焦ってインデントをきちんとズラさずに書いたらエラーでました。（恥）
pythonのファイルであることをお忘れなく。と自戒。

### proxyが反映されているか確認
以下コマンドで、これで設定が反映されたか確認できる。うつべし。
```
conda config --show
```

## pip実行時
社内環境でネットワークアクセスにはプロキシが噛んでいる場合。これに対する対応。

pip実行時には、　--proxy [サーバ] を書くべし。

```python
pip install beautifulsoup4 --proxy http://ID:PASS@[サーバ]:8080
```

参考URL
https://qiita.com/mishan88/items/2f9e1c5e9e2572ba8a36
RailsでCORSについて学ぶ_100DaysOfCodeチャレンジ9日目(Day_9:#100DaysOfCode)

## はじめに

この記事はTwitterで人気のハッシュタグ`#100DaysOfCode`をつけて、
100日間プログラミング学習を続けるチャレンジに挑戦した9日目の記録です。

## 動作環境

* ruby 2.4.1
* Rails 5.0.1

## 現在学習している内容のリポジトリ

https://github.com/yuta-ushijima/notebook-api-on-rails

## 本日学んだこと

* CORSの概要
* config/initializers/cors.rbの設定


## CORSとは？

Cross Origin Resource Sharing(クロスオリジンリソースシェアリング)の略。オリジンというのは、スキーマ・リソース・ポートを組み合わせてできているURLのこと。

例えば、`https://www.yuta-u.com`というURLがあった場合、次のような構成でオリジンが構成されていることになります。

* `https`...スキーマ
* `www.yuta-u.com`...リソース
* `443`...ポート(HTTPSのポートはデフォルトで443)

そのオリジンをクロスしてリソースをシェアリングする、つまり違うオリジン(URL)からのアクセスがあってもデータを取得できるようにすることです。(逆に言えれば、許可していないオリジンからのアクセスは遮断することになります)

通常は同じオリジン(URL)からでなければデータの取得はできませんが、CORSを設定していればオリジンが違ってもGETやPOSTなどのHTTPメソッドを使ってデータを取得したり作成できるようになるということですね。

## 使いどころ

フロントエンドとバックエンドでドメインが異なる場合は、設定の必要があり。例えば、ReactでSPAを作ってAPIサーバーをRailsで立てている場合、それぞれが違うURLだとCORSを設定しないとデータの取得ができない。

## RailsでCORSの設定をする

Railsを新規作成した際に、GemfileにはいくつかのコメントアウトされたGemがあると思います。

今回使用する`rack-cors`もデフォルトでコメントアウトされているGemなので、これを外します。

`gem 'rack-cors'`のコメントアウトを外した後に`bundle install`すると、自動的に`config/initializers/cors.rb`が作成されるのでファイルを開きましょう、。

```
# デフォルトの状態

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

# Rails.application.config.middleware.insert_before 0, Rack::Cors do
#   allow do
#     origins '*'

#     resource '*',
#       headers: :any,
#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
#   end
# end

```

以下コードのコメントアウトを外します。

```
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'example.com'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
```

その後、`bundle exec rails s`でサーバーを立ち上げてましょう。

なお、すでにRails serverが立ち上がっていた場合には一度再起動する必要がありますので注意。

## テストサイトでCORSの実験

手軽にCORSを試せるサイト、Rest test test...にアクセスして実験してみます。

https://resttesttest.com/


まずは`config/initialisers/cors.rb`のoriginsの部分をアスタリスクに変更し、全てのoriginsからアクセスを許可します。

```
# config/initialisers/cors.rb
(中略)
- origins 'example.com'
+ origins '*' 
(中略)
```
対象のURLを貼り付けてAJAXのボタンを押すと、HTTP 200で取得に成功しているのがわかるかと思います。

![cors-001.png](https://qiita-image-store.s3.amazonaws.com/0/195539/5212ccb6-8ddd-c044-d8f7-003ecd487496.png)


## 参考サイト

https://qiita.com/IzumiSy/items/c10949e9a00d1c61613c

https://github.com/cyu/rack-cors

https://dev.classmethod.jp/cloud/cors-cross-origin-resource-sharing-cross-domain/

https://til.hashrocket.com/posts/4d7f12b213-rails-5-api-and-cors
JavaScript学習記録４　2018年6月25日分

使用図書
『ここからはじめるJavaScript入門』（井上久夫　2002年1月25日発行）

７章だ！残り……見落としてた、２章だ。ぱぱっと身につけて掲示板作ってみたいね！
「メニュー画面を使ってページを移動しよう」
とのことだ。webページ作るならメニューの１つや２つは無いとね。
メニューはformに属しているからFORMタグを使ってSELECTタグとOPTIONで選択肢を作成、OPTIONタグで表示するほにゃららを指定って感じだな。
おなじみのif文で分岐させればあっという間に個別の命令が出せるって寸法よ。

```js 
<FORM name="goMenu">
<SELECT name= "select" onChange="if (selectedIndex == 1) {alert('メニュー１へと至る')};
  if (selectedIndex == 2) {alert('メニュー2へと至る')};
  if (selectedIndex == 3) {alert('メニュー3へと至る')}">
<OPTION>選択せよ</OPTION>
<OPTION>menu1</OPTION>
<OPTION>menu2</OPTION>
<OPTION>menu3</OPTION>
```
項目を作ると勝手に0.1.2.3……と番号が振られていくというのも見過ごせないポイントかな。０作るの忘れてアレェ？ってなりそう。俺なら絶対やるね。
　
続けて別ページに移動するには？と行く。

```js 
<SELECT name= "select" onChange="if (selectedIndex == 1) {location.href='moved1.html'};<SELECT name= "select" 
```
今までやったやつを組み合わせただけっぽいな。href先生には頭が上がりませんで。
そしてフレームを使うと画面の左だけとか、指定した場所の切り替えができるみたいだ。先日やったparent.mainを使う。FRAMESETファイルを作って場所指定ってところか。
これで気の利いた機能が作れるって寸法よ。やったね親分！
JavaScriptでページタイトルとURLを取得（permissions "tabs"）

#はじめに
JavascriptでページのタイトルとURLを取得するのに、content_scriptsとbackground.js でやり取りをしたらよいと思っていたわけですが、メニュータブの browser.contextMenus.onClicked.addListener((info, tab) .. の tab があるのを気付きかき方を変えてみることにしました。

# manifest.json - "permissions": ["tabs"]
tabの変数に何が入ってるのかをデバッガーで確認してみました。初めに調べた時には title や url は見つからなかったのですが、permissionが足りないだけと分かり manifest.json を変更して調べなおしました。

```json:manifest.json
{
	"manifest_version": 2,
	"name": "Sample Tool",
	"description": "Sample Tool for Firefox",
	"version": "1.0",
	"homepage_url": "https://sample.com",
	"icons": {
		"48": "icons/sample.png"
	},
	"applications": {
		"gecko": {
			"id": "sample@sample.com",
			"strict_min_version": "42.0", 
			"update_url":"https://sample.com/"
		}
	},
	"background": {
		"scripts": [
			"background.js"
		]
	},
	"options_ui": {
    	"page": "options.html"
    },
	"permissions": [
		"contextMenus",
		"storage",
		"tabs",
		"http://*/*"
	],
	"content_scripts": [
		{
			"matches": [
				"https://*/*",
				"http://*/*"
			],
			"js": [
				"sample.js"
			]
		}
	]
}
```

すると、title や url が見つかります。ここを使うと苦労しないでデータがとれそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/262366/acfac33e-53ef-9b64-4352-889bf99436ff.png)

#runtime.Port とタブ切り替え

せっかくなので、Portを使った方法も試してみます。TCPIPのPortみたいに、タブ毎に区別できるようなので、送信先のタブを切り替えて postMessageをして応答を待つことにします。

* 接続した port を tab.id で区別
* メニュー選択時の tab.idをもとに、postMessage先を切り替え
* 更新データは onClickedではなくて、onMessage で取得できてる。

```javascript:background.js
browser.contextMenus.create({
	id: "copyUrlForQiita",
	title: "copy url for qiita",
	contexts: ["all"]
});

var ports = []
var urlForQiita
function connected(p) {
	ports[p.sender.tab.id] = p
	ports[p.sender.tab.id].onMessage.addListener(function(m) {
	    urlForQiita = m.title;
    	    console.log("onMessage.addListener:" + urlForQiita);
	});
}
browser.runtime.onConnect.addListener(connected);

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "copyUrlForQiita") {
    	ports[tab.id].postMessage({action: "copyUrlForQiita"});
    	console.log("onClicked.addListener:" + urlForQiita);
    	//var urlForQiita = "[" + tab.title + "](" + tab.url + ")"
    } 
});
```

```javascript:sample.js(content_scripts)
console.log("sample.js is loaded");
var myPort = browser.runtime.connect({name:"port-from-sample"});
myPort.onMessage.addListener(function(m) {
	var urlForQiita = "[" + document.title + "](" + document.URL + ")"
	myPort.postMessage({title: urlForQiita});
});
```

気を付けるのは、クリックしたときではなくて、応答があったタイミングで取れてるいうことになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/262366/07cea002-8d70-a914-940a-64fcac096433.png)

#参考
[tabs - Mozilla | MDN](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs)
[runtime.Port - Mozilla | MDN](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/Port)