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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

解決済

Node.jsとexpressを駆使してページ遷移と画像表示を両立したい。miyabi-sunさんにもう一度お聞きしたいです。

mariko68311
mariko68311

総合スコア10

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1回答

0評価

0クリップ

516閲覧

投稿2021/12/29 15:58

夜遅くに失礼します。時間が経ってしまったのですが、前回の質問を参考にし、プログラムを書き換えて実行できないかためしてみようと思ったものの、上手く動くどころかmiyabi-sunさんに教えてもらったexpressを活用したやり方をやってみようとするとそもそも起動しなくなるという状況になってしまい、泣く泣く前回つかっていたhttpなどを使って起動を試みてみたものの、ただ文字化けた文字が表示されるだけで何も読み込めない、という状況になってしまいました。今のコードはこんな感じになっています。

const http = require('http'); const fs = require('fs'); const url = require('url'); const port = 3000; const server = http.createServer(RouteSetting); server.listen(port, () => { console.log(`Server listening on ${port}`); }); //const express = require("express"); //const app = express(); //app.use(express.static(`${__dirname}/public`)); //app.listen(3000); function getType(_url) { var types = { '.html': 'text/html', '.css': 'text/css', '.js': 'text/javascript', '.png': 'image/png', ".jpg": "image/jpeg" } for (var key in types) { if (_url.parse(key)) { return types[key]; } } return 'text/plain'; } function RouteSetting(req, res) { const url_parts = url.parse(req.url); const path = url_parts.pathname === '/' ? `${__dirname}/index_gest.html` : `${__dirname}/${url_parts.pathname}`; if (fs.existsSync(path)) { fs.readFile(path, (err, file) => { if (err) { // errになるということはパーミッション等の問題で読み取れない重篤なエラーになっている console.error(err); res.writeHead(500, {'Content-Type': getType(url)}); res.end('ファイルを読み込む事ができませんでした'); return; } res.writeHead(200, {'Content-Type': getType(url)}); res.end(file); }); return; } // 最後まで適したページがなければ404を返して終わる res.writeHead(404, {'Content-Type': 'text/plain'}); res.end('お探しのページは見つかりません。'); }

文字化けのページはこうなっています。
イメージ説明
そもそも元のプログラムだとfsをconstで指定していたり(追加すればいいだけなのかもしれないと勝手に思っています)、クソだと言っていたhttpでcreateServer(RouteSetting)と書いていたからRouteSettingは反応していたと思うのでexpressを利用した場合でのpublicにhtmlやcssを入れるときプログラムを使おうとしてみると当然反応しないわけで修正しようにも何も分からない状態のまんまなため困り果ててしまっています。ちなみにvscode studio codeのターミナルから今回のjsファイルをnode ~~~と打って起動しようと
しているのですがこれも何か関係があったりするのでしょうか?
前回の質問を何度読んでも打開策が見つからず、もう一度お話をお聞きしたくて書きました。ご迷惑をおかけしますが、よろしくお願いいたします。何か掲示してほしいというものがあったら教えてください。教えてもらう立場になるからには情報源が足りなくて答えられないということになってしまうと申し訳ないので、、、

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

hoshi-takanori

2021/12/29 17:58

HTML の内容も貼ってもらえませんか? 「画像を押した際に他のページへ遷移」って、普通に静的な HTML だけで実現できると思いますが…。
mariko68311

2021/12/30 05:48

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/style_gest.css"> <title>タイトル</title> </head> <body> <!--タイトルロゴ--> <img src="./images/20211101_055808595_iOS.png" class="title" width=1000px height=200px alt="AlgoMatch"> <!--ゲームスタートボタン--> <form id="game" action="./pieceprogramsettings/pieceprogramsettings_if/pieceprogramseetfings1.html"> <div class="start"> <input type="image" src="./images/GameStart1.jpg" width=500px height=100px alt="ゲームスタート"> </div> </form> <!--ログインボタン--> <form id="rog" action="./login/login.html"> <div class="login"> <input type="image" src="./images/Login.jpg" width=210px height=80px alt="ログイン"> </div> </form> </body> </html> こんな感じになってます、確かにその通りなのですがnode.jsのサーバー上だと遷移ができても画像が表示できないのですよね、、、

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。