ブログ - RICOH THETAで撮影した360度写真と共に写真アルバムを作る
9年ほど前に買ったリコー THETA S撮影中に三脚が倒れてレンズに傷が入り修理して分譲して手に入れたTHETA Vですが，撮影した写真データは，theta360[.]comにアップロードしてブログパーツとして貼り付けていた．
しかしいつの間にかサービス終了．
仕方ないので，静的HTMLを生成するpannellumを使って他のサイトに依存しないで表示させるHTMLを生成するプログラムを作ってみた．
Pannellum
https://github.com/mpetroff/pannellum/releases
今回は，このサイトからpannellum-2.5.6.zipをダウンロードし，その中からpannellum.jsとpannellum.cssファイルを取り出し，htmlと同じフォルダに配置し，以下のHTMLファイルも同じ場所に保存して，360度写真ファイル名部分を変更すれば良い．
使ったソースコードはこれ．
できたコマンドラインツールで自動生成して作成したアルバムがこれ．
サンライズ出雲乗車記録2026.02.06
今回，自分用ツールなのだけど，これでデジカメの写真，スマホの写真，360度写真，動画を全部一緒にしてサイトで表示できるアルバムを作るPython3スクリプトを作ってみた．久しぶりにこういうのを作ったのでちょっと楽しかった．
しかしいつの間にかサービス終了．
仕方ないので，静的HTMLを生成するpannellumを使って他のサイトに依存しないで表示させるHTMLを生成するプログラムを作ってみた．
Pannellum
https://github.com/mpetroff/pannellum/releases
今回は，このサイトからpannellum-2.5.6.zipをダウンロードし，その中からpannellum.jsとpannellum.cssファイルを取り出し，htmlと同じフォルダに配置し，以下のHTMLファイルも同じ場所に保存して，360度写真ファイル名部分を変更すれば良い．
使ったソースコードはこれ．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>THETA 360 Viewer</title>
<!-- pannellum -->
<link rel="stylesheet" href="pannellum.css">
<style>
body {
margin: 0;
font-family: sans-serif;
background: #fafafa;
}
/* --- ヘッダ部分 --- */
header {
text-align: center;
padding: 20px 10px;
}
/* 3ドット風の区切り線 */
.dot-hr {
border: none;
text-align: center;
margin: 10px auto;
}
.dot-hr:before {
content: "···";
font-size: 20px;
color: #999;
}
/* 戻るボタン */
.back-button {
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
background: #eee;
border-radius: 6px;
text-decoration: none;
color: #333;
font-size: 14px;
border: 1px solid #ccc;
}
.back-button:hover {
background: #ddd;
}
/* pannellum 表示領域 */
#panorama {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<header>
<hr class="dot-hr">
<h1>マルチアルバム</h1>
<hr class="dot-hr">
<!-- 戻るボタン -->
<a href="java script:history.back();" class="back-button">戻る</a>
</header>
<div id="panorama"></div>
<script src="pannellum.js"></script>
<script>
pannellum.viewer('panorama', {
type: 'equirectangular',
panorama: 'サンライズ出雲シングルのパノラマ写真.jpg',
autoLoad: true
});
</script>
</body>
</html>できたコマンドラインツールで自動生成して作成したアルバムがこれ．
サンライズ出雲乗車記録2026.02.06
今回，自分用ツールなのだけど，これでデジカメの写真，スマホの写真，360度写真，動画を全部一緒にしてサイトで表示できるアルバムを作るPython3スクリプトを作ってみた．久しぶりにこういうのを作ったのでちょっと楽しかった．
