Ruby on Rails - フレームワーク CSS クラスレスまたはクラスライトのフロントエンド高速化

新しい Rails アプリケーションを開始する

• rails コマンドが実行終了時の実行時間を表示するために使用されるまでの時間。以下の例では、47 秒かかりました。

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

VSCode または好みのエディターでプロジェクトを開きます

$ cd classless-css && code .

Rails 標準マスター レイアウト app/views/layouts/application.html.erb について理解する。

もっと見る…

• 設定優先規則 (CoC) により、Rails は application.html.erb をマスター レイアウトとして使用してすべてのページをレンダリングします。
• Rails 8.0.0 の元のファイルには、以下にコピーしたファイルと同じまたは類似したコンテンツが含まれている必要があります。

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

• 内の上部… これらには、ページがレンダリングされ、正しく機能するための重要な構造要素が含まれています。 head タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関係、CSRF や CSP の保護などのセキュリティ設定を構成するのに役立つ重要なメタデータとリソースを含めるために使用されます。
• ページのメインコンテンツは 内にレンダリングされます。 、ERB タグ を介して。このタグは、Rails によって動的にレンダリングされるビューのコンテンツを含める統合ポイントとして機能します。

コントローラー ページとアクション html_test_1、html_test_2、html_test_3、および html_test_4 を使用してテスト ページを生成します。

もっと見る…

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• 上記のコントローラーとアクションの作成時と同様に、ルートも追加され、リンクから作成されたアクションにアクセスできるようになります。
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

VSCode で config/routes.rb ファイルを開きます

• ファイルの最後に以下の行を追加して、ページ ルートを以前に作成したコントローラー ページとアクション html_test_1 に誘導します。したがって、Web サイトまたはシステムにアクセスするときに表示される最初のページは、コントローラー ページの html_test_1 ページになります。それ以外の場合は、デフォルトの Rails ページが表示されます。

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• コントローラーの作成時に --skip-routes パラメーターを渡していた場合は、作成されたアクションへのルートの追加を無視することもできました。完全なコマンドは、rails gcontrollerpages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes になります。

Rails ルートの表示

もっと見る…

ターミナルを使用すると、コントローラー ページなどからコントローラー (-c を使用) を指定してルートを表示できます

$ cd classless-css && code .

または、
ですべてのルートを表示できます

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

アドレス http://127.0.0.1:3000/rails/info/routes を使用してブラウザ経由でルートにアクセスすることもできます。 bin/dev で開発サーバーを起動するか、プロジェクトのルート ディレクトリから Rails Server で標準の Rails サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルの変更を「リッスン」して、ユーザーが使用できるようにするために必要な処理を実行します。これらのファイルに変更を加えてブラウザで即座に表示するには、Rails Livre Reload などの gem をインストールする必要があります。

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。

html_test_1 アクションのページ コンテンツを挿入します。

もっと見る…

リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、以下のようにメイン タグからすべてのコンテンツをコピーします

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Rails サーバーを起動すると、醜い純粋な HTML が表示されますか?

もっと見る…

• Rails 開発サーバーを bin/dev で起動するか、標準サーバーを Rails サーバーで起動し、ブラウザを 127.0.0.1:3000 で開きます。

root "pages#html_test_1"

• ページを開くと、前に作成した html_test_1、html_test_2、html_test_3、html_test_4 ページに追加した 4 つのリンクが上部に表示されます。
• これまでのところ、たくさんの作業があります。それぞれを開くと、HTML がまだ CSS でスタイル設定されていないことがわかります。これは次に行います。

app/views/layouts/application.html.erb ページを再度開き、CDN 経由でクラスレス CSS スタイルを含めます

もっと見る…

• 以下のコンテンツの後

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• の前に、次の内容を貼り付けます。これらのスタイルはすべて必要なわけではありません。さまざまなオプションをテストできるように挿入されています。

$ cd classless-css && code .

• Normalize CSS と Pico CSS を除き、ほとんどのスタイルはコメントアウトされています
• ファイルを保存してページを更新するか、サーバーを再起動してください

はい、スタイル付きの HTML ですか?

上記のスタイルシートを保存した後、

ダークモード

一部のスタイルにはダーク モードのオプションがあります。確認するには、個人設定オプションでコンピューターのテーマを変更してください

次のステップ

• 好みに応じてスタイルを整理します;
• フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。
• Rails Live Reload を使用して、ブラウザ内のプロジェクトに加えられた変更を動的に更新します。
• CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。
• Tailwind を使用してクラスレス CSS フレームワークの機能を複製します。

参考文献

• テスト

以上がRuby on Rails - フレームワーク CSS クラスレスまたはクラスライトのフロントエンド高速化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。