ReachOut - Framework For HTML

ドキュメント

Sat, 14 Mar 2026 10:09:11 +0900

ドキュメント

ホーム

Sat, 14 Mar 2026 10:04:00 +0900

ReachOut（リーチアウト）とは

ひとことで説明するとウェブページを作るためのPHPスクリプト。

正直、フレームワークと呼べるほど機能は多くはないが動きは軽快。
ウェブページのヘッダとフッタを共通化するだけの低機能スクリプト。

このスクリプトの配下にフォルダを作り、HTMLファイルを配置すると動く。

なぜこのスクリプトを作ったか

私は、ウェブページを作るとき、テキストエディタでHTMLタグを入力して作っている。
理由は、無駄なHTMLを出力せず、なるべく正しいHTMLにしたいから。

w3cのHTML文法チェックをパスするページにしたい。（このページのチェック結果）

テキストエディタだけで、ウェブサイトのメンテナンスをするのはもちろん大変。
そこで、フリーのcmsをいくつか試してみた。
Drupal, Joomla, MODx, ..... どれも重い、いらいらする。

私の欲しい機能はほんの少し、

サイト全体のデザインを簡単に変更できる
キャッシュ
RSS配信

動作が軽いフレームワークが欲しい！　たとえ低機能でも。

「欲しい物が無いなら作るしかない。」

機能

ヘッダとフッタの共通化（サイト全体、フォルダ単位も可能）
CSSファイルが自動で読み込まれる（フォルダ単位に可能）
コンテンツにPHPスクリプトを埋め込み可能
＜HEAD＞タグに文字を挿入する（フォルダ単位に可能）
キャッシュ（PEAR:Cache_Liteを使用）
RSS配信は手動（マニュアル参照）

動作環境

PHP5
.htaccess が使える

あとはFTPクライアントが大活躍。（私はWinSCPを愛用）

ダウンロード

これはフリーソフトです。

テキストエディタでウェブページを作っている方のお役にたつかも．．．。

このソフトを利用した事によるいかなる損害も私は一切の責任を負いません。
自己の責任の上でどうぞ。

ライセンスは、BSDです。

ソースはgithubにあります。github - reachout --- version 0.2.2 modified 2026/03/13 Charset: UTF-8

ダウンロードページへ

インストール

インストール手順

マニュアル

簡単だけど、マニュアルあり。

詳しくは、index.php のソースを見るとわかる。

名前の由来

私の大好きなジョージ・デュークの曲名から拝借。 » ライト・メッセージ

お問い合わせ

もし何かあれば、メールでどうぞ

email : reachout.script@gmail.com

CSSファイルでデザイン

Fri, 13 Mar 2026 16:41:00 +0900

CSSファイルでデザイン

レイアウトファイルとCSSファイルでウェブページのデザインをする。

レイアウトファイルとCSSファイルはセットになるので、レイアウトファイルにCSSのタグを書き込む。

このとき、CSSファイルを設置するディレクトリ名に css という名前は使えない。
css という名前は、ディレクトリ単位のCSSファイルで使用するため。

ルートに設置するか、ディレクトリを作って設置する場合は、css という名前で始まらないとうまく動かないため、css_def 等の名前にする。

例．ルートに css_default というディレクトリを作ってCSSファイルを配置した場合（7行目）


01: <!DOCTYPE html>
02: <html lang="ja">
03: <head>
04:     <meta charset="<?= $charset ?>">
05:     <base href="<?= $pageUrlFull ?>">
06:     <title><?= $title ?></title>
07:     <link rel="stylesheet" href="<?= $homeDir ?>/css_default/default.css">
08:     <?= $css ?>
09: 
10:     <?= $header ?>
11: 
12: </head>
13: <body>
14: <?= $contents ?>
15: 
16: </body>
17: </html>

CSSファイルを追加できる

以下のようなファイル構造の場合、

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　layout　───　default.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　css_default　───　default.css (1)
　　　　　　　　　　　│
　　　　　　　　　　　└─　folder01　─┬─　test01.html
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　├─　layout　───　default.php
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　└─　css 　─┬─　base.css (2)
　　　　　　　　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　　　　　　　　├─　reset.css (3)
　　　　　　　　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　　　　　　　　└─　fonts.css (4)

test01.html をリクエストした場合、レイアウトファイルの CSSタグは以下のようになる


<link rel="stylesheet" type="text/css" href="/css_df/default.css"> (1)

