unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

The Mythical Man-Month

"The Mythical Man-Month" is a famous book that may be known to any system engineers. I read this book when I was a university student, but I could realize what is written in it when I read it over again after some experience of system development.

Summary

  • In program development "man" and "month" are not commutative because there are works whose order can not be changed, and communication cost.
  • In order to develop an easy-to-use system, the completeness of its concept needs to be ensured by a few system architects.
  • There is no "Silver Bullet" because software is essentially difficult, but the use of commercial products and incremental development are effective strategies.

Impression

Man-Month is adopted to works that is necessary for a project such as writing specs or coding. When it comes to the estimation of cost and duration, it is good to add costs for communication and additional documents to man-month according to the team size.

No one may believe that adding members will shorten the duration, but sometimes meeting a deadline may be necessary at any cost. (These are often because of the time to negotiate with concerned parties than the loss of market opportunity.)

In this situation, we have no choice but to assign another member to order independent and time-consuming works (testing or coding if detailed specs exist) If we can't still achieve the deadline, it is better to start negotiation with concerned parties.

Regarding the completeness of concept, the existence of a few great architects is the key as this book mentions. However these members are hard to find, so it is important to find ones who are young, clever, and motivated early, and to season and develop them.

Where To Go: Destination Management System

When you are traveling somewhere, you might have following problems:

  • Which is the nearest spot?
  • How long does it take to go to each spots?
  • How can I go around each spots efficiently?

I have developed an application which can solve these problems.

Where To Go https://unhurried.github.io/where-to-go/Source Code: GitHub - unhurried/where-to-go

Functional overview is following.

  • Register the location and metadata (name, category, URL and memo) of a spot.
    • The location can be registered by converting(geocoding) the spot name.
    • Plot the location on the map and adjust it.
    • Store spot data in Local Storage, so can be retained after the browser restart.
  • Show registered spots on the map.
  • If you register the starting point (Home), the distance and the required time for each spot can be calculated.
  • Sort registered spots by category, distance or required time.

This is a by-product of my AngularJS study, and currently only Google Chrome is tested the compatibility. I will add following features when I have time.

  • Make the application compatible with major browsers.
  • Add a function to import and export spot data.
  • Optimize the layout for mobile devices.
  • Display the route from the starting point to the spot.

Where To Go お出掛け先管理システム

旅行先などで、いくつか行きたい場所の候補があるときに出てくる、

  • どこが一番近いのか?
  • それぞれ行くのにどのくらいの時間がかかるのか?
  • どの順番で行けばよいのか?

といった悩みを解決するためのアプリを作りました。

Where To Go https://unhurried.github.io/where-to-go/
ソースコードGitHub - unhurried/where-to-go

大まかな機能は以下の通りです。

  • 場所(座標)とメタデータ(名称、カテゴリ、URL、メモ)を登録できる。
    • 座標は名称から変換(Geocode)して登録できる。
    • 座標の位置を地図に表示して微調整ができる。
    • データはLocal Storageに保存するためブラウザを再起動しても参照できる。
  • 登録した場所を地図上にマッピングして参照できる。
  • 出発点(Home)を登録すると各場所への距離と所要時間を計算できる。
  • 登録した場所をカテゴリ、距離、所用時間等でソートして表示できる。

AngularJSの学習がてら実装したので、Google Chromeのみでしか動作確認をしていません…。
時間を見つけて↓の機能も追加していこうと思います。

  • 主要ブラウザで動作するようにする。
  • 場所データをインポート/エクスポートする。
  • モバイルデバイスにレイアウトを最適化する。
  • 出発点から各場所へのルートを表示できる。

ライブラリ手動追加時のESLintエラーを抑制する

この頃はかなり乗り遅れ感ありますが、こつこつAngularJSを試してみています。 Yeoman generator-gulp-angularで面倒な環境構築はスキップできるのですが、各ツールの動きを知らないせいで、時々はまってしまいます。

今回は手動でライブラリを追加したときに出る、ESLintのno-undefエラーの回避方法についてです。

たいていのライブラリはAngularのプラグイン化されていて、すぐにServiceとしてDIして使えるとか便利なのですが、ニッチなライブラリは自分でscriptタグを記載して組み込むことがあります。
このときに、ライブラリで定義されているグローバル変数を参照すると、ESLintで下記のようなエラーが指摘されます。

error  "xxx" is not defined     no-undef

