月別アーカイブ 11月 2017

著者:ym

ISPの速度改善と光コラボ

Google スピードテスト

Google スピードテスト

Amazon Echo いつだろ?最近、自宅でAmazonTV(でhulu)、iPhoneでYoutubeとiPadでAbemaTVとか、余裕で同時に見たりすることもある我が家。Amazon Echo が増えたら、まあ増えなくてもインターネットトラヒックがものすごいことになってます。

その影響もあって、最近ISPの混雑ぶりがものすごいですね。会社でも自宅でも。そんな中、各ISP事業者は対策を出し始めてきています。

ニュース 2017年7月25日-「OCN」における通信品質向上のための取り組みについて – NTT Com 企業情報 – NTTコミュニケーションズ 企業情報

といっても3年くらい前から使えたのですが、目的がIPv6だったりするので、利用しているのは少数。でも、ここ最近は混雑の品質改善でIPoE方式のIPv6化を進めてきています。

OCNはまずは、光コラボFVNOな、「OCN光」と「OCN for ドコモ光」に対してサービス提供していますが、「フレッツ光ネクスト」回線への展開はまだのようです。弊社の展開する「光ドライブ」ISPはコラボモデルではないですが足回りはOCNサービスになるので、今後の展開が気になります。

  • この記事いいね! (0)
著者:aoki

hamamatsu-gnss.org にてRTK-GNSS用基準局データの常時無償配信しています


シーポイントラボでは静岡大学と共同でRTK-GNSS用基準局データの常時無償配信しています。
以下のサイトで詳細、配信情報を見ていただく事が可能です。
https://hamamatsu-gnss.org/

配信システム詳細

基準局詳細

アンテナは静岡大学浜松キャンパスに設置されており半径10kmほどをカバーしています。
ただ実際には半径30kmほどは利用できますので浜松市の大半で高精度測位が可能となっています。
手続き等は必要ありませんので是非高精度測位にご興味のある方は試してみて頂けると幸いです。
※ 今後申請制等にする可能性はあります。

  • この記事いいね! (0)
takahashi 著者:takahashi

Internet Explorer でGETが予期しない動作をする

高橋です。

現在開発中のシステムで、サーバー側のプログラム(PHP)へGETで値を渡す処理を書いていたのですが、InternetExplorerで実行すると何故か正常に値が渡せないという現象が発生していました。
他のブラウザでは問題なく動作するので、プログラム側の不具合ではないようなのですが、IEでアクセスする方も少なくないので、解決策を調べてみました。

1.URLが約2083文字を超えるとIEで扱えない

IE11で使用可能なURL文字数が2083文字しかない件 – 文系プログラマによるTIPSブログ
によると、InternetExplorerでは、URLの最長文字列長は2083文字までらしく、それ以上は認識できないとのこと。
GETでパラメーターを複数入れると、URLがどんどん長くなっていってしまうため、あまり渡す値が多い場合は注意が必要かもしれません。

2.Eで2番目以降のGETパラメータが実体参照になり値が取得できない

少し古い記事ですが
IEで2番目以降のGETパラメータが実体参照になり値が取得できないバグ – DevAchieve

によると、GETで渡すパラメーターの1個目と2個目の間にいれる&記号によって、2個目以降の値が実体参照として処理されてしまうことがあるとのこと。

他にもGETで渡したパラメーターの値が文字化けしてしまうケースなど、IEでは予期しない動作をしてしまうことがあるようです。

いろいろ考えた結果、デバッグの際はIE以外のブラウザでURL直打ちで値を渡せるGETを使い、うまく動くことを確認したらPOSTに切り替える方法で運用することにしました。

大抵のフレームワークではメソッドの判定を簡単に行うことができるように関数が用意されています。
例えばfuelでは

if( Input::method() == 'POST' ) {
   //POSTされた場合の処理
}
if( Input::method() == 'GET' ){
  //GETされた場合の処理
}

のように、メソッドに応じて処理を書き分けることもできます。
中の処理を同じものにしておけば、クライアント側の使用するメソッドを切り替えるだけで済むので便利です。

今後はIEを考慮しないWebアプリも増えていきそうですが、現時点ではIEがまだ現役で使われているところも多いかと思います。
他のブラウザとIEの互換性を確保するためには、いろいろ工夫していく必要がありそうです。

  • この記事いいね! (0)
村上 著者:村上

【備忘録】多次元の連想配列を複数の条件でソートする方法

PHPで多次元の連想配列のソートをする機会があったので、備忘録として。

