Documentation

日本語

English

日本語

English

外観

Copied!

Gallery Proの設置ガイド ​

Gallery Proの紹介で表示例を確認したら，この手順に沿って写真と公開先を用意します。コードの内容を理解したり，ターミナルへコマンドを入力したりする必要はありません。各画面へコピーして貼り付けます。設定表は設定と写真情報を参照してください。

必要な環境 ​

レンタルサーバーの管理画面で，対象ドメインの「PHP設定」「PHPバージョン切替」などを開き，PHP 8.3〜8.5のいずれかを選んで保存します。画面の名前はサーバー会社によって異なります。PHPを使うために，ご自身のMacへPHPをインストールする必要はありません。

写真のアップロードやフォルダーの確認には，サーバーの「ファイルマネージャー」「ファイル管理」，または普段使っているFTPソフトを使います。このページでは，ブラウザーで使うファイルマネージャーを例に説明します。契約先ごとの画面や操作は，レンタルサーバー別の公式操作ガイドを参照してください。

サーバー要件の詳しい一覧
項目要件・用途
BlocsBlocs 6 for Mac向けのBric
PHP対応系列は8.3〜8.5。PHP 8.6 RCでの動作確認もしています
mbstring写真のメタデータの文字列処理
EXIF拡張撮影情報の読み取りと画像形式の判定
GDサムネイル生成。使用する画像形式への対応も必要
書き込み権限写真フォルダー内の thumbs/ とカタログキャッシュの生成・更新
Apache写真の個別URLには mod_rewrite と，.htaccessで書き換えを許可する設定が必要
JavaScriptブラウザーでの一覧とライトボックスの表示・操作

以下の設置例は，ギャラリーページを /gallery/ に公開し，写真を /_gallery/ に用意する構成です。includes/などの必要なファイルの配置は，Blocsが書き出し・公開時に行います。サイト全体を /portfolio/ などのサブディレクトリーへ収める構成は対象にしていません。現在の初期化処理は，公開時に /includes/gallery-pro.php を参照します。

.htaccessを利用できるかは公開先の設定によります。Apacheでは，書き換えディレクティブを許可する AllowOverride FileInfo，または対応する AllowOverrideList が必要です。設定できない場合は，サーバーの管理者に確認してください。Apacheの公式説明

設置手順 ​

1. 写真とファイルの配置を決める ​

この例では，写真のアルバム名を works，公開するギャラリーページのフォルダー名を gallery とします。この二つは別の設定です。

text
(公開フォルダー)/
├── .htaccess                  ← BlocsのHypertext Accessで設定
├── includes/                  ← Publishで自動転送（手動不要）
│   ├── gallery-pro.php
│   └── gallery-pro-ogp.php
├── js/                        ← Publishで自動転送（手動不要）
│   └── gallery-pro.js
├── css/                       ← Publishで自動転送（手動不要）
│   └── gallery-pro.css
├── _gallery/                  ← 自分で作成
│   └── works/                 ← 自分で作成・PHPの書き込み先
│       ├── Example Photo.jpg  ← 写真は自分でアップロード
│       ├── Another Photo.jpg
│       └── thumbs/            ← PHPが自動作成（手動不要）
│           ├── Example Photo.jpg
│           └── .catalog.json  ← 中の画像・記録も自動生成
└── gallery/
    └── index.php              ← BlocsでPHPに設定し，Publish

背景色の付いた行は，自分で設定・準備する箇所です。.htaccessは手順4のHypertext Accessで設定し，Htaccess Production Modeを有効にすると，Publishで転送されます。index.phpも，手順3でページをPHPに設定し，コードを貼り付けた後はBlocsが公開します。

上の図は，公開後の関係するファイルだけを示しています。includes/，js/，css/のGallery Pro用ファイルは，Bricを配置するとBlocsに自動登録され，通常のPublish操作でサイトと一緒にアップロードされます。これらのフォルダーを自分で作ったり，Bricの中からファイルを探して手動アップロードしたりする必要はありません。

thumbs/とその中のサムネイル・.catalog.jsonは，公開ページを開いたときにPHPが自動で作成します。通常は，thumbs/を先に作ったり，所有者を変更したりする操作は不要です。PHPから親フォルダーのworks/へ書き込めることが条件です。保存できない場合の確認方法は，次の「写真フォルダーと保存権限を確認する」を参照してください。

自分で用意するものは，写真用の /_gallery/works/ と写真，Page Settingsへ貼るPHP，写真URLのための .htaccess 設定です。写真はGallery Proがサーバー上のフォルダーから読み込むため，別途アップロードします。

