【商用ライセンス】SharePoint HTML/CSSビューア Webパーツ｜受託案件・顧客納品OK

spfx-html-css-viewer_v1.0.4.0.zip

▼ SharePoint構築案件で、こんなお悩みはありませんか？

・顧客から「ポータルの見た目をもう少し良くしたい」と言われるが、
標準のWebパーツの組み合わせでは表現の幅が足りない
・かつての「スクリプトエディタ」Webパーツがモダンページで使えず、
HTMLを1枚貼るだけのことができない
・SPFxで作り込むと、ちょっとした文言の修正でもビルドと再デプロイが必要になり、
顧客が自分で直せない
・独自CSSをページに流し込むと、SharePoint側のUIまで巻き添えで壊れる
・ページの最上部に、画面の端まで広がるヒーローを置きたいが手段がない

本製品を導入するだけで、HTML/CSSをそのまま貼るだけのデザイン枠が手に入り、
文言や色の修正は顧客側で完結するようになります。

━━━━━━━━━━━━━━━━━━━
▼ 製品概要
━━━━━━━━━━━━━━━━━━━

任意のHTML/CSSをSharePointページ上に安全に表示するWebパーツです。
プロパティペインに直接コードを貼り付けるほか、ドキュメントライブラリ上の
HTMLファイル・フォルダーを参照する使い方にも対応します。
.sppkgファイルをアプリカタログにアップロードするだけで導入でき、
Azure等の外部サービスとの連携も不要です。

表示は iframe の sandbox による分離環境で行われます。
そのため、貼り付けたCSSがSharePointページ側のスタイルを汚染することがなく、
ヘッダーやナビゲーションが巻き添えで崩れる事故が起きません。

AIに指示して生成したHTMLをそのまま貼れるため、「社内サイトのデザインを、
コードを書ける人がいなくても仕上げる」という使い方に向きます。

━━━━━━━━━━━━━━━━━━━
▼ 主な機能
━━━━━━━━━━━━━━━━━━━

【3種類の入力モード】
直接入力(プロパティペインにコードを貼る)／ファイル参照(ライブラリ上の
HTMLファイルを指定)／フォルダ参照(フォルダ内のHTMLをタブで切り替え表示)。

【iframe sandbox による安全な分離】
貼り付けたCSSがSharePointページのスタイルを汚染しません。
ヘッダー・ナビゲーションが巻き添えで壊れることがありません。
JavaScriptは実行しない設計のため、貼り付けたコードがSharePointの
コンテキストに触れる余地がありません。

【2種類の高さモード】
固定／自動伸縮。<details>の折りたたみなど、JavaScriptを使わないUIの
高さ変化にも自動で追従します。

【全幅セクション対応】
ページ最上部のヒーロー(メインビジュアル)など、画面の端まで広がる
表示ができます(コミュニケーションサイト限定)。

【背景色・余白のカスタマイズ】
透明背景を指定すれば、SharePointページに自然に溶け込む表示になります。

【リンクの制御】
アンカーリンク(ページ内ジャンプ)に対応。target="_blank" 付きリンクで
別タブ遷移も可能です。

【レスポンシブHTML対応】
スマホ表示はHTML側のメディアクエリで調整できます。

【スクロール表示アニメーション】
画面に入ったときにCSSだけで演出できるアニメーションに対応します。

【フォルダ参照モードのタブ切替】
複数のマニュアルHTMLを1つのWebパーツでタブ切り替え表示できます(最大10件)。

━━━━━━━━━━━━━━━━━━━
▼ ライセンス体系
━━━━━━━━━━━━━━━━━━━

本ページで販売しているのは【単一テナントライセンス】です。

【単一テナントライセンス】 ¥65,000(税込)
・1つの顧客テナントに限り導入できます
・受託案件での顧客環境への導入OK
・そのテナント内であれば、導入するサイトやページの数に制限はありません
・本BASEショップで購入できるのはこのライセンスです

複数の顧客テナントへ導入したい場合は、個別契約でご用意します。

【個別ライセンス(個別契約)】
・複数の顧客テナントへ導入可能
・案件ごとの追加購入は不要
・導入の規模に応じて個別にお見積もりいたします
・購入前に必ずご相談ください

※いずれのライセンスでも、次の行為は禁止です。
・本Webパーツ単体での第三者への再配布・譲渡・販売
・本Webパーツそのものを製品として再販すること
・ソースコード(.sppkgファイル)の解析・逆コンパイル・改変
・他社向けのテンプレートやマーケットプレイスへの登録
※個人・社内利用(内製用途)の方は、noteにて個人ライセンス版(¥4,000)を販売しています。

━━━━━━━━━━━━━━━━━━━
▼ カスタマイズもお受けします
━━━━━━━━━━━━━━━━━━━

「顧客の要件に合わせて機能を追加・変更したい」——そんなご要望にもお応えします。

本Webパーツの開発者が直接カスタマイズを承りますので、品質と整合性を保ったまま機能拡張が可能です。

費用・納期は内容に応じてお見積もりいたします。
まずはお気軽にお問い合わせください。

━━━━━━━━━━━━━━━━━━━
▼ 提供物
━━━━━━━━━━━━━━━━━━━

・Webパーツ本体(.sppkgファイル)
・導入手順書(HTML形式)
・説明書(HTML形式)
・クイックガイド(HTML形式)
・ヒーロー・リンク集サンプル集(HTML 16点／ヒーロー6点・リンク集10点。
そのまま貼って使えます。全体を見比べられる「一覧.html」付き)

━━━━━━━━━━━━━━━━━━━
▼ セキュリティ・技術仕様
━━━━━━━━━━━━━━━━━━━

・HTML/CSSは iframe の sandbox 内で表示。SharePointページのCSSを汚染しません
・sandbox で allow-scripts を許可していないため、貼り付けたHTML内の
JavaScriptは実行されません(スクリプト持ち込みの経路になりません)
・コード・参照ファイルはすべて顧客のSharePointテナント内。
外部サーバーへの送信は一切なし
・SharePoint REST API の標準範囲内で動作(非公開API不使用)
・ファイル参照・フォルダ参照は閲覧者のSharePoint権限に準拠
・管理者によるAPIアクセス許可の承認は不要
・バージョンアップは、新しい .sppkg をアプリカタログに上書きアップロード
するだけ。各サイトでの操作は不要です
・顧客のセキュリティ審査にも対応しやすい構成

━━━━━━━━━━━━━━━━━━━
▼ 導入の流れ
━━━━━━━━━━━━━━━━━━━

① .sppkgファイルをアプリカタログにアップロード(約5分)
② ページにWebパーツを追加(全幅ヒーローにする場合は、
コミュニケーションサイトの「全幅列」セクションに配置)
③ プロパティペインの「HTMLコード」欄にコードを貼り付け、
高さモード・背景色・余白を設定

Azureや外部サービスの構築は不要。顧客環境への展開もスムーズです。

━━━━━━━━━━━━━━━━━━━
▼ こんな案件に最適です
━━━━━━━━━━━━━━━━━━━

・ポータルサイトの最上部に、画面の端まで広がるヒーローを置きたい案件
・AIで生成したHTMLデザインを、そのままページに載せたい案件
・SharePointページの隙間に、案内ボックスやバナーを埋め込みたい案件
・カード型のリンク集を、標準のリンクWebパーツより自由にデザインしたい案件
・ドキュメントライブラリに置いた説明書HTMLを、ページに埋め込んで
タブ切り替えで見せたい案件
・旧「スクリプトエディタ」Webパーツで作られたクラシックページの移行案件

━━━━━━━━━━━━━━━━━━━
▼ ご利用上の注意
━━━━━━━━━━━━━━━━━━━

