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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

505閲覧

HTMLが文字化けする件

bessie

総合スコア13

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/19 16:45

発生している問題

HTMLで簡易的なwebサイトを開発してFirebaseのhostingで公開したところ、日本語のみ文字化けが起きてしまいます。ローカル環境では日本語も正常に表示されるのですが...。
改善方法を教えていただけたら幸いです。

環境

OS:windows10
開発環境:visual studio code
文字コード:UTF-8
ブラウザ:google chrome

該当のソースコード

【index.html】

<!DOCTYPE html> <html lang="ja"> <head> <mate http-equiv="content-type" charset="utf-8"/> <title>太郎のポートサイトフォリオ</title> <link rel="icon" href="favicon.ico"> <mate name="description" content="太郎のポートフォリオサイトです"></mate> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- header --> <header> <!-- ol:(o)rdered (l)ist ul: (u)nordered (l)ist li: (l)ist (i)tem --> <nav> <ul> <li class="current"> <a href="index.html"> HOME </a> </li> <li> <a href="about.html"> ABOUT </a> </li> </ul> </nav> </header>
<section> <img src="./img/taro.png" width="140" height="140" alt="太郎のアイコン" class="icon"> <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです</p> <div class="works"> <section> <img src="./img/work1.png" width="400" height="260" alt="勇者ゲーム"> <h1>勇者ゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="./img/work2.png" width="400" height="260" alt="宝探しゲーム"> <h1>宝探しゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="./img/work3.png" width="400" height="260" alt="神経衰弱"> <h1>神経衰弱</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。 楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> </div> </section> <footer> <ul> <li> <a href="mailto:taguchi@gmail.com" target="_blank"> <img src="./img/mail.png" width="20" height="20" alt="メール送信"> </a> </li> <li> <a href="http://dotinstall.com" target="_blank"> <img src="./img/blog.png" width="20" height="20" alt="ブログサイトへ"> </a> </li> <li> <a href="http://dotinstall.com" target="_blank"> <img src="./img/photos.png" width="20" height="20" alt="写真サイトへ"> </a> </li> </ul> </ul> <p>(c) Taro Yamada</p> </footer>
</body> </html>

【firebase.json】
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"/.*",
"
/node_modules/"
],
"headers": [ {
"source" : "/@(saga3|bbb_memo|pe_memo|smbmap)/
/*.html",
"headers" : [ {
"key" : "Content-Type",
"value" : "text/html; charset=utf=8"
} ]
} ]
}
}

試したこと

<mate>内のcharsetをutf-8に設定した。
・firebase.jsonを以下の通り(ソースコード参照)書き換えた。
・上を試した後、ブラウザのキャッシュを削除して再読み込みをした。

補足情報(FW/ツールのバージョンなど)

公開した問題のwebサイトURL→https://myportfolioproject-84b29.firebaseapp.com/

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

metaタグの綴り間違っていませんか?

投稿2019/04/20 00:07

javahack

総合スコア1088

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bessie

2019/04/20 00:27

ベストアンサーへのコメント通りにfirebase.jsonファイルを書き換えたところ解決しましたので、綴りには問題がなかったようです。 ご回答ありがとうございます。
KojiDoi

2019/04/20 03:41

この問題には影響していなくても、つづりは間違っています。
bessie

2019/04/20 06:55

javahackさん、KojiDoiさん、ご指摘ありがとうございます。 綴りミス確認しました。 "mate"ではなく"meta"なんですね。 失礼いたしました。
guest

0

文字エンコーディングの指定を

HTML

1<meta charset="utf-8">

のみに変更してはいかがでしょうか?

投稿2019/04/20 00:03

otamunote

総合スコア281

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bessie

2019/04/20 00:26

はじめはmate内はそのように書いていましたが、その状態で文字化けが起きたので書き換えたんですよね。 自分で試した方法にその部分を書き落としていました、申し訳ございません。 しかし既にベストアンサーへのコメント通り文字化けは改善しました。 ご回答ありがとうございます。
bessie

2019/04/20 00:34

P.S. otamunoteさんのご回答を見て気づいたのですが、テラテイルではコード専用のテキストがあるのですね。 今後は活用するようにします。
guest

0

ベストアンサー

"text/html; charset=utf=8"

この辺が怪しそうですね。

投稿2019/04/19 21:06

KojiDoi

総合スコア13669

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bessie

2019/04/20 00:02

ご回答ありがとうございます。おっしゃる通りfirebase.jsonのheaders内の要素を書き換えたところ、文字化けが改善しました。書き換えたfirebase.jsonは以下の通りです。 { "hosting": { "public": "public", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "headers": [ { "source" : "**/*.html",  ←対象を全ファイル全フォルダに変更 "headers" : [ {       "key" : "Content-Type", "value" : "*"      ←valueの要素をワイルドカードに変更 } ] } ] } } 理由につきましては個人で勉強をして考えます。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問