http-serverでサクッとローカルにHTTPサーバをたてる

http-serverでサクッとローカルにHTTPサーバをたてる

ローカルにHTTPサーバたてたいなーと思ったので調べてみたら便利なものがあったので紹介します。

http-server

https://github.com/indexzero/http-server

Node.jsで動くHTTPサーバデス。

http-serverをインストールして起動してみる

HTTPサーバをたてたいところでまずはnpm init。

cd D:\Test\sample
npm init -y

続けてhttp-serverをインストールします。
今回はローカルに。

npm install http-server --save-dev

pakcage.jsonを修正します。

  "scripts": {
    "http-server": "http-server"
  }

これでhttp-serverを起動することが出来るようになりました。

あとはHTTPサーバにコンテンツを置いてブラウザから見てみましょう。

D:\Test\sample配下にPublicフォルダを作成します。
あとはPublicフォルダにコンテンツを置きます。

D:Test\Test\sample
├node_modules
├public
│ ├index.html
│ └sample.md
└pakcage.json

index.html

<DOCTYPE html>
<html>
<head>
  <title>サンプル</title>
  <meta charset="utf-8">
  <style>
    body { font-![slide.png](http://luna.science.nttdata-ccs.co.jp:3000/files/5abb2aa9ad52f21d77615203)
family: 'Droid Serif'; }
    h1, h2, h3 {
      font-family: 'Yanone Kaffeesatz';
      font-weight: normal;
    }
    .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
  </style>
</head>
<body>
  <!-- Remarkjs -->
  <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var slideshow = remark.create({sourceUrl: "sample.md"});
  </script>
</body>
</html>

sample.md

name: inverse
layout: true
class: center, middle, inverse
---
# 見れた?

では早速http-serverを起動してみましょう。
port番号は適当に10000を指定してます。

npm run http-server -- -p 10000

http://localhost:10000 にアクセスしてみます。

f:id:mt9116:20180328144258p:plain

表示されましたー
たったこれだけでHTTPサーバが使えるなんて便利ですよね。

スタイルシートをバンドルする際は画像パスに注意

またASP.NETのバンドルの話です。

スタイルシートを何も考えずにまとめてバンドルする

とりあえずスタイルシートをまとめてみます。

bundles.Add(new StyleBundle("~/bundles/style").Include(
    "~/lib/bootstrap/css/bootstrap.min.css",
    "~/lib/jquery-ui/jquery-ui.css",
    "~/lib/font-awesome/css/font-awesome.css"
));

こうすると3つのスタイルシートは一つにバンドルされます。

画面でこのスタイルを読み込んでみます。

@using System.Web.Optimization
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/bundles/scripts")
    @Styles.Render("~/bundles/styles")
    <script>
        $(function () {
            $("#hoge").dialog();
        })
    </script>
</head>
<body>
    <div id="hoge">閉じるボタンのアイコン見えてる?</div>
</body>
</html>

画面を表示してみます。

f:id:mt9116:20180326150350p:plain

ダイアログのアイコンが表示されていませんね。
コンソールを見てみるとjquery-uiのアイコンが見つからないと怒られています。

f:id:mt9116:20180326150406p:plain

これはスタイルシートが仮想パスにバンドルされ、バンドル先にimagesが無いのが原因です。
そこで、実際にスタイルシートが置いてある場所にバンドルするようにします。

実在パスにあわせてスタイルシートをバンドルする

実際のパスはこんな感じです。 jquery-ui.cssが置かれているフォルダにimagesがあります。

f:id:mt9116:20180326150418p:plain

では、ソースをこのように修正しましょう。
パスに<実在パス>/cssのように指定します。

bundles.Add(new StyleBundle("~/lib/jqueryui/css").Include("~/lib/jqueryui/jquery-ui.css"));
bundles.Add(new StyleBundle("~/lib/bootstrap/css/css").Include("~/lib/bootstrap/css/bootstrap.css"));
bundles.Add(new StyleBundle("~/lib/font-awesome/css/css").Include("~/lib/font-awesome/css/font-awesome.css"));

後はそれを画面から読み込みます。

@using System.Web.Optimization
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/bundles/scripts")
    @Styles.Render("~/lib/jqueryui/css")
    @Styles.Render("~/lib/bootstrap/css/css")
    @Styles.Render("~/lib/font-awesome/css/css")
    <script>
        $(function () {
            $("#hoge").dialog();
        })
    </script>
</head>
<body>
    <div id="hoge">閉じるボタンのアイコン見えてる?</div>
</body>
</html>

画面を表示すると、ダイアログのアイコンが表示されていることが確認出来ます。

f:id:mt9116:20180326150432p:plain

コンソールを見てみると画像を上手く参照出来ていることが分かります。

f:id:mt9116:20180326150441p:plain

ASP.NETで画像を含むスタイルシートをバンドルする際は個別にバンドルしましょう。

指定した順序でバンドルする@ASP.NET

ASP.NETスクリプトをバンドル出来ますが、かゆいところに手が届かない部分があるのでまとめておきます。

通常のバンドル

ASP.NETスクリプトをバンドルするとき下記のように書きます。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
            "~/Scripts/jquery.js",
            "~/Scripts/jquery-ui.js"
            "~/Scripts/bootstrap.js"));    
    }
}