・対応ブラウザは Microsoft Edge / Google Chrome の最新版です。
Internet Explorer は非対応です
・モバイルは iPhone Safari のみ検証済みです。Androidや他のモバイル
ブラウザでの動作は保証していません
・画像の相対パス(./image.png など)は解決できません。iframeのsrcdocが
基準URLを持たないためです。画像は絶対URLまたはBase64で指定してください
・スマホ表示では、コンテンツの幅は自動調整されません(自動伸縮は高さのみ)。
Webパーツ幅より広い固定幅のHTMLは、はみ出した部分が切れて表示されます。
HTML側でレスポンシブ対応してください
・同じサイト内の別ページへ同じタブで遷移できるのは「自動伸縮モード」のみです。
固定モードでは target="_top" が必要で、画面全体が再読み込みされます。
外部サイトへは target="_blank" を付けて別タブで開いてください
・JavaScriptは実行されません。iframe の sandbox で allow-scripts を
許可していないためです(セキュリティ上の仕様です)。動きのある表現は
CSSで実現できる範囲に限られます
・アンカーリンクは標準的な <a href="#id"> 形式で記述してください。
JavaScriptベースの遷移、SVG内リンク、ShadowDOM内リンクは対象外です
・SharePointサイトナビゲーションから page.aspx#id 形式でリンクしても、
iframe内のHTMLのidにはジャンプできません。セクションごとに別ページを
作ってナビから各ページへリンクする運用を推奨します
・全幅セクションはコミュニケーションサイトのページでのみ利用できます
(SharePointの仕様)。また全幅セクションと縦方向セクションは
同じページに共存できません
・フォルダ参照モードのタブ表示上限は最大10件です
・ダークテーマはSharePointのテーマ変更に追従しますが、iframe内のHTMLは
記述されたスタイルでレンダリングされます。ダークテーマに対応するHTMLを
作成するか、背景色設定で調整してください

━━━━━━━━━━━━━━━━━━━
▼ よくあるご質問
━━━━━━━━━━━━━━━━━━━

Q. 複数の顧客案件で使いたい場合は？
A. 本ページで販売しているのは「単一テナントライセンス」です。1つの顧客テナントに
限り導入できます。複数の顧客テナントでご利用の場合は、テナントごとにご購入いただくか、
「個別ライセンス」を個別契約でご用意しますのでお問い合わせください。
導入の規模に応じてお見積もりいたします。

Q. カスタマイズの費用感は？
A. 内容によりますが、軽微な調整であれば数万円〜、機能追加を伴う場合は
別途お見積もりとなります。まずはご要望をお聞かせください。

Q. 導入後のサポートはありますか？
A. 不具合に関するお問い合わせには対応いたします。
カスタマイズや機能追加のご要望は別途ご相談ください。

Q. 顧客にソースコードを開示する必要はありますか？
A. .sppkgファイルでの提供のため、ソースコードの開示はありません。

Q. 貼り付けたCSSでSharePointのUIが壊れませんか？
A. 壊れません。表示は iframe の sandbox 内で分離されているため、
記述したCSSがSharePointページ側のスタイルへ影響することはありません。
逆に、SharePointのテーマがiframe内のHTMLへ自動適用されることもありません。

Q. JavaScriptは動きますか？
A. 動きません。iframe の sandbox で allow-scripts を許可していないため、
貼り付けたHTML内のスクリプトは実行されません。これは仕様です。
利用者が貼り付けたコードがSharePointのコンテキストに触れる余地を
残さないための設計で、情シスの審査を通しやすくするための割り切りです。
折りたたみ(<details>)、タブ、スクロールアニメーション、ホバー効果など、
CSSだけで完結する表現には対応しています。

Q. 顧客が自分で文言を直せますか？
A. 直せます。プロパティペインのHTMLコード欄を書き換えるだけなので、
ビルドや再デプロイは不要です。ファイル参照モードにすれば、
ライブラリ上のHTMLファイルを差し替えるだけでも更新できます。

Q. サンプルはついていますか？
A. ヒーロー6点・リンク集10点、計16点のHTMLサンプル集が付属します。
そのまま貼って、リンク先URLを書き換えるだけで使えます。

Q. 個人・社内利用で使いたい場合は？
A. noteにて個人ライセンス版(¥4,000)を販売しています。そちらをご利用ください。

Q. 領収書は発行できますか？
A. 購入時に届く「ご購入いただきありがとうございました」のメールと、
決済方法ごとの受領書などをあわせて領収書の代わりとしてご利用ください。

Q. 適格請求書(インボイス)には対応していますか？
A. 現在、適格請求書発行事業者の登録を行っていないため、
インボイス制度に対応した適格請求書の発行はできません。あらかじめご了承ください。