【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる

※ 当ページには【広告/PR】を含む場合があります。

2022/03/06

前の回ではSvelteアプリの外部Sassファイルをどう扱うのかを簡単に解説していました。

【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる

SvelteでHTML&CSSアプリのSassミックスインをどう扱えば良いかをTyped.cssを使って解説します。

他方、Typed.cssの回でやったように、scssファイルを直接的に読み込むようなケースの他に、npmインストールしてからnode_modules以下のライブラリとして利用するタイプのプロジェクトがあります。

今回はnpmパッケージインストールありの場合でSassスタイルファイルをSvelteで利用する方法を紹介します。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

NES.css(Node版)のインストール作業

なんだか訳アリのようで

本家・NES.css

のnpmインストールは何年も更新が途絶えております。

この本家をモダンなNode.js v12以上にパッケージインストールすると、どうやらランタイムか何かのライブラリが古いと怒られてしまい、インストールがコケてしまいます。

開発者内部で何は起こったのか知る由もないのですが、代わりに

こちらの@16bitsという代替パッケージ

か

node.v14向けのもの

を使うと上手くいくようです。

開く/閉じる

            $ yarn add @16bits/nes.css -S
#OR
$ yarn add nes.css.14x -S

Rollup側の調整

SvelteアプリでNode版のNES.cssを使うのは少々骨が折れるかも知れません。

常にネットに接続された環境で使う場合には、Node版に拘る必要もなく、CDNでNES.cssを読み込めばそれで済む話なのですが...。

このブログでは、Svelteアプリがオフラインである場合でも変わらずに動作するようにRollupの設定を調整します。

おそらく既に以前のブログでもインストールしましたが、Rollupプラグインの

svelte-preprocess

をインストールします。

開く/閉じる

            $ yarn add svelte-preprocess -D

このSvelte用のプリプロセッサから、

node_modules

内にも読み込むべきリソースファイルがあることをコンパイラに知らせることができるようになります。

次に

rollup.config.js

に次のような内容に編集します。 file

開く/閉じる

            import sveltePreprocess from 'svelte-preprocess';

//...
svelte({
    //...
    preprocess: sveltePreprocess({
        postcss: true,
        scss: { includePaths: ['src', 'node_modules'] },
    })
}),
//...

更に次のステップとして、node_modules内のスタイルを読み込めるように

App.svelte

のsytleタグに読み込ませます。

開く/閉じる

            //...
<style lang="scss" global>
    @import '../node_modules/...[cssファイルのパス].../hoge.min';
    @import '../node_modules/...[scssファイルのパス].../piyo.scss';
</style>
//...

ここで少し間際らしいルールがあり、App.svelteから見た相対パスなので

../node_modules/・・・

という書き出しになります。

また、インポート先がCSSファイルなら

.css

の拡張子は省きます。(上の例でいうとhoge.min.cssの.cssが不要)

一方で、SCSSファイルを読み込むなら

.scss

の拡張子は省略しません。

ちょっと分かりにくいルールですが、これでSvelteアプリがnode_modules内のスタイルを読み込めるようになり、バンドルしてくれるようになります。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

Svelteで独自フォントを使う

NES.cssは8bitレトロ感のあるフォントまではサポートしていないので、それっぽいフォントを頂いてきて利用する必要があります。

公式では、

「Nu もち」

「美咲フォント」

の２つのサイトが紹介されています。

どちらもフリーで利用ライセンスも厳しくはないのですが、「Nu もち」はダウンロードの際にユーザー登録する手間があります。

ここでは、「美咲フォント」を利用し、Svelteアプリに埋め込んでみることにします。

@font-faceによるユーザー独自フォントの設定

グーグルフォントなどを利用する際に良く見かけるテクニックですが、ブラウザに対応していないフォントタイプを独自にcssファイルに埋め込んで利用する際には

「@font-face」

を実装することになります。

@font-faceの使い方の概要は以下のサイトで解説されている方などが分かりやすいと思います。

参照｜CSSの@font-faceでGoogle Fontsのwebフォントを利用する方法

Svelteでも外部フォントを使う際にも、基本的には@font-faceを定義するのですが、フォントファイルのプロジェクトの置き場所に注意します。

まずは「美咲フォント」のサイトから、TrueType形式のフォントを頂いて参ります。

ダウンロードしたzipフォルダを解凍すると、

misaki_gothic.ttf

、

misaki_gothic_2nd.ttf

、

misaki_mincho.ttf

の3つのttfファイルが同梱されているので、Svelteアプリで利用したいフォントを

public

フォルダの中へ移動させます。

フォントをpublicフォルダに移動した後のSvelteプロジェクトはおおよそ以下のように配置されているとOKです。

開く/閉じる

            $ tree -I node_modules
.
├── public
│   ├── index.html
│   ├── misaki_gothic.ttf
│   ├── misaki_gothic_2nd.ttf
│   └── misaki_mincho.ttf
├── rollup.config.js
├── src
│   ├── App.svelte
│   ├── main.js
│   └── styles
│       └── global.scss
└── package.json

なお、フォントファイルはサイズ的に重い傾向にあるので、あれもこれもと欲張らずに利用したいフォントだけに絞ってからpublicで使うようにしたほうが良いでしょう。

コードから@font-faceを呼び出す

独自に定義した

@font-face

を呼び出すための方法として、

こちらのサイト

でも議論されていますが、

「.svelteファイルのstyleタグから呼び出す方法」

と

「.css/.scssファイルでインポートする方法」

の2通りがあります。

ここでは、後者のCSSファイル側から定義する方法を採用します。

global.scss

の冒頭に、以下のように@font-faceを定義しましょう。

開く/閉じる

            @font-face {
    font-family: 'Misaki_Gothic';
    font-style: normal;
    font-weight: 500;
    src: url('/misaki_gothic.ttf') format('truetype');
}
//...以下略

これで先程

public

内に入れた

misaki_gothic.ttf

フォントが、

Misaki_Gothic

という名前で独自のフォントファミリー名として引用できるようになりました。

重要なポイントとして、Svelteのリソースファイルは

public

フォルダをルートフォルダとして認識しているため、css側から

url(...)

でローカルのアセットファイルを読み込む際には、

/

から始まるパスで

public

フォルダのファイルの所在を記述する必要がある点です。

とりあえずこれで一通りNES.cssがSvelteアプリとして動くようになったと思います。

これでレトロ感あるHTML要素が簡単に生成することが出来るようになりました。

なお、一部アイコン画像に

を含むようですが(このサイトでは該当のデサインのアイコンは除外)、任天堂の著作権ガイドラインの定める範囲内で利用されるようにしてください。

参考｜任天堂の著作物利用ガイドラインを要素分解して見えた3つの疑問

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

まとめ

今回は、npmパッケージで提供されているcssスタイルのプロジェクトをSvelteでどのようにビルド出来るようにするかの手順を解説してみました。

インターネットに接続されている状態でWEBページを提供するのなら、必ずしもnpmパッケージインストールする必要はなく、既にビルドされて公開されているCDNライブラリをHTMLファイルに読み込めばそれで済むとは思います。

Svelteアプリを実行ファイル化する際には今回のテクニックがお役に立つと思います。

参考サイト

How to import css in node_modules to svelte

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方