Tag Archives: javascript

基本

時間を表す言葉には時刻と時間間隔があるので時間という言葉ではあいまいになる。
どちらの場合も単位と基準点が問題になる。単位は秒とかミリ秒とかのこと、基準はUTCとか日本時間のこと。

Unix time stamp

UTCで1970/1/1からの秒を表す。今の値はこことかでわかる。

C#でこの値を得るには以下のコード

Int32 unixTimestamp = (Int32)(DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1))).TotalSeconds;

1	Int32 unixTimestamp = (Int32)(DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1))).TotalSeconds;

C#のDateTimeは0001/1/1からの100ナノ秒で管理しているようだ。３つの引数をとるコンストラクタはグレゴリオカレンダーで初期化するのでこれでいいらしい。

javscriptでこの値を得るには以下のコード

var ts = Math.round((new Date()).getTime() / 1000);

1	var ts = Math.round((new Date()).getTime() / 1000);

javascriptのDateはUTCで1970/1/1からのミリ秒で管理しているようだ。デフォルトのコンストラクタは今でgetTime()はミリ秒でUnix Epoch(=Unix time stamp)を返すので1000で割って秒にしている。

Unix time stampからオブジェクトをつくる

C#の場合は以下のようにやるらしい

public static DateTime UnixTimeStampToDateTime( double unixTimeStamp )
{
    // Unix timestamp is seconds past epoch
    System.DateTime dtDateTime = new DateTime(1970,1,1,0,0,0,0,System.DateTimeKind.Utc);
    dtDateTime = dtDateTime.AddSeconds( unixTimeStamp ).ToLocalTime();
    return dtDateTime;
}

public static DateTime UnixTimeStampToDateTime( double unixTimeStamp )

{

// Unix timestamp is seconds past epoch

System.DateTime dtDateTime = new DateTime(1970,1,1,0,0,0,0,System.DateTimeKind.Utc);

dtDateTime = dtDateTime.AddSeconds( unixTimeStamp ).ToLocalTime();

return dtDateTime;

}

これだとローカル時間が帰るので以下のように修正

public static DateTime UnixTimeStampToDateTime(double unixTimeStamp)
{
    // Unix timestamp is seconds past epoch
    System.DateTime dtDateTime = new DateTime(1970, 1, 1, 0, 0, 0, 0);//, System.DateTimeKind.Utc);
    dtDateTime = dtDateTime.AddSeconds(unixTimeStamp);//.ToLocalTime();
    return dtDateTime;
}

public static DateTime UnixTimeStampToDateTime(double unixTimeStamp)

{

// Unix timestamp is seconds past epoch

System.DateTime dtDateTime = new DateTime(1970, 1, 1, 0, 0, 0, 0);//, System.DateTimeKind.Utc);

dtDateTime = dtDateTime.AddSeconds(unixTimeStamp);//.ToLocalTime();

return dtDateTime;

}

javascriptの場合は以下

var date = new Date(UNIX_Timestamp * 1000);

1	var date = new Date(UNIX_Timestamp * 1000);

ソースコード

https://github.com/ambiesoft/blogprogs/tree/master/5705

CORSが難しい

2019年7月11日

admin

http No Comments

CORSはクロスサイト間のリソース管理。Javascriptから他のサイトのリソース取得を管理するためのプロトコル。

通常こういったクロスオリジンのアクセスは許されないが（ブラウザが許さない）サーバがあるhttpヘッダを返すことで許すことができる。

Access-Control-Allow-Origin

このヘッダを付けることで、クライアントはその値と自分のJSのサイトが一致していたら通信を許可する。.htaccessに以下のように記述すると、すべてのクロスオリジンアクセスを許す。

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
</IfModule>

Header add Access-Control-Allow-Origin "*"

</IfModule>

制限

通常は完全にアクセスを許すことはしたくないはずなので自分のサイトだけを登録するが、サイトが複数ある場合はデバッグ中のlocalhostを加えたい場合は面倒なことになる。

更にサイトがディレクトリを掘っていて、ディレクトリごとに.htaccessがある場合とかだっともっと複雑になる。

サイトが複数ある場合

