bookmark-setting

1. ディレクトリ＆ファイル構造確認

外部サーバーの公開フォルダ（public_html または www）に配置するファイル構成です。

public_html/
├── bookmark.html
├── css/
│   ├── bookmark.css
│   └── layout.css
├── js/
│   ├── bookmark.js
│   ├── footer.js
│   └── header.js
└── php/
├── api.php
├── LocalStorage/              ← 自動生成または手動作成
└── bookmarks_backup.json      ← バックアップデータ

2. 設置とパーミッション（権限）設定

Step 1: ファイルのアップロード

FTPソフト（FileZilla等）やサーバー管理画面のファイルマネージャーを使い、上記のファイル群をアップロードします。

Step 2: パーミッション（属性）の変更

PHPからの書き込みを正しく許可するため、FTPまたはファイルマネージャーで各フォルダ・ファイルの権限を以下のように設定します。

対象	推奨パーミッション	説明
`php/` フォルダ	755 (または 777)	プログラムの実行権限
`php/LocalStorage/` フォルダ	757 または 777	PHPがファイルを自動生成・書き込みするための権限
`php/api.php`	644 (または 755)	スクリプトファイル本体
`bookmarks_backup.json`	666 (または 777)	データ保存先ファイル

Step 3: HTML内の不要なリンクの修正・削除

bookmark.html に含まれる Synology Calendar へのローカルIPリンク（192.168.12.28）は、外部からアクセスする場合は QuickConnect などの外用URLに変更するか、不要であれば該当セクションを削除してください。

3. セキュリティ注意事項

⚠ セキュリティ上の重要事項
外部のレンタルサーバーに置く場合、URLを知っていれば誰でもバックアップデータ（bookmarks_backup.json）を取得・変更できてしまいます。必要に応じて以下のセキュリティ対策を実施してください。

① BASIC認証（パスワード保護）

レンタルサーバーの管理画面から、php/ フォルダ（またはサイト全体）にBASIC認証（アクセス制限）をかけておくことで、第三者の不正アクセスを防止できます。

② CORS（Access-Control-Allow-Origin）の制限

api.php の冒頭にある通信許可コードを、自身のドメイン限定に変更するとより安全です。

// 変更前（全許可）
header(“Access-Control-Allow-Origin: *”);// 変更後（自ドメインのみ許可）
header(“Access-Control-Allow-Origin: https://your-domain.com”);

4. WordPress（レンタルサーバー）で運用する場合の手順

静的HTMLからWordPress環境へ移行する場合、テーマの変更やアップデートの影響を受けない配置とパス指定を行います。

Step 1: PHPファイルとフォルダの配置（WordPressルート直下）

FTPソフト（FileZilla等）を使い、WordPressのルートディレクトリ（wp-config.php が存在するディレクトリ）に php フォルダを配置します。

wordpress/ (WordPressルートディレクトリ)
├── wp-config.php
├── wp-content/
└── php/                        ← ★ここに配置
├── api.php
└── LocalStorage/          ← 権限を 755 または 777 に設定
└── bookmarks_backup.json

Step 2: bookmark.js 内の通信パスを絶対パスに変更

WordPressの固定ページ（/bookmark/ 等）から呼び出す際、通信エラー（404）を防ぐため、bookmark.js 内の fetch 処理の指定を先頭スラッシュ付きの絶対パスに修正します。

// 変更前
fetch(‘php/api.php’)// 変更後 (先頭にスラッシュを追加)
fetch(‘/php/api.php’)

Step 3: WordPress固定ページへの組み込み手順

CSSの適用: bookmark.css の内容を子テーマの style.css または管理画面の「外観＞カスタマイズ＞追加CSS」に貼り付けます。
JavaScriptの読み込み: 固定ページ編集画面の「カスタムHTML」ブロックにて外部ライブラリと bookmark.js を呼び出します。
<script src=”https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js”></script> <script src=”/wp-content/uploads/bookmark.js” defer></script>
HTMLの貼り付け: bookmark.html 内の <main>〜</main> およびモーダル要素（<div id="custom-modal">）をカスタムHTMLブロックに貼り付けて公開します。

マニュアル一覧に戻る