2017-10-10

都内から格安で富士急ハイランドへ行く

先日初めて富士急ハイランドに行ってきた。

得Qパックという、高速バス往復+フリーパスのチケットが安かった。

bus.fujikyu.co.jp

渋谷から往復して7900円(渋谷以外にも乗り場はある)。フリーパスは正規の値段だと、それだけで5700円なのでかなりお得だ。

都内から意外と近くて、高速バス2時間程で到着。

ええじゃないかに乗って、怖すぎて本当に死ぬかと思った。。

2017-09-25

vue-cliの開発サーバをhttps化する

vue-cli express

vue-cliを使って開発をしていて、開発サーバをhttps化する必要がでてきたため、vue-cliに組み込まれているdev-serverをhttps化することにした。

ソースを見るとなんてことはない、nodejsのexpressを使ってサーバを起動しているだけなので、expressのhttps化と同じやり方でいけた。

オレオレ証明書を生成する

開発サーバ用のオレオレ証明書なので、build/cert に置くことにする。

$ cd build
$ mkdir cert && cd cert
$ openssl genrsa 2048 > server.key
$ openssl req -new -key server.key -out server.csr
$ openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt
$ ls
server.crt  server.csr  server.key

dev-serverの設定を変更する

+var https = require('https')
+var fs = require('fs')

-var uri = 'http://localhost:' + port
+var uri = 'https://localhost:' + port

-var server = app.listen(port)
+const sslOptions = {
+  key: fs.readFileSync('build/cert/server.key'),
+  cert: fs.readFileSync('build/cert/server.crt')
+};
+var server = https.createServer(sslOptions, app).listen(port);

開発サーバを立ち上げる

$ npm run dev
 DONE  Compiled successfully in 13751ms

> Listening at https://localhost:8080

これで、httpsでアクセスできるようになった。

2017-09-20

Vagrantを再起動したら既存のVMが消えた

Vagrant

現象

Mac上で起動しているVagrantのVM内で作業していたところ、バッテリー切れでMacが強制シャットダウンした。その後、起動して、 Vagrant up でVagrant を起動したところ、作業していたVMではなく、新規VMが立ち上がるようになってしまった。

作業途中のファイルが失われてしまい、とても困った。

復旧する

この方法で以前のVMを起動することができた。

elm-arata.hatenablog.com

VirutalBoxのコマンドラインインターフェース VBoxManage を使って仮想マシンの情報を表示する。

$ VBoxManage list vms
"aaa_1491870543558_52578" {945beac3-3920-4eec-947e-bfce8e017aaa}
"bbb_1493466062889_97138" {462256fa-197f-477d-b1ff-7cc74e401bbb}
"ccc_1505786401940_15041" {9c2a6b5c-7cce-46e3-b60a-76e3e1324ccc}

作成した日時の昇順に表示されるので、一番下が直近に作成したVM。一番下は、新規作成されたVMなので、１つ前の、bbb_1493… のVMを起動するように設定し直す。

以下のファイルを開き、VMのUID()を置き換える。

$ vi .vagrant/machines/default/virtualbox/id

462256fa-197f-477d-b1ff-7cc74e401bbb

VMを再起動

$ vagrant reload

復旧できた。やったぜ。

2017-09-18

vue-cliで作成したアプリケーションをサブディレクトリ上に展開する

Vue.js vue-cli

vue-cli

github.com

やりたいこと

vue-cliで作成したアプリケーションをサブディレクトリ /test-dir/ に展開したい。

問題

デフォルトの設定でプロダクションビルドし、

$ npm run build

webサーバから {vue-cli-project}/dist/ を参照するようにしたが、このままではパスの問題でアプリケーションが動かなかった。

解決

config/index.js に assetsPublicPath という設定項目がある。この値をvue-cliアプリケーションのルートとなるサブディレクトリパスに書き換えて、再度ビルドすれば良い。

assetsPublicPath: '/test-dir/',

さらに、vue-router を使ってルーティング設定を行っている場合は、そちらにも設定が必要となる。コンストラクタオプションの'base' に、サブディレクトリの設定を行う。

ルーターコンストラクタオプション · vue-router

new Router({
  base: '/test-dir/',
  ...
})

2017-09-07

Atomでリモートのファイルを直接編集する

Atom

先日社内のデザイナの作業を見てたら、ローカルでファイルを編集して、それをVMにFTPでアップロードしていたので、 VM上で直接編集したら？っていう話になった。

VimやEで始まる黒い画面はさすがにデザイナにはおすすめできないので、Atomあたり使ってるならプラグインでリモートホストに接続できるんじゃないかなーと思い調べてみた。

atom.io

いくつかプラグインを調べて試した感じ、Remote-FTPが一番良かった。 SFTP接続して直接ファイル編集、さらにリモート上のファイルツリーを表示できる。

