ChromebookでHTMLファイルを開く・作成してクラスに配る方法

要約

ChromebookではHTMLファイルを「ファイル」アプリから開くか、Chromeで Ctrl + O を押して開けます。ただ、学校のChromebookは学校の設定でローカルのファイルを開けないことがあります。ChatGPTやGeminiで作ったHTMLをクラスのみんなに見せるなら、コードをコピーしてこのページのボックスに貼ればURLになり、どのChromebookやiPadでもブラウザから開けます。

無料で登録してHTMLをアップロードする

カード登録なし・公開1ページ・月10,000ビューまで無料

目次

学校の Chromebook で、ChatGPT や Gemini に作ってもらった HTML のファイルやコード(自分で書いたものも含みます)を画面に出して確かめたり、少し直してからクラスのみんなに見せたりしたいことがあります。自分の Chromebook で「ファイル」アプリや Chrome から開こうとしても、学校の設定でダウンロードや端末の中のファイルを開くことが止められていて、うまく開けないこともあります。

このページでは、Chromebook で HTML ファイルを開く方法と開けないときの確かめ方、HTML を書き換えて直す方法を順に説明します。あわせて、クラスのみんなに見せる方法の違いや、AI のチャットに出たコードをそのまま URL にする 4 つの手順、クラス全員の Chromebook や iPad で開くときのやり方、あとから直しても同じ URL のままにする方法も紹介します。

Chromebook で HTML ファイルを開く手順

Chromebook に保存してある .html ファイルは、「ファイル」から探して開くか、ショートカットの Ctrl + O でブラウザ内でファイルを開けます。ダウンロードしたファイルは「ダウンロード」フォルダに入りますが、Chromebook の空き容量が少ないと削除されることがあるため、残しておきたい場合は Google ドライブなどのフォルダに保存しておくと安心です。

  1. 「ファイル」を開きます(キーボードの Shift + Alt + M でもファイルアプリを起動できます)。
  2. 左側でファイルの保存場所を選びます(ダウンロードしたファイルなら「ダウンロード」フォルダ、最近使ったファイルなら「最近使用したアイテム」、クラウドのファイルなら Google ドライブなどのフォルダ)。
  3. 開きたい .html ファイルを見つけて、ダブルクリックで開きます。

もし開こうとして「ファイル形式が不明です」と出たら、Google ドライブに保存してからブラウザで開いてみてください。なお、学校の Chromebook ではファイルによっては使えないことがあり、開けない場合の詳しい設定については管理者に問い合わせる必要があります。

学校の Chromebook で HTML ファイルが開けない・ダウンロードできないとき