<link rel="stylesheet" href="/folder01/css/base.css"> (2)

<link rel="stylesheet" href="/folder01/css/fonts.css"> (4)

<link rel="stylesheet" href="/folder01/css/reset.css"> (3)

カレントディレクトリに css ディレクトリがあれば、その中の css ファイルを自動的に読み込む。親のディレクトリは探さない、カレントディレクトリのみ。

＜head＞タグにちょっと追加したい

Fri, 13 Mar 2026 16:41:00 +0900

＜head＞タグにちょっと追加したい

このページだけ、＜head＞タグのなかに記述を追加したい時がある。
たとえば、metaタグを使いたいときなど。

そんな時は、カレントディレクトリのレイアウトディレクトリに header.php を配置すると自動的に読み込む。

例．

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　layout　───　default.php (1)
　　　　　　　　　　　│
　　　　　　　　　　　├─　css_default　───　default.css
　　　　　　　　　　　│
　　　　　　　　　　　└─　folder01　─┬─　test01.html
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　└─　layout　───　header.php (2)

test01.html がリクエストされると、default.php (1) の＜head＞タグのなかに header.php (2) が挿入される。

ただし、以下のレイアウトファイルのように、変数 $header を出力する必要あり（10行目）。


01: <!DOCTYPE html>
02: <html lang="ja">
03: <head>
04:     <meta charset="<?= $charset ?>">
05:     <base href="<?= $pageUrlFull ?>">
06:     <title><?= $title ?></title>
07:     <link rel="stylesheet" href="<?= $homeDir ?>/css_default/default.css">
08:     <?= $css ?>
09: 
10:     <?= $header ?>
11: 
12: </head>
13: <body>
14: <?= $contents ?>
15: 
16: </body>
17: </html>

まずはレイアウトを作る

Fri, 13 Mar 2026 16:41:00 +0900

まずはレイアウトを作る

レイアウトファイルとは、HTMLファイルの外側の記述。
各ページで共通に表示したい外枠の部分。

例．


01: <!DOCTYPE html>
02: <html lang="ja">
03: <head>
04:     <meta charset="<?= $charset ?>">
05:     <base href="<?= $pageUrlFull ?>">
06:     <title><?= $title ?></title>
07:     <link rel="stylesheet" href="<?= $homeDir ?>/css_default/default.css">
08:     <?= $css ?>
09: 
10:     <?= $header ?>
11: 
12: </head>
13: <body>
14: <?= $contents ?>
15: 
16: </body>
17: </html>

14行目の <?php echo $contents;?> にコンテンツが流し込まれて表示される。
この例では、1行目から13行目までと15行目から最後までが共通部分となる。

このレイアウトファイルを共通化することにより、デザイン等の変更が簡単になる。

そしてレイアウトファイルとCSSで自由にデザイン可能。

注意）最低ひとつは、レイアウトファイルがないと動かない。

レイアウトファイルでよく使う変数

あらかじめよく使う変数を用意。以下がよく使う変数の一覧

index.php を設置する場所を
ルートの場合：https://www.hoge.com/ と仮定、
サブディレクトリの場合：https://www.hoge.com/sub/ と仮定し、
test.html がリクエストされた場合を例とした。

変数名	説明	ルートの場合	サブディレクトリの場合
$charset	文字コード	UTF-8など	UTF-8など
$pageUrlFull	表示されているファイルのURL	https://www.hoge.com/test.html	https://www.hoge.com/sub/test.html
$title	タイトル
$homeDir	ルートのディレクトリ	ブランク	/sub
$css	カレントディレクトリのCSSファイルのタグが挿入される
$header	カレントディレクトリのHEADERファイルが挿入される
$contents	リクエストされたファイルが挿入される

レイアウトファイルはディレクトリ単位に共通化できる

以下のようなファイル構造の場合、

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　layout　───　default.php(1)
　　　　　　　　　　　│
　　　　　　　　　　　├─　folder01　─┬─　test01.html
　　　　　　　　　　　│　　　　　　　　│
　　　　　　　　　　　│　　　　　　　　├─　layout　───　default.php(2)
　　　　　　　　　　　│　　　　　　　　│
　　　　　　　　　　　│　　　　　　　　└─　sub_01　───　test02.html
　　　　　　　　　　　│
　　　　　　　　　　　└─　folder02　─┬─　test03.html
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　└─　sub_02　───　test04.html

