見出し画像

【初心者向け】GitHub PagesでWebアプリ『360onWeb』を永続的に使える自分専用にする方法

ikejun360

この記事は次のセミナーをまとめました。

RICOH THETAアンバサダープログラム対象セミナー「アプリ360onWebパート3 自分用に調整・スマホ編」を開催しました。このソリューションで、アプリの「寿命」問題を解決し、自分だけの永続的なWebアプリを作ることができます。

アプリの寿命問題とその解決策

様々な理由があります

個人アプリも企業アプリも、いつかはサービス終了やOS非対応という問題に直面します。また、Androidで使っていたアプリがiPhoneで使えないといったプラットフォーム依存の問題もあります。

この問題を解決するため、今回の360onWebアプリはCC0ライセンス（完全フリー）で公開されています。これにより、最悪の状況でもソースコードを使ってパソコンでデスクトップアプリとして使用できます。さらに将来的には、生成AIを使って古いコードを現在の環境で動くように更新することも可能です。

GitHub Pagesの活用メリット

別途参考note記事です

今回推奨するGitHub Pagesは、プログラムのソースコードを保存・共有・管理するための世界最大のオンラインプラットフォームです。個人開発者から大企業まで世界中で利用されており、当面サービス終了の心配がありません。

Webアプリ化することで、iPhone、Android、PC、Macなど、プラットフォームに関係なく使用できます。ただし、小さなスマホ画面では操作性に制限があったり、パソコンでは表示領域が物足りなく感じたりと、専用アプリに比べて若干の不便さはあります。

実際のセットアップ手順

Step 0: コードのダウンロード

画像を表示

まずは GitHub リポジトリからコードをダウンロードします。

次の三つWebアプリのコードと関連するファイル、フォルダがあります。

  • 360onWebS（シンプル版）: 基本機能のみ、最新の状態

  • 360onWebTW（多機能版）: 多様な編集機能を搭載した高機能版

  • パノラマビューアー: 360度写真の簡単ビューアー

Step 1: GitHubアカウント作成

GitHub.comにアクセスしてアカウントを作成します。メールアドレスが必要ですが、iPhoneの場合は「メールを非公開」機能を使用することも可能です。

Step 2: リポジトリ作成とファイルアップロード

  1. 「Create Repository」で新しいリポジトリを作成

  2. リポジトリ名を設定（例：my360app）

  3. 必ずPublicに設定（Webアプリとしてアクセスするため）

  4. ダウンロードしたファイルをドラッグ&ドロップでアップロード

  5. 「Commit Changes」を忘れずに実行

Step 3: GitHub Pages設定

  1. リポジトリページの「Settings」タブを選択

  2. 左サイドバーの「Pages」を選択

  3. Source設定を確認（Deploy from branch / main / root）

  4. 「Save」ボタンをクリック

数分から最大15分程度で、以下のURLでアクセス可能になります： https://ユーザー名.github.io/リポジトリ名/ファイル名.html

ChatGPT 5との連携による改良


Chat GPT 5での様子・その１
Chat GPT 5での様子・その２

GitHubにアプリをセットアップした後は、ChatGPT 5などのAIを活用してカスタマイズできます。初心者向けの改良ステップとして以下が推奨されています：

1. UI色変更（最も簡単）

  • CSSの:rootセクションで背景グラデーションやボタンの色を変更

  • --bg-gradient-start、--bg-gradient-endなどの値を書き換えるだけ

2. スライダー範囲調整

ズームスライダーの範囲を0.1〜2.9から0.1〜5.0に拡大する場合：

html

<input type="range" id="scaleSlider" min="0.1" max="5.0" step="0.1">

3. 新機能追加

  • リセットボタン

  • お気に入り保存機能

  • 新しい変換効果（魚眼風、極座標反転、波打ちエフェクトなど）

各バージョンの選択指針

目的に応じて決めてください

改良のベースとして選ぶバージョンの特徴：

360onWebS（シンプル版）

  • 基本機能・Redo/Undo・増減ボタン・高速化対応

  • 機能を追加していく方向でカスタマイズ

360onWebTW（多機能版）

  • 多機能編集機能搭載

  • 不要な機能を削除する方向でカスタマイズ

panoviewer

  • ビューアー専用・全画面表示

  • 表示特化でシンプルな改良向き

ChatGPTを効果的に使うコツ

AIとの連携では以下の点が重要です：

  1. 自分のスキルレベルを明示：「プログラミング初心者で、360写真編集には慣れています」など

  2. 具体的な要求：「該当行の変更前と変更後だけを提示してください」

  3. 段階的なアプローチ：いきなり複雑な機能ではなく、色変更などから始める

  4. コード生成の制限：「すぐにコードを書かないでください」と指示し、必要な時だけ依頼

まとめ

GitHub Pagesを使用することで、360度写真編集アプリを自分専用の永続的なWebアプリとして運用できます。CC0ライセンスにより完全に自由に改変でき、生成AIとの組み合わせで初心者でもカスタマイズが可能です。

サービス終了やプラットフォーム依存の心配がなく、パソコンでもスマホでも使用できる環境が構築できます。まずはGitHubアカウント作成から始めて、徐々に自分好みにカスタマイズしていくことをお勧めします。

この方法により、アプリの寿命問題を根本的に解決し、長期間安心して360度写真編集を楽しめる環境が手に入ります。

参考

3週連続セミナーオンラインセッションとそのnote記事、資料は次の通りです

第1回 アプリの使い方！と裏技？

YouTube

資料

第2回 パソコン編

YouTube

note記事

資料

第3回 スマホ編

YouTube

note記事

資料

関連情報


いいなと思ったら応援しよう！