フロントエンドのローカルテスト用にサーバーを立てる

概要

フロントエンドの開発で ローカルの index.html などを開いて動作確認などしていると、 chrome のセキュリティの関係でエラーが出ることが多くうまくデバッグできないことが多い。
そのようなときに簡単にサーバーを立てて動作確認する方法です。

express

node.js の webアプリケーションフレームワーク

Express - Node.js Web アプリケーション・フレームワーク

github.com

使い方

express のインストール

$ npm init
$ npm install -g express

サーバー構成

ディレクトリ構造

root
 |-- app.js
 |-- dist
      |-- index.html

※ 今回の構成では root/dist/index.html のテストをしたい

サーバー設定

app.js に設定を記述する。

例

var express = require('express');
var app = express();
  
app.use(express.static('dist'));
  
var port = 3000;
app.listen(port,function(){
    console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

サーバー起動

$ node app.js

localhost:3000/ にアクセスすることでローカルの index.htmlを確認することができる。

フロントエンドのタスクランナーに npm script

概要

フロントエンドの開発環境で npm script が使える

フロントエンド開発を始めようと思うと、最近はいろんなものを組み合わせて開発環境を作るのが普通に感じた。

タスクランナーだと下記のものがよく使われてるように感じるけど、正直使い方がよくわからない。

• glunt
• gulp

npm script を使ってみる

プロジェクトの初期設定

対話的にプロジェクトの初期設定をする。

$ npm init .

ちょっと試して見たいだけなら、全部 Enter で大丈夫。
終了すると、 package.json が作成される。
package.json にはプロジェクトの設定が記述されていて、以降で作成するタスクもこのファイルに記述する。

プロジェクトに必要なライブラリのインストール

他の人が作成したプロジェクトを使うときなどは、下記コマンドで開発環境を作成することができる。

$ npm install

タスクの作成

タスクは package.json に記述する。
以下は npm init で作成された例

{
  "name": "test-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここで、タスクは

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

の部分に記載する。

例

コンソールに test と出力するスクリプトを書いてみる。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "echo": "echo test"
  },

実行

$ npm run echo

※ 今回の例では echo というコマンドを作成した為上記のコマンドで実行できる。
タスクの実行は

$ npm run <タスク名>

実行結果

$ npm run echo
test

kotlinのenum定義バグ？

概要

kotlin の enum 定義でバグがある。というのをtwitterで見て実際に自分で確認してみた。

バグの内容

下記の様に予約後を使ったenumを定義すると null point exception が吐かれる

enum class Hoge {
    name
}

確認方法

android studio でプロジェクトを作成して、実際にコンパイルエラーになるか確認してみた

github.com

結果

コンパイル前に null point exception が吐かれた。
当然コンパイルもダメですね。

gitでmasterにマージ済みのブランチを一括削除する方法

概要

git を使用していて master にマージ済みのブランチを一括して削除したい

方法

$ git checkout master
$ git branch --merged | grep -v '*' | xargs -I % git branch -d %

twitterの公式widgetを使ったとき親要素の高さを拡張させる方法

概要

子要素に公式の twitter widget を使う場合、親要素が正しい高さを取得できないことがあります。
その場合、親要素で子要素の高さを取得できるようにする方法

方法

親要素に対して、下記のプロパティを追加します

overflow: auto;

aws に vpnサーバーを立てる

概要

AWS に Debianのインスタンスを作成し、 VPN サーバーを立てる

注意点

サーバー構築する際に 1723ポートを許可すること

参考 adndevblog.typepad.com

インスタンスの作成

1. EC2インスタンスの作成から AWS Marketplace を選択し、 debian OS を選択する

2. インスタンスタイプ選択

3. セキュリティグループの設定
   1723ポートを許可すること

作成したインスタンスへのssh

1. EC2から作成したインスタンスを選択
2. アクション ＞ 接続
3. インスタンスに接続するには、パブリックDNSを使用します。野下にある例の部分をコピペで実行する

VPNサーバー構築

• サーバーを最新の状態へ更新する

$ sudo apt-get update
$ sudo apt-get upgrade

• pptpdインストール

$ sudo apt-get install pptpd

• /etc/pptpd.conf localip と remoteip を設定します。

  • localip にはインスタンスのプライベートIPアドレス
  • remoteip には接続してくるvpnクライアントに提供するIPアドレスの範囲

例）インスタンスのプライベートIPアドレス 192.168.1.2
クライアントに割り当てたいIPアドレスの範囲　192.168.1.10 〜 192.168.1.20

ファイルオープン

$ sudo vi /etc/pptpd.conf

以下を追記する

localip 192.168.1.2
remoteip 192.168.1.10-20

• /etc/ppp/pptpd-options 以下の項目がコメントアウトになっている場合は外す
  無い場合は追記する

name pptpd
refuse-pap
refuse-chap
refuse-mschap
require-mschap-v2
require-mppe-128
ms-dns 192.168.64.1
nodefaultroute
lock
nobsdcomp
ms-dns 8.8.8.8
ms-dns 8.8.4.4
mtu 1490
mru 1490

• /etc/ppp/chap-secrets ユーザーアカウント追加

例）ユーザー名　ryuzu　パスワード　initial-y

ryuzu    *   initial-y   *

• pptpd 再起動

$ sudo /etc/init.d/pptpd restart

• iptables

$ iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

このままだとサーバー再起動時に上記設定が消えてしまうので、サーバー起動時に実行するように変更
/etc/rc.local にiptablesの修正を追記する

• サーバー再起動

$ sudo shutdown -r now

microsoft bot framework を試してみる ③

概要

microsoft bot framework を動作させるまで
3. microsoft bot framework への bot 登録

botの登録

microsoft bot framework へ bot を登録する。

Endpoint には 自分のbotのURLを登録する。

https://your_bots_hostname/api/messages

登録が完了すると、My bots に登録したbotが表示されます。

疎通テスト

botは登録されましたが、このままではまだ Test connection to your bot にメッセージを入力しても bot は反応してくれません。
Details の項目にある

• App Id
• Primary app secret

をデプロイしたプログラムの Web.config 内に追記する必要があります。

Web.config を修正後、再度デプロイします。

Text connection to your bot で疎通確認ができます。