とりあえず動いているものとして、以下の.htaccess。

<IfModule mod_headers.c>
SetEnvIf Origin "^https?://(localhost:8080|tango\.dip\.jp)" AccessControlAllowOrigin=$0
Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

SetEnvIf Origin "^https?://(localhost:8080|tango\.dip\.jp)" AccessControlAllowOrigin=$0

Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"

Header set Access-Control-Allow-Headers "Content-Type, Authorization"

</IfModule>

これはlocalhostとtango.dip.jpを許可する。返されるヘッダにはアクセス元のサイトのみが返るのだと思われる。

仕様によると以下の記述でもいいらしい。（試していない）

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://localhost:8080;http://tango.dip.jp"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

Header set Access-Control-Allow-Origin "http://localhost:8080;http://tango.dip.jp"

Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"

Header set Access-Control-Allow-Headers "Content-Type, Authorization"

</IfModule>

メソッド

上記の.htaccessにはメソッドの記述もあるが、これは許すメソッドを定義しているものと思われる。そのためにブラウザはOPTIONメソッドでリクエストしてこの情報を得るものと思われる。このときのURLはサイトのURLと同じと思われるので、PHPなどが動くときは２００が返るようにしておかないと、Chromeなどはエラーを出す。OPTIONのときはPHPの$_POSTがないと思われるので、このとき５００とかを返すとCORSがうまくいかない。

ChromeなどのエラーResponse to preflight request doesn’t pass access control checkはこのOPTIONを指しているものと思われる。

このように非常に面倒で、ヘッダとかを調べるのも面倒なので適当に書いた。ヘッダを確認するにはChromeのDEVTOOLSを使うといい。３０４になってしまう場合は、シフトキーを押しながらリロードするか、リロードボタンで右クリックして、ハードリロードなどを選ぶ。タイプコラムがxhrになっているのがスクリプトからのアクセス。

npm runのnode実行でonelineのjavascriptに引数を渡して実行する

2019年7月3日

admin

node No Comments

nodeでjavascriptを実行する場合、通常はnodeにファイルを渡してスクリプトを実行するが短いスクリプトの場合はコマンドラインにスクリプトを書くことができる。ちょっとしたスクリプトを書きたい場合はこうすることですべての情報がコマンドラインにしか存在しないのでよりポータブルになる。しかしコマンドラインの制約から文字列を囲むクォートやダブルクォートが書きにくいので、その点は注意する必要がある。Windowsではシングルクォートは通常の文字のように扱われるので、スクリプト全体をダブルクォートで囲い、スクリプト内部での文字列はシングルクォートで囲むようにする。

次にスクリプトに引数を渡したいときはnodeに渡す引数と区別するために、通常は最後に–（２つのハイフン）をつけて、それ以降の引数はスクリプトに渡されるものであることを指示する。

上記のことを組み合わせて、スクリプト内で引数を受け取り、コマンドラインでスクリプトとそれに渡す引数を渡すことができる。これを応用してnpm runに記述しておけば、ちょっとしたコマンドをpackage.jsonに登録することができる。jsonでダブルクォートを扱うときはバックスラッシュでエスケープすればいいので矛盾は生じない。

nodeでのスクリプトへの引数の渡し方

-eでスクリプトをそのまま指定。
–のあとのコマンドライン引数はスクリプトに渡される。

>node -e "console.log('aaa',process.argv[1])" -- bbb
aaa bbb
>

>node -e "console.log('aaa',process.argv[1])" -- bbb

aaa bbb

スクリプト内では引数はprocess.argvで受け取る。

npm runに引数を渡す

npm runはそのまま実行するだけのようなので以下のように書く。ダブルクォートはバックスラッシュでエスケープする。

  "scripts": {
    ...
    "myscript": "node -e \"console.log('aaa',process.argv[1])\" --"
  },

