WindowsでWebサイト作成の環境を作る

Windowsで、Webサイトを作成するための環境を最初に作成しましょう。

「Windows 10 64bit」を想定して解説されますが、Windows 8やWindows 7の32bitでも動くように構成します(予定)。

環境を作るのは、最初は難しく感じると思います。

手順通りにやっていけば、環境が作成できるので、最初のうちは、よくわからないままで大丈夫です。

ここでは、ブログを完成するところまでを解説します。

次のようなブログが作成できますよ。

Giblogで作成されたWebサイトも、同じ手順で作成されています。

これらのサイトは、ブログですが、普通のWebサイトを作りたい場合も簡単なのでご安心を。

PerlゼミのTwitterで、ここがうまくいかないんだけどと伝えてくれれば、お答えします。

では、環境の構築に進みましょう。

msys2をWindowsにインストールする

最初にmsys2というツールをWindowsにインストールします。

msys2の画面

この真っ暗い画面はなんでしょうか? ちょっとびっくりしますね。

少しだけ解説すると、この真っ黒い画面に、コマンドと呼ばれる文字を打ち込んで、Webサイトを作成します。

ブログを作成したい場合

giblog new_blog mysite

シンプルなWebサイトを作成したい場合

giblog new_website mysite

上記のコマンドを実行すれば、Webサイトが完成します。上記のコマンドはPerlで作られていて、これを実行するための環境を作っていきます。

msys2は、上のようなコマンドを実行するためのツールだと考えてくれれば大丈夫です。

「コマンドって?」となっていると思いますが、いまは大丈夫。

msys2のインストール 10分

msys2をダウンロードしてインストールしましょう。

msys2のダウンロード

msys2をインストールしましょう。64bit版Windowsの場合は64bit版のmsys2を、32bit版のWindowsの場合は32bit版のmsys2を利用しましょう。

確認方法(Windows 7, Windows 8, Windows 10)

msys2をダウンロードしましょう。

一番上にあるのが、最新版です。クリックして、msys2をデスクトップに、ダウンロードしましょう。

ユーザー名の確認

Windowsの「C:\Users」(日本語表示は C:\ユーザー)以下にあるユーザーディレクトリが、以下のように英語になっていることを確認してください。

kimot

もし、以下のように日本語になっている場合は、追加の設定が必要になります。

木本

日本語になっていた場合は、msys2をインストールする前に、環境変数の設定で、変数名に「HOME」を、変数値に「C:\msys64\home\msys2user」のように設定してください。英語であった場合は、以下の手順は飛ばしてください。

変数名 変数値
HOME C:\msys64\home\msys2user

32bit環境の場合は次のように設定してください。

変数名 変数値
HOME C:\msys32\home\msys2user

手順は以下を参考にしてください。

msys2のホームディレクトリに上記のディレクトリが設定されます。

「msys2user」というディレクトリを、

msys2のインストール

デスクトップにあるmsys2のアイコンをダブルクリックします。

次へを押していくと、インストールが始まります。3分くらいかかりますので、待ちましょう。

完了を押すとmsys2が起動しますが、いったん右上のバツを押して終了させましょう。

msys2の二回目以降の起動

msys2を一度閉じると、次は、どこから起動したらいいんだろうと迷いますね。

Windowsのスタート-メニューのアプリケーションの一覧からmの目次を探すと「MSYS2 64bit」のディレクトリがあります。

その中に

  • MSYS2 MinGW 64bit
  • MSYS2 MINGW 32bit
  • MSYS2 MSYS

がありますが、「MSYS2 MSYS」を起動しましょう。msys2には、3種類の起動スクリプトがありますが、PerlでWebサイトを作る今回の場合は「MSYS2 MSYS」を選択します。

これを間違うと正しくPerlの環境が整えられないので、注意してください。

他の二つは、Windowsネイティブアプリを開発する場合に利用するようです。

