小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

スマホサイトとPCサイトの新着情報を同時に更新する方法

最終更新日: 2013-09-02

PCサイト・スマホサイト同時更新の概要

「すぐ使えるCGI」を使ってPCサイトとスマホサイト (モバイルサイト、携帯サイト、スマートフォン用、スマートホン用) を同時に更新する方法をご紹介します。
同じ内容を複数のデザインで公開したい場合にも応用できます。

管理画面の方をスマホ対応にしたい場合

管理画面の方をスマホ・タブレット対応させる方法はこちらをご覧下さい。

画像やPDFなどのファイルをアップロードしたい場合

画像アップロード機能付き製品や添付ファイルアップロード付き製品には下記でご紹介する方法は使用できません。
画像も表示したい場合は、2013年9月現在であれば「レスポンシブWebデザイン」(※1)で1つのページをスマホ(含タブレット)とPC両方に対応させるのがお勧めです。

※1 「レスポンシブWebデザイン」とは?
「レスポンシブWebデザイン」のページのサンプルはこちら

レスポンシブWebデザインは検討されない場合で画像やファイルのアップロードが必要な場合は有料カスタマイズをご検討下さい。

スマホサイトとPCサイト両用の管理画面イメージ図

一つの管理画面から更新して、PCサイトとスマホサイトを同時に更新できます。

オンラインデモ (スマホサイトとPCサイトの新着情報を同時に更新)

PCサイトスマホサイト同時更新

PCサイト・スマホサイト同時更新対応製品

この方法に対応しているのは以下の製品です。

PC・スマホ同時更新 CMS 管理画面設定方法

上記のどの製品も同様に編集できますが、ここでは「ウェブページ更新ツール 大容量版 Ver. 4.2」での編集例をご紹介します。

準備:製品の設置

ダウンロードと設置

ウェブページ更新ツール 大容量版」または上の対応製品のリンクからお好みの製品をダウンロードしてサーバに設置して下さい。 (製品比較表はこちら。)

設置が初めての方は「ステップ by ステップガイド」または「クイックガイド」 (2回目以降またはCGIの設置に慣れている方向け) を参照して下さい。
テストで使用する場合、無料トライアルでご利用いただけます。

テスト登録

テストとして記事が1件登録できることを確かめて下さい。

ファイルのコピーと再配置

基本的な設置が終わったら、PC・スマホ同時更新ができるように設定をしてきます。

やろうとしていること

「すぐ使えるCGI」で編集した更新情報は ディレクトリ data/ の中に保存されます。この保存用ディレクトリ data/ を共有した2つの管理画面を作り、2種類のデザインでページを書き出します。
下記の方法で順番に設定して下さい。

ディレクトリの準備

「準備」が終わった段階で、サーバ上のディレクトリは以下のようになっていると思います。