ただし、スクリプトが読み込まれる順番はランダムなので、jquery読み込んだ後にjquery-ui読み込むといったことがデフォルトでは出来ません。
デフォルトでパス追加した順序で読み込んでくれればいいのに!

指定した順序でバンドル

まず、下記のクラスを用意します。

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

続けて、バンドルに読み込みたい順序でスクリプトのパスを追加し、バンドルの順序を指定します。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        var bundle = new ScriptBundle("~/bundles/scripts")
            .Include("~/Scripts/jquery.js")
            .Include("~/Scripts/jquery-ui.js")
            .Include("~/Scripts/bootstrap.js");
        // バンドルの順序をバンドルにファイルを追加した順序にします
        bundle.Orderer = new AsIsBundleOrderer();
        bundles.Add(bundle);
    }
}

後は画面で読み込めば、指定した順序でスクリプトが読み込まれます。

@using System.Web.Optimization

<head>
    @Scripts.Render("~/bundles/scripts")
</head>

DateTimeの罠

いきなりですが、下記コードを実行すると落ちます。

var unixTime = -2208988800000;
// 落ちる
var date = new DateTime(unixTime);

「1900/01/01 00:00:00」のunix timeからDateTimeを作成しようとしたコードです。
理由は「1970/01/01 00:00:00」以降のDateTimeしか作れないからです。
代わりにDateTimeOffsetを使うと上手くいきます。

var unixTime = -2208988800000;
var date = DateTimeOffset.FromUnixTimeMilliseconds(unixTime);

インストールしているツール

PCにインストールしているツールをさらす。

システム

QTTabBar

http://qttabbar-ja.wikidot.com/

エクスプローラーの拡張ツール。
エクスプローラーをタブ表示することが出来る。

7zip

https://sevenzip.osdn.jp/

ファイル圧縮・解凍ソフト。

ConEmu

https://www.fosshub.com/ConEmu.html

コンソールを拡張するツール。
範囲選択でコピペしたりドラッグでウィンドウサイズ変更したり出来る。

DiskInfo

http://www.rakuchinn.jp/diskinfo.html

ドライブのファイルだのファイル容量を棒グラフで表示してくれるツール。
どのフォルダがどのくらい容量をくっているのかが分かりやすい。

PatchCleaner

http://www.homedev.com.au/free/patchcleaner
http://wadachi.hatenablog.com/entry/2018/02/01/070000

「C:\Windows\Installer\」の不要ファイルを削除するツール。

コミュニケーション

IPメッセンジャー

https://ipmsg.org/

同一LAN内でメッセージやファイルをやり取りするツール。

パッケージ/バージョン管理

Anaconda

https://www.anaconda.com/download/#_windows

Pythonディストリビューション
主要なライブラリを一括でインストールすることが出来る。
仮想環境を構築することも出来る。
仮想環境ごとにライブラリのインストールも行える。

