自分のパソコン内でJS CMSを動作させる方法

※投稿当時の内容となります。
2021/06/26 追記あります。

JS CMSで簡単ホームページ作成

無料で簡単ホームページ作成のJS CMSですが、サーバーがPHPに対応していないとオンラインでCMS部分が動作しないという、初心者にとっては唯一のハードルがあります。
無料のレンタルサーバーは対応していないことが多い。

しかし、JS CMSの公式サイトにも書かれているように、ローカル環境でサイトを作成して、出来上がった成果物のみをサーバーにFTPアップロードして公開するという方法も可能です。
実際には、この方法の方が作業ミス時の被害も少なくて済むかもしれません。

また、JS CMSに限らず、

  • 外部に公開しないけどホームページを作ってみたい
  • ホームページを作りたいけど公開前にじっくり実験をしてみたい
  • ローカルネットワーク(LAN)内でのみ閲覧するホームページ(社内報など)
    ※LANはローカルエリアネットワークですが、長いのでローカルネットワークと表現しました。が、長いので以後LANと表記します。

これらを行うにはローカル環境(手元のパソコン、またはLAN内)にWebサーバーを設置する必要があります。
※単純なHTMLの動作確認の場合はWebサーバーすら必要ありませんが、それはまた別の話。

一般的にWebサーバーを設置するには、家庭用のインクジェットプリンターをパソコンに導入することよりもはるかに難解な知識を要しますが、プリンターをパソコンに導入するのよりちょっとだけ上の難易度で、難解な知識はとりあえずスキップできるナイスなアプリケーションも存在します。
しかも無料で!

※難易度の感じ方には個人差があります。

それがXAMPPです。

XAMPPはWebサーバーを含むいくつかのアプリケーションをまとめたパッケージソフトで、簡単に実行することができます。
Wikipedia

それでは、難解な知識はとりあえずスキップして、さっそくXAMPPを導入してみましょう。

ダウンロード

  • XAMPPサイトへアクセス。
  • Download > XAMPP for Windows でダウンロード。
    2021/06/26追記)
    最新版(PHP 8)ではJS CMSがうまく動作しないようです?
    「Click here for other versions」から
    「7.4.20 / PHP 7.4.20」で、動作することを確認しました。

    XAMPPダウンロードページ
  • どうしても漢字やひらがなでの表記がほしい場合はこうです。
    XAMPPページ日本語化
  • ・・・。
    XAMPPダウンロード

インストール

  • インストーラー(ダウンロードファイル)を実行します。
    みなさんおなじみの「次へ」を連打するだけでインストールは完了します。
    この場合は「Next」ですね。
    XAMPPはオープンソースライセンスのため、アドウェアは含まれていません。(今のところ)
  • 途中で、インストールするモジュールを選択する画面が出ます。
    JS CMSを動作させるだけなら、「Apache」と「PHP」だけで大丈夫です。
    もっとも、この二つはチェックが外せませんが。
    追記)後からモジュールを追加することができません。再インストールが必要になり面倒なので、初期値の通り全部インストールしておく方が良いかもしれません。
    使わないモジュールは起動しなければいいだけのことなので。

    コンポーネント選択
  • インストールが完了して「Finish」すると、XAMPPコントロールパネルが表示されます。
    初回のみ英語かドイツ語か選択する画面が出ますのでお好きな方を選び「Save」しましょう。
    Apache の右の「Start」をクリックすると、Webサーバーが起動します。
    XAMPPコントロールパネルスタートXAMPPコントロールパネル実行中
  • ブラウザでアドレス欄に、XAMPPを実行しているパソコンのローカルIPアドレスを打ち込んでみましょう。
    例)http://192.168.0.2 など
    手元のパソコンだけの話なら「localhost」でもOK
    XAMPPブラウザプレビュー
    XAMPPのダッシュボードが表示されれば成功です。
    されなければウイルス対策ソフトなどがブロックしているの可能性があります。

スタートアップに登録

しかし、このままではパソコンを再起動やシャットダウンするとXAMPPは終了してしまいます。

そこでパソコン起動時に、自動的にXAMPPが実行されるように設定しましょう。
※その必要がない人はしないでください。

  • XAMPPコントロールパネルの「config」をクリック。
    XAMPPコントロールパネルコンフィグ
  • Autostart of modulesの欄の「Apache」など必要なモジュールにチェックを入れて「Save」しましょう。
    XAMPPオートスタート
    これでXAMPPが起動したときに、それらのモジュールが自動的に起動するようになりました。
    追記)エラーが出て、設定値が保存されない場合は「xampp-control.ini」のアクセス許可がない場合が考えられます。
    xampp-control.iniのプロパティ(のセキュリティ タブ)でアクセス許可を付与すると解決します。

しかしXAMPPは手動で実行しなければなりませんので、これをパソコン起動時に実行されるようにします。

  • XAMPPはデフォルトでは、Cドライブの「xampp」フォルダにあります。(C:\xampp
    この中の「xampp-control.exe」のショートカットを「スタートアップ」フォルダに作成しましょう。
    スタートアップフォルダの在処は自動実行したい状況で異なります。
    Windows7 ~ 10の場合

    • パソコンにログオン中のユーザーのみの場合(現在のユーザー)%APPDATA%\Microsoft\Windows\Start Menu\Programs\Startup
    • パソコンにどのアカウントでも実行する場合(All Users)%ALLUSERSPROFILE%\Microsoft\Windows\Start Menu\Programs\Startup

これでパソコン起動時(ログオン時)に自動的にXAMPPが起動し、そしてWebサーバーが起動します。

アップロード

いよいよコンテンツを配置していく準備が整ったわけですが、一体どこにアップロードしたらいいのでしょうか。

答えは、Cドライブのxamppフォルダの中の「htdocs」です。(C:\xampp\htdocs
先ほどブラウザで見たダッシュボードのデータが入っています。
これから独自のデータを入れていきますので、中身を削除して入れ替えていくことになりますので、慎重な人ならばフォルダごとコピーを取っておくのも良いでしょう。(難解な知識はとりあえずスキップしている間は、無くても困らないと思います。)

最後に、空にした「htdocs」フォルダにJS CMSの中身を入れて完成です。

JS CMSのダウンロードについてはこちら

全部できたら、ブラウザでJS CMSにアクセスしてみましょう。
例)http://192.168.0.2/_cms
手元のパソコンだけの話ならlocalhost_cmsでもOK

これでローカル環境(LAN内)専用のJS CMSのWebサイトが始まりました。

JS CMS公式ガイドでも紹介されています。

※パソコンやルーターなどの設定によっては、ローカルサーバーが外部に公開されてしまいますのでご注意ください。(ポートフォワーディング、DMZなど)
特に支障がないので十数年前のルーターを今でも使っていて、お子さんなどがオンラインゲームをするために「ポートの開放」という作業を行ったままの場合とか、ヤバいです。
※最近のルーターはポートの開放という作業が必要ないことが多い。

スタートアップフォルダを一発で開く禁断の秘儀