Bracketsで「ライブプレビューを起動するには、HTMLファイルを開くか、index.htmlファイルがプロジェクトに含まれていることを確認してください」のエラーが表示された時の対応方法

Bracketで「ライブプレビューを起動するには、HTMLファイルを開くか、index.htmlファイルがプロジェクトに含まれていることを確認してください」というエラーメッセージが表示された時には、以下のいずれかの方法でライブプレビューを再起動してください。

  • サイドバーでhtmlファイルを選択&エディタ画面にカーソルが点滅している状態にしてから、ライブプレビューを再起動する → 方法1
  • 作業フォルダにindex.htmlを作成してから、ライブプレビューを再起動する → 方法2
方法1

方法2

『あれっ?今までライブプレビューが起動できたのに、急にできなくなってしまった。どうして???』という時は、おそらくあなたはcssファイルを選択した状態でライブプレビューを起動しているはずです。

……
以前の私です(~_~メ)……

と、こんなことにならないように、お伝えしておきますね。

まずはエラーメッセージを確認

エラーメッセージは以下のとおり表示されます。ここでもう一度確認しておきましょう。

「ライブプレビューのエラーが発生しました。ライブプレビューを起動するには、HTMLファイルを開くか、index.htmlファイルがプロジェクトに含まれていることを確認してください」

今はわからなくても、このページを読み終えた頃にはわかりますので。

ということで次に、エラー対応方法に移ります。2つの方法がありますので、いずれかを実施して下さい。

htmlファイルを選択してから、ライブプレビュー再起動

まず1つ目の対応方法から……おそらくあなたは「Bracketsエディタ画面でcssファイル上にカーソルが点滅している状態」で、ライブプレビューを起動したはずです。では、実際にやってみましょう。



なので、サイドバーでhtmlファイルを選択し、htmlファイルをエディタ画面に表示して、htmlファイルにカーソルが点滅している状態にしてから、ライブプレビューを再起動します。

サイドバーからhtmlファイルを選択します。

エディタ画面にhtmlファイルが表示され、カーソルが点滅していますね。



ライブプレビューが起動できましたね。

つまりエラーメッセージの

ライブプレビューを起動するには、HTMLファイルを開くか、

という部分は、「htmlファイルをエディタ画面に表示して、htmlファイルにカーソルが点滅している状態で、ライブプレビューを起動してね

という意味なのです。

では、次に2つ目の対応方法にいきますね。

index.htmlを作成してから、ライブプレビューを再起動

2つ目の対応法は、index.htmlを作成して、ライブプレビューを再起動する方法です。

Bracketsエディタ画面でcssファイルにカーソルが点滅している状態でも、作業フォルダにindex.htmlが存在すれば、ライブプレビューを起動した時にエラーにはなりません。


ということでindex.htmlを作成しましょう。


index.htmlファイルができました。

ここでhtmlを記述しましょう。

記述できたら、保存して…

ここで、index.htmlをエディタ画面から消しましょう。

では、cssファイルでカーソルが点滅した状態にして、ライブプレビューを起動します。


エラーが発生しないで、ライブプレビューが起動できていますね。表示されたのはindex.htmlです。

つまりエラーメッセージの

index.htmlファイルがプロジェクトに含まれていることを確認してください

という部分は、「作業(=プロジェクト)フォルダに、index.htmlファイルが存在する状態で、ライブプレビューを起動してね

という意味なのです。

でもindex.htmlが存在しないなんて、何故おきるのでしょう……。実は、入門書などの書籍でindex.htmlがない状態で、実習を進めるパターンがあるからです。

……
コレ私なんですけどネ(~_~メ)……

まとめ

どうですか? 「ライブプレビューを起動するには、HTMLファイルを開くか、index.htmlファイルがプロジェクトに含まれていることを確認してください」のエラーメッセージが表示された時、解決できましたか?

対応方法は、「サイドバーから他のhtmlファイルを選択してから、再度ライブプレビューを再起動する」か「index.htmlを作成してから、ライブプレビューを再起動する」になります。それでは。

コメント

  1. あい より:

    そもそもindex.htmlを開いてるのに起動しない場合はどうしたらいいんでしょう?

    • 管理人 より:

      あい様
      コメントありがとうございます。

      ご質問の件ですが、もう少し状況を詳しく教えていただけますでしょうか? 少し時間がかかるかもしれませんが、ご協力させていただきたいと思っています。

      まず、エラーメッセージですが、以下のいずれになっていますでしょうか? 番号で構いませんので教えていただけますか?

      1. ライブプレビューのエラーが発生しました。
      2. ブラウザーの起動時にエラーが発生しました。
      3. 上記以外

      まずは、ここからよろしくお願いいたします。

  2. C.Osada より:

    「ライブプレビュー起動するには・・・・・」
    のメッセージがでます貴方の懇切丁寧な解説を実行してみましたが、うまくいきません
    一度実行したあと、ライブプレビューボタンは左半分がだいだい色になったまま無反応になります、ボタンの上にまうすをおくと「ライブプレビュー:接続中…」とでます
    Microsoft Edge上では全く問題ないindex.htmlのファイルです
    解決方法がありましたら教えてください、よろしくお願いいたします。

    • 管理人 より:

      C.Osadaさま

      返事がおそくなり、大変申し訳ありません。またコメントありがとうございます。

      管理人は、(Windows10を所有しておらず)Microsoft Edgeをインストールできないで、検証はできないのですが、ご協力させていただきます。

      ちなみに、管理人はWindows8.1でInternet Exploerですが、その場合Bracketsでライブプレビューはできません。

      しかしWindows7であれば可能です。もしかしたら、この方法でできるかも知れませんのでやってみてください→BracketsライブプレビューでInternet Explolerブラウザを使うための簡単設定方法

      あと、問題解決の糸口になると思うので、質問を2つさせてください。

      1つ目の質問は、C.OsadaさまのパソコンにはGoogle Chromeはインストールされていますか?

      2つ目の質問は、「ライブプレビュー:接続中…」のあと、なにかメッセージなど表示されたり、なにか画面が変わったり、なにか変化がおきますか? それともそのまま何の変化もおきませんか?

      よろしくお願いいたします(いつもブログ記事を読んでいただいてありがとうございます。)

  3. bambi より:

    「実は、入門書などの書籍でindex.htmlがない状態で、実習を進めるパターン…」

    まさにコレでした!!

    プログラミング初心者でわからなかったので、すごく丁寧に書いてくれていたのでわかりやすくて助かりました!!

    • 管理人 より:

      bambiさま

      コメントありがとうございます。管理人です。

      >まさにコレでした!!

      ありがとうございます。そう言っていただけると、うれしいです(^^♪

      やっぱり『あれっ?』って思いますよね(@_@;)

      お役に立てたみたいで、よかったです(^^)/

  4. ちょこ より:

    HTMLのプレビューは出来るのですが、CSSが反映されないのはなぜですか?

    • 管理人 より:

      ちょこ さま

      返事がおそくなり、大変申し訳ありません。管理人です。

      えっと、、、「CSSが反映されない」とのことですが、本記事でご紹介している2つの方法をやっても「CSSが反映されない」ということでしょうか?

      よろしくお願いいたしますm(__)m

タイトルとURLをコピーしました