Phoenix + NES.css(ファミコン風CSSフレームワーク) でPENAL!? 😱 (Elixir)

Last updated at 2021-02-07Posted at 2021-02-07

はじめに

Elixir楽しんでいますか
無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」という記事をみました
こんなの作りました(適用しました、くらいですかね)
- ただphx.newして、
- NES.cssに書いてある通りのことをやった感じです
2021/2/8(月)開催予定のautoracex #9というElixirのもくもく会の成果といたしますです

インストール

なにをはじめるにも最初の準備が肝心です
Phoenixを楽しむためにもまずは環境構築を進めましょう
以下のいずれかを参考にしてください
- 公式「Installation」
- 手前味噌な記事「Phoenixのdevcontainer (Elixir)」

プロジェクト作成

準備が整ったところで楽しんでいきましょう！

$ mix phx.new nes --live
$ cd nes
$ mix ecto.create

今回はデータベースは使いません
mix phx.new nes --no-ectoでプロジェクトを作るでもよいです
- この場合は、mix ecto.createはいらないです

NES.cssのインストール

https://github.com/nostalgic-css/NES.css
に従います

$ cd assets
$ npm install nes.css
$ cd ..

assets/package-lock.jsonとassets/package.jsonに変化があるでしょう

assets/css/app.scss

@import "./phoenix.css";
@import "../node_modules/nprogress/nprogress.css";
@import "../node_modules/nes.css/css/nes.css";

少しだけ書き換え

lib/nes_web/templates/layout/app.html.eexを書き換えます
- Press Start 2Pというフォントの読み込みを追加しました
- Phoenix Frameworkという画像を表示しているところを適当に書き換えました

lib/nes_web/templates/layout/root.html.leex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] || "Nes", suffix: " · Phoenix Framework" %>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">  <!-- add -->
    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </head>

...

        <a href="https://phoenixframework.org/" class="phx-logo">
          <!-- <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/> -->
          <span><i class="nes-jp-logo"></i></span>
          <span style="font-weight: bold; font-size: xx-large;">Phoenix</span>
          <span>Framework</span>
        </a>

Run

$ mix phx.server

私はこれでうまくいきました(macOS 10.15.7)
Visit: http://127.0.0.1:4000
もしうまくいかなかったら手動で以下を行ってあげるとよいとおもいます

$ cd assets
$ node node_modules/webpack/bin/webpack.js --mode development

Wrapping Up

PETALならぬPENAL¹
$\huge{PENAL}$
- https://ejje.weblio.jp/content/penal
  - 刑罰の、刑事上の、刑法の、刑罰の対象となる、苛酷な
Enjoy Elixir

ジョークです。冗談です。tailwindcssと併用して使えるとおもうので、PETALはPETALのままです。² ↩
と、断りをいれたところで、それはそれで本当かなあ？　とフロントエンドまわりは私が弱くて自信がなくなってきたので、それはそれで調べて記事にしてみようとおもいます。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up