放っておいても動作はするので問題ないのですが、これを回避するには、.eslintrcにグローバル変数を記載すれば良いです。

{
  "globals": {
     "xxx": true
  }
}

参考:http://yukidarake.hateblo.jp/entry/2015/11/11/200221

追記

id:mysticateaさんのコメントにある通り、globalsにはkeyにグローバル変数名、valueに上書きを許容するかを表す真偽値を持ったオブジェクトを指定するそうです。 http://eslint.org/docs/user-guide/configuring#specifying-globals

Windows VPS

自宅のPCがだいぶ年季入ってきたので、いっそのこと廃棄して完全クラウド化みたいなことができないかと思いつきました。
そこで、Windows系OSでリモートデスクトップが利用できるVPS、と対象を絞って各社のプランを調べてみました。

ベンダー OS 仮想コア メモリ ディスク ディスク種別 月額(税抜) 備考
さくら Windows 3 2 100 SSD 3209
さくら Windows 4 4 150 SSD 5500
ServerQueen Windows - 2 80 SSD 1530 新規受付停止
ServerQueen Windows - 4 120 SSD 3060 新規受付停止
SPPD Windows - 2 100 HDD 1500
SPPD Windows - 4 120 HDD 3000
お名前.com Windows - 2 100 HDD 4186
お名前.com Windows - 4 100 HDD 6040
GMO Windows - 4 200 HDD 5219
ABLENET Windows 2 2 120 SSD 2077
ABLENET Windows 3 4 150 SSD 3696

結論としては、自宅のPC同等のスペックを得るには月額4000~6000円(税込み)の費用でした。
電気代も考慮すると、1年でデスクトップPCを買い替えるくらいの感覚となりそうです。

AngularJSのminify対策(ng-annotate)

AngularJSのDI

AngularJSのDI(Dependency Injection)は、コントローラーに必要なオブジェクトを注入(定義しておいた変数にセットして)くれる機能です。
このとき、変数に注入すべきオブジェクトは変数名を見て決定しています。

例えば下記のコードでは、$scopeという変数名を見てスコープオブジェクト(https://docs.angularjs.org/guide/scope)を$scope変数にセットしています。

app.controller('MyCtrl', function($scope) {
    ...
});

minifyにより発生する問題

便利な機能ですが、この仕組みはminifyと相性が悪いのです。
minifyによって変数名が書き換わると、何を注入すべきかがわからなくなってしまいます。

a.controller('MyCtrl', function(s) {
    ...
});

$scopeがsに変わってしまい、これではスコープオブジェクトと紐付けられません。

この問題に対処するため、AngularJSではannotation(文字列として注入すべきオブジェクトの名称を渡す)機能が用意されています。(文字列はminifyしても変化しないため。)

a.controller('MyCtrl', ['$scope', function($scope) {
    ...
}]);

ng-annotate

ひとまずannotationで問題は解決できますが、DI対象が増えるとコードのメンテナンス性が悪くなってしまいます。(うっかり順番を間違えたり…。)
そこで、ng-annotateの登場です。DI宣言部分に@ngInjectを記述すると、annotationを自動生成してくれます。(あたりまえですがminifyの実行前に実施します。)

/* @ngInject */
app.controller('MyCtrl', function($scope) {
    ...
});

参考

Apache mod_proxyとmod_aliasの共存

TomcatでWebアプリケーションを動かすときには、クライアントとのコネクション管理や静的コンテンツ配信、セキュリティー向上といったことを目的として、前段にApacheを置くことがあります。

Apache -- (AJP or HTTP) --> Tomcat

この構成での静的コンテンツ配信について、↓のようなディレクトリ構成を設定しようとしたときにはまったので、ポイントをメモしておきます。

  • /application/
  • /application/contents/
    • Apache上の静的コンテンツを配信する

Tomcatへの転送はmod_proxy、静的コンテンツの配信はmod_aliasを使いますが、注意しないといけないのは、 「ProxyよりもAliasの設定が優先されるのでProxyからAlias対象のパスを除外する必要がある」ということです。

conf設定例

ProxyPass /application/contents/ !
ProxyPass /application/ http://xx.xx.xx.xx:xx/application/ retry=5
ProxyPassReverse /application/ http://xx.xx.xx.xx:xx/application/

Alias /application/contents /xxx/xxx/xxx

参考

qwe.hatenablog.jp