デスクトップにショートカットを作成しておくと起動が便利です。その場合は「右クリック」「その他」「ファイルの場所を開く」から「MSYS2 MSYS」を「右クリック」「コピー」して、デスクトップで「貼り付け」です。

お疲れ様です。msys2のインストールが終わりました。

次は、真っ黒の画面で、コマンドを実行して、Perlが実行できる環境を作っていくということをやります。後、半分です。

Perl環境構築 20分

msys2でPerlを利用できるようにします。PerlとPerlで必要となる開発環境の一覧をまとめてインストールしましょう。

pacman -S perl perl-CPAN msys2-devel make libcrypt-devel git

上記をコピーして、msys2で「右クリック」→「Paste」するとペーストされます。Enterを押して、上記のコマンドを実行しましょう。

インストールするか聞かれるので「Enter」を押して進めましょう。何を聞かれても「Enter」で大丈夫。

以下がインストールされます。これが、Perlを正しく動かすために必要な最小限の環境です。

  • perl (perl)
  • cpan (perl-CPAN)
  • gcc (msys2-devel)
  • make (make)
  • crypt.h (libcrypt-devel)

pacmanというのは、msys2のパッケージマネージャーです。パッケージマネージャーは、環境を作るためのツールを、インストール・管理するために用意されているツールです。

ここで一度右上のバツを押して、ターミナルを閉じて、「MSYS2 MSYS」再起動してください。これを行わないと、PATHの設定が正しくされず、cpanコマンドが正しく動きません。

Perlがインストールされているか確認しましょう。

perl -v

以下のように表示されれば、インストールされています。バージョンは、新しい場合もあります。

This is perl 5, version 24, subversion 4 (v5.24.4) built for x86_64-msys-thread-multi

Webサイト作成ツール

Webサイト作成ツールとして「Giblog」と「Mojolicious」というPerlのライブラリをインストールします。

Perlのライブラリには、Unix/Linux環境で動くことが想定されているものもあります。以下の設定で、シンボリックリンクが、msys2で正しく動くようにしてください。

export MSYS=winsymlinks

上記をコピー&ペーストして、Enter。

次に以下のコマンドでPerlのライブラリをインストールします。

cpan Giblog
cpan Mojolicious

初回はcpanを自動設定するか聞かれるので「Enter」で進めましょう。何を聞かれても「Enter」で大丈夫です。

このインストールが確認できると環境構築の作業は終了です。

Webサイトの作成

ようやくここまで来ました。ついに、Webサイトを作成してみましょう。

以下のコマンドでWebサイトを作成できます。

ブログを作成したい場合

giblog new_blog mysite

シンプルなWebサイトを作成したい場合

giblog new_website mysite

Webサイトを作成したら、作成したWebサイトを、ブラウザから確認してみましょう。

以下のコマンドで、Webサイトが見れるようになります。

cd ~/mysite
morbo serve.pl

コマンドを実行すると、以下のように表示されます。

Server available at http://127.0.0.1:3000

Internet ExploreやFirfoxやChromeなどのWebブラウザのアドレス欄に

http://127.0.0.1:3000

と入力してください。

作成したブログを確認できました。

おめでとうございます!

この後は、サイトを編集したり、記事を追加したりできます。

トラブルシューティング

msys2のインストール、Perlのインストール手順が失敗する場合に、ウイルスチェッカー(Avast、マカフィー、ノートン、etc)が、msys2をウイルスソフトだと誤検知する場合がありました。

また、ウイルスチェッカーによって管理者権限で、実行できない場合がありました。

この問題が起こった場合は、msys2のインストーラーを起動する前に、ウイルスチェッカーを一時的に停止して、右クリック「管理者権限として実行」を行ってください。

Windows 10である場合は、デフォルトのウイルスソフトであるWindows Defenderを使えば、問題なくインストールできるようです。

お願い

msys2は定期的にアップデートされて、パッケージ名やアップデートコマンドが変わったりするので、この手順でうまくいかない場合は、リポジトリPerlゼミのTwitterにてお知らせください。

メニュー