"scripts": {

...

"myscript": "node -e \"console.log('aaa',process.argv[1])\" --"

npm runを実行

>npm run myscript ccc

> myapp@0.1.0 myscript 
> node -e "console.log('aaa',process.argv[1])" -- "ccc"

aaa ccc

>

>npm run myscript ccc

> myapp@0.1.0 myscript

> node -e "console.log('aaa',process.argv[1])" -- "ccc"

aaa ccc

apacheでjsonを返す時httpヘッダを追加する

2019年6月18日

admin

Webアプリ No Comments

特殊なhttpレスポンスヘッダがあるとクライアントのjsからドメイン制限を無視して取得できる。apache2で設定する方法。

mod_headers.cを有効にする

$ sudo a2enmod headers
Enabling module headers.
To activate the new configuration, you need to run:
  service apache2 restart
$ sudo service apache2 restart
$

$ sudo a2enmod headers

Enabling module headers.

To activate the new configuration, you need to run:

service apache2 restart

$ sudo service apache2 restart

サーバのjsonを置いたディレクトリに.htaccessを置き、ここに以下の記述を追加する。
（.htaccessが有効になっている必要がある。有効になってない場合はサーバの設定ファイルに直接書くか、有効にする）

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "http://localhost:8080"
</IfModule>

Header set Access-Control-Allow-Origin "http://localhost:8080"

</IfModule>

ヘッダが帰ってきているかChromeで確認

Chromeで対象jsonを開き、[Ctrl]+[Shift]+Iでdevコンソールを開き「ネットワーク」タブの「All」を開く。[Ctrl]+Rと表示されたときは押す。

3xxが帰ってきているときは[Shift]を押しながらリロードする。

対象ファイルをクリックするとヘッダが見れる。

javascriptで試す

node + vscode が前提。ここではjsonの取得にaxiosモジュールを使ってみる。

axiosのインストール

vscodeのターミナルで以下を実行。

npm i axios

1	npm i axios

htmlの作成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Json Fetch Test</title>
</head>
<body>
    <div id="puthere"></div>

    <!-- CDN からaxiosをロード-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // axiosでjsonを取得
        axios.get("https://jsonplaceholder.typicode.com/posts")
            .then(res => {
                // 取得が成功するとここに来る（非同期）
                var result = ''
                for(item of res.data) {
                    result += `<h3>${item.title}</h3>`
                    result += `<p>${item.body}</p>`
                }
                document.getElementById('puthere').innerHTML = result
            })
            // 失敗するとここに来る。ブラウザのコンソールでエラーを確認
            .catch(err => console.log(err))
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Json Fetch Test</title>

</head>

<body>

// axiosでjsonを取得

axios.get("https://jsonplaceholder.typicode.com/posts")

.then(res => {

// 取得が成功するとここに来る（非同期）

var result = ''

for(item of res.data) {

result += `<h3>${item.title}</h3>`

result += `<p>${item.body}</p>`

}

document.getElementById('puthere').innerHTML = result

})

// 失敗するとここに来る。ブラウザのコンソールでエラーを確認

.catch(err => console.log(err))

</script>

</body>

</html>

リンク

このリンクのhtmlのjavascriptはhttps://jsonplaceholder.typicode.com/postsから取得している。次の例はこのサーバから取得。

.htaccessはすべてのクライアントから許可するように以下のように修正

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin *
</IfModule>

Header set Access-Control-Allow-Origin *

</IfModule>

リンク

このリンクが外部のクライアントからアクセスされた時のログは以下

178.175.135.99 - - [18/Jun/2019:21:08:48 +0900] "GET /jsraw/jsonfetch.jsonismysite.html HTTP/1.1" 200 657 "-" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"
178.175.135.99 - - [18/Jun/2019:21:08:52 +0900] "GET /api/gitappdata.out.json HTTP/1.1" 200 46697 "https://ambiesoft.com/jsraw/jsonfetch.jsonismysite.html" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

178.175.135.99 - - [18/Jun/2019:21:08:48 +0900] "GET /jsraw/jsonfetch.jsonismysite.html HTTP/1.1" 200 657 "-" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

178.175.135.99 - - [18/Jun/2019:21:08:52 +0900] "GET /api/gitappdata.out.json HTTP/1.1" 200 46697 "https://ambiesoft.com/jsraw/jsonfetch.jsonismysite.html" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

サーバとクライアントとクロスサイトスクリプティングが一緒になって複雑