常連

注目の的

社会貢献

質問力

自己紹介

さくらVPSを借りていろいろ遊んでおりまして、そのなかでnode.js(Express)を使って動いているアプリケーションに関してアドバイスをいただければと思っています。


- 「hoge.com」(仮)というドメインを取得しています。
- これまでhttp://hoge.comにアクセスすると、普通にwebページ(A)を開いていました。(var/www/html配下に置いたページです)
- 今回、それとは別にnode.js(Express)でアプリケーション(B)を作り、app.listen(11111);しました。
- iptableでport11111を開放したところ、http://hoge.comにアクセスするとアプリケーションBが開き、これまでのwebページAが見れなくなってしまいました(なぜかはわかりませんが、http://hoge.com:80にすると開く時もありました)。


できればサブドメイン「fuga」を使って
- http://hoge.com → webページAを開く
- http://fuga.hoge.com → アプリケーションBを開く

のようにしたいのですが、何をどのように設定したら良いのでしょうか。


ためしに`/etc/httpd/conf/httpd.conf`に以下のように書いてみたのですが、どうやら違うようです。
```
<VirtualHost *:80>
     ServerName fuga.hoge.com
     ProxyPass / http://localhost:11111/
     ProxyPassReverse / http://localhost:11111/
</VirtualHost>
```

ご存じの方いらっしゃったらお知恵いただけますとうれしいです。

node.jsで動いているアプリケーションにサブドメインを割り当てたい

Rest APIで単体のデータを作成、変更、削除する時は以下のようにしています。
```
POST /posts/:id/
PATCH /posts/:id
DELETE /posts/:id
```

では、複数のデータを一括作成、一括変更、一括削除する時のRest APIのエンドポイントはどのような形式のURIにすると良いのでしょうか？
ご教示頂ければ幸いです。

複数のデータを処理する時のAPIエンドポイントはどうするのか？

```
class Hoge {
  method1() {
    ・・・
  }
  method2 = () => {
    ・・・
  }
}
```
method1とmethod2の書き方の意味は違うのでしょうか？どのように使いわけるのでしょうか？

ES6 Classのメソッドについて

sort関数の実行順序について疑問があります。
下記のようなコードがあった場合、ブラウザはどのような解釈をしているのでしょうか？
```
    (function(){
      'use strict';
      var array = {
        1:['c','a','d','b'],
        2:['aa','cc','bb'],
      }
      console.log(array[1]);//["c", "a", "d", "b"]①
      console.log(array);//1:["a", "b", "c", "d"]②
      array[1].sort();
      console.log(array[1]);//["a", "b", "c", "d"]③
      console.log(array);//1:["a", "b", "c", "d"]④
    })();
```
①の箇所と③の箇所は自然な順序に思えますが
なぜ②の時点でarray[1]が既にソートされているのでしょうか？

