IPL脱毛器の中身を出してみたら (JIN BISON RK-V9)
JIN BISON(金野牛) 3イン1 光脱毛器 RK-V9です。Alibabaで単価30ドルくらい。http://www.jindlson.com/products_content-2130122.html
パカリ。
ほとんどカメラのフラッシュライトですね。
基盤おもてうら。ファンの側壁がへし折ってあり放熱板は強制空冷になっています。スイッチも入らないところは斜めに削ってあって手作り感があふれていました。
ランプカートリッジのソケットはなんか見たことあると思ったらPCI Express x1が流用されていました。
ちなみにこの機種、人体に接触するヘッド側から排熱する設計ですのでおすすめできないです。
Tailwind 2.0のfont-familyがどうなっているか確認したので
触った感触を述べたいがよろしいか。
あらまし
お勉強しようと使ってみたところなぜか游ゴシックUIで表示される…。調べたらTailwindのfont-familyはUI系ゴリ押しでした。カスタマイズは規定のフォントクラスを上書きして行うようです。
- postcss 8.2.4
- tailwindcss 2.0.2
- modern-normalize 1.0.0
- purgecss 3.1.3
- tailwindcss 2.0.2
プリセットを見る
ドキュメント全体にかかっている設定から見たいと思います。最初にmodern-normalize.cssがインポートされるためその書体指定もあるのですがTailwindにほぼ上書きされるのとコンセプト的に大差ないので割愛いたしました。
html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } body { font-family: inherit; } button, input, optgroup, select, textarea { font-family: inherit; } pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Mona... }
大掴みに言うとゴシック体を使うことと各プラットフォームの普及フォントを使うというポリシーがあるようです。一貫した体験性を提供しようという考えのもとユーザの選択肢を奪う指定になっておりまして好みの分かれるところだと思いますがフレームワークなのでそれはいいとして問題は日本語環境のwindowsでございますあね。
system-uiはアレがアレする
system-ui
はOSのネイティブUIに使われているフォントを意味する総称フォント1でありまして現状OSの見た目に寄せたい部分に使うのが無難でしょう。たとえばPWAのメニューとか。
The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.
英語圏では可読性の高いSegoe UIが選択されるので構わないのでしょうけど、MS UI Gothicにつらなる日本語UIフォントというのはレタースペースが極小となっていてVariable fontでもなくUIパーツに全角文字を押し込むのに都合がよいですが文章となると読みづらい。実際主要ブラウザのデフォはUIじゃないほうのMeiryoですし、まあわざわざUI系フォントで閲覧している人がいないとは言い切れないですけど、そうであるにしてもノーマライズと言いつつ偏屈な特殊例を増やす残念なCSSであることには変わりありません。
このプロセスはpreflight
に含まれており無効にするオプション2も紹介されていましたがこれをやると下処理がゴソっと抜けてしまうのでルート要素のフォント指定だけ変更する方法について後で触れたいと思います。
フォントファミリのクラス
上記はhtml全体のお話でしたが、要素ごとにフォントファミリを指定するためのクラスが用意されています。こちらはpreflightを止めても使用可能でした。
.font-sans { font-family: ui-sans-serif, system-ui, -apple-system, ... } .font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
それぞれresponsive variantも生成されますので画面サイズに応じて表示フォントを変えることができます。デバイスごとにserifとsans-serifを切り替えたい需要がどこかにあるのやもしれません。
カスタマイズについて
Tailwindのfont-familyは日本語環境にマッチしない部分がありました。またフォントクラスのvariantは標準ではまず使わないであろうものでしたのでカスタマイズが前提となっているのかなと思います。
クラス定義
tailwaind.config.jsに新しいクラスを定義するならたとえば以下のように指定します。
module.exports = { theme: { extend: { fontFamily: { 'sans': ['sans-serif'], 'relics': ['Times New Roman', 'MS PGothic'], 'ui': ['system-ui', '-apple-system'] } } } }
クラス名はキーの頭に.font-
を足して作られます。この場合.font-sans
, .font-relics
, .font-ui
とそれぞれのvariantが生成されます。配列の値はそのまま出力されますのでフォント名によっては3は引用符も含めて設定しておく必要があります。
全体指定の上書き
.font-sans
の値はhtml要素のフォント指定としても利用されます。なのでsansを上書きすると結果的に全体設定になります。同様に.font-mono
はpreなどの初期値と入れ替わります。この点についてマニュアルに該当箇所が見つけられなかったのですがCSSのコメントには一応記載がありました。
Use the user's configured `sans` font-family (with Tailwind's default sans-serif font stack as a fallback) as a sane default.
そういうわけでクラスとして使わないとしてもsansだけは設定しておくのがよいと思われます。
CSSでつくる透過吹き出し
CSSというより根性で作った。
作成手順
クラスポン付けで<span class="comment"></span>
を吹き出しにすることを目指していきます。
背景をつくる
まずこれを作ります。
角が丸くなってるのが要素本体。その下についてる帯はlinear-gradient
の透過ピクセルをborder-image
にして付けました。角の丸め方は以下の要領です。
パディングエリア(緑)の四つ角が同じになるようにボーダー(黒)を曲げているのが分かるでしょうか。コードとしては例えば
.comment { border-radius: .4em; border-bottom-width: .6em; border-bottom-left-radius: .4em calc(.4em + .6em); border-bottom-right-radius: .4em calc(.4em + .6em); }
のように楕円の縦の半径にボーダーの幅を足すといい感じにニュッと曲がります。
ちなみに黒のボーダーはborder-image
に置き換わるので色はどうでもいいですが見えないだけで場所は取ります。
::beforeで枠をのせる
::beforeのボーダーで枠を作ります。真ん中下のところはclip-path
で切っておきます。clip-path
はパスで囲ったところだけ表示させるプロパティで、ここでは全体をぐるりと囲いつつ消したいところだけ外へ出すような感じです。
::afterでつのを成型する
海苔状の物体は::afterのボーダーです。これをV字に切り抜いて吹き出しのつのにします。
カットして完成
.commentのclip-path
ではみ出している部分を切ったら完成です。
CSSの実際
polygonのストロークをのけると正味30行くらいですからやってることはわりと単純ですがしかし簡単に見えて意外とこのやり方でないとという部分がありますのでいくらか自注をつけたいと思います。
デモ
要素境界を整える
.comment { ... background-clip: padding-box; border-bottom: solid 1em; border-image: linear-gradient(var(--bg-color) 0 1%) 1; -webkit-clip-path: polygon(...); clip-path: padding-box polygon(...); }
background-clip
は背景の範囲を決めるプロパティで初期値はborder-boxです。背景とボーダーはダブるとブレンドされて色が変わってしまうのでpadding-boxを指定して分離します。
困るのがスケーリングが掛かって要素サイズの計算値に1ピクセル未満の端数が出る場合で、そうなるとborder-image
とパディングエリアはぴったりくっつきません。これは仕様によるもの・バグによるものとUAの解釈によるものがあり、微妙に隙間が空いたり重なったりして本当に往生するわけですが「border-width
とborder-image-width
が1:1でborder-image-outset
がゼロ」ならかなりフィットします。つまり何も指定しない時が一番まともです。
border-image
のwidthとoutsetを使う場合単位を付けずに比率で指定し、かつそれぞれ整数倍にしておけば目立つギャップは回避できるようです。
clip-path
の座標計算でも同種の問題にあたりまして単純にボックスの境界でクリップすると削げることがありました。今回の作例ではFFは参照ボックスをpadding-boxにすることでボーダーを食いにくくなりました。webkitは参照ボックスの指定に対応していないのですがもともとの作りとして隙間は空いても削ることはないようです。
続いて::afterでつのの縁取りを作るところです。
.comment::after { box-sizing: content-box; height: calc(100% - var(--border-w)); border-bottom: solid .7em var(--border-color); clip-path: polygon(...); }
つのを枠の内側のラインに合わせるために、枠線一本分低いボックスを作って基準にしています。最初はposition
で位置を合わせようとしたんですが例によって精度が出なかったのでまだマシなheight
を使っています。box-sizing
はどちらでもよいですがborder-boxにしたい場合、箱の外にボーダーを生やすためにborder-image: linear-gradient(var(--border-color) 0 1%) 1 / 1 / 1;
としてアウトセットする必要があるかと思います。
その他の検討事項
最初の思いつきとしてはSVGとborder-image
で楽々と透過吹き出しが作れるのではと思ったんですがそんなことは全くなかった。そこでボーダーと疑似要素をclip-path
で加工する手法を試みましてある程度の成果があったのではないかと思います。実用上の課題としてはpolygonによる切り抜きが面倒なことだと思います。機械的にやれるとよいのですが。それからつのをカーリーにしたい場合ですね。できそうな気はしますが労力を天秤にかけるとそもそも背景画像として用意するかjavascriptで吹き出しのSVGを生成するほうが沼が浅い予感がします。
今回調べてみてサブピクセル絡みのレンダリングギャップは一般化された対処法もなくかなり厄介だなと感じました。私はもう面倒になってしまったのでスケールを基準に考えればむしろ割り切れるピクセル値が異常であり表示位置はズレるほうが逆に自然なのではと思い始めている次第です。
clip-path
はpath()
が使えるのでドローソフトの定義がそのままコピペできる…ことになっているけれども現状では座標がボーダーエリアの左上を原点としたピクセル値で、引数に文字列しか受け付けないためcalc()
も挟み込めないということで実際には適用できるケースのほうが稀ではないかなと思います。Inline SVGの<clipPath>
はややサポートが厚いですが、とは言えCSS側の計算値を反映させる工夫が必要になると簡単ではないと思います。clipやmask用途での使い勝手は数年来あまり変わっていないようでありまして先進的なサイトの素敵なサンプルに化かされて手を出すと肥溜めに肩まで浸かることになるので注意が必要だなと思いました。
Lifebookのbeepを鳴らすメモ
意外と鳴らないbeepを鳴らすメモです。以下にbeepを鳴らさない方法が色々書いてあるので反対のことをすればだいたいなんとかなる模様。 https://wiki.archlinux.org/index.php/PC_speaker
1. 環境
2. モジュールについて
とりあえずlsmod
してpcspkrがロードされていることを確認します。ubuntuでは/etc/modprobe.d/blacklist.confでロードされないようになっているらしいですがdebianではそういったことはなかった。pcspkrの代わりにsnd_pcspでもbeepできますがわざわざこれを使う意味はなかろう。
3. ミュート解除
デフォ消音につき、apt install alsa-utils
してalsamixer
を起動。メインボリュームとbeepをm
してミュートを解除、Gainを0dbまで上げておきます。Loopbackもenabledにする必要があります。
4. パーミッションのチェック
非rootでbeep --verbose
するとpermission deniedされている事象について。
4-1. udevのデフォルトルール
beepの出力先デバイスのpermissionはudevで設定されています。ルールは/lib/udev/rules.d/70-beep.rulesにあり、ACLでuaccessが設定されるのでローカルにloginしているユーザなら誰でも出力可能ですがsshやらジョブキューから実行していると弾かれることになります。
4-2. udevで権限付与
beepの出力先をaudioグループ所有に変更して書き込みできるようにします。audioグループがない場合まず
# addgroup audio # usermod -aG audio わしじゃよ
などとして準備します。70-beep.rulesを/etc/udev/rules.dにコピーして編集。udevのルールは1行で、マッチ条件に続いてAssignmentを記述することになっているので
ACTION=="add", SUBSYSTEM=="input", ATTRS{name}=="PC Speaker", \ ENV{DEVNAME}!="", TAG+="uaccess", GROUP="audio", MODE="0660"
のように書きます。これでPC Speakerなるinputデバイスがaddされたときにグループとrwが割り当てられる。さっそく適用してみましょう。ルールをリロードしてaddトリガを発行。
# udevadm control --reload # udevadm trigger -c add /dev/input/by-path/platform-pcspkr-event-spkr
パーミッションエラーが消えればヨシ。fmv-820mgはこれでよかったのですがp772ではエラーはでないが音が鳴らなかったため続きます。
5. PC Speakerが鳴らないケース
beep
はまず/dev/input/by-path/platform-pcspkr-event-spkrへ出力を試みます。このファイルは/dev/input/eventNへのシンボリックリンクになっていますがそもそもこいつが鳴らないようです。
5-1. PC SpeakerとHDA Digital PCBeep
PC Speakerは伝統的なPITの出力を使ったBeepで、後者はIntel High Definition AudioのBeep機能です。p772には両方あります。
udevはPC Speakerをbeepデバイスとしてセットアップしてくれるが鳴らない…。Digital~のほうを鳴らした直後だけうっすら鳴るのでどうも存在はするらしいが常時給電されているわけではないのか詰んだのでDigital PCBeepを使うことにしました。
まずデバイスを探すわけですが方法は至って簡単で手当り次第に# beep -e /dev/input/eventN
して鳴ったやつがそれ。一応デバイスのリストからも確認してみます。udevadm info -e
すると
P: /devices/pci0000:00/0000:00:1b.0/sound/card0/input14 L: 0 E: DEVPATH=/devices/pci0000:00/0000:00:1b.0/sound/card0/input14 E: SUBSYSTEM=input E: PRODUCT=1/10ec/269/1 E: NAME="HDA Digital PCBeep" E: PHYS="card0/codec#0/beep0" E: PROP=0 E: EV=40001 E: SND=6 E: MODALIAS=input:b0001v10ECp0269e0001-e0,12,kramls1,2,fw E: USEC_INITIALIZED=3517421 E: ID_INPUT=1 E: ID_PATH=pci-0000:00:1b.0 E: ID_PATH_TAG=pci-0000_00_1b_0 E: ID_FOR_SEAT=input-pci-0000_00_1b_0 E: TAGS=:seat:
のようなブロックが見つかりました。このデバイスにリンクするようudevのルールを更新します。マッチ条件に使える属性はudevadm info -a -n input/eventN
などで得られます。
5-2 Digital PCBeep用のudevルール
ルールを上書きしたいので/etc/udev/rules.d/70-pcspkr-beep.rulesを作って
ACTION=="add", SUBSYSTEM=="input", ATTRS{name}=="HDA Digital PCBeep", \ KERNEL=="event?*", SYMLINK="input/by-path/platform-pcspkr-event-spkr", \ TAG+="uaccess", GROUP="audio", MODE="0660"
としました。これでHDA Digital PCBeepというデバイスが追加されるとリンクが貼られてパーミッションも設定されます。リンクを触りたくなければalias beep='beep -e /dev/input/event8'
などでよいでしょう。
6. HDA Digital PCBeepの制約
AC'97・HDAの仕様でBeepジェネレータのトーンレジスタは8bitしかなく、生成可能な周波数は 48000 / (1 .. 255 * 4) Hzに限られます。PC Speakerの 1193182 / (20 ... 32767) Hzと比べるとやや大雑把な音律で、メロディとして聴くなら5歳児のアカペラくらいの印象になるかと思います。
7. ハードウェア事情など
BeepデバイスがPC Speakerという名前であるのはIBM PCに遡るらしいですね。Intel C8253というタイマーICで矩形波を出すことができたのが専らBeepとして利用されるようになったそうです。時代の流れでタイマーで音を鳴らさなくてもよくなりましたが、データシートを見るかぎり8254互換のPITがチップセット(ich-mやpch)に統合されて生き残っていまして、オーディオコーデックにもPCBeep入力ピンが残っているところ、繋げばLineに出せる作りになっているようです。しかし今回調べていて分かったことはBeepを鳴らしたい人より止めたい人のほうがずっと多いこと。コストや電力の問題が解決したとて需要がなければBeepの消滅は必定かもしれんすね。個人的にはサウンドとBeepの用途は別だと思いますし実機のブザーはいい音なので存続してほしい気持ちは多少ありますが。
beep -f 523 -l 300 -D 100 \ -n -f 698 -l 800 \ -n -f 880 -l 300 -D 100 \ -n -f 784 -l 800 \ -n -f 523 -l 300 -D 100 \ -n -f 698 -l 800 \ -n -f 880 -l 400 \ -n -f 784 -l 400 \ -n -f 880 -l 400 \ -n -f 932 -l 400 \ -n -f 1047 -l 400 \ -n -f 880 -l 400 \ -n -f 698 -l 400 \ -n -f 784 -l 700 -D 100 \ -n -f 523 -l 400 \ -n -f 698 -l 1200
Daisy Bell (A Bicycle Built for Two)
参考
サンプルエントリー
カスタムテーマ制作用のサンプルエントリーです。下記をコピーして記事を作成してください。 ※ Markdownで書かれています。 必ずブログの「設定」-> 「編集モード」を「Markdown」に変更してから記事を作成してください。
段落
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
画像(はてなフォトライフ)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
脚注
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。*1
罫線
(Rounded Mplus 1c Bold)
h1見出し
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
h2見出し
h3見出し
asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 作者:近藤 淳也
- 発売日: 2006/02/13
- メディア: 単行本
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
引用
本日(11月12日)から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
リスト(ul,ol,dl)
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
- 大賞1名:Amazonギフト券5万円分
- 入選9名:Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
- 大賞1名
- Amazonギフト券5万円分
- 入選9名
- Amazonギフト券1万円分
テーブル
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
名前 | 色 | 個数 |
---|---|---|
りんご | 赤 | 1 |
みかん | だいだい | 2 |
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
コードブロック
.xxx { width: 999px; height: 999px; } .propA, .propB, .propC { width: 999px; height: 999px; } #yyy { width: 9px; height: 999px; }
typescript
const stepOpr = (actualOperation: Function) => { // something to say return (x: number) => { return (y: number) => { return actualOperation(x, y) } } } const add = (x: number, y: number): number => { return x + y } let left = stepOpr(add), right = left(1), ret = right(2) console.log(ret) // => 3
aa
_ /::::::::::::::::\ , ヽ:::::::::::::、 / 、:::::::::::::、 / , --_ 、 、::::::::::::、 レ/'`´` ヽミ_ヽ 、:::r=、:::、 ゝ'_,、,、,、, 、_、 ゝム 、:|l c:}}:::、 ゞ'゙  ̄ ̄` ゙‐-ヽ、マ 、:ゝ=''::::::, | `゙ 、::::::::::::::::, /i 、ニニ',::::::, /:::::| 、ニニ',::::::i /:::::::::::| 、ー、:::::::::| /::::::::::::::| /:::::::::ヽ:::::::ト..、 ,.:':::::::::::::::_:| /:::::; :::::::::゙、:::i::::::::"'''-...、 '_::::::::: -‐'´ | ./::::::::::::::::::::::::i:::i ::::::::::::::::::シ  ̄ | ,..':::::::::::::::::::::::::::::,-::::i:::::::::::::, -' | /:::::::::::::::::::::::_:, -':::::::├‐ ' ´ ゝ-----‐ '゙´
*1:ここに脚注を書きます