https://a.storyblok.com/f/270183/151163/800fe1ab72/customize-macos-starship.png

Starshipを使ってmacOSターミナルをカスタマイズする

最終更新日 April 11, 2024

所要時間:8 分

それは全体の雰囲気

きれいで美しいものに惹かれやすい私は、macOSのターミナルをカスタマイズして、自分が共感できる環境を作ることで、生産性を向上させ、複雑な作業を簡素化することができた。このブログの記事では、以下のものを使って自分の雰囲気を作る方法を紹介する。 スターシップ.

端末をカスタマイズする準備はできていますか?行きましょう!

スターシップとは?

スターシップは、コマンドラインインターフェイス (CLI) で使われる、シェル環境用のカスタマイズ可能なオープンソースのプロンプトです。シンプルな設定ファイルを編集することで、Gitの状態やプログラミング言語のバージョンなど、表示する情報の種類や見た目を簡単に変更することができます。素早く軽快に動作するように設計されているので、ターミナルでの作業が滞ることはない。Starshipの主な利点は、以下のような様々なシェルで動作することです。 Bash, ZshFishなどをサポートしており、ターミナル体験の一貫性と効率性を保っている。つまり、毎回新しいセットアップに調整する必要がなく、異なる環境でも使用できるということだ。

StarshipはAndroid、BSD、Linux、macOS、Windowsで利用可能だが、このブログではmacOSのセットアップ手順に焦点を当てる。

誤解のないように言っておく:小文字の "t "が付いた "ターミナル "とは、一般的なターミナル・エミュレータ、またはターミナル・アプリケーションのことです。 大文字の "T "がつく "ターミナル "は、一般的なターミナル・エミュレータ、またはターミナル・アプリケーションを指す。大文字の "T "が付いた "Terminal "は、macOSに含まれるターミナル・エミュレータを指す。 アップルのmacOSオペレーティングシステムに含まれるターミナルエミュレータを指します。.

This gif shows a customized terminal with colorful words in a unique font being typed.Demo of Customized Terminal

スターシップの設定方法

1.スターシップのインストール

新しいターミナル・ウィンドウを開き、以下のコマンドを実行する:

curl -sS https://starship.rs/install.sh | sh

あるいは brewがインストールされていれば、代わりにこれを実行することもできる:

brew install starship

2.シェルのセットアップ

シェルの選択と設定を行います。スターシップは シェルのリストをサポートしていますが、このブログでは Zsh.

Zsh設定ファイルを編集するには、以下を実行します:

nano ~/.zshrc

これで .zshrc設定ファイルを nanoテキストエディタ.nanoでファイルを開いたら、最後に以下を追加する:

eval "$(starship init zsh)"

nanoコマンドでファイルを保存し Ctrl+Oで保存し、昇格したら Return.ファイルが保存されたら Ctrl+Xでエディタを終了します。 変更はすぐにコンフィギュレーションに適用されます。

nanoのウェブサイトで nanoのショートカットのチートシート.

3.フォントの選択とインストール

からお好きなフォントをお選びいただけます。 ナード・フォントのウェブサイト.このブログ記事では FiraCode Nerdフォントをダウンロードすることにした。

This image displays a window from the macOS font book titled 3 typefaces showing FiraCode Nerd Font as a dropdown option.Font Bookフォントを選んでダウンロードしたら、zipファイルから中身を取り出します。新しいフォルダを開いて、中のフォントファイルを表示します。

すべてのフォントファイルを選択します。 .ttf または .otf拡張子)をすべて選択します。選択したフォントファイルを右クリックして 開くまたは で開くを選択し フォントブック(macOSのデフォルト・フォント・マネージャー)を選択して開きます。

Font Bookが開き、選択したフォントファイルがこのように表示されます:

This image displays a window from the macOS font book titled 3 typefaces showing FiraCode Nerd Font as a dropdown option.Font Bookクリック インストールをクリックします。または、フォントファイルをフォントブックウィンドウにドラッグ&ドロップしてインストールすることもできます。インストールが完了すると、フォントブック内の マイフォント.

This image shows the window titled Profiles from Terminal with the Text tab opened, showing that FiraCode Nerd Font is set as the font.Terminal Profilesフォントがインストールされたら、Terminalプロファイルで使用できるかどうかを確認することで、インストールを検証できます。これを行うには、Terminal を開きます。画面の左上で ターミナルをクリックし、次に 設定.設定ウィンドウが開いたら プロファイルメニューを選択します。もし FiraCode Nerdフォントオプションが表示されていれば、フォントは正常にインストールされています。

Pofileでフォントを選択すると、ターミナル・ウィンドウがそれに応じて更新されます。