以下の環境で検証しました
Crome 63.0.3239.132
Safari 11.0 (12604.1.38.1.7

js ソートの実行順序について

### 前提・実現したいこと

現在、「**縦書きで入力できるフォーム**」を作っています。
Windowsのchrome, IE11,Edge,Firefoxでは表示がうまくいったのですが、
MacのSafari、iPhoneのsafari,chromeではフォーム内の文字が「**横向き**」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
よろしくお願いいたします。


### 該当のソースコード
以下のコードでsafariに対してフォーム(input, textarea)を縦書きにするよう、CSSハックを書いています。
```css
_::-webkit-full-page-media, _:future, :root
input,
textarea {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
```

### 試したこと
ブラウザごとに以下をCSSハックで記述。
これでWindows上ではブラウザごとの対応ができました。
しかしMacのsafari、iPhoneのsafari, Chromeでは横書きのままでした。



**・IE11**
```css
@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop,
    input,
    textarea {
        -ms-writing-mode: tb-rl;
        writing-mode: tb-rl;
    }
}
```


**・Firefox**
```css
@-moz-document url-prefix() {
    input,
    textarea {
        -moz-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
}
```


**・Chrome **
chromeはフォームが縦書きにならないので、フォーム自体を回転し文字をwriting-mode: initalで戻しました。
```css
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input,
    textarea {
　　　position: absolute;
        writing-mode: initial;
        transform: rotate(90deg);
        transform-origin: top left;
    }
}
```


**・Edge **
chromeのcssハックが適用されてしまうため、上書きしています。
```css
@supports (-ms-ime-align:auto) {
　　input,
   　textarea {
        position: static;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        transform: none;
        transform-origin: none;
    }
}
```


### 補足情報
**Mac**
safari 10.1.2

**iPhone**
safari 11.0 Mobile

**参考にさせて頂いたサイト**
[HTML/CSSだけで縦書きの入力フォームをつくる](https://kuroeveryday.blogspot.jp/2017/04/vertial-input-forms.html?showComment=1517469996188#c938529383974582869)

[縦書きweb普及委員会　CSS WritingModeの仕様解説](https://tategaki.github.io/explan1.html)

iPhone（safari, chrome）で縦書きフォームを表示したい

ルータは異なるネットワークのノードと通信できる機器であり、
ルーティングテーブルのNW,NHをもとににバケツリレーのように目的のIPアドレスまでデータを送信し続けるしくみだと認識しております。

目的のIPアドレスがルーティングテーブル内に存在しないため、
ルータからデフォルトルート⇒インターネットに行きその後、目的のIPアドレスにたどりつくまでの流れを教えて頂きたいです。

インターネットに行かないまでのルータの処理については把握しています。

インターネットから外部のipアドレスへたどりつくまでの流れ

今年の元旦、8時59分60秒が挿入されたことで、多くのエンジニアの年末年始が仕事に追われる日々だったのではないかと思われます。そこで閏秒を挿入することで同期がおかしくなるということなのでしょうが(そもそもこの認識が間違っているのならご指摘下さい)この”おかしくなる”の詳細がわからず調べていたのですが、詳しく踏み込んだ説明はあまり見当たりません。CPU使用率が100％になりサーバーがダウンするということがあるというのも見つけたのですが、先の認識とCPU使用率の増加がいまいち繋がりません。どなたかご教授いただけないでしょうか。

閏秒挿入でなぜ多くのシステムがダウンするのか

多くの登録制のウェブサイト(Twitterとfacebookで確認しました）は、ログイン時のパスワードをformのパラメーターに直接載せています。
しかし、パスワードが直接渡ると、サーバー側で**（`分かりづらかったため追記３：`"クラッカー"ではなく"サーバー管理者"に）**パスワードが抜き取られる可能性が出てくるので、ユーザーにとっては不安であると思います。
そこで、パスワードをブラウザ側でハッシュ化してから送るような仕組みにすればこの心配は無くなると思うのですが、そのようなことは行われていません。これはどのような理由によるものなのでしょうか。

ハッシュ化することの問題点として、
パスワードが推測されやすい文字列になっていないか確認できない。
というのが考えられますが、
レインボーテーブルなどを使えば最低限のチェックはできるのではないかと考えました。

```
追記１　質問の重複について：
SSLを利用したWebサービスでログインパスワードを安全に保存するには？(https://teratail.com/questions/49293)
既に同じような質問がありました。重複した質問をしてしまいました。すみません。（何故か議論が途中で途切れているようにみえますが）
```
```
追記２　タイトルの修正：
すでに解決した質問ですが、質問内容が伝わりづらかったため、タイトルに対して修正を行いました。
旧題：多くのサービスがログイン時に生のパスワードをそのまま送っているのはなぜか
改題：多くのサービスがログイン時に生のパスワードをそのまま送っているが、「サーバー管理者」にパスワードを悪用されることはないのか
```

```
追記４　感想：
ユーザーがサービス毎にパスワードを変えないことに問題があるという回答をいただき、解決済みとしました。
恥ずかしながら、私はサーバー管理者による悪用の対策としてパスワードを使いまわすことの問題点を知りませんでした。
要するにパスワードを使い回すな、ということで、質問文が分かりづらかったので、難しい質問だと捉えられてしまった方はすみませんでした。

しかし、パスワードを使いまわしているユーザーが８割以上いる現状を考えると、
パスワードを使いまわさないように周知すると同時に、
生のパスワードを送らせないためのなんらかの対策があったらいいなと思いました。

サービス側がクライアントサイドでハッシュ化していることを証明するのは無理でしょうが、クライアント側で解決できる問題なので、
例えばブラウザに、
デフォルトで1Passwordなどのツールをユーザーに使わせるようにしたり、
パスワードの入力画面を検出して、パスワードとドメイン名を結合したものをハッシュ化して置き換える、
（これならクライアント内で完結できますし、複数のコンピュータでも問題なく使えるはず）
などのような対策があったらいいのかなと思いました。

```

多くのサービスがログイン時に生のパスワードをそのまま送っているが、「サーバー管理者」にパスワードを悪用されることはないのか

それぞれドメインの異なる各店舗ごとのウェブサイトと、それらをひとまとめにしたグループサイトがあり、各店の新着情報やスタッフブログなどの情報はグループサイト側の1つの管理画面で登録し、APIを使って各店舗個別のウェブサイトに情報を提供しています。
グループサイトには各店舗の情報をまとめて一覧表示する機能があります。

データベースは一つで、グループサイトとAPIはLaravelを使って一つのアプリケーションとして作ってあります。
グループサイト自体はAPIから情報を取得せずにデータベースから直接取得しています。

店舗ごと個別のサイトはデータベースを直接読まずにAPIからのみデータを取得しています。

グループサイトとAPIはサブドメインで別れていて example.com, api.example.com のようになっているので切り分けるのは難しくありません。

モデルやデータベースの接続情報は使いまわせるのでその点はいいのですが、APIにとっては無関係の処理があったり、将来的にAPIのみ軽量なフレームワークに変更するなどのアップデートができなくなるなどのデメリットもあります。

一般的にこういったサイトを構築する際、将来のことを考えて API のアプリケーションと公開サイトのアプリケーションは別々のアプリケーションとして組むべきなのでしょうか？

メインサイトとAPIは別々のアプリケーションとして作るべきでしょうか？

言葉の由来や、その用語の持つ意味、あるいは語源や使われてきた理由などを知りたいです。

わたしは独学プログラミングなので言語や用語の深いところまで分かりません。
なぜこのような用語が使われているのかとか、業界用語的なものはまったくの無知です。

たまに以下のような用語や作法に出会う事があり、なぜこのように表現するのかとか、業界用語の由来的なものを知りたいと思っています。

もしお分かりになる方は、ぜひともご教示お願い致します。
こういう時によく使うとか、こうなんじゃないかなど推測でも構いません。
ぜひよろしくお願いします。
　

---
**1.
● hoge（ほげ）foo（ふー）**
　
　なぜ 「hoge」 や 「foo」 を使うのでしょうか？これは世界共通で使いますか？もし由来なども分かると嬉しいです

---
**2.
● APIを「叩く（たたく）」**

　「たたく」とはどういう意味ですか？なぜ「たたく」と表現するのでしょうか？

---

**3.
●コミットする**

　「コミットする」とは、プログラマーがこの言葉を使う時は、どんな時でしょうか？

---
**4.
●古い言語について「大文字」だけ、または「小文字と大文字の混在」**

　プログラマーの年齢！？によって書き方が違うように思えます。例えば「VALUE、INT、BOOL」など、大文字で書く人、
　あるいは「hInst、bRet」など、変数の頭に小文字を使うのはなぜですか？

---

**5.
●変数を「短く表現する」**

　「Number」→「Num」、「return、result」→「ret」、「function」→「func」

---

**6.
●行間を開けない**

　たまに古いタイプの言語でコメントとコードの行間をぴったり詰めて書いているのを見かけます。これはなぜですか？
　単純に見ずらいとは思うのですが、もしかすると昔はコードが多く詰めて書かざるを得なかったなどがあるのか？？知りたいです。

   （例）
　//コメントコメントコメントコメントコメントコメント
   BOOL InitInstance(HINSTANCE hInst, int nCmdShow)
   //コメントコメントコメントコメントコメントコメントコメント
　LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);


---
**7.
●エンジニア と プログラマーの違い**

　語源からして職能が違うとは思いますが、エンジニアはプログラマーと同義と思っていますがどうでしょうか？
　日本と世界とでは違いはありますか？たとえば地位的な差があったとして、どちらかで呼び間違えた場合、失礼になったりしますか？

---

言葉の由来や、用語の持つ意味を知りたい

###前提・実現したいこと
同一HTMLをSafariとChromeでPDF書き出しを行ったところ、
出てくるファイルのレイアウトが全く異なっていたので、
理想であるChromeのような出力が可能な
wktohtmlみたいなライブラリを知りたい
もしくは、ソースを見直して、wktohtmlでも求めているChromeようなレイアウトのPDFを書き出したい

###発生している問題・エラーメッセージ

こんにちは。
私は現在動的に作成されたHTMLを
PDFとして書き出すプログラムを作ろうとしています。

まずは叩き台として、page.cssをも用いた
簡単なテーブルタグの雛形ファイルを作り
ブラウザで出力してみたのですが、
ブラウザによって書き出されるPDFが全く異なっています。
詳しくは添付しますが、Safariだと文字もレイアウトもとても小さく出力され
Chromeではだいたいこのくらいの描画が理想というものが出来上がります。

専門的な話には詳しくないのですが、
SafariはWebKit系、ChromeはChronium系とのことなので、
そのレンダリングエンジンの差がこうさせたのでしょうか？
wktohtmlを使用して書き出したものの、やはり出力されるデータは
Safariから書き出しを行った時と同じく、全てが小さなテーブルができるのみでした。

現状しようがなくAppleScriptにて直接Chromeを叩き、Chromeに開かせたページを保存させていますが、
これは応急処置であり、根源的な解決には至っていないので、
どうか、皆さんのお知恵をお借りしたいと、ここに投稿させていただいた次第です。

どうぞよろしくお願いいたします。


###該当の画像
![Chrome](8df88369ffe3c567f8aff4e49e396402.png)
![Safari](3b03a2e710cb1c9ebfbed817a2e48bb3.png)


###該当のソースコード
```css

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css">
    <style>
        /* プリント用スタイル */
        @media print{
            
            @page{
                size: A4 landscape;
                margin: 0;  /* header remove only Chrome */
            }

            body {
                width: 296mm; /* needed for Chrome */
            }

        }

        /* プレビュー用のスタイル */
        @media screen {
            body {
                background: #eee;
            }
            .sheet {
                background: white; /* 背景を白く */
                box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); /* ドロップシャドウ */
                margin: 5mm;
            }
        }



        .sheet {
            width: 296mm;
            height: 210mm; /* 1mm余裕をもたせる */
            /*20mm下げたい*/
            padding-top: 10mm;
            page-break-after: always;
        }


        table{
            font-size:5px;
            width:261mm;
            margin-left: 17.5mm;
            margin-right: 17.5mm;

            border-collapse: collapse;
        }

        th{
            font-weight:normal;
        }

        td{
            padding:0;
            height:3.5mm;
        }
            
        /* 列ごとの設定 */
        .column1{
            width:43mm;
        }
        .column2{
            width:105mm;
        }
        .column3{
            width:22.5mm;
        }
        .column4{
            width:33mm;
        }
        .column5{
            width:24mm;
        }
        .column6{
            width:33.5mm;
        }

        .height-wide > td{
            height:8mm;
        }

        .height-wide2 > td{
            height:1cm;
        }

        /* 全体の設定 */

        .centering{
            text-align:center;
        }

        .lefting{
            text-align:left;
        }

        .toping{
            vertical-align: top;
        }

        .table-header{
            border:solid 2px;
        }
        .table-header > th{
            border-style:solid;
        }

        .procedures td:nth-child(1){
            text-align: center;
        }

```

```html
<body class="A4 landscape">
    <article>
        <section class="sheet">
            <p style="margin:0; padding:1.5mm;"></p>

            <table border="2">
                <thead>
                    <tr class="table-header">
                        <th class="column1">title-a</th>
                        <th class="column2">title-a</th>
                        <th class="column3">title-a</th>
                        <th class="column4">title-a</th>
                        <th class="column5">title-a</th>
                        <th class="column6">title-a</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="centering"></td>
                        <td></td>
                        <td> </td>
                        <td> </td>
                        <td rowspan="34"> </td>
                        <td rowspan="34"> </td>
                    </tr>
                    <tr class="procedures">
                        <td></td>
                        <td></td>
                        <td> </td>
                        <td></td>
                    </tr>
                    <tr class="procedures">
                        <td></td>
                        <td></td>
                        <td> </td>
                        <td></td>
                    </tr> /* いか32行ほど同じ */
                    <tr class="height-wide2">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td class="toping"><br> </td>
                    </tr>
                    <tr class="height-wide2">
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td class="toping"><br> </td>
                    </tr>
                </tbody>
            </table>

        </section>
    </article>
</body>
```

ChromeライクなPDF書き出しを行いたい

難読化(minify)したJavaScriptを整形するためsublime text の HTML-CSS-JS Prettifyプラグインを用いています。
.jsbeautifyrc を設定をしていますが以下の2つがわかりません。

1: カンマ演算子を用いた式の連続を改行する設定
```ここに言語を入力
for (f = 0; f < 15; f++) e = {}, e.fac = 0, e.kiro = 0, e.reactance1 = 0, e.reactance2 = 0, e.name = 0, e.count = 0, e.doubletrack = 0, e.post = 0;

// カンマ演算子を用いた式の連続を改行する

for (f = 0; f < 15; f++) e = {},
                         e.fac = 0,
                         e.kiro = 0,
                         e.reactance1 = 0,
                         e.reactance2 = 0,
                         e.name = 0,
                         e.count = 0,
                         e.doubletrack = 0,
                         e.post = 0;

```

2: 三項演算子をif文にする設定

```ここに言語を入力
n > 0 ? count = 1 : count = 0;

// 三項演算子をif文にする↓

if (n > 0) {
    count = 1;
}
else {
    count = 1;
}
```

代替え方法があればお願いします。