写真は /_gallery/works/ の直下へアップロードします。サブフォルダー内を再帰的に探索してアルバム化する処理はありません。対応する拡張子はJPEG，PNG，GIF，WebPです。撮影情報を見せる場合は，必要なメタデータを保持したJPEGで準備すると確認しやすくなります。

写真の拡張子を除いたファイル名は，写真IDにも使われます。Example Photo.jpg のURL末尾は Example-Photo になります。現在の処理はURL内のハイフンを空白へ戻すため，元のファイル名では単語を空白で区切り，本来のハイフンを含む名前や，拡張子だけが異なる同名写真を避けてください。

写真フォルダーと保存権限を確認する ​

Gallery Proは，写真の小さな表示用画像（サムネイル）と，写真一覧の記録をサーバーに保存します。そのため，写真用フォルダーにPHPが書き込める必要があります。まず次の操作で，フォルダーを準備してください。

  1. サーバーの管理画面から「ファイルマネージャー」を開きます。
  2. 公開するドメインのフォルダーを開きます。public_html，wwwなどの名前がよく使われますが，契約先が案内する公開フォルダーを選んでください。
  3. 「フォルダー作成」「新規フォルダー」などで _gallery を作り，その中に works を作ります。すでにあれば，そのフォルダーを使います。
  4. worksを開き，「アップロード」で写真を入れます。
  5. worksを選び，右クリックのメニューまたは操作ボタンから「属性」「パーミッション」「権限変更」などを開きます。フォルダー作成直後の値がサーバー会社の推奨値になっていれば，そのまま使います。

権限は，通常は「誰が読み書きできるか」を3桁の数字で表します。契約先の指定がない場合に確認する一般的な目安は次のとおりです。サーバー会社の指定があれば，そちらを優先してください。

対象一般的な目安確認すること
_gallery，works，生成された thumbs の各フォルダー755所有者に読み取り・書き込み・実行，グループとその他に読み取り・実行
写真，.htaccess，通常のPHPファイル644所有者に読み取り・書き込み，グループとその他に読み取り

数値を入力する画面なら，対象を一つずつ選んで値を確認し，必要な場合だけ変更して保存します。「子フォルダーにも適用」「再帰的に変更」は選ばないでください。フォルダー用の値を写真やPHPファイルへ一括適用する必要はありません。操作画面と権限値は，次の公式ガイドで契約先の説明を確認してください。

ここではPHPが写真フォルダーの所有者として動く環境を基本にしています。この場合，通常は所有者変更も不要です。PHPの実行ユーザーが異なるなど，755にするだけでは書き込めないサーバーもあります。レンタルサーバーだから必ず変更が必要，または必ず不要というわけではありません。下の確認で保存できなければ，777へ変更したり所有者を自分で変更したりする前に，サーバー会社へ相談してください。

契約先の操作画面やPHP設定は，レンタルサーバー別の公式操作ガイドを参照してください。

公開後に，保存できたことを確認する ​

  1. この後のBlocs設定と公開を終えたら，ブラウザーでギャラリーページを開きます。確認用に，長辺が400pxを超えるJPEGを少なくとも1枚用意すると，サムネイルの生成も確認できます。
  2. ファイルマネージャーへ戻り，_gallery → worksを開いて一覧を更新します。
  3. 自動的に作られた thumbs を開き，小さな画像と .catalog.json が保存されたことを確認します。.catalog.jsonが見えなければ，「隠しファイルを表示」「ドットファイルを表示」などを有効にします。これらを自分で作成・編集する必要はありません。
  4. 写真を追加した後も，ギャラリーページを再読み込みすれば一覧が更新されます。元の写真が400px以下の場合など，サムネイルを別に作らず元画像を使う場合もあります。

「サムネイルを保存できません。」と表示された場合や，thumbs・.catalog.jsonが作られない場合は，次の文章を契約先のサポートへ伝えられます。worksを別名にした場合は，フォルダー名を置き換えてください。

PHPを使う写真ギャラリーを設置しています。公開フォルダー内の _gallery/works/ に，PHPから thumbs/ フォルダーを作成し，その中へ画像と .catalog.json を保存する必要があります。現在，保存に失敗します。PHPから書き込める所有者・権限の設定と，契約サーバーでの変更方法を教えてください。

2. BlocsにGallery Proを配置する ​

写真を表示したい本文の位置にGallery Proを配置します。Math RendererやCode Highlighterのように，機能だけを置くための専用Blocへまとめる配置ではありません。写真一覧のために必要な幅と余白を用意します。