nodist

https://github.com/marcelklehr/nodist/releases

Node.jsのバージョン管理ツール。
複数のバージョンを共存させることができ、切り替えることも出来る。
パスワードを更新したら下記コマンドを実行すること。

npm -g config set proxy http://userid:password@proxyaddress:proxyportnumber
npm -g config set https-proxy http://userid:password@proxyaddress:proxyportnumber
npm -g config set registry http://registry.npmjs.org/

Git

SVN

TortoiseSVN

https://tortoisesvn.net/downloads.html

Windows用のSVNクライアントソフト。
日本語化するには日本語化パックをインストールすること。

TortoiseGit

https://gitforwindows.org/

Windows用のGitクライアントソフト。
Git for Windowsもあわせてインストールすること。
日本語化するには日本語化パックをインストールすること。

WinMerge

http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html

ファイル、フォルダの差分を比較するツール。
これなきゃ開発出来ない。

テキストエディタ

サクラエディタ

http://sakura-editor.sourceforge.net/index.html.ja

軽量なテキストエディタ
これ大好き。
メモ取るときとか、ちょっとしたテキストの正規表現置換とかで使う。

Visual Studio Code

https://code.visualstudio.com/download

高機能なテキストエディタ
プログラミングやMarkdownテキストエディタとしても使える。

ER図

a5mk2

https://a5m2.mmatsubara.com/

ER図作成ツール。
SQLの発行も出来るすぐれもの。

プロキシ

stone

http://www.gcd.org/sengoku/stone/stonexp-2.3e.zip

ローカルプロキシ。
認証プロキシの前に通すことで認証情報を一元化することが出来る。
パスワードを更新したらC:\stone23xp\stone.cfgの認証情報を更新すること。

Burp Suite

https://portswigger.net/burp/

HTTPプロキシ。
リクエストを書き換えるのに使用する。
セキュリティ診断の擬似攻撃を行うのに使った。

キャプチャ/動画

PettyCamera

http://www.rainylain.jp/tools/ss/

キャプチャツール。

AG-デスクトップレコーダー

http://t-ishii.la.coocan.jp/download/AGDRec.html

デスクトップの操作を動画で記録するツール。

PDF

Acrobat Reader DC

https://acrobat.adobe.com/jp/ja/acrobat/pdf-reader.html

PDFビューワー。

CutePDF Writer

http://www.acrosoftware.com/ https://comicmall.jp/wiki.cgi?page=CutePDF http://www.khotta.org/ghost/index.html#disk

印刷時にPDF出力できるようにするツール。
PDF出力に対応していないソフトでも印刷できればPDFに出来る。
CutePdf Writerを使用するにはGhostscriptが必須。

Cube PDF Utility

https://www.cube-soft.jp/cubepdfutility/index.php

PDF編集ツール。
ページ順序の変更や結合、分割等を行える。

バックアップ

EaseUs Todo Backup Free

https://jp.easeus.com/backup-software/free.html

バックアップツール。
HDDからSSDに移行する際に使用した。

ドローツール

GIMP

https://www.gimp.org/downloads/ https://synclogue-navi.com/gimp-install

フリーのドローツール。
アイコンを自作する際に使用する。

地図

QGIS

https://qgis.org/ja/site/forusers/download.html

シェープファイルを表示するツール。

OpenLayers入門

OpenLayersとは?

フロントエンドで地図操作を可能にするJavaScriptライブラリです。
OpenLayersでは

  • 地図の表示
  • 地図操作(移動、回転、縮尺)
  • レイヤの表示
  • フィーチャの描画

等を行うことが出来ます。

サンプル

地図を表示する

See the Pen Map by maiki takeda (@mtakeda) on CodePen.

Map.html

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="createMap.js"></script>
        <script src="map.js"></script>        
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

idがmapの要素に地図を追加します。

map.js

window.onload = function(){
    var map = createMap();    
}

/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

地図にフィーチャを表示する

