あじちゃんの備忘録。

〜ここはメモ帳です

特定のポートを開いているプロセスを殺す

linux

特定のポートで実行中のプロセスを調べる

$ lsof -i:3314
COMMAND      PID   USER       FD   TYPE   DEVICE              SIZE/OFF  NODE  NAME
com.docke    771   user_name  20u  IPv4   0x6e99dd572d5a95e7  0t0       TCP   *:uohost (LISTEN)
com.docke    771   user_name  21u  IPv6   0x6e99dd572593ae5f  0t0       TCP   localhost:uohost (LISTEN)

lsof コマンドを使います
今回つけているオプションは -i:xxxx で、これはポート番号を指定しています

結果に出てくる項目は

COMMAND：プロセスが実行しているコマンド（プログラム）  
PID：そのポートを利用しているプロセスのID  
USER：プロセスの実行ユーザー  
FD：ファイルディスクリプター  
TYPE：ファイルの種別  
DEVICE：デバイスID  
SIZE/OFF：ファイルのサイズまたはオフセット  
NODE：プロトコル  
NAME：ポート名

という感じ
NAMEについている (LISTEM) は待ち受け状態であることを表している

特定のプロセスを殺す

$ kill -9 771

kill コマンドを使います
基本は kill PID です
-9 コマンドは強制終了

ちなみに、 -0 オプションをつけるとプロセスを殺さずに存在確認だけができます
プロセスが存在すると出力はなく、プロセスが存在しないとエラーメッセージがかえってきます

web components のすすめ

その他

勉強会に行った時のメモです

web components の近況

  • IEは基本ダメ2020.01でもうWin7のサポートが切れるので考えなくてよいでしょう
  • EdgeもDevelopingになりました
  • どうしてもIEで使いたい場合はポリフィル入れればよいよ（ケアは必要
  • モダンなものだとpolyfillsなしでOK

基本

  • 新たにESModulesが追加された
  • HTML Templates,HTML Importsは使わない
  • 逐一callBackが呼ばれているだけなのだけどね
  • attachShadow mode:open
    • styleの要素なんかが外に出ない隠蔽しちゃう
    • shadowDOMを持つ要素は子要素を持たなくなる
    • 入れると消えた子要素がslotの要素として割り当てられる
      • 要素名で部分を指定が可能

使い所

  • プロジェクトを超える共通コンポーネント
  • コンポーネントライブラリを使う
    • iron-autogrow-textarea とか pinch-zoom とか
    • webcompoonents.org, googlechromelabs
  • マイクロフロントエンド
    • マイクロサービスをフロントエンドに持ち込む
      • e.g. Reactを隠蔽する（webComponentsだけど中身はReactで動いてるとか）
      • ページの関心毎と技術的関心毎を分離できる
  • SSL
    • Shadow DOMとslotを利用した Hydrate不要のSSRがつくれる
    • 標準仕様なので使えるところで使いましょう

現実的な開発

  • バニラでかく（疲弊しちゃう〜）
  • lit-htmlを使う
    • lit-htmlアプリをwebComponentsにする
  • lit-elementを使う

  • Angular/Vueを使う

    • FWの機能によってFWからwebComponentsを作る

  • バニラで書く→疲弊する→なぜ？

    • ゼロ依存なので軽くて見通しがいい
    • DOM APIを使うことになるので複雑なテンプレートには不向き
    • 属性値は文字列になるのでプリミティブなタグを作る目的の方が相性が良い

  • lit-html

    • polymer
    • テンプレートだけをlit-htmlで書く
      • 更新があるときは勝手に差分更新してくれるので便利
      • webComponentsとして定義する以上はある程度のプリミティブさは求められるよ
  • lit-element
    • litElementをextendsすることで色々良いね
    • typescriptnative!!!
    • lit-htmlのベネフィットを持ち込める
    • property({type:x})で柔軟な属性値を扱える（関数とかも
    • RxJSとの相性が良い
    • ライブラリ
      • fit-htmlとかもある
    • 全てが関数，全てが型付き！！！
    • HTMLと親和性が高い

余談

  • htm
    • tagのテンプレートで書くライブラリ
    • htm自体はテンプレートを解釈しない
    • JSXに似たシンタックス
      • ただし，型検索できない…
    • preach, vhtml と組み合わせて使う

＊文法は似ているがフォーカスが異なるのでプロジェクトに合わせて考える FPが好きならlit-htmlもおすすめ

Composerでdev-masterを指定しているpackageの正確なバージョンの確認方法

laravel composer

結論

composerのパッケージのバージョンを調べるときは composer show -i packagename する．
packagenameつけなかったりcomposer.lock見ても dev-master で使っているパッケージの正確な名前はわからないので気をつけよう．

経緯

例えばこんな感じの composer.json があったとして，

{
    "name": “test”,
    "description": “this is test server",
    "keywords": ["framework", "laravel"],
    "license": "",
    "type": "project",
    "require": {
        "intervention/image": "dev-master”,
    },
}

この部分 "intervention/image": "dev-master”, の， dev-master について．

dev-master とは，このpackageのmasterブランチのことで、このバージョンを指定するとmasterの最新コミットが適用される．
つまり，最新機能が入っているけど不安定なものがインストールされてしまう．
この状態は障害を生みやすいので，動いている状態で一旦固めてしまうのが良い．

というわけで，このパッケージ intervention/image の正式バージョン名を調べる．

バージョンを調べる

ダメだった方法

  • composer.lock を見る
  • composer show -i から目的パッケージを探して見る

よかった方法

  • composer show -i packagename して目的パッケージの詳細情報を見る

ダメだった方法は２つは， - composer.lock を見る

{
    "name": "intervention/image",
    "version": "dev-master",
    "source": {
        "type": "git",
        "url": "https://github.com/Intervention/image.git",
        "reference": "e82d274f786e3d4b866a59b173f42e716f0783eb"
    },
    ...略...
},
  • composer show -i から目的パッケージを探して見る
$ composer show -i
…略…
intervention/image                    dev-master e82d274 Image handling and manipulation library with support for Laravel integration

という感じで，composer.jsonに書ける形式のバージョンはわかりませんでした．

よかった方法は， composer show -i intervention/image する方法．

$ composer show -i intervention/image
name     : intervention/image
descrip. : Image handling and manipulation library with support for Laravel integration
keywords : gd, image, imagick, laravel, thumbnail, watermark
versions : * dev-master, 2.4.x-dev
type     : library
…略…

versionsのところに， * dev-master と 2.4.x-dev が書かれている．
これの 2.4.x-dev がいまインストールされているバージョンとわかる．

固定バージョンを適用する

バージョンがわかったらcomposer.jsonを以下のように書き換える．

{
    "name": “test”,
    "description": “this is test server",
    "keywords": ["framework", "laravel"],
    "license": "",
    "type": "project",
    "require": {
        "intervention/image": "2.4.x-dev”,
    },
}

あとは $ composer update すればOK！