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

あまプロでは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です。
なかなか便利です。

OpenStreetMapで尼崎市内の何かを検索するについて

あまプロではOverpassTurboを用いてOpenStreetMapの情報を取得する場合が有ります。

ちょっとはまったんであメログ。
OverpassTurboでは矩形範囲を使って範囲内の地物を取得する事が出来ます。
でも四角なんでちと使い勝手が悪いです。
例えば尼崎市内のお持ち帰りや配達を行っているお店を取得する場合には困ります。

それにはこんな感じのクエリにします。

[out:json][timeout:25];
// gather results
area[admin_level=7]["name"="尼崎市"]->.searchArea;
(
  node["takeaway:covid19"~"[^no]"](area.searchArea);
  node["delivery:covid19"~"[^no]"](area.searchArea);
);
// print results
out body qt;
);

wikiには一応載ってるんですが、かなり解り難いので手こずりましたわ…。

近所の持ち帰りや配達してくれるお店マップについて

あまプロではOpenStreetMapを使って地図を描く事が有ります。
昨今の感染症の流行に対抗して、近所の持ち帰りや配達可能してくれるお店マップを作ってみたのであメログ。

1. 先ず、Overpass Turboで近所の持ち帰りか配達が可能なお店をエクスポートする
   1. 地図上で地元を表示する
   2. 矩形範囲を手動で選択するアイコンを押下して、範囲を指定する
   3. ウィザードで抽出したいタグのkeyとvalueを設定する
      今回はお持ち帰り不可ではない"takeaway"~"[^no]"か
      配達不可ではない"delivery"~"[^no]"に一致する所を抽出する

wikiではOverpassクエリで否定の正規表現は出来ないと載っているが、何故か出来ます…
クエリはこんな感じ

      /*
This has been generated by the overpass-turbo wizard.
The original search was:
*/
[out:json][timeout:25];
// gather results
(
  node["takeaway"~"[^no]"]({{bbox}});
  way["takeaway"~"[^no]"]({{bbox}});
  relation["takeaway"~"[^no]"]({{bbox}});
  node["delivery"~"[^no]"]({{bbox}});
  way["delivery"~"[^no]"]({{bbox}});
  relation["delivery"~"[^no]"]({{bbox}});
  node["takeaway:covid19"~"[^no]"]({{bbox}});
  way["takeaway:covid19"~"[^no]"]({{bbox}});
  relation["takeaway:covid19"~"[^no]"]({{bbox}});
  node["delivery:covid19"~"[^no]"]({{bbox}});
  way["delivery:covid19"~"[^no]"]({{bbox}});
  relation["delivery:covid19"~"[^no]"]({{bbox}});
);
// print results
out body;
>;
out skel qt;
      

   4. エクスポートする
      
      後述のインポートと形式を揃えれば何でも良いが、今回はOSM形式にしてコピー
2. 次に、uMapで地元にお持ち帰りか配達が可能なお店のレイヤをインポートする
   1. 地図上で地元を表示する
   2. インポートでエキスポートしたデータを貼り付けて
      OSM形式を選択して
      
      インポートボタンを押下するとマーカがプロットされる
      インポートデータの修正等で、レイヤ内容を差し替えるにチェックを付けてインポートする
   3. インポートデータは矩形選択なので、恐らく地元外の市のお店も含まれる筈
      そのまま残しても構へんけど、消したい場合はマーカを右クリックで地物を削除する
      
   4. お好みでレイヤ管理で表示の設定を変更する
      
      個人的にはポップアップコンテントスタイルをテーブルにして、ラベル表示をホバー時にするのが好き
   5. 名前を付けて保存する
   
   後はURLをシェアするなり画像を印刷するなりして色々使えます。
   共有時の短縮URLはhttpしか出来へんけど、地図自体はhttps表示出来るので、シェアするなら短縮でないURLの方が良いです。
   
   
   
   ちなみに今回作成した地図はこちら。