設計情報

投稿者: SPIRERS ナレッジ向上チーム 2022年12月16日 (金)

動画で学ぶ SPIRAL ver.2 基本機能 ~【サイト管理】ページ ~

動画

ページ説明

動画を見る
※ページについて説明している部分(0:14~)へジャンプします。
ページとは
ページはURLが発行される機能で、Webページ作成には必ず必要となります。
ブロックを設置してWebフォームなど動的なページの作成や、ブロックを設置せずPHPを使用しフルカスタマイズしたページの作成も可能です。
ページにおいてもURLを任意で設定することができます。

ページ作成

動画を見る
※ページ作成について説明している部分(0:42~)へジャンプします。
ページ作成
SPIRAL ver.2では、まずはテスト環境で構築を行いますので、テスト環境のページメニューから進んでいきます。
識別名はドメインの一部となりますので、適したものを入力します。

設定方法は2つあります。
ビジュアル設定 ブロックを配置してページを作成する方法。ブロック外のHTML編集は不可。
ソース設定 ページHTMLを直接編集する方法。ブロックはSPIRAL ver.2の独自タグで挿入。
ページ作成後に詳細設定を行います。
ブロック設定 ページに設置したいブロックを選択。
1つのページに複数のブロック設置や並び順変更が可能。
head、CSS、JavaScript、PHP それぞれ専用の設置場所あり。
ビジュアル設定でもJavaScriptやPHPの設置が可能。
セキュリティ 外部サイトへの埋め込みに関してのクリックジャッキング対策設定や、
IPアドレス制限の設定が可能
ソース設定に変更すると、ページのHTML編集が可能となり、ブロックなしのWebページの作成もできるようになります。
また、HTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。
HTML のタグに属性を追加するだけで表示非表示の制御など実装可能なので、ソースコードの可読性が高くなります。

ページ 注目ポイント

動画を見る
※ページの注目ポイントについて説明している部分(5:09~)へジャンプします。
ページ 階層構造表示
ページ作成時に親ページを指定すると、ページを階層構造的に作成・管理することができます。
実際のサイトマップに近い形で管理画面上に表示されますので、サイト全体のページ把握や管理がしやすくなっています。
lang属性 設定
作成したページに対してlang属性の指定ができます。
多言語のWebサイト構築の際に、lang属性を指定することで、各ブラウザに言語コードを伝え、自動翻訳によるWebページを表示しやすくなります。
サイトファイル
ページに関わらずサイト管理全体としてのポイントですが、ファイルをアップロード・一元管理できるサイトファイルです。
ページやブロック上にロゴ画像の表示、ExcelファイルやPDFファイルのリンク挿入、CSSやJSファイルのサイト適用などに活用できます。
サイト構築用 テスト環境
サイト管理全体としてのポイントですが、サイト構築用のテスト環境です。
SPIRAL ver.2でのサイト構築は、テスト環境下で構築と動作テストを実施 > 動作テスト完了後にリリース > 本番環境へ公開 という流れとなります。
公開後も再リリースを行うまでは本番環境に影響はありませんので、改修時においてもテスト環境で安心して作業を行うことができます。

また、本番環境へのリリースは、要素ごとにリリース対象を選択することが可能です。
リリース対象にチェックを入れて、リリースボタンを押すだけで完了となります。

参考リンク

最後に

ページ はフォームだけでなくLPページなどの用途でも使用することができます。
また、様々な種類のファイル管理ができる サイトファイル や、安心して構築できる テスト環境 / 本番環境 も用意していますので、数多くのページを作成してみてください。
解決しない場合はこちら コンテンツに関しての
要望はこちら