常連

回答者

拍手喝采

自己紹介

```HTML
<div>
    <section>
        <span style="color:#f90">文字列</span><br>
        <span style="color:#f90">文字列</span><br>
        <span style="color:#f90">文字列</span><br>
        #ハッシュタグ
        #ハッシュタグ #ハッシュTAG＃hashタグ<span style="color:#f90">文字列</span>
        #ハッシュタグ
        <a href="http://example.jp/#top">#ハッシュタグ
    </section>
</div>
```
（HTMLは簡略化した例であり、実際はもっと入り組んでいます）

```jQuery
const replaced = $('div').html().replace(/(?!(:#...">))([#＃].+)([\s<]+)/g, "");
$('div').html( replaced );
```
（ひとまず簡略化のため単純に消去　実際はaタグで囲うなどしたい）

というようなイメージで、カラーコード部分（およびリンクのURL部分）以外の「#で始まる文字列」を置換したいのですが
どうもカラーコード部分も置換されてしまいます

（自分の作った文書ではなく依頼されたものであるため、色をrgb(255,…)に書き換えたりcssで色をつけたりはできません）

先にカラーコード部分を
```jQuery
const replaced = $('div').html().replace(/color:#/g, "color:");
$('div').html( replaced );
```
と置換して"color:f90"という形式にしておき、後で戻す（リンクのURLも同様に）　…という方法は思い浮かびますが
もしかして、そうするしかないでしょうか？

「:の後でない文字列」を探す正規表現 (JS)

プログラミング初心者です。

例えば以下サイト
[https://matome.naver.jp/odai/2154332491260545501](https://matome.naver.jp/odai/2154332491260545501)   の
<a href="/profile/gudachan" >・・・　　　(記事投稿者の名前の部分)

は、クリックするとリンク先でURLがprofile→mymatomeになります。
これはどのような仕組みで行われているのですか？

また現在scrapyを用いてクローラを作成しているのですが、このようなリンクは
aタグで取得するURL(profileのほう)とresponseから得るURL(mymatomeに変わった後)で、
値が変わってしまってうまく扱えません。

ご教授よろしくお願いします。

リンク先でURLが変化するページのクロールについて

###■前提
Macにプリインストールされている古いバージョンのGitやPythonではなく、現行版を使用するためホームディレクトリの.bash_profileファイルにてパスを通しています。（以下参照）

###■質問
Q1) 毎回、ターミナルやコンピュータ本体を起動する度にsource ~/.bash_profileしないと、内容が適用されません。原因のヒントをいただけますでしょうか？

Q2) 私のパス記述法はググってコピペしただけですので、書式に統一感がありません。特にダブルクオーテーション、波括弧の有無、変数など（以下参照）。ベストプラクティスや流行、傾向みたいなものってあるのでしょうか？

```Terminal
~ $ git --version
git version 1.9.3 (Apple Git-50)
~ $ source ~/.bash_profile
~ $ git --version
git version 2.19.1
```

```DotBashProfile
export PATH="$HOME/.pyenv/shims:$PATH"
export PATH=/usr/local/Cellar/git/2.19.1/bin:$PATH
PATH="/Library/Frameworks/Python.framework/Versions/3.7/bin:${PATH}"
export PATH
```

PATHを通した後にターミナルを再起動すると、PATHが通っていない

"あかあかあかあかなあかなまやははまや"
という文字列があるとします。
"あか"、"あかあか"、"かあ"、"あかな"、"は"
の5つが2回以上連続繰り返されています。
何が繰り返されてるかを正規表現を用いて調べられないでしょうか？
↓で一応調べられてますが、正規表現を用いて調べたいです。

```javascript
const text="あかあかあかあかなあかなまやははまや";
const box=[];
let k=0;
function textLength(i){
	for(let n=0;n<=text.length-i;n++){
		if(text.substring(n,n+i)===text.substring(n+i,n+i*2)){
			box[k++]=text.substring(n,n+i);
		}else{
			continue;
		}
	}return box;
}
for(let m=1;m<=text.length/2;m++){
	textLength(m);
}
console.log(box);
```

