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にてお知らせください。