2020年7月18日土曜日

通行止めするらしい


投稿者 時刻: 0 件のコメント:

2020年6月2日火曜日

要素のクリアボタンについて

あまプロではウェブシステムの保守を行う事があります。

先日、ChromiumのUIが変更されたのであメログ。

HTML5の<input type="time">タグをChromiumで開くと🅧のクリアボタンが表示されていたのが、最近のアップデートで時計アイコンに変わっていた。
ワンクリックで時間をクリアできなくなり不便という要望が出たので、何とか回避してみました。

inputの隣に×アイコンを追加して、それがクリックされたらJavaScriptでinputの値を空にしています。
ESCキー押下でもクリアする様にしてます。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>てすと</title>
        <style type="text/css"><!--
            .clear { color: gray; position: relative; left: -0.4em;}
            @-moz-document url-prefix() {
              .clear {
                display: none;
              }
            }
        --></style>
    </head>
    <body>
        <input type="time" id="time0" name="time0">
        <span id="clear0" class="clear">&#127335;</span>
        <br>
        <input type="time" id="time1" name="time1">
        <span id="clear1" class="clear">&#127335;</span>

        <script type="text/javascript"><!--
            function downEscape() {
                if( event.key == 'Escape') this.value = '';
            }
            function clickEscape() {
                this.previousElementSibling.value = '';
            }
            function changePointerDefault() {
                this.style.cursor = 'default';
            }
            document.getElementById( 'time0').addEventListener(
                'keydown', downEscape, false
            );
            document.getElementById( 'clear0').addEventListener(
                'click', clickEscape, false
            );
            document.getElementById( 'clear0').addEventListener(
                'mouseover', changePointerDefault, false
            );
            document.getElementById( 'time1').addEventListener(
                'keydown', downEscape, false
            );
            document.getElementById( 'clear1').addEventListener(
                'click', clickEscape, false
            );
            document.getElementById( 'clear1').addEventListener(
                'mouseover', changePointerDefault, false
            );
        --></script>
    </body>
</html>

表示するとこんな感じ。
mozilla系のfirefoxでは今でもクリアボタンが表示されてるので、追加クリアボタンは非表示にしてます。

こんな感じ。

ワンライナーでHTMLとCSSとJavaScriptをごちゃまぜにするのがお好みな方は

 <!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>てすと</title>
    </head>
    <body>
        <input type="time" id="time0" name="time0" onKeyDown="if( event.key == 'Escape') this.value = '';">
        <span id="clear0" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">&#127335;</span>
        <br>
        <input type="time" id="time1" name="time1" onKeyDown="if( event.key == 'Escape') this.value = '';">
        <span id="clear1" class="clear" style="color: gray; position: relative; left: -0.4em;" onClick="this.previousElementSibling.value = '';" onMouseover="this.style.cursor = 'default';">&#127335;</span>
    </body>
</html>
こちらをどうぞ。
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市

2020年5月10日日曜日

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をデバッグしないので、ソースマップ無しで。
という風に使い分けます。
続きを読む »
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市

2020年5月8日金曜日

vimで並べ替えについて

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

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

基本編

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

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

応用編

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

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

ちなみにファイルの行数を越えた範囲を指定したソートをするとエラーになります…。
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市

2020年5月7日木曜日

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/
してます。
これで秘密鍵公開鍵がコピーされます。
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市

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

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

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

インプレスでスライドを作成する際に、スライドを複製したり追加したりすると思いますが、
既存のスライドをコピペして増やすと動作がおかしくなります。
元に戻す（Ｃｔｒｌ＋Ｚ）と先頭スライドに遷移してまうんですよ…。
スライドが多くなれば成程行き来が増え、地味にイラッとするバグです。
バグ管理システムには既にバグ報告されてました。
次期リリースでは改修されているそうです(^-^)
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市

2020年5月2日土曜日

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を使います。
時々使う事も有ろうかと思います。
投稿者 時刻: 0 件のコメント:
場所: 日本、兵庫県尼崎市
登録: 投稿 (Atom)