中古市場で古いChromebookやAndroidタブレットが格安で売っています。こうした端末は最新機種と比べると見劣りしますが、卓上時計や情報端末など機能を絞って使うなら十分活躍させることができます。今回は、HTML/JSで情報表示端末を作ってみましょう。

  • 古い端末を情報表示端末として使ってみよう

    古い端末を情報表示端末として使ってみよう

ブラウザさえ動けば情報表示端末として優秀な中古タブレット端末

先日発売されたiPhone 18 Proの販売価格はついに20万円を超えてしまいました。同様に、PC・タブレットの価格が高騰している昨今、手元に置いて使うのに便利な趣味のサブ端末を買うのも楽ではありません。それで、中古端末に目が行くのですが、中古市場を探せば、古いChromebookやAndroidタブレットが5000円以下で見つかることもあります。今回は、こうした格安の端末を手に入れて、情報表示端末として活用する方法を紹介します。

今回、筆者が入手したのは、2020年に発売されたChromebook(Lenovo IdeaPad Duet)です。キーボードが本体から取り外せるタイプのChromebookで、情報表示端末にぴったりのものです。

実は、5年ほど前に筆者が実家で使っていたところ、母が欲しいというのでプレゼントしたのですが、キーボードが反応しなくなったということで、引き取ってきたのです。この手の2-in-1端末は、本体とキーボードの接続が物理的な接点によって行われています。そのため、長く使っていると接点の汚れやズレ、ケーブル部分の劣化などによって、キーボードを認識しなくなることがあります。

もちろん、キーボードが使えないと本来のノートPCとしては不便です。しかし、タッチ操作が可能なのでタブレットとして考えればまだ十分に活用できます。今回は、この「キーボードが使えない」という欠点を逆手に取って、時計や天気予報などを常時表示する情報端末として再利用してみることにします。ちなみに、メルカリなどで販売中の価格を見ると1万円しませんし、過去には3000円未満でも取引されています。

時計と天気予報を表示する端末を作ってみよう

今回は、HTML/JavaScriptを利用して、時計と天気予報が表示されるシンプルなガジェットを作ってみましょう。

HTMLはWebページを記述するマークアップ言語で、ページの構造を定義するものです。そして、JavaScriptはプログラミング言語で、ページの内容を書き換えたり、ユーザー操作に応じた処理を行ったりできます。

そして、天気予報の表示には、こちらで筆者が無料で公開している「クジラ週間天気API」を使います。

  • クジラ週間天気API

    クジラ週間天気API

それでは、最初に今回作ったHTML/JavaScriptを見てみましょう。完成版は、こちらに書き込みました。完全なコードはそちらで確認してください。「プログラムを実行」のボタンを押すと、その場で、HTML/JavaScriptの動作を確認できます。

  • 実際にHTML/JavaScriptを実行したところ

    実際にHTML/JavaScriptを実行したところ

HTML/JavaScriptの基本的な構造を確認しよう

プログラムを少しずつ確認してみましょう。まず、今回作成したHTMLを概観してみましょう。全体でも132行と、それほど大きなコードではないのですが、大枠として次のような構造になっています。これが、一般的なHTMLファイルの構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>時計と天気予報</title>
  <style>…省略 - ここにCSS …</style>
</head>
<body>
<main>
<!-- ここがメイン画面を定義しているところ (※1) -->
  <div id="clock">--:--:--</div>
  <div id="date"></div>
  <div id="weather"></div>
  <div id="error"></div>
</main>
<script>
  …省略 - ここにJavaScriptのプログラム …
</script>
</body>
</html>

Webページを構成するHTMLは、冒頭の「<!DOCTYPE html>」というDOCTYPE宣言から始まります。これはHTML5の文書であることを示し、ブラウザを標準モードで動作させるための宣言です。

続いて、「<html …>」という開始タグからはじまり「</html>」という閉じタグで終わります。そして、そのhtml要素の中に、ページについての情報やCSSなどを記述する<head>…</head>や、本文を表す<body>…</body>といったタグで構成されます。

ここで注目したいのが、body要素の中に書いた(※1)の部分です。ここには、時計(idがclock)、日付(idがdate)、天気(idがweather)、エラーメッセージ(idがerror)と4つのdiv要素を定義しています。JavaScriptのプログラムが実行されるまでは、単に「--:--:--」と表示されるだけです。

そして、<script>…</script>の部分にJavaScriptを記述します。

