カテゴリー
開発環境 ホームページ製作

webpack5のsassにおけるfontawesome

webpack5で、sassのfontawesomeを使うには、npmでダウンロードする。

npm install @fortawesome/fontawesome-svg-core

https://docs.fontawesome.com/apis/javascript

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStar } from '@fortawesome/free-solid-svg-icons';
import { faInstagram } from '@fortawesome/free-brands-svg-icons';


library.add(faStar, faInstagram)

const camera = icon({ prefix: 'fas', iconName: 'camera' })

使い方については、下記リンク先を参照にすること。

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

https://qiita.com/oreo3@github/items/08a350520a1f0eaf6e42

https://helog.jp/framework/bootstrap-sass-customize/

https://web.analogstd.com/tips/posts/css/how2use-font-awesome5.php

下記も参考になりそう

https://nocebo.jp/post-3298

カテゴリー
業務日報 開発環境 休む

2023.10.16-10.20の週報

2023.10.16
【午前】
シンセンテックスの商品送付、雑務作業。Jリーグチーム一覧の更新作業。

【午後】
シンセンテックスの商品送付作業。Jリーグチーム一覧の移転作業。

シンセンテックスの商品は、週末ボチボチの売れ行き。移転作業では、次のフェーズに入るための試乗での作業を行う。dockerは、php:8.2.7-apacheを入れていたが、今はphp:8.2.11-apacheだった。

2023.10.17
【午前】
シンセンテックスの商品送付、雑務作業。

【午後】
休む。

シンセンテックスの商品は、ボチボチの売れ行き。午後は大型バイクの試験を受けるため、休む。

2023.10.18
【午前】
シンセンテックスの商品送付、雑務作業。

【午後】
Jリーグチーム一覧の移転作業。

シンセンテックスの商品は、結構売れた。よかった。移転作業では、新しく環境を作り直し、今後の作業を練る。

  • dockerのphp:apacheを新しく入れる
  • webpackを新しくする
  • font awesomeをダウンロードする
  • ファイルを移す
docker container run --name php8102 -d -p 8102:80 -v D:\新しいフォルダー\j3-2023102\dist:/var/www/html php:8.2.11-apache

php8102は、docker上での名前。8102:80は、ポート番号。php:8.2.11-apacheは調べて最新のものを入れること。

2023.10.19
【午前】
シンセンテックスの商品送付、雑務作業。

【午後】
Jリーグチーム一覧の移転作業。

シンセンテックスの商品は、そこそこ売れた。よかった。移転作業の今後の作業を練る。

  • 各ページに目次をつける。
  • 地域リーグのメニュを治す。
  • 地域リーグのクリックを変更。
  • クリックアクションを治す。
  • 各項目で、tiktok,note,line,アップルミュージック,wikiをつける。
  • J123JFLのクリック項目を入れる。
  • 全社に優勝、準優勝、三位、四位を加える。

優先順位とDBのあり方を考えて、明日からコーディング作業。

2023.10.20
【午前】
休む。

【午後】
Jリーグチーム一覧の移転作業。

下記の項目ができた。プロトタイプ第11弾の完成。地域リーグのメニュは、index.jsの一部を消してからwebpackをし、できたjsファイルを改名することで解決。

  • 各ページに目次をつける。
  • 地域リーグのメニュを治す。

下記の項目を一つ一つ取り組む予定。

  • 地域リーグのクリックを変更。
  • クリックアクションを治す。
  • 各項目で、tiktok,note,line,アップルミュージック,wikiをつける。
  • J123JFLにクリック項目を入れる。
  • 全社に優勝、準優勝、三位、四位を加える。

全社に優勝を加えるのは、別DBを作る必要がある。

カテゴリー
ホームページ製作

JQueryなどで気になったサイト

JQuery、webpack5、npmで気になったサイト

【bootstrap5】
https://bootstrap-guide.com/layout/grid

【JavaScriptのswitch】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

【JavaScriptのthis】
https://www.webopixel.net/javascript/901.html

【JQueryのeachメソッド】
https://itsakura.com/jquery-each

【webpack5】
https://www.webdesignleaves.com/pr/css/sass_webpack.html

【node,npmでのバージョン確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800

カテゴリー
ホームページ製作

Jリーグチーム一覧の更新方法

Jリーグチーム一覧サイトの更新方法の備忘録。
http://toushin.konjiki.jp/

  • 202011productファイル内の更新するhtmlの設定値team_countを変更する。ただし、22チーム以内であること。
  • 202011productファイル→distファイル内のteam.jsonにチーム情報を書き込む。昇格、降格するチームは必ず変更。
  • 202011productファイル→srcファイル内のstyle.scssにチームのカラー情報を書き込む。その際、pictbearのカラーパレットをダブルクリックし、色の設定のカスタマイズから白色選ぶ。
  • ターミナルより202011productファイルを選び、npx webpackでビルドする。その際、多少待つ。
  • distファイル内のhtml,team.json,main.js,sub.jsをアップロードする。

忘れてるからこれを見て思い出すこと。

カテゴリー
開発環境 ホームページ製作

style.cssとインラインスタイルシートはどちらが速いか

Webpack5で、style.cssとインラインスタイルシートでは、どちらが速いか、高得点になるかを試してみた。条件は下記。

  • ホームページのソースの量は、ほとんどなし。
  • fontawesomeを使う。
  • サーバーは忍者ツールズの無料ホームページ。
  • 審査はグーグルのPageSpeed Insights。

まずは、style.css。style.cssとmain.jsに分割される。

結果は、62点。

次にインラインスタイルシート。webpack5でmain.jsにcssも全てバンドルされる。

結果は、50点。

忍者ツールズの無料ホームページは、広告用のjsファイルがついてくるので、それが遅延の原因になっている可能性があるな。だから、忍者ツールズの無料ホームページでは、jsファイルとcssファイルは別にしたほうがいいのだろう。

【後日談】
http://toushin.konjiki.jp/ というサイトで試してみたら、jsファイルとcssファイルを分割したほうが遅かった。