携帯サイト構築テンプレートエンジン |
|
|
携帯サイト構築テンプレートエンジンって何？
HTMLを使って自由自在にデザイン・レイアウトをしつつ、プログラムを書けない人でも簡単に特殊な機能をサイト上に持たせたい！…そういった要望にお応えしたいと思い開発したのが、この『携帯サイト構築テンプレートエンジン』です。
|
携帯サイト構築テンプレートエンジン 使い方/サンプルスクリプトの設置
以下のサンプルスクリプトをダウンロードし
実際にどのように設置/動作するかを確認することができます。
設置方法は、「マニュアル.txt」以外のファイル全てを、
そのまま好きな場所へアップロードするだけです。
※カウンタ機能を利用する方は、count.datのパーミッションを606に変更して下さい。
アップロード完了後「index.php」にアクセスするだけで、プログラムが動作します。
|
サンプルサイトの配布
実際に構築済みのテンプレートサンプルサイトです。そのまま使用してもOKです。
サンプルサイトを使いながらテンプレートエンジンの機能をご確認ください。
|
■テンプレートエンジンサンプル 01
ランダム画像表示サイト
( 自動更新風 )
サンプルサイトの表示
|
|
■テンプレートエンジンサンプル 02
画像ギャラリーサイト
( 自動更新風可 )
tpl01は画像のランダム表示でしたが、tpl02は指定した順番で画像を表示させることができます。
作品紹介・電子書籍系のサイトが簡単に作成できます。
サンプル内に3パターン一覧表示の方法掲載しています。
サンプルサイトの表示
|
|
例えば、「広告の張替え作業が面倒だ…」
例えば、「DoCoMoとauでは動画ファイルへのリンクの書き方が違って面倒だ…」
例えば、「テキストや画像をランダムに表示させたいが、プログラムの設置は面倒だ…」
携帯向けのサイトを作成していて、そう思った事はないでしょうか？
ご自分でプログラムを書ける人なら、上記の処理程度なら簡単に済ませてしまうかもしれませんが、普通の人はなかなかそうは行きません…よね？
…かといって、一般的な無料HP作成サービスには色々な制限事項があり、自分の思い通りのデザインやレイアウトが出来なかったりします。
HTMLを使って自由自在にデザイン・レイアウトをしつつ、プログラムを書けない人でも簡単に特殊な機能をサイト上に持たせたい！…そういった要望にお応えしたいと思い開発したのが、この『携帯サイト構築テンプレートエンジン』です。
HTMLはある程度書けるけどプログラムは無理！…という方は、是非一度お試し下さい。
|
|
『SPタグ』（スペシャルタグの略）と呼ばれる「##」で挟まれた特殊タグをHTMLに埋め込むだけで、様々な特殊な処理を行います。
↓にアクセスし「テンプレートのHTMLソース」(画面右上)をご覧になって下さい。
http://fs-server.net/sample_template/index.php?file=introduce.html
…通常ある筈の<body>タグがありませんよね？
その代わりに、##TEXT_FILE##というSPタグが使われています。
このSPタグは、あるファイルの中身をそのままそこに表示させたい時に使用するものです。
例えば、<body text="#000000" bgcolor="#ffffff" link="#0000ff" …>という<body>タグを書いたファイルを読み込ませれば、全てのページで色の設定を統一したり、全てのページのデザインを一気に変更したり…といった事が簡単に実現出来ますし、各ページで共通のフッタを表示させたりも出来ます。
##TEXT_RAND##は、あるファイルの中身からランダムにテキストを表示させたい時に使用するものです。
例えば、アフィリエイト収入を得る為の広告タグをランダムに表示させるという使い方が出来ますし、各ページで同じファイルを指定すれば、全ページの広告管理を、たった１つのテキストファイルを修正するだけで済ませる事が出来ます。
また、##GET_SITE##というSPタグを使えば、他のサービスで作成したサイトの内容（例ではランキングサイト）の指定した範囲を、自分のサイト内に取り込む事が出来ます。
その他、書き方が非常に面倒な動画ファイルへのリンクも、##MOVIE##というSPタグを使えばたった１行ですし、au/DoCoMo/SoftBankそれぞれに対して自動的に最も適切なタグで表示し、更にパソコンからのアクセスを制限したりも出来ます。
##COUNTER_EMOJI##というSPタグでカウンタを表示させたり、##UPDATE##というSPタグで更新日を自動で表示させたりも出来ます。
この『携帯サイト構築テンプレートエンジン』には、こういった特殊な機能を持つ『SPタグ』が、合計で30種類も揃っています。（要望次第で今後も追加予定です）
数が多いので使いこなすのは大変でしょうが、上手く使いこなせば、プログラミングの知識が全く無い人でも、高度なサイトを作れてしまうのです。
|
|
|
|
|
|
※特に何も変更しなくてもプログラムは動作します。
※設定を変更する必要が無い方・自信が無い方は、この項目は読み飛ばして下さい。
自分の使いやすいように設定をカスタマイズしたい方は、「index.php」ファイルを開き、
中に書かれている設定を変更してください。
◆define('UCFG_FLG_CONVERT_ZEN2HAN', '0');
'0'を'1'に変更すると、全角のアルファベットや数字を半角に変換してから表示するよう
になります。携帯向けにいちいち半角で書くのが面倒！という方は'1'にすると良いですが、
予期せぬ変換が行われる可能性もありますので注意して下さい。
◆define('UCFG_FLG_CONVERT_EMOJI', '0');
'0'を'1'に変更すると、PCからのアクセス時に絵文字部分を画像に変換します。
なお、絵文字を使ったサイト作成については、↓のソフトウェアを使う事をお勧めします。
http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/
◆define('UCFG_DEFAULT_TEMPLATE', 'index.html');
TOPページ表示用のテンプレートファイル名です。
必要に応じて自由に変更して下さい。
◆define('UCFG_DIR_TEMPLATE', './template/');
◆define('UCFG_DIR_IMG', './data/img/');
◆define('UCFG_DIR_MOVIE', './data/movie/');
◆define('UCFG_DIR_TEXT', './data/text/');
◆define('UCFG_FILE_COUNT', './data/count.dat');
ファイル構成を変えたい方は、自由に変更して下さい。
パスは「index.php」から見たパスを記述して下さい。
※パスとして「../」を含むものは使えませんので、ご注意下さい。
|
|
「template/」ディレクトリの中に、「.html」や「.htm」で終わるHTMLファイルを作成していくだけです。
ルール的には、普通にHTMLファイルを作成するのと全く同じです。
唯一の違いは、HTMLファイルの中に『SPタグ』を埋め込む事が出来るという点のみです。
初期状態では、「index.html」と「sample.html」と「sample_lock.html」という３つのファイルが入っています。
「index.html」は、デフォルトで表示されるページ（TOPページ）になりますので、削除はしないで自由に編集して使ってください。
index.phpに何も指定しないでアクセスした場合、このテンプレートファイルが読み込まれます。
「sample.html」は、『SPタグ』の使い方を簡単に紹介しているサンプルファイルです。
必要が無ければ削除しても構いません。
「sample_lock.html」は、鍵（パスワード制限）ページのサンプルファイルです。
こちらも必要が無ければ削除しても構いません。
|
|
例えば「sample.html」を表示させたい場合、「index.php?file=sample.html」でアクセスします。
もし「test.html」というファイルを新しく作成した場合、そのファイルを表示するには「index.php?file=test.html」でアクセスします。
つまり、「index.php?file=○○○」（○＝テンプレートファイル名）でアクセスすれば、その○○○で指定したテンプレートファイルが表示されるという仕組みです。
○○○を何も指定しないでアクセスした場合は、自動的に「index.html」が表示されます。
|
|
『SPタグ』の書式は、基本的に２種類あります。
◆##○○##
○に特定の文字列を書いて「##」で挟むだけです。
◆##○○-□□##
○に特定の文字列を書き、オプションを「-」（ハイフン）の後に書いて「##」で挟みます。
□は各SPタグによって様々な書式があります。（後述）
※○に使える文字列は次の項で説明しますが、必ず「半角」の「大文字」で書くという点にご注意下さい。
##URL##というSPタグを例に説明しますと、以下の書き方は全て間違いです。ご注意下さい。
・＃＃URL＃＃ ⇒ 「#」が全角になっている
・##url## ⇒ 「URL」が小文字になっている
・##ＵＲＬ## ⇒ 「URL」が全角になっている
|
|
特別な書式を加えると、携帯キャリア毎に違う処理結果を出す事が出来るようになります。
書式：##△:○○##
△：キャリア指定，○：SPタグ
◆例1：DoCoMo/au利用者で別々の動画ダウンロード用リンクを表示
http://fs-server.net/sample_template/index.php?file=advance1.html
◆例2：パソコンからのアクセス時のみ、<table>タグで枠線を付ける
http://fs-server.net/sample_template/index.php?file=advance2.html
◆例3：パソコンとSoftBankからのアクセス時に、別のテンプレートファイルを表示する
http://fs-server.net/sample_template/index.php?file=advance3.html
△のキャリア指定には下記の10種類の書式が使用できます。
この書式は、全てのSPタグに対して有効です。
◆IPアドレスによる判定
・d: ⇒ DoCoMoからのアクセスのみSPタグを有効にする
・a: ⇒ auからのアクセスのみSPタグを有効にする
・s: ⇒ SoftBankからのアクセスのみSPタグを有効にする
・m: ⇒ 携帯からのアクセスのみSPタグを有効にする
・p: ⇒ パソコンからのアクセスのみSPタグを有効にする
◆ユーザーエージェントによる判定
・D: ⇒ DoCoMoからのアクセスのみSPタグを有効にする
・A: ⇒ auからのアクセスのみSPタグを有効にする
・S: ⇒ SoftBankからのアクセスのみSPタグを有効にする
・M: ⇒ 携帯からのアクセスのみSPタグを有効にする
・P: ⇒ パソコンからのアクセスのみSPタグを有効にする
※半角/全角，大文字/小文字の違いにご注意下さい。
「IPアドレスによる判定」と「ユーザーエージェントによる判定」との違いに関しては、「IPアドレスによる判定」の方がより厳密な判定であるとお考え下さい。
ただし、「IPアドレスによる判定」の場合、PCサイトビューワー（フルブラウザ）・携帯アプリ・パケ割サイト経由のアクセスの場合、携帯を使っていてもパソコンとして判定されてしまいますのでご注意下さい。
逆に、「ユーザーエージェントによる判定」の場合、パソコンで使用しているブラウザの設定次第で、パソコンからのアクセスでも、携帯からのアクセスであるかのように振舞う事が出来ます。
|
|
【Ｑ】<img>タグを使って画像を表示させようとしても上手く表示されないのですが？
【Ａ】<img src="○"> の「○」の部分には、プログラム本体である「index.php」からのパスを入力して下さい。テンプレートファイルからのパスではありませんので、ご注意下さい。
【Ｑ】SPタグの中にSPタグを入れる（入れ子）にする事は出来ますか？
【Ａ】##〜##が複数行にまたがるのは大丈夫ですが、##○○-##□□####のような入れ子の書き方には対応していません。
【Ｑ】デフォルトのテンプレートファイル名を「index.html」以外にしたいのですが？
【Ａ】「index.php」を開くと設定箇所があります。自由に設定して下さい。
【Ｑ】プログラム本体の名前を「index.php」以外にしたいのですが？
【Ａ】拡張子が「.php」であれば、どんなファイル名にしても構いません。「##URL##」のようなSPタグでも問題なく動作します。
その他ご質問がある方は、下記サポート掲示板でお問い合わせ下さい。
http://fs-server.net/support.html
|
|
テンプレートファイルは、必ず「シフトJIS」で記述して下さい。
その他の文字コードでは文字化けを起こします。
※「シフトJIS」が何かよく分からない方は、特に気にする必要はありません。
このプログラムは、フリースタイル上でしか動作しません。
プログラムを他のサーバーに置いても動作しませんので、ご了承下さい。
|
|
このプログラムの著作権はフリースタイル運営者にあります。
プログラムの改変・フリースタイル以外での配布は一切認めません。
|
|
|
当プログラムを使用して発生した如何なるトラブル・損失に関して、フリースタイルは一切の責任を負わないものとします。
|
|
|
|
機能追加やバグ修正の告知については↓で行います。
http://fs-server.net/
なお、このプログラムに機能追加やバグ修正があった場合でも、基本的に、設置済みのプログラム・テンプレートファイル・その他のファイル等を、変更したり設置しなおしたりする必要はありません。
|
|
