--- title: "Vanilla JS → Next.js on Cloudflare 実験サイト「Liberogic Office Green」" date: 2026-05-27 categories: column author: 平林 canonical: https://www.liberogic.jp/topics/20260528-office-green-try/ --- # Vanilla JS → Next.js on Cloudflare 実験サイト「Liberogic Office Green」 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/b758467b528844df9cf9a853afe36c1f/20260525_office-green-try.png) みなさん「オフィスグリーン」というサイトがあるのをご存知でしょうか..? 実装を開始したのは2023年2月〜、今に至るまでの改修やコンテンツ追加の経緯をここに告白させていただくのです！Liberogic Office Green に日の目を！ みなさん「[オフィスグリーン](https://officegreen.liberogic.jp/)」というサイトがあるのをご存知でしょうか..? 弊社のリリースするコンテンツは、コーポレートWebサイトも含めて全て実験台なのです。 （二俣さんのa11yアプリケーションは除きます！ちな、このサイトはWCAG対応できてません😭） そもそも5〜6年前のコロナ時代に、暇な社長がオフィスを自前で緑化DIYするところから始まりました。（[https://yurulog.liberogic.jp/posts/qx9nibr59](https://yurulog.liberogic.jp/posts/qx9nibr59)） ## 最初の無茶振り@2023 ### 要件 - アフィリエイトサイトを始めたいお客様がいるで、どうせだったらちょっとした実験をしたいよね！（そのお客様は断念したためただの実験に終わる） - モーダル内で展開したページをインデックス化した状態にて、ページを持たずにAmazonアソシエイト資格を通過するか試してみない？（オフィス緑化でいっぱいブツを購入したからそれを素材に作っちゃいなよ！） - 360°素材をぐるぐる動かす仕事とか意外と縁がないんだよね。ライブラリとかあるし簡単そうだし、やってみようよ！ - 収益とかはどうでも良いので実験と勉強兼ねてできたら公開しちゃおう！ - うちのサイトはお客さんの実験台なんだよ？わかる？（❓） 入社して間もなかった私にぶん投げられた要件が以上になります。 実装を開始したのは2023年2月〜、今に至るまでの改修やコンテンツ追加の経緯を記載していきます！ Liberogic Office Green に日の目を！☀️ ### **技術スタック** - **Vanilla JS (ES Modules)** — フレームワークなし、`import/export` で自前モジュール分割 - **Pannellum** - 360度パノラマビューアーライブラリ（ローカルに `pannellum/` フォルダとして設置、CDNではなくセルフホスト） - **HTML / Sass** - マークアップ・スタイリング #### 外部API・サービス サービス用途**Instagram Graph API** (Facebook Graph API v12.0)商品キーワードでInstagram投稿を検索・表示**Google Apps Script**スプレッドシートから商品情報（タイトル・説明・画像・リンク）を取得**GA4 + GTM**アクセス解析 + タグ管理 まずこのサイトの肝となるのが360°画面が回るコンテンツです。 RICOHの「THETA SC2」というカメラでオフィスを撮影します。 撮影した元の写真がこちら。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/3bbf9885a51a4e758f172c23dfd96a2b/office_view.jpg) 360° の実装は [**Pannellun**](https://pannellum.org/documentation/examples/simple-example/) というライブラリを使用しています。 撮影した画像を設定するだけで360°ぐるっと見ることができるようになります。 いろいろとカスタマイズをするためCDNではなくライブラリ自体をダウンロードしました。 ### カスタマイズ 紹介する商品に「i」マークを置き、マウスでhoverすると商品名が吹き出しにて表示されます。 クリックすると商品紹介モーダルが表示され、Amazonのアソシエイトリンクへと繋がっています。右下のオフィス図面には配置場所を示す星マークが表示されます。 商品紹介は忖度なし、社長の正直レビュー付き！！ ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/98d4c18758b3458e8391560f45a23d68/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-05-28%2014.43.41.png) ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c32cf5e39ea9437287fa5d5230ded41b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-05-28%2014.44.05.png) また左上のスイッチで部屋の電気を消したビューの切り替えや、矢印をクリックすると社長のデスク側に移動することもできます！ 商品の管理は編集・修正がしやすいように、CMSではなくあえてのスプレットシートで管理しています。 理由はというと、 「お客さんは運用がライトなほうがいいでしょ？スプシで連携してみてよ！」 スプレットシートのデータをfetchしモーダルに流し込んでおりますが…. 出来たら出来たで 「遅いよなァこのサイト〜」 ………… APIは[カスタムホットスポット](https://pannellum.org/documentation/examples/custom-hot-spots/)のソースを元に使用しました。 リファレンスは元々、任意の箇所に印を配置させてhoverさせるとテキストが表示されるのみですが、モーダル出したりビューを切り替えてみたり、オリジナルでいろいろと要素を追加してみたのです。 なんだかんだ完成です🎊 出来上がったときは嬉しくてずっとサイトぐるぐるしてました！ ## Amazonアソシエイト 言わずと知れた、Amazon商品のアフィリエイトサービスです。 手順は以下。 - ウェブサイトのコンテンツは直近のものである（一般的に60日以内に更新されているもの / きちんと運営していることがわかるサイトであること） - 記事数やコンテンツは10以上 - 商品リンクを掲載できるようになったら、プライバシーポリシーページにAmazonアソシエイトの運用表示を掲載する - 登録後180日以内に3件の販売実績が必要（同一アカウントや家族はNG） - 入力されたURLに誤りがなくサイトが確認できる などなど。 180日以内に3件の販売実績ができたら審査が始まり、通過したらアソシエイトにて報酬が得られるようになります。 審査基準の開示は行っていないとのことで、質問しても回答はもらえません。 他のアフィリアイトと比べて審査が厳しめのようですね！ そしてAmazonアソシエイトも無事通過しました㊗️ **売上のメインが私の母と社長の買い物アフィリエイトサイト**が爆誕したわけです💥 ※ 身内での購入はよろしくないのですが…..これでAmazonアソシエイト解除されたらごめんなさいm(_ _;)m 現在は亀さんペースでの売上ですが、サマリーやコンバージョン率を見るとなかなか面白いですよ！ ## 次なる指令@2024 しばらく放置していたら仕事の谷間ができました。そんななか次の指令が… ### **要件** - ページのindex化が甘くない？ - オフィススペースも追加しようよ - ついでにNext.jsに組み替えちゃえば？ またしても無茶振り。 ### 技術スタック カテゴリ採用技術フレームワークNext.js 15.5 (App Router) + React 19 + TypeScript 5スタイリングTailwind CSS 4パノラマ表示Pannellum.js (WebGLベース360°ビューアー)データソースGoogle Sheets API / Instagram Business API / MicroCMSホスティングCloudflare Workers (opennextjs-cloudflare)その他Google Tag Manager, react-confetti, focus-trap-react Pannellumのjs、cssファイルはpublicに入れて使用しているのですが、npmでimportするのが主流ですかね。 最近Next.js用のライブラリが出たみたいで、実装時にあったらもっと実装が楽だったかな.. ついでにWebアクセシビリティ対応も意識して、キーボードでの操作もできるようにしておきました。 モーダルはgoogleのSEOでindex化されるように`/item/{num}` のパラメータを付与し、1ページとしてカウントされるようにNext.jsのParallel Routesで実装。 CSRからISRになったことでSEO改善にも繋がりますかね！ ## 指令は続いてゆく ### **要件** - ごめん、セキュリティで怒られちゃったからオフィススペース取っ払って！（完了：せっかく追加したのですが🈲マークつけました。） - なんか重すぎる....レンダリングおかしーんじゃね？（やや完了） - せっかくLLMあるんだからなんか自動化すればいーんじゃない？なんか全く別の概念を取り入れたいよね！（イマココ：どういう意味？） - 商品とか足せばぁ〜 地味にバージョンアップを重ね、実験系アフィリエイトサイト **Liberogic office green **となりました！ 個人商店のようなオープニング画面の紙吹雪と社長イラストモーダルがお気に入りです！ こういった小さい改訂も「こんなのあったら面白いかも！」と暇な時に勝手追加したりします。おそらくこれからも進化していくでしょう！ ## 総括？ Vanilla JSで組んでいた当初は割と自力で実装しましたが、色々と改訂するにつれて関数のネストも複雑になります。Next.jsでリメイクした時期に今くらいAIが発展していたら楽だったかもしれませんが、その分ナレッジは蓄積できて**「分かった上でAIを利用する」**ができているのかなぁと。 私的にはお気に入りのサイトですが、皆さんどう思いますか？？ ぜひぐるぐるして、オフィス見学してください！