アプリ360onWeb - 3週連続オンラインセミナー Part2：自分用に調整・パソコン編
セミナー概要と360onWebの基本機能
連続オンラインセミナーの第2回目となる今回は、360度画像編集Webアプリ「360onWeb」を自分好みにカスタマイズする方法について、パソコンでの操作を中心に解説します。RICOH THETAアンバサダープログラム対象セミナーです。参加の皆様でご希望の方はアンケートに回答するとポイントが付与されます。
この記事は次のセミナーをまとめました。
今回は自分用に調整ですので、改めて360onWebの基本的な使い方・仕様をご案内します。ご自身のカスタマイズの参考にしてください。
360onWebの機能・新機能と仕様
主要な機能：
ファイル読み込み機能
構図ガイド選択（16種類）
構図ガイドの回転機能
ラッキーボタン（ランダム設定変更）
ラッキーボタンは、各設定をランダムに生成する機能で、普段自分では試さないような予想外の編集結果を楽しむ提案です。各項目がランダムに変更されるため、めちゃくちゃラッキーだったら、新しい発見があるかもしれません。360onWebのカスタマイズで、不要なら非表示にすることが可能です。
タッチ操作の重要な改良
従来版では、特にスマホのような表示画面が小さな場合の編集時に、画面全体をズラす操作と、編集調整のスワイプ操作が競合する問題がありました。画面下方のスライダーや保存ボタンを利用するために、画面を触ると、意図せず編集中のイメージが動いてしまうという使い勝手の悪さがありました。
新バージョンでは、編集表示画面の周囲10%を非反応領域に設定し、この問題を根本的に解決しています。仮に編集表示部分の方に指がかかったとしても、周辺部分を触る分には画像が移動せず、ページを下にスクロールできるようになりました。
この設定はカスタマイズ可能で、使用デバイスのサイズに応じて好みで変更できます。小さめのスマートフォンを使用する場合は、余白を大きめに取ることで使いやすさが向上します。iPadやスライダーでの操作がメインの場合は、この問題はそれほど気にならないかもしれませんが、小さめの画面では非常に重要な改善です。この数値もカスタマイズの対象となるでしょう。
保存機能とデバイス対応の詳細
書き出しサイズと形式の仕様
現在のバージョンでは以下の設定が可能です：
サイズ: 512×512（Preview）、2K、4K
形式: PNG、JPEG 80%品質
これらの設定も数値変更だけで簡単にカスタマイズできます。4Kまで必要ない場合や、SNS投稿がメインの場合は、これらの選択肢を減らしても良いでしょう。逆に、大きくプリントしたい場合は4Kではなく6Kや8Kに変更することも可能です。4096×4096という数字を、好みの8192×8192などに変更するだけで実現できます。
iPhone/iPadでの保存方法の使い分け
モバイルデバイスでは、モバイル用Webサイトとデスクトップ用Webサイトの2つの表示モードが選択可能で、それぞれ異なる保存方法を提供しています：
モバイル用Webサイト：
ダウンロードボタンを押すと新しいタブが開いて画像が表示される
表示された画像を長押しすると「写真に保存」「共有」などのメニューが表示
直接写真アルバムに保存可能
いきなり共有や写真保存など、様々な操作が可能
デスクトップ用Webサイト：
ダウンロードフォルダに直接保存される
表示・ダウンロードボタンで操作
基本的にはダウンロードフォルダに必ず入る仕組み
この違いは、iPhoneやiPadでの使用時に、写真アルバムに直接保存したい場合はモバイル用を、ファイル管理を重視する場合はデスクトップ用を選択することで、用途に応じた使い分けが可能になります。
ここまでで、360onWebの機能と仕様を記しました。
続いてカスタマイズについて実例と合わせて記します。
自分用カスタマイズの実践方法
カラーリングの変更
HTMLファイルの冒頭部分に、すべての色設定がまとめてあります。その部分を変更するだけで、好みの色調に簡単に変更できます。例えば、全体の背景色が青から青のグラデーションになっている場合、これを橙から紫に変更することで、まったく異なる印象のアプリにカスタマイズできます。
/* 色設定の例 */
background: linear-gradient(orange, purple);
スライダーの背景、グラデーション色、読み込みボタンの色、構図ボタンの色など、色に関する設定は全てファイルの先頭部分に集約されているため、簡単に好みの色合いに変更可能です。
編集数値の刻み幅調整
現在0.01刻みで設定されている編集値は、実際のスライダー操作では細かすぎる場合があります。マイナス180から180で360度の範囲を0.01刻みで調整できるわけがないので、数値入力枠では0.01刻みという意味がありますが、スライダー操作ではあまり意味がありません。
これを0.1刻みや1度刻みに変更するのが、現実的な操作かもしれません。この変更は数字を変えるだけで簡単に実現できます。
ご自身用のカスタマイズとして、微調整用にスライダーの両端に「ー」「＋」のボタンを追加するのも良いかもしれません。
スライダー範囲の拡張とUI改善
標準では±180度の範囲ですが、画面をぐるぐる動かす際にはこの範囲を超えて動くことがあります。スライダーが180度で止まってしまうと、もうちょっとだけ動かしたい時に反対側まで持っていかなければならず、不便と感じるかもしれません。
これを±190度に拡張することで、境界付近での操作性が向上します。内部的には適切な角度計算（マイナス190度の時はプラス10度として処理）が行われるため、使い勝手が改善されます。
なお、画面を指でスワイプする場合は、制限なく動かせるよう内部で処理しています。
Little PlanetとRabbit Holeの機能分離
Little PlanetとRabbit Holeを2つが選択メニューとなっています。もちろん、スライダーを動かしていけばLittle PlanetからRabbit Hole状態に（または逆に）変化させることは可能ですが、スライダーでRabbit Holeにすると、スライダーのつまみが端に来てしまいます。
Rabbit Holeを選択すると、内部で自動的に180度足してスライダーのサム（つまみ）が真ん中に来るようにしています。これにより、Little Planetでは真ん中、Rabbit Holeでも真ん中から調整を始められるため、直感的な操作が可能になっています。
この選択メニューを非表示にしても編集機能自体には影響しません。コントローラ群の数を厳選したい場合は、非表示にカスタマイズしても良いでしょう。
生成AIを活用したカスタマイズ手法
無料版Claude AIでの実例・活用法
実際にスライダーに増減ボタンを追加する例を通じて、効果的なプロンプトの作成方法を詳しく解説します。360onWebのコードは約2000行程度あるため、全体を何度も生成させると無料枠をすぐに消費してしまいます。そこで効率的な活用法が重要です。
推奨プロンプト例：
スライダーの左に"-"ボタン、右に"+"ボタンを追加して、クリックでスライダーの値を0.1ずつ増減させ、数値表示とスライダーを同期させてください。元のコードを基に、完全なコードを提供してください。
無料版での効率的な質問例：
現在、編集画面の10%を反応しない領域にしているはずだけれども、今は何%反応しない領域になっていますか？
このように現状確認から始めて、「その10を20に変えるのはどこを直せばいいですか？」と続けることで、効率的に済ますことが可能になります。
プロンプト作成の詳細なコツ
良い例の具体的な要素：
「具体的な要求」を明記する：位置、動作、条件を詳細に
「数値（0.1刻み）」を指定する：曖昧さを排除
「見た目の統一」を依頼する：既存デザインとの整合性
「完全なコード」を要求する：動作する状態での提供
避けるべき例：
「いい感じに」「適当に」などの曖昧な表現
一度に複数の大きな変更を依頼
技術的すぎる専門用語の過度な使用
数箇所の修正が必要な時は生成AIに全部やらせた方が良いですが、数字を数箇所変えるだけの場合は、「どこをどう変えればいいですか」と聞いた方が無料でも十分に利用できます。
技術的な仕様とメモリ最適化
ファイル処理の最適化
360onWebは以下の仕様で動作し、メモリ効率を重視した設計になっています：
編集表示用: 1024×512ピクセルにリサイズ
保存処理用: 4096×2048ピクセルにリサイズ
元ファイル: 処理後に削除してメモリ節約
現在のバージョンでは、iPhone Xでも16K画像（約20MB）の編集・保存が可能です。しかし、当初のバージョンでは読み込みに失敗していました。そこで、読み込んだファイルを画面表示用に1024×512にリサイズ、保存処理用も4096×2048にリサイズして、元々の大きなファイルは削除するという仕様に変更しました。そのような対応で、iPhone XでもOsmo 360の16K画像が使えるようになりました。
お持ちのデバイスがもっと性能に余裕があるものでしたら、表示用を1024から2048にすることで、拡大した際の画質が向上します。また、保存処理も8Kから16Kで出力したい場合は、元々のファイルサイズのまま保存処理するようにカスタマイズ・変更できます。
生成AIに、どのようにすると良いのか問いかけると良いでしょう。
iPhone X特有の不具合と対応
確認されている不具合として、iPhone X iOS 16.7.11では、構図ガイドの回転ボタンが編集画面の左上ではなく、上端右上に表示される現象があります。iPhone 8 Plusなど同世代の機種でも同様の問題が発生する可能性があります。
これは機種ごとの調整のためだけにコードを追加していくと、どんどんコードが増えてしまうため、Webアプリとしては我慢できる範囲として対応を見送っています。構図ガイドを回転させるだけの機能なので、どこに出てもある程度は利用に支障がないと判断しています。
まとめと実践へのアドバイス
僕は、生成AIとの協働を「自転車に乗ること」に例えていますが、ある程度使っていると電動アシスト付き自転車になる可能性があります。ただし、行き先を決めるのは自分であり、使いやすさを成し遂げるのは人間の役割であることは当面変わらないでしょう。
360onWebのカスタマイズを通じて、生成AIは優秀なコード生成ツールである一方で、使いやすさの判断や方向性の決定は人間が行う必要があることがわかります。適切なプロンプトと段階的なアプローチにより、誰でも自分好みのアプリケーションを作成できると思っています。
何をどのように達成したいかを明確に記述すること、そして相談と指示を区別することが重要です。指示は具体的に行い、生成AIに余計なことをさせないよう注意しましょう。
次回の第3回では、GitHubサイトを使用したより合理的なカスタマイズ方法について解説予定です。サンプル画像の変更や構図ガイドの追加など、さらに詳細な機能拡張について紹介します。
参考
3週連続セミナーオンラインセッションとそのnote記事、資料は次の通りです
第1回 アプリの使い方！と裏技？
YouTube
資料
第2回 パソコン編
YouTube
note記事
資料
第3回 スマホ編
YouTube
note記事
資料
