はじめに
Samsung Frame TV のように、リビングの大画面に世界の名画が流れ続ける装置 — 憧れます。が、Frame TV は海外価格で 65 インチ約 1,500 ドル（約 22 万円）と高め。すでに LG OLED を持っているなら、LG 公式の Developer Mode + WebOS 開発ツールチェーンで同等のものが作れます。
本記事では、メトロポリタン美術館 (The Met) と Wikimedia Commons のパブリックドメイン作品 200 点超を 30 秒ごとにスライドショー再生する WebOS アプリを、LG 公式の方法だけで一から構築・デプロイする手順をまとめました。
完成品の動作は次のような感じです:
- 黒背景に名画 1 枚、30 秒ごとにフェードで切替
- 右下に作品タイトル / 作者 / 制作年が控えめに表示
- 縦長作品はレターボックス、横長作品は画面いっぱい
- リモコンで前/次/一時停止
- OLED 焼き付き対策（ピクセルシフト・キャプション位置ジッタ）
ソースコード: [github.com/posan-llc/lg-art-frame] (公開時に追記)
全体アーキテクチャ
┌──────────────────────────────────────────────────┐
│ TV (LG OLED, WebOS 4.5+) │
│ ┌────────────────────────────────────────────┐ │
│ │ Art Frame (WebOS app, type=web) │ │
│ │ ・index.html : HTML/CSS/JS スライドショー │ │
│ │ ・data/manifest.json : 200 作品超のメタデータ│ │
│ └─────────────┬──────────────────────────────┘ │
└────────────────┼──────────────────────────────────┘
↓ HTTPS
┌─────────────────────────────────┐
│ images.metmuseum.org (CDN) │
│ upload.wikimedia.org (CDN) │
└─────────────────────────────────┘
設計のポイント:
- 画像本体は美術館 CDN から直接取得（NAS 不要、IPK は 100 KB 未満に保てる）
- メタデータ JSON は IPK に同梱（オフライン耐性 + 起動が速い）
- WebOS の標準的な Web アプリ (HTML/CSS/JS) として実装。ネイティブコード不要
1. LG WebOS 開発環境のセットアップ
LG が公式に提供している開発者向けドキュメントは webostv.developer.lge.com に集約されています。
① LG Developer アカウントを作成
webostv.developer.lge.com で個人 Gmail アカウントを使って無料登録します。
② TV で「Developer Mode」アプリをインストール
リモコンから LG Content Store を開き、Developer Mode で検索 → インストール。アプリを起動して LG アカウントでログイン後、Dev Mode Status を ON に切替（TV が再起動します）。
再起動後、Developer Mode アプリを再度開くと:
- IP アドレス（例:
192.168.1.43） - ポート番号（
9922） - パスフレーズ（6〜8 文字の英数字）
- セッション残時間（50 時間カウントダウン）
が表示されます。
⚠️ Dev Mode セッションは 50 時間で自動失効します。失効したら同じアプリの「Session Time Extend」で延長可能（無料・無制限）。
Key Server トグルも忘れずに ON にしてください（次のステップで SSH 鍵を取得するために必要）。
③ Mac/PC に webOS TV CLI をインストール
LG 公式の CLI ツールを npm 経由でインストールします。
npm install -g @webos-tools/cli
ares --version
📝 注意: 旧パッケージ
@webosose/ares-cli(v2.4.0 止まり、2023 年以降更新停止) は非推奨。2024 年以降は@webos-tools/cliが公式です。コマンド名 (ares-package/ares-install/ares-launch等) は同じなので、過去記事のコマンド例はそのまま使えます。
④ TV をデバイスとして登録
ares-setup-device で対話的に TV を追加します:
ares-setup-device
# add → name=c9 → host=192.168.1.43 → port=9922
# → username=prisoner → passphrase=<TV 画面に表示された値>
接続テスト:
ares-device --device c9 --system-info
2. 最小の WebOS アプリを作る
WebOS の Web アプリは appinfo.json + index.html の 2 ファイルから始められます。ares-generate でテンプレートを作るか、手動で次の 2 ファイルを用意します。
appinfo.json:
{
"id": "com.posan.artframe",
"version": "0.1.0",
"vendor": "POSAN LLC",
"type": "web",
"main": "index.html",
"title": "Art Frame",
"icon": "icon.png",
"largeIcon": "icon-large.png",
"iconColor": "black",
"bgColor": "#000000"
}
index.html（最小版）:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Art Frame</title>
<style>
html, body { margin: 0; background: #000; height: 100%; overflow: hidden; }
img { width: 100%; height: 100%; object-fit: cover; }
</style>
</head>
<body>
<img id="art" src="https://images.metmuseum.org/CRDImages/ep/original/DT1502.jpg" />
</body>
</html>
これだけで「名画 1 枚を全画面表示する WebOS アプリ」になります。あとは <img> の src を JavaScript で定期的に書き換えればスライドショーです。
3. 美術品メタデータの収集
無料で使える主なパブリックドメイン作品 API:
| ソース | 規模 | ライセンス | API |
|---|---|---|---|
| The Met Open Access | 47 万点超（うち CC0 は isPublicDomain: true の作品） |
CC0 | REST API 公式 |
| Art Institute of Chicago | 約 5 万点（CC0 公開分。館全体の所蔵は約 30 万点） | CC0 | REST API |
| Rijksmuseum | 約 80 万点 | CC0 | API キー無料登録 |
| Wikimedia Commons | 1 億点超のメディアファイル全体（うち美術作品はカテゴリで絞り込み） | CC0 / PD-old / CC-BY-SA | MediaWiki API |
本記事では The Met と Wikimedia Commons の 2 ソースを使います。
The Met API でコレクション取得
The Met の /objects エンドポイントは、部門指定でその部門の全作品 ID を返します。
import urllib.request, json
# European Paintings 部門の全作品 ID（約 2,500 件）
url = "https://collectionapi.metmuseum.org/public/collection/v1/objects?departmentIds=11"
ids = json.loads(urllib.request.urlopen(url).read())["objectIDs"]
# 各 ID で詳細を取得
for oid in ids[:100]:
obj = json.loads(urllib.request.urlopen(
f"https://collectionapi.metmuseum.org/public/collection/v1/objects/{oid}"
).read())
if obj.get("isPublicDomain") and obj.get("primaryImage"):
print(obj["title"], "—", obj["artistDisplayName"], obj["primaryImage"])
isPublicDomain == true のフィルタが重要です。primaryImage フィールドに 4K 画質の JPEG URL が入っているので、そのまま <img> から参照できます。
Wikimedia Commons でゴッホやモネを補完
The Met は美術館の所蔵範囲に縛られるので、ゴッホやモネのような有名画家を網羅したい場合は Wikimedia Commons のカテゴリを使います。
import urllib.parse, urllib.request, json
API = "https://commons.wikimedia.org/w/api.php"
# Van Gogh の絵画カテゴリ
params = {
"action": "query", "format": "json",
"list": "categorymembers",
"cmtitle": "Category:Paintings_by_Vincent_van_Gogh",
"cmtype": "file", "cmlimit": "100",
}
data = json.loads(urllib.request.urlopen(
f"{API}?{urllib.parse.urlencode(params)}"
).read())
file_titles = [m["title"] for m in data["query"]["categorymembers"]]
prop=imageinfo で各ファイルの直接 URL と寸法 (width / height) が取れます。iiurlwidth=2560 を渡すと指定幅にリサイズされた URL が返ってくるので、4K TV にちょうどいいサイズで取得できます。
4. アスペクト比に応じた表示の出し分け
絵画は縦長と横長が混在します。これを 16:9 の TV 画面でどう見せるか:
| 元画像のアスペクト | object-fit | 見え方 |
|---|---|---|
| ≥ 1.5（横長） | cover |
画面いっぱい（ごく僅かにクロップ） |
| < 1.5（縦長/正方形） | contain |
中央に絵画全体、左右に黒帯（レターボックス） |
function showImage(item) {
const img = document.getElementById('art');
img.src = item.url;
// アスペクト比に応じて出し分け
img.style.objectFit = (item.aspect >= 1.5) ? 'cover' : 'contain';
}
メタデータに aspect フィールドを事前計算しておくと、画像読み込み完了を待たずに正しい表示モードを適用できます。
5. OLED 焼き付き対策
OLED は静的コンテンツの長時間表示で焼き付きが起こる可能性があるので、いくつか配慮を入れます:
- 背景は完全な黒 (#000000): OLED の黒画素は完全消灯 = 劣化しない
- 30 秒ごとに画像が完全に切り替わる: 同一画素が長時間光り続けない
- 画像位置を毎回 ±20px ランダムシフト: 同じ画素ばかりに負荷がかからない
- キャプション位置にも 28〜57px のジッタ: テキスト固定位置の焼き付きを分散
- キャプションは 15 秒で自動フェードアウト: 静的テキストの長時間表示を回避
function shiftLayer(layer) {
const dx = Math.floor(Math.random() * 41) - 20;
const dy = Math.floor(Math.random() * 41) - 20;
layer.style.transform = `translate(${dx}px, ${dy}px)`;
}
加えて、運用面で「1 日 8〜12 時間以内」「高輝度・単色面が長く続く作品はリモコンでスキップ」のルールを設けると安心です。
6. パッケージング & TV へのデプロイ
LG 公式の ares-package で IPK 化し、ares-install で TV にインストールします。
# プロジェクト構成
my-art-frame/
├── appinfo.json
├── index.html
├── icon.png
├── icon-large.png
└── data/
└── manifest.json
# IPK ビルド
ares-package my-art-frame -o dist
# → dist/com.posan.artframe_0.1.0_all.ipk
# TV にインストール
ares-install --device c9 dist/com.posan.artframe_0.1.0_all.ipk
# 起動
ares-launch --device c9 com.posan.artframe
ares-inspect --device c9 --app com.posan.artframe で Chrome DevTools が開くので、TV 上で実行されているアプリをリモートデバッグできます。コンソールログ・ネットワーク・要素検査すべて使え、開発体験は普通の Web アプリと変わりません。
7. ハマりどころメモ
C9 シリーズ (出荷時 WebOS 4.5、ファームウェア更新で WebOS 4.7.x まで上がるが、いずれも Chromium 53 ベース) で動かす際に踏んだもの:
fetch() が file:// で動かない
IPK インストール後は file:///media/developer/apps/... から HTML が読まれますが、Chromium 53 は fetch() で file:// URL を許可しません。マニフェストの読み込みは XMLHttpRequest を使えば動きます。
// fetch() ではなく XHR
const x = new XMLHttpRequest();
x.onload = () => callback(JSON.parse(x.responseText));
x.open('GET', './data/manifest.json');
x.send();
古い JS 構文への注意
Chromium 53 は 2016 年リリースなので、?.（オプショナルチェイニング）や ??（Null 合体）が使えません。Babel/polyfill を入れるか、コードを ES5 寄りに書く必要があります。React 18 なども事前にビルド成果物の互換性を確認したほうが無難です。
完成
ここまでで「200 点超のパブリックドメイン名画が 30 秒ごとに切り替わる、自分の OLED TV 上で動く Art Frame」が完成します。
Samsung Frame TV は海外で 65 インチ約 22 万円、Apple TV 4K（本体約 2 万円）のスクリーンセーバーは Aerial 等が標準搭載。今回は既に持っている OLED TV に追加投資 0 円で同じ体験が得られます。電気代と OLED 寿命のトレードオフはありますが、すでに OLED を遊ばせているなら試す価値は十分あります。
次にやりたい改造
- 時間帯適応: 朝はモネの印象派、夜は浮世絵やレンブラントの暗色面、深夜は画面 OFF
- 作品メタの拡張表示: 解説文を 1 日 1 回 GPT が要約してフッターに流す
- 個人スキャン対応: 自分が好きな現代作家の画集（自分で買って所有しているもの）をスキャンして混ぜる
- Home Assistant 連携: 人感センサーで人がいないときは画面 OFF
LG WebOS の開発自体は Web アプリの知識でほぼカバーできるので、入口としてのハードルは高くありません。OLED を遊ばせている方はぜひ。
📚 参考リンク: