<h1 id="h2e03bd9323">olタグ</h1> HTMLで番号付きのリストを使いたい場合は<code>&lt;ol&gt;</code>タグを使います。 自動で上から採番されるのでとっても便利。 こういうやつですね。 <ol><li>aaa</li><li>bbb</li><li>ccc</li></ol> <pre><code>[html:HTML]
&lt;ol&gt;
 &lt;li&gt;aaa&lt;/li&gt;
 &lt;li&gt;bbb&lt;/li&gt;
 &lt;li&gt;ccc&lt;/li&gt;
&lt;/ol&gt;</code></pre> このマーカーはわりと好きなように変更できます。標準で用意されているマーカーは以下を参照。 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type" target="_blank" rel="noopener noreferrer">list-of-type | MDN</a> <h1 id="h037a27c673">オリジナルマーカー</h1> 以下のような採番をしたいときのサンプルです。 a-1. aaaa-2. bbba-3. ccc <pre><code>[css:CSS]
ol {
 list-style: none;
}
ol li {
 counter-increment: li;
}
ol li::before {
 content: 'a-' counter(li) '. ';
}</code></pre> SCSSで書くと以下のような感じ。 <pre><code>[scss:SCSS]
ol {
 list-style: none;

 &amp; &gt; li {
 counter-increment: li;

 &amp;::before {
 content: 'a-' counter(li) '. ';
 }
 }
}</code></pre> <code>li</code>に疑似要素<code>::before</code>や<code>::after</code>を使うことでいろいろなオリジナルマーカーを作れます。

olタグでオリジナルマーカーをつける