top.php のレイアウトは default.php(1)
test01.html のレイアウトは default.php(2)
test02.html のレイアウトは default.php(2)
test03.html のレイアウトは default.php(1)
test04.html のレイアウトは default.php(1)

カレントディレクトリのレイアウトディレクトリにレイアウトファイルがあれば、それを使う。なければ親のディレクトリを探すようになっている。

インストール手順

Fri, 13 Mar 2026 16:41:00 +0900

インストール手順

１．スクリプトをGitHubからダウンロードする >> reachout

２．ファイルを解凍後、env_sample.php をコピーして、ファイル名を env.php に変更

３．env.php をエディタで開いて、定数（サイト名等）を変更

// ReachOut Framework Configuration

// スクリプト情報
define('SCRIPT_VER', '0.2.1');
define('SCRIPT_MODIFIED', '2026/03/11');
// ディレクトリ設定
define('DS', '/');
define('LAYOUT_DIR', 'layout');
define('CSS_DIR', 'css');
define('CACHE_DIR', 'tmp');
// サイト設定
define('SITE_NAME', 'ReachOut - Framework For HTML');
define('TOP_PAGE', 'top.php');
define('LAYOUT_DEFAULT_FILE', 'default.php');
define('HEADER_FILE', 'header.php');
define('CHARSET', 'UTF-8');
define('HTTP', 'https://');
// CSSタグテンプレート
define('CSS_TAG', '');
// キャッシュ設定
define('CACHE_FLG', false);
define('CACHE_LIFE_TIME', 7200);
define('CACHE_STOP', false);
define('NO_CACHE_DIR', array('feed'));
// ファイル設定
define('INDEX_FILES', array('index.html', 'index.php', 'index.htm'));
define('NO_READ_FILES', array('env.php'));

キャッシュを使う場合は、

CACHE_FLG を true する
CACHE_LIFE_TIME を 1 以上に設定する（7200 なら2時間）

４．サーバにアップロードする（ホスト名：https://www.hogehoge.com と仮定）

５．.htaccess を以下のように記述して、index.php と同じ階層に置く

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.[^/\.]+$
RewriteRule .* %{REQUEST_URI}/ [L,R]
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css|js)$ [NC]
RewriteCond $1 !^(index\.php|images|css|js|old_source|robots\.txt)
RewriteRule ^(.*)$ index.php?file=$1 [L]

お好みで変えてみて

サブフォルダに設置する場合は（例．https://www.hogehoge.com/reach_out/）

RewriteEngine on
RewriteBase /reach_out
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.[^/\.]+$
RewriteRule .* %{REQUEST_URI}/ [L,R]
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css|js)$ [NC]
RewriteCond $1 !^(index\.php|images|css|js|old_source|robots\.txt)
RewriteRule ^(.*)$ /reach_out/index.php?file=$1 [L]

６．レイアウトファイルを設置

６－１．フォルダ layout を index.php と同じ階層に作成

６－２．以下のような内容で、default.php というファイルを作成


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="<?= $charset ?>">
    <base href="<?= $pageUrlFull ?>">
    <title><?= $title ?></title>
    <link rel="stylesheet" href="<?= $homeDir ?>/css_default/default.css">
    <?= $css ?>

    <?= $header ?>

</head>
<body>
<?= $contents ?>

</body>
</html>

６－３．フォルダ layout の中にアップロード

７．トップページを作成

７－１．以下のような内容で、top.php というファイルを作成

<!-- config_title:"Home" -->
<!-- config_layout:"default.php" -->
<!-- config_br:"no" -->
これはトップページです。

７－２．index.php と同じ階層にアップロード

以上で終了、以下のような構造になる。

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　env.php
　　　　　　　　　　　│
　　　　　　　　　　　└─　layout　───　default.php

https://www.hogehoge.com にブラウザでアクセスし、「これはトップページです。」と表示されれば成功

ダウンロード

Fri, 13 Mar 2026 16:41:00 +0900

ダウンロード

これはフリーソフトです。

テキストエディタでウェブページを作っている方のお役にたつかも．．．。

このソフトを利用した事によるいかなる損害も私は一切の責任を負いません。
自己の責任の上でどうぞ。

ライセンスは、BSDです。

ソースはGitHubにあります。GitHubからダウンロードしてください。

GitHub - reachout

更新履歴

あとはコンテンツを書く

Fri, 13 Mar 2026 16:41:00 +0900