ソートには、「array_multisort()」という複数または多次元の配列をソートできる関数を利用します。

array_multisort()関数のマニュアルについてはこちらから。
http://php.net/manual/ja/function.array-multisort.php

 

今回はサンプルとして、下記のようなデータを使用します。
こちらのデータを、年齢誕生月の昇順で並び替えを行います。

$data = array(
    array("no" => "1", "name" => "田中", "age" => 30, "birth_month" => 6),
    array("no" => "2", "name" => "鈴木", "age" => 15, "birth_month" => 8),
    array("no" => "3", "name" => "山田", "age" => 22, "birth_month" => 11),
    array("no" => "4", "name" => "遠藤", "age" => 30, "birth_month" => 9)
);

 

まず、ソートしたい列のデータを取り出し、ソート用の配列を作ります。
今回は、年齢と誕生月でソートしたいので、$tmp_age$tmp_bmonthという配列を用意し、それぞれに年齢と誕生月のデータを格納します。

foreach ($data as $key => $value) {
    $tmp_age[$key] = $value["age"];  // $tmp_age に年齢データ格納
    $tmp_bmonth[$key] = $value["birth_month"];  // $tmp_bmont に誕生月データ格納
}

 

ソート用の配列に各データを格納出来たら、array_multisort()関数でソートします。
関数の引数には、「ソートしたい列データの配列」、「ソート順」、「ソート条件」という組み合わせを条件分だけ繰り返し、最後にソートしたい連想配列を指定します。
なお、「ソート順」、「ソート条件」については省略可能で、省略した場合は昇順になります。

array_multisort($tmp_age, SORT_ASC,  // 年齢データを昇順でソート
                $tmp_bmonth, SORT_ASC,  // 誕生月データを昇順でソート
                $data);  // ソートしたい連想配列

なお array_multisort()は、成功した場合には TRUE を、失敗した場合に FALSE を返します。

 

ソート後の連想配列を var_dump で取り出してみた結果がこちら。

array(4) {
  [0]=>
  array(4) {
    ["no"]=>
    string(1) "2"
    ["name"]=>
    string(6) "鈴木"
    ["age"]=>
    int(15)
    ["birth_month"]=>
    int(8)
  }
  [1]=>
  array(4) {
    ["no"]=>
    string(1) "3"
    ["name"]=>
    string(6) "山田"
    ["age"]=>
    int(22)
    ["birth_month"]=>
    int(11)
  }
  [2]=>
  array(4) {
    ["no"]=>
    string(1) "1"
    ["name"]=>
    string(6) "田中"
    ["age"]=>
    int(30)
    ["birth_month"]=>
    int(6)
  }
  [3]=>
  array(4) {
    ["no"]=>
    string(1) "4"
    ["name"]=>
    string(6) "遠藤"
    ["age"]=>
    int(30)
    ["birth_month"]=>
    int(9)
  }
}

年齢・誕生月で正しくソートできました。

 

単に連想配列の昇順・降順のみでしたら、asort()arsort() を利用すれば良いのですが、多次元の連想配列で、かつソートの条件が複数の場合は、ソート用の配列が要るなど、少しややこしかったですね。
が、今後利用する機会が多々ありそうなやり方でしたので、きちんと覚えたいと思います。

  • この記事いいね! (0)
著者:ym

総務省からパスワード無しのWi-Fiアクセスポイントを規制との指針

総務省から 2020 年のオリンピックに向けて Wi-Fi の暗号化パスワード不要なアクセスポイントを”原則として”規制する方針が出てきました。

公衆無線LANのあるお店

公衆無線LANのあるお店

総務省は15日、情報漏洩(ろうえい)やサイバー攻撃に利用される危険性のある、パスワード不要の公衆無線LANアクセスポイントを原則として規制する方針を固めた。今年度中に有識者会議で課題をまとめ、来年度に公衆無線LAN事業者向けのガイドライン(指針)を改定する。訪日客が増加する2020年東京五輪・パラリンピックに向けて公衆無線LANのセキュリティーを強化することでサイバー攻撃の増加を防ぐ考えだ。

公衆無線LAN、規制強化へ パスワード不要のアクセスポイント原則禁止 – SankeiBiz(サンケイビズ)

確かにWi-Fiは電波なので、有線LANの傍受よりは明らかに簡単。インターネット上のサービスを使うということは、洩れる可能性は十分にあるわけです。多要素認証も、あくまでも想定している対策であって、想定外のバグや脆弱性は潜んでいます。でも、インターネットは常に情報が洩れる場所、常日頃思っていれば、自然と対策ができるはずです。 VPN を張ったりhttps通信が行われているかを確認したり、オンプレミス(手元)とクラウド(ネット上)を、情報に応じて使い分けたりと。

  • この記事いいね! (0)
