Spigotプラグイン作成の流れと、Eventを扱ってみる

前回作成したプラグインはゲーム内で確認できる機能がありませんでした。

今回は、もう少し実用性のプラグインの一例として「Event」という仕組みの使い方を紹介していきます!ついでに、私がプラグイン作成するときのフローも合わせて紹介します。

目次(制作のフロー)

計画する#

まずはどんなプラグインを作りたいか考えます。
一番考えやすいのは、トリガーと処理に分けて考える方法です。
つまり、「〜が〜をした時に」「〜をする」と分けて考えます。

今回は、へくしょんさんの企画「シノビロワイヤル」にも使用している、短縮チャット機能の簡易版を作ってみましょう。

例えばですが、プレイヤーがチャット欄で「hello」と送った時に「こんにちは、<プレイヤーの名前>です!」に置き換えて送信する、という処理を作りたいとします。

その際、トリガーは
「プレイヤーがチャットをする」という動作

処理は、

①「そのチャットの内容が”hello”かチェック」

②「プレイヤーの名前を取得し、文を成型し、チャットの内容を置き換える」

という流れになります。

コードを調べる#

私がいつも使うのは、Spigotの公式ドキュメントです。

このサイトにはSpigotのプラグインに使える全ての情報が書いてあります✨

トリガーを調べる#

今回のように、何かをトリガーにする際、その動作が起きたことを検知するために使うのがEventというシステムです。

私のプラグインでも毎回使っています!

ページにアクセスすると下の画像のようになっています。

このページのDirect Known Subclassesというところに、プレイヤーやブロックなどとジャンル分けされたEventが並んでいます。

今回はプレイヤーに関するEventなので、PlayerEventを確認します。

ここにも、Direct Known SubclassesというところにPlayerから始まる、より細かいEventが並んでいます。チャット欄で話したことを検知したいので、AsyncPlayerChatEventを使用します!

処理を調べる#

さきほどのAsyncPlayerChatEventのページを少し下にスクロールすると、Method Summaryという項目があります。

この部分に、利用できるメソッド(関数、処理)がずらっと書いてあります。左から、Modifier and Typeがその関数の返り値のデータ型、Methodが関数名(Methodの括弧内はその関数の引数のデータ型と名前)、Descriptionがその説明です。

今回使うのはハイライトしてあるgetMessage()、setMessage()、getPlayer()です。

先ほど、行いたい処理は、

①「そのチャットの内容が”hello”かチェック」

②「プレイヤーの名前を取得し、文を成型し、チャットの内容を置き換える」

と書きましたが、

「チャットの内容が”hello”かチェック」するためにgetMessage()してチャットの内容を取得、

「チャットの内容を置き換える」ためにsetMessage()します。

プレイヤーの名前を取得するためには、まずgetPlayer()でプレイヤーを取得、そしてgetDisplayName()でプレイヤーの表示名を取得します。

プレイヤーに関してできる処理はPlayerのMethod Summaryを見るとたくさんあります🏃‍♀️

体力/空腹度を変更・テレポート・アイテム付与・ゲームモード変更…など色々あるので見てみてください!

今回の表示名取得は、ハイライトされているgetDisplayName()です。

コードを書いていく#

さて、トリガーや処理などを色々調べてきましたが、情報がそろったのでそろそろコードを書いていきましょう!

前回同様、まずはIntellij IDEAでプロジェクト作成をし、もしプラグイン名が「Testplugin」だとすると、

1
2
3
4
5
6
7
8
9
10
11
12
public final class TestPlugin extends JavaPlugin {

@Override
public void onEnable() {
// Plugin startup logic
}

@Override
public void onDisable() {
// Plugin shutdown logic
}
}

ここまで自動で書かれている前提で話します。