あとはコンテンツを書く

レイアウトができたら。あとはコンテンツを書くだけ

例．

<!-- config_title:"コンテンツ" -->
<!-- config_layout:"default.php" -->
<!-- config_br:"no" -->
<p>これはコンテンツです。</p>

機能

少しだけ機能がある

コンテンツに以下のコメントを書くとレイアウトに反映される

タイトル

<!-- config_title:"コンテンツ" -->

このコメントのダブルクォーテーションで括られた文字が＜title＞タグに表示される。
この例では、タイトルが　コンテンツ　になる。

このコメントは必ず入れた方がよい。

レイアウト

<!-- config_layout:"hogehoge.php" -->

レイアウトファイルを指定できる。
この例では、レイアウトファイル　hogehoge.php を使用してコンテンツを表示。

初期値のレイアウトファイルを使う場合は、このコメントは必要ない。

改行をBRタグに変換

<!-- config_br:"yes" -->

上記のように書くと、改行をBRタグに変換する。

初期値は no 。改行をBRタグに変換しない場合は、このコメントは必要ない。

PHPのスクリプトを埋め込み可能

どんなコンテンツファイルもPHPのスクリプトとして実行されるため、PHPのスクリプトを埋め込むことができる。

例．現在の日付を表示


<!-- config_title:"コンテンツ" -->

<p>これはコンテンツです。</p>

<p>きょうは、<?php echo date("Y-m-d");?> です。</p>

マニュアル

Fri, 13 Mar 2026 16:41:00 +0900

マニュアル　使い方

概略

簡単言うと、ルートにスクリプトを設置し、あとはHTMLファイルをひたすら作成するだけ

RSS配信は手動

Fri, 13 Mar 2026 16:41:00 +0900

RSS配信は手動

RSSを出力する機能が欲しい

このReachOutスクリプトにはRSS配信を自動生成する機能は今のところ無い。

RSS配信を自動生成するには、どうすれば良いか考えた。

OSのfindコマンドで更新されたファイルを探す？
コンテンツの更新を覚える機能付ける（データベース？）

findコマンドはコンテンツ数が増えたら遅くなりそうなので却下。

データベース機能は、機能てんこ盛りの入口になってしまう気がするので却下。

なるべく楽したいと思い、gitを利用することにした。

ReachOut - Framework For HTML

ドキュメント

ドキュメント

ホーム

ReachOut（リーチアウト）とは

なぜこのスクリプトを作ったか

動作が軽いフレームワークが欲しい！ たとえ低機能でも。

機能

動作環境

ダウンロード

インストール

マニュアル

名前の由来

お問い合わせ

CSSファイルでデザイン

CSSファイルでデザイン

例．ルートに css_default というディレクトリを作ってCSSファイルを配置した場合（7行目）

CSSファイルを追加できる

＜head＞タグにちょっと追加したい

＜head＞タグにちょっと追加したい

例．

まずはレイアウトを作る

まずはレイアウトを作る

例．

レイアウトファイルでよく使う変数

レイアウトファイルはディレクトリ単位に共通化できる

インストール手順

インストール手順

１．スクリプトをGitHubからダウンロードする >> reachout

２．ファイルを解凍後、env_sample.php をコピーして、ファイル名を env.php に変更

３．env.php をエディタで開いて、定数（サイト名等）を変更

４．サーバにアップロードする（ホスト名：https://www.hogehoge.com と仮定）

５．.htaccess を以下のように記述して、index.php と同じ階層に置く

サブフォルダに設置する場合は（例．https://www.hogehoge.com/reach_out/）

６．レイアウトファイルを設置

６－１．フォルダ layout を index.php と同じ階層に作成

６－２．以下のような内容で、default.php というファイルを作成

６－３．フォルダ layout の中にアップロード

７．トップページを作成

７－１．以下のような内容で、top.php というファイルを作成

７－２．index.php と同じ階層にアップロード

以上で終了、以下のような構造になる。

ダウンロード

ダウンロード

あとはコンテンツを書く

あとはコンテンツを書く

例．

機能

タイトル

レイアウト

改行をBRタグに変換

PHPのスクリプトを埋め込み可能

例．現在の日付を表示

マニュアル

マニュアル 使い方

概略

目次

RSS配信は手動

RSS配信は手動

RSSを出力する機能が欲しい

動作が軽いフレームワークが欲しい！　たとえ低機能でも。

マニュアル　使い方