村上 著者:村上

【備忘録】jQueryの要素追加のメソッド一覧

現在開発中のWebシステムでjQueryでの要素追加メソッドを使うことがあったのですが、すぐに忘れてしまうのでまとめてみました。
ちなみに私は、.after()や.before()などは、名前の通りのメソッドなのでわかりやすいし覚えやすいのですが、.append().prepend()あたりを忘れやすいです。

 

.after()

$('div').after('追加要素');

一番わかりやすいし、使いやすいので、比較的利用頻度が高めなメソッドです。
指定した要素のすぐ後ろに、要素を追加します。

上のコードを実行するとこんな感じになります。
なお、今回掲載しているサンプルコードでは、div要素に対して、p要素を追加しています。

<div>基準となるdiv要素</div>
<p>追加したp要素</p>  <!-- after()で追加したp要素 -->

 
似たようなメソッドとして、.insertAfter()があります。

$('追加要素').insertAfter('div');

実行結果は、上で記載した.after()と同じになります。
追加したい要素と、追加の基準となる要素の順番が逆になるので、こちらは少し分かりにくい印象を受けます。

 

.before()

$('div').before('追加要素');

こちらは.after()と似ていますが、指定した要素のすぐ前に要素を追加するメソッドです。
分かりやすいですが、今まで書いたコードの中ではそこまで使用頻度は高くなかったです。
 

<p>追加したp要素</p>  <!-- before()で追加したp要素 -->
<div>基準となるdiv要素</div>

 
こちらのbeforeにも、似たようなメソッドとして、.insertBefore()があります。

$('追加要素').insertBefore('div');

こちらの実行結果は、上で記載した.before()と同じになります。

 

.append()

$('div').appand('追加要素');

こちらも良く使うメソッド。
指定した要素の中に、要素を追加します。
 

<div>
    <b>元々記述してあったb要素</b>
    <p>追加したp要素</p>  <!-- append()で追加したp要素 -->
</div>

なお、要素を追加するときは、指定した要素(今回はdiv要素)の一番後ろに要素が追加されます。
 
似たようなメソッドとしては、.appendTo()があります。

$('追加要素').appendTo('div');

実行結果は上で記載した.append()のサンプルと同じ結果になります。

 

.prepend()

$('div').before('追加要素');

こちらは.append()メソッドと似ていますが、指定した要素の一番前に要素が追加されます。
 

<div>
    <p>追加したしたp要素</p>  <!-- prepend()で追加したp要素 -->
    <b>元々記述してあったb要素</b>
</div>

こちらは使用頻度は低め、というかまだ実際に使ったことはないですね。
 
こちらにも似たようなメソッドとして、.prependTo()があります。

$('追加要素').prependTo('div');

実行結果は上で記載した.prepend()のものと同じです。

 

ざっくりとまとめましたが、要素を追加するメソッドとしてはこのあたりを知っていればいいかと思います。
他にも.wrap()メソッドという、指定した要素で対象の要素を囲むメソッドもありますが、こちらは使う機会はあまりないかと思い、割愛させていただきました。
もし間違っている場合は、そっとご指摘をお願いします。

  • この記事いいね! (0)
takahashi 著者:takahashi

位置情報配信プロトコルのNTRIPをNginxでリバースプロキシする方法

高橋です。

ご存知の方もいらっしゃるかもしれませんが、静岡大学浜松キャンパスに設置された高精度のGNSSアンテナを用いた測位情報を配信するシステム(hamamtsu-gnss.org)が整い、ついに浜松市内でRTK(リアルタイムキネマティック)ができる環境が整いました。

詳しくは
https://hamamatsu-gnss.org/
をご覧いただけましたら幸いです。

ざっくり説明するとRTKを行う際、実際に自分の位置を計測する”移動局(ローバー)”と、厳密な位置情報が既にわかっている場所に置かれた”固定局(ベース)”の2つが必要となってきます。したがって移動局は何らかの方法で固定局の情報を受信し続ける必要があるのですが、その方法として、”インターネット”経由で受信を行う方法があります。
今回開設されたhamamatsu-gnss.org局もインターネット経由で位置情報を配信するタイプの固定局で、配信プロトコルとして”NTRIP”と呼ばれるものを利用しています。