繰り返されている文字を取得

下のページを参考にDB接続するクラスを作成したのですが、クラスを使わず接続していた時に比べると、読み込みにとても時間がかかるようになってしまいました。**(87ms→1.08s)**

アドバイス、参考になるページなど教えて頂けませんでしょうか？よろしくお願いします。

モデルの作り込み
[http://www.objective-php.net/mvc/model_ex](http://www.objective-php.net/mvc/model_ex)

## コード
![イメージ説明](8038d1dbaf9c82f531b7149440c8e583.png)

### Base.php
```PHP
<?php

class Base
{
  private static $connectInfo;
  public $dbh;
  protected $name;

  public function __construct() {
    $this->dbConnect();
  }

  public function dbConnect() {
    $dsn = sprintf(
      'mysql:host=%s;dbname=%s;port=3306',
      self::$connectInfo['host'],
      self::$connectInfo['dbname']
    );
    $this->dbh = new PDO($dsn, self::$connectInfo['dbuser'], self::$connectInfo['password']);
    $this->dbh->query('SET NAMES utf8');
  }

  public static function setConnectInfo($connectInfo) {
    self::$connectInfo = $connectInfo;
  }
}
```

### DB接続

```php
<?php

require_once('../Base.php');

$connectInfo = array(
  'host' => 'localhost',
  'dbname' => 'db',
  'dbuser' => 'root',
  'password' => 'root'
);

Base::setConnectInfo($connectInfo);

$base = new Base();

$dbh = $base->dbh;
```

## 以前のコード

![イメージ説明](1e9f5bd650bdc7c41f30640cee15143a.png)

```PHP
function dbconnect() {

  $dsn = 'mysql:dbname=db;host=localhost';
  $user = 'root';
  $password = 'root';
  
  try {
    $dbh = new PDO($dsn, $user, $password,array(PDO::ATTR_PERSISTENT => TRUE ));
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $dbh->exec('SET NAMES utf8');
  } catch (PDOException $e) {
    die("データベース接続エラーです。：{$e->getMessage()}");
  }

  return $dbh;
}
```

DB接続クラスを作ったところ速度が遅い

Laravel5.6
mysql  Ver 15.1 Distrib 5.5.56-MariaDB　(本番環境)
mysql  Ver 14.14 Distrib 5.7.22,　（開発環境）

でアプリケーションを制作しています。


DBに個人を特定する値が入っています。ぶっちゃけると MACAddressなのですが
毎回、500件程にwhereで絞り込んだ後に、およそ100件程のMACAddressの付き合わせ検索を連続で頻繁に行う必要があります。
具体的には外部からhttpsでPOSTされて来る100件程の生のMACAddressの値と、DBの値を比較する処理をしています。

これまでDBにはMACAddressが生データで入力されており、完全一致で検索をかけていましたが、
これをhash化して管理したいと考えています。

そこで検索性が高く、いざというとき（DBデータ盗まれた等）複号化されにくい暗号化の方法としてどのようなものを使うのがふさわしいでしょうか？

まとめると以下の様な条件になります。

・DB検索に時間がかからなければ良い。
・システムとして値の複号化は必須要件ではない。（つまりopenSSL等で複号化をしないでも良い）
・DBの方では一意性が保証できる値となっていれば良い。
・DBの情報が漏洩した際、復元されにくいものが良い。
・md5,sha1 は計算力を使えば複号されるので不採用。
・Laravelファサードの Hash:check() はかなりの処理時間がかかるので不採用。


また、このような要求にこたえられるような暗号化の記述がされたサイト等あれば、
それのみでもご紹介いただけると幸いです。

DB検索性の高い暗号化処理について（復号化の必要なし）

いつもお世話になっております。
Google Maps APIにて外部jsonファイルを読み込みマーカーを表示させております。
マーカーが日本各地に散らばっているため、検索フォームを設置し地名から座標を取得しそのエリアのマーカーが閲覧しやすいようにしております。

これを、検索値をJSONの住所とし、マーカーが立っている場所のみの座標を取得したく思っています。
trueならその座標へ、falseなら移動しない or 初期表示の座標へ

現在のソースをどのように変更すれば良いのかというところから困っており、検索をしても参考となるページにたどり着けません。

お力添えをいただけますと幸いです。

JavaScript
```ここに言語を入力
var place = '東京';
var infowindow = new google.maps.InfoWindow();
var markers;
var map;
//マップのスタイルシート ★2
var styles = 省略

/* =================================
検索ボタンの挙動
==================================*/
$(function () {
	$('#searchButton').click(function (e) {
		e.preventDefault();
		place = $('#searchPlace').val();
		google.maps.event.addDomListener(window, 'load', initialize());
	});
});

/* =================================
マップ 基本設定
==================================*/
function initialize(place, z) {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({
		'address': place
	}, function (result, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			var latlng = result[0].geometry.location;
			var mapOption = {
				zoom: 12,
				zoomControl: true,
				mapTypeControl: false,
				center: latlng,
				streetViewControl: false,
				scrollwheel: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				styles: styles,
			};
			map = new google.maps.Map(document.getElementById('map'), mapOption);
			$(function () {
				var data = new Array();
				markers = [];
				$.getJSON("JSON.json", function (data) {
					$.each(data, function (i, obj) {
							var content = 'infowindowの内容';
						myMarker = new google.maps.Marker({
							position: new google.maps.LatLng(obj.map_latitude, obj.map_longitude),
							map: map,
							icon: {
								url: "icon.png",
							}
						});
						attachMessage(myMarker, content);
					});
					markerCluster = new MarkerClusterer(map, markers, {
						imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
						zoomOnClick: true,
						maxZoom: 15,
						gridSize: 20
					});
				});
			});
		} else {
			alert('取得できませんでした…');
		}
	});
}
	
google.maps.event.addDomListener(window, 'load', initialize(place));

function attachMessage(marker, content) {
	google.maps.event.addListener(marker, 'click', function () {
		new google.maps.Geocoder().geocode({
			latLng: marker.getPosition()
		}, function (result, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				infowindow.setContent(content);
				infowindow.open(marker.getMap(), marker);
			}
		});
	});
	markers.push(marker);
}
```


HTML
```ここに言語を入力
<div class="searchbox">
	<form method="search" action="./index.html">
		<div class="formarea">
		<input type="text" name="sp" id="searchPlace" placeholder="検索" >
		<input type="submit" name="regist" value="検索" id="searchButton">
		</div>
	</form>
</div>
<div id="map"></div>

```

よろしくお願いいたします。

Google Maps API マーカーを検索できるようにしたい

### 前提・実現したいこと
HTML,JS,Jquery,CSSで英語の発音矯正をするシステムを作成しているのですが、Jqueryで単語をランダムで表示していて、そのうえでその単語の波形をWavesurfer.jsで表示しているのですがランダムで表示されている単語とその波形をつなげてランダムで表示された単語の波形を表示させる。
### 発生している問題・エラーメッセージ
今、作成しているものであると単語はランダムで表示できているのですが併せて波形もその単語に合わせたランダム表示ができてないです。

### 該当のソースコード

```HTML
<!DOCTYPE html>
<html>
<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<title>英語発音矯正</title>
<meta name="Description" content="英語発音矯正に向けたWebサイト" />
<meta name="Keywords" content="英語,発音,Webサイト,HTML,発音矯正,英語発音" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("jquery","1.7");</script>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>


  <h2>英語発音矯正に向けたWebサイト</h2>
<div id="center">
  <div id="wrapper">
    <p>ランダムで単語を表示</p><br>


      <div id="random">
      <div><p><span class="red">サイ</span>トスィーイング</p><p>S<span class="red">igh</span>tsheeing</p><p>観光</p><p>sáitsìːiŋ</p><audio src="voice/sightseeing.mp3" controls alt=""></div>
      <div><p><span class="red">エア</span>ポート</p><p><span class="red">Air</span>port</p><p>空港</p><p> éəpɔ`ːt</p><audio src="voice/airport.mp3" controls alt="何か"></div>
      <div><p>アカモ<span class="red">デイ</span>ション</p><p>Accommo<span class="red">da</span>tion</p><p>宿泊施設</p><p>əkɑ`mədéiʃən</p><audio src="voice/accommodation.mp3" controls alt="何か"></div>
      <div><p>ディ<span class="red">レ</span>クション</p><p>Di<span class="red">re</span>ction</p><p>方向、方角</p><p>dirékʃən</p><audio src="voice/direction.mp3" controls alt="何か"></div>
      </div>
  </div>
    <br>


      <script type="text/javascript">
      $(function(){
        var arr = [];
        // randomの中にある要素を、push()で要素の中身を配列に追加します。
        $("#random div").each(function(){
          arr.push($(this).html());
        });
　　　　 //sort()とMath.random()を使ってランダムに並び替えます。
        arr.sort(function(){
          return Math.random() - Math.random();
        });
        // 並び替えた後は、randomの中身を空にする。
        $("#random").empty();
        //arrに入ってる配列の数だけループさせる。
        for(i=0; i< 1; i++){
          // append()を使って、randomの中に一つ一つ追加していく。
          $("#random").append('<div>' + arr[i] +'</div>');
        }
      });
      </script>
    </div>


      <form>
        <input type="button" class="btn_btn" value="更新" onclick="koshin()">
      </form>
      <p>更新ボタンを押して様々な単語を発音して正しい発音を身に付けましょう</p>
      <br>
<script>
function koshin(){
  location.reload();
}
</script>

<br><br><h4>正しい音声の波形です</h4>


<div id="waveform"></div>
<div class="controls">
           <button class="btn btn-primary" onclick="wavesurfer.playPause()">
               <i class="glyphicon glyphicon-play"></i>
               Play
               /
               <i class="glyphicon glyphicon-pause"></i>
               Pause
           </button>
       </div>

<script language="JavaScript">
var wavesurfer = WaveSurfer.create({
  barWidth: '1',
  audioRate: '0.6',
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple',
  height: '50'
});
wavesurfer.load('airport.mp3');
</script>

</body>
</html>

```

### 試したこと

wavesurfer.load('airport.mp3') の部分をランダムで表示された英単語の音声データにしたくif文など使おうとしたがよくわからず…　単語に合わせてここの部分を変えようとしてもできなかった。

### 補足情報（FW/ツールのバージョンなど）
wavesurfer.js についてのURLを貼っておきます.
https://wavesurfer-js.org/

ランダムで表示する単語に合わせて波形もランダム表示

以下のようなコードで、別サーバーに画像を保存する仕組みを作りました。
非SSLの送信であれば問題なくデータを送ることが出来るのですが、
httpsから始まるURLでは送信が失敗します。

```
使用言語：php

$boundary = '-------------------'.microtime(true);
            $url = 'https://●●●/receive.php'; ←httpsのアドレスの場合、通信失敗
            $headers = [
              'Accept-language: ja',
              'Cookie: hash=12345abcde',
              'Content-Type: multipart/form-data; boundary='.$boundary
            ];
            $content = '--'.$boundary."\r\n".
                'Content-Disposition: form-data; name="userfile"; filename="'.basename($filename).'"'."\r\n".
                'Content-Type: text/plain'."\r\n\r\n".
                file_get_contents($filename)."\r\n".
                '--'.$boundary.'--'."\r\n";
                $opts['http'] = [
                  'method' => 'POST',
                  'header' => implode("\r\n", $headers),
                  'content' => $content,
                ];
                $context = stream_context_create($opts);
                file_get_contents($url, false, $context);
```

送信の際に生じるエラーコードは以下です。
file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed

ssl認証に失敗しているであろうことはエラーコードから理解できるのですが、
ではどのようにコードを記述すればよいのか、ということが分かりません。

いくらか調べてみたのですが良い方法が見つからなかったもので、
ご教示頂けますと幸いです。

※使用環境
PHP 7.1.2

別サーバーにSSL通信でPOSTデータを送るには？

ajaxでの通信でhtmlソースがそのまま戻り値として得られる状態なんですが
これを使ってsubmitのように画面全体を更新したいです。

document.write()で強引に書き換えてみましたがjavascriptのイベントが動かなくなります。
※一部書き換えであればjQueryのONで対応可能ですが、今回はjavascript部もまとめて
全体の書き換えの為か上手く行きませんでした。

ajax()で受けた値をコールバックで制御するのではなくそのままブラウザがレンダリングしてくれるのが理想なのですが、
そのような方法もしくはより有用な方法がありましたら教えて下さい。
よろしくお願い致します。

ajaxの戻り値で画面全体を書き換えたい

# どういうことか
通常、制限を掛けたいディレクトリ直下に `.htaccess` と `.htpasswd` を用意し、BASIC認証を行いますよね。
この場合、ブラウザで該当のURLにアクセスすれば、

1.ブラウザが用意するダイアログが出てきてID/PWを入力し送信する
2.問題なく認証すれば、そのディレクトリ以下の全てのファイルにアクセスができる
3.認証しなければ、そのディレクトリ以下の全てのファイルにアクセスできない

という流れになるかと思いますが、この 1. のところをHTMLの `<form>` タグを使用したID/PWの入力にし、実際の認証はPHPで行いたいという要件になります。
ただしこの時、2. や 3. は上記の通りにしたいのです。普通にPHPでセッションとか使った認証にしてしまうと、その該当ディレクトリに入っている画像やPDFファイルに直接リンクできてしまう問題があります。（HTMLやPHPのページコンテンツは、冒頭にセッション認証のコードを入れることはできます）

つまり、機能的にはBASIC認証なんですが、入力と認証は `<form>` タグとPHPで構成したいのです。
BASIC認証なんてhttpヘッダーのやりとりなんだからなんとかなるだろーと思っていろいろ調べてたところ・・・。

# いろいろ調べたけどわからない...
いろいろ調べたのですが、`WWW-Authenticate` ヘッダーを出力するとか、`$_SERVER['PHP_AUTH_USER']` に入力したIDが入ってくるだとか、**BASIC認証のウィンドウを出すための方法**ばかりがヒットするもので、心が萎えています。。。
以下のサイトにあるように、認証後はブラウザ側が自動的にID/PWを送出してくれる必要があるかと思うので、無理っぽい感じがプンプンしてるんですが、なにか方法があるんでしょうか。

[Basic認証とフォームによる認証についてのまとめ](https://qiita.com/toshiya/items/e7dcc7610b15884b167e)
> 3. 一度ログインが確立した後はブラウザが前回入力されたユーザID・パスワードを覚えていて、自動でHTTPのAuthorizationヘッダにユーザIDとパスワードを埋め込んで送信する.

お心あたりのある方がいらっしゃいましたら、是非ご教授のほどよろしくお願いいたします！
m(_ _)m

自作のフォームでBASIC認証はできますか？

###前提・実現したいこと
こちらのページのように、ロード完了時に上下に開きたいのですが、どのように書けばよろしいでしょうか？
[http://www.mitsubishi-motors.co.jp/active_gear/](http://www.mitsubishi-motors.co.jp/active_gear/)

###試したこと
たとえばロード完了時boxを上下に開いて「Hello!」を表示させてみようと考えたのですが、下記ではクラスの付与も起こらず、出来たのはロードの最中のバーのアニメーションだけという状態です。→[https://jsfiddle.net/pq9sca4e/](https://jsfiddle.net/pq9sca4e/)

```html
<section>
  <h1>Hello!</h1>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div> 
  </div>
</section>

<script>
//Load完了時にクラス付与
$(window).load(function () {
  $(".box1, .box2").addClass("loaded");
  $("h1").fadeIn();
});
</script>
```
###補足情報（FW/ツールのバージョンなど）
ロード時のバーのアニメーション
[http://github.hubspot.com/pace/docs/welcome/](http://github.hubspot.com/pace/docs/welcome/)