2018-03-26

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

また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で画像を含むスタイルシートをバンドルする際は個別にバンドルしましょう。

2018-03-26

指定した順序でバンドルする@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>

2018-03-16

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);

2018-03-14

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

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/