5000164 is here
My writing is my life.
No results for undefined
Powered byAlgolia
Bash のデバッグができた

これで動いた。
便利。

Display Menu を使ったら表示領域が広がって便利

今 MacBook Pro を使っていて、画面の表示を Retina 表示のままではなく More Space に設定して表示領域を広くしていたんだけど、最近 Display Menu というアプリを教えてもらった。
これを使うと System Preferences で設定できるよりも表示領域を広くすることができる。
これで今は 2,560 x 1,600 の解像度で表示している。
作業領域が広くなって便利。

2018.5.27 追記

2,560 x 1,600 では見づらくて顔を近づけることが多く、 Mac の設定から変更できる 1,920 x 1,200 で使うようにしたのでアプリは使用しなくなった。

アプリ

使い方がわかりやすかった記事

Android のフローティングブラウザを Flynx から Lynket に変えた

元々は Link Bubble でフローティングブラウザを知り、便利で愛用していたのだが、たしか使えなくなったので代替アプリを探して Flynx を使うようになった。
でも広告をブロックしたかったり、常時パソコン用の表示にしたかったりと思って、ちょいちょいフローティングブラウザは調べていた。
それで今回もたまたま調べていたら、 Chromer というアプリがアップデートで Lynket という名前に変わっていて、改めて使ってみたらいい感じだったので乗り換えることにした。

そもそものフローティングブラウザのよさ

  • 作業を中断せずに続けることができる
  • Twitter を読んでいて、気になったリンクは開いておく、 Twitter を読み終わったら開いていたリンクを読む、ということができる
  • 作業を途切れることなく続けることができていい

Lynket のいいところ

  • 同じリンクを多重に開かない

    • あれ、このリンクさっき開いたっけ?と思って念のため開いておく、ってやって無駄にリンクを溜めておくことがなくなる
  • ページを表示したらスタックから自動で消す

    • 特に共有することがなければ読んだらそのまま閉じるだけなので、勝手に閉じてくれるのはいい
    • やっぱまた後でと思ったらまた小さくしておくことで溜めておくことができる
  • 読む時はフローティングではなく普通の画面になる

    • 読む時はフローティングしておくことないので、広くなっていい
  • AdBlocker である Brave でページの表示をできる

まとめ

常時パソコン用の表示にする設定はなかったが、 Lynket が使いやすいので今のところ満足している。

リンク

いいタイミングで読めた - 本「SOFT SKILLS ソフトウェア開発者の人生マニュアル」の感想

新しい仕事を探すタイミングで、身の振り方などが勉強になるかもしれないと期待して読み始めた。
この本ではもっと広範な内容を扱っており、とても勉強になった。
1 つ 1 つの章が短くテンポがいいので苦労せずに読むことができた。
今このタイミングでこの本を読むことができてよかった。
これからも生活を改善していけたらいいなと思う。

