国産CMS「SOY CMS」でブログサイト作成 | 趣味でプログラミング

WordPressなどほとんどのCMS(コンテンツマネジメントシステム)には、MySQL(オープンソースデータベース)が必要です。MySQLが使えない無料や安価のレンタルサーバで、ブログのホームページを作るには高いハードルです。そこでSQLite(アプリケーションに組み込んで使う簡易的データベース)で動くCMS上に、そのCMSで動くブログサイトの作り方を書きました。
「SOY CMS」のSQLite版は、ZIPファイルを解凍して、FTPクライアントで準備したサーバにフォルダごとアップロードするだけでインストールできます。簡単に運営できるホームページを持ってみたい方には、選択肢の一つだと思います。

SQLite版CMSサイトに移動

SOY CMSの開発元はメンテナンスが停止していますが、有志(非公式)の運営サイトは更新し続けています。非常に汎用的なため、説明が難解になり過ぎて普及しにくい印象です。
特徴として
①「/ルートディレクトリ/サイトID」毎にサイトが作れるので、サーバにテスト環境を持てる。
②HTMLの<!–コメント–>の中にタグの形でデータベースへの要求を書くので、Bootstrapテンプレートなどとの組み合わせが簡単に出来る。
③サイト内に複数の「ブログページ」「標準ページ」が作れるので、WordPressの「投稿」「固定ページ」の代わりにできる。
※「標準ページ」でブログ記事一覧を扱う方法はちょっと面倒です。標準ページに新着記事一覧を表示するに説明がありますので、そちらを見てください。
ボタンの「SQLite版CMSサイト」の説明
使っているテンプレートは「ブログトップテンプレート」「アーカイブテンプレート」「記事毎テンプレート」の3つです。「ブログトップテンプレート」はフロントページに当たるもので作り込むことも可能ですが、SOY CMSを試してみようにそって３つをほとんど同じものにしました。
ブログトップテンプレート解説

<!DOCTYPE html>
<!-- saved from url=(0048)https://getbootstrap.com/docs/3.3/examples/blog/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://getbootstrap.com/docs/3.3/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.3/examples/blog/">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap CSS jsアドレス変更※1 -->
    <link href="/blog/files/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap CSS jsアドレス変更※1 -->
    <link href="/blog/files/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Bootstrap CSS jsアドレス変更※1 -->
    <link href="/blog/files/blog.css" rel="stylesheet">

    <!-- Bootstrap CSS jsアドレス変更※1 -->
    <script src="/blog/files/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

    <div class="blog-header">
        <!-- ヘッダー画像headerimage.jpgとしています※2 -->
    	  <img src="/blog/files/headerimage.jpg" alt="" class="img-thumbnail">
        <div class="container">
          <!-- SOY CMSのタグ　ブログの名前※3 -->
            <h2 class="blog-title">
                <a href="#" b_block:id="blog_url">
                    <!-- b_block:id="blog_name" -->defaultBlog
                    <!-- /b_block:id="blog_name" -->
                </a>
            </h2>
        </div>
    </div>
    
      <div class="row">

        <div class="col-sm-8 blog-main">

              <!-- SOY CMSのタグ　投稿した記事の内容のリストを記事エリアに表示※4 -->
                <!-- b_block:id="entry_list" -->
                <div class="blog-post">
                    <h2 class="blog-post-title">
                        <a href="" cms:id="entry_link">
                            <!-- cms:id="title_plain" -->記事タイトル
                            <!-- /cms:id="title_plain" -->
                        </a>
                    </h2>
                    <p class="blog-post-meta"><span cms:id="create_date" cms:format="F d, Y">January 1, 2014</span> of
                        <!-- cms:id="category_list" -->
                        <a href="#" cms:id="category_link">
                            <!-- cms:id="category_name" -->Mark
                            <!-- /cms:id="category_name" -->
                        </a>
                        <!-- /cms:id="category_list" -->
                    </p>
                    <!-- cms:id="content" cms:length="200"-->

                    <!-- /cms:id="content" -->
                </div>
                <!-- /.blog-post -->
                <!-- /b_block:id="entry_list" -->

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
          <!-- SOY CMSのタグ　基本設定の説明を表示※5 -->
            <h4>Explanation</h4>
            <!-- b_block:id="blog_description" -->
            <!-- /b_block:id="blog_description" -->
          </div>

      <section class="widget">
      <!-- SOY CMSのタグ　サイドバーに最新の投稿を表示※6 -->
      <h4><span>最新の投稿</span></h4>
      <ul>
      <!-- b_block:id="recent_entry_list" -->
      <li>
         <a href="" cms:id="entry_link">
         <!-- cms:id="title" -->記事タイトル<!-- /cms:id="title" -->
         (<!-- cms:id="create_date" cms:format="m/d" -->10/03<!-- /cms:id="create_date" -->)
         </a>
      </li>
      <!-- /b_block:id="recent_entry_list" -->
      </ul>
      </section>
      <section class="widget">
      <!-- SOY CMSのタグ　サイドバーにカテゴリを表示※7 -->
      <h3><span>カテゴリ</span></h3>
      <ul>
        <!-- b_block:id="category" -->
        <li><a cms:id="category_link"><!-- cms:id="category_name" -->カテゴリ名<!-- /cms:id="category_name" --> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->)</a></li>
        <!-- /b_block:id="category" -->
      </ul>
      </section>
      <section class="widget">
      <!-- SOY CMSのタグ　サイドバーにアーカイブを表示※8 -->
      <h3><span>アーカイブ</span></h3>
      <ul>
      <!-- b_block:id="archive" -->
      <li>
         <a href="" cms:id="archive_link">
         <!-- cms:id="archive_month" cms:format="Y年m月" -->2012年12月<!-- /cms:id="archive_month" -->
         (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->)
         </a>
      </li>
      <!-- /b_block:id="archive" -->
