常連

回答者

ベストアンサー

拍手喝采

情報収集家

自己紹介

### 現象の詳細

昨今の事情に鑑み、内部専用サイトについて、外部からWAF経由でアクセスできるようにしました。ただ、そのまま無条件アクセスできるのはよろしくないので、関係者だけがアクセスできるようWAFでBasic認証をかけるようにしました。

アクセスは下記の流れで通信していきます。

1. WAF (Apache HTTP Server + ModSecurity2)
2. ロードバランサー (nginx)
3. Webサーバー (nginx)
4. アプリケーションサーバー (puma + 自作Webアプリ)

※ 3.と4.は一つのサーバーに同居して、サーバー自体は冗長化している。1.と2.はそれぞれ別サーバーでホットスタンバイの二重化。全てオンプレ。

WAFの所で`AuthType Basic`等を設定して、普通のBasic認証を行っています。内部からは2.のロードバランサーに直接アクセスできるため、Basic認証はかかりません。

ほとんどの場合はうまくいくのですが、次のOSとブラウザでのみ、何度もBasic認証が聞かれます。

* iOS Safari
* iOS Crome
* iPadOS Safari
* iPadOS Chrome
* macOS Safari

次のOSとブラウザはBasic認証は一回のみです。

* Windows10 Edge/Chrome/Firfox
* macOS Chrome
* iOS Edge

同じ仕組みがもう一つ(対象のWeb画面はアプライアンス製品の組み込み)あるのですが、そちらは、駄目なSafariとかでも一回のみです。なぜかSafariだけ聞かれて、なぜか該当のWebアプリだけが発生する謎な現象が発生しました。

### Webアプリの詳細

WebアプリはRuby制でHanamiフレームワークを使用した自家製の物です。少し他のWebアプリと変わったところと言えば`<script type="module" src="...">`を使っていることぐらいです。複数のJavaScriptをモジュールベースで遅延読み込みし、その中でも`import`文でJavaScriptの読み込みをいくつか行っています。

### 動作の検証と推測

Basic認証は、一回成功すれば、それ以降の通信は毎回`Authorization`ヘッダがついて、自動的に認証してくれるはずです。しかし、SafariではモジュールベースのJavaScript読み込みにバグがあり、`Authorization`ヘッダを付けてくれないのでは無いかと推測しました。

実際に、macOSのSafariで検証したところ、モジュールベースのJavaScript読み込みについて、`Authorization`ヘッダを付けずにアクセスしようとしているようでした。もう一回認証を通すと、その時読み込もうとしたJavaScriptは正常に読み込みますが、そのJavaScript内の`import`文でのJavaScript読み込みについては`Authorization`ヘッダを付けてくれず、またまた再度認証が聞かれる状態でした。つまり、`import`文のネストの数だけBasic認証が聞かれてしまうと言う状況です。

なお、これはSafariのみで発生しています。iOS/iPadOSのChromeでも起きるのは、内部でSafariのエンジンを用いているか、内部エンジンが古いからと言う可能性が考えられます。

### Safariなんとかしたい

現在、iPhoneからアクセスしたいという要望があり、可能であれば対応したいと考えています。現象を回避する何かいい方法はありませんでしょうか？

Webアプリ本体は触らずに、WAFの部分を変えるだけでいけるのがベストです。

JavaScriptだけBasci認証を外すというのも考えられますが、本来は内部アクセス限定のサイトであるため、内部情報が含まれないはずのJavaScriptであっても、何も制限せずに外から見える形にしたくはありません。(その後の状況の追記にあるとおり、この方法で回避できることは確認しています)

なお、WebアプリでモジュールベースのJavaScriptを普通の読み込みに変えるというのは、webpackとかで`import`文をなくしていく仕組みを入れる所から始める必要があるため、工数的にちょっとすぐに対応できるものではありません。ひとまず、その方法は無しでお願いします。

### その他の情報