GIGA 端末などの学校が管理する Chromebook では、学校や教育委員会の設定によって使えるファイルやアクセスできる URL(パソコンの中のファイルを表す file:// を含む)が制限されていることがあります。「ファイル」アプリでダブルクリックしても開けないときや、Chrome で Ctrl + O を押しても開けないとき、ChatGPT や Gemini から .html ファイルがダウンロードできないときは、まず以下のような原因と対処を確かめてみてください。

  • 保存した場所と空き容量を確かめる:「ファイル」アプリの左側で「ダウンロード」や「マイファイル」、Google ドライブなどを探します。なお、「ダウンロード」フォルダにあるファイルは、Chromebook の空き容量が少なくなると自動で削除されることがあります。
  • Chrome のショートカットや Google ドライブを試す:ダブルクリックで開けない場合や「ファイル形式が不明です」と出る場合は、Chrome を開いて Ctrl + O を押し「ブラウザ内でファイルを開く」から選ぶか、Google ドライブに保存してからブラウザで開けるか試してみてください。
  • ファイルではなく「コードから」URL にする:ファイルのダウンロードや file:// で開くことが学校の設定で止められている場合でも、ChatGPT などの画面から HTML コードをコピーしてこのページのボックスの「コードから」に貼り付ければ、ファイルを使わずにプレビューや公開用の URL(yourpage.convika.page など)を作れます。このページ自体が学校の制限で開けないときは、先生や ICT 担当の人に相談してください。

制限を外す操作はせず、学校の設定で開けない場合は先生や学校の ICT 担当の人に相談してください。もし HTML ファイルとして保存やダウンロードができなくても、画面に出ている HTML のコードをコピーできれば、このページのボックスを「コードから」に切り替えて貼り付けるだけで、ブラウザで開ける Web ページの URL に変えられます。

Chromebook で HTML を直す(編集する)方法

ChatGPT や Gemini で作った HTML を直したいとき、いちばん手軽なのは、その AI のチャット画面で「タイトルの文字を大きくして」「背景を水色に変えて」のように伝え、書き直したコードを出してもらう方法です。新しいコードをコピーして保存し直すか、ファイルとしてダウンロードし直せば、タグの書き方を覚えなくても見た目や動きを変えられます。

少しだけ文字を書き換えたいときは、Chromebook に入っている「テキスト」アプリを使う方法もあります。テキストアプリを開いて Ctrl + O を押し、保存してある .html ファイルを選んで中身を書き換えたら、Ctrl + S で保存します。その後、Chrome で Ctrl + O を押して保存したファイルを開き直すと、直したあとの画面を確かめられます。学校の Chromebook では、管理の設定によってアプリやファイルの操作が制限されていることがあるため、うまく開けないときは先生や学校の ICT 担当の人に相談してください。

作った HTML をクラスのみんなに見せる 3 つの方法

Chromebook で開いて直した HTML をクラスのみんなに見せるときは、自分の画面を見せる方法、ファイルを配る方法、URL にして配る方法の 3 つがあります。隣の席の友達や先生にすぐ見せたいのか、クラス全員の Chromebook でそれぞれ動かしてほしいのかによって、合うやり方が変わります。

自分の Chromebook で開いて見せるファイルを送るURL にして送る
やり方「ファイル」アプリでダブルクリック、または Chrome で Ctrl + OClassroom などにファイルを添付するコードを貼って公開し、URL か QR コードを送る
見られる人その Chromebook の画面を見ている人ファイルを受け取った人(届くのはファイル)URL を知っている人(Chromebook でも iPad でも)
学校の設定管理者の設定で開けないことがある受け取った端末の設定しだい学校が convika.com を開けなくしていると開けない
直したときファイルを保存し直すファイルを送り直す同じ URL のまま新しい版を公開する

Google Classroom に HTML ファイルをそのまま添付して配ると、受け取った側も自分の Chromebook にファイルを保存して開くことになり、学校の制限によっては開けないことがあります(くわしくは Google Classroom で HTML の教材を配る方法 をご覧ください)。URL にして配れば、受け取った人はブラウザでリンクを開くだけで見られます。このページのボックスにファイルを入れ、無料のアカウントを作って公開すると、スクリプトも動く自分のページとして配れるようになります。

AIで作ったHTMLのコードをURLにしてクラスに配る4つの手順

ファイルを保存しなくても、下の 4 つの手順で AI のコードを URL にしてクラスに配れます(すでに .html や .htm のファイルがあるときは、手順 2 で「ファイルから」のまま入れられます)。

1. AI のチャットでコードをコピーする

ChatGPT や Gemini、Claude のチャットで、HTML のコードが入っている枠の右上などにあるコピーのボタンを押し、コードをコピーします。Chromebook にファイルを保存しなくてだいじょうぶです。

2. ボックスを「コードから」に切り替えて貼り、「プレビューのリンクをつくる」を押す

このページの ボックス を「コードから」に切り替えてコピーしたコードを貼り、「プレビューのリンクをつくる」を押します(ファイルがあるときは「ファイルから」で 2 MB までの .html か .htm のファイルを入れます)。登録もメールアドレスもいりません。ここでできるプレビューのリンクは 3 分間だけ開けて、ボタンを押すと動くスクリプトやフォームはまだ止まっているので、クラスに配るリンクにはせず見た目だけ確かめます。

3. ページを受け取り、公開する

「このページを受け取る(無料・カード不要)」を押して登録すると、ページがそのままアカウントに入り、スクリプトも動くようになります。ページの画面で「公開する」を押し、無料の「一般公開」で公開すれば、URL を知っているクラスの人ならパスワードや Convika のアカウントなしで開けます(Free プランで公開 1 ページ・月 10,000 ビューまで使えます)。一般公開のページは検索結果や Convika のギャラリーに出ることがあるので、出したくないときは公開するときの確認画面で「限定公開」を選びます(Pro・1年パス)。

4. URL を Classroom やロイロノートに貼るか、QR コードを教室のスクリーンに映す

公開すると yourpage.convika.page のようなアドレスになり、この URL は「公開停止」を押すまで変わりません。「公開URL」の横の「コピー」を押して、Google Classroom やロイロノートにリンクとして貼ります(ほかのサイトの枠の中に埋め込んで表示することはできないので、リンクとして載せます)。または「公開URL」の横の「QR コードを表示する」を押して、教室のスクリーンに映したりプリントやスライドに貼ったりしても配れます。

クラスに配る前に確かめること

学校の Chromebook や iPad は開けるサイトが決まっていることがあり、convika.com のページが開けないことがあります。授業の前に、生徒が使うのと同じ端末で公開URLを一度開いて確かめてください。開けないときは、学校の ICT の担当に相談します。

Convika のページはほかのサイトの枠の中には埋め込めないため、Google Classroom や Google サイトにはリンクとして載せます。ページを開く生徒に Convika のアカウントやアプリはいらないので、生徒に登録させる必要はありません。ページは先生のアカウントで管理します(AI サービスの年齢の決まりについては、Claude を生徒が使うときのガイドも参考にしてください)。

ページを直しても、配った URL と QR コードをそのまま使う方法

ファイルを直すごとに配り直さなくてすむように、同じアドレスで更新できる公開リンクを作っておけます。まずこのページにある Convika のアップロードのボックスに、2 MB までの .html か .htm のファイルを「ファイルから」で入れるか、「コードから」に切り替えてコードを貼り、「プレビューのリンクをつくる」を押します。ここまでは登録もメールアドレスもいりませんが、プレビューのリンクは 3 分間しか開けず、ページの中のスクリプトやフォームも止まっているため、ボタンを押すと動く部分はまだ動きません。人に配るリンクにはせず、続けて「このページを受け取る(無料・カード不要)」を押して登録すると、アップロードしたページがそのままアカウントに入り、スクリプトも動くようになります。ページの画面で「公開する」を押すと、確認画面で「一般公開」か「限定公開」を選べます。無料の「一般公開」なら、URL を知っている人は転送された相手も含めてパスワードやアカウント、アプリなしで開けますが、検索結果や Convika のギャラリーに出ることがあります。検索にもギャラリーにも出したくないときは「限定公開」を選びます(Pro・1年パス)。公開すると yourpage.convika.page のようなアドレスになり、この URL は「公開停止」を押すまで変わりません。Free プランに含まれるのは、すべてのページの合計で月 10,000 ページビューです。「公開URL」の横の「コピー」でアドレスをコピーしたり、「QR コードを表示する」で出した QR コードを教室のスクリーンに映したり、画像を保存してプリントやスライドに貼ったりしてクラスのみんなに配れます(なお、Convika のページはほかのサイトの枠の中には埋め込んで表示できない設定なので、Google クラスルームなどのサービスにはリンクとして載せてください)。

配ったあとに Chromebook で HTML を直したくなったら、ページの画面にある「新しいバージョンのアップロード」に直したファイルを入れて「新しいバージョンとしてアップロードする」を押します。「プレビューを開く」で表示を確かめてから「同じリンクで v2 を公開する」を押せば、URL も QR コードも変わらないまま中身だけが新しい版に切り替わり、公開するまでは見る人に前の版が出続けます。公開したページではどのプランでもスクリプトが動き、https:// の CDN から読み込むライブラリも使えます。受け付けるのは 1 つの HTML ファイルだけで、パソコンの中の別ファイルやほかのサイトからデータを取ってくることはできませんが、画像は https:// のアドレスかファイルの中に埋め込んだものなら表示できます。Free プランはカード登録なしで公開 1 ページ・月 10,000 ビューまで使えて、ページのいちばん下に小さな Convika の表示が出ます。

よくある質問

Chromebook で HTML ファイルを開くには?

Chrome ブラウザで Ctrl + O を押し、「マイファイル」や「ダウンロード」、Google ドライブから .html ファイルを選んで開きます。端末のファイルがうまく開けないときは、このページのボックスにファイルを入れるかコードを貼り、「プレビューのリンクをつくる」を押すとブラウザで見た目を確認できます。ボタンを押すと動く仕組み(スクリプト)まで動かしたいときやクラスのみんなに見せたいときは、「このページを受け取る(無料・カード不要)」から登録して公開してください。

Chromebook で HTML を作れますか?

ChatGPT や Gemini にコードを作ってもらうか、Chromebook の「テキスト」アプリでコードを書いて .html ファイルとして保存すれば作れます。「テキスト」アプリでは Ctrl + S でファイルを保存でき、Ctrl + O で保存したファイルを開き直して書き直せます。ファイルとして保存しなくても、このページのボックスを「コードから」に切り替えてコードをそのまま貼れば、すぐにブラウザで表示を確かめられます。

学校の Chromebook で開けないのはなぜですか?

学校が管理している Chromebook では、安全のためにダウンロードや開けるファイル、パソコン内のファイル(file://)の表示が制限されていることがあるためです。また、「ファイル形式が不明です」と出る場合は Google ドライブに保存してからブラウザで開けるか試してみてください。それでも開けないときや、このページのボックスのリンクもブロックされるときは、制限を外そうとせず先生や学校の ICT 担当の先生に相談してください。

Classroom に HTML を出すには?

HTML を Web ページの URL にしてから、Google Classroom の「資料」や「課題」にリンクとして載せます。HTML ファイルをそのまま添付すると生徒にはファイルが届くため、それぞれの Chromebook で開く手間がかかったり制限で開けなかったりすることがあります。このページのボックスからページを受け取って公開すれば、公開 URL をコピーして Classroom に貼るだけで、生徒はアカウントなしで開けます。検索に出したくないときは「限定公開」(Pro・1年パス)を選びます(詳しくはGoogle Classroom で HTML の教材を配る方法をご覧ください)。

出典

次のステップ

HTML ページにパスワードをかけて、知っている人だけに見せる方法

JavaScript で作った画面は、ソースを開けばパスワードが読めてしまいます。ChatGPT や Claude で作った HTML をアップロードし、自分のドメインのままサーバー側で確かめるパスワード付きのページにする方法を説明します。

関連記事

授業で配る方法

記事を共有する

作ったHTMLを、クラスのChromebookで開けるURLにしよう

ファイルを上げるかコードを貼るだけで、URLとQRコードが作れます。開く生徒や先生にアカウントはいりません。

無料で登録してHTMLをアップロードする

カード登録なし・公開1ページ・月10,000ビューまで無料