2020年7月4週 Weekly Report
📰 Topics
WSL2 x Ubuntuの環境構築記事 後編を公開しました。
Togowlのメジャーバージョンも2に上がり、便利な機能がいくつか追加されています。
Table of Contents
書いたこと
【WSL】WSL2でつくる快適なUbuntu環境Ⅱ
続編を書きました。
Ubuntu DesktopをインストールせずGUIアプリケーションを使いたい方や、WSLに限らずbashのプロンプトを格好良くしたい方は是非ご覧下さい😄
【TypeScript】リリースノート v2.9
TypeScript v2.9のリリースノートをまとめ終わりました。
個人的には --resoolveJsonModule
以外あまり響かなかったです。
【JavaScript】【Python】正規表現の名前付きキャプチャ
よく忘れるのでMimizou Roomにまとめました。
読んだこと/聴いたこと
Scaledrone
リアルタイムでメッセージをやりとりするSaaSのようです。
WebSocketをサーバ側で用意する必要がなく、クライアントの実装もそれより簡単な印象です。
サーバレスだけどリアルタイム性が欲しい場合に利用できるのではと思いました。
外部との通信が発生するため、仕事だとサーバを立てるのが現実的なのかもしれませんが..😓
HHKBのプロモ
ラインナップ一新のタイミングで作られたのでしょうか..カッコイイ!!
試したこと
Concept
無限キャンバスを持つスケッチアプリです。
各OSに対応していますが今回はiPad Proで使ってみました。
※ 必需ツール(1840円)に課金しています
ドキュメントはコチラです。かなり丁寧☺️
経緯
最近ではiPad OS標準メモを愛用していましたが、先週のレポートに記載のとおり欠点もあります。
❶ 1画面に沢山の文字(ベクターデータ)を書くと突然重くなる
❷ キャンバスの拡大/縮小、ベクターデータの拡大/縮小ができない
❸ 図形描画などはできない
❹ 横幅が固定
❺ 画像と手書きを共存させるのが難しい (画像データに書き込みはできる)
❻ 共同編集ができない
この中でも特に❹が気になっていました。
また、❶❷❸❺も解決できるなら解決したいと思いました。
Conceptはそれらを解決できそうなポテンシャルがあったため試してみました。
用途はアイデアを可視化するメモです。
エンジニアリングのホワイトボード的位置づけなので、デザインや絵を描くわけではありません。
そういう観点で使用した感想です。
使用感
❶~❻について、Conceptの対応状況は以下の通りでした。
No | 説明 | Conceptの対応状況 |
---|---|---|
❶ | 1画面に沢山の文字(ベクターデータ)を書くと突然重くなる | ? |
❷ | キャンバスの拡大/縮小、ベクターデータの拡大/縮小ができない | ✅ できる |
❸ | 図形描画などはできない | ✅ できる |
❹ | 横幅が固定 | ✅ 無限 |
❺ | 画像と手書きを共存させるのが難しい | ✅ 共存可能 |
❻ | 共同編集ができない | ✘ 多分できない |
❻以外の点は解消されたのでよかったです😄
一方、メモにあった『ロック画面でApple Pencilをダブルタッチするとすぐに使える』という最大のメリットが失われますので、これはトレードオフですね。
ペンではなく指で触ったときの挙動を変えられるのも気に入っています。
スライス(消しゴム)という機能に割りあてています。
私のペンの持ち方はApple Pencilのダブルタップと相性が悪いので..。
機能が多くて、操作や設定が少し難しいですが慣れの問題かなとも思っています。
描いてみた
せっかくなので描いてみたメモをアップしておきます。
メモ系のアプリは色々使ってきたので、記事にするのもアリかなと思ったりしています🤔
お気に入りのブラシはソフト鉛筆です。
デフォルトだと薄かったので、スタイラスの設定から筆圧感度を25-100%
に設定しました。
以下はTogowl開発中のメモ書きに使っている画面イメージです。
調べたこと
【Vuetify】v-formによってEnterでページリロードされることがある
Fromsに配置する入力要素によって事象が発生することがありました。
以下のサイトで丁寧に説明されていました。
type=submitの要素が存在せず、項目が1つしかない場合に発生するみたいでです。
implicit submission
というHTMLの仕様らしいです。
【Vuetify】 モバイル端末でダイアログを開いた状態から戻るボタンを押すとページが戻ってしまう
期待値はダイアログが閉じてほしいですが、historyを1つ前に遡ってしまいます。
回避策はいくつか紹介されていますが、対応される気配はなさそう..。
Vue3にメジャーバージョンアップする時期でもあるため、一旦対応は見送りました。
面倒事に巻き込まれるリスクは減らしたいので。
【Vue】v-modelを使用できるコンポーネントの作成
公式ドキュメントに書かれていました。
- プロパティに
value
を追加する - 値に変更があったら
input
イベントをemitしvalue
を送出する
value
とinput
という名前が強制されてしまうのは気になりました。
ただ、インターフェースはv-model
であり実装の話なので大きな問題ではないと思っています。
Ubuntuで一部の絵文字が文字化けする
WSL2/Ubuntuの環境にて、vcxsrvを使ってIntellij IDEAを起動すると一部絵文字が豆腐化していました。
fonts-symbolaをインストールすることで解消しました。
sudo apt install fonts-symbola
詳細はブログの記事をご覧下さい。
整備したこと
【Bash】Bash-itのオリジナルtheme作成
Bash-itのオリジナルテーマを作成しました。
詳細はブログの記事に書く予定です。
maman.theme.bash
#!/usr/bin/env bash
# Use in scm_prompt_vars
SCM_GIT_STAGED_CHAR=" "
SCM_GIT_UNSTAGED_CHAR=" "
SCM_GIT_UNTRACKED_CHAR=" "
SCM_GIT_AHEAD_CHAR=" "
SCM_GIT_BEHIND_CHAR=" "
SCM_THEME_TAG_PREFIX=" "
SCM_THEME_PROMPT_CLEAN=""
SCM_THEME_PROMPT_DIRTY=""
# Separator instead of /
SEP=""
##################################################
#
# | prompt > virtual_env > scm > cwd > status >
#
##################################################
PROMPT_THEME_BG=2
# Python virtualenv
VIRTUAL_ENV_FG=255
VIRTUAL_ENV_BG=4
VIRTUAL_ENV_SYMBOL=" "
# Source code management
SCM_CLEAN_FG=231
SCM_DIRTY_FG=196
SCM_STAGED_FG=220
SCM_UNSTAGED_FG=166
SCM_BEHIND_FG=2
SCM_AHEAD_FG=2
SCM_BG=16
SCM_NONE_CHAR=""
SCM_GIT_CHAR=" "
SCM_GIT_CHAR_REMOTE_DEFAULT=" "
SCM_GIT_CHAR_REMOTE_NO_DEFAULT=" "
SCM_GIT_CHAR_GITHUB=" "
SCM_GIT_CHAR_BITBUCKET=" "
# Current working directory
CWD_FG=159
CWD_BG=236
# Status
STATUS_FG=1
STATUS_BG=52
#######################################
# Arguments:
# None
# Returns:
# None
# Stdout:
# Logo emoji (ex: )
#######################################
function git_remote_logo() {
if [[ "$(_git-upstream)" == "" ]]; then
echo "$SCM_GIT_CHAR_REMOTE_NO_DEFAULT"
return
fi
local remote_domain
remote_domain=$(git remote get-url origin | awk -F'[@:.]' '{print $2}')
case ${remote_domain//\//} in
github) echo "$SCM_GIT_CHAR_GITHUB" ;;
bitbucket) echo "$SCM_GIT_CHAR_BITBUCKET" ;;
*) echo "$SCM_GIT_CHAR_REMOTE_DEFAULT" ;;
esac
}
##############################################
# Arguments:
# None
# Returns:
# None
# Stdout:
# Short current work directory (ex: ~/hoge)
##############################################
function short_cwd() {
echo "$(pwd) " |
sed -r "s@${HOME}/git/github.com@${SCM_GIT_CHAR_GITHUB}@g" |
sed -r "s@${HOME}@~@g" |
sed -r "s/\// /2g"
}
##############################################
# Arguments:
# $1: Background color of separator
# Stdout:
# Separator
##############################################
function separator() {
echo "$(bg "${1}")${SEP}"
}
##############################################
# Arguments:
# $1: foreground color (ex: 208)
# Returns:
# None
# Stdout:
# Color string
##############################################
function fg() {
echo -e "\[\033[38;5;${1}m\]"
}
##############################################
# Arguments:
# $1: background color (ex: 208)
# Returns:
# None
# Stdout:
# Color string
##############################################
function bg() {
echo -e "\[\033[48;5;${1}m\]"
}
##############################################
# Arguments:
# $1: foreground color (ex: 208)
# $2: background color (ex: 208)
# Returns:
# None
# Stdout:
# Color string
##############################################
function fgbg() {
echo -e "\[\033[38;5;${1};48;5;${2}m\]"
}
##############################################
# (1)
##############################################
function build_shell_prompt() {
echo "$(bg ${PROMPT_THEME_BG}) $(fg ${PROMPT_THEME_BG})"
}
##############################################
# (2)
##############################################
function build_virtualenv_prompt() {
local environ=""
if [[ -n "$VIRTUAL_ENV" ]]; then
environ=$(basename "$VIRTUAL_ENV")
fi
if [[ -n "$environ" ]]; then
echo "$(separator ${VIRTUAL_ENV_BG}) $(fgbg ${VIRTUAL_ENV_FG} ${VIRTUAL_ENV_BG})${VIRTUAL_ENV_SYMBOL}$environ $(fg ${VIRTUAL_ENV_BG})"
fi
}
##############################################
# (3)
##############################################
function build_scm_prompt() {
scm_prompt_vars
if [[ "${SCM_NONE_CHAR}" == "${SCM_CHAR}" ]]; then
return
fi
if [[ "${SCM_GIT_CHAR}" != "${SCM_CHAR}" ]]; then
return
fi
local fg_local
if [[ "${SCM_DIRTY}" -eq 3 ]]; then
fg_local=${SCM_STAGED_FG}
elif [[ "${SCM_DIRTY}" -eq 2 ]]; then
fg_local=${SCM_UNSTAGED_FG}
elif [[ "${SCM_DIRTY}" -eq 1 ]]; then
fg_local=${SCM_DIRTY_FG}
else
fg_local=${SCM_CLEAN_FG}
fi
ahead=$(sed -nr "s@.*( ${SCM_GIT_AHEAD_CHAR}[0-9]+).*@\\1@pg" <<<${SCM_BRANCH})
behind=$(sed -nr "s@.*( ${SCM_GIT_BEHIND_CHAR}[0-9]+).*@\\1@pg" <<<${SCM_BRANCH})
without_remote=$(
sed -r "s@(.*)( ${SCM_GIT_BEHIND_CHAR}[0-9]+)(.*)@\\1\\3@g" <<<${SCM_BRANCH} |
sed -r "s@(.*)( ${SCM_GIT_AHEAD_CHAR}[0-9]+)(.*)@\\1\\3@g"
)
local fg_behind=${SCM_CLEAN_FG}
if [[ ${behind} != "" ]]; then
fg_behind=${SCM_BEHIND_FG}
fi
local fg_ahead=${SCM_CLEAN_FG}
if [[ ${ahead} != "" ]]; then
fg_ahead=${SCM_AHEAD_FG}
fi
SCM_PREFIX="$(fgbg ${fg_behind} ${SCM_BG})$(git_remote_logo)${behind} $(fg 0)$(fg ${fg_ahead})${ahead} $(fgbg ${fg_local} ${SCM_BG})${SCM_CHAR}${without_remote}${SCM_STATE}"
echo "$(separator ${SCM_BG}) ${bold_white}${SCM_PREFIX} $(fg ${SCM_BG})"
}
##############################################
# (4)
##############################################
function build_cwd_prompt() {
echo "$(separator ${CWD_BG}) $(fgbg ${CWD_FG} ${CWD_BG})$(short_cwd)$(fg ${CWD_BG})"
}
##############################################
# (5)
# Arguments:
# $1: last_status_code (ex: 127)
##############################################
function build_status_prompt() {
if [[ "$1" -ne 0 ]]; then
echo "$(separator ${STATUS_BG}) $(fgbg ${STATUS_FG} ${STATUS_BG})${1} $(fg ${STATUS_BG})"
fi
}
##############################################
# Last
##############################################
function tail() {
echo "$(separator 0)${normal} "
}
##############################################
# Main
##############################################
function main() {
err_code="$?"
PS1="$(build_shell_prompt)$(build_virtualenv_prompt)$(build_scm_prompt)$(build_cwd_prompt)$(build_status_prompt $err_code)$(tail)"
}
PROMPT_COMMAND=main
Power-Turkの影響を受けています。
【WSL】Ubuntuの日本語入力対応
WSL2/Ubuntuで日本語入力できるようにしました。
詳細はブログの記事をご覧下さい。
【WSL】UbuntuにGoogle Chromeをインストール
WSL2/Ubuntuの環境にて、vcxsrv経由でGoogle Chromeを使える環境を作りました。
インストールのコマンドです。
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list’
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo apt update
sudo apt-get install google-chrome-stable
絵文字などをしっかり表示したいので、Noto Color Emojiをインストールしました。
sudo apt install fonts-noto-color-emoji
Chromeのフォント設定はブログの記事をご覧下さい。
GitHub ActionsでCodeCovの解析に失敗してもFailureにしない
CodeCovへのアクセスはしばしばタイムアウトになります。
その度に確認は手間なので、CodeCovの解析失敗は無視するようにしました。
- uses: codecov/codecov-action@v1
if: matrix.python == 3.8 && matrix.os == 'ubuntu-latest' && success()
- with:
- fail_ci_if_error: true
実はデフォルトが無視する設定なのです。
なんで..?? と思ってましたが腑に落ちました😅
今週のリリース
Togowl v2.0.0 ~ v2.6.0
メジャーバージョンを2に上げました。
タスクの追加機能
Togowlからタスクを作成できるようになりました🥳
Todoistにアクセスせず、頭に浮かんだタスクをすぐに登録できます!
4つあるボタンのどれを押すかによって、タスクがどこに追加されるかが決まります。
URLの埋め込まれたタスクを開始したらリンク先を表示
リンク先を開く手間を削減することで、脳の切り替えをスムーズにします。
Safariだと設定でポップアップを許可が必要です。
タスクを本日リストの最初/最後に移動
ドラッグ&ドロップによる移動の手間を省きます。
タスクメニューの追加
タスクをクリックしたらメニューを表示してアクションできるようにしました。
スワイプメニューにあったタスク編集ボタンはこちらに移動しています。
グレーアウトしている項目は後ほど実装予定です。
その他
【TypeScript】サバイバルTypeScript
業務でサバイバルTypeScriptを教育用に使わせていただいております。
typoを発見したのでプルリクエストを送ってみました。
創の軌跡発売まで1ヶ月
遂にあと1ヶ月!
8/27と8/28はもちろん休暇をとりました😜