はじめに
Hyperとは...
Win/Linux/Macとマルチプラットフォームで使えるターミナルエミュレーターです。
作ったもの
hyper-neon-theme
（ネオンの装飾をイメージしたパリピになれるカラーテーマです。）
実装内容
- カラーパレットをネオンカラーに変更
- 背景色や文字色をネオンカラーに変更
- headerにtext-shadowを適用し発光をイメージ
- フォント周りの変更
- opacityを変更し、背景透過
作り方
ざっくりとした流れは下記の通りです。
- 必要なファイルを作る
- GitHubにアップする
- npmでパッケージとして公開する
- Hyper公式サイトに掲載するための準備（←現状不可なので無駄）
それでは各項目ごとに詳しく解説していきます。
1. 必要なファイルを作る
ローカルでカラーテーマを反映させるために必要なファイルは 実質index.jsのみ です。
しかし公開することを考えると必要ファイルは下記の通りとなります。
- index.js (実装内容の記述)
- package.json (npmパッケージ公開用)
- LICENSE.md (npmパッケージ公開用)
- README.md (GitHubに公開するとき内容を記述する)
- images (README.mdに載せる画像を格納する)
この章では、実装について自分が行ったことを簡単にまとめます。
初めに公式が公開しているサンプルテーマを見ながら基礎的な背景色や文字色のカラーテーマを実装しました。
その後、opacityの変更などサンプルテーマに不足しているAPIメソッドは下記ドキュメントやリポジトリを確認しました。
また、実際にカラーの反映を確認する際は、ローカルプラグインとして有効化して視覚的に確認を行いました。
確認手順
- ローカルの
~/.hyper_plugins/local/にプラグイン名のディレクトリを作成し、index.jsを格納する -
.hyper.jsのlocalPlugins: [],にプラグイン名を追加して、リロードを行うと反映される
ロードエラーは、index.jsに構文ミスがある場合が多かった印象です。
今回は js に慣れていないこともあり、困ったらAIにエラーメッセージ投げて迅速に解消しました。
また、ロードはされているが反映されない場合は、視覚的な最小単位の実装で反映を確認することを意識すれば構文誤りを発見しやすかったです！
2. GitHubにアップする
作業が完成したら、GitHubの自身のリモートリポジトリにアップします。
この際、公式からフォークしたリポジトリではなく、自身のGitHubでテーマ名のリポジトリを新規作成してアップしましょう。
また、README.mdなんかもここで作ります。
静的なテーマの場合は画像(.jpg/.png) を、動的な要素を持つ場合は動画(.gif)を使うのがおすすめです！
3. npmでパッケージとして公開する
npmのパッケージ公開は初めてだったので、下記のサイトを見ながら行いました。
パッケージ公開手順
- npmの公式サイトにてアカウントを作成
- プラグインのディレクトリで
npm init -yを実行し、package.jsonを作成
（※"name": "@[npmid]/[パッケージ名]"にするようにと記載があるが、コマンド名になるっぽいので"name": "[パッケージ名]"にした。） -
rootにてnpm loginでnpmアカウントでログイン -
npm publish --access publicでパッケージを公開
↑この時点で、カラーテーマがコマンドでインストールできるようになる。
公開が完了したら該当のpackage.jsonを含め、GitHubのリポジトリにpushする。
リポジトリの説明にnpmのリンクなんか載せちゃったりしました。
以上で公開作業が完了。
パッケージ公開後は修正する度、パッチやアップデートでバージョンアップを行う必要があるため注意しましょう！
軽微なアップデートならnpm version patchでOK！
以上で完了です！
これだけ聞くと1日もあれば相当なものができるほど簡単ですね！
4. Hyper公式サイトに掲載するための準備（←現状不可なので無駄）
公式サイトにテーマとして紹介されるためには、hyper-siteをフォークし、imageファイルとpulugin.jsonの情報を更新後、プルリクエストを行わないといけません。
しかし、フォーク元のリポジトリで必要なファイルの依存関係が解消できない状態のため、テスト環境での実行ができず、エラーが発生している（プルリクエストが通らない）ようです。
一体どうすれば良いのやら...ということで、少し時間をかけて調べましたが解消できず、公式サイトへの掲載はあきらめる形となりました。
(せっかく作ったからそのうち公式が解消してくれることを祈ります。
)
最後に開発経緯と宣伝を少しだけ...
まず、私がhyperを使い始めたきっかけは、コマンドプロンプトだと使っていて心躍らないからでした
（やっぱりモチベーションって大事でしょ！）
何か良いものがないかと探していた際にカスタマイズ性に長けているターミナルエミュレータとしてHyperが紹介されていたのがきっかけです。
そこからはカスタマイズ用のプラグインを探しては試す日々。
入力時に火花散らせるし、git pushでロケットは打ちあがるし、カラーテーマは豊富だし、最高じゃん！と思ってずっと使ってきましたが、最近は提供されているものを使いすぎて飽きてしまったのです。
そうなるともう自分で作るしかない。
↑ まずはカラーテーマで心躍らせるっしょ！
という感じの脳筋思考回路で、今回の開発を始めました。
テーマはネオン！
（全人類、ネオンカラーでテンションと作業効率爆上げを目指そう！）
最後に、今回作ったhyper-neon-themeの宣伝をします。
公開は下記にて行っています。
Hyperをすでにご利用の方は下記コマンドでインストールできます！
$ hyper i hyper-neon-theme
もしくは、.hyper.jsの設定ファイルのpluginsに下記プラグイン名で追加すると利用できます！
module.exports = {
...
plugins: [
"hyper-neon-theme"
],
}
};
テンション上がるカラーテーマが作れたと思っているのでぜひ使ってください！
また、使っていただける方に追加で下記のプラグインを入れるのがおすすめなのでご紹介！
module.exports = {
...
plugins: [
"hyper-neon-theme", // ネオンカラーの神テーマ
"hyperborder", // ウィンド枠がおしゃになる
"hyperpower", // 入力時に火花散る
"gitrocket", //push時にロケット飛ぶ
"hyper-tab-icons-plus" //タブにアイコンがついて見やすくなる
],
};
最後までご覧いただきありがとうございました！
初投稿なので、読みにくい・分かりにくい文章になっていたらすみません！
また気が向いたら投稿します！