atom.io

特に導入は難しくない。

まず、Remote-FTPをインストールする。

f:id:tic40:20170907090307p:plain

インストールされた状態。

f:id:tic40:20170907090302p:plain

もしエディタの右下に赤いマークがついていたら、Rebuildが必要なのでRebuildする。

f:id:tic40:20170907090310p:plain

あとは、以下の手順でFTP接続設定を進めればOK。

Open an existing project or create a new one (File -> Open folder…)
Open remote-ftp sidebar (Packages -> Remote-FTP -> Toggle)
Create a configuration file for your project (Packages -> Remote-FTP -> Create (s)FTP config file)
Once connected you should be seeing the content of the remote connection
All basic commands (connect, disconnect, …) are available from the sidebar context menu and the Command Palette

2017-08-25

API blueprintでAPIドキュメントを書く

API

APIを作った際にはAPIドキュメントを必ず書かなくてはならない。 API blueprintでさくっと書くのがおすすめ。

デモ

https://tic40.github.io/api-blueprint/public/v1.html

ソースコード

github.com

書き方

まずAPI blueprint 記法でAPIドキュメントを書く。 API blueprintはMarkdownを拡張したものなので、基本的にMarkdownの記法が使える。敷居は高くない。

API Blueprint | API Blueprint

実際にデモ用に書いたソースファイルはこんな感じ

https://raw.githubusercontent.com/tic40/api-blueprint/master/blueprints/v1/apis/tests.md

これだとただのMarkdownで読みにくいので、aglioというレンダーを使って、綺麗なhtmlに書き出そう。

github.com

最後に書き出されたhtmlをWebで共有しておしまい。業務でExcel管理だったのをこの形式に変えてから、結構評判は良い。

2017-08-23

採用試験でコーディングスキルチェックを受けた

code interview

先日とある会社の採用試験でオンラインコーディングスキルチェックを受けた。それがなかなか面白かった。

内容は、サーバーサイド(PHP/Ruby(Rails)/Database) に関する問題で、全9題、試験時間は1時間45分程度、出題は全て英語。

最初の3題ぐらいはPHPでのコーディング(クラス設計)問題。コーディング問題は、ideone.com のようなUIで、テキストエリアにコードを書いてSubmitするという形式。Submitすると次の問題へ移動する。当然制限時間は各題に設けられており、制限時間がくると強制的に次の問題へ移動する。

以下、コーディング問題の一例。提示された仕様書を読み取り、コードを作成、用意されたテストケースを全てパスすればOK。出題内容は伏せるが、だいたいコードから雰囲気でわかると思う。

<?php

class Solution
{
    private $categories = [];

    /**
     * @param string $category
     * @param string @parent
     * @throw InvalidArgumentException
     */
    public function addCategory($category, $parent) {
        if (isset($this->categories[$category])) {
            throw new InvalidArgumentException;
        }
        if ($parent === null) { $parent = ''; }
        $this->categories[$category] = $parent;
    }

    /**
     * @param string @category
     * @return array
     */
    public function getCategory($category) {
        $ret = [];
        if (isset($this->categories[$category])) {
            foreach ($this->categories as $k => $v) {
                if ($v === $category) {
                    $ret[] = $k;
                }
            }
        }
        return $ret;
    }
}

$s = new Solution();
$s->addCategory('A', null);
$s->addCategory('B', 'A');
$s->addCategory('C', 'A');
$s->addCategory('D', 'B');
$s->addCategory('E', 'B');
echo implode(',', $s->getCategory('B')); # D, E

競プロのようなアルゴリズム系、パズル系問題というよりは、実務寄りな内容だった。地頭の良さ、というより実務寄りな能力を重視しているということだろうか。

PHPが終わると、Ruby(Rails)の問題へ。表示されているソースコードからバグを見つける、なんていう問題や、Active Recordに関する問題など。

最後の3-4題ぐらいはDB、SQL知識を問う問題。

SQLについては、普段簡単あまりテクニカルなSQLを書くことがないので、慌ててSQLのテスト環境を作ったりして確認しながら確認した。集計系のSQLが苦しかったので、ちゃんと勉強しとかなきゃなあ。

SQL以外ではDBのパフォーマンスに関する問いが多かった印象。

感想

色々時間がなかったので会社帰りに某チェーンのカフェ*1で受験した。これは失敗だった。ネット途切れる、うるさくて集中できない。ちゃんと家で受けよう。
SQLに関する出題はありえるので、手元に実行環境を予め用意しておくと確認が捗る。
英語出題、アルゴリズム問題に関しては、http://hackerrank.com/ あたりで慣れておくと良さそう。

エンジニア転職活動中です。

*1:ドトール