質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • Node.js

    1801questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

node.jsで画像やcssの読み込み処理を簡略化したい

解決済

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 5,286

sanset

score 159

node.js+sokect.io+expressでお絵かき共有機能を作っております。

node.jsでjsファイルを起動させて、指定のhtmlファイルを動かしているのですが、
その際に画像やcssファイルは、apacheが起動していないからindex.htmlから読み込むことができません。
node.を使用する際は、読み込む必要があるファイルは必ず予め記述しておく必要がありますか?簡略化することは出来ますでしょうか?
もしくはapacheのように記述できる方法などありますでしょうか?(これが出来るのが一番望ましいです)
使うcssと画像ファイルの数だけ、以下のように長いコードになってしまいますので、省略できる方法を探しています。

var express = require('express')
  , http = require('http')
  , app = express()
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

//これ以下の記述をシンプルにしたい

app.get('/css/reset.css', function (req, res) {
    res.sendfile(__dirname + '/css/reset.css');
});

app.get('/css/bootstrap.min.css', function (req, res) {
    res.sendfile(__dirname + '/css/bootstrap.min.css');
});

app.get('/css/common.css', function (req, res) {
    res.sendfile(__dirname + '/css/common.css');
});

app.get('/img/top/1.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/1.png');
});

app.get('/img/top/2.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/2.png');
});

app.get('/img/top/3.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/3.png');
});

app.get('/img/top/4.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/4.png');
});

app.get('/img/top/5.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/5.png');
});

app.get('/img/top/6.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/6.png');
});

app.get('/img/top/7.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/7.png');
});

app.get('/img/top/8.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/8.png');
});

app.get('/img/top/9.png', function (req, res) {
    res.sendfile(__dirname + '/img/top/9.png');
});
 

コードか、参考サイトでご教示いただければ理解しやすいです。
よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+5

static ミドルウェアが使えます。

var express = require('express')
  , http = require('http')
  , app = express()
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

app.use('/css', express.static('css'));
app.use('/img', express.static('img'));

Serving static files in Express

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/22 19:43

    ご連絡遅れて申し訳ありません。
    素早く分かりやすい解答をありがとうございます。無事動作確認できました。
    また何かございましたらよろしくお願い致します。

    キャンセル

+2

app.use(express.static('public')); と記述することで、 public ディレクトリ以下のファイルやディレクトリをそのまま配信することができます。

たとえば public/css/reset.css を配置すると http://yourdomain.com/css/reset.css からアクセスできます。(URL には public を含まないことに注意してください)

この設定は複数のディレクトリについて記述できます:

app.use(express.static('public'));
app.use(express.static('files'));

また URL のパスのプレフィクスを指定できます:

app.use('/static', express.static('public'));
// public/css/reset.css にアクセスするには
// http://yourdomain.com/static/css/reset.css

詳しくは Express のドキュメントを参照してください: Serving static files in Express

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/22 19:42 編集

    ご連絡遅れて申し訳ありません。
    素早く分かりやすい解答をありがとうございます。
    お二人に解答を頂きまして、どちらも大変参考にさせていただけたのですが、
    ベストアンサーは1名にしかつけれないため、先に解答頂いた方に付けさせていただきました、申し訳ございません。
    また何かございましたらよろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    express4.2だとmiddlewareが使えません。

    express4でmiddlewareのconnectが使えません。githubにファイルはあるのですが導入の仕方がわかりません。誰かお詳しい方いらっしゃいましたら教えてくださいm

  • 解決済

    expressでREST APIを作りたい

    node.js+express4でREST APIを作ろうとしています。 初歩的なのですが、putやdeleteはどう扱えばいいのでしょうか? 実装例で教えてくださる方いら

  • 解決済

    submitボタンの幅を狭くしたい

    実現したいこと Rails4 と twitter-bootstrap-rails を用いて 登録フォームを作成しています。 テキストボックスの右端に合うように、 送信(su

  • 解決済

    node.jsのmodule.exportsで循環参照

    あるwebアプリを作っててそこではexpressとsocketioを使用しています。 expressのインスタンスの処理等とルーティングを分けようと思って app.js

  • 解決済

    Node.jsとSocket.IOを使った非同期通信の接続失敗の原因について

    Node.js+Socket.IOを使った非同期通信で、特定のブラウザでWebSocketの接続が正常に行われません。 この症状の原因がブラウザにあるのか、プログラム側にあるのか

  • 解決済

    Node.jsのソースコード整理について

    Node.jsバージョン:6.9.1 Socket.IOバージョン:1.5.1 Node.js初心者です。Socket.IOを使ってチャットアプリケーションを制作しています

  • 解決済

    bootstrapのfont awesomeが表示されない

    <!Doctype html> <head><link rel="stylesheet" type="text/css" href="https://maxcdn.

  • 解決済

    Node.jsでcssを読み込みたい

    Node.jsでSocket.IOを使用したチャットページをテスト的に開発しているのですが、チャットページ(html)が読み込んでいるはずのCSSファイルがNode.jsの環境下で

同じタグがついた質問を見る

  • Node.js

    1801questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。