BETA

【Sinatra】静的ファイルを表示する

投稿日:2019-09-16
最終更新:2019-09-17

SinatraでHTMLやCSSファイルの反映を行う方法を紹介します!

ちょっとしたミスでかなりエラー解決に時間がかかってしまった。。。
静的ファイルの反映方法と、エラーの内容を紹介(次回)します。

反映方法

反映方法は簡単です。
Sinatraでは、アプリのフォルダ配下に直接public フォルダを作成し、その中にHTMLファイルやCSSファイルを作成すれば自動でそれらが読み取られ、表示されます。

アプリケーションファイルから作成しましょう。

./posts.rb

require 'sinatra'  
require 'sinatra/reloader'  

get '/' do  

'Hi!'  
end  

コマプロでアプリケーションのディレクトリまで移動したらruby posts.rb コマンドでアプリを起動しましょう。
http://localhost:4567
を開くとHi!と表示されている画面が表示されています。

静的ファイルの設置

次に、静的ファイルの設置を行います。

アプリケーションディレクトリ直下にpublicフォルダ を作成します。
publicフォルダ 配下にtest.html ファイルを作成してみましょう。

./public/test.html

<html>  
    <head>  
        <meta charset="UTF-8">  
        <base href="/">  
        <title>sinatra1_study</title>  
        <link rel="stylesheet" href="/css/test.css" type="text/css" >  
    </head>  

    <body>  
        <h1>testrest</h1>  
    </body>  
</html>  

test.htmlファイル が作成できたら、もう一度アプリを起動して、
http://localhost:9292/test.html
にアクセスしてみてください。
すると、test.html の内容用が表示されています。
これは、Sinatraの機能で、public はURLに含まれないようです。
<link rel="stylesheet" href="/css/test.css" type="text/css" > でCSSファイルの位置を示してこのHTMLファイルから使用できるようにしています。

スタイルシートの設置

CSSの設置も行ってみましょう。

CSSファイルもpublicフォルダ 配下に設置しますが、今回はCSS用のフォルダを作成し、その中にCSSファイルを作成し、HTMLファイルから呼び出してみましょう!

public/cssフォルダを作成し、そのフォルダ内にtest.css を作成します。

public/css/test.css

h1{  
  color: red;  
  font-size:50px;  
}  

アプリを起動し、http://localhost:9292/test.html にアクセスすると、CSSが反映されたHTMLファイルが表示されているかと思います。

アプリケーションファイルを分けた場合

アプリの開発が進むにつれて、機能ごとにアプリケーションファイルを分ける方もいると思います。

各アプリケーションファイル用のフォルダを作成した場合も考えてみましょう。

./app/controllers/home.rb

class Home < Sinatra::Base  

        register Sinatra::Reloader  
        set :root, File.join(File.dirname(__FILE__), '..')  
        set :views, Proc.new { File.join(root, "views") }   

            get '/' do  
                erb :index  
            end  
end  

次はerbファイルを作成してみます。

./app/views/index.erb

<html>  
    <head>  
        <meta charset="UTF-8">  
        <base href="/">  
        <title>sinatra1_study</title>  
        <link rel="stylesheet" href="/css/test.css" type="text/css" >  
    </head>  

    <body>  
        <h1>testrest</h1>  
    </body>  
</html>  

このindex.erb にCSSを適応させます。
機能ごとのアプリケーションファイルを分けた際の注意点はこちらをご覧ください
https://sunnydayservice.qrunch.io/entries/eLzQT2Uhox2yBSvp

config.ru 等を作成し、bundle exec rackup config.ru を流します。

次はhttp://localhost:9292/ からアプリを開きます。
恐らくCSSが反映されていないのではないでしょうか。

そういった時には、先ほど作成したpublicフォルダを、appフォルダ配下に移動させます。
./app/public となります。

すると、CSSが反映されているかと思います!

まとめ

シンプルに考えると簡単すぎてショックです。。
次の記事でエラー内容をまとめます!
↓↓
https://sunnydayservice.qrunch.io/entries/BBBCgiO31GOD3DaW
この記事ですー!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!