JavaScriptとCSSのミニファイ化について

あまプロでは市内のお持ち帰り配達お店マップを作っています。

開発が進むに連れて、JavaScriptファイルとCSSファイルとHTMLファイルが肥大化して来ました。
そこでファイルサイズを抑えるミニファイを行ったのであメログ。

CSSやJavaScriptやHTMLには可読性を上げる為にコメントやインデントを入れていますが、ブラウザで実行する際にはそれらは不要になります。
なので、サイトにリリースする際にはミニファイしてファイルサイズを小さくします。
そうすると、当然ダウンロード時間が減り、結果ウェブサイトの応答が早くなります。

CSSやJavaScriptのミニファイを行うツールがオープンソースで公開されてますので、それを使います。
HTMLのミニファイツールも有るのですが、今回は割愛。

先ず、ミニファイツールをインストールする前に、npmをインストールします。sudo apt install npm
でインストールしておきます。
aptが依存するパッケージを自動的にインストールしてくれるので便利です。

続きまして、npmでCleanCSSとUglifyESをインストールします。

npm install clean-css-cli -g

npm install uglify-es -g

基本的な使い方はこちら 

cleancss -o takeaway.min.css takeaway.css
uglifyjs -c -m -o takeaway.min.js -- takeaway.js

*.cssや*.jsがミニファイ前のファイルで、*.min.cssや*.min.jsがミニファイ後のファイルです。 

比較してみると

-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css

-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js

ミニファイ後はサイズが約半分になってます。

たかが半分されど半分…塵も積もれば山となります。

ミニファイ後のファイルを開いてみると改行や空白が削除された長〜い一行のファイルになっています。

CSSはこれで良いのですが、JavaScriptはこのままでは開発し難いです。

JavaScriptは開発中にブレークポイントで停止して変数をウォッチしてデバッグする事が有りますが…これ、一行のファイルだととてもデバッグし難いんです。

なので、今時のブラウザにはJavaScriptの整形機能が有ります。

ブラウザの開発ツール（Ctrl + Shift + I）のデバッガータブの下に｛ ｝のアイコンが有ります。

これを押下するとソースを整形してくれます。

整形はしてくれるんですが、ミニファイ時に難読化のオプション-mを指定しているので、変数名が一文字になって非常に理解し難いです。

これには、デバッグ時に変数名やfunction名を復元するソースマップを作成して対応します。

ソースマップはミニファイ時にuglifyjs -c -m -o takeaway.min.js --source-map "url='takeaway.min.js.map'" -- takeaway.js

のオプションを指定するだけです。 

すると、ミニファイ時にソースマップが作成されます。

-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root 3.0K May  9 23:35 takeaway.min.js.map
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js
-rw-r--r-- 1 root root  16K May 10 00:14 takeawayLib.min.js.map

先程と同様にブラウザの開発ツールのデバッグタブを表示すると

*.min.jsに加えて*.jsが表示され、*.jsの方は変数名やfunction名が理解し易い形式で表示されます。

開発用のdevelopブランチではJavaScriptをデバッグしますので、ソースマップ有りで。

リリース用のgh-pagesブランチではJavaScriptをデバッグしないので、ソースマップ無しで。

という風に使い分けます。

vimで並べ替えについて

あまプロではvimでテキストファイルを操作する場合が有ります。

vim単体の機能ではないんですが、vimには外部コマンドを実行する機能が有ります。
方法は
:!コマンド
です。
これを使ってテキストファイルをソート出来ます。

基本編

テキストファイル全体を昇順で並び替え（ソート）を実行するには
:%!sort
になります。
%が全体を指します。
降順で並び替えるには
:%sort!
です。

例えば
お
い
う
え
あ
というテキストファイルに
:%!sort
すると
あ
い
う
え
お
になります。

応用編

全体以外の範囲を指定する場合は開始行と終了行をカンマ区切りでしていします。
例えば現在の行から下３行をソートするには
:.,+3!sort
とします。（相対範囲）
例えば現在の行から上３行をソートするには
:.,-3!sort
とします。

例えば1行目から3行目をソートするには
:1,3!sort
とします。（絶対範囲）

ちなみにファイルの行数を越えた範囲を指定したソートをするとエラーになります…。

LXC環境でのコマンド補完について

あまプロではLXCで仮想環境を構築する事が有ります。

先日、仮想環境ではまったのであメログ。

プロジェクト毎に環境を構築出来る仮想環境、めっちゃ便利です。
でも、仮想環境下のgitでオプションや引数の補完が出来なくて、困ってました。
gitのgit-completionというパッケージをインストールするとオプション補完してくれるらしいんですが、そんなパッケージはインストールしてへんし、
別の環境ではgit-completion無しでもオプション補完してくれてるんです…。

ちなみに
lxc launch ubuntu:20.04 newContainer
で構築しました。

