この記事では、Pine Frameworkのチュートリアルを行うためのプロジェクトの準備までを紹介します。

公開日時:2021/05/22 22:25 最終更新:2021/06/11 18:43   Pine Framework
Framework PHP Pine

チュートリアルのためのプロジェクト作成

ソースコード管理フォルダの作成

まず、Pine Framworkプロジェクトのソースコードを管理するフォルダを作ります。

本チュートリアルではVSCodeを使って開発を行うので、任意の場所にVSCode用のフォルダを作成しましょう。※フォルダ名は何でも構いません。

VSCode用管理フォルダの作成

フォルダを作成したら、管理フォルダ内に入ります。

フォルダ内でShift+右クリックでコンテキストメニューを開き、『PowerShell ウィンドウをここで開く』をクリックしてください。PowerShellが立ち上がります。

PowerShellを開く

PowerShellウィンドウ

以上で、準備完了です。

Pineプロジェクトの作成

それではPine Frameworkを使ったWEBアプリケーション『Pine(仮名:自由に変えてください)』を作成していきます。

Pine Frameworkのコードは、PHPライブラリのリポジトリ(システムを構成するデータやプログラムの情報が納められたデータベースのこと)である『Packagist.org』で管理されているため、Composerを使って簡単にインストール出来ます。

開いているPowerShellで、以下のコマンドをタイプしてください。※最後の『Pine』は自由に変えていただいて構いません。

composer create-project mikisan/pine Pine

しばらくの間処理が自動実行され、Pineというプロジェクトフォルダが作成されます。※PowerShellウィンドウは閉じてしまってください。

作成されたPineプロジェクト

Pineフォルダの中を見てみましょう。

作成されたPineプロジェクトフォルダ内のファイル

各ファイル・フォルダの説明は以下です。