読書メモ

  • リスペクトとは、相手が大切にされていると感じることかもしれない
  • 自分の時間報酬を考え直した
  • 自分が提供できる価値を明確にする
  • 過去に問題を乗り越えられているのだから、これからも乗り越えられると信じてできると信じる
  • できているふりをして行動することでその理想に近付ける
  • マーケティングとして、先に価値を提供すること
  • 価値がある、誰かの役に立つブログを書く
  • 価値を与えた相手に影響力を持つことができる
  • 自分のブランドを作る
  • ブログのアイディアリストを作る
  • 他人にどうやって価値をもたらすかを常に考える
  • 他人に教えるということを意識してブログを書く
  • ポモドーロテクニックを最近使い始めていて、いいと思っていたところが書いてあった

    • ポモドーロテクニックは 25 分で何が出来るのか、 1 日に何ポモドーロできるのか、タスクに何ポモドーロかかるのか、それらを測るのにとてもいい単位になるということ

      • このタスクにどのくらいかかった、という考え方だったのが、 25 分でどのくらいできる、という考え方に変わったのがとてもよかった
      • 最近振り返りも始めたので 1 日にどのくらいの作業をできたのかはわかるようになったが、 1 日に何ポモドーロ行うかの目標をたてることはまだできていないので、次はこれに取り組みたい
  • 設定した目標を達成できた時の精神状態についても気を払うこと
  • 著者は 1 日 10 ポモドーロできると考えている

    • 余裕をもって 1 日 9 ポモドーロとしている

      • それでも大変で最初は 6 ポモドーロも終わらなかったとのこと
  • 一定の期間内に行うタスクをクォータとして設定する
  • 一定のペースでタスクを行えるようにする
  • 自分に対するルールを作り、生活の中に構造を作る
  • もし実際に行うのが自分じゃなければどのような計画をたてるかを考える
  • まとめられるものはまとめて処理をする
  • 体と頭のタスクをまとめる
  • 移動中に勉強できるようにする
  • 仕組みを作って壁を押し続けて通り抜ける
  • 自分が時間を浪費しているものを把握し、取り除く
  • もっとも重要な目標を 1 つ選んでそれに近づくルーチンを作る
  • 仕事の時間を決める
  • その場のものに反応して適応するということは環境にコントロールされているということ
  • 習慣を意識する
  • 悪い習慣を見つけて解析する
  • ルーチンと組み合わせていい習慣を考えて身に付ける
  • 大きなタスクは分解する

    • 今やってるような方向性でよさそう
  • ハードワークは必要

    • 避けようとしてた、簡単に結果を得ようとしてた、でもそんなことはできない
    • 本当に有能になりたいのなら、他の娯楽を我慢してハードに取り組む必要がある
    • 障害を前にしたときに一定レベルの頑張りと忍耐がどうしても必要になる
    • 今まで人間は意志の力が弱いから仕組みで解決しなければならないと考えてきた

      • それも重要だが、意志の力も必要である

        • 簡単なものなどない、娯楽を我慢しなければならない、意志の力でやらなければならない、その方法を学ぶしかない
    • こうすればいいというものはない、みんなつらくて逃げている、だが、あなたはそれでいいのか?

      • あなたは負けるつもりなのかということだ

        • これは、自分に負けるつもりなのか、という意味だと思う
    • 自分で自分で律することこそ本当の自由であり勝ちなのだ
    • 歯を食いしばり、ぐっとこらえて仕事をしようとすること以外に道はない
  • 行動しないよりした方がいい

    • ほんの少しよくするために多大なコストをかけることを避けなければならない
    • 間違ったときの最悪の状況、戻ったときのコストが高いのか考える
  • 投資と筋トレのところは勉強になった
  • モニターがたくさんあるのはテンションが上がるからというのが好きだった
  • プラス思考を意識する

    • プラス思考も必要な時に突然出来るようなものじゃない
    • 生活に組み込んで訓練する必要がある
  • 本気で挑戦して本気で失敗する
Hugo のブログの記事の URL を変更した時のログ

ブログの記事の URL を変更した。
今までは blog.5000164.jp/2018-1-format/ のような形式だったものを blog.5000164.jp/2018/1/19/format/ という形式にした。
今までの形式にしていた理由としては、ドメインの直下に記事の URL がぶら下がってるのかっこいい、と思っていたから。
新しい形式にした理由としては、年月日で階層が分かれてたほうがセマンティックでかっこいい、と思ったから。

変更前の状態

  • 記事のファイルの構成は 2018/01/format.md のような感じで年月で分けて、月はゼロ埋めで 2 桁にしてある
  • 記事の URL は url = "2018-01-format" のような感じで記事 1 つ 1 つに設定してある
  • 記事の作成日は date = 2012-10-15T03:16:25+00:00 のような感じで 1 つ 1 つに設定してある

変更後の状態

  • 記事のファイルの構成は 2018/1/19/format.md のような感じで作成日の年月日で分かれるようにして、月日のゼロ埋めはしない
  • 記事の URL は指定せずにディレクトリ構成のままでいくので URL の設定を削除する
  • 過去の URL にアクセスした時に新しい記事にリダイレクトさせる

変更方法

手作業で簡単にできるものじゃないと思ったのでツールを作った。

やっていることはこんな感じ。

  • 変更前のファイルの一覧を洗い出す
  • ファイル 1 つ 1 つ処理をしていく
  • 変更前のファイルの中身を読み取る
  • 変更前のファイルパスと date の行から変更後のファイルパスを計算する
  • 変更前の url の行を aliases に書き換える
  • 古いファイルを削除して変更後のファイルパスに変更後の内容を書き込む

ツールを作ってファイルの構成が変わった後は、 relref を使ってサイト内にリンクを張っているものを直した。
こちらは数が少なかったので使っているところを検索して手で直した。

感想

URL が変えられて気持ちがいい。
blog.5000164.jp/2018/ にアクセスしたら 2018 年の記事一覧が出てくるようにできた。
本当は blog.5000164.jp/2018/1/ にアクセスしたら 2018 年 1 月の記事一覧が出てくるというところまでやりたかったのだが、 Hugo の section は 1 つしか持てないという制約で難しそうだったので諦めた。

