記事の前提
過去にこれらの記事
にて、GitHub連携のやり方・実際にどうやってテンプレート・.yamlを更新するか、に触れましたが、細かな環境構築のやり方については触れませんでした。
上記の設定のみでも十分だとは思いますが、例えばTailwindCSSなどのパッケージを追加したり、VSCodeのエクステンションでMTタグの補完を効かせたり、もう少し整えた上で快適にコミットを積んでいきたい人もいるかと思います。
今回は実際に今自分の環境がどうなっているかを解説して、ここからどうしたい・どうなってほしい、辺りも考えてみようと思います。
対象読者 == 自分 == 初心者向けを目指しているので、『npmを使うのにはnodeのバージョン設定が必要だよ』みたいな話も書きます🐤
猛者👹の方は適宜読み飛ばしてください！
1. npmで色々入れてみよう
前置き：npmとは？
npm（Javascriptのパッケージ管理システム）なんぞや？はこちらのtaoさんの記事などをご覧ください。
ざっくりまとめてしまうと、
- 色々便利なパッケージを楽に管理できる仕組み
-
npmを使うにはnodenvなどを使用したNode.jsのバージョン管理が必要 -
npm install ***で欲しいパッケージをインストールできる -
npm installでpackage.jsonに書かれたパッケージをまとめてインストールできる
という感じです。
ここから先は nodenv・npmが入っていることを前提 とし、以下のコマンドはすべてそれらの環境に準じます。
nodebrewやyarnなど、既に使っている好みのものがあれば、そちらでのやり方に置き換えてください。
a. とりあえずNode.jsのバージョンを指定する
ターミナルでMovableType.netのプロジェクトフォルダ(ここではmt-projectとします)に移動して、
$ cd Src/mt-project
以下のコマンドで、希望のバージョンをインストールし、プロジェクトフォルダ内で使用されるNode.jsのバージョンを指定します。
npmの現時点最新LTS（長期サポート版）であるv10がNode.jsの18.17.0以降をサポートしていて、かつ20.18.1はLTSなので入れてみます。https://github.com/npm/cli/releases/tag/v10.0.0
（ここのバージョンの決め方はnpmのバージョンだけでなく、このあとnpmでインストールするパッケージとの関係などを見る必要があります）
$ nodenv install 20.18.1
$ nodenv local 20.18.1
すると、.node-versionというファイルが作成されます（不可視ファイルなので、Finderなどファイルビューワーではデフォルトでは見えません）。
これでnpmを使う用意ができました。
b. npmを使ってパッケージを入れる
1.TailwindCSS
今回はTailwindCSSを入れてみます。
TailwindCSSは、自分でcssクラスを定義することなく、事前にTailwindCSSが定義したユーティリティクラスを使って、効率よくスタイリングをすることができるCSSフレームワークです。
例えば、赤い太文字を2.25remの大きさで表示したい場合、
<p class="text-red-500 font-bold text-4xl">こんな風に</p>
書きます。
実際の見た目はこちら → https://play.tailwindcss.com/3jftlr9piQ
さて、npmでインストールしてみましょう。
基本的なインストール方法は、公式でも紹介されています。https://tailwindcss.com/docs/installation
$ npm install -D tailwindcss
$ npm i -D @tailwindcss/typography
1行目では tailwindcss をインストールしています。-D は開発環境で使うパッケージとして devDependencies に追加されるコマンドです。
2行目では npm iでインストールしていますが、installはiの一文字に省略可能 です。
インストールしている @tailwindcss/typographyは、tailwindcssのプラグインの一つ で、これを使うとproseというクラスを指定するだけで、ブログ記事などの基本的なスタイリングが完了します。
これでインストールは完了です。
インストール後のセットアップの話は、この後の 『パッケージ追加後のセットアップ：TailwindCSSの場合』 に進んでください。
2.Prettierを入れたい？
Prettierとは、コードに対して、インデント量の調整・適切なスペースの挿入・適度な折り返しなどの整形を行い、誰でも同じルールに基づいて綺麗に書けるようにしてくれる ツールです。
対象言語も様々ありますが、.mtmlは非対象のため、そのままではPrettierで整形することができません。
しかし、去年の「Movable Type Advent Calendar 2023」25日目の記事として天野さんが書かれた、
にて、JSXで記述することでPrettierの整形を使ったりバリデーションをかけることができ、更にJSXからMTMLへのトランスパイルもできる「mt-jsx-template」というnpmパッケージを制作されたお話が公開されていました。
こちら個人的にとても興味があるのですが、現在作成中のテンプレートが既に数十ファイルあり、まだ導入できてません…。そのため、ここでは軽めのご紹介とさせてください！
（また実際に使用した暁に、記事を更新したいと思います🙏）
その他、TailwindCSSのクラス表記を並び替える、prettier-plugin-tailwindcss もよいかもしれません。
これらすべてを入れる場合は、以下のように書くとまとめてインストールできます。
$ npm i -D prettier mt-jsx-template prettier-plugin-tailwindcss
2. npm iした後に起こること・やること
npmでインストールを実行すると、色々とファイル・フォルダが作成されます。
package.jsonとpackage-lock.json は他の人がこのプロジェクトを使う時に、npmの環境を揃えるために必要なファイルです。
package.jsonには"scripts"という項目もあり、ここにはターミナルで実行したいスクリプトのエイリアスを書くことができます（詳細は『TailwindCSSインストール後のセットアップ』にて）。
更に、node_modules というフォルダ内には、実際にnpmでインストールしたパッケージとその関連ファイルが膨大に入っています。
そんな訳で、node_modulesをGitHubにコミット・プッシュすると大量のファイルが上がってしまうので、.gitignoreファイルを作成して、node_modulesをコミットの対象から外しましょう。
node_modules/
どんなパッケージをインストールするかによって、.gitignoreの内容は変わってきます。
必要なものを誤ってignoreしてしまわないように注意が必要です。
ここまでできたところで一度コミットしておくと良いでしょう。
3. パッケージ追加後のセットアップ：TailwindCSSの場合
a. tailwind.config.jsの書き方
ここからは、インストールしたパッケージによってやることが変わります。
今回はTailwindCSSのセットアップを例として扱います。
$ npx tailwindcss init
を実行すると、以下のようなtailwind.config.jsが作成されます。
これは、どのファイルを元にユーティリティクラスをエクスポートするか・tailwindCSSでどのプラグインを使用するか・独自クラスの追加・既存クラスのカスタマイズ、など様々な設定を行うファイルです。
デフォルトでは以下のように空のconfigとなっているので、プロジェクトフォルダの状況・やりたいことに合わせて書き込む必要があります。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
まず必須の設定は content です。TailwindCSSでは、ここで指定されたファイルを参照して、どのクラスが使用されているかを判断し、必要なクラスだけをまとめた.cssを生成することができます。
content: ["./_theme/templates/**/*.mtml"],
次に、最初にインストールを行う際に、@tailwindcss/typographyというプラグインをインストールしました。なので plugins に以下のように記述します。
plugins: [
require("@tailwindcss/typography"),
],
その他theme内では、既存のクラスの上書きや独自のクラスを追加（extend）することも可能です。
詳細は下記記事などをご参照ください。
最後に、TailwindCSSのビルドはcontentで指定されたファイル群を文字列として読み、既存のクラス名と合致する部分があれば、クラスを書き出します。
MovableType.netでGitHub連携をする場合localhostが使えないため、実際に書いた内容は毎度コミット・プッシュをしないと見れません。
スタイリングについてはブラウザの開発者環境で手直しすることで、ある程度変化を確認することができますが、使いたいクラスがビルドされていなければ、そのクラスはブラウザ上で反映されません。
また、MTタグやJavascriptなどを使用して動的に色を指定するようなコードでは、ビルド時に既存のクラス名と一致する部分がないため、本来使用したいクラスがビルドに含まれません。
<p class={`text-${color}-${value}`}>
そのような時に、safelist を使用することで、あらかじめ含めたいクラスを指定することができ、safelistは正規表現を使った記述が可能です。
今回は色にまつわるクラス数種類と、margin・padding・gapなど頻繁にレイアウト調整で使用するクラスをsafelistに入れました（実際より色名を減らしています）。
結果、以下のようなコードとなりました。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./_theme/templates/**/*.mtml"],
theme: {
extend: {},
},
safelist: [
{ pattern: /^bg-(red|green|blue)-(400|500|600|700)/ },
{ pattern: /^border-(red|green|blue)-(400|500|600|700)/ },
{ pattern: /^text-(red|green|blue)-(400|500|600|700)/ },
{ pattern: /^(m|p)-[0-9][0-9]$/ },
{ pattern: /^(m|p)(t|b|l|r|x|y)-[0-9][0-9]$/ },
{ pattern: /^gap-[0-9]$/ },
{ pattern: /^gap-(x|y)-[0-9]$/ },
],
plugins: [
require("@tailwindcss/typography"),
],
};
b. ビルド設定
tailwind.config.jsが設定できれば、ビルドを実行できるようになります。
$ npx tailwindcss -o _theme/blog_static/assets/vendor/tailwind.css --minify
_theme/blog_static/assets/vendor/部分は、実際にcssを置きたいフォルダを指定してください。
--minifyオプションをつけることで、改行やスペースなどを含まない、より軽量なファイルとなります。
通常は数百KB程度になるはずですが、ビルドに数十秒以上かかる・ビルドされたファイル（tailwind.css）が1MB以上あるようであれば、不要なクラスまで書き出している可能性があるので、safelistなどの設定を見直すと良いでしょう。
ビルドされたtailwind.cssは、各ページの<head>で読み込むことで適用されます。
先ほどビルドで指定したパスと合うように、以下のような形で記述しましょう。
<link rel="stylesheet" href="<$mt:BlogRelativeURL$>assets/vendor/tailwind.css">
これで、TailwindCSSで記述したスタイリングが適切に反映されるようになるはずです。
c. package.jsonの調整
ここまででも十分ですが、ビルドのコマンドは頻繁に使うのでpackage.jsonにエイリアスとして指定したいです。
{
"scripts": {
"build": "npx tailwindcss -o _theme/blog_static/assets/vendor/tailwind.css --minify"
},
と書いておくと、
$ npm run build
という短いエイリアスでビルドが行えるようになります！
以上でTailwindCSSのセットアップは完了です！
4. prettierインストール後のセットアップ
ここは、『2.Prettierを入れたい？』 で述べた通り、mt-jsx-templateの使用感を確認した上で書きたいところですが、大まかなやることとしては、
-
.prettierrcにどのように整形したいか書く-
prettier-plugin-tailwindcssで、TailwindCSSのクラス表記の並び替えなどもできます
-
-
.prettierignoreにどのフォルダ・ファイルを整形対象から除外するか書く- 例えば
package-lock.json, package.json, node_modules
- 例えば
- https://www.npmjs.com/package/mt-jsx-template を見て
tsconfig.jsonを書く
などがありそうです。
Prettierの基本的な設定方法はこちらなどをご参照ください。
5. ここまですべてやった場合の階層構造
ここまでの全てを行うと、色々ファイル・フォルダが増えていると思いますが、怖くないよ！ ということで、ざっくりどんな階層構造だったのか、おさらいしておきます。
.
├── _theme
│ ├── blog_static/assets/vendor
│ │ └── tailwind.css <- TailwindCSSでビルドした結果
│ ├── templates
│ │ └── index.html.mtml など
│ └── theme.yaml
├── node_modules <- npm i したパッケージのモジュールフォルダ
├── .gitignore <- git のコミット対象から外すファイルを指定
├── .node-version <- Node.js のバージョン指定
├── .prettierignore <- prettier の整形対象から外すファイルを指定
├── .prettierrc <- prettier の設定
├── .package-lock.json <- npm i したパッケージのバージョン・依存関係の詳細
├── .package.json <- プロジェクトの情報・npm i したパッケージの情報など
└── tailwind.config.js <- TailwindCSS の設定
└── tsconfig.json <- mt-jsx-template の設定
Prettier周りの設定をやっていない人は、.prettierignore``.prettierrc``tsconfig.jsonが入っていないと思いますが、それで大丈夫です。
ターミナルでコマンドを打つ系の設定はここまでです。
ここからは肩の力を抜いて、VSCode（もしくはCursor）の設定に進みたいと思います。
6. エディタを快適に：VSCodeのエクステンションを入れてみよう
せっかくGitHub連携してエディタで書けるのだから、エクステンションを使ってより快適にしよう！ ということで、いくつか使っているもの・便利そうなものをご紹介します。
a. スペルチェッカー
どんなプロジェクトでも役立つので入れておいてよいと思います。
b. MTMLエクステンション
選択肢は現時点で4つありますが、今回はusualomaさん(Prettierの章で紹介したmt-jsx-templateを制作された天野さん)のエクステンションを選択しました。
c. TailwindCSS
TailwindCSSのクラスの入力補助をしてくれるので、TailwindCSSを使う場合は入れておくとよさそうです。
d. Linter系
① Javascriptの構文チェックなどをしてくれる
② CSSのチェックをしてくれる
② エラーをハイライトしてくれる
JavaScript・TypeScriptを書く人は、この辺りも入れておくとよさそうです。
ここは好みに合わせて他の選択肢もあると思います。
7. 実際色々入れてみてどう？
MTMLエクステンションで、MTタグの候補が表示されている様子
TailwindCSSエクステンションで、TailwindCSSのクラス候補が表示されている様子
だいぶ快適になってきたと思います！
一々MTタグの仕様を見に行く必要もありませんし、TailwindCSSのクラスも色などがハイライトされて分かりやすいです！
細かな気になるところ
としては、
- 今回使用しているMTMLエクステンションは、あくまでMovableType用のものなので、MovableType.net独自のもの（例えばかんたんデザイン編集の
mt:Var属性値などのドキュメント）は表示されません。- 他の方のMTMLエクステンションも試したのですが、なぜか自分の環境で機能せず…
- エディタ内での作業はモダンになってきたと思いますが、
localhostがない以上毎回コミット・プッシュしないと結果が確認できないので、コミットログが汚くなりがちです。 - 更に、そうして汚くなったコミットログを整えようと
git rebaseやgit resetをかけると、fatalエラーが発生してしまうようなので、ちょっとむず痒さはあります。
MovableType.netダッシュボードでfatal: invalid revision rangeエラー・サイト変数のの設置可能数の上限を超えたエラーが表示された様子
現在進めている開発がひと段落したら、またエクステンション周りの見直し・より綺麗なワークフローは検討したいですが、
- MovableType.netでもローカル環境など、コミット前に動作確認ができると嬉しい！
-
git rebaseやgit resetをかけてもエラーが出なくなったら嬉しい！
と思います！
ちなみに、git rebaseやgit resetをかけたことによるエラーは、今のところGitHub連携の解除→再連携で解消できています。
あとがき
自分がGitHub連携後にやっている環境構築などをまとめたら、思っていたより長くなってしまいました。
MovableType.netのGitHub連携を使用して開発をされていて、より良いノウハウをお持ちの方はぜひコメント欄などでぜひお裾分けいただけると嬉しいです！
この記事はMovable Type Advent Calender 2024の21日目の記事です。
本当はMovableType.netのかんたんデザイン編集をやり込んでみた上でのノウハウ記事を書こうと思っていたのですが、忘れぬうちに環境構築のことをメモしていたら、いつの間にかメモと呼べる量を超えてしまいました🤔
かんたんデザイン編集に関する話は、また別記事で近いうちに書きたいと思います！
Discussion