* ModSecurity2の設定はrecommendedを使用し、細かいカスタマイズはありません。
* 通信はHTTPS化されています。
* Basic認証がない内部からの場合は、Safariであっても正常にアクセスでき、Webアプリを利用できます。

### その後の状況(2020年7月11日追記)

しばらく回答もなく、良い解決策が見つからないため、JavaScriptが含まれるassets周りのみBasic認証から外すことで現在は回避できています。assetsにあるファイルは静的なコンテンツのみであり、第三者に閲覧されても問題ないという判断です。

ただ、やはり、妥協していることには変わりありません。引き続き、良い方法がないか、回答を募集します。

Safari等だけBasic認証が何度も聞かれる

[https://www.nintendo.co.jp/](https://www.nintendo.co.jp/)
任天堂の公式ホームページのマークアップについて質問です。
このサイトに見出しで使用する`hタグ`が1つも使用されていないのは、何故でしょうか。
また、ヘッダーでリストが横並びになっているレイアウトは、通常`navタグ` が使用されることが多いですが、`navタグ`が使われていないのも何か理由があるからなのでしょうか。

`navタグ`の使用に限って大手企業のサイトを比較してみると、

navタグ使用
    - Google
    - Apple
    - マイクロソフト

navタグ未使用
    - 任天堂
    - Sony
    - Amazon

となるのですが、何かしらのルールにより、使用を制限しているのでしょうか。
勿論マークアップの解釈は人それぞれ違いますし、絶対的な正解がないのも理解しているつもりなのですが、何か特別な意図やルールの上にやっているのであれば、教えて頂ければ幸いです。

（やたら滅多に外部サイトのリンクを貼ると運営にスパム扱いされそうなのでリンクは付けていませんが、Google除きトップページを参考にしています。すみません。。）

任天堂のHPにhタグが使用されていないのは何故でしょうか。

先日からIT系のベンチャー企業でアルバイトをさせてもらっており、途中からプロジェクトに参加しました。上の人からは「まずはじめにモデルのアソシエーションを確認してみよう」的なことを指示されたためmodel内のコードを眺めてER図を書いたりしてアソシエーションを確認しているのですが、情報量が多すぎて整理が難しいです。コツなどがあれば教えていただきたいです

途中から参加したプロジェクトのモデルを把握するコツ

ウェブアクセシビリティを考慮したwebサイトの作成をしています。

「白」「黒」「青」などのボタンをクリックすると
背景色を変更するようにしたいのですが、どういう実装が良いのでしょうか？
ボタンをクリックした際のjavascriptの作成と、
htmlタグへの背景色の変更だけで良いのでしょうか？

今のところはhtml全体の背景色と、
背景色が変わるとテキストボックスやドロップダウンリストなどの背景色も
変更されるようにしていきたいと考えています。

その他に考慮すべき点などがありましたらアドバイスをいただきたいと思っています。
よろしくお願いいたします。

---

追記
記載の情報が少なくてすみません。
webサイトを使用する方複数人に意見を伺ったところ、背景色が変わる方が見やすいとの意見をいただいたため背景色の変更ができるようにと考えました。
それを前提に背景色が変更できるような仕組みの作り方を教わりたかったための質問でした。
そして、追加の質問として、ウェブアクセシビリティを考える場合に実装した方が望ましい機能などを教えていただきたく、質問をさせていただきました。

質問を簡潔に記載すると、

1.ボタンをクリックしてhtmlやテキストボックスの背景色を変更する際の実装方法を知りたい。
2.ウェブアクセシビリティを考慮した際に実装すべき機能として何があるか知りたい。

でした。

---

追記
皆さま回答ありがとうございます。
2.ウェブアクセシビリティを考慮した際に実装すべき機能として何があるか知りたい。
につきましては色々な意見をいただきましたので
回答をもとに勉強をして自分で理解をしていきたいと思います。

1.ボタンをクリックしてhtmlやテキストボックスの背景色を変更する際の実装方法を知りたい。
の件でアドバイスをいただければと思います。

引き続きよろしくお願いいたします。

ウェブアクセシビリティを考慮したwebサイトの作成をしたい

定期的に出る質問なのは承知していますが、お客様から聞かれてどう答えるべきか、どう対応を取るべきか皆さんの意見を聞きたく思います。

数年前に作成したあるサイトでデザイン重視のため（というかクライアントの強い要望により）、どうしてもこのフォントが良いと言う事で文字を画像にしてあります。
さすがに文字無しはまずいだろうという事でその時の担当と話してdivにdisplay:noneをして画像に入っている文章を文字化して入れてありました。
altでなくdivにdisplay:noneをしたのは文章量が結構あった為、その時に調べた限りではaltに長い文章を入れると認識されない様な意見が見受けられたためです。
マウスがホバーした際に長い文章がポップアップするのがみっともないという意見もありました。

最近になってどうやらそのクライアントに別の制作会社から営業電話みたいな物があり、
「知っててやってるかどうかは知らないがGoogle的には違法だ。うちで無料で修正するからやらせろ」
的な話だったという事です。

元々この対策自体、担当と話したとは言え、こちらとしても良い対策と思っていた訳でも無かったので、担当さんと話しクライアントと担当者でどうするか決めてくれればこちらは修正に従うという話だけしました。


個人的にはいわゆる「隠し文字」的なルール違反では無いもので画像に書かれている文章を入れてるだけだし、少なくともペナルティー的な物までは無いだろうと思ってましたが、少し心配になってきました。


この辺り微妙な話とは思いますが、ご意見をお聞かせ頂けたらと思います。

文章を画像にしている場合のSEO対策はどう考えますか？

お世話になります。

先日ApacheのSSL証明書を更新しました。
手順書に従い、systemctl reload httpd.service と実行し、無事証明書が更新されました。

しかし、後日webなどの情報をみると restartを行うというのが大半でした。
reloadで問題なく動いているように見えますが、restartのほうが良かったのでしょうか。

ApacheのSSL証明書を更新する場合は、restart or reloadどちらが良いのか。

CentOS6.9でapache2.2.15-60でWebサーバを立てています。

2.4にアップデートしたかったんですが、PHPがうまく読み込まれず、どうしようもなくなって、バックアップから元に戻しました。

ところがバックアップが古く、ssl証明書がダメだったので入れ直しました。

そうしたところアクセスできなくなってしまい、いろいろ確認しましたところ、sslのconfが悪いようでApacheすらきどうしなくなりました。

```ssl.conf

Listen 443
<VirtualHost _default_:443>
#DocumentRoot "/var/www/html"
#ServerName suzunet.orz.hm:443
SSLEngine on
</VirtualHost>

```

このconfを読み込まなければapacheは起動しますが、とうぜんhttpsではアクセスできません。

どうしたらいいでしょうか

<追記：20180403:20:31>
```suzunet_orz-le-ssl.conf
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName suzunet.orz.hm
DirectoryIndex index.html index.php
AddDefaultCharset UTF-8
DocumentRoot /var/www/html
  <Directory "/var/www/html">
    AllowOverride All
  </Directory>

SSLCertificateFile /etc/letsencrypt/live/suzunet.orz.hm/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/suzunet.orz.hm/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateChainFile /etc/letsencrypt/live/suzunet.orz.hm/chain.pem
</VirtualHost>
</IfModule>
```
サイトごとはこんな感じです。

<追記：20180403:21:46>

error_logには
 [error] Oops, no RSA, DSA or ECC server certificate found for 'suzunet.orz.hm:0'?!
と出ています。

mod_sslを試しにインストールしたところ、インストールされました。あったはずなんですが。更新だったかもです。
で、上記のssl.confはネットの書き込みをみて自分で作ったものだったので、一旦リネームしてから作業して見ました。
すると、新たにssl.confが。
でここでhttpdを再起動すると、

 Passenger UstRouter shutdown finished

とエラーが出て、httpdの起動に失敗します。

＜追記：20180404:08:00＞
回答質問ありがとうございます。
現在はSSLが動きました。
現在出るエラーとしては
 Passenger UstRouter shutdown finished
です。Redmineのconfです。これをリネームして読み込まないようにすると起動し、ちゃんとサイトも見れるようになりました。
 Passenger UstRouter shutdown finished
はどうしたらいいでしょうか？

SSLでアクセスしたい

サンプルコードを作成し、挙動を確認したところ
下記のような挙動の違いが確認できました。

0. ボタン1を押す→ボタン2を押す：アニメーションが再実行される
0. ボタン3を押す→ボタン4を押す：アニメーションは再実行されない（ボタン3を押す前と同じ表示）

display属性とvisibility属性は、両方とも要素を表示/非表示にするものと認識しておりました。
（visibility属性を利用した場合はdisplay属性と異なり、要素の高さ、幅がそのままで空白が詰められない、ということも認識しております）

しかし、このサンプルコードのようにアニメーションの実行にも影響を与えるということは知らなかったので色々と調べてみましたが、そういった記載のあるページが見つけられませんでした。

display='block'時にアニメーションが再実行されるのは何故でしょうか？
CSSの仕様なのでしょうか？
その場合、そういった詳細な仕様はどこに書いてあるものでしょうか？
参考になるページや書籍等がありましたらご紹介頂きたいです。

また、displayのnone/blockでは動作しないが、
visibilityのhidden/visible切替時に動作するようなCSSの属性（？）もあるのでしょうか？
もしご存知の方がいらっしゃいましたら、ご教示いただければ幸いです。
よろしくお願い致します。

```HTML
<html>
	<head>
		<style>
		@keyframes sampleAnimation {
		    from {
		        width:0px;
		    }
		    to {
		        width:200px;
		    }
		}

		.child {
			background-color: #ff0000;
		    animation-name: sampleAnimation;
		    animation-duration: 1s;
		    animation-fill-mode:forwards;
		}
		</style>
	</head>
	<body>
		<div id="parent">
		    <div class="child">
		        1234567890
		    </div>
	    </div>
	<p>display属性で切替</p>
	<button onclick="document.getElementById('parent').style.display = 'none'">ボタン1（display=none）</button>
	<button onclick="document.getElementById('parent').style.display = 'block'">ボタン2（display=block）</button>
	<p>visibility属性で切替</p>
	<button onclick="document.getElementById('parent').style.visibility = 'hidden'">ボタン3（visibility=hidden)</button>
	<button onclick="document.getElementById('parent').style.visibility = 'visible'">ボタン4（visibility=visible)</button>
	</body>
</html>
```

display='block'時にアニメーションが再実行される理由は？

現在、エクセルで在庫を管理しています。
在庫は物流フェーズごとに倉庫,輸送,工場の3つに分かれています。
各フェーズごとに、以下のCSVデータがあります。

--------
CSVデータ
--------
商品コード,数量
A,100
B,105
C,95

※実際には2〜3,000行あります。

エクセルにて「在庫管理表」というシートがあり、別シートに移動させた各CSVデータより参照して、各フェーズごとの在庫数及び総数を在庫管理表に表示させています。

--------
在庫管理表
--------
商品 | 総数 | 倉庫 | 輸送 | 工場 |
Ａ　 | ３０ | １０ | 　９ | １１ |
Ｂ　 | ２９ | １０ | １０ | 　９ |
Ｃ　 | ２８ | 　９ | 　９ | １０ |

担当者が各フェーズごとのCSVを毎朝、別システムから出力し、それをエクセルのシートに移動させ、管理者が在庫管理表をチェックしています。

実際には物流フェーズはもっと多く存在し、商品についてもA-1,A-2、A-3と多くのSKUが存在します。
そのため、エクセルが非常に重くなりますので、プログラミングを利用してブラウザで確認したいと考えています。
ざっくりとしたイメージは以下の通りです。

1.各フェーズのCSVデータを担当者がブラウザ上からアップロードする
2.アップロードされたCSVデータを参照し、在庫管理表に反映される。


当方、html、css、javascriptを扱うことができます。
こういった在庫管理システムをつくるためには、どの言語で作るのが良いのでしょうか？

また、今後の展開のためにもブログラミング言語をこの機会に学び、社内の効率化に貢献すべく、作ったシステムの改良を加えていきたいと考えています。
そのため、どういった参考書もしくはwebサイトなどを参考にしながら学んでいくとよいでしょうか？

よろしくお願い致します。

在庫管理システムを作り、継続的に改良を重ねていくために選択すべき言語および学習方法について

表題の通りなのですが，例えば，以下のように設定した場合
```html
 <svg style="width:100;height:100;">
   <rect x=50 y=50 width=50 height=50 fill="#e38"></rect>
   <rect x=100 y=50 width=50 height=50 fill="#e38"></rect>
</svg>
```
svg自体の領域は100pxまでなので，実際には上のrectしか描画されません．
しかし，デベロッパーなどで確認すると分かりますが，たしかに下のrectも要素自体は存在しています．
このような場合，描画領域からはみ出している要素もメモリの圧迫の原因になり得るのでしょうか...?それとも，描画はしていないのでほとんどメモリには関わらないのでしょうか...?よろしくお願いいたします．

SVGの描画領域外へのレンダリングはメモリを圧迫しますか....?

### 前提・実現したいこと
設定パターン１～２のコードがありますが、１はコールバック、２はプロミスで書いています。この場合どちらで書くべきでしょうか。
コールバックでも問題ないのか、それともプロミスで書いたほうが良いのか教えて頂ければ幸いです。


### 該当のソースコード
```javascript
//設定 パターン１
const ChangePermission = (callback) => {
  if('permissions' in navigator) {
    navigator.permissions.query({name:'notifications'}).then((notificationPerm) => {
      notificationPerm.onchange = () => {
        if(notificationPerm.state === "granted"){
          console.debug('通知が許可に変更');
          callback();
        }
      };
    });
  }
};
```

```javascript
//設定 パターン２
const ChangePermission = () => {
  return new Promise((resolve, reject) => {
    if('permissions' in navigator) {
      navigator.permissions.query({name:'notifications'}).then((notificationPerm) => {
        notificationPerm.onchange = () => {
          if(notificationPerm.state === "granted"){
            console.debug('通知が許可に変更');
            resolve();
          }
        };
      });
    }
  });
};
```

【Promise,callback】どちらが良いのか？

### 前提・実現したいこと

Javascriptを埋め込んだSVGファイルを作成しています。
SVGを描画するためのJavascriptライブラリがあるということで、調査を行なっているのですが、
これらのライブラリをSVGファイル内から呼び出すにはどのように記述すればよいでしょうか？
-  [D3.js](https://d3js.org/)
-  [Snap.svg](http://snapsvg.io/)  
-  [Chart.js](http://www.chartjs.org/)
等

サンプル等を見るとhtmlファイルのhead部でライブラリの読み込みを行い、
SVGファイルを参照するorインラインでSVGを記述するようになっているのですが、
今回はhtmlファイルを使用せず、SVGファイル単体で動作することを希望しています。


```html
<head>
    <meta http-equiv="Content-Type" charset="UTF-8">
    <script src="js/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <svg>
        
    </svg>
    
    <object type="image/svg+xml" data="hoge.svg"></object>
</body>
```

### 該当のソースコード
棒グラフを描画するSVGファイル(hoge.svg)
```
<?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 336 235.2;" width="1400px" height="980px">
	<g transform="matrix(3.919999047851853, 0, 0, 3.919999047851853, 320.1520572900305, -1553.691558040917)">
		<g id="g-1" transform="matrix(1, 0, 0, 1, 1.8474111129762605e-12, 4.618527782440651e-13)">
			<g id="g-1">
				<path d="M 34.400002 546.5 H 49.200002 V 565.000024 H 34.400002 V 557.900024 Z" class="st24" style="fill: rgb(170, 46, 41);"/>
			</g>
			<g id="g-2">
				<path d="M 62 523.5 H 76.8 V 565.000024 H 62 V 557.900024 Z" class="st5" style="fill: rgb(239, 73, 57);"/>
			</g>
			<g id="g-3">
				<path d="M 89.5 512.099976 H 104.3 V 565.000024 H 89.5 V 557.900024 Z" class="st8" style="fill: rgb(240, 95, 48);"/>
			</g>
		</g>
	</g>
	<script type="text/javascript">
		// j3等を使用してグラフの描画を行なう
	</script>
</svg>
```

Javascriptを埋め込んだSVGファイル内から外部のjavascriptを読み込む方法について

Node.js + MongoDBでローカルサーバ＋データベースを作って、実際に何度か動かしたのですが、
ふとフォルダを見るとよくわからないファイルがいつの間にかできていました。
これらのファイルは捨てたり、移動させたりしてはダメなのでしょうか？
![イメージ説明](90060a299f801556fed612511a59b08a.png)

[node.js]実行後、いつの間にか謎のファイルができてる

### 前提・実現したいこと

JavaのWebSocket技術を用いて、チャットを作ろうとしています。
今のところ、接続中の全てのクライアントにメッセージを送信することはできているのですが（＊下のコード）、1対1のメッセージ交換の実装方法が分かっておりません。
アカウント(us)ごとにそれぞれメッセージを送るという感じです。

### 該当のソースコード

```Java
package haoyuan;


import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;


@ServerEndpoint("/loadMessage")
public class Socket {
    public static List<Session> sessions = new ArrayList<Session>();
    
    
    @OnOpen
    public void onOpen(Session session) {
        // 開始時
        sessions.add(session);
    }
    
    
    @OnMessage
    public void onMessage(String message) throws IOException {
        // クライアントからの受信時
        for (Session session : sessions) {
session.getBasicRemote().sendText("{\"command\":\"message\", \"text\": \"" + message.replace("\", "\\").replace("\"", "\\"") + "\"}");
        }
    }
    
    
    @OnError
    public void onError(Throwable t) throws IOException {
        // エラー発生時
        for (Session session : sessions) {
session.getBasicRemote().sendText("{\"command\":\"error\", \"text\": \"" + t.getMessage().replace("\", "\\").replace("\"", "\\"") + "\"}");
        }
    }
    
    
    @OnClose
    public void onClose(Session session) {
        // 完了時
        sessions.remove(session);
    }
}
```

```JavaScript
　var webSocket;

  window.onload = function() {

		var forRtoA = document.createElement('a');

		forRtoA.href = "loadMessage";

		webSocket = new WebSocket(forRtoA.href.replace("http://", "ws://").replace("https://", "wss://"));

		var messageArea = document.getElementById("messageArea");

		var appendMessage = function(value, color) {

			var messageElement = document.createElement("div");

			messageElement.style.color = color;

			messageElement.innerText = value;

			messageArea.insertBefore(messageElement, messageArea.firstChild);

		}

		webSocket.onopen = function() {

			appendMessage("Opened", "blue");

		}

		webSocket.onclose = function() {

			appendMessage("Closed", "red");

		}

		webSocket.onmessage = function(message) {

			var data = JSON.parse(message.data);

			if ("message" == data.command) {

				appendMessage(data.text, "black");

			} else if ("error" == data.command) {

				appendMessage(data.text, "red");

			}

		}

		webSocket.onerror = function(message) {

			appendMessage(message, "red");

		}

		var messageInput = document.getElementById("messageInput");

		messageInput.onkeypress = function(e) {

			if (13 == e.keyCode) {

				var message = messageInput.value;

				if (webSocket && "" != message) {

					webSocket.send(message);

					messageInput.value = "";

				}
			}
		}
	}
```
見当がつかないので、何卒よろしくお願いします。もし可能であれば、ソースも載せてくださいましたら、本当に助かります。

Java Websocketを使った１to1のチャット

いつもお世話になっております。
現在、会社でマルチサイトでブログを運営しております。
前任者が退職したため引き継いだのですが、管理者でログインしているにも関わらずプラグインの追加の項目が出ず、困っております。
マルチサイトでくっついているどのサイトのダッシュボードを見てもプラグインの項目は無く、FTPから追加しても反映されない状態です。
あれこれ調べてネットワーク管理者権限というものがあると分かったのですが、どのアカウントもそれには該当しないようで、参加サイトの中に「ネットワーク管理」の項目もありません。
（念のためDBの中身等も確認してみました）

マルチサイト自体は現状どれも問題なく動いているようなのですがプラグインの追加が出来ないのが不便です。

導入の手順などを調べ直し、wp-config.phpの中に
define('WP_ALLOW_MULTISITE', true);
の記述がある事、.htaccessへのコードの追加等も確認出来ております。

現状動いているサイトの為、消して作り直すわけにもいかず、原因もわかりません。

他に確認すべき項目や解決策がございましたら教えて頂けませんでしょうか。

wordpress、プラグインの追加が出ない

（実現したいこと）
Web Audio APIを使用して音源再生時にフィルタ処理したい。

（解決できていないこと）

ソース音源として各種サンプリングレートの音源を用意しております。
しかし、Web Audio APIでdecodeAudioしたAudioBufferで取得できる
サンプリングレートは、44.1kHzに固定されてしまいます。

ウェブ検索すると、固定ではないか？という情報はありますが、
確かな記述がなく、どのように扱われているのかがわかりません。

44.1kHzのサンプリングレートを任意に変更は可能でしょうか？


```lang-typescript
private audioctx: any = new AudioContext;

public getAudioBufferSync(file:any): Promise<any> {
  return new Promise((resolve, reject) => {
    let f:FileReader = new FileReader();
    f.onload = () => {
      this.audioctx.decodeAudioData(f.result, (buffer) => {
        resolve(buffer);
      },(error) => {
        alert('failed.');
      });
    };
    f.readAsArrayBuffer(file);
  });
}

public getSamplingRate(buffer: any): number {
  console.log(buffer.sampleRate);         //44100 expected 16000
  console.log(this.audioctx.sampleRate);  //44100 expected 16000
  return this.audioctx.sampleRate;
}
```

web audio api のサンプリングレートについて

### 前提
YouTubeの動画をまとめる案件を請け負っています。
現在、数名のYouTuberが動画を更新するたびにリンクとタイトルを手動で取得(コピペ)して、googleスプレッドシートにまとめているのですが、手動ではなく自動で取得する方法をご存知の方がいらっしゃったらおしえてください。

### 実現したいこと
* 特定のYouTubeチャンネルにおいて、動画が更新されるたびにその動画のリンクを取得したい
* 取得したリンクをGoogleスプレッドシートに、タイトルと共に表示させたい

### その他
エンジニアではないので(すみません...)、特殊すぎることであればもしかしたら自分が確認できないかもしれませんが、少しでもこの作業を効率的にこなしたいと思い、ここに質問しました。
ご存知な方いらっしゃいましたら教えてください。どうぞよろしくお願いします。

### 追記
先ほど確認したのですが、指摘を受けてしまっていたみたいでした。当方が非エンジニアのため書き方が不適切だったのかもしれません。質問する前にGoogleのスプレッドシートのスクリプトを変更するのかなあとは想定していたのですがそういった内容を書いていいか迷い書きませんでした。イラつかせたのなら申し訳ないです。
> こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました 


ところで、IFTTTのレシピを教えてくださりこの問題自体は解決できそうです、が、もしお時間があってご存知の方はYouTube Date APIからチャンネル情報を取得するGoogle Apps Scriptの作成方法の仕方を教えてくださると嬉しいです。

特定のYouTubeチャンネルに対して動画が更新するたびにリンクを取得してスプレッドシートに入れたい

コードの質問ではないのですが...
プログラマーのみなさんはノートPC,またはタブレットPCなど、モバイルはどのような機種をお使いでしょうか？
個人の好み次第であって一般的な売れ筋とあまり変わらないのでしょうか。

プログラマーが持つモバイルPCは？

名前ベース virtualhostのSSL設定を行いたいのですが、DocumentRootが一部重複しているためか、意図通りに動作しません。
実現したいのは、以下のように本ドメイン、サブドメインのどちらも、正しくSSL通信を行うことです。
https://hoge.com
https://m.hoge.com

apacheの設定は以下のとおりです。（一部省略）
DocumentRootが本ドメインは「/var/www/html」、サブドメインはその配下の「/var/www/html/cakephp/m」で設定しています。

```ここに言語を入力
Listen 443
NameVirtualHost *:443

<VirtualHost *:443>
DocumentRoot "/var/www/html"
ServerName hoge.com

SSLEngine on
SSLCertificateChainFile /etc/httpd/conf/ssl.crt/dvcacert.cer
SSLCertificateFile /etc/httpd/conf/ssl.crt/hoge.crt
SSLCertificateKeyFile /etc/httpd/conf/ssl.key/hoge.key
</VirtualHost>

<VirtualHost *:443>
DocumentRoot "/var/www/html/cakephp/m"
ServerName m.hoge.com:443

SSLEngine on
SSLCertificateChainFile /etc/httpd/conf/ssl.crt/m.dvcacert.cer
SSLCertificateFile /etc/httpd/conf/ssl.crt/m.hoge.crt
SSLCertificateKeyFile /etc/httpd/conf/ssl.key/m.hoge.key
</VirtualHost>

```

発生している問題は、ブラウザで「https://hoge.com」にアクセスすると正常に動作するのですが、「https://m.hoge.com」にアクセスするとブラウザに通信が保護されていない旨が表示されます。
「https://m.hoge.com」を開いた状態でブラウザで証明書を確認すると「hoge.com」の証明書が使用されていました。

そこで、「https://m.hoge.com」のVirtualHostの設定を先に記載したらどうなるか試したところ、今度は「https://m.hoge.com」にアクセスすると問題なく動作しましたが、「https://hoge.com」にアクセスするとブラウザに通信が保護されていない旨が表示されました。
「https://hoge.com」を開いた状態でブラウザで証明書を確認すると「m.hoge.com」の証明書が使用されていました。

どのように設定すれば、両ドメインでSSL通信が出来るようになりますでしょうか。
Apacheのバージョンは2.2.3です。

名前ベース virtualhostのSSL設定 につきまして（DocumentRootの重複）

ワードプレスのテーマを使ってウェブサイトを作りました。

スマホ版とPC版でそれぞれ表示されるサイズが違います。

ブログを更新した時に、スライドシェアを表示したく、
Slideshareのプラグインをインストールし、アップロードされたスライドの
コードをEmbeddedよりコピーして、投稿に貼り付けました。

するとブログ投稿後にスライドシェアが現れ、うまく表示することができました。

今まで上下とスクロール画面をしていて情報を収集していたのに疲れてきました。
しかし、スライドシェアのウィンドウ導入によって、左右でページが切り替えることができ、
情報収集に新たな感覚を覚えました！

ここで問題が発生します・・・・。

プラグインの設定では、表示されるサイズがPC版とスマホ版で同じ仕様なので、
スマホ版に表示させるためにSLideshare Windowのサイズを設定するとPC版では小さすぎて、
逆にPC版に合わせるとスマホ画面には大きすぎます。

プラグインではサイズを変更する設定はあるのですが、
PC表示版とスマホ表示版にそれぞれ設定できるところはなく困りました。

PCに表示させる時にはある指定のサイズ、スマホ表示時にはある指定のサイズと、
どちらにもサイズを合わせるようにカスタマイズするいい方法はないでしょうか？

よろしくお願いいたします。