たつをの ChangeLog

559 件 見つかりました。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 [ 次へ ]

li ごとにそれぞれ別の絵文字をマーカー文字として設定したい。
しかし、list-item-style で一つ一つ li に設定するのは面倒。
なので、li の先頭文字をリストのマーカー文字にする作戦!

  • li の先頭文字の取得。
    e.innerText.spit('')[0] だとサロゲートペア非対応で絵文字が壊れる。
    Array.from(e.innerText)[0] でいける。
    これをマーカー文字として JavaScript で設定すれば良い。
  • マーカー文字で使う先頭文字を li 本体で非表示にする。
    そうしないと二重で表示されるので。
    擬似要素 ::first-letter を使う。
    しかし利用可能プロパティの制約がきつい。
    display: none が使えないのはつらい。
    とりあえず透明にして全体を左にずらすことに。

こんな感じになりました。
(サービス適用例: キンセリの「定番セール」コーナー)
li marker emoji CSS

サンプルコード (HTML, CSS, JavaScript):
<ul class="c20220808">
 <li>&#x1F4AB;定期開催
 <ul>
  <li>&#10140;<a href="">&#x1f31e;日替わりセール</a>
   <a href="">&#x1f31b;月替わりセール</a>
  </li>
 </ul>
<li>&#x1f4b0;<a href="">ポイント還元対象作品</a>
 <ul>
 <li>&#x1f17f;<a href="">31%以上</a>
  <ul><li>&#10140;<a href="">&#x1F4AD;マンガ</a>
   <a href="">&#x1f9d9;ラノベ</a>
   <a href="">&#x1f4d4;文学</a>
   <a href="">&#x1f9ea;科学</a>
   <a href="">&#x1f4ca;ビジネス</a>
  </li>
 </ul>
 </li>
</ul>
<style>
.c20220808 li::first-letter { color: transparent; margin-left: -1em; }
</style>
<script>
Array.from(document.querySelectorAll('.c20220808 li')).forEach(
  function(e){ e.style.listStyleType = '"' + Array.from(e.innerText)[0] + '"'; }
);
</script>


なお、最初は list-style-type: none で良いかと思ったのですが、折り返しが発生したときに「コレジャナイ!」となりました。
  • "list-style-type: none" のとき (コレジャナイ!)
    • 📕おはようございます。
    • 📕こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
  • マーカー文字が📕のとき (コレダ!)
    • おはようございます。
    • こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。

参考


コマンドラインでの JSON の操作には jq (軽量JSONパーサ)[2017-10-24-1] を使っています。万能で便利なんですが、奥まったところにある値だけを取りたいときとかちょっと面倒なんですよね。ちらっと値を見たいだけなのにおおげさになっちゃいがち。

ということで、 gron というのを使ってみました。


gron JSON

あ、これでいいや。
いわゆる「顧客(=私)が本当に必要だったもの」だわ。

例えば、AWS の PA-API で GetItems してその結果の JSON から各 Item のアダルトフラグを取り出すとき。jq だとフルパス書かなきゃならないけど、 gron だと grep との組み合わせで部分文字列書くだけ。しかも、gron だと SearchItems したときも同じの使える。

cat a.json | jq '.ItemsResult.Items[]|.ItemInfo.ProductInfo.IsAdultProduct.DisplayValue'

cat a.json | gron | grep IsAdultProduct.DisplayValue

gron と似たようなこと(JSONを行単位に検索できるように展開)するスクリプトを書いたことあるけど、もう gron があればいいや。汎用的だし。

FreeBSD のバイナリが配布されているので、さくらの500円サーバでもすんなり動くのもありがたや。

§

gron はこの本で知りました。

  • 1日1問、半年以内に習得 シェル・ワンライナー160本ノック

    シェルのワンライナー(その場かぎりの1行プログラム)は、LinuxやMacのコマンドラインインターフェースを立ち上げたら、すぐにプログラムを書いて即実行できます。ちょっとした作業を手っ取り早く片付けるのに向いています。大量のデータ処理、繰り返し処理ほどその効果は絶大です。本書は、そんなシェル・ワンライナーを身につけるためのトレーニング本です。大量の問題を繰り返し解くことで、実務でワンライナーを活用できるようになることを目指します。

これ、ボリュームありすぎで咀嚼しきれない感があるけど、良著です。
これからもお世話になる!

我らが橋本大也さん(@daiya)が某所で、「Archive.org で80年台のコンピュータ雑誌がいろいろ読めてすごい」というようなことを言ってました。

で、みてみたら・・・
自分が投稿したプログラムがありました!
「マイコンBASICマガジン(ベーマガ) 1988年3月号」の X1 の「小さな村」というゲームです。
こちらで読めます:
https://archive.org/details/BASIC19883/page/n169/mode/2up

小さな村 ベーマガ

長年探していたのです。
(手元にあった本はかなり昔に処分してしまいました・・・)

