常連

回答者

ベストアンサー

拍手喝采

プロフェッサー

自己紹介

有名人

### 実現したいこと
SVGファイル内で<foreignObject>を使用し<table>を記述。
<table>にdatatables([https://www.datatables.net/](https://www.datatables.net/))を適用させデータグリッドを表示させたいのですが、
以下のエラーが発生しています。
SVG内からdatatables.min.jsを読み込むことはできないのでしょうか？

### 発生している問題・エラーメッセージ

```
Uncaught TypeError: Cannot set property 'cssText' of undefined
jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function
```

### 該当のソースコード

```
----------------
test.svg
----------------
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<style>
		<![CDATA[ @import url(https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css); ]]>
	</style>

	<foreignObject width="80%" height="80%">
		<html xmlns="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<table id="foo-table" class="table table-bordered">
				<thead>
					<tr><th>No</th><th>くだもの</th></tr>
				</thead>
				<tbody>
					<tr><td>1</td><td>りんご</td></tr>
					<tr><td>2</td><td>みかん</td></tr>
					<tr><td>3</td><td>ぶどう</td></tr>
				</tbody>
			</table>	
		</body>
		</html>
	</foreignObject>

	<script xlink:href="https://code.jquery.com/jquery-3.3.1.min.js" />
	<script xlink:href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js" />
	<script type="text/javascript">
		/* <![CDATA[ */
			jQuery(function($){
				$("#foo-table").DataTable();
			});
		/* ]]> */
	</script>
</svg>
```

### 試したこと

HTML上に直接記述した場合、動作することは確認済み。

SVGファイル内からdatatables.min.jsを呼び出し

お世話になっております。
現在RubyOnRailsで開発をしております。

複数の画面に跨ってフォームを入力させる場合に、最後のsubmitで今までの入力を同一トランザクションで処理する方法を模索しています。

作りたい画面のイメージ的には、
①特定のレコードの編集画面に飛ぶ　➔　②編集して次へボタン　➔　③別フォームを入力してsubmit

というイメージです。
submit後には「②のレコードのアップデート」、「③のレコードのinsert」が走ります。
②と③を同一のトランザクションで処理したいと考えているのですが、（③入力時には②のレコードは触らせたくないため）②と③が別画面での入力となるため、③のsubmit時に②の入力も合わせてsubmitさせたいです。

私が思いつく方法としては、②の画面で次へボタンを押した際に、②で入力されたフォームの値をブラウザのlocal storageに貯めておき、③の画面を表示した際にフォームにそれを埋め込んで一緒にsubmitする方法なのですが、他になにかよい方法はありますでしょうか？
あまりjavascriptをゴリゴリ書きたくはないので、gemやライブラリなどで実現出来ればそれが望ましいと考えています。　一般的にこういった画面を実装する際にどのような方法が考えられるか、ご教示頂ければと思います。
よろしくお願い致します。

複数の画面に跨ってフォームを入力させる場合に、最後のsubmitで今までの入力を同一トランザクションで処理する方法

お世話になっております。

画面上でファイルをアップロードして指定のパスにフォルダを作成する処理です。
フォルダ名はDBから入力されたidと紐づいてる名前を取得しています。
その名前に、「圭	構	蚕	十	申	曾	箪	貼	能	表	暴	予	禄」
などの漢字が入っている場合のみ文字化けして落ちてしまいます。
これらの漢字も文字化けしないようにするにはどうしたらよいのでしょうか？
よろしくお願いします。

```php
public function makepdf(Request $request){
        $val = $request->file('userfile');
        $id = $request->input('id');
        $ext = ".pdf";
        
        //入力された番号で名前取得
        $query = DB::table('Sample')
                ->where('id',$id)
                ->first();
        
        if(empty($query)){
            return redirect()->route("sanple.pdf_index")->withErrors('番号が登録されていません。')->withInput();
        }else{
            $name = $query->name;
            $filepath = "\\xxx.xxx.x.xx\aaa\file\".mb_convert_encoding($name,'SJIS-win','UTF-8');
        }
               
        //フォルダ作成
        if (!file_exists($filepath)) {
           mkdir($filepath, 0777, true);
       }
 
        //ファイル名
        $num = 1;
        for($i = 0;$i<count($val);$i++){
            if(empty($val[$i])){
                break;
            }
            $val[$i]->move($filepath,$num.$ext);
            $num++;
        }
        
        Session::flash('flash_message',$name.'さんのフォルダを作成しました。');
        return view('sample.pdf_index');
    }
```

laravel 特定の文字の文字化け

SkyWay WebRTC APIを用いて、複数ユーザー間のビデオチャットアプリを作成しています。
参加人数が増えてもページが重くならないように、送信するstreamの映像の画質を(支障がないところまで)最低にしたいと思っています。

`navigator.mediaDevices.getUserMedia()`でユーザーの映像を取得していますが、ここのvideoのconstraintsで画質を設定することはできるのでしょうか？
widthとheightは指定ができるのはわかっているのですが、画質をどうやって設定したらいいかわかりません。

よろしくお願いします。

getUserMediaで取得する画質を設定したい

```
.header{
    display: -webkit-box; /*Android4.3*/
    display: -moz-box;    /*Firefox21*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-flex; /*PC-Safari,iOS8.4*/
    display: flex;
}
```
このbrowserごとに設定しているdisplay: flex; を一つにまとめてdisplayFlexAllのような変数として使いたいと考えております。

試しに
```
:root {
    --displayFlexAll:(
        display: -webkit-box; /*Android4.3*/
        display: -moz-box;    /*Firefox21*/
        display: -ms-flexbox; /*IE10*/
        display: -webkit-flex; /*PC-Safari,iOS8.4*/
        display: flex;
    );
}

.header{
    var(--displayFlexAll)
  
}
```
などとしてみましたが、うまくいかず
　→「CSS変数　配列」「CSS 関数」などで調べてみても出てこず

こちらもし何か方法がわかる方がいましたら回答よろしくお願いいたします。

CSS変数、複数の情報は入らないのか？？

### 前提・実現したいこと

勉強でコードを書いています。
if文のネストが深くなってきたので可読性が悪いのでは無いかと書き直しています。
独学の為コードの可読性が低かったり汚かったりするのではないかと心配です。

どのように改善するべきなのか現場で働いている方の感想やアドバイスを頂きたいと思い投稿致しました。

-追記-
mts10806さんからご指摘を受けて今動かしてみているコードをそのまま追加してみました。
指定日から表示するコードは配布されていたのですが、毎週表示するコードは配布されていませんでした。
作成のついでに配布用のコードを作って私みたいに検索した人の手助けになればと作成しているのですが、恥ずかしくないコードにしたいなと思い今回の投稿に至っております。

-追記２-
think49さんのからご指摘を受けて気付きました。
上側コード
$(elem).foreach(function(){
の部分を修正致しました。

このサイトの使用方法のアドバイスも承りました。
他にも利用方法で誤った使用方法があれば、今後の利用に役立てたいと思いますのでご指摘お願い致します。

-追記３-
think49さんからご指摘がありましたので追記致します。

上のコードは下のコードを質問用にシンプルにした（つもり）ものでしたがうまく伝わらないようなので下のコードを掲載致しました。
以降、上のコードは今後この質問を検索で訪れた方様に残しておくべきか悩んでおります。
残すべきかどうかのアドバイスも頂ければ幸いです。

### 該当のソースコード

```js
$(elem).each(function(){
  var aaa = "moji", bbb = "moji",
      aa = true,  bb = true,
      a = 1, b = 1, c = 1, d = 1, e = 1;
  if(aa || aaa.match("hoge")){
    if((a >= 0 && b >= 0) || (a <= 0 && b <= 0)){
      //処理１
    }else if(a <= 0 && b >= 0){
      //処理２
      if(bb && b <= c){
        if(bbb.match("fuga")){
          //処理３
          if(e%2 == 0){
            //処理４
          }
        }else{
          //処理１
          if(e%2 == 0){
            //処理２
          }
        }
      }
    }
  }else{
    //処理１
  }
});
```
```js
/*------------------------------------設定------------------------------------*/
//クラス名
var class_name = ".dtimer";
//点滅色（CSS形式）例：red / #008000 / rgb(0,0,255)/
var color = "red";
//カラーチェンジもしくは点滅開始時間（終了何秒前からカラーチェンジもしくは点滅するか）
var flash_time = 600;
//更新間隔(秒)
var reload_time = 1;
/*----------------------------------------------------------------------------*/
reload_time *= 1000;
$(document).ready(function displayTimer(){
  $(class_name).each(function(){
    var sh = parseInt($(this).attr("sh")) || 0,
        sm = parseInt($(this).attr("sm")) || 0,
        eh = parseInt($(this).attr("eh")) || 24,
        em = parseInt($(this).attr("em")) || 0,
        flash = $(this).attr("flash"),
        wval  = $(this).attr("week"),
        elem  = $(this).prop("tagName"),
        stime = (sh * 60 + sm) * 60,
        etime = (eh * 60 + em) * 60,
        now   = new Date(),
        ntime = parseInt((now.getHours() * 60 + now.getMinutes()) * 60 + (now.getSeconds())),
        sjisa = stime - ntime,
        ejisa = etime - ntime,
        weekarry = ["日","月","火","水","木","金","土"],
        weekno = now.getDay(),
        week = weekarry[weekno];
    if(wval === undefined || wval.match(week)){
      if((sjisa >= 0 && ejisa >= 0) || (sjisa <= 0 && ejisa <= 0)){
        $(this).hide();
      }else if(sjisa <= 0 && ejisa >= 0){
        $(this).show();
        if(flash && ejisa <= flash_time){
          if(elem.match(/(p|a)/i)){
            $(this).css("color","");
            if(ejisa%2 == 0){
              $(this).css("color",color);
            }
          }else{
            $(this).hide();
            if(ejisa%2 == 0){
              $(this).show();
            }
          }
        }
      }
    }else{
      $(this).hide();
    }
  });
  setTimeout(function(){displayTimer()}, reload_time);//再起呼び出し
});
```

ifのネストが深いので改善するべきか

# ★ 分からないこと・知りたいこと

1. WeakMapの使い道が分からなかったり、これを使うと何が良いのかが分かりません。
そこをクリアにしたいです。

2. MapにしろWeakMapにしろ、キーにオブジェクトをなぜ使う必要があるのかが分からない。(ということがよく分かっていないのだと後になって気づきました）

# ★ 試したこと

**1.WeakMapについて以下の記事を呼んで、一応理解はした気はします。ただ、使い道やメリットがイメージ出来ていません。**

[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)

[https://uhyohyo.net/javascript/16_1.html](https://uhyohyo.net/javascript/16_1.html)


**2. MapとWeakMapの動作の違いをコードを打って確かめました。**

## Map
```
let x = {
	id: 1
}

let y = {
	id: 5
};

const map = new Map([[x, 100], [y, 5]]);
//console.log(map.get(obj)) // 100

x = {};

console.log(map.get(x)) // undefined
console.log(map.has(x)); // false
for (var i of map.keys()) {
	console.log(i)
}
// { id: 1 } // これが残るのがMap
// { id: 5 }
```

## WeakMap
```
'use strict';

let x = {
	id: 1
}

let y = {
	id: 5
};


const weakMap = new WeakMap([[x, 100]]);
console.log(weakMap.get(x)) // 100
x = {};
console.log(weakMap.has(x)); // false
console.log(weakMap.get(x)) // undefined

//weakMapにはそもそもkeys()メソッドはない。
```

# Object
```
let x = {
	y: {
		id: 1
	}
}

console.log(Object.keys(x)); // ['y']
console.log(x.hasOwnProperty('y')); // true

delete x.y;

console.log(Object.keys(x)); // []
console.log(x.hasOwnProperty('y')); // false
```

# ★ 分かってること・分かったこと
- WeakMapのキー以外から参照されていないものはガベージコレクションの対象になる。(WeakMapは参照カウントを増やさないみたいなイメージ)

# ★ 分かってるようで分かっていないこと

> MapにしろWeakMapにしろ、キーにオブジェクトをなぜ使う必要があるのかが分からない。

と、冒頭の「分からないこと・知りたいこと」に追加しましたが、キーをオブジェクトにするということは、リレーショナルデータベースみたいなのをイメージすれば良いのかなと思ったのですが、こういう捉え方はどうなのか。。。

```
let authorA = {
	id: 1,
	name: 'xxx'
}

let articles = [
	{id: 1, title: 'aaa'},
	{id: 2, title: 'bbb'}
]

let wmap = new WeakMap();
wmap.set(authorA, articles);
console.log(wmap.get(authorA));
// [ { id: 1, title: 'aaa' },
// { id: 2, title: 'bbb' } ]
```

WeakMapの使い道が分かりません。

Ruby on Rails チュートリアルを進めています。

Ruby on Rails チュートリアルはテストについて非常に多く割いていますが、テストにどんなメリットがあるのか、いまだに腹落ちできていません。

「失敗するテスト」を書いて、そのあとテストに通過するコードを書くことの意味や重要性が理解できていないのだと思います。

ここで、Ruby on Rails チュートリアルの以下のコードを具体例として挙げたいと思います。

これはチュートリアルの「6.2.3 長さを検証する」の部分です。

まず、test/models/user_test.rb　に以下を記述します。

```
require 'test_helper'

class UserTest < ActiveSupport::TestCase

  def setup
    @user = User.new(name: "Example User", email: "user@example.com")
  end
  .
  .
  .
  test "name should not be too long" do
    @user.name = "a" * 51
    assert_not @user.valid?
  end

  test "email should not be too long" do
    @user.email = "a" * 244 + "@example.com"
    assert_not @user.valid?
  end
end

```

上記をテストするとREDとなります。

```
$ rails test
```

テストをパスするために、以下のコードを　app/models/user.rb　に追記します。

```
class User < ApplicationRecord
  validates :name,  presence: true, length: { maximum: 50 }
  validates :email, presence: true, length: { maximum: 255 }
end
```

再びテストすると、GREENとなります。

```
$ rails test
```

ここまでのテストコードを踏まえて回答をいただきたいのは、以下の2点です。


0. **なぜ失敗するコードを最初に書かなければいけないのでしょうか？**
0. **なぜ、user_test.rbのコードは失敗になるのでしょうか？**
**（おそらく、　assert_not @user.valid?　の意味が理解できていません）**


まだまだ初心者の域を出ていないので、なるべく噛み砕いてわかりやすく文章にしていただけると助かります。

どうか皆様にお力添えいただけますと幸いです。よろしくお願いします。

なぜRuby on Railsのテストで失敗するコードを書かなければいけないのか知りたい

svgファイルにアニメーションに影の指定をしているんですが、効かないです。
どこが悪いでしょうか？
```ｈｔｍｌ
コード<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>パクcafe</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/logo_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(function(){
$.backstretch(
	["img/header_1.jpg",
     "img/header_2.jpg"], 
	{duration: 5000, fade: 1250}
);
});
</script>
</head>
<body>
 <header>
  <nav class="globalmenu">
	<ul>
	 <li>コンセプト</li>
	 <li>メニュー</li>
	 <li>アクセス</li>
	 <li>お問い合わせ</li>
	</ul>
  </nav>
<div class="container">
 <svg id="svg_logo" data-name="svg_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.39 262.05" preserveAspectRatio="xMinYMin meet" x="50%" y="50%" width="50%">
 <title>svg_2</title><path class="cls-1" d="M370,168a26.77,26.77,0,0,0-23.6-21.71,18.32,18.32,0,0,0-27.09-21.7,19,19,0,0,0-24.82-2.46,20.6,20.6,0,0,0-33.79,12.14,35.92,35.92,0,0,0-27.07,34.82" transform="translate(-150.64 -115.92)"/><path class="cls-1" d="M384.36,173.62h-165s6.2,38.06,40.36,70.56v28.1H342.2V245.85C377.94,213,384.36,173.62,384.36,173.62Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M169.88,318.51a3,3,0,0,1,1.26.28,2.6,2.6,0,0,1,1.78,2.52q0,2.06-3.67,8.63a60.26,60.26,0,0,1-13.36,16.79,3.56,3.56,0,0,1-2.16,1,1.72,1.72,0,0,1-1.26-.53,1.93,1.93,0,0,1-.63-1.39,2.12,2.12,0,0,1,.42-1.26c.16-.24.77-.91,1.82-2a59.82,59.82,0,0,0,10-15.11c1-2.07,2-4.4,3-7A2.72,2.72,0,0,1,169.88,318.51Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M192.86,316.76a3.43,3.43,0,0,1,2.23,1.19,85.39,85.39,0,0,1,10.84,13q5.77,8.29,5.77,11.37a2.9,2.9,0,0,1-1.36,2.62,3,3,0,0,1-1.64.53,2.79,2.79,0,0,1-2.35-1.26,22,22,0,0,1-1.08-2.07,118.07,118.07,0,0,0-13.39-21.64,3.39,3.39,0,0,1-.84-2C191,317.32,191.64,316.76,192.86,316.76Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M250.68,326.94l14.13-.49q5.28-.17,5.28,3.81,0,2.1-1.89,7.73a63.39,63.39,0,0,1-12.52,21.79,66.83,66.83,0,0,1-21.79,16.43,4.61,4.61,0,0,1-2,.56,1.63,1.63,0,0,1-1.5-.8,2.08,2.08,0,0,1-.39-1.12,2.27,2.27,0,0,1,1.16-1.71c.16-.12.93-.59,2.3-1.4a67.44,67.44,0,0,0,24.66-24.55,56.65,56.65,0,0,0,5.77-13.5,10.61,10.61,0,0,0,.38-1.78c0-.52-.34-.76-1-.74l-14.79.6a57.82,57.82,0,0,1-15.39,16.08,4.36,4.36,0,0,1-2.41,1,1.59,1.59,0,0,1-1.47-.81,2.22,2.22,0,0,1-.39-1.15,2.27,2.27,0,0,1,.74-1.57l2-1.65a51.28,51.28,0,0,0,13.35-17.31,3.07,3.07,0,0,1,2.73-2,3.39,3.39,0,0,1,1.61.39A2.47,2.47,0,0,1,250.68,326.94Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M298.76,336.93a14.75,14.75,0,0,1,9.68,3.21,4,4,0,0,1,1.78,2.88,2.22,2.22,0,0,1-.85,1.72,2.63,2.63,0,0,1-1.81.73,3.12,3.12,0,0,1-2.21-1.28,8.41,8.41,0,0,0-6.65-2.77,8.92,8.92,0,0,0-7.4,3.64,10.84,10.84,0,0,0-2.27,6.85,10.4,10.4,0,0,0,3.76,8.27,9,9,0,0,0,6,2.34,9.89,9.89,0,0,0,7.75-3.62,2.19,2.19,0,0,1,1.66-.81,2.64,2.64,0,0,1,2.1,1.05,2.33,2.33,0,0,1,.58,1.54,3.58,3.58,0,0,1-1.34,2.51q-4,3.81-10.63,3.81-8,0-12.27-6.06a15.26,15.26,0,0,1-2.77-9,14.57,14.57,0,0,1,5.07-11.4A14.37,14.37,0,0,1,298.76,336.93Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M354.68,341.83v-2.74a2,2,0,0,1,.56-1.46,2.38,2.38,0,0,1,1.86-.76,2.26,2.26,0,0,1,2.22,1.23,2.4,2.4,0,0,1,.2,1v25.29a2.09,2.09,0,0,1-4.17.12l-.37-4.29a11.89,11.89,0,0,1-6.27,6,10,10,0,0,1-3.9.78,12.5,12.5,0,0,1-10.29-4.69,17.51,17.51,0,0,1-.67-19.61,12.51,12.51,0,0,1,10.9-5.77A12.64,12.64,0,0,1,354.68,341.83Zm0,10.57v-2a8.36,8.36,0,0,0-1.45-4.66,9.4,9.4,0,0,0-5.07-3.82,9.71,9.71,0,0,0-3-.46,8.08,8.08,0,0,0-6.44,2.94,11.15,11.15,0,0,0-2.53,7.55,11.72,11.72,0,0,0,2.12,7.08,8.07,8.07,0,0,0,6.85,3.53,8.69,8.69,0,0,0,6.79-3.44A10.21,10.21,0,0,0,354.68,352.4Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M388.89,337.89V331.1a7.5,7.5,0,0,1,1.87-5.21,8,8,0,0,1,6.26-2.57,8.7,8.7,0,0,1,6.07,2.3,3.74,3.74,0,0,1,1.48,2.68,2.2,2.2,0,0,1-1.05,2,2.9,2.9,0,0,1-1.45.37,2.22,2.22,0,0,1-2.1-1.37,3.11,3.11,0,0,0-3-1.77,2.77,2.77,0,0,0-2.54,1.37,3.92,3.92,0,0,0-.58,2.18v6.79h7.69q2,0,2,2.22a2.27,2.27,0,0,1-.81,1.89,2,2,0,0,1-1.23.38h-7.69v21.86a2,2,0,0,1-.47,1.34,2.43,2.43,0,0,1-2,.9,2.46,2.46,0,0,1-2.07-1,2,2,0,0,1-.41-1.28V342.38h-6.44a1.91,1.91,0,0,1-1.31-.47,2.19,2.19,0,0,1-.78-1.8,2,2,0,0,1,1.1-2,2.07,2.07,0,0,1,1-.24Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M428.21,352.87a10.19,10.19,0,0,0,1.69,5.54,9.41,9.41,0,0,0,8.24,4.11,13,13,0,0,0,8.69-3.15,3,3,0,0,1,1.92-.82,2.35,2.35,0,0,1,1.69.73,2.4,2.4,0,0,1,.7,1.72,3.54,3.54,0,0,1-1.63,2.59q-4.32,3.42-11.4,3.41a15.28,15.28,0,0,1-8.8-2.53,13.84,13.84,0,0,1-5.27-6.65,16.16,16.16,0,0,1-1.08-5.94,14.83,14.83,0,0,1,3.5-9.94,14.31,14.31,0,0,1,11.42-5,14.16,14.16,0,0,1,10,3.82,11.4,11.4,0,0,1,4,8.65c0,2.32-1,3.47-3,3.47Zm.23-3.93h17c.62,0,.93-.27.93-.79a6,6,0,0,0-1-2.86c-1.58-2.62-4.1-3.93-7.58-3.93a9.46,9.46,0,0,0-7.11,2.86A8.06,8.06,0,0,0,428.44,348.94Z" transform="translate(-150.64 -115.92)"/><polygon class="cls-1" points="248.93 198.29 59.88 169.78 250.64 181.67 248.93 198.29"/><circle class="cls-1" cx="60.95" cy="183.1" r="11.22"/></svg>
	</div>
 </header>
  
	<div class="container">
		
	<footer>
    </footer>
 </div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

```
```css
コード@charset "utf-8";
/* CSS Document */
.cls-1,.cls-2 {
  stroke: #000;
  stroke-width: 2;
  fill:#fff;
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
  -webkit-animation: SVG-anim01 1s 1s ease 1;
          animation: SVG-anim01 3s 1s ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}
@-webkit-keyframes SVG-anim01 {
0% {
  stroke-dashoffset: 500;
}
80% {
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
  stroke-dashoffset: 0;
}
100% {
  fill-opacity: 1;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
}
}
@keyframes SVG-anim01 {
0% {
  stroke-dashoffset: 500;
}
80% {
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
  stroke-dashoffset: 0;
}
100% {
  fill-opacity: 1;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
}
}
```
よろしくお願いします。

filter:drop-shadowが効かない

ただいまRubyで再帰を理解しようとしています。(後で追加：順列の列挙（検索用）)
でも、途中でで何が起きているのかわからなくなってしまいます。
コード自体が切り貼りで間違っているかもしれません。。おかしな勘違いをしているかもしれません。
よろしければ教えてください。よろしくお願い致します。

```Ruby
def permutation(ary, new_ary = [])
  p new_ary if ary.length == new_ary.length

  ary.each do |n|
    next if new_ary.member? n
    new_ary.push n
    permutation(ary, new_ary)
    new_ary.pop
  end
end

permutation([1,2,3])
結果
[1, 2, 3]
[1, 3, 2]
[2, 1, 3]
[2, 3, 1]
[3, 1, 2]
[3, 2, 1]

```
うまく動いているようです。が、どう動いてこうなるのかを知りたく、
next if p new_ary.member? n と見えるようにして、あと
p new_ary.push n
p new_ary.pop と見えるようにしました。

```Ruby
結果（長くてすみません）
false
[1]
true
false
[1, 2]
true
true
false
[1, 2, 3]
[1, 2, 3]
true
true
true
3
2
false
[1, 3]
true
false
[1, 3, 2]
[1, 3, 2]
true
true
true
2
true
3
1
false
[2]
false
[2, 1]
true
true
false
[2, 1, 3]
[2, 1, 3]
true
true
true
3
1
true
false
[2, 3]
false
[2, 3, 1]
[2, 3, 1]
true
true
true
1
true
true
3
2
false
[3]
false
[3, 1]
true
false
[3, 1, 2]
[3, 1, 2]
true
true
true
2
true
1
false
[3, 2]
false
[3, 2, 1]
[3, 2, 1]
true
true
true
1
true
true
2
true
3

```
これを見ると、最初に引数aryの配列の1番目が、変数new_aryにあるか見て、無いのでnew_aryに代入しています。
次に再帰でメソッドpermutation([1,2,3], [1])を呼んでいるものと理解しています。

2回目のeachで、今度は引数aryの配列の1番目が、変数new_aryにあるので、次のnを評価して、これまたないので、new_aryに2を代入。
次に再帰でメソッドpermutation([1,2,3], [1,2])を呼んでいるものと理解しています。

3回目のeachで、今度は引数aryの配列の1番目も2番目も変数new_aryにあるので、次のnを評価して、new_aryに3を代入。
次に再帰でメソッドpermutation([1,2,3], [1,2,3])を呼んでいるものと理解しています。

そのあとから急にわからなくなってしまいます。表示されている結果は
true
true
true
ここまではまだそうだなあと思えるのですが、次に
3
2
false
[1,3]
となり、もうわからなくなってしまいました。
しまいにはpermutationに再帰するのなら、new_ary.popの出番がないのでは、とも
思うようになってしまいました。頭から湯気が出ています。
もし助けて頂ける方がいらっしゃいましたら、どうぞ、よろしくお願い致します。

再帰のコードで何が起きているのかわからなくなってしまいます。

Node.jsを用い、[こちらのサイト](http://resume.meieki.com/)のような、
「ユーザが入力した情報をPDFに表示」するWEBページを作成したいです。
動作としては以下の通りです。
１、WEBページにて、ユーザがフォームに情報を入力
２、テンプレートとなるPDFに１で入力した情報のみを描画
３、PDFビューアにて、情報の入ったPDFを表示

元々PHPで作ろうと考えていたのですが、急きょNode.jsを使用することとなり、
初めて使用する言語ということもあり実装方法に悩んでいます。

有用なライブラリや、参考になる記事等ありましたらご教示願います。
少し検索したところPDFKitやPDF.jsなどが使えるとのことでしたが、
実用されている記事が見つけられませんでした・・・。

以上、宜しくお願い致します。

Node.jsでPDFの出力

現在、自分と友人用にテーマを作成しています。

いろいろなテーマを見てみたのですが、
archive.phpなどで記事のリストを表示する場合、

- <ul><li>～</li></ul>
- <article>～</article>
- <section>～</section>
- <div>～</div>

の４種類を見たのですが、どれが正解なんでしょうか？
どれでも変わらないのでしょうか？

wordpressのarchive.phpなどに使うhtmlタグについて

作成したスクリプトをチェックするため、文字列のエスケープの必要な処理に関して調べています。

エスケープは、特定の文字が何らかの制御をする処理の前処理として必要であるという理解です。

以下の処理に対して、エスケープが必要であると認識していますが、他にもあるでしょうか？

・html 表示
・SQL 文の作成
・正規表現のパターン
・exec、system いったコマンド実行関数の引数

網羅性のある資料をどこかで見た気もするのですが、ちょっと辿れなくて＾＾；
ご教示いただけると幸いです。

エスケープの必要な処理とは？

現在PHPでコードを書いています。
友人とチームでやっているのですが、文字コードが異なっていたため
私：shift-jis→UTF-8に変更したところ

ブラウザで開いた場合文字化けが発生してしまいました。

環境：
XAMPP　Apache
ブラウザ：Internet Explorer

試してみたことは
php.iniの文字コードを変える、というのがあったのでそれを試してみたのですが治りませんでした。

目標としては、UTF-8での文字化けを直すことです。
なにとぞお願いいたします。

phpの文字コードについて

この文字化けをデコードしたいのですが、何をやってもうまくいきません。
```ここに言語を入力
Oãƒªãƒ`³ã‚°
```
**ISO-8859-1**のようなのですが、各種サイトやiconv、python, phpなどをやっても解読できず、困っています。
もし方法をご存知の方がいらっしゃいましたら、お知恵を拝借させてください。

お願いいたします。

＃タグ付けをPHP,Pythonにしていますが、これらの言語を使用しているわけではなく、解析に使用してみたが、だめだったという理由です。

文字化けの解決方法を探しています

javascriptを使って入力フォームの空白チェックがうまく出来ません。
あらかじめ、display ="none"されて非表示の見えない「送信ボタン」があって。
名前とメールの入力フォームの両方が入力がされたら「送信ボタン」が表示され送信可能状態になるように
プログラムを組みたいのですがうまく組むことが出来ません。
そもそも、フォームのチェックについて理解が出来ていなくてonclickなのかonchangeでやるべきか
別の方法を考えるべきなのか整理が出来ていません。
色々、駄目なところがありますが、よろしくお願いします。
～補足追記～
実際は、<input type="submit" value="送信" />送信フォームから何かを送信するわけではなく
ボタンのenabled/disabledの説明のために設置をしています。

実際に送信するのは、Stripeと言う決済機能の送信ボタンで
Stripeのボタンのenabled/disabledを制御したいのが今回の目的です。
よろしくお願いします。

※この質問自体が変なプログラムで、JSが切れられたら、送信ボタンが見えるから意味ないよね？と思われるかもしれませんが。

```
<form action="result.html" name="form1">
氏名（必須）　　：<input name="input01" size="20" type="text" required />
メール（必須）：<input name="input02" size="20" type="text" required />
<div id="test1">
<input type="submit" value="送信" />
</div>
<input type="submit" value="送信" onclick="checkForm1()"/>
</form>

<script>
document.getElementById("test1").style.display ="none";

function checkForm1(){
if(document.form01.input01.value == "" || document.form01.input02.value == ""){
document.getElementById("test1").style.display ="none";
}else{
document.getElementById("test1").style.display ="block";
}
}
</script>
```

JSで入力フォームの入力チェック

###やりたいこと
下記のHTMLがあるとき、

➀数字の要素（.flex > div）
→左に寄せたい。

➁その要素全体（.flex）
→.warpの左右真ん中に置きたい。

という２つを満たしたいです。

```html
<section class="section1">

<div class="wrap">

<div class="flex">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

</div>

</section>
```
###やってみたこと
次のCSSでは、各数字は左に来るものの、その要素全体は真ん中に来てくれません。

図のように、グレーの範囲の右側が大きくなってしまうのです。
![イメージ説明](86ad2c15bbe0fe43430b916931d56aa9.jpeg)

```css
/*数字の要素全体をグレーの左右真ん中にしたいCSS*/
.wrap {
    text-align: center;
    margin: 0 auto;
}

/*特に問題がないと思われるCSS*/
.section1 {
    background: #888;
    padding: 10px;
}
.flex {
    display: flex;
    justify-content: start; /*ビミョーなところ*/
    flex-wrap: wrap;
}
.flex div {
    background: pink;
    width: 50px;
    margin: 10px;
    text-align: center;
}

```
上のCSSの``/*ビミョーなところ*/``の``justify-content: start;``を``center``にすれば、数字の要素全体はグレーの真ん中には来るのですが、すると今後は数字の各要素が左寄せになってくれず、９や１０まで真ん中に来てしまうのです。

なんとか冒頭の２つを両立させる方法をご教示いただけませんでしょうか？

``table-cell``なども試したのですが、どうしてもできず質問させて頂きました。

よろしくお願いいたします。

flex:wrap;のときに、左右の幅を調整する方法

返り値が無いメソッドは、テストコードが書きにくいので、できるだけ返り値があった方が良いコードと言えるのではないかと思ったのですが、知識が乏しく確信にまで至りませんでした。みなさんは、返り値の無いメソッドについて、どのような考えがあるのでしょうか？
良い部分や悪い部分などを教えていただけないでしょうか？

返り値が無いメソッドは、悪いコード？

# ★ 質問

JavaScriptのプロトタイプチェーンについてはなんとなく理解しているつもりだったのですが、復習がてらに簡単なコードを書いてログを確認したら、Chromeのコンソールで出力される結果と、node環境で出力される結果が異なり、何が正しいのか混乱してしまいました。

以下に載せている最後の行で`Object.getPrototypeOf(child)`のログを出力しているのですが、`child`のprototypeは`Parent`なのでしょうか？それとも、`Child`なのでしょうか？(質問1)

また、`Object.getPrototypeOf(child)`を`typeof`で確認すると`object`と出るので、`Constructor Function`ではないのですよね？(質問2)

# ★ 書いたコード

```JavaScript
//test.js

'use strict';

class Parent {
	constructor(name) {
		this.name = name;
	}
	greet1() {
		console.log('Hi, My name is ' + this.name + '.');
	}
}

class Child extends Parent {
	constructor(name, age) {
		super(name);
		this.age = age;
	}
	greet2() {
		console.log('Hi, My name is ' + this.name + '.');
		console.log('I am ' + this.age + ' years old.');
	}
}

const child = new Child('taro', 10);
console.log(Object.getPrototypeOf(child));

```

# ★ 最後の行のログ

## Node
```
$ node test.js
> Child {} //最後の行のログ出力結果
```

## Chrome
![イメージ説明](0ab4137e78ef4c7f814008c539ef7ab4.png)

# ★　解決後の補足

以下の場合、どちらも出力結果はChromeコンソール上で`{constructor: ƒ}`となりました。

```
'use strict';

class Child1　{
	constructor(x){
		this.x = x;	
	}
}

const child1 = new Child1(5);

console.log(Object.getPrototypeOf(child1));


class Child2 extends function(){} {
	constructor(x){
		super();
		this.x = x;	
	}
}

const child2 = new Child2(5);

console.log(Object.getPrototypeOf(child2));
```

JavaScriptのprototypeがよくわからなくなった

#前提・実現したいこと

VirtualBoxで構築したCentosサーバーを
通常の物理マシンに移行する方法を検討しております

様々なパッケージを構築済なのでもし可能ならゼロから構築し直すのは避けたいです。

以下の環境から移行することは可能なのでしょうか？

**【移行元の環境】**
環境：VirtualBox
OS：Centos7
メモリ：2G
ディスク容量：10G

**【移行先環境】**
環境：物理-サーバー
OS：RedHat6.6
メモリ：8G
ディスク容量：30G


すみませんがどなたかお知恵をお貸し頂けると嬉しいです。

#追記・補足
もし違うOSへの移行ができない場合は
移行先には同じCentos7を入れようと思っています。
その場合はどのように移行したら良いでしょうか？