<!-- cms:ignore -->
<ol class="list-unstyled ">
<li><a href="# ">March 2014</a></li>（以下省略）
</ol>
<!-- /cms:ignore -->
</ul>
</section>
          
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#" b_block:id="blog_url">Back to top</a>
      </p>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/blog/files/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="/blog/files/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/blog/files/ie10-viewport-bug-workaround.js"></script>
  

<div id="UMS_TOOLTIP" style="position: absolute; cursor: pointer; z-index: 2147483647; background: transparent; top: -100000px; left: -100000px;"></div>
<div id="TAG_ID4TOOLBAR_UMS_GUID" style="display: none;">EEB322B2-B8F7-FFCD-7D38-3AF9B61DD68A</div><div id="tmtoolbar_ums_injected" style="display: none;">init_ums</div><div id="UMSSendDataEventElement" style="display: none;">init_ums</div>
</body>
</html>

※1 :アドレスを../など相対パスにすると、「SOY CMS」では「サイトID」毎にサイトが作れるので誤動作の原因になります。絶対パスにします。
※2 :ヘッダー画像名を「headerimage.jpg」にしておきます。ファイルマネージャーの「files」フォルダに同名画像をアップロードすればヘッダー画像となります。Bootstrapのタグが使えるので、編集画面で「<>」ソースコード編集にして<img src=”/blog/files/headerimage.jpg” alt=”” class=”img-thumbnail”>のようにすれば、画面サイズに応じてレスポンシブに画像サイズが変わります。
※3 :ブログ名を返します。
<!– b_block:id=”blog_name” –>defaultBlog<!-/b_block:id=”blog_name” –>
※4 :投稿した記事の内容のリストを記事エリアに表示します。
ブログページを作成する(ブログトップ)の説明を読んで下さい。本文からHTMLタグを除いて200文字を表示したいので、cms:id=”content” cms:length=”200″としています。
※5 :ページ>編集で表示されるページ>ブログページ一覧>タイトルの表示タブ「設定」で表示される基本設定の説明の文を表示します。
※6 :最新の投稿のリストを表示します。
<!– b_block:id=”recent_entry_list” –> <!– /b_block:id=”recent_entry_list” –>
※7 :カテゴリを表示します。
<!– b_block:id=”category” –> <!– /b_block:id=”category” –>
※8 :アーカイブを表示します。
<!– b_block:id=”archive” –> <!– /b_block:id=”archive” –>
アーカイブテンプレート解説
ブログトップテンプレートからの変更点は2ヶ所です。ヘッダーに以下のように
<!– b_block:id=”current_category_or_archive” –>
<!– /b_block:id=”current_category_or_archive” –>
を加えてカテゴリー名もしくはアーカイブ名を表示します。

    <div class="blog-header">
    	  <img src="/blog/files/headerimage.jpg" alt="" class="img-thumbnail">
        <div class="container">
            <h2 class="blog-title">
                <a href="#" b_block:id="blog_url">
                    <!-- b_block:id="blog_name" -->defaultBlog
                    <!-- /b_block:id="blog_name" -->
                </a>
            </h2>
            <!-- b_block:id="current_category_or_archive" -->
                <h2 class="title"><span><a cms:id="archive_link"><!-- cms:id="archive_name" cms:format="%Y:Y年%%M:n月%%D:j日%" /--></a></span></h2>
            <!-- /b_block:id="current_category_or_archive" -->
        </div>
    </div>