SourceのPathへ works を入力します。/_gallery/works/ の全体ではなく，_gallery/以下の相対フォルダーを指定します。Layoutを選び，必要に応じて列数，余白，キャプションを調整します。

必要なファイルはBricの配置時に自動でAttachmentsへ追加されます。通常は添付ファイルを手動で登録する操作も不要です。確認したい場合は，後述の添付ファイルの確認を参照してください。

Blocsの編集キャンバスでは設定用のバナーが表示されます。実際の写真は，PHPへアクセスできるプレビューまたは公開先で確認します。プレビューで公開先の写真を参照する場合は，Project SettingsのBase URLも公開先に合わせます。

1ページに複数のGallery Proを置く場合 ​

デモのように，1ページへ複数のGallery Proを配置できます。写真をクリックしたときは，クリックしたギャラリーの写真一覧とライトボックスの設定を使います。

一方，写真のURLには「どのGallery Proで開くか」の区別がありません。同じ写真を複数のGallery Proで表示している場合，そのURLを直接開いたり再読み込みしたりすると，最初のGallery Proが選ばれます。そのため，2番目以降のギャラリーで写真を開いてURLをコピーしても，相手側では最初のギャラリーの設定で開きます。

正確には，指定された写真IDが見つかった最初のGallery Proを使います。別のアルバムを同じページへ並べる場合も，同じ写真IDを重複させないようにしてください。レイアウト比較では，URLから開いたときの表示にしたいGallery Proを先頭に置きます。

3. ページをPHPにして，doctypeの前へコードを追加する ​

PHPを貼り付ける場所は，Page SettingsのCodeです。次の順に操作します。

  1. Blocsで，Gallery Proを置くページを表示します。
  2. メニューバーのPage → Settingsを選びます。ショートカットは⌥⌘Pです。
  3. Page SettingsのGeneral（左端のスライダーのアイコン）を開き，File TypeのリストからPHPを選びます。この例では，書き出し後のページを /gallery/index.php として公開します。

Page SettingsのGeneralにあるFile Typeのリスト。HTML，PHP，HTMが並ぶ

Figure 1: File TypeからPHPを選びます。

  1. 同じPage Settingsの上部で，Code（</>のアイコン）をクリックします。
  2. コード欄の上にあるリストを開き，Before <!DOCTYPE>を選びます。

Page Settingsのコード挿入先リストでBefore <!DOCTYPE>を選ぶところ

Figure 2: Before <!DOCTYPE>を選び，コードをページの先頭へ追加する設定にします。

  1. 次のコードの右上にあるコピーボタンを押し，Page Settingsのコード欄へ貼り付けます。<?phpから?>まで，3行をまとめてコピーしてください。欄が空なら，追記する内容はこれだけです。すでに別のコードが入っている場合は，消さずに残して追加します。
php
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/includes/gallery-pro-ogp.php';
?>
  1. 貼り付けたコードと，リストのBefore <!DOCTYPE>を確認し，右下のDoneを押します。Blocsのプロジェクトも保存します。

Page SettingsのCodeでBefore <!DOCTYPE>を選択し，Gallery Pro用のPHPを貼り付けた画面

Figure 3: PHPを貼り付けた状態です。上部はCode，挿入先はBefore <!DOCTYPE>にし，最後にDoneを押します。

Gallery Proを使うページごとに，この設定を行います。同じページにGallery Proを複数置く場合も，貼り付けは1回です。

WindowメニューのCode Editorから操作する場合

Blocsには独立したCode Editorウィンドウもあります。開くときは，メニューバーのWindow → Code Editorを選びます。右上の挿入先リストからPage - Before <!DOCTYPE>を選ぶと，現在のページの同じ挿入先を編集できます。上でPage Settingsに貼り付け済みなら，もう一度貼り付ける必要はありません。

Code Editorの挿入先一覧。Page - Before <!DOCTYPE>はPageのグループ内にある

Figure 4: Window → Code Editorで開いた後のリスト。現在のページ用のPage - Before <!DOCTYPE>を選びます。

追加するPHPの役割と，書き出し後の位置

書き出したファイルでは，次の順序になります。

php
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/includes/gallery-pro-ogp.php';
?>
<!DOCTYPE html>

このコードは公開ルートの /includes/gallery-pro-ogp.php を読み込みます。写真のURLを直接開いたときに，写真のタイトル・画像URLなどをSNS用の情報へ反映し，画像やCSSを正しい場所から読み込めるようにします。ギャラリー全体のSNSカードは，BlocsのPage SettingsにあるSocial Cardsで設定してください。