<h1 id="hf00cc2827d">改行なしで出力する</h1> 何かの処理をNode.JSで書いていて、途中の経過が知りたいときによく<code>console.log</code>を使いますが、これは改行込みで出力されてしまいます。 改行なしで出力する場合は<code>process.stdout.write</code>を使います。 <pre><code>[javascript:app.js]
process.stdout.write('something')</code></pre>``` 特に何かを<code>import</code>する必要もないので便利です。

改行なしで出力する

<h1 id="h03e846e60e">gatsbyのアップデートでエラーになった</h1> <code>gatsby-cli</code>をアップデートするためにrootで<code>npm i -g gatsby-cli</code>を実行したところ、<code>sh: 1: node: Permission denied</code>というエラーが出ました。 アップデート失敗どころか<code>gatsby</code>コマンドも使えなくなってしまったので解決法を探しました。 こちらにありました: <a href="https://codehex.hateblo.jp/entry/2017/04/18/000000" target="_blank" rel="noopener noreferrer">参考</a> <pre><code>[shell:shell]
# npm config set user 0
# npm config set unsafe-perm true</code></pre> <h2 id="h2d678e3e71">元に戻すには</h2> なにをやっているのかよくわからないけど、たぶんパーミッションを無視する設定でしょう。セキュリティ的に少し怖いので元に戻す方法も書いておきます。 この設定はホームディレクトリの<code>.npmrc</code>に記録されているので、これを編集します。 rootの場合は<code>/root/.npmrc</code>です。 <pre><code>[text:/root/.npmrc]
user=0
unsafe-perm=true</code></pre> この2行を削除すれば元通り。

nodeでパーミッションエラー

<h1 id="h09b0e2e84f">onKeyPress を取得する</h1> onKeyPressはブラウザでキー入力されたときの動作を制御するために使います。 <h2 id="h3b3329eac0">input で onKeyPress を取得する</h2> 例えば、<code>input</code>タグで、入力後Enterを押して確定する動きをReactで実装すると以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 13) sendText()
 if (e.key === 'Enter') setChange()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> この例では、入力後Enterを入力すると入力された文字列が送信されます。IME変換確定時のEnterは無視されます。 <h2 id="h47871df9ba">div で onKeyPress を取得する</h2> 上記`input`のような場合は通常フォーカスされた状態で使用するので入力受付時も問題ないですが、そうではない場合は注意が必要です。 画面制御やメディアの再生、停止をキーボードでも操作できるようにするには親要素(`div`など)でイベントを拾わなければなりません。この場合は、<code>tabIndex</code>を指定してマウントされたときにフォーカスするようにします。 <pre><code>[javascript:React]
const Component = ({mediaControl}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 32) mediaControl() // スペースの入力を拾う
 }

 return (
 &lt;React.Fragment&gt;
 &lt;div onKeyPress={(e) =&gt; keyPress(e)} tabIndex='0'&gt;
 &lt;AppComponent /&gt;
 &lt;/div&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> 上記例では、スペースキーでメディアの再生を停止します。しかし、<code>AppComponent</code>内に<code>input</code>や<code>textarea</code>がある場合、イベントはバブリングするので文字列入力時のスペース入力も拾ってしまいます。 この場合は、フォーム要素での入力に<code>event.stopPropagation()</code>メソッドを使うか、<code>div</code>でイベントを拾ったときに除外します。 <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 e.stopPropagation()
}</code></pre> <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 if (e.target.tagName !== 'INPUT' &amp;&amp; e.target.tagName !== 'TEXTAREA') return false
 if (e.which === 32) mediaControl()
}</code></pre> <h2 id="h642cf9e467">TypeScriptを使う</h2> onKeyPressイベントのTypeScriptの型は<code>KeyboardEvent&lt;HTMLInputElement&gt;</code>です。最初の例をTypeScriptで書くと以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {
 if (e.which === 13) sendText()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> <h2 id="h923c78a9c9">キーの判別</h2> 上記の例はキーの<code>charCode</code>を用いて判別を行なっていますが、キーの<code>name</code>や<code>code</code>などで判別する方法もあります。注意点はすべてのブラウザでキーのコードや名前が同じという保証はないので、実際に使用する場合は想定される環境で動作するか確認することをおすすめします。

ReactでonKeyPressを取得する

<h1 id="ha9b688b393">ファイルやディレクトリのサイズを確認する</h1> Windowsでは右クリック→プロパティでサイズの確認ができますが、CUIではコマンドを使って確認します。 <pre><code>[shell]
du -sh ./*</code></pre> こんな感じで出力されます。 <pre><code>[shell]
8.0K ./app.js
4.7M ./client
103M ./node_modules
4.0K ./package.json
324K ./package-lock.json
4.0K ./README.md
48K ./server
4.0K ./webpack.js</code></pre> コマンドの構成はこんな感じ。 <pre><code>[shell]
du -[option] [directory || file]</code></pre> <h2 id="h32a67f9128">オプション</h2> <code>-s</code>はサブディレクトリを表示しないオプションです。これをつけないとサブディレクトリの内容もずらずら出てきます。 <code>-h</code>はサイズに合わせて読みやすく単位を変えて表示してくれます。 <code>-k</code>をつけると、1KBを単位として計算します。

ファイルやディレクトリのサイズを確認するコマンド

<h1 id="h0ab0e9f747">コミットした直後にキャンセルしたい</h1> コミットした直後に取り消したいときのコマンドです。 <pre><code>[shell]
git reset --soft HEAD^</code></pre> Gitを操作していると、よくコミットした後にファイルを追加し忘れたり、メッセージを間違えてたり、修正漏れが見つかったりして、コミットキャンセルしたいときってありますよね。 <h2 id="h32a67f9128">オプション</h2> <code>--soft</code>はコミットのみ取り消しを意味し、これを<code>--hard</code>にするとワークディレクトリの内容も戻ります。 <code>HEAD^</code>は直前のコミットを意味し、<code>HEAD~{n}</code>で<code>n</code>個前のコミットを指定することができます。 直前のコミットの修正であれば<code>--amend</code>を使って上書き修正もできます。

Gitで直前のコミットを取り消す

<h1 id="h76a15c2085">CouchDBとは</h1> 唐突にCouchDBを試すことにしました。いま、ブラウザで使うDBとうまく連携できるDBを探しています。 <a href="http://docs.couchdb.org" target="_blank" rel="noopener noreferrer">CouchDB</a>はオープンソースで提供されているNoSQLデータベースです。 特徴などは公式をご覧ください(ここでは省略) <h2 id="hd8d793506b">インストール</h2> 公式にも<a href="http://docs.couchdb.org/en/stable/install/index.html" target="_blank" rel="noopener noreferrer">インストール手順</a>があります。素直にその手順に従ってインストールします。 インストール先のOSは Ubuntu 18.04 です。 <h3 id="hc6d6edd293">パッケージ情報の追加</h3> 以下でパッケージ情報を追加します。 <pre><code>[shell:shell]
# echo "deb https://apache.bintray.com/couchdb-deb bionic main" | tee -a /etc/apt/sources.list</code></pre> これでパッケージ情報が<code>/etc/apt/sources.list</code>に追記されます。 <code>bionic</code>は<a href="http://docs.couchdb.org/en/stable/install/unix.html" target="_blank" rel="noopener noreferrer">公式</a>より、Linuxディストリビューションによって異なります。 <h3 id="h0eb1aba3cb">リポジトリキーをインストール</h3> 以下でリポジトリキーがインストールされます。 <pre><code>[shell:shell]
# curl -L https://couchdb.apache.org/repo/bintray-pubkey.asc | apt-key add -</code></pre> <h3 id="h58a6675258">パッケージのインストール</h3> その後、リポジトリキャッシュとパッケージのインストールをします。 <pre><code>[shell:shell]
# apt-get update &amp;&amp; apt-get install couchdb</code></pre> パッケージのインストール中に実行モードの選択とAdminのパスワードを設定します。 実行モードは<code>Single Node</code>と<code>Clustered</code>があるみたいですが、まだよくわかりません。 とりあえず<code>Single Node</code>を選択。 これで一応インストールは完了。 <pre><code>[shell:shell]
# service couchdb status</code></pre> <h2 id="h9fba2cd5ac">Fauxtonへのアクセス</h2> CouchDBにはブラウザ上からDBの操作ができるphpMyAdminのようなものがあります。phpMyAdminほど高機能ではないようです。 Linux上でGUIがある場合は、ブラウザから<code>http://127.0.0.1:5984/_utils</code>でアクセスできます。 初期状態では外部からのアクセスはできないようになっているようで、ローカルLANなどからアクセスする場合は設定を行います。 CouchDBは<code>/opt/couchdb</code>にインストールされています。 設定ファイルは適宜バックアップを取ってください。 <code>[chttpd]</code>の<code>bind_address = 127.0.0.1</code>を変更します。 <pre><code>[shell{3}:/opt/couchdb/etc/local.ini]
[chttpd]
;port = 5984
bind_address = 0.0.0.0
; Options for the MochiWeb HTTP server.
;server_options = [{backlog, 128}, {acceptor_pool_size, 16}]
; For more socket options, consult Erlang's module 'inet' man page.
;socket_options = [{sndbuf, 262144}, {nodelay, true}]</code></pre> これで再起動。 <pre><code>[shell:shell]
# service couchdb restart</code></pre> これでLAN内の他のPCのブラウザからアクセスできます。

CouchDBをUbuntuにインストールしてみる

<h1 id="hfc2450661a">icsという拡張子</h1> icsという拡張子のファイルがあります。中身はただのテキストファイルなのですが、これを使ってiOSカレンダーアプリへスケジュールなどを反映することができます。 個人で利用するのもいいですが、グループで利用するときに力を発揮するかなと思います。グループ(なんかの集まり)のメンバーにスケジュールを配布したいときに、メールなどで通知したりWebサイトなどを経由して確認してもらったり、いくつか方法があると思います。ics形式のファイルをWeb上で公開することでメンバーにリンクしてもらい、iOSカレンダーアプリ上のスケジュールを自動更新することができます。 iCalendar形式は標準フォーマットなので、本当はiOSに限らずAndroidやWindowsでも参照することができます。ですが、Androidの同期はよくわからなくて、Windowsは調べてないです。 <h1 id="h359df49702">iCalendarフォーマット</h1> <a href="https://ja.wikipedia.org/wiki/ICalendar" target="_blank" rel="noopener noreferrer">Wikipedia</a>によると、規格自体は古くからあるようです。 フォーマットは以下のようになっています。 <pre><code>[ics:iCalendar]
BEGIN:VCALENDAR
PRODID:-//Zatsuzen//Zatsuzen Schedule//EN
VERSION:2.0
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:スケジュール
X-WR-TIMEZONE:Asia/Tokyo
X-WR-CALDESC:スケジュール

--- ここにイベント情報 ---

END:VCALENDAR</code></pre> <code>BEGIN:VCALENDAR</code>と<code>END:VCALENDAR</code>で囲い、その中に概要を書いていきます。 スケジュールの概要に続いてイベント情報を書きます。イベント情報は以下のようなフォーマットで、複数ある場合はこれを繰り返して書きます。 <pre><code>[ics:iCalendar]
BEGIN:VEVENT
DTSTART:20190728T090000Z
DTEND:20190728T130000Z
DTSTAMP:20190101T000000Z
UID:314df8aa7b930c5287ef3ca4d536f874
LOCATION:日本のどこか
SUMMARY:なにかのイベント
END:VEVENT</code></pre>

iCalendar形式とiOS

<h1 id="h91eeba0e60">Postfix を使って送信したメールにLinuxユーザ名が入る</h1> Postfixはmailコマンドで送信したメールのヘッダー情報を変更することができます。 環境によっては送信したメールのFromヘッダが以下のようになります。 <pre><code>From: username &lt;username@example.com&gt;</code></pre> メールアドレス部分の<code>username</code>は<code>sender_canonical</code>を使って変更できますが、表示名の変更でつまづいたのでそのメモです。 Postfixのバージョンは以下の通り<pre><code>$ postconf | grep mail_version
mail_version = 3.1.0</code></pre> <h2 id="hd0a9edd01f">header_checksを使う</h2> Fromヘッダーは<code>header_checks</code>を使って変更できます。 <h3 id="hc92324087d"><code>header_checks</code>を作成</h3> ここでヘッダーの置換処理は<code>sender_canonical</code>の処理の後に行われるようです。 置換処理前のFromヘッダーは以下のようになっています。 <pre><code>[shell]
From: username@example.com (username)</code></pre> これを次のように置換します。 <pre><code>[shell]
From: info &lt;username@example.com&gt;</code></pre> <code>/etc/postfix/</code>以下に<code>header_checks</code>ファイルを作成します。 <pre><code>[shell:header_checks]
/^From:[[:space:]](.*@.*)[[:space:]].*$/ REPLACE From: info &lt;${1}&gt;</code></pre> このファイルは正規表現が使えますが、少し変則的です。スペースは<code>\s</code>ではなく<code>[[:space:]]</code>を指定します。また、変数は<code>()</code>で囲ったものを<code>${1}</code>で使用できます。 <h3 id="hcc76080bca"><code>header_checks.db</code>を作成</h3> 次に、以下のコマンドを実行します。 <pre><code>[shell]
postmap /etc/postfix/header_checks</code></pre> <code>/etc/postfix/header_checks.db</code>が生成されます。 <h3 id="hfade3ea30f"><code>main.cf</code>に設定を追加</h3> 最後に、<code>/etc/postfix/main.cf</code>に以下2行を追加します。 <pre><code>[shell:main.cf]
header_checks = regexp:/etc/postfix/header_checks
smtp_header_checks = regexp:/etc/postfix/header_checks</code></pre> <code>header_checks</code>がコメントアウトされている場合は解除してください。<code>.db</code>は書かなくていいみたいです。 再起動で完了です。 <pre><code>[shell]
/etc/init.d/postfix restart</code></pre> ちなみにこの設定は受信時にも適用されるので正規表現で書く場合は注意が必要ですね。

Postfixで送信したメールの送信元を変更する

<h1 id="hf7fe7a8bed">audit コマンドで high severity vulnerability が出る</h1> 久々にnode-sassを使おうと思ったらauditでつまづいた。 <h2 id="h5c0c7cb22e">問題</h2> <code>npm i -D node-sass</code>したら以下の警告が出た <pre><code>found 1 high severity vulnerability
 run `npm audit fix` to fix them, or `npm audit` for details</code></pre> 早速<code>npm audit</code>を行うと、以下のようになる。 <pre><code> === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│ Manual Review │
│ Some vulnerabilities require your attention to resolve │
│ │
│ Visit https://go.npm.me/audit-guide for additional guidance │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Arbitrary File Overwrite │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ tar │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ &gt;=4.4.2 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ node-sass [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ node-sass &gt; node-gyp &gt; tar │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/803 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 8468 scanned packages
 1 vulnerability requires manual review. See the full report for details.

</code></pre> これは node-tar の4.4.2より前のバージョンは任意ファイルの上書きに関して脆弱性があるとのこと。 <h2 id="ha7911fa1fa">修正</h2> 原因は<code>node-gyp</code>にあります。<code>node-gyp@4.x.x</code>にアップデートする必要があります。 <code>package-lock.json</code>を修正します。 <code>node-gyp</code>の項目を探し、<code>requires</code>以下の<code>tar</code>の項目を削除し、<code>dependencies</code>に<code>tar</code>を追加します。 <pre><code>[javascript{17,26,27,28,29,30}:package-lock.json]
 "node-gyp": {
 "version": "3.8.0",
 "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
 "integrity": "sha512-3g8l...",
 "dev": true,
 "requires": {
 "fstream": "^1.0.0",
 "glob": "^7.0.3",
 "graceful-fs": "^4.1.2",
 "mkdirp": "^0.5.0",
 "nopt": "2 || 3",
 "npmlog": "0 || 1 || 2 || 3 || 4",
 "osenv": "0",
 "request": "^2.87.0",
 "rimraf": "2",
 "semver": "~5.3.0",
- "tar": "^2.0.0",
 "which": "1"
 },
 "dependencies": {
 "semver": {
 "version": "5.3.0",
 "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
 "integrity": "sha1-myzl...",
 "dev": true
- }
+ }, 
+ "tar": {
+ "version": "^4.4.2"
+ }
 }
 },</code></pre> 修正後、<code>node_modules</code>を削除し<code>npm i</code>を実行します。

ゆったりWeb手帳

気になったことをのんびり書くよ