これが載った当時は15才、中学3年生。
雑誌掲載は1988年ですが、作ったのは1987年。
X1 model F というマイコンで作っています。
中学2年生だった1987年の1月あたりに秋葉原で購入したと思われます。

私の投稿プログラムとして(私の中で)有名なのは「IGUSTA(イグスタ)」というパズルゲームです。
これは、「ログイン 1989 1/6,1/20 合併号」の LOGIN SOFTWARE CONTEST のとこに掲載されています。
この号のログイン誌は archive.org では見つけられませんでした。
そのうち出てくるかなあ。みつけたら教えてくださいませ。

私のマイコン、パソコン、インターネット年表。
なお、パソコン通信は経験したことありません。

1984/04-1985/03小6
1985/04-1986/03中1
1986/04-1987/03中2マイコン買う
1987/04-1988/03中3小さな村 (X1, ベーマガ)
1988/04-1989/03高1IGUSTA (X1, ログイン)
1989/04-1990/03高2勝手にダンジョン (X1, ベーマガ別冊)
1990/04-1991/03高3
1991/04-1992/03大1マイコン手放す (実家から出て一人暮らし)
1992/04-1993/03大2
1993/04-1994/03大3大学でインターネットにふれる (初)
1994/04-1995/03大4
1995/04-1996/03修1IGUSTA (JavaScript)
1996/04-1997/03修2パソコン買う(初)
1997/04-1998/03博1
1998/04-1999/03博2
1999/04-2000/03博3パソコン買う(2台目)

「1月」〜「12月」、「1日」〜「31日」が1文字文の全角幅で表示できるUnicode文字。
幅固定なのでレイアウトの細かい調整がなくて良い。

%E3%8B%80 (12992)%E3%8B%8B (13003)
%E3%8F%A0 (13280)%E3%8F%BE (13310)

例1:

(日付部分テンプレ、中心寄せが難しいケース、等幅便利)

例2:
(カレンダーは㉛などの囲み数字も使えるけど囲みはいらない……)

月(1-12)、日(1-31)を入力として月日文字を出す Perl での簡単な方法:
pack("U", 12991 + $month)
pack("U", 13279 + $day_of_month)

サンプルプログラム:
#!/usr/bin/env perl
# -*- coding: utf-8 -*-
use strict;
use warnings;
use utf8;
binmode STDOUT, ":utf8";
print join(",", "㋀", ord("㋀"), "㏠", ord("㏠"))."\n";
print join(",", map {"$_:".pack("U", 12991 + $_)} (1..12))."\n";
print join(",", map {"$_:".pack("U", 13279 + $_)} (1..31))."\n";

出力結果:
㋀,12992,㏠,13280
1:㋀,2:㋁,3:㋂,4:㋃,5:㋄,6:㋅,7:㋆,8:㋇,9:㋈,10:㋉,11:㋊,12:㋋
1:㏠,2:㏡,3:㏢,4:㏣,5:㏤,6:㏥,7:㏦,8:㏧,9:㏨,10:㏩,11:㏪,12:㏫,13:㏬,14:㏭,15:㏮,16:㏯,17:㏰,18:㏱,19:㏲,20:㏳,21:㏴,22:㏵,23:㏶,24:㏷,25:㏸,26:㏹,27:㏺,28:㏻,29:㏼,30:㏽,31:㏾

追記: 月・日・曜日
perl -C -Mutf8 -le '$month=3;$day=11;$dow=5;print pack("U*",12991+$month,13279+$day,12842+($dow-1)%7)'
㋂㏪㈮

ついでに囲み数字も。50まである。
1〜20, 21〜35, 36〜50 で分割されている。

1〜20%E2%91%A0 (9312)%E2%91%B3 (9331)
21〜35%E3%89%91 (12881)%E3%89%9F (12895)
36〜50%E3%8A%B1 (12977)%E3%8A%BF (12991)

1から20までなら:
pack("U", 9311 + $_)
1から50までなら:
pack("U", $_ + ($_ < 21 ? 9311 : $_ < 36 ? 12860 : 12941))

参考


手元でのちょっとした用途で類似テキスト検索をやりたいのですが、
Linux環境であれこれインストールしなくても動かせて、
気ままにカスタマイズできる気が利いたやつがなかったので、
改めて作ってみました。
過去に何度も書いたことのあるプログラムなので目新しさはありませんが。
(「車輪の再発明を気にしない」が私の行動指針です!)

simpii


私の母プログラミング言語(母語)である Perl で書いています。
標準ライブラリしか使っていないので、
Perl さえインストールすればどこでも動くはずです。

転置インデックス(+リランキング)用のスクリプトと、リランキングだけするスクリプトがあります。
リランキング時のスコア計算方法は README.md を参照されたし。

関連記事


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 [ 次へ ]

たつをの ChangeLog
Powered by chalow