ファイル、フォルダ 説明
[cache] 各種キャッシュ格納フォルダ
[composer] composerで管理されているライブラリ用フォルダ
[node_modules npmで管理されているライブラリ用フォルダ
[pine] Pine Framework本体のフォルダ
[sites] WEBサイト用のアプリケーションプログラム用フォルダ
.babelrc JavaScriptを古い環境で動作するようにコンパイルするライブラリBabelの設定ファイル
.gitignore Pine Frameworkのソースコード管理をしているGit用の設定ファイル
.composer.json Pine Frameworkで利用しているPHPライブラリをComposerが管理するための設定ファイル
.composer.lock インストール済みのPHPライブラリをComposerが管理するための設定ファイル
.development.js 復数のJavaScriptファイル、Scssファイル、画像ファイルを一纏め(バンドル)にするためのライブラリwebpackのコンフィギュレーションファイル
.package.json Pine Frameworkで利用しているJavaScriptライブラリをnpmが管理するための設定ファイル
.package-lock.json インストール済みのJavaScriptライブラリをnpmが管理するための設定ファイル
webpack.config.js npmでwebpackを実行する際のコンフィギュレーションファイル(development.js)のエントリポイント

!注目ポイント

これらのファイルやフォルダのうち、ユーザーが編集するのは『sitesフォルダ』内のファイルだけです。

sitesフォルダ

sitesフォルダは、WEBアプリケーションの実際のソースコード(ビジネスロジック)を格納するためのフォルダです。

概念図としては、以下のようになります。

Pine Framework 概念図

環境変数PATHを設定する

Pine Frameworkは、アプリケーション開発を簡単にするためのCLI(コマンドライン・インターフェイス)ツールである『pine』と『bamboo』が実装されています。

この2つのコマンドを簡単に実行出来るようにするため、OSの環境変数PATHにPine Frameworkのcommandディレクトリまでのパスを設定していきます。

環境変数の設定ウィンドウを開く

スタートメニューを右クリックして開くポップアップメニューから『システム』をクリックします。

※他にも様々な方法でシステムの詳細設定ウィンドウが開けます。

スタートメニューを右クリック

詳細情報ウィンドウが開いたら、右側にある『システムの詳細設定』をクリックしてください。『システムのプロパティ』ウィンドウが開きます。

設定> 詳細情報

システムのプロパティ

開いた『システムのプロパティ』ウィンドウで、画面右下にある『環境変数』ボタンをクリックしてください。『環境変数』ダイアログが開きます。 開いたダイアログの下のエリア『システム環境変数』の中から『Path』という行を見つけて選択し、右下の『編集』ボタンをクリックしてください。

環境変数名の編集』ダイアログが開きます。

環境変数ダイアログ

環境変数の編集ダイアログ

commandディレクトリのパス

確定させたら、開いている設定ウィンドウを全て『OK』をクリックして閉じてください。環境変数の設定は以上です。

サイト構築

それでは、実際にWEBアプリケーション用のサイトを作成してみましょう。

先程作成した『Pine』プロジェクトフォルダ内でShift+右クリックしてコンテキストメニューを表示し、再び『PowerShell ウィンドウをここで開く』からPowerShellを立ち上げます。

PowerShellを開く

開いたPowerShellウィンドウ

サイト構築は、『pine』コマンドを使います。

以下のようにタイプしてエンターキーを押してください。

pine -g my_site

Pine > sites フォルダ内に、『my_site』という名のサイトディレクトリが生成されます。

作成されたサイトディレクトリ

my_siteディレクトリ内

既存サイトと同じ名前のサイトは作れない

なお、既に存在しているサイトと同名のサイトは作成できません。

同名サイトの上書き禁止

コマンドオプションの説明

上記のコマンドで使用したオプション-gは、サイトを生成する為のオプション--genesis(天地創造)の省略表記です。

逆に、サイトディレクトリを破棄する為のオプションは--doom(最後の審判)で、省略表記は-dです。

下記コマンドを実行してみましょう。my_siteディレクトリが削除されます。

pine -d my_site

サイト削除確認

サイト削除完了

なお、上記のサイトディレクトリ削除確認ですが、--assumeyesオプション(省略表記-y)を付加する事で、確認プロンプトを出さず、直ちに削除を実行できます。

これらを組み合わせる事で、既存サイトを削除しつつ、同名の新規サイトの作成を1コマンドで実行出来ます。

pine -d -y -g my_site

VSCodeでプロジェクトフォルダを開く

準備が整ったら、VSCodeでPineプロジェクトフォルダを開きます。

VSCodeでプロジェクトフォルダを開く

開いたプロジェクトフォルダ

webpackでJavaScript、Scss、画像をバンドル

Pine Frameworkではモジュールバンドラー『webpack』を使って、moduleディレクトリ内にあるJavaScriptファイルやScssファイルのコンパイルとバンドル(一纏めにする事)を行い、assetsresourcesディレクトリのファイルと併せてWEB公開領域であるpublicディレクトリ内に書き出します。

VSCodeのターミナルメニューから新しいターミナルを選択してください(またはCtrl+Shift+@)。

新しいターミナル

ターミナルが開いたら以下のコマンドを実行してください。moduleディレクトリにあるJavaScriptやScssがバンドルされてpublicディレクトリ内に書き出されます。

npm run build-dev site=my_site

上記コマンドは、npmを使ってwebpackを実行しています。実行内容はpackage.json内に記述されています。

build-devを指定するとバンドルのみでMinify(省データ化)は行われませんが、build-prodはMinifyされます。

バンドルされて書き出されたjsとcss

WEBサーバにアップロード

ファイル転送ソフト等を使って、WEBサーバ上(ここでは/var/www)に『Pine』プロジェクトをアップロードしてください。

WinSCPによるプロジェクトのアップロード

SSHでログインしてPineプロジェクトフォルダ配下の全てのファイル・フォルダのオーナーをvagrant、グループをapacheにし、書き込み権限を与えてください。

sudo chown -R vagrant:apache /var/www/Pine
sudo chmod -R 0775 /var/www/Pine

!注意

Pine Frameworkではサイトフォルダ毎に__logsという、実行ログが書き出されるフォルダがあります。この為、__logsフォルダにはapacheの書き込み権限が必要です。

上記のようにvagrant:apacheでオーナーを設定した場合、__logsフォルダのパーミッションは0770等、少なくともグループ(apache)の書き込み権限を与えてください。

Pine Frameworkで許可されているドメイン、IPアドレス

Pine FrameworkではソースコードをionCube社(英国)製品『ionCube Encoder』で暗号化し、稼働可能なドメイン及びIPアドレスを制限しています。

このため、以下のいずれかに環境を設定する必要があります。

ドメインの場合

※pinefun.clubというドメインは、Pine Frameworkをユーザーの方々に利用してもらう為にわたしが取得したドメインです。ローカル環境ではご自由に利用してください。

IPアドレスの場合(CLI実行時等)

Virtual Host設定

上記で許可されているドメインを、Apacheのバーチャルホストに設定します。

sudo vi /etc/httpd/conf.d/pinefun.club.conf
/etc/httpd/conf.d/pinefun.club.conf
<VirtualHost *:80>
    ServerAdmin your@mail.address.jp
    DocumentRoot "/var/www/Pine/sites/my_site/public"
    ServerName pinefun.club
    ServerAlias www.pinefun.club

    ErrorLog "logs/www.pinefun.club-error.log"
    CustomLog "logs/www.pinefun.club-access.log" common
    <Directory "/var/www/Pine/sites/my_site/public">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

confファイルの作成が終わったら構文チェックを行います。

apachectl configtest

Syntax OKと表示されれば記述に誤りはありません。

configtest結果

※『AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using centos7.localdomain. Set the 'ServerName' directive globally to suppress this message』という表示は、httpd.confファイルにServerNameというグローバルディレクティブを設定する事で表示されなくなります。

※ここでは本題ではない為説明は省きます。このメッセージが表示されていても特に問題はありません。

Apacheを再起動してバーチャルホスト設定を反映

バーチャルホストの設定が終わったら、以下のコマンドでApacheを再起動し、confファイルを読み込ませてください。

sudo systemctl restart httpd

Windowsのhostsファイル編集

hostsファイルは、クライアントマシン上でだけ利用できるDNS(Domain Name System)のような物で、ドメインとIPアドレスの解決を行ってくれる仕様です。

以下の場所にあるhostsファイルを編集してください。

※管理者権限が必要です。簡単な方法としてはhostsファイルを一旦デスクトップ等に移動して編集してから元の場所に戻してください。

C:\Windows\System32\drivers\etc\hosts
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
    192.168.0.6     pinefun.club    ←この行を追加。IPアドレスはお使いの環境に合わせてください

動作確認

ブラウザでアクセスして確認

これで準備が整いました。

では、http://pinefun.clubにアクセスしてみましょう。

home画面

これが、Pine Frameworkの初期状態の画面です。

左上に出ているhome/get_indexは、homeコマンドに対してHTTPのGETメソッドでリクエストされた場合のindexアクションの実行結果、という意味です。

homeコマンドは、一般に言うところのホームページです。

Pine Frameworkでは一つの機能の纏まりをコマンドと呼びます。一般的なWEBサイトではグローバルメニューがコマンドに相当すると考えれば良いでしょう。

これに対してアクションは各ページで実行される処理です。

この、コマンド、メソッド、アクションについて、『お問い合わせフォーム』を例に上げるて説明すると、以下のようになります。

サーバーへの更新内容の同期設定と、webpackによる自動バンドル

ここで、VSCode上でのソースコードの編集内容を自動で即時的にサーバーへアップロードするようにSFTP設定ファイルを編集します。

Ctrl+Shift+Pを押して開くメニューから『SFTP: Config』を選択してください。

SFTP: Configメニュー

.vscodeフォルダが作成され、sftp.jsonというSFTP設定ファイルが開かれます。

sftp.json

以下のように設定を行ってください。

{
    "name": "VirtualBox-CentOS7",
    "protocol": "sftp",
    "host": "192.168.0.6",
    "port": 22,
    "username": "vagrant",
    "privateKeyPath": "C:/Vagrant/centos7/.vagrant/machines/default/virtualbox/private_key",
    "remotePath": "/var/www/Pine/",
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store",
        "caches",
        "node_modules",
        "map",
        "sites/**/public/__com/favicons"
    ],
    "syncOption": {
        "delete": true,
        "skipCreate": false,
        "ignoreExisting": false,
        "update": false
    },
    "uploadOnSave": true,
    "watcher": {
        "files": "**/*",
        "autoUpload": true,
        "autoDelete": true
    }
}

