フィード
ページが複雑になると、コンポーネントを多用するようになります。その結果、コンポーネントのパス path="/abc" を毎回入力するのが手間となり、管理が困難になります。この問題を解決するために、Essepageではインポート機能を提供しています。 基本的にインポートはコンポーネントと同じですが、自由にタグを定義して使えるオプションを提供するため、より便利に利用できます。 使用方法 インポートは定義部分と使用部分に分かれています。 インポートの定義 インポートを使用するためには、まずインポートを使ってカスタムタグを定義します。この際、使用するコンポーネントを指定します。 <essepag...
Published 5 months ago
スロットを使用すると、コンポーネントをより便利に使うことができます。 コンポーネント内部に<essepage-slot></essepage-slot>タグでスロット領域を指定すると、コンポーネント使用時にそのスロット領域に任意のコンテンツを挿入することができます。 使用方法 ページの任意の位置に次のようにコンポーネントを使用し、スロットに挿入する内容を追加すればOKです。 コンポーネントの作成 <div> <h2>スロットコンテンツテスト</h2> <essepage-slot></esse...
Published 5 months ago
ウェブページを作成する際、ナビゲーションメニューのように複数のページに共通して表示される部分があります。 エスページでは、こうした共通エリアを独立したファイルとして作成し、各ページに挿入できるようにするために コンポーネント 機能を提供しています。 使い方 ページ内の好きな場所にコンポーネントファイルを挿入するには、以下の形式で入力します。 <essepage-component path="/component/path/here"></essepage-component> /component/path/here の部分には、挿...
Published 5 months ago
NOTE このドキュメントは、SSR (サーバーサイドレンダリング)、CSR (クライアントサイドレンダリング)、および JavaScript の基本知識が必要です。 Essepageは、SSRとCSRの両方を利用して動作します。SSRとCSRがどのように連携して動作するかを理解することで、モダンフロントエンド開発が可能になります。 SSR (サーバーサイドレンダリング) Essepageで作成されたページは、SSRを使用して動作します。すべてのページは基本的にSSRで動作しますが、JavaScriptを使用して動的に実装された部分は除外[1]されます。 [1] これを解決するために、Esse...
Published 5 months ago
エスページでは、URLを使ってページに値を渡す方法として、従来のGET方式だけでなく、フォルダ名を値として渡す「パラメータフォルダ」を利用してページに値を渡すことができます。 例えば、次のようにURLのカテゴリ名部分を自由に設定し、その値をページで利用することが可能です。 https://espg.dev/mysite/category/カテゴリ名 今回は、URL内のカテゴリ名をページに表示する方法を紹介します。 パラメータフォルダの作成 パラメータフォルダは、通常のフォルダと同じように作成しますが、[フォルダ名]のように、[と]で囲んでフォルダ名をパラメータ名として扱います。 まず、/pub...
Published 5 months ago
エスページのルーティングはファイルシステムをベースにしています。Windows、MacOS、Linuxなど、一般的なオペレーティングシステムに慣れている方なら、簡単に理解できるでしょう。 もし、Essepage IDが mypage もしくは mydomain.com に設定されている場合、ファイルとURLは次のようにマッチングします。 [ホームページ] /public/+page.essepage => https://espg.dev/mypage https://mydomain.com /public/index.html => https:...
Published 5 months ago
HTMLページは大きく分けて <head></head> と <body></body> の部分で構成されています。 Essepageでウェブページを作成すると、基本的にコンテンツは <body></body> 内に表示されます。そのため、 <head></head> 内にコンテンツを追加するには、特別なタグを使用する必要があります。 使い方 <head></head> 内にコンテンツを追加するには、 <essepage-head></essepag...
Published 5 months ago
HTMLファイルの各部分を見ていきましょう。 <!DOCTYPE html> <html> <head> <title> My First Webpage </title> <meta charset="utf-8"> </head> <body> Hello World! </body> </html> <!DOCTYPE html> このタグは、ブラウザに「このページはHTML5で書かれている」と伝えるためのものです。HTMLファイ...
Published 5 months ago
エスページのページ構造 エスページの構造を理解するために、まず一般的なウェブページの構造と比較してみましょう。 ウェブページは通常、次のように構成されています。（HTML、CSS、JavaScriptおよびウェブページに関してよくわからない場合は、HTML関連の書籍でまずウェブページについての知識をある程度習得することをお勧めします。） 一般的なウェブページの基本HTML構造 <!DOCTYPE html> <html> <head> <title>私のウェブページ</title> <meta charset="utf...
Published 5 months ago
