くらつきねっと

月: 2017年2月

  • WXR-1900DHP2 と iPhone で VPN

    iOS が更新されていつの間にか PPTP が使えなくなったので、L2TP/IPSec が使えるルータとしてWXR-1900DHP2 を導入した。

    WXR-1900DHP2 はルータモードでしか VPN を生かせないので、NTT のルータと 2 段ルータになってしまう。これによって Windows のファイル共有で多少困ることがあるが、それは別記事にて。

    まず、回線元ルータの NTT PR-S300HI の「静的 NAT 設定」からポートを開放する必要がある。ここで困ったのが何番を WXR-1900DHP2 に通せばいいのかが、調べていてもいまいちはっきりしない。

    結果的にはこの情報が役に立った。

    つまり

    • UDP 500
    • UDP 4500

    を WXR-1900DHP2 に流れるようにすればよい。

    これで iPhone の設定から、「一般」 -> 「VPN」 -> 「VPN構成を追加」と辿り、タイプを「L2TP」とすることで接続できるようになった。

     

     

  • Raspbian Jessie で IP アドレス固定

    久しぶりに Raspberry pi を再セットアップする必要があって、つまずいたメモ。

    Wheezy までは IP アドレスを固定するのに /etc/network/interfaces を変更していたが、Jessie からはそこに書いても反映されない。

    Jessie からは /etc/dhcpcd.conf に次のように追記する。

    interface eth0
static ip_address=192.168.24.200/24
static routers=192.168.24.1
static domain_name_servers=192.168.24.1
  • DOD LS430W のバッテリ交換

    DOD LS430W のバッテリ交換

    長らく愛用していたドライブレコーダーの DOD LS430W が終了時に再起動ループに入るので、バッテリ交換を行うことにした。

    購入した Lisway に交換用のバッテリが売られているので購入。在庫が 0 だったので入荷お知らせメールを登録しておいて、お知らせが来てから購入した。

    購入時は 1580 円 + 82 円(定形郵便) = 1662 円だった。

    2 日ほどでバッテリは到着したが、交換にえらく苦労したのでその記録。

    (さらに…)

  • jQuery UI + Python で ajax な autocomplete

    社内向けシステムの使い勝手向上と、今後のシステム開発に向けてフォームにオートコンプリートをつけようと苦戦した記録。

    静的候補を表示する

    jQuery で autocomplete を実現しようとすると jQuery UI のお世話になる。参考にしたページはこちら。

    最も簡潔な実装方法は、フォームと同じファイルにリストを用意する方法。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

$(function() {
    var data = [
        'にんじん',
        'たまねぎ',
        'じゃがいも',
        'きゅうり'
    ];
    
    $('#item').autocomplete({
        source: data
    });
});

<title>autocomplete のサンプル</title>
</head>
<body>
<input type="text" id="item" value="" />
</body>
</html>

    最も簡潔な例はこんな感じ。単に配列を用意するだけ。

    Ajax で動的に候補を読み込む

    これも同じサイトの別記事を参考にした。

    $(function() {
    $('#item').autocomplete({
        source: './autocomplete.py'
    });
});

    パラメータ “source” を候補を取得する CGI 等にするだけで OK. CGI 側は候補を JSON で返せば良い。クライアント側の実装はこれで完了なのだが、サーバ側の実装で苦戦したのでそれについて記述する。

    動的候補を用意するサーバ側の実装

    今回は実装しているサーバの都合で Python による実装としている。(余談だが、PHP 使わなかったのは Linux PHP + FreeTDS + Windows SQL Server という特殊な環境でどうしても PHP のドライバが落ちて使えなかったから。ソースを修正してリビルド……というところまでしたけど、実用に持っていくのに手間がかかりすぎて使い慣れた Python  に逃げた)

    今になって冷静に読んでみると参考ページには書いてあるのだが、初めクライアントからの入力途中の値を得るのにフィールドの名前がわからずに随分と彷徨った。答えは簡単で、 term というフィールドがそれだ。

    なので例えば Python であれば

    import cgi

form = cgi.FieldStorage()
term = form.getfirst('term')

    という感じで取得する。

    取得した term を使ってデータベースなどに照会をかけて、得られた結果をクライアントに JSON 形式で返す。

    以下は簡潔にするため固定値の場合。

    import json

data = [
    {label: 'にんじん', value: '00000001'},
    {label: 'たまねぎ', value: '00000002'},
    {label: 'きゅうり', value: '00000003'}
]

print('Content-type: application/json; charset=UTF-8\r\n')
print(json.dumps(data))

    Content-type を出力していないと 500: Internal Server Error をはいてしばらく悩んだ。

    Ajax でのデバッグは通信内容が目に見えないことも多いので、例えば IE なら F12 キーで Web 開発ツールを起動して Network の通信内容を見てみると原因を特定しやすい。