さて、そのhamamatsu-gnss.orgを開設する際に、”大学などでも受信できるように80番ポートで通信できるようにしてほしい。”という話がありました。
大学などの教育機関では、ネットワークに制限を設けているところが多く、80(http)、443(https)あたりの必要最低限のポートしか開けていないところも多くあります。
しかし、hamamatsu-gnss.orgのホームページも同様に80番ポートを使用するので、このままでは両立ができません。

最近はNode.jsやRuby on Railsなどが出回ってきて、同ホストに複数のWebサーバが立つことも少なくはなくなってきているので、今回のように一つのポートを取り合ってしまうような事態も往々にしてあります。こういう場合は”リバースプロキシ”という仕組みを用いることで一つのポートを複数のサーバープログラムで共有することができます。

今回も、まず思いついたのはこの方法だったのですが、今回共有させたいのはNTRIPという得体のしれないプロトコル。
いろいろ調べてみてもNTRIPとHTTPを同時にプロキシできるソフトやプログラムは見つけられませんでした。

どうしよかと困っていたところ、あることが判明。

http://gpspp.sakura.ne.jp/diary200703.htm
こちらのサイトで解説されているようにNTRIPはなんとHTTPベースのプロトコルでした…!(プロジェクトを共同で進めている木谷先生に教えていただきました。)

一応実験としてブラウザからNtip配信のポートに直繋ぎしてみたら、ちゃんとレスポンスが返ってきました。

telnetでも確認しましたが、ちゃんと応答が返ってきます。

しかし、NTRIPがHTTPのデータとして扱うことができるというのであれば話は早い。
上にあげたのと同様にリバースプロキシしてやれば共存させられます。

ということで早速設定。
リバースプロキシには非常に柔軟な設定ができる有能なNginxを使います。
(NginxはWebサーバーでありながらHTTP以外にもimapやpop、さらにはtcp(ドメインベースは不可)のプロキシができたりする、いい意味でかなり変態なソフトです。)

早速設定していきます。
一部省略してますが、以下のような設定にしました。

バーチャルホスト(https)

server {

  listen 443 default_server; #443番にアクセスされた時のデフォルトのバーチャルホストに設定

  ssl on;
  ssl_certificate /path/to/ssl.pem; #SSL証明書のパス
  ssl_certificate_key /path/to/sslkey.pem; #SSL証明書の秘密鍵のパス

  client_max_body_size 1g;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # クライアントの IP アドレス
  proxy_set_header X-Forwarded-Host $host; # オリジナルのホスト名クライアントが Host リクエストヘッダで渡す。
  proxy_set_header X-Forwarded-Server $host; # プロキシサーバのホスト名
  proxy_set_header X-Real-IP $remote_addr;
  location / {
    proxy_pass https://localhost:8081; #プロキシの向き先の設定(https)
  }
}

バーチャルホスト(NTRIP)

server {
    listen 80 default_server; #80番にアクセスされた時のデフォルトのバーチャルホストに設定
    server_name .ntrip.hamamatsu-gnss.org;

        client_max_body_size 1g;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Connection "";

     #伝送を効率化するチューニング
        keepalive_timeout 0; #キープアライブ無効化
        tcp_nodelay on; #パケットを極力まとめて送付するNagleアルゴリズムを無効化
        tcp_nopush off; #関係なさそうだが一応設定
        proxy_buffering off; #バッファリング無効化(重要)
        #効率化設定ここまで
        location / {
                proxy_pass http://localhost:2101; #プロキシの向け先をNTRIPサーバーに設定
        }
}

当環境では今後を考えてhamamatsu-gnss.org:80へのアクセスはhamamatsu-gnss.org:443へリダイレクトさせてますが、80番でWebページを待ち受けることも可能です。

回線の輻輳を防ぐためにある程度データをまとめて送付しようとする機能がNginxにありますが、ストリーミングの場合は遅延につながってしまいます。
チューニングはこの設定の無効化が主となっています。

HTTPに準拠している以上はhostヘッダーにアクセス時のホスト名を含めるルールになっているのですが、一部のNTRIPクライアントでアクセスしたときは何故か判定がうまく行かずにデフォルトのバーチャルホストへつながってしまうことがありました。
Webページの方は最近のブラウザであればデフォルトでなくても問題なくつながるので、80番ポートのデフォルトをNTRIP側に設定してあります。

これで無事NTRIPが一般配信できるようになりました。

今後、RTK-GNSS向けの位置情報の配信サービスを構築予定…という方は是非参考にしていただけましたら幸いです。