ちょっとしたツールを Scala で書くことができて嬉しい。
var を使わないで書くのが難しかったけど、結果的には実装できてよかった。

参考

ブログを WordPress 👉 Octopress 👉 Hugo と変えてきて記事の書式がバラバラだったのをある程度整えた時の作業ログ 🗒️

古い記事のメンテとかはしていないんだけど、ブログのデザインを変えた時に見てみたら思ったよりも崩れていたのでまとめてある程度修正することにした。
まだ崩れてる記事とかもあるけど、ひとつひとつ見ていくのは大変なので正確さではなくざっくりなんとなくを目的として作業を行う。 💡

前提となる記事の状態

ブログの記事の書き方は以下の変遷を辿ってきた。

  • WordPress で始めた最初は HTML を直接書いていた
  • 途中から WordPress に Markdown のプラグインを入れて Markdown で書いていた
  • ブログを Octopress に変えたが WordPress の記事はインポートしなかった
  • 見出しの書き方を ## ではなく --- のように書いていた
  • 見出しレベルは h1 から h3 まで使っていた
  • ブログを Hugo に変えたタイミングで WordPress と Octopress の記事をインポートした
  • 見出しの書き方を ## にした
  • 本文での見出しレベルは h2 だけを使うようにした

という状態で時期によって記事の書き方がごちゃごちゃ。 😩

見方

  • 使用したツールは WebStorm
  • 👇 の上側が正規表現での置換対象で、下側が置換内容
  • 3 連続してるバッククオートの前にスペースが 4 つ入っているのはコードブロックで囲むためのもので、実際はスペースは不要
  • 半角スペースが 1 個だけ入っているものは中身がなにもないと表示が崩れて見づらくなってしまうのでそれを回避するためのもので、実際は空のまま置換して削除する

以下作業ログ

^(.*)$\n=+

👇

# $1\n

h1h2 にしてるのは見出しレベルの h2 だけ使うことにしたから。
h1 のままがいいなら # $1\n で置換すればいい。

^(.*)$\n--+

👇

# $1\n

---- を使ってたやつはリストの - があったので最低 2 個つながっていることをチェックしている。

^\* 

👇

- 

リストに使ってる *- に統一するため。
* だけだと記事で普通に使ってるからそこそこ多く引っかかる。
行頭チェックと * の後にスペースが入ってるかチェックすることで絞り込む。
それでもひっかかるものはあるのであとは手作業で直す。

"$\n^\++$

👇

"\n+++\n
(^$\n){2,}

👇

\n

Front Matter の後に 1 行空いてたり空いてなかったりしたのを統一するため。
最初は

^\++$\n^([^t^\n])

👇

+++\n\n$1

というやり方でやってたんだけど、これだとなぜか行末のスペースが消えてしまう。
ページ内で置換した場合は消えないのに、ディレクトリ指定で一気に置換すると消える。
困る。
なので、行末にスペースがある行に少しでも触れる正規表現だとだめなのでは?という仮説のもとにそこに触れないようにやってみたら消えずに済んだ。
なので一度全部のファイルに改行を入れてから 2 行以上の空行を 1 行にすることで対応した。
最初に " とか入れてるのは上の方の +++ に引っかからないようにするため。
+++ 内はすでに一度整備していて、最後に " が来ることがわかってるからこの条件でいけた。
すぐできるだろうしついでにあそこも直すかーという気持ちで始めたのにここだけ時間かかって疲れた。
しかもそれでも結局なぜか行末のスペースが消えてるところもあったので見直して手で直した。
あと 2 行以上の空行を削除でやるとコードの中の改行が消えてだめだとわかった。
そこも手で直した。

 

👇

 
^ +$

👇

 
(^$\n){2,}

👇

\n

  を消したり空白だけの行を消したりして空行を 1 行にした。

<a.*href="(.*?)".*>(.*?)<.*$

👇

[$2]($1)
<pre.*?>

👇

    ```
</pre.*?>

👇

    ```
<blockquote.*?>

👇

>>>
<br.*?>

👇

  \n
<.*?>

👇

 

残しておきたいタグを Markdown に有効なものに置換してから全 HTML タグを削除。
でもこれはコードの中のものや必要なリンクを消すってわかってるのでちゃんと見返す必要がある。

^ +([^ ]+)$

👇

$1

文字の前にある空白を削除。

^ +$

👇

 

空白だけの行の内容を削除。

