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

Pocket

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を作成してから、ライブプレビューを再起動する」になります。それでは。

Pocket