※詳しくは以下を参照してください。

SFTP拡張機能設定

webpackによる自動バンドル

次に、moduleディレクトリ内のJavaScriptやScssファイルが編集された際に、自動でwebpackによるバンドルとpublicフォルダ内への書き出しが行われるように、webpackにmy_siteディレクトリを監視させます。

開いているターミナルで以下のコマンドを実行してください。

npm start site=my_site

npmによるwatch

先程npm build-devでソースコードのバンドルを行った時人は違って、コマンドプロンプトが返って来ておらず、処理実行中(監視中)である事が分かります。

コードの修正が即時的に反映されるか確認

次は、このページのスタイルシートを変更して変更が反映されるか確認してみます。

先程述べたように、www.pinefun.clubでアクセスした際に表示される画面はhomeコマンドのGETメソッド用のindexアクションでした。

まず、homeコマンド用のプログラムディレクトリは以下です。

/Pine/sites/my_site/module/home

homeコマンドディレクトリ

上図の様に、各コマンドディレクトリ内には3つのディレクトリがあります。Pine Frameworkでは、エンジニアとデザイナーが分業を行う事を想定したディレクトリ構成となっています。

このうち、先程のページのスタイルを定義するScssファイルは viewsディレクトリ内、/home/views/get_index/stylesheets/get_index.scssです。

get_index.scss

ここに、適当なスタイルを書いてみましょう。

例)
body {
    background-color:   black;
    color:              darkgreen;
    font-family:        'Courier New', Courier, monospace;
    height:             2000px;
    font-size:          30px;
}

Scssを編集するとターミナルに処理結果の文字列が流れ、webpackによるバンドル処理が走っているのが分かります。

スタイルの編集と動的バンドル

ブラウザを更新すると、スタイルシートが変更されて背景が黒、文字色が緑に変わっています。

デザインが更新されたホームページ

記事リンク