ギャラリーページが /gallery/，/photos/，/ja/gallery/ のいずれにあっても，この設置構成では貼り付けるPHPは共通です。.htaccessの対象パスは，実際に公開するページに合わせて指定します。一つの言語のページを別の言語URLで再利用する構成は，サイト固有の追加設定です。

4. .htaccessに写真URLの規則を追加する ​

写真のURLをそのまま開けるようにするため，BlocsのHypertext Accessへ短い設定を追加します。以下はギャラリーページを /gallery/ に公開する例です。

  1. すでに公開中のサイトでは，サーバーのファイルマネージャーで公開フォルダーを開き，「隠しファイルを表示」などを有効にして.htaccessを探します。あればダウンロードしてバックアップを保存し，内容も確認します。
  2. BlocsのメニューバーでWindow → Code Editorを選び，挿入先リストからHypertext Access - htaccessを選びます。Figure 4のリストでは一番下にあります。
  3. 下のコードをコピーし，編集欄へ貼り付けます。すでにあるコードは残してください。サーバーにだけある必要な設定も，公開時に失われないよう，この欄へ含めます。WordPressなど別のアプリ用の記述や，サイト全体に適用する規則がある場合は，追加位置を契約先へ確認します。ギャラリー用の規則は，ほかのページへ一律に送る規則や404用のフォールバック規則より前に置きます。
  4. Project Settings（⌘,）のExportでHtaccess Production Modeを有効にし，プロジェクトを保存します。これにより，次のPublishで.htaccessとして転送されます。
  5. 公開後，写真を開いてURLを再読み込みし，同じ写真が開くことを確認します。

Htaccess Production Modeが無効の場合，Blocsはhtaccess.txtという名前で書き出します。この名前のままでは，写真URLの規則は有効になりません。有効にしてPublishすると，既存の.htaccessは日時付きでバックアップされた後，新しい内容に置き換わります。既存の設定が自動的に合成されるわけではないため，手順3で必要な内容を残してください。Blocs公式の設定説明

apache
RewriteEngine On

# Keep photo URLs in the address bar and serve the gallery PHP page.
RewriteCond %{DOCUMENT_ROOT}/gallery/index.php -f
RewriteRule ^gallery/p/([^/]+)/?$ /gallery/index.php?p=$1 [B,L,QSA]

例えば，次の公開URLを内部的に処理します。

text
Public URL: https://example.com/gallery/p/Example-Photo
PHP target: /gallery/index.php?p=Example-Photo

ブラウザーのアドレス欄には写真のURLが残ります。HTTPリダイレクトで別のURLへ移動させる規則ではありません。

URL設定の各行の意味
指定意味
RewriteCond ... -f対象の gallery/index.php が存在する場合だけ適用
^gallery/p/([^/]+)/?$/gallery/p/に続く一つの写真slugに一致。末尾のスラッシュは任意
p=$1写真slugをPHPへ渡す
B取り出した文字列を，転送先へ組み込む前にエスケープ
Lこの書き換え段階で，以降の規則の処理を停止
QSA元のURLにあるクエリーパラメーターを引き継ぐ

フラグの説明はApacheの公式資料を参照してください。pは写真の指定に使うため，ほかの用途のクエリーパラメーターとして重ねて渡さないでください。

ページを /photos/ に置く場合は，上の規則にある gallery の3か所を photos へ変えます。/_gallery/works/ のアルバム名やSourceのPathは，この変更とは独立しています。公開ルートそのものをギャラリーページにする場合は，次の規則を使います。フォルダー版と両方を貼り付ける必要はありません。

apache
RewriteEngine On

RewriteCond %{DOCUMENT_ROOT}/index.php -f
RewriteRule ^p/([^/]+)/?$ /index.php?p=$1 [B,L,QSA]

5. Blocsから公開し，動作を確認する ​

Blocs右上の書き出しメニューからPublishを選び，設定済みの公開先サーバーへ公開します。この操作で，ページとGallery Proの添付ファイルが一緒に転送されます。初めてSFTPで公開する場合は，Full Siteを選んですべての必要なファイルを転送する方法が公式に案内されています。接続設定も含めた操作は，Blocsの公開手順を参照してください。

公開完了の表示が出たら，次を確認します。

  1. /gallery/を開き，写真一覧と各レイアウトが表示されることを確認します。
  2. 写真をクリックし，ライトボックス，作品情報，前後移動を確認します。
  3. アドレス欄が /gallery/p/Example-Photo のような写真URLに変わることを確認します。
  4. そのURLを新しいタブで直接開き，再読み込みしても同じ写真が開くことを確認します。
  5. 写真フォルダーの thumbs/ に，画像と .catalog.json ができたことをファイルマネージャーで確認します。詳しくは，上の「公開後に，保存できたことを確認する」を参照してください。
  6. SNSで写真のURLを共有したときに，写真のタイトルと画像が表示されるか確認します。