もう一か所、投稿した記事の内容を記事エリアに表示する文字数の制限を無くします。
<!– cms:id=”content” cms:length=”200″–>を<!– /cms:id=”content” –>

                <!-- b_block:id="entry_list" -->
                <div class="blog-post">
                    <h2 class="blog-post-title">
                        <a href="" cms:id="entry_link">
                            <!-- cms:id="title_plain" -->記事タイトル
                            <!-- /cms:id="title_plain" -->
                        </a>
                    </h2>
                    <p class="blog-post-meta"><span cms:id="create_date" cms:format="F d, Y">January 1, 2014</span> of
                        <!-- cms:id="category_list" -->
                        <a href="#" cms:id="category_link">
                            <!-- cms:id="category_name" -->Mark
                            <!-- /cms:id="category_name" -->
                        </a>
                        <!-- /cms:id="category_list" -->
                    </p>
                    <!-- cms:id="content" -->

                    <!-- /cms:id="content" -->
                </div>
                <!-- /.blog-post -->
                <!-- /b_block:id="entry_list" -->

記事毎テンプレート解説
ブログトップテンプレートからの変更点は2ヶ所です。
<!– b_block:id=”entry_list” –> <!– /b_block:id=”entry_list” –>投稿した記事の内容リストを
<!– b_block:id=”entry” –> <!– /b_block:id=”entry” –>投稿した記事の内容に変えます

    <!-- b_block:id="entry" -->
                <div class="blog-post">
                    <h2 class="blog-post-title">
                        <a href="" cms:id="entry_link">
                            <!-- cms:id="title_plain" -->記事タイトル
                            <!-- /cms:id="title_plain" -->
                        </a>
                    </h2>
                    <p class="blog-post-meta"><span cms:id="create_date" cms:format="F d, Y">January 1, 2014</span> of
                        <!-- cms:id="category_list" -->
                        <a href="#" cms:id="category_link">
                            <!-- cms:id="category_name" -->Mark
                            <!-- /cms:id="category_name" -->
                        </a>
                        <!-- /cms:id="category_list" -->
                    </p>
                    <!-- cms:id="content" -->

                    <!-- /cms:id="content" -->
                </div>
                <!-- /.blog-post -->

    <!-- /b_block:id="entry" -->

記事毎テンプレートにはページャーを設置します

      <nav aria-label="...">
          <ul class="pagination justify-content-center"> 
          <li class="page-item" b_block:id="prev_entry"><a class="page-link" href="#" cms:id="entry_link" aria-label="前">前の記事<span aria-hidden="true">&laquo;</span></a></li>
          <li class="page-item" b_block:id="next_entry"><a class="page-link" href="#" cms:id="entry_link" aria-label="次">次の記事<span aria-hidden="true">&raquo;</span></a></li>
          </ul>
      </nav>

以上が「SQLite版CMSサイト」の説明です。