諦めずに探してたら有りました。
~/.bashrc怪しいコメントが！

# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
#if [ -f /etc/bash_completion ] && ! shopt -oq posix; then
#    . /etc/bash_completion
#fi

試しにここのコメントを解除して

# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
if [ -f /etc/bash_completion ] && ! shopt -oq posix; then
    . /etc/bash_completion
fi

とすると、無事にオプション補完出来ました。

~/.bashrcの再読込には再ログインが必要です。

追伸
ホストのSSHキーをコンテナでも使いたい場合は
lxc file push ~/.ssh/* newContainer/root/.ssh/
してます。
これで秘密鍵公開鍵がコピーされます。

Impressの元に戻す（Ｃｔｒｌ＋Ｚ）の不具合について

あまプロではLibreOfficeでスライドを作成する事が有ります。

セマセミのスライドを作成してる時にはまったのであメログ。

インプレスでスライドを作成する際に、スライドを複製したり追加したりすると思いますが、
既存のスライドをコピペして増やすと動作がおかしくなります。
元に戻す（Ｃｔｒｌ＋Ｚ）と先頭スライドに遷移してまうんですよ…。
スライドが多くなれば成程行き来が増え、地味にイラッとするバグです。

バグ管理システムには既にバグ報告されてました。
次期リリースでは改修されているそうです(^-^)

JavaScriptで連想配列の配列から重複を削除する方法について

あまプロではJavaScriptで市内の持ち帰り配達マップを作る事が有ります。

JavaScriptで連想配列の配列から重複を削除する方法が解らなかったのであメログ。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
            let aaa = [
                {
                    name: 'hoge',
                    age : 10
                },
                {
                    name: 'hogehoge',
                    age : 11
                },
                {
                    name: 'hoge',
                    age : 12
                }
            ];
            console.log( 'フィルタ前');
            console.log( aaa);
            console.log( 'フィルタ後');
            console.log(
                aaa.filter(
                    function ( x, i, self)
                    {
                        return self.findIndex( y => y.name == x.name) == i;
                    }
                )
            );
        </script>
    </head>
    <body>
    </body>
</html>

この例ではnameが重複している連想配列を消したいとします。
方法はfilterとfindIndexを使います。
時々使う事も有ろうかと思います。

ウェブサイトに吹き出しを表示する方法について

あまプロではHTMLを使ってウェブサイトを作成する事が有ります。
HTML + CSS + JavaScriptでボタンクリック時に少しだけ通知を表示する機能をあメログ。

ボタンクリック時に通知を少しだけ表示するにはアニメーションを使います。

HTML

<button
 type="button"
 onclick="document.getElementById( 'msg').classList.add( 'clicked');"
 title="クリックして下さい"
 onanimationend="document.getElementById( 'msg').classList.remove( 'clicked');">
    くりっく
    <span id="msg">クリックしました</span>
</button>

CSS

#msg {
    color: gray;
    background-color: aqua;
    padding: 0.5em;
    left: 10em;
    width: 19em;
    position: absolute;
    z-index: 2;
    opacity: 0;
}
.clicked {
    animation: clickAnime 2s;
}
@keyframes clickAnime {
    0% { opacity: 1;}
    50% { opacity: 1;}
    100% { opacity: 0;}
}

JQueryを使っている場合は
document.getElementById( 'msg').classList.add( 'copied');
document.getElementById( 'msg').classList.remove( 'copied');
を
$( '#msg').addClass(  'copied');
$( '#msg').removeClass(  'copied');
の様に簡略化出来ます。

説明すると、
「クリックしました」メッセージは手前のレイヤz-index: 2;にopacity: 0で透明つまり非表示にしときます。ボタンの側に絶対座標position: absolute;で配置します。
onclickのイベントでclickedクラスを追加します。
clickedクラスにはアニメーションのclickAnimeが定義されてます。
clickAnimeは段々透明つまり非表示にしていくアニメです。 これを2秒間で一回再生します。
onanimationendのイベントで、clickedクラスを削除します。クラスを削除する事で、何度でもクラスを追加する事が出来、つまり何度でもアニメーションを再生、つまり何度でもメッセージを表示さす事が出来ます。

JQueryにするならTooltipsterの様な吹き出しツールチップ用のプラグインも有って表現も豊富になります。
ですが、仕組みを理解していれば何でも好きに作れる様になるのが利点です。

vimで二つのファイルを比較する方法

あまプロではvimを使ってテキストファイルを比較する事が有ります。
便利な機能なんであメログ。

例えば、memo0.txtとmemo1.txtを比較したいとします。

1.  vimでmemo0.txtを開いて
2.  :vert diffs memo1.txt

こんな感じです。
左右のウインドを移る時はCtrl + w wです。
なかなか便利です。