cgi-bin/    <-- 元からあったディレクトリ
 |-- sugu/  <-- 「準備」で設置。名前は任意。
      |-- admin/
      |-- data/
      |-- templates/
      `-- webdir/


これを、最終的に以下のような構成にします。順番にやりましょう。

cgi-bin/    <-- 元からあったディレクトリ
 |-- sugu/  <-- 「準備」で設置。名前は任意。
 |    |-- admin/
 |    |-- data/
 |    |-- templates/
 |    `-- webdir/
 |-- sugu-mobile/
      |-- admin/
      |-- templates/
      `-- webdir/


作業用ディレクトリのコピー

作業用のローカルパソコンに、上記と同様の配置でディレクトリ sugu-mobile/ を作成して下さい。
作成した sugu-mobile/ の中に、sugu/ の中にある admin/、templates/、webdir/ をコピーして下さい。なお、webdir/ の中は空の筈です。

sugu-mobile/ がスマホサイト用、sugu/ が PCサイト用です。

スマホサイト用ファイルの編集

スマホサイト用の設定をします。以下の2つのファイルを順番に編集します。

  • sugu-mobile/admin/admin.cgi
  • sugu-mobile/templates/article/article.html

sugu-mobile/admin/admin.cgi 65行目「データディレクトリ」の編集 (必須)

sugu-mobile/admin/admin.cgi を開いて 65行目付近にある 環境変数「データディレクトリ」 $conf{data_dir} の値を sugu/data/ を指すように変更します。

「データディレクトリ」 $conf{data_dir} の編集例:編集前

#--------------------------------------------------------[line 065]--
# データディレクトリ
#--------------------------------------------------------------------
# アーカイブに含まれていた data/ ディレクトリへのパスを指定します。
# 相対パスでも絶対パスでも指定できます。
# Windowsで稼動させる場合、絶対パスでないとアクセスできない場合があり
# ます。

$conf{data_dir} = '../data/';

「データディレクトリ」 $conf{data_dir} の編集例:編集後)

#--------------------------------------------------------[line 065]--
# データディレクトリ
#--------------------------------------------------------------------
# アーカイブに含まれていた data/ ディレクトリへのパスを指定します。
# 相対パスでも絶対パスでも指定できます。
# Windowsで稼動させる場合、絶対パスでないとアクセスできない場合があり
# ます。

$conf{data_dir} = '../../sugu/data/';

Windows サーバ で IIS (Internet Information Server) をお使いの場合や絶対パス指定をお使いの場合

絶対パスで sugu/data/ が指定されていれば変更は不要です。

変更が不要な例:

$conf{data_dir} = 'C:/Inetpub/wwwroot/sugu/data/';

$conf{data_dir} = '/home/user/htdocs/sugu/data/';



sugu-mobile/admin/admin.cgi 170行目「一覧に表示する件数」の編集 (任意)

引き続き同じファイル sugu-mobile/admin/admin.cgi を編集します。
スマホサイトで1ページに表示する件数を少なく設定したい場合は 170行目付近の 環境変数「一覧に表示する件数」 $conf{index_list_no} の値を変更して下さい。
※製品によってはこの設定はありません。

「一覧に表示する件数」 $conf{index_list_no}:編集前

#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。

$conf{index_list_no} = 10;

「一覧に表示する件数」 $conf{index_list_no}:編集後)

#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。

$conf{index_list_no} = 5;

Windows サーバ で IIS (Internet Information Server) をお使いの場合や絶対パス指定をお使いの場合

設定に絶対パスを利用している場合は以下の変数も修正して下さい。

80行目付近 「テンプレート格納ディレクトリ」$conf{templatedir} 他

絶対パスで sugu/templates/ が指定されていたら、sugu-mobile/templates/ を指すように修正して下さい。
※2の指定は製品によってはありません。

設定例:

$conf{templatedir} = 'C:/Inetpub/wwwroot/sugu-mobile/templates/';
$conf{admin_templatedir} = 'C:/Inetpub/wwwroot/sugu-mobile/templates/admin/'; ※2
$conf{article_templatedir} = 'C:/Inetpub/wwwroot/sugu-mobile/templates/article/'; ※2

$conf{templatedir} = '/home/user/htdocs/sugu-mobile/templates/';
$conf{admin_templatedir} = '/home/user/htdocs/sugu-mobile/templates/admin/'; ※2
$conf{article_templatedir} = '/home/user/htdocs/sugu-mobile/templates/article/'; ※2


125行目付近 「ファイル書き出しウェブディレクトリ」$conf{web_dir}

絶対パスで sugu/webdir/ が指定されていたら、sugu-mobile/webdir/ を指すように修正して下さい。

設定例:

$conf{web_dir} = 'C:/Inetpub/wwwroot/sugu-mobile/webdir/';

$conf{web_dir} = '/home/user/htdocs/sugu-mobile/webdir/';


140行目付近 $conf{relative_web_dir}

サーバルートからの絶対パスで /cgi-bin/sugu/webdir/ 等の指定になっていたら、sugu-mobile/webdir/ を指すように修正して下さい。

設定例:

$conf{relative_web_dir} = '/cgi-bin/sugu-mobile/webdir/';


sugu-mobile/templates/article/article.html 記事用テンプレートの編集 (確認用)

生成されたページの違いを分かりやすくするために、sugu-mobile/templates/article/article.html に「スマホサイト」などの表示を追加しておきます。
なお、このページは後で本格的にデザイン調整して下さい。

sugu-mobile/templates/article/article.html 編集例 (一部)

<body bgcolor="#ffffff">

このページはスマホ用です
<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="index.html">↑トップ一覧へ</a></td>
<td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

<h1>%_subject_%</h1>
<div align="right">
<p>%_yyyy_%/%_mm_%/%_dd_%</p>
</div>

%_body_%

アップロードと記事生成の確認

sugu-mobile/ のアップロード

sugu-mobile/ ディレクトリを中身のファイルごとサーバ上の sugu/ と同じ場所にアップロードして下さい。
以下のようなディレクトリ配置になります。

cgi-bin/    <-- 元からあったディレクトリ
 |-- sugu/  <-- 「準備」で設置。
 |    |-- admin/
 |    |-- data/
 |    |-- templates/
 |    `-- webdir/
 |-- sugu-mobile/  <-- 新たにアップロード。
      |-- admin/
      |-- templates/
      `-- webdir/


パーミッションの設定

sugu/ と同じように sugu-mobile/ にもパーミッションの設定をします。以下のように設定して下さい。

sugu-mobile/admin/admin.cgi -> 実行権限。 755、rwxr-xr-x
sugu-mobile/webdir/ -> 書き込み権限。 700、707 など。sugu/webdir/ と同じ設定。


スマホサイト用 管理画面一覧にアクセス

新たに設置した sugu-mobile/admin/admin.cgi にブラウザからアクセスして下さい。
先ほど sugu/admin/admin.cgi で登録した記事がすでに管理画面一覧に表示されるはずですので確認して下さい。

なお、「編集結果をチェック:全一覧」のリンクをクリックすると、まだ書き出しは行っていないので「404 Not Found 見つかりません」などが表示されますが、これは正常です。

スマホサイト用 ページ再構築

一覧の下にある「再構築 (テンプレート変更反映)」ボタンを押して下さい。

記事の「チェック」のリンクから表示を確認すると、今度は、先ほどテンプレートファイルに設定した「スマホ用」などの表記があるページが表示されるはずです。
他のページも確認して下さい。


自動更新の設定

ここまでは、PCサイト用、スマホサイト用にそれぞれ管理画面を操作してページの生成を行いましたが、PCサイト用の管理画面で編集を行えば自動的に携帯サイトにも反映されるようにします。

下記のように設定して下さい。

sugu-mobile/templates/admin/1.html の編集

sugu-mobile/templates/admin/1.html  (スマホサイト用管理画面) を以下のように編集して下さい。
グレーが削除する部分 (1か所)、赤字が追加する箇所 (3か所) です。

sugu-mobile/templates/admin/1.html 編集後

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<TITLE>Webサイト管理ツール</TITLE>
<STYLE type="text/css">
<!--
p, ol, ul, li {
    line-height: 150%;
}
:
(省略)
:
-->
</STYLE>
<script type="text/javascript"><!--
var ifsubwin = 0;
function set_param(d,m,s,n){
    document.forms[0].s.value = s;
    document.forms[0].d.value = d;
    document.forms[0].m.value = m;
    document.forms[0].n.value = n;
    if (m == 9 && s == 4){
        return do_conf();
    }
}
function close_subwin(){
    if (ifsubwin == 1){
        mysubwin.close();
    }
    return true;
}
function show_wait(){
    mysubwin = window.open('','subwin','scrollbars=no,resizable=no,width=300,height=200');
    mysubwin.document.open("text/html;charset=UTF-8");
    mysubwin.document.write('<'+'body bgcolor="#ffffff"'+'><'+'h1>');
    mysubwin.document.write('書き出し中です...</');
    mysubwin.document.write('h1><'+'p>このウィンドウが閉じるまでお待ち下さい。</');
    mysubwin.document.write('p></'+'body>');
    mysubwin.document.close();
    mysubwin.focus();
}
function do_conf(){
    if (confirm("現在の設定と... (省略) ...よろしいですか?")){
        show_wait();
        ifsubwin = 1;    
        return true;
    } else {
        return false;
    }
}
function auto_republish(){
    var myUrl = document.URL;
    var queryPos = myUrl.indexOf("?autorepublish", 0);
    if (queryPos > 0){
        var btn4repub = document.getElementById("repub");
        if (btn4repub){
            btn4repub.click();
        }
    }
}
// --></script>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onUnload="close_subwin();" onLoad="auto_republish();">
<H1>Webサイト管理ツール</H1>
:
(省略)
:

<INPUT type="submit" onClick="return set_param('',9,4,0)" 
value="再構築 (テンプレート変更反映) " id="repub">

</FORM>
</BODY>
</HTML>

sugu/templates/admin/1.html の編集

sugu/templates/admin/1.html  (PCサイト用管理画面) を以下のように編集して下さい。
スマホサイトに更新を反映させる機能の設定の他、スマホサイトのチェック用のリンクを追加しています。
赤字が追加、青字が変更する部分です。

sugu/templates/admin/1.html 編集後

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<TITLE>Webサイト管理ツール</TITLE>
<STYLE type="text/css">
:
(省略)
:
</STYLE>
<script type="text/javascript"><!--
var ifsubwin = 0;
:
(省略)
:
function do_conf(){
    if (confirm("現在の設定と... (省略) ...よろしいですか?")){
        show_wait();
        ifsubwin = 1;    
        return true;
    } else {
        return false;
    }
}
function set_autorepublishsrc(){
    var subAdminPath = "../../sugu-mobile/admin/admin.cgi"; //スマホ用管理画面へのパスを指定
    var mainUrl = document.URL;
    var queryPos = mainUrl.indexOf("?", 0);
    if (queryPos < 0 && "%_m_%" != ""){
        var subFrame = document.getElementById("repubframe");
        if (subFrame){
            subFrame.src = subAdminPath+"?autorepublish&amp;i=%_i_%";
        }
    }
}
// --></script>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onUnload="close_subwin();" onLoad="set_autorepublishsrc();">
<iframe style="visibility:hidden;width:1px;height:1px;" id="repubframe"></iframe>
<H1>Webサイト管理ツール</H1>
<FORM ACTION="%_myname_%" METHOD="post">
<INPUT TYPE="hidden" name="s" value="">
<INPUT TYPE="hidden" name="m" value="">
<INPUT TYPE="hidden" name="d" value="">
<INPUT TYPE="hidden" name="cd" value="">
<INPUT TYPE="hidden" name="n" value="">
<INPUT TYPE="hidden" name="i" value="%_i_%">
<INPUT type="submit" onClick="set_param('',0,2,0)" value="新規登録">&nbsp;
<INPUT type="button" onClick="window.location='%_myname_%?n=%_n_%&amp;i=%_i_%'" 
value="一覧を最新に更新">&nbsp;&nbsp;
<p>
編集結果をチェック (メイン) :
[<A HREF="%_relative_web_dir_%%_this_filename_%" TARGET="check">全一覧このページ</A>]
[<A HREF="%_relative_web_dir_%%_index_filename_%" TARGET="check">全一覧トップ</A>]
[<A HREF="%_relative_web_dir_%%_short_list_filename_%" TARGET="check">短い一覧</A>]
[<A HREF="%_relative_web_dir_%%_top_filename_%" TARGET="check">最新</A>]
[<A HREF="%_relative_web_dir_%%_rss_list_filename_%" TARGET="check">RSS</A>]
<br>
編集結果をチェック(サイト2):
[<A HREF="../../sugu-mobile/webdir/index.html" TARGET="check">全一覧トップ</A>]
[<A HREF="../../sugu-mobile/webdir/index_short.html" TARGET="check">短い一覧</A>]
[<A HREF="../../sugu-mobile/webdir/top.html" TARGET="check">最新</A>]
[<A HREF="../../sugu-mobile/webdir/new.xml" TARGET="check">RSS</A>]
</p>

<NOSCRIPT><P CLASS="msg_error">JavaScriptを有効にして下さい。</P></NOSCRIPT>
<P>%_msg_instruct_%</P>

<p>
%_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
<a href="%_page_first_%">[先頭]</a>
<a href="%_page_prev_%">[前]</a>
ページ: %_page_list_%
<a href="%_page_next_%">[次]</a>
<a href="%_page_last_%">[最後]</a>
</p>

<TABLE border="0" cellspacing="1" cellpadding="6" WIDTH="750" BGCOLOR="#333333">
<TR>
<TH CLASS="theader" rowspan="2">日付</TH>
<TH CLASS="theader" rowspan="2">タイトル</TH>
<TH CLASS="theader" rowspan="2">編集</TH>
<TH CLASS="theader" rowspan="2">削除</TH>
<TH CLASS="theader" rowspan="2" colspan="2">順番</TH>
<TH CLASS="theader" colspan="2">チェック</TH>
</TR>
<TR>
<TH CLASS="theader">メイン</TH>
<TH CLASS="theader">サイト2</TH>
</TR>

<!-- article list : generate from 1.txt -->
%_article_list_%


</TABLE>

<p>
%_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
<a href="%_page_first_%">[先頭]</a>
<a href="%_page_prev_%">[前]</a>
ページ: %_page_list_%
<a href="%_page_next_%">[次]</a>
<a href="%_page_last_%">[最後]</a>
</p>

<INPUT type="submit" onClick="return set_param('',9,4,0)" value="再構築 (テンプレート変更反映) ">

</FORM>
</BODY>
</HTML>

sugu/templates/admin/1.txt の編集

sugu/templates/admin/1.txt を以下のように編集して下さい。
スマホサイト用のチェック用のリンクを追加しています。
赤字が追加する部分です。

sugu/templates/admin/1.txt 編集後

<TR>
<TD CLASS="contents" NOWRAP>%_yyyy_%/%_mm_%/%_dd_%</TD>
<TD CLASS="contents">%_subject_%</TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,1,2,%_n_%)" value="編集"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,2,3,%_n_%)" value="削除"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,3,4,%_n_%)" value="上へ"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,4,4,%_n_%)" value="下へ"></TD>
<TD CLASS="button"><A HREF="%_relative_web_dir_%%_d_%.html" TARGET="check">チェック</A></TD>
<TD CLASS="button"><A HREF="../../sugu-mobile/webdir/%_d_%.html" TARGET="check">チェック</A></TD>
</TR>

アップロード

編集した以下のファイルをサーバにアップロードして下さい。

sugu/templates/admin/1.html
sugu/templates/admin/1.txt
sugu-mobile/templates/admin/1.html


PC用管理画面にアクセス

PC用管理画面 sugu/admin/admin.cgi にブラウザからアクセスして下さい。
先ほど追加したチェック用のリンクが画面に反映されているはずです。

確認

PC用管理画面から1件記事の登録を行って下さい。
今度は、携帯要管理画面で再構築を行わなくても、スマホサイトに変更が反映されるはずです。スマホサイト用のチェックのリンクから確認して下さい。

さらに詳しく