
## 今年もお疲れ様でした。

2023年もお疲れ様でした。 
年末なので何か書こうとしたのですが、
やはりツール系しか思いつかなかったので、
今回は今年、エンジニアとして普段働いていく中で、
導入してよかったもの5選を紹介していこうと思います。

## RayCast

https://www.raycast.com/

Spotlight検索のようなツールです。 [Arfred](https://www.alfredapp.com/)を使用していたのですが、
ショートカットキーを割り振れたり、画面分割などかなり多機能なので、
乗り換えました。アプリケーションの起動や画面分割等にショートカットキーを割り振っています。

## Sequel Ace

https://sequel-ace.com/

データベース管理アプリケーションです。 もともとSequel Proを使用しており、
MySQL8.0に対応していなかったので、困っていたのですが、
いつの間にか後継が出ていたので、使うようになりました。
UIもSequel Proと同じなので、非常に使いやすいです。

## Arc

https://arc.net/

ブラウザです。
元々[SideKick](https://www.meetsidekick.com/ja/)を使用していましたが、無料では機能が制限されてしまうことがネックでした。
こちらのArcは無料でも使用ができ、通常のタブとは別にお気に入りとしてタブを管理できる点と、
カーソルを画面横に持っていくと、タブ操作をポップアップできるようになるので、
画面全体をフルで使用できる点が気に入っています。
増えがちなタブ問題を解決できるのでおすすめです。

## Astronvim

https://astronvim.com/

こちらはエディタとなります。
元々vscodeを使用していましたが、vimを使用することに憧れがあり、乗り換えました。
NeoVimをはじめは使用していましたが、設定が非常に難しいので、
オールインワン環境で便利なプラグイン等がすでに入っているAstronvimに落ち着きました。

設定もDocsに記載がありますが、リポジトリをフォークして自分の設定を反映できます。
自分の設定を以下に貼っておきます。

https://github.com/konjikicity/user_example/tree/main

## OrbStack

https://orbstack.dev/

こちらはコンテナを実行できるDocker Desktopの代替です。
Dockerコマンドも使用が可能で、
とにかくDocker Desktopより軽いのが最大の利点です。メモリの消費を抑えて、
他のアプリケーションと併用使用しても重たくなくなりました。

## まとめ

軽くですが、自分が導入してよかったもの5選を紹介しました。
気になったものがあれば、使ってみていただけますと幸いです。


仕事で今年導入してよかったもの5選

未経験からフルリモートワークの会社のエンジニアになって1年たちました。


## 見た目の重要性

おしゃれなツールやデバイスを使っている人を見ると、憧れますよね。
ただデバイスはものすごく高かったりして手が出ません。
ですが、ツールは設定で見た目を変更できることが多いです。
一度設定してしまえば自分好みでずっと使用できるのでおすすめです。

今回はエンジニアであれば必ず使うであろうターミナルをカスタマイズしていきます。

## 自分の今の見た目

![zsh theme](https://res.cloudinary.com/dzlhvpfmo/image/upload/v1695489549/syu-blog/my-zsh%20pf7baz.png)
ターミナル自体は透過させており、背景はPCの壁紙となります。(ちなみにrazer好きです)
とりあえずこんな感じの見た目にするやり方をご紹介いたします。

## iTerm2

デフォルトのターミナルはデザインを変化させづらいので、
より多機能でデザインをカスタムしやすい[iTerm2](https://iterm2.com/index.html)を使用します。
GUIで設定を変更できるので初心者にもおすすめです。

ダウンロードページからダウンロードするか
[homebrew](https://brew.sh/)が入っている方は、下記コマンドでもインストールできます。

```shell
$ brew install --cask iterm2
```

https://iterm2.com/index.html

## iTerm2で見た目の変更

### フォントの変更

まずフォントを変えていきましょう。

下記フォントを使用します。
[MesloLGS NF Regular](https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Regular.ttf)
他のフォントでもいいのですが、後述する[powerlevel10k](https://github.com/romkatv/powerlevel10k)にて
推奨されているフォントのためこちらを使用いたします。

リンクをクリックするとダウンロードできるので、そのファイルを
ダブルクリックするとフォントのインストールができます。

iterm2の設定画面で設定をしていきます。

`settings > Profiles > text`

①　インストールしたMeslo LGS NF に変更
②　フォントサイズを17pxに変更(ここは好み)

![iterm font](https://res.cloudinary.com/dzlhvpfmo/image/upload/v1695313967/syu-blog/iterm-font_xj2qhd.png)

### windowの設定

`settings > Profiles > window`

① 　Transparencyは`透過度`でBlurは`ぼかし`です。完全に透過したいのでBlurは0でTransparencyを35くらいに設定します。
② 　Styleは`No title Bar`を選択すると上のタイトルバーが消えてかっこよくなります。

![iterm window](https://res.cloudinary.com/dzlhvpfmo/image/upload/v1695396977/syu-blog/window_pg53hz.png)

### カラースキームの設定

`settings > Profiles > Colors`

デフォルトで入っているカラースキームを選択します。
おすすめは`Solarized Dark`です。

① 　こちらのプルダウンからカラーを選択できます。`Solarized Dark`以外にもいくつかあるのでお好みで選択してください

![iterm color](https://res.cloudinary.com/dzlhvpfmo/image/upload/v1695399114/syu-blog/iterm_color_uotsik.png)

:::message
カラースキームはインポートすることで増やすこともできます。
ファイルをダウンロードしてプルダウンのimportから追加できます。

自分の使用テーマ
https://github.com/QuentinWatt/dark-flat-iterm-colors
:::

## oh-my-zshとpowerlevel10k

### oh-my-zsh

oh-my-zshとはshellの一種であるzshのフレームワークです。
コマンドを打つだけでインストールでき、すぐ見た目も変わります。
https://ohmyz.sh/

下記コマンドでインストールされます。

```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

:::message alert
上記コマンドでインストールする前に.zshrcが書きかわるので、
バックアップをとっておきましょう。
~/.oh-my-zsh/custom/my.zsh に元の.zshrcの設定等を記載すれば反映できます。
:::

### powerlevel10k

zshのテーマです。
https://github.com/romkatv/powerlevel10k
下記コマンドでリポジトリからcloneします。

```
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
```

その後`.zshrc`内に`ZSH_THEME`の記述があると思いますが、そちらを
`ZSH_THEME="powerlevel10k/powerlevel10k"`に変更してください

もう一度ターミナルを立ち上げると、テーマを設定するウィザード画面となるので、
選択肢に従ってお好きなデザインを設定してみてください。

## tmux

tmuxとはターミナルの画面を管理できるツールとなります。
プラグインでテーマも変更できるので導入していきます。

homebrewでインストール

```shell
$ brew install tmux
```

設定ファイルの作成

```shell
$ touch ~/.tmux.conf
```

### tpmとtmux-powerline

tmuxのプラグインマネージャーである[tpm](https://github.com/tmux-plugins/tpm)でtmuxのテーマを変更します。
テーマは[tmux-powerline](https://github.com/erikw/tmux-powerline)を使用します。

tpmのリポジトリをgit cloneします。

```shell
$ git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm
```

.tmux.confに以下を追加

```conf:tmux.conf
# List of plugins
set -g @tpm_plugins '           \
   tmux-plugins/tpm             \
   tmux-plugins/tmux-sensible   \
   erikw/tmux-powerline         \
 '
# tpmの初期化（tmux.confの下の方に記述する）
run '~/.tmux/plugins/tpm/tpm'

```

設定変更後、下記コマンドを実行して.tmux.confの記載を反映

```shell
$ tmux source ~/.tmux.conf
```

tmuxのprefixキーの後`i`を押すと記載したプラグインがインストールできます。

## tmux-powerlineの表示変更

個人的にデフォルトだといらない部分もあったので、
カスタムできる設定で使用しています。

### 設定

設定ファイルの作成を下記コマンドで実行します。

```shell
~/.config/tmux/plugins/tmux-powerline/generate_rc.sh
```

ホームディレクトリに`.tmux-powerlinerc.default`というファイルが作成されるので、
`.tmux-porerlinerc`にリネームして編集することで独自の設定を適用できます。

### テーマの変更

下記コマンドを実行してください

```shell
$ mkdir -p ~/.config/tmux-powerline/themes
$ cp ~/.config/tmux/plugins/tmux-powerline/themes/default.sh ~/.config/tmux-powerline/themes/my-theme.sh
```

先ほど作成した.tmux-powerlinercの`TMUX_POWERLINE_THEME`を`my-theme`に設定

`.config/tmux-power-line/themes/my-thene.sh`を編集してカスタマイズできます。

自分はpwdとcurrent_branch, painやwindowの数のみ表示しています。
ここは表示したいものを表示すればいいと思います。

```sh :my-theme.sh
if [ -z $TMUX_POWERLINE_LEFT_STATUS_SEGMENTS ]; then
	TMUX_POWERLINE_LEFT_STATUS_SEGMENTS=(
		"tmux_session_info 148 234" \
		#"hostname 33 0" \
		#"ifstat 30 255" \
		#"ifstat_sys 30 255" \
		#"lan_ip 24 255 ${TMUX_POWERLINE_SEPARATOR_RIGHT_THIN}" \
		#"wan_ip 24 255" \
		#"vcs_branch 29 88" \
		#"vcs_compare 60 255" \
		#"vcs_staged 64 255" \
		#"vcs_modified 9 255" \
		#"vcs_others 245 0" \
	)
fi

if [ -z $TMUX_POWERLINE_RIGHT_STATUS_SEGMENTS ]; then
	TMUX_POWERLINE_RIGHT_STATUS_SEGMENTS=(
		#"earthquake 3 0" \
		#"pwd 89 211" \
		#"macos_notification_count 29 255" \
		#"mailcount 9 255" \
		#"now_playing 234 37" \
		#"cpu 240 136" \
		#"load 237 167" \
		"pwd #b4637a 0 " \
		"vcs_branch #b4637a 0  ${TMUX_POWERLINE_SEPARATOR_LEFT_THIN}" \
		#"mailcount 9 255" \
		#"now_playing #ebbcba 0" \
		#"tmux_mem_cpu_load 234 136" \
		#"battery 137 127" \
		#"weather 37 255" \
		#"rainbarf 0 ${TMUX_POWERLINE_DEFAULT_FOREGROUND_COLOR}" \
		#"xkb_layout 125 117" \
		#"date_day 235 136" \
		#"date 235 136 ${TMUX_POWERLINE_SEPARATOR_LEFT_THIN}" \
		#"time 235 136 ${TMUX_POWERLINE_SEPARATOR_LEFT_THIN}" \
		#"utc_time 235 136 ${TMUX_POWERLINE_SEPARATOR_LEFT_THIN}" \
	)
fi
```

## おわりに

今回はターミナルの見た目を良くする物を紹介いたしました。
ツールの使い方等についてはご説明しておりませんが、
また記事にしていこうと思います。
一度設定してしまえば、ずっと使用できるので、
是非カスタマイズをしてみてください！


Macのターミナルをかっこよくしよう


## はじめに

こんにちは。開発会社にてWeb EngineerをしているSyu Onoda と申します。
私は未経験からWeb Engineerになり1年がたちました。
ネトゲ廃人の僕を救ってくれたエンジニアというお仕事には非常に感謝しており、
ほんの少しでも貢献したいという気持ちでこのブログを作成しました。
自分のアウトプット中心となりますが、誰かの役に立てるよう記事を作成していきます。

## Next.jsでのブログ作成

今回以下の理由で[Next.js](https://nextjs.org/)を選択しました。

- SSGやSSRをサポートしているため高速なページロードが可能
- vercelとの統合によるデプロイの手軽さ
- Next.jsとtypeScriptの開発経験をつみたかったため
- ~~なんかかっこよさそう~~

そして開発コストを下げるために使用できるものはフル活用します

## テンプレートの使用

Next.jsでは公式のexample集があるので[blog-starter-kit](https://vercel.com/templates/next.js/blog-starter-kit)のtempleteを使用しました。
https://vercel.com/templates/next.js/blog-starter-kit

下記コマンドでインストールします

```shell
$ npx create-next-app --example blog-starter blog-starter-app
```

## デザイン

Material UIのコンポーネントの使用を検討していましたが、tailwindで微調整もしたかったので
いいとこどりできる[material-tailwind](https://www.material-tailwind.com/)を使用しました
https://www.material-tailwind.com/

下記コマンドでインストールします

```shell
$ yarn add @material-tailwind/react
```

Next.js13のappDirとサーバーコンポーネントを使用する場合は
別にファイルを作成し、クライアントサイドで読み込む必要があります。

```tsx: style.tsx
"use client";

import {
  ThemeProvider,
  Button,

} from "@material-tailwind/react";
export {
  ThemeProvider,
  Button,
  Card,
};

```

```tsx
import { Card, CardBody, Typography } from "../components/style";
```

ここで読み込んだコンポーネントをimportして使用できます。

## アイコン

下記を使用しました。
https://devicon.dev/
https://fontawesome.com/

## zenn-markdown-htmlとzenn-content-cssとzenn-embed-elementsの導入

公式のblog-starterは[remark](https://github.com/remarkjs/remark)というライブラリが使用されていますが、
リッチとは言い難いので、zennのマークダウンを使用できるようにしました。
MITライセンスに感謝です。
https://github.com/zenn-dev/zenn-editor

下記コマンドで導入

```shell
$ yarn add zenn-markdown-html zenn-content-css zenn-embed-elements
```

### 既存のマークダウン処理をzenn-markdown-htmlを使用するように変更

markdownToHtmlをzenn-markdown-htmlに変更します。

```tsx: [slug].tsx
import markdownToHtml from "zenn-markdown-html"; // 変更

~ 省略

export async function getStaticProps({ params }: Params) {

  ~ 省略

  const content = await markdownToHtml(post.content || "", {
    embedOrigin: "https://embed.zenn.studio", // 埋め込みのオプションを追加
  });

  return {
    props: {
      post: {
        ...post,
        content,
      },
    },
  };
}

```

### zenn-content-cssのimport

zenn-content-cssをimportして`znc`クラスを付与します
ブログ全体でcssが使用したい場合は`_app.tsx`でimportしても大丈夫です。

```tsx:post-body.tsx
import "zenn-content-css"; // 追加

 type Props = {
  content: string;
};

const PostBody = ({ content }: Props) => {
  return (
    <div className="mx-auto znc text-[#DDE6ED] "> // zncクラスを付与
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
};

export default PostBody;

```

### zenn-embed-elementsの追加

こちらはクライアントサイドで読み込む必要があるので、
reactの`useEffect`を使用します。
またheadタグにscriptを追加すると埋め込みtweetやmermaid記法にも対応可能です。

```tsx:_app.tsx
 import { AppProps } from "next/app";
import "../styles/index.css";
import { useEffect } from "react";

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    import("zenn-embed-elements");
  }, []);

  return <Component {...pageProps} />;
}

```

```tsx:_document.tsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html className="bg-[#526D82]" lang="ja">
      <Head>
        <script src="https://embed.zenn.studio/js/listen-embed-event.js"></script> //scriptの埋め込み
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

```

以上でblog-starterでzennのmarkdownが使用可能になりました。
:::message alert
リンクの埋め込みは非商用利用のみなので注意してください
:::

## タグ機能の追加

タグ機能について解説いただいている記事を参考にタグ機能を実装しました。
感謝です。
https://zenn.dev/miketako3/articles/519f5fbd1f5042

## その他追加機能

ここまででかなり本格的なブログが構築できました。

あと追加した機能を上げると

- タグの一覧表示
- ページネーション
- snsのshareボタンの追加
- OGPの設定
- 目次の作成

上記は別の記事で書こうと思っておりますので、気長にお待ちください....

## まとめ

本記事ではNext.jsでblog-starterの導入から少しカスタマイズするところまでを紹介しました。
一から作成するとすごく大変のような気がしますが、
テンプレートとtailwindを使用するとかなり工数の削減ができますので、
みなさんの独自ブログ作成に参考になれば幸いです。


SYU BLOG

仕事で今年導入してよかったもの5選

未経験からフルリモートワークの会社のエンジニアになって1年たちました。

Macのターミナルをかっこよくしよう

Next.jsでブログを作成しました

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで第１部

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで第２部

SYU BLOG

仕事で今年導入してよかったもの5選

未経験からフルリモートワークの会社のエンジニアになって1年たちました。

Macのターミナルをかっこよくしよう

Next.jsでブログを作成しました

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで 第１部

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで 第２部

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで第１部

ネトゲ廃人で引きこもりだった僕が未経験からエンジニアになるまで第２部