hamamatsu-gnss.orgはGPS以外にも複数の測位衛星から受信したデータを配信していて、RTK-GPSよりも高い精度で測位ができます。
全国には他には殆どない設備ですので、是非ご活用いただけましたら嬉しいです。

———————————————————-

位置情報の精度、センチ単位に 静大准教授ら研究 – @S
http://www.at-s.com/news/article/education/college/367429.html

※この記事は、以前私が書いた記事の本文を一部修正したものです
  • この記事いいね! (0)
著者:ym

インターネットでの通話

佐鳴湖のふれあい橋

佐鳴湖のふれあい橋

中国でスカイプの配信が停止をくらったようです。まだ、既存利用者には影響は無い様だけど、スカイプ自体が停止する日も近い!?

今の時代、スマホ、iPhone、PC、どれを使っても簡単に利用できる部分が優先されているけど、品質はどれもいまいち。音声コーデック、ビデオコーデック、どれも公開された同じ仕組みを使用しているわけですから、誤差はあるにしても、どのソフトウェアを使っても品質は同じです。そうなると、そのデータ(パケット)を橋渡しをしている根本はインターネット回線なので、パケットを小さくするか、回線の安定性と増強するか。

たとえば IETF で標準化された Opus は Skype が開発して無償化した SILK コーデックと、CELT コーデックを組み合わせたコーデックとなっていて、今の時代の WebRTC を実現するには必要不可欠な存在になってたりします。

根本は Skype 、やはりMicrosoftが買収するだけのことはある。が、しかし切断されるとなると。

  • この記事いいね! (0)
村上 著者:村上

Safariで「YYYY-MM-DD HH:II:SS」形式をDate.parse()するとNaNを返す問題とその対処法について

昨日この仕様でハマったので覚え書きもかねて。

JavascriptのDate.parse()とは、カッコ内の日時文字列を解析して、1970年1月1日 00:00:00からのミリ秒数に変換してくれる関数です。
具体的には下記のように使用します。

Date.parse('Thu, 1 Nov 2017 13:41:00 GMT+0900');
// =1509511260000

が、この解析できる日付文字列の形式が限られており、よくデータベースで用いられている「YYYY-MM-DD HH:II:SS」形式の日付文字列を入れてしまうとNaNを返すとのこと。

どうやら文字列の中にハイフンが入っていることが原因のようです。
また、Date.parse()だけではなく、new Date()のなかにハイフンを用いた日付文字列を入れた場合でも、同じくNaNを返す仕様になっているとのこと。
なお、一部のブラウザでは、ハイフンにも対応しているようで Google Chrome では、「YYYY-MM-DD HH:II:SS」形式でも、正しくミリ秒数が返ってきました。
普段使用しているブラウザが Google Chrome だったため、他ブラウザで動作検証するまで気が付きませんでした。

 

こちらの仕様については、ハイフンスラッシュに置換することで対応できました。
具体的なコードはこちら。

Date.parse([日付文字列].replace(/-/g , "/"));

replace関数を用いて、ハイフンをスラッシュに置換することで、無事日付のミリ秒数が取得できました。

 

以上、今回私がハマったJavascriptの関数でした。
そもそも、日付をミリ秒数に変換するなんてこと早々しないので、実際に触ってみるまで、こんな仕様になっているとは全く知りませんでした。
原因がわかってしまえば対処は難しくありませんでしたが、知らないと原因特定までに時間がかかりそうな仕様でしたので、Javascriptで日付を扱うときは十分お気を付けください。

  • この記事いいね! (2)
著者:aoki

HHRC防犯例会で白バイが5台集合!


私青木は浜松ハーモニーロータリークラブに所属してまして通常は青色パトロールと呼ばれる青い回転灯を付けての防犯パトロールを行っていますが、昨日は中央署と共同での防犯例会でソラモにて白バイが5台も集まる防犯啓発活動でした。

このような感じでかなり青色は目立ちます。

ソラモに白バイがやってきました!

白バイ5台が1か所に集まるという事はほとんどない様で中々見れる光景では無いですね。

バイク好きとしては間近で見れてとても嬉しいですし憧れてしまいますね。
速度はとてもゆっくり走ってますが逆にそれがすごい、一切ふら付くことなく綺麗に走ります。

バイクのおしりもかっこいい。

警察のヒーローでしょうか。
ちょっと名前は分かりませんでしたが並んで撮影。
雨も降って寒い中でしたが見に来て頂いた皆様、ありがとうございました。
今後も少しでもロータリーでの活動で防犯に役立てればと思っております。

  • この記事いいね! (1)