See the Pen VectorLayer by maiki takeda (@mtakeda) on CodePen.

ReadFeature.html

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="readFeature.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ベクターレイヤを作成する際、取得元のURLやフォーマット等を指定します。 今回の例ではKMLを指定しています。

readFeature.js

window.onload = function(){
    var map = createMap();
    var vectorLayer = createVectorLayer();
    map.addLayer(vectorLayer);
}

/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

/** ベクターレイヤを作成します。 */
function createVectorLayer() {
    return new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'https://openlayers.org/en/v4.6.4/examples/data/kml/2012_Earthquakes_Mag5.kml',
            format: new ol.format.KML({
              extractStyles: false
            })
        })
    });
}

フィーチャを地図に描画する

See the Pen DrawFeature by maiki takeda (@mtakeda) on CodePen.

DrawFeature.html

<html>
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
        <script src="drawFeature.js"></script>
    </head>
    <body>
        <div id="map" style="height: calc(100vh - 40px);"></div>
        <label>Geometry type &nbsp;</label>
        <select id="type">
          <option value="Point">Point</option>
          <option value="LineString">LineString</option>
          <option value="Polygon">Polygon</option>
          <option value="Circle">Circle</option>
        </select>
    </body>
</html>

描画用のレイヤを用意し、地図に描画出来るように設定します。
プルダウンの切替に応じて描画するフィーチャの種類を切り替えます。

drawFeature.js

window.onload = function(){
    var map = createMap();
    var typeSelect = document.getElementById('type');
    
    addDrawingLayer(map);
    addDrawInteraction(map, typeSelect.value); 

    typeSelect.onchange = function(){
        removeDrawInteraction(map);
        addDrawInteraction(map, typeSelect.value);
    }
}


/** 地図を作成します。 */
function createMap() {
    return new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

var drawingSource = new ol.source.Vector();
var drawingLayer = new ol.layer.Vector({
    source: drawingSource
});
var drawInteraction;

/** 描画用のレイヤを地図に追加します。 */
function addDrawingLayer(map){
    map.addLayer(drawingLayer);
}

/** フィーチャを描画出来るようにします。 */
function addDrawInteraction(map, type){
    // 指定された種類のフィーチャを描画出来るようにする
    drawInteraction = new ol.interaction.Draw({
        source: drawingSource,
        type: type
    });
    map.addInteraction(drawInteraction);
}

/** フィーチャの描画を解除します。 */
function removeDrawInteraction(map){
    map.removeInteraction(drawInteraction);
}

LESS入門

CSSの拡張メタ言語です。

概要

CSSコンパイルする必要がありますが、LESSを使用することで下記のメリットを受けることが出来ます。

  • 変数を使用することが出来る
  • 分割したLESSファイルを1つのCSSファイルにコンパイルすることが出来る
  • コンパイル時にCSSファイルを圧縮することが出来る

変数を使用することが可能になるため、共通で使用する設定(色、幅等)を局所化することが出来ます。
また、部品ごとにLESSファイルを作成したり、定数を1つのLESSファイルにしたりすることで、保守性の向上に繋がります。

コンパイル

コンパイラーの導入

npmでグローバルインストールします。

npm install -g less@2.7.2

コンパイル方法

下記コマンドでlessファイルをcssファイルにコンパイルします。
-xオプションで圧縮したcssファイルを生成します。

lessc -x src.less dst.css

記法

変数

変数は下記のように記述します。

@hoge-color: rgba(178, 222, 255, 0.5);
@hoge-width: 300px;

インポート

例えばhoge.lessにconst.lessをインポートする場合下記のように記述します。

@import const.less;

lessファイルを分割した場合は1つのlessファイルに全てインポートし、コンパイルすれば1つのcssファイルにまとめられます。

エスケープ

例えばcssで横幅を計算した値に設定する場合下記のように記述します。

.hoge-width{
    width: calc(100vw - 200px);
}

これをlessで記述する場合はエスケープする必要があります。

.hoge-width{
    width: calc(~”100vw - 200px”);
}

エスケープする場合は文字列の先頭に~を付けます。