1/6/2025

pannellum.jsはSVG画像も表示できる。ただし…

またもや全くもって需要がない話なんですが。🙏

360度パノラマビューワーのpannellum.jsって意外にもビットマップ画像だけじゃなくてSVG画像も表示できるんですね。
試しに指定してみたら表示できてちょっとビックリ。

ただし、綺麗に表示してくれるのはSafariだけで、Google Chrome等他の全てのブラウザはSVGだとボヤけました。
なんだ〜残念〜せっかく軽いベクトルデータで何かできるんじゃないかと思ったのにぃ・・・

いや、それならSafariだけ軽いSVGにして、他のブラウザはPNGでもよくね?
ちょっと実験したいし。
続きを読む

  

Comments (0) tips Tags: , , , , — Kyo ICHIDA @ 2025/06/01 23:42

Gistをブログに貼るとタブ幅が8になる問題はCSSで解決

あなたはコードを書くときのインデントはタブ派ですか?それともスペース派ですか?
僕はタブ派なんですが、地味に困っていることがありました。
それは、Gistでブログにコードを貼ると、インデントがどうしても8文字分になってしまうんです。広すぎ…🤔
続きを読む

  

Comments (0) tips Tags: , , — Kyo ICHIDA @ 2025/06/01 17:44
27/5/2025

無料でAVIF形式の画像を保存するには?

承前。

pannellum.jsをWebPやAVIF対応ブラウザなら自動切替したい

「AVIFやWebPならJPEGより軽いのはいいけど、そもそもどうやってAVIFで保存するの?」

「PhotoshopじゃAVIF形式で保存できないし、Affinity Photo 2はAVIFを開くこともできないよね?」

だったら、Kritaを使えばいいじゃない!
続きを読む

  

25/5/2025

pannellum.jsをWebPやAVIF対応ブラウザなら自動切替したい

前回360度天球画像をブログに貼る手段をPannellumに変えたことを書きました。

theta360.comの代替はPannellumで決まり!

そしたらちょっと欲が出てきまして。
JPEGじゃなくて、もし閲覧者のブラウザが対応していればより軽量なAVIFやWebPでパノラマ画像を表示させたい!と。

普通は難しい話じゃないですよね?
.htaccessでACCEPTヘッダーがimage/avifに対応していて、かつ当該ファイルが存在するなら.avif画像を表示させるという。WebPも同様。
imgタグの場合は問題なく切り替えてくれます。

ところが、クエリ文字列で拡張子付きのファイル名を指定しなければならないPannellumの場合、.htaccessで画像を自動切り替えすることが出来ません。
続きを読む

  

Comments (0) やってみた,tips Tags: , , , , , , — Kyo ICHIDA @ 2025/05/25 14:18
12/5/2025

theta360.comの代替はPannellumで決まり!

今更な話なんですが theta360.com が今年サービス終了しちゃったじゃないですか。
RICOH THETAで撮った360度画像を theta360.com にアップして、それをブログにも貼ったしていたんですが、気づいたら全て見れなくなってました。

あちゃー残念、何か代替手段を探さねばということでいろいろ検討した結果、
Pannellumに決めました。

決め手は軽量・シンプルで必要充分な機能。

  • autoLoad対応
  • autoRotate対応
  • スマホではワンタッチでジャイロセンサー使用可能
  • PCではフルスクリーン可能
  • PCではキー操作可能
  • iframeを使うスタンドアローン版とJavaScript API版がある
  • pannellum.htm 単体だけでも動かせる(jsとcssが含まれた単独ビューワー)

続きを読む

  

Comments (0) その他 Tags: , , , — Kyo ICHIDA @ 2025/05/12 21:00