find . -name "*.md" -type f -print0 | xargs -0 gsed -i -e '$ a korehakesutext'
korehakesutext

👇

 

全てのファイルの最後に空行を追加しようと思ったら正規表現でファイルの最後、というのが取れなかったので sed で追加することにした。
Mac の sed は POSIX sed で使いづらいらしく、 brew install gnu-sed で GNU sed を入れて使った。
空行の追加方法がわからなかったのでダミーの文字列を入れてからダミーの文字を消すことにした。
追加した後にまた 2 行以上の空行を消そう、と思ったらファイルの最後の空行 2 行になってるのは正規表現では検出できないっぽかったので、全てのファイルには追加しないで、日付が古くてファイルの最後に改行が入ってなさそうなものだけに絞って改行を追加した。
結局バラバラなままだしこれはやらなくてもよかった。

まとめ

一括で変換かけたけど見直したらうまくいってないところが思ったよりも多くて、けっこう手で直したので疲れた。 😓
記事のソースとなるデータはできるだけ構造化してある状態で保存しておきたいと思った。

おまけ

WebStorm の Markdown の設定で行末のスペースを削除する設定になっていたので不要な変更点が出たりした。
Hugo は Markdown に厳密で行末にスペース 2 つないと改行しないのでこの設定は切っておくといい。
あと、最近絵文字いいなという気分が高まってきたのでブログに絵文字を使ってみた。 ✨

Scala で JavaFX の Casvas の内容を画像として保存する

昨日の記事 の続きのようなもの。
Canvas で表示できるようになったから画像として保存する。
コードはこんな感じ。

val c = new Canvas(300, 300)
val gc = c.getGraphicsContext2D
gc.setFill(Color.GRAY)
gc.setFont(Font.font("Hiragino Sans", 20))
gc.fillText("テキスト", 50, 50)

val wi = new WritableImage(300, 300)
c.snapshot(null, wi)
val ri = SwingFXUtils.fromFXImage(wi, null)
val f = new File("test.png")
ImageIO.write(ri, "png", f)

val root = new StackPane()
root.getChildren.add(c)
val scene = new Scene(root, 350, 350)
primaryStage.setTitle("test")
primaryStage.setScene(scene)
primaryStage.show()

これを実行するとこういう画像ファイルが生成される。

生成された画像

ざっくり説明

Canvas の内容を WritableImage に変換する。
これが Canvas が持ってる snapshot というメソッドでできるっぽい。
その後は RenderedImage に変換してファイルに保存する。

参考

ついでに保存場所選択

下記のコードを追加することで保存する場所を選べるようになった。

val fc = new FileChooser
val f = fc.showSaveDialog(primaryStage)
Scala で JavaFX の Canvas でテキストを表示する

昨日の記事 ではすでに存在する画像を表示したが、やりたいことは生成したテキストを画像にするということだったので、まずはテキストを表示できるようにする。
最終的には画像にしたいので、画像に変換できる Canvas を利用する。
コードはこんな感じ。

val c = new Canvas(300, 300)
val gc = c.getGraphicsContext2D
gc.setFill(Color.GRAY)
gc.setFont(Font.font("Hiragino Sans", 20))
gc.fillText("テキスト", 50, 50)
val root = new StackPane()
root.getChildren.add(c)
val scene = new Scene(root, 350, 350)
primaryStage.setTitle("test")
primaryStage.setScene(scene)
primaryStage.show()

このコードで下記のような実行結果になる。

実行結果

参考

試行錯誤メモ

調べていたら WritableImage というもので画像を生成できると見かけたので最初は WritableImage で画像を表示してみたのだが、テキストを描画する方法がわからず、さらに調べていたら Canvas を発見したので Canvas を使用するようにした。

試行錯誤中に参考にしたもの

Scala で JavaFX を使って画像を表示する

こんな感じ。

val image = new Image(getClass.getResource("/test.png").toString)
val imageView = new ImageView(image)
val root = new StackPane()
root.getChildren.add(imageView)
val scene = new Scene(root, 350, 350)
primaryStage.setTitle("test")
primaryStage.setScene(scene)
primaryStage.show()

ポイント

画像を下記のパスに配置して getClass.getResource("/test.png").toString でパスを取得すること。

.
└── src
    └── main
        └── resources
            └── test.png

参考

Scala の SSL / TLS 通信の中身を見る

Scala の通信の中身が見たい

Scala で API を叩くコードを書いた。
ちゃんと API を叩けているのか知りたい、リクエストとレスポンスが見たいと思った。

