at backyard

Color my life with the chaos of trouble.

nikkiという日記を書くためのWebサイトを作った

Gatsby Starter: Minimal Blogを用いて個人的な日記サイトを作った

自分自身の日記をwebに載っけてみようと思い、作った。

nikki.shinshin86.com

日記サイト自体はGatsbyで構築しようと前々から考えており、良い感じのテンプレートがなければいっそ自作テンプレートを作ってみようか、などという淡いチャレンジ精神は、下記のテンプレートを見つけて消えた。

github.com

ミニマルなデザインだが、必要なものはちゃんとある。そんなデザインに好感を持てた。ダークモードに切り替えられるのも良いポイントだ。
こんな良い感じのテンプレートがあるなら、これでいいじゃないか。とすぐに考え直した。テンプレートを自作する気はきれいに無くなってしまっていた。

早速下記のコマンドを実行して構築を初めた。

gatsby new project-name https://github.com/LekoArts/gatsby-starter-minimal-blog

構築自体はさすがのGatsby、特に詰まるようなポイントは ほとんど なく、すぐにコンテンツ作成の段階に入れた。
が、一応この ほとんど という部分についてだけ、一応このポストの中に書いておこうと思う。
いつもながらの備忘録というわけである。

まずこちらのテンプレートだが、src自体はすでにGatsby側にpublishしており、gatsby new コマンドを実行して生成されたソース内には含まれていない。

実際のソースコードはこちらになる。

github.com

Heroテキストをカスタマイズする方法

どれも上に貼ったリポジトリ内に書いてあることだが、一応こちらにも書き記しておく。

まずHeroテキストをカスタマイズする場合は下記のようにして hero.mdx に書いていく。

mkdir -p src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx 
touch src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx 
# hero.mdx に書いていく

このファイルを用意することで、hero.mdx内の記述をHeroテキストとして表示するように切り替わる

トップページ下部にある "Projects"内の内容を変更する方法

上の hero.mdx 同様、下記のファイルを作成・記述することで内容を上書きすることが可能。

touch src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx

サイトのタイトルを変更する

サイトのタイトルを変更する場合は gatsby-config.jsを編集する。
siteTitle という項目を追加することで、こちらで設定したタイトルを表示するようになる。