時計を表示しよう

続いて、時計を表示するJavaScriptのプログラム(※2)の部分を確認してみましょう。このプログラムでは、updateClock()関数で現在時刻と日付を取得し1秒ごとに画面を書き換えています。実際に、時計を更新するようタイマーをセットするのが、(※4)の部分です。

// 時計を更新 --- (※2)
function updateClock() {
  const now = new Date();
  // 時間を分かりやすい形式で取得
  const time = now.toLocaleTimeString("ja-JP", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
  // 日付を分かりやすい形式で取得
  const date = now.toLocaleDateString("ja-JP", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long"
  });
  // HTMLに差し込む
  document.querySelector("#clock").textContent = time;
  document.querySelector("#date").textContent = date;
}
…省略…
// 時計は1秒ごとに更新 --- (※4)
updateClock();
setInterval(updateClock, 1000);

JavaScriptで、時間と日付は、Dateオブジェクトを使って操作します。このオブジェクトのtoLocaleTimeString()メソッドとtoLocaleDateString()メソッドを使うと、「10:01:30」と「2026年9月22日火曜日」などの馴染みのある時間と日付の形式を取得できます。

そして、取得した情報を、「document.querySelector("#clock").textContent = time」のようにして、id="clock"が指定された要素のテキストを書き換えます。これを1秒ごとに繰り返すことで、時計の部分が完成します。

天気予報を表示しよう

天気予報の表示は、(※3)の関数updateWeather()で処理しています。

この関数では、Web上にある情報を、fetch()関数を使って取得します。先ほども紹介した「クジラ週間天気API」では、天気予報をJSON形式で提供しています。例えば、「https://api.aoikujira.com/tenki/week.php?fmt=json&city=319」にブラウザでアクセスすると、次のようなJSONデータが得られます。

  • ブラウザでAPIにアクセスしたところ

    ブラウザでAPIにアクセスしたところ

このURLの末尾で指定した「city=319」が東京を表しています。名古屋は329、大阪は331、札幌が306と都市ごとの番号が決まっています。

そして、APIからはJSON形式で週間予報が返されるので、その中から先頭5日分を取り出して画面に表示しています。

const forecasts = data["319"];

for (const item of forecasts.slice(0, 5)) {
  // 天気予報を表示
}

APIからは、日付を表す「date」、天気を表す「forecast」、最低気温の「mintemp」、最高気温の「maxtemp」などを取得できます。

天気予報は秒単位で変化するものではありませんので、時計は1秒ごとに更新しますが、天気予報については1時間ごとに取得するようにしています。

setInterval(updateClock, 1000);
setInterval(updateWeather, 60 * 60 * 1000);

Chromebookを情報端末に仕立てる方法

そして、作成したHTMLファイルをChromebookで開き、ブラウザを全画面表示にすれば、それだけで時計と週間天気予報を表示する情報端末のできあがりです。

今回は、プログラム貯蔵庫にHTMLを書き込んだので、そのURLをChromebookのブラウザで開くだけで済みます。貯蔵庫では、書き込んだプログラムを直接実行するURLを発行できます。ページの下方にある「作品公開情報」をクリックすると「アプリ（即時実行）のURL」が発行されるので、ブラウザのURL欄にそれを指定します。

そして、Chromebookの設定画面から、「システム環境設定 > 電源」を開き、「非アクティブで電源接続時」を「画面をオンのままにする」に指定します。

  • 自動でスリープしないように設定する

    自動でスリープしないように設定する

古い端末であれば、バッテリーは信頼できないので、ずっと電源に接続して使うことになるでしょう。ただし、古い端末ではバッテリーが膨張していないか確認すると安全でしょう。また、「充電の最適化」や「充電の上限」を利用するとバッテリーの劣化を抑えられます。

なお、筆者は、これをさらに改良して、スマートリモコンのSwitchBotのAPIを利用して、自宅の部屋の温度と湿度を表示するようにしました。また、座右の銘なども表示して楽しんでいます。

まとめ

以上、今回は古いChromebookを情報表示端末にする方法を紹介しました。古い端末であっても、この程度のHTML/JavaScriptを表示するだけなら十分な性能があります。高性能なCPUや大量のメモリも必要ありません。使わなくなった端末の再利用先として、こうした情報表示端末はなかなか相性が良いのではないでしょうか。試してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「実践力をアップする Pythonによるアルゴリズムの教科書(マイナビ出版)」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。