@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

Vue.js+VueRouterを使っているときに#idでページ内を移動する

vue routerを使っているとページを示すために #/route が利用されているので、aタグやrouter-linkでidへスクロールするリンクが作成できない。 (そのidに対応するページをvue routerが探してしまう)

そこでvue routerの持つルーティング情報を監視してJSでスクロールさせる方法を取り入れてみると ページ内の指定したidのついた要素までスクロールさせることがでた。

Read more

macの辞書を引くコマンドをswiftで書くと速かった

macの辞書をターミナルで引ければ楽で速いかなと思い調べたが、Dictionary.appが起動するものとPythonスクリプトしか見当たらなかった。 しかもPythonスクリプトはちょっともたつく。

中身はObjective-Cバインディングを使っているようなので、Swiftで書いてみたらバイナリも生成できるし速かった。という話。

Read more

シンプルなリバースプロキシ

ローカルでnginxもapacheも動かしていない状況でリバースプロキシが必要になったのでNode.jsでシンプルに。

背景

フロントエンドとバックエンドを別々に開発していると、XSRF扱いになりAPIを叩けず面倒。

解決方法を間違っている気がするが、フロントエンドのホスティングAPIへのプロキシを同じサーバーにまとめることで回避する。

想定する構成

  • localhost:80
    • APIサーバが動く
    • Elasticsearchなど
  • localhost:8080
    • フロントエンド開発中のサーバ(npm run dev等で起動したwebpackのdevサーバーなど)
  • localhost:8090
    • リバースプロキシになるサーバ
    • /apiが80番ポートに、それ以外の/が8080番ポートにプロキシされる
    • ここにアクセスして動作確認をする

localhostに限らないので、利用したい環境に合わせて以下のURLを読み替えてください。

実装

npm i http-proxy だけ必要なはず。

var http = require('http');
var fs = require('fs');
var url = require('url');
var httpProxy = require('http-proxy');

var port = process.env.PORT || 8090;
var logPath = './log';
var apiServer = 'http://localhost:80';
var frontServer = 'http://localhost:8080';

function _log(file, data, callback){
  fs.appendFile(file, data, callback);
}

function log(data){
  console.log(data);
  _log(logPath, data, function (err) {
    if (err) throw err;
  });
}

function requestHandler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  var urlobj = url.parse(req.url, true);

  log(req.method + ' ' + urlobj.pathname + '\n');

  var proxy = httpProxy.createProxyServer();
  if (urlobj.pathname.match(/^\/api\//)) {
    // もしAPIが localhost:80/apiで動いているのならこの置換は不要
    req.url = req.url.replace(/\/api\//, '');
    log('replaced: ' + req.url);
    proxy.web(req, res, {target: apiServer});
    return;
  } else {
    log(req.url);
    proxy.web(req, res, {target: frontServer});
  }
}

http.createServer(requestHandler).listen(port);
console.log('listening http://localhost:' + port);

起動方法

上記実装をproxy.jsとして保存してnodeで起動する。

node proxy.js

ポート番号を変更するなら環境変数PORTで指定する。

PORT=1234 node proxy.js

ログはカレントディレクトリのlogに出力される。 ただアクセスされたURLを追記しているだけなので、他のフォーマットの出力にすればLogStashに流し込んだりもできるはず。

参考にしたもの

  • Edisonの設定用画面として動いていたウェブサーバー

コメント

こんなものこそ練習にCommon Lispで書けばよかった。

macのデスクトップアプリの標準出力と標準エラー出力をコンソールで確認できるアプリを作ってみた

macのデスクトップアプリ(Mountain Lionより新しいもの)ではfprintf(stdout, ...)fprintf(stderr, ...)が捨てられているようで、これを確認する手段を調べた。

Read more

AWS LambdaでLINE Notifyを叩く

ググって出てくる記事ではパッケージのインストール(zipアップロード)が必要で、
ほんまかいな。という気持ちになったのでcurlAPIを叩くコードにしました。

Read more

Install elasticsearch plugins and kibana plugins behind the proxy.

elasticsearch

Set proxy configurations to env $ES_JAVA_OPTS like below.

ex: installing x-pack

ES_JAVA_OPTS="-Dhttp.proxyHost=proxy.example.com -Dhttp.proxyPort=8888 -Dhttps.proxyHost=proxy.example.com -Dhttps.proxyPort=8888" ./bin/elasticsearch-plugin install x-pack

kibana

Kibana doesn't support proxy yet...

You need to download plugins directory by curl, wget, etc. and run bin/kibana-plugin.

curl -LO https://artifacts.elastic.co/downloads/packs/x-pack/x-pack-5.4.1.zip
./bin/kibana-plugin install file://$(pwd)/x-pack-5.4.1.zip

github.com

www.elastic.co

iOS11から標準カメラでQRCodeを読めるようになったのでみているページのURLをQRCodeで表示するブックマークレットを書いた

iOS11から標準カメラでQRCodeを読めるようになったのでwindow.location.hrefをQRCode表示するブックマークレットを書きました。

お気に入りのURLにコピペすればおそらく動きます。

Appleらしさあふれる作りですよね。QRCodeって選ばなくてもカメラに写ればQRCode読み取れたんだけどアクセスする?みたいな通知してくれるの。

Read more