SNS用の情報をHTMLで確認する場合

写真のURLへアクセスし，サーバーが返すHTMLにOpen Graphの必須4項目が含まれることを確認します。og:title，og:image，og:url は写真に対応する値で，og:type は website です。SNSのクローラーはJavaScriptを実行しない場合があるため，ブラウザーで表示した後のDOMだけでは判断できません。必要な場合は，この確認をサイト制作担当者へ依頼してください。

添付ファイルの確認 ​

Bricに同梱された必要なファイルは，配置時に自動でAttachmentsへ登録されます。Blocs公式のCustom Bric Structureでは，配置先がGlobal Areaかページ内の通常領域かによって，ProjectまたはPageの添付として登録されることが説明されています。

Bricの配置先自動登録先確認画面
ページ内の通常領域（ページローカル）Page AttachmentsPage Settingsのクリップのアイコン
Global AreaProject AttachmentsProject Settingsのクリップのアイコン

サイドバーから確認する ​

  1. 編集画面でGallery Proを選択します。
  2. 右側のサイドバーにある緑色のPage Attachments欄を見ます。Gallery Proでは必要な4ファイルが登録されています。
  3. Viewを押して，登録されたファイルの一覧を開きます。

Gallery Proの右サイドバーにPage Attachments: 4とViewボタンが表示されている

Figure 5: ページローカルに置いたGallery Proの例。Viewから添付ファイルを確認できます。

一覧では，次の4ファイルがGallery Pro Bricの添付として表示されます。すでに登録されていれば，＋ボタンで追加する必要はありません。

ファイル役割
gallery-pro.js写真一覧とライトボックスの表示・操作
gallery-pro.cssギャラリーとライトボックスの見た目
gallery-pro.phpサーバー上の写真一覧とメタデータの取得
gallery-pro-ogp.php写真ごとのURLで使うSNS用情報などの生成

Page SettingsのPage File AttachmentsにGallery ProのPHP2件，JavaScript，CSSが登録された画面

Figure 6: Page Settingsの添付一覧。Gallery Proの4ファイルが自動登録されています。同じページのほかのBricのファイルも一緒に表示されます。

Page Settingsから直接確認する場合は，Page → Settingsを開き，上部のクリップのアイコン（File Attachments）を押します。

Global Areaに置いたBricの場合 ​

Global AreaのBricでは，Project Attachmentsとして登録されます。Project Settings（⌘,）を開き，上部のクリップのアイコンを押して確認します。

Project SettingsのProject AttachmentsにGlobal AreaのBricのファイルが登録された例

Figure 7: Project Attachmentsの例。この画像では，Global Areaで使うNavbar Proなどのファイルが登録されています。

自動登録と公開先のフォルダーについて

Bricの内部にも includes/ というフォルダーがありますが，そのフォルダーを丸ごと手動コピーする手順ではありません。Blocsは，添付されたJavaScriptを公開先の js/，CSSを css/，PHPを includes/ へ配置します。これらは通常の書き出し・Publishの対象です。Blocs公式のProject Attachmentsの説明

PHPが添付一覧に登録されることと，ページの先頭でそのPHPを読み込むことは別の操作です。ファイルの手動登録や個別アップロードは不要ですが，手順3で説明したPage Settings → Code → Before <!DOCTYPE>への貼り付けと，.htaccessのURL設定は行ってください。

困ったとき ​

症状最初に確認すること
写真が1枚も表示されないサーバーの _gallery/works/ に写真があるか，BricのPathが works かを確認
「Gallery could not be loaded.」と出るPHPの設定，Attachmentsへの自動登録，BlocsのPublish結果と公開先のエラーログを確認
「サムネイルを保存できません。」と出る写真フォルダーの権限と所有者を確認。上の問い合わせ文を契約先へ伝える
クリックでは開くが，写真URLの再読み込みは404になる.htaccessの保存場所と，規則の gallery がページの公開先と合っているかを確認
設定後にページ全体が500エラーになる.htaccessを編集前のバックアップへ戻して表示を確認。貼り付け位置とPHP設定を契約先へ相談
URLから開くと別のレイアウトになる同じ写真を複数のGallery Proで使っていないか確認。URLからは最初に一致するGallery Proで開く

Gallery Proの紹介へ戻る ／ 設定と写真情報

Copyright © 2025–2026 eMotionGraphics Inc.