プロキシーを通す

  • Charles を使う

    • Postman も試してみたけどレスポンスが自動保存されないっぽい気がして、連続で API を叩いて内容がどんどん変わっていく今回の用途では使えなかった
  • HTTP 通信のライブラリとして sttp を使用していたので プロキシーの設定方法 を参考にして下記のように設定する

    • HttpURLConnectionBackend のデフォルト引数が options: SttpBackendOptions = SttpBackendOptions.Default となっていて、なにも設定しなければシステムのプロキシー設定を反映してくれるので HttpURLConnectionBackend(options = SttpBackendOptions.httpProxy("localhost", 8888)) というように明示的に設定する必要はなかった

      • Charles は起動時に自動でシステムのプロキシー設定を書き換えてくれるので、設定がそのまま反映される
val backend: SttpBackend[Id, Nothing] = HttpURLConnectionBackend()

これだけで、 HTTP 通信の中身は見られるようになる。

SSL / TLS 通信の中身を見えるようにする

SSL / TLS 通信の中身を見るための手順としては

  • Charles の証明書を信頼したキーストアを生成する
  • 生成したキーストアをアプリケーションから読み込む
  • Charles の SSL Proxy を有効にする

となる。

Charles の証明書を信頼したキーストアを生成する

まず Charles の証明書を取得する。
これはアプリケーションのメニューの Help > SSL Proxying > Save Charles Root Certificate... から取得できる。
拡張子は Binary certificate (.cer) で保存する。
保存したら取得した証明書を信頼したキーストアを生成する。
この時に普段使用されるキーストアを別の場所にコピーしてから作業を行うことで環境を汚さないようにした。
普段使用されるキーストアは jdk の中にあり、自分の場合は $(/usr/libexec/java_home)/lib/security/cacerts にあった。

keytool -keystore cacerts -importcert -alias charles -file charles-ssl-proxying-certificate.cer

また、この時に keytool -list -keystore cacerts のようにして内容を表示して追加されたかどうか確認することができる。

生成したキーストアをアプリケーションから読み込む

先ほど作成したキーストアをアプリケーションから読み込む。
実行環境としては IntelliJ IDEA で Scala を動かしている。
設定方法が環境変数に指定する方法しかわからなかったので環境変数に設定を行う。
下記のような内容を実行時の VM parameters に設定する。

-Djavax.net.ssl.keyStore=/path/to/cacerts -Djavax.net.ssl.keyStorePassword=changeit -Djavax.net.ssl.trustStore=/path/to/cacerts -Djavax.net.ssl.trustStorePassword=changeit

/path/to/cacerts には先ほど作成したキーストアへのパスを指定する。

2018.5.28 追記

sbt から実行する場合は

SBT_OPTS="-Djavax.net.ssl.keyStore=/path/to/cacerts -Djavax.net.ssl.keyStorePassword=changeit -Djavax.net.ssl.trustStore=/path/to/cacerts -Djavax.net.ssl.trustStorePassword=changeit" sbt run

のようにする。

Charles の SSL Proxy を有効にする

証明書を設定することで通信を行えるようにはなるが、このままでは通信の内容を見ることはできない。
通信の内容を見るために Charles の SSL Proxy の設定を有効にする。
メニューの Proxy > SSL Proxying Settings... から設定画面を開き、 Enable SSL Proxying を有効にして対象のドメインを追加する。
これで SSL / TLS の通信の内容を見ることができるようになる。

感想

なにをどうすれば通信の中身が見えるようになるのか全然わからない状態で調べ始めたけど、調べたらなんとかなってよかった。
通信の中身が見えるの便利。

ハマったことのメモ

  • Scala に javaOptions を設定する方法がわからなかった

    • build.sbt に書いても動かなかった

      • IntelliJ IDEA 経由で実行してたからっぽい? sbt run したら動いた
  • 下記の方法で javaOptions の中身が表示できるけど仕組みはわかってない

    • これのおかげで javaOptions に設定できたと思ってたけどできてなかった、というところが問題だと気付くことができた
// import what we need
import java.lang.management.ManagementFactory

import scala.collection.JavaConverters._

// get a RuntimeMXBean reference
val runtimeMxBean = ManagementFactory.getRuntimeMXBean

// get the jvm's input arguments as a list of strings
val listOfArguments = runtimeMxBean.getInputArguments.asScala

// print the arguments using my logger
for (a <- listOfArguments) println(s"ARG: $a")

参考になったリンク