まずはextends Javapluginと{の間に以下を追記します。

1
implements Listener

すると以下のようにListenerに赤い下線がひかれると思います。

なので「Listener」にマウスをのせ、「Alt+Enter」を押します。そしてImport classをクリックします。

そして「Listener(org.bukkit.event)」をクリックします。

すると必要なorg.bukkit.event.Listenerがインポートされます。

次にonEnable()の関数の中に以下の処理を入れます。これによりイベント処理を行えるようになります。

1
getServer().getPluginManager().registerEvents(this, this);

そして、onDisable()の関数の下に以下の関数を追記します。

1
2
3
4
5
6
@EventHandler
public void onChat(AsyncPlayerChatEvent event) {
if(event.getMessage().equals("hello")){
event.setMessage("こんにちは、"+event.getPlayer().getDisplayName()+ "です!");
}
}

「AsyncPlayerChatEvent」という部分も赤い下線が出るので同様に「Alt+Enter」でインポートします。

では、この関数で何をしているか解説していきます。

まず最初の@EventHandlerは続く関数がEventを使用しているよ!と示すものです。

そして次のpublicは外からでも見える、 voidは戻り値が無いことを示します。ここまでは何も考えずに書いておけば大丈夫です。😂

onChatの部分は関数の名前です。実際何でもよいですが、on+処理の概要が(慣例として)一般的に使われています。

そのあとに続くカッコ内()にはEventの正式名(クラス名)、関数内で使用するeventの変数名を書きます。

Eventの正式名はハイライトされた部分どちらかをコピペすれば正確です。 変数名は何でもよいですがeventやeが一般的で、何の変数かわかりやすいです。

関数内はこうなっていますね。

1
2
3
if(event.getMessage().equals("hello")){
event.setMessage("こんにちは、"+event.getPlayer().getDisplayName()+ "です!");
}

いろいろ「.」で繋がっていますが、このように繋げる(パイプ処理)と、いちいち結果を変数に格納しなくて済むので見た目がすっきりします😎

まずifの条件を見ます。まず小文字のeventはEventが格納された変数です。それにドットで挟むとEventに対して行う処理を繋げて書くことができます。さらにequals(“文字列の内容”)で、event.getMessage()と”文字列の内容”が等しいかどうかをチェックします。

つまり、以下と同じです。

1
if(event.getMessage() == "hello")

もし、そのEvent(チャット)のメッセージ内容が”hello”なら、true、異なるならfalseです。trueならカッコ内の処理が実行されます。

“hell”でも”helloo”でも、異なるのでfalseです。正確に”hello”の時のみtrueになります。

メッセージが”hello”のときに実行されるのが以下の処理です。

1
event.setMessage("こんにちは、"+event.getPlayer().getDisplayName()+ "です!");

event.setMessage(“メッセージ内容”)は送られるメッセージの内容を書き換える処理でしたね。

何に書き換えているかというと、

「こんにちは、」という文字、プレイヤーの表示名、「です!」という文字を連結したものに置き換えています。

プレイヤーの名前を取得するために、eventからgetPlayer()でプレイヤーを、プレイヤーからgetDisplayName()で表示名を取得しています。

この処理を分けて書くと以下のように長くなります。

1
2
3
4
Player player = event.getPlayer();
String name = player.getDisplayName();
String message = "こんにちは、"+name+ "です!"
event.setMessage(message);

短いのがいい人もいれば、長いけどわかりやすくてこっちがいいって人もいると思います。そこは好みのほうで書けば大丈夫です👌

応用編#

“hello”以外にも、以下のようにif文を繰り返せば短縮コマンドを増やすことができます。

1
2
3
4
5
6
if(event.getMessage().equals("短縮コマンド1")){
event.setMessage("コマンド1の代わりに送信される文");
}
if(event.getMessage().equals("短縮コマンド2")){
event.setMessage("コマンド2の代わりに送信される文");
}

また、今までの処理はメッセージが指定した文字列に完全に一致しているのが条件でしたが、

もし文中のある文字を入れ替えたいのであれば、以下のような処理で実装できます。

1
2
3
4
5
6
7
8
String message = event.getMessage();
if(message.contains("置き換え前の文字列1")){
message = message.replace("置き換え前の文字列1", "置き換え後の文字列");
}
if(message.contains("置き換え前の文字列2")){
message = message.replace("置き換え前の文字列2", "置き換え後の文字列");
}
event.setMessage(message);

contains(“含むか判定する文字列”)は含んでいるとtrueを、含まないとfalseを返します。

replace(“old”, “new”)で、文字列中の全ての”old”を”new”に置き換えることができます。

ビルドする#

ウィンドウ右上の緑の▶ボタンをクリックしてビルド開始。

エラーがあればウィンドウ下部のコンソールにエラー内容が出るので修正後、ビルドしなおしましょう。

(次の記事からはビルド方法は省略して大丈夫ですよね?😅)

ビルドされたjarファイルは[プロジェクトフォルダ]\プラグイン名\targetフォルダ内にあります。

動作テストをする#

Spigotサーバー内pluginsフォルダにjarを配置し、サーバーを起動します。

Minecraftを起動し、正常に動作するか確認しましょう。

このように自己紹介文が送信されれば成功です!

不具合対応#

では、もし正常に動作しなかったら…?😨

1
Bukkit.getLogger.info("ログ出力したい文");

このような処理を入れるとサーバーのコンソールにログが流れるので、これを活用するなどして不具合が出ている箇所を特定し、修正します☠

まとめ#

今回はチャット検出のEventを例に挙げましたが、ほかにも様々なEventがあります。今後少しずつ紹介していく予定です。

気になる機能があればTwitterなどで言っていただければそちらも記事にします!

次の記事としてはコマンドをトリガーに使用する方法を予定しています。お楽しみに。😊

MinecraftのSpigotサーバー向けプラグインを作ってみる (2/2)

前回準備した環境で実際にプラグインを作っていきましょう!

今回はシンプルなものから紹介しますが、別の記事で複雑めなプラグインも紹介するつもりです😉

目次

必要なもの#

プログラミングの基礎知識(少し)

プロジェクト作成#

まずはプロジェクト作成からです。

Intellij IDEAを起動した最初の画面で、「Create New Project」を押します。

左側から「Minecraft」をクリックし、次に「Spigot Plugin」を選択。

③のProject SDKに、インストール済みのJDKが指定されていることを確認し、「NEXT」を押します。

GroupId」は自分の名前か組織名を、「ArtifactId」はプラグインの名前を入れ、「NEXT」。

①の「Plugin Name」にプラグイン名、②はプラグインを使用する予定のマイクラバージョン。

③は必要ではないけど、入れてもいいです。「Description」はプラグインの説明、「Author」は作者名。

入力完了後、「NEXT」。

最後にプロジェクトを保存するフォルダ名を決めます。基本的にはプラグイン名にしておけばわかりやすいと思います。

そして「FINISH」!

コード作成!#

初めてプラグインを作ったときには以下のような豆知識の画面が出てきます。今後出てこないようにしたかったらチェックボックスにチェックを入れ、CLOSEします。

ソフトが色々自動でファイルの準備などをしてくれるので少し待ちます。完了すると次のような画面に。

プラグイン制作では、赤枠内にコードを書いていきます!

コード解説#

中のコードはこうなっていますね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package joey.testplugin;

import org.bukkit.plugin.java.JavaPlugin;

public final class TestPlugin extends JavaPlugin {

@Override
public void onEnable() {
// Plugin startup logic

}

@Override
public void onDisable() {
// Plugin shutdown logic
}
}

最初の packageはパッケージ名です。先ほど設定したGroupIdArtifactIdになっていますね。

その下のimportは、このプログラムに必要な別のパッケージを使うよーと宣言しています。あまり気にしなくていいです。

さらにその下のpublic final class TestPlugin extends JavaPluginというのは、ここからがTestPluginというクラスで、このクラスはJavaPluginのクローンで同じ機能を持っている(見えないけど)という感じです。

クラスというのは、いろいろな処理を集めて書くところだと思ってください。

最初のpublic finalはおまじない程度に、これは必要とだけ考えておけばOKです。

というか、ここまでソフトが自動で作ってくれているので、無視でもOKです😅

次に、そのクラスの括弧内に2個パーツがありますね。

1
2
3
4
5
6
7
8
9
@Override
public void onEnable() {
// Plugin startup logic

}
@Override
public void onDisable() {
// Plugin shutdown logic
}

まず、@から始まる部分はアノテーション(注釈)を表します。例えば@Overrideといのは、この関数は、クローンして見えないけどクローン元にもともとある関数を上書きするよーという宣言です。

あまり深く考えなくてOKです。😉

次に、「onEnable()」のような、()がついている文字が、いわゆる関数です。数学の関数とはちょっと違って、いろいろな処理をひとまとめにして、名前を付けた感じです。

例えば、「野菜を切る、炒める」というのをまとめて「野菜炒め作り」と名付けるみたいな。笑

()の中にはその処理に渡す「変数」を書きます。「野菜炒め作り」ではキャベツや豚肉でしょうか。笑

無ければ今回のように空白です。

その関数名の前にある、「public」はクラスの外からでも見える、「void」はこの関数には「戻り値」がないよ(処理の結果を返さない)ということです。もし「戻り値」があるときは、その値の「データ型」を書きます。わからなくても今はそう書くんだな、と覚えておけば大丈夫です👌

そして、{}で囲まれている部分に処理を書きます。ちなみにですが、//から始まっている分はメモ扱いとなり、処理として扱われずに無視されます。一般的には「コメントアウト」と呼ばれます。

つまり、プラグイン制作においての関数の書き方は以下の通りです!

1
2
3
4
@アノテーション
public 戻り値のデータ型 関数名(渡す変数) {
行う処理
}

処理を書いてみる#

さて、戻りますが、onEnableはプラグインが有効化されたとき、onDisableは無効化されたときに、

それがトリガーになって動作する処理を書く部分です。

例えば、次のようにgetLogger().info("テストプラグインが有効化されました!");をonEnableの中に書いてみましょう。

1
2
3
4
5
6
7
8
9
10
@Override
public void onEnable() {
// Plugin startup logic
getLogger().info("テストプラグインが有効化されました!");

}
@Override
public void onDisable() {
// Plugin shutdown logic
}

ちなみにですが、コピペせずにタイプをしていると、以下のポップアップが出てくることがあります。

これはソフトがコードを予測して提案してくれています。

TabかEnterを押すと残りが自動で入力されてとても便利です!

書き終わったら、画面右上の緑の▶ボタンを押すと、コードがビルドされて、実際のプラグインファイル(jarファイル)を作ってくれます。

ボタンを押すとウィンドウの下部にずらーっとログのようなものが流れだします。

PCスペック、コードの長さによりビルド時間も異なりますが、数秒ほど待ちます。

上記画像のように、BUILD SUCCESと表示されればビルド成功です!

エラー(タイプミス、構造エラーなど)があればビルドが成功せず、何行目の何がおかしいか教えてくれるので修正します。

作成されたjarファイルは、「\インストーラー時に指定したプロジェクトフォルダ\target」内にあります。

この、「プラグイン名-バージョン.jar」が完成したプラグインです!

これをSpigotのpluginsフォルダに入れてサーバーを起動し、ログに「テストプラグインが有効化されました!」と出れば成功です!

まとめ#

今回はとてもシンプルなプラグインしか紹介しませんでしたが、基本的な流れは伝えられたかな、と思います。次の記事などでもっといろいろな処理ができるコードを紹介する予定ですのでお楽しみに!😊

わからなかったところや質問などあれば、TwitterやDiscordまでどうぞ😉

MinecraftのSpigotサーバー向けプラグインを作ってみる (1/2)

ご要望を受け、2回に分けてSpigotというMinecraftサーバー用のプラグインの作り方を説明していきます!

本ページはまず下準備として、開発環境の準備編です👻

目次

前提条件#

・Windows 10 (Macの人は読み替えて下さい)

必要なソフト#

・JDK(Javaの開発なので必要)

・Intellij IDEA(このソフトで開発をする)

JDKのインストール#

まずはJDKというJavaのパッケージをインストールします。Minecraft Java版を遊んでいる人の中には既にJDKをインストールされている方もいるでしょう。その場合は読み飛ばしてください😅

まずはOracleのページにアクセスします。

自分のOSに合ったインストーラーをダウンロードしましょう。例えばWindows 10 64bitの場合は、赤枠のリンクをクリック。

download

利用規約に同意しないとダウンロードできないため、チェックを入れてダウンロード開始します。

インストーラーを起動したら、2回Nextをポチポチすればおっけーです👌

1

2

3

4

Intellij IDEAのインストール#

このソフトは一般的に総合開発環境(IDE)と言われるソフトの1つで、ざっくりいうとコードを書く専門のソフトです。

エラーチェック、見た目を整える機能、コードの自動補完など素晴らしい機能がたくさんあり便利です!

では公式ページのダウンロードページにアクセスします。

コミュニティという無料版をダウンロードします。

インストーラーを起動したらNextを押していきます。

次の設定は必須ではないです。必要ならチェックをしてNext。

①…デスクトップにショートカット作成

②…右クリメニューに「フォルダをプロジェクトとして開く」を追加

③…関連付ける拡張子

Installボタンを押したらしばらく待ちます。

チェックボックスを入れて、インストーラー終了後に起動するようにします。

初期設定#

まず見た目どちらがいいかを聞かれます。好きな方を選び、Next Default pluginsを押します。

ほかにもテーマはインストールできるので、適当でも大丈夫です👌

ここに出てくるプラグインは元から入っているプラグインで、ここで選ぶと無効化できます。

どれも使わないですが特に無効化する必要もないのでNext Featured pluginsを押します。

ここに出てくるプラグインも必要ないので何もせず右下のStart using Intellij IDEAを押します。

プラグインのインストール#

次に、Spigotのプラグイン制作に必要なプラグイン(紛らわしいですね笑)をいれていきます。

歯車アイコンの横のConfigure→Pluginをクリック。

次に、「minecraft」と検索して出てくる、「Minecraft Development」をインストールします。

これがいちばん大事。

インストール後は再起動を求められますが、再起動前に別のプラグインを入れてもOK。

以下のプラグインも入れました。

CodeGlance(画面右側に全体プレビューしながらスクロールできるバーができる)

RainbowBracket(階層が深くなるとわかりづらい括弧を色分け表示してくれる)

Material Theme UI(いい感じのテーマ)

色々入れたらボタンを押すか手動でソフトを再起動します。

まとめ#

環境作成は以上。

次の記事で実際にプラグインを作っていきます!

Hexoにテーマを導入したらgitでエラーが出た話

ローカルでテストした際はテーマが導入できたが、なぜかNetlifyは更新されていない。

ログを見てみるとデプロイでエラーが出ており、さらに見てみるとそもそもテーマのフォルダーがGithubにpushされていないようでした。

git pushを試すと、

1
2
3
error: failed to push some refs to git@github.com:yourrepo.git
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing

みたいなエラーが起きていました。

原因#

テーマ名のフォルダ内(今回はanodyne)の.gitフォルダーを削除したことらしい。

対処法#

まずblogフォルダーの.gitフォルダを削除し、
次に以下のコマンドでgitの再設定をします。

1
2
3
4
5
git init
git add .
git commit -m "first commit"
git remote add origin レポジトリのURL
git push -u origin master -f

私の環境では以上で直りました😅
最後の-fという引数で強制更新をしてるらしいです。

まとめ#

  • .gitフォルダを消すとまずい(かもしれない)

Hexoにテーマをインストールする

HEXOのテーマを変えた時の手順の記録。(諸事情で私は元に戻しました笑)

目次

テーマを決める#

まずはここからテーマを選びます。公式なので安心。


今回はanodyneを選んだ体で話を進めます。

インストール#

テーマをクリックするとGithubのページに飛ぶテーマが多い。
GitHubにしろどこにしろ、インストールのしかたが示してあるはずです。

インストールするにはまずコマンドプロンプトなどでブログのフォルダに移動します。

1
cd blog

今回は以下のコマンドでインストールできます。

1
git clone https://github.com/klugjo/hexo-theme-anodyne themes/anodyne

画像にも載っていましたが、テーマを有効化するには_config.ymlを編集します。

1
theme: landscapeをテーマ名に変更

テーマ固有の設定#

その他設定方法もテーマのページに載っているはずです。

例えばこのテーマでは、メニューの設定をするために先ほどの_config.ymlに以下のように追記します。

1
2
3
4
5
# Header
menu:
Home: /
Archives: /archives
About: /about.html

各テーマ制作者のページの指定通りに設定を追記していけばOKです😀

おわり

Hexo, Github, Netlifyを使ってブログを作ってみる 3/3

今回はブログ制作の最後のステップ、Netlifyの登録と設定の手順についてです🙋‍♂️

目次

アカウント作成#

まずは公式ページにアクセスしましょう。

登録の仕方を選びます。Githubのアカウントでも作れますが今回はEmailを選びました。実際なんでもいいです。

自分のメールアドレスと設定したいパスワードを入力します。最近はChromeで強力なパスワードを生成してそのまま覚えてくれるので便利ですよね!

Emailをチェックしろと言われるのでチェックしましょう。

メールボックスにNetlifyからのメールが来ているはずです。メール内のVerify Emailを押します。

クイックスタートガイドが出るのでNextのあたりを3回押して消します。すると登録は完了です!

初期設定#

では次にいろいろ設定していきましょう。

右上のNew site from Gitを押します。

GitHubを選択します。ログイン画面が出てくるのでログインしましょう。

ログインして連携完了すると自分が作ったレポジトリが出てくるので選択。

赤枠内が画像通りになっていることを確認し、Deploy siteを押します。

すると、サイトが完成します、、、がこのままだとURLがダサいですよね。

追加設定#

変更したい場合、まずDomain settingをクリックします。

Custom domainsという項目の右のほうにあるOptionを押します。

するとEdit site nameと出てくるので押します。

このsitenameというところにブログのURLとしてセットしたい好きな文字列を入れましょう。なお、末尾のnetlify.appは変更できません。変更するには外部でドメインを購入するなりして発行する必要があります。
決めたらSaveを押してください。

するとURLを設定できました!

赤枠内をクリックすると作成した自分のブログにアクセスすることができます。

まとめ#

ついにブログ完成ですね😎

時間があればこちらを参考に、テーマをインストールするとより自分らしいブログになるかと思います!

Hexo, Github, Netlifyを使ってブログを作ってみる 2/3

今回はGit for Windowsをインストールについてです。

個人的にいくつか躓いたところがあったので誰かの助けになれば幸いです😅

目次

前提条件#

  • Githubに登録していてレポジトリを作成済み

ソフトのダウンロード&インストール#

まずはソフトをダウンロードします。こちらが公式ページになります。

Downloadをおしてダウンロードしましょう。完了したら実行してください。

Nextを押します


Nextを押します


普段使用しているテキストエディタを選択してからNextを押します


真ん中のオプションが選ばれているのを確認してNextを押します


Nextを押します


Nextを押します


専用のターミナルを使うかコマンドプロンプトを使うか聞かれます。私はコマンドプロンプトを選びました。選んだらNext


Installを押します

少し待ちます

リリースノートは見なくてもよいのでチェックを外してNextを押して終了しましょう。

設定#

先ほどコマンドプロンプトを選んだ前提で話します。コマンドプロンプトを選ばなかった場合はGitBashに読み替えてください。
まずコマンドプロンプトを開きます。WindowsキーとRを押して、出てきた画面にcmdと入れます。

コマンドプロンプトが開いたら以下のコマンドでGithubのユーザー名とメアドを設定します。ダブルクォーテーションで囲ったところにそれぞれユーザー名などを入力してください。

1
2
git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"

以上が初期設定になります。
次にブログのソースをGithubにアップロードするための設定を行っていきます。

使用方法#

前回作成したblogというフォルダに移動します。

1
cd blog

次に以下のコマンドで必要なファイルを用意してもらいます。

1
git init

すると、.gitというフォルダができました。
これだけだとgitはまだほかのファイルを認識していません。
では前回作成したブログに関する全ファイルを、gitに認識させましょう。

1
git add .

次に、コミットというライザップ感のある謎の作業をします。どうやら変更履歴を記録するための機能のようです。 “”内は適当でOKです。

1
git commit -m "first commit"

コミット完了後は自分のレポジトリをgitコマンドに登録します。レポジトリのURLは”Clone or download”という緑のボタンを押してUse HTTPSを押すと見れます。ちなみにこんな形式です。https://github.com/'ユーザID'/'リポジトリ名'.git

1
git remote add origin レポジトリのURL

では最後にpushコマンドでアップロードを開始しましょう!

1
git push -u origin master

以上です。

まとめ#

記事のソースが無事にGithubにアップロードされました。Github上で保管しているので、ほかのデバイスからでもgit cloneをすることで執筆作業ができますね!
次はNetlify上でGihubのソースを登録する方法を紹介します。

次へ

Hexo, Github, Netlifyを使ってブログを作ってみる 1/3

本ブログの開設手順を説明していこうと思います。

備忘録も兼ねて、本ブログの開設手順を3ページに分けて説明していこうと思います。

目次

使用するサービス#

  • Hexo (記事作成ができるいわゆるSDG)
  • Github(クラウド上でソースを管理する)
  • Netlify(実際のブログが置かれる場所)

本記事ではまずHexoのインストール、設定について。

前提条件#

  • Windows10

  • NodeJSをインストール済み

npmからHexoをインストールする#

まずはソフトをダウンロードします。普通のソフトのようにホームページなどからダウンロードするのではなく、コマンドライン上のNPMからインストールを行います。
WindowsキーとRキーを同時に押してcmdと入力してコマンドプロンプトを起動します。
画面に以下をコピペしてエンターキーを押してください。

1
npm install hexo-cli -git

色々出てきますが、以下の様に

1
2
+ hexo-cli@3.1.0
updated 1 package in X.XXXs

とでればOKです。まだコマンドプロンプトは使用するので閉じません。

ブログのソースを作成する#

次にブログのもととなるソースを作っていきます。blogの部分はフォルダ名なので適当でいいです。

1
hexo init blog

次にそのフォルダに移動します。上のコマンドでblog以外のフォルダ名にした場合はそのフォルダ名で読み替えてください。

1
2
cd blog
npm install

そして必要なモジュールなどをインストールします。

1
npm install

インストールは以上です!

記事の作成方法#

以下のコマンドで新規記事を作成します。

1
hexo new post 記事名

するとsource/_post/記事名.md というファイルが生成されます。このファイルを編集して、記事を書いていきます。markdownという形式で書きます。

作成した記事をテストする#

記事の編集が完了し、ローカルで表示を確認するには以下のコマンドを打ちます。

1
2
3
hexo clean
hexo generate
hexo server

すると以下のような表示が出ます。

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

表示にあったhttp://localhost:4000 にブラウザでアクセスすると作成した記事を見ることができます。あくまでテスト用です。

ブログタイトルを変更する#

ブログをテスト表示してみるとタイトルがHexoになっています。最後にこれを自分のブログ名に変更してきましょう。
blogフォルダ内に_config.ymlファイルがあります。これが設定ファイルになっているので編集します。

1
2
3
4
5
6
7
8
# Site
title: WRITE YOUR BLOG TITLE HERE
subtitle: ''
description: ''
keywords:
author: YOUR NAME
language: ja
timezone: 'Asia/Tokyo'

変えるのは
titleを自分のブログタイトルに
authorを自分の名前に
langaugeをenからja
timezoneを’Asia/Tokyo’
ぐらいですかね。

まとめ#

作成した記事はうまく表示されましたでしょうか?
次のページでは、編集したmdを含むソース全体をgithubに記事をアップロードする方法を紹介します。

次へ

About Joey

本ブログ著者の自己紹介ページ。

What I like#

・言語学(英語、韓国語、中国語)

・プログラミング(今の仕事。PHP中心に趣味でJava, nodejsなど)

・ゲーム(最近はApexなどFPS中心。ポケモンも細々とやってます)

過去の制作物#

・LINEのボット

・Discordボット

・Spitgotプラグイン

SNS#

・Twitter @iam_joey_

・Discord iamjoey#7134