diff --git a/gatsby-config.js b/gatsby-config.js
index 8eee87a..cc0085b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,7 +4,8 @@ require(`dotenv`).config({

 module.exports = {
   siteMetadata: {
-    siteTitleAlt: `Minimal Blog - Gatsby Theme`,
+    siteTitle: `Nikki`,
+    siteTitleAlt: `Yuki Shindo - Nikki`,
   },
   plugins: [
     {

その他にも description をはじめ、変更する箇所はいくつかあるが、下記の箇所にまとまっていることに気づいたので、貼っておく

https://www.npmjs.com/package/@lekoarts/gatsby-theme-minimal-blog#additional-configuration

ここに書かれている内容を gatsby-config.js に書いていけば設定自体はOKそうだった。

このような手順を行った上で、さらにはfaviconなどを自身のものに切り替えて日記サイトを作った。

VSCodeでCSVファイルをtable表示させたいときに使用する拡張機能 Edit csv

表題のとおりだが、CSVファイルの中身を書き換えたくて、でもそのままじゃしんどいので、テーブルで表示させたいと思い、VSCode拡張機能を入れた。
Edit csvというやつだ。

Edit csv - Visual Studio Marketplace

インストールすると、画面右上に Edit to csv というボタンが出現するので、csvファイルを開いた状態でそのボタンを押すとtable表示に切り替えられる。 普通に中身を編集して閉じれてOK、分かりやすくて便利だ。

これは日本のサイトでもたくさん紹介されているだろう、と思い、さっき edit csv vscode 便利 と検索してみたら、 1ページめには Rainbow CSVExcel Viewerというのが紹介されていた。
読んでみるとこれらの機能も便利そうだ。
だけど、俺は今日せっかくこいつと出会って、いきなりいい感じの活躍で俺を救ってくれたんだ!俺はこいつとともに旅に出るぜ!(イメージ: マサラタウンを出発したサトシ(ポケットモンスター))

textlintでmdxファイルをチェックする方法

textlintでmdxファイル内のテキストをチェックする方法

textlintでのmarkdownチェック処理の際に、 MDX ファイルも一緒にチェックしたいというお話

github.com

textlintではデフォルトでMarkdownとplain textをサポートしている。
(他のファイルについてはpluginを導入する必要がある)

このデフォルトで動くMarkdownチェック処理に対して mdx ファイルもチェックするように設定すれば良い。

具体的には、下記の記述を .textlintrc に加えることでMDXファイル内の記述もチェックされるようになる。

  "plugins": {
    "@textlint/markdown": {
      "extensions": [".mdx"]
    }
  }

最初 mdx はサポートされていないのかと思いpluginを自作するところまで行ってしまったが、pluginを自作している最中にドキュメントを色々と読み漁っているところで、下記の記述に出くわして気づいた次第。

textlint/packages/@textlint/textlint-plugin-markdown at master · textlint/textlint · GitHub

(これはもう完全に、ちゃんと調べろ案件ですね。。。プラグイン作成中、他のプラグインソースコードを読んでいるときに拡張子を追加できるような設計になっていたので、途中から「あーこれはーもしやーmdxを追加すればよいだけでは...?」という思いをひしひしと全身で感じ始めるという体験をしました)

結論: ドキュメントはちゃんと読みましょう。

VSCodeでファイルを開いた時に、前に開いたファイルのタブが上書きされる問題を回避する方法(GUIで設定する)

下記のQiita記事と全く同様の問題。なので解決方法は同じ。

qiita.com

この設定はGUI上からも行えるので、一応そのやり方を備忘録として残しておく。
(残すほどでもないのかもしれないが、VSCode新しくしたときとかになるべく迷いたくない。。。)

VSCode のメニューから Code -> Preferences -> Settings を選択し、Enable Preview となっているチェックを外せばOK。
(キャプチャも参照)

f:id:shinshin86:20200617080551p:plain

Node.jsでZIP圧縮するためのサンプルコードを書いた

Qiitaにて最近書きました。

qiita.com

ZIP圧縮って、普通にGUICLI上ではサクッとできるけど、コードで書こうとすると少しばかり立ち止まって考えてしまうイメージ。
単に自身の技術力不足かな。

そういえばこのブログ内で、数年前にRubyでZIP圧縮するコードも書いたような気がする。。と思って探してみたらあった。

shinshin86.hateblo.jp

あとでリファクタリングしようと書きながら、何もしていないという。。

最近Ruby触っていないので、リハビリがてらこのコードを再度書いてみるとかはありかもしれない。(とか書いておいて、書かないパターン。。。)

GoでCLIツール作成の練習がてら四則演算をするためのCLIツールを作った

四則演算をするためのGO製のCLIツールを作った

GoでCLIツール作成の練習がしたくて作った。

github.com

機能的には四則演算をするだけで完全に勉強のために作成した形である。
そのためこのツール自体に利用価値はないが、CLIツールを作る上での設計などを学ぶことができた。
と言っても設計自体は下記のQiitaの記事を大いに参考にさせていただいている。

qiita.com

実際の実行はxxxCommandが、 処理内容はxxxActionが 担保するようにします。 これによって、テストを書きたいときにxxxActionが、きちんとテストできていれば問題ないようにします。 またxxxActionの内容をxxxCommandで書いてしまうと、xxxCommandはエラー時にos.Exitを返さないければいけないので、テスト時に複雑性が上がります。

上で引用させてもらったこの文章が、まったくもって分かりやすくて良いなと思ったので、自分も xxxCommandxxxAction で分けるようにして、実際の処理内容を xxxAction として切り出すことにした。

上の引用文にもある通り、テストも書きやすくなるし、もう少し規模の大きめなツールを書く際でもこのルールに従ってやっていくことで可読性を壊さずに開発ができるのではないかと感じた。

他に書いておくことといえば、
このリポジトリ内でクロスコンパイルコマンド( make build )を用意して各環境に対応できるようにしたり(Windows, Linux, macOS)、環境を汚したくない環境ならば(そしてDockerが使える環境ならば)Dockerでの実行も可能なようにしてある。

Travis CIを用いたCI環境も(全然単純な内容でしかないが)設定したので、これからCLIツールを自作するときのテンプレートとしてこのリポジトリを機能させていけたらなどと考えている。
(が、実際に他のを作り始めたら、見直す可能性はもちろんあるが)

そんなこんなでGoでCLIツールを作ってみた。

ここから余談。

今このブログを子供の面倒を見ながら書いていたが、ちょっと目を離してPCで文章を打ち始めようとすると大声を出して中断される。

子供の機嫌が決して悪いわけではなく、むしろ良いのだが、ご機嫌ゆえの大声コンテスト的なものが始まり(あとは、たぶんこちらの注意も引きたいのだと思う)、子供からPCに意識を移すと直ぐに大声で呼ばれる事態が発生していた。

ゆえにこの文書も大した長さはないはずだが、ここまで書くのになかなか時間を要した。むしろ一度に書ききれず下書きフォルダに突っ込みを繰り返しながら、ようやくここまできたという感じだ。

ちなみに子供の大声コンテストだが、これは子供が楽しむ目的と親の注意を引きたい(たぶんこれもある)意図から、定期的に大声を出すという動作な訳で、最初の頃は大きな声でるねー!と言った感じで微笑ましいものだったが、最近は成長に伴い、声量も非常にアップして、まさに叫び、絶叫、シャウトといった感じになってきた。

今日みたいな休日なら、まあまだ良いが、例えば仕事でリモートミーティング中だったりすると、なかなか気が抜けない状況となる。

自分が発言していない時ならマイクをミュートにしていれば良いのだが、発言している時に大声コンテストが開催されると、もう会話がそこで途切れる。
(私の仕事スペースが家族スペースと共用になっているということもあるのだが、、、)

基本的に会社の方々は気にしないでー!元気だねー!と言って笑ってくれるのだが、大声コンテストが開催される気配がある時だと、自分としては会話の最中にも子供の様子を窺うことになる。おかげで以前よりも子供の状況を、というか大声コンテスト開催タイミングを察知して、危険な兆候が見られる場合は即座にミュートしておける技術が向上した気がする。

(といっても、未だにまだまだ子供の絶叫はミーティング中にちょいちょい響き渡ったりしているが)

思う存分元気に成長してほしいと、毎日父は願ってます。

配列内の重複を削除する方法(JavaScript)

例えば下記のような配列の重複を削除したい場合

['AAA', 'BBB', 'AAA', 'BBB', 'CCC']
↓
['AAA', 'BBB', 'CCC']

reduceを使えばシンプルに書けそう。

Array.prototype.reduce() - JavaScript | MDN

const list = ['AAA', 'BBB', 'AAA', 'BBB', 'CCC'];

const duplicateDeletionList = list.reduce((resultList, currentValue) => {
  if(!resultList.includes(currentValue)) resultList.push(currentValue);

  return resultList;
},[])

ここで使用している Array.prototype.includes()IEでは使えないので、ポリフィルを適用するか、代わりにindexOfを使用する形となる。

Array.prototype.includes() - JavaScript | MDN

Array.prototype.indexOf() - JavaScript | MDN

サラッとした動作確認していないが、たぶん下記のコードで行けるかと思う。

const list = ['AAA', 'BBB', 'AAA', 'BBB', 'CCC'];

const duplicateDeletionList = list.reduce((resultList, currentValue) => {
    if(resultList.indexOf(currentValue) === -1) resultList.push(currentValue);

    return resultList;
},[])