This image shows the window titled Profiles from Terminal with the Text tab opened, showing that FiraCode Nerd Font is set as the font.Terminal Profiles

4.スターシップの設定ファイルを作成し、編集する。

ターミナルに以下のコマンドを入力して starship.tomlファイルを作成し編集する:

nano ~/.config/starship.toml

このファイルを使えば、スターシップを自分好みにカスタマイズできる。

スターシップのカスタマイズ

ここでターミナルを変更する。プロンプトのあらゆる面を starship.tomlファイルで変更できる。

スターシップの設定

私はtherubberduckieeのターミナルに触発されたので、彼女の 開発環境ファイルをテンプレートとして使った。このファイルの内容をコピーして、あなたの starship.tomlファイルにコピー&ペーストし、HEXコードを好きなものに変更してください。私は彼女の色をVonageブランドの色のHEXコードに置き換えた:

Color HEX Code
Purple 871FFF
Magenta D62190
Cyan 80C7F5
Peach FFA68C
Orange FA7554

The image displays a color chart with six colors, each accompanied by their respective RGB, HEX, CMYK, and PMS codes. The colors and their codes are:  Purple: RGB (135, 31, 255), HEX #871FFF, CMYK (79, 87, 0, 0), PMS 2090C Magenta: RGB (214, 33, 156), HEX #D6219C, CMYK (16, 100, 0, 0), PMS 2405C Cyan: RGB (128, 199, 245), HEX #80C7F5, CMYK (50, 0, 0, 0), PMS 2141C Peach: RGB (255, 166, 140), HEX #FFA68C, CMYK (0, 42, 32, 0), PMS 487C Orange: RGB (250, 117, 84), HEX #FA7554, CMYK (0, 68, 68, 0), PMS 2024C The chart is organized in blocks of color with the information below each color, set on a white background for clear readability.Vonage Colors使用したい色のHEXコードを見つける必要がある場合は、次のようなツールを使用します。 カラーヘックスのようなツールが役立ちます!

スターシップの設定ファイルを好みに合わせて更新したら、変更を保存すれば、ターミナルは問題なく使用できるはずだ!

新しい端末を試す

では、その美しい変化を見てみよう!Visual Studio Codeを使い、ターミナルを開いた。スターシップのカスタマイズを実際に見てみるために、Vonage CLIの Vonage CLI.インストール方法は以下の通り:

npm install --location=global @vonage/cli

出力はこんな感じだ:

The image shows the output of a package installation using npm. The terminal prompt displays the current time in purple and pink, a peach-colored location indicator, and a command running with the output message Completed in 191930ms highlighted in cyan.Installインストールしたバージョンを確認するために vonage --versionを実行した後の出力だ:

The image (version.png) displays the output for the version check of the Vonage CLI. The prompt includes the same colored elements as before, and the output shows the Vonage CLI and Node.js versions installed on the system.Version次にVonageを使うための設定をした。Vonage DeveloperダッシュボードからAPI KeyとAPI Secretを取得し、以下のコマンドで設定した: vonage config:set --apiKey=XXXXXX --apiSecret=XXXXXX

The image shows the successful configuration of the Vonage CLI with an API key and secret. The output message Configuration saved confirms the action, and a deprecation warning for a module is also shown.Config私のVonageアプリをチェックするために、私は使った: vonage apps

The image (apps.png) depicts an attempt to display Vonage applications, but it only shows the column headers Name and Id without any entries. A deprecation warning for the punycode module is repeated here as well.Apps私の端末のカスタマイズは、すべてを簡単にしてくれた!

Vonageアプリケーションの作成および管理方法についての詳細は、Vonage CLIのドキュメントに従ってください。 Vonage CLIまたは Michael Crump のブログ "Better together:GitHub & Vonage CLI" をご覧ください。.

結論

このブログでは、Starshipを使ってmacOS端末をカスタマイズする方法を紹介し、Vonage CLIを使ってテストした。開発者として、私たちの環境は私たちの生産性の鍵となります。もしきれいなターミナルを作るのに助けが必要なら、私たちのコミュニティ コミュニティSlackチャンネル.このチュートリアルに従ったら、X(以前はTwitterとして知られていた)であなたのターミナルをシェアして、私をタグ付けしてください。 タグをつけて.あなたの新しい環境を見てみたい!

その他の資料

ご質問がある場合、またはあなたが作っているものを共有したい場合は、こちらをクリックしてください。

最新の開発者向けニュース、ヒント、イベント情報をお届けします。

シェア:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana Phamデベロッパー・アドボケイト

ダイアナはVonageのデベロッパー・アドボケイト。新鮮な牡蠣を食べるのが好き。