チュートリアルの準備

これから数回に渡って、Pine Frameworkがどれほど簡単にWEBアプリケーションを構築できるのかをご理解頂くために、簡単なTODOアプリを作成する方法をご紹介します。

まずこの章では、GitHubからPine Frameworkをクローンして、アプリケーションが構築できるようにお使いの環境に合わせてPine Frameworkの設定を行っていきます。

お使いの環境がWindowsかMacintoshかLinuxかで設定方法は多少変わりますので、適宜読み替えて設定を行ってください。

プロジェクトファイルをGitHubからクローンする

では、Pine FrameworkのプロジェクトファイルをGitHubの以下のリポジトリからクローンしてください。

https://github.com/feijoa-pine/pine_framework.git

composerとnode.jsでのライブラリの準備

Pine Frameworkの定義ファイルはYMALが広範囲に利用されています。また、JavaScriptやCSSファイルはwebpackとBabelを利用したコンパイルとバンドルファイルの利用が前提となっています。

このため、Pine Frameworkでの開発にあたっては、Pine Frameworkプロジェクトのルートディレクトリ(package.jsonのあるディレクトリ)で

npm install

を実行して、node.jsでのライブラリ群をインストールしてください。また併せてcomposerディレクトリ内で

composer install

を実行して、composerで管理されるsymfony/yaml等のライブラリを予めプロジェクトに組み込んでください。

それぞれのコマンド実行後、Pine Frameworkリートディレクトリ直下にnode_modulesディレクトリ、composerディレクトリ直下にvendorディレクトリが生成された事を確認してください。

※composer及びnode.jsの導入方法は必要に応じて別途WEBドキュメントを参照してください。

pineコマンドとbambooコマンドの準備

Pine Frameworkでは開発の段階で、コードの自動生成を行うpineコマンド、データベースのマイグレーションを行うbambooコマンドを使用します。

これらのコードを利用する為、はPine Frameworkのプロジェクト内の

/pine/core/command

ディレクトリにパスを通してください。

Windows環境

システムの詳細設定 > 環境変数 > Pathに \pine_framework\pine\core\command を追加

Linux環境

.bashrcまたは.bash_profileに以下を追加

export PATH=$PATH:/var/www/Pine/pine/core/command

これに併せてLinux等の環境では、上記ディレクトリ内のpine、及びbambooに実行権限を与えてください。

chmod u+x pine
chmod u+x bamboo

コマンドの準備が終わったら、それぞれのコマンドのiniファイルに、Pine Frameworkまでのパスを設定します。

/pine/core/command/pine.ini
[sites section]
root                    = C:\pine_framework\Pine
/pine/core/command/bamboo.ini
[sites section]
root                    = /pine_framework

それぞれに、お使いの環境のpine_frameworkまでのパスを設定してください。

環境設定は以上です。

サイトディレクトリの生成

では、pineコマンドを使ってサイトディレクトリを生成します。今回はpine_siteというサイトIDでディレクトリを生成します。

サイトディレクトリの生成に先立っては、Pine Frameworkのcachesディレクトリとsitesディレクトリに対し、CLIインターフェイスとhttpdからの書き込み権限を設定してください。

サイトディレクトリの生成は、pineコマンドを-gオプション(genesisオプション)を付けて実行します。

pine -g pine_site

設定が間違っていなければ、Pine Frameworkのsitesディレクトリ内にpine_siteというサイトディレクトリが生成されます。

サイトディレクトリ

サイトディレクトリ内には__logs、assets、module、publicという4つのディレクトリが作成されます。

サイトディレクトリ

__logsはサイトのログファイル、assetsはサイトの資産ファイルが格納されます。

modulepublicは一対で、publicディレクトリが公開ディレクトリとなり、そのディレクトリ内のURLに対するプログラムファイルを格納したディレクトリがmoduleディレクトリ内に配置されます。

moduleディレクトリ内を見てみましょう。

サイトディレクトリ

初期状態のmoduleディレクトリ内には__comディレクトリとhomeディレクトリが生成されます。

homeディレクトリはDocumentRootに対してアクセスが行われた場合に実行されるファイルが格納されています。

__comディレクトリは、このサイトで共通して使われるファイルが格納されるディレクトリです。

サイトディレクトリを生成したら、定数ファイルであるconsts.phpを設定します。

/sites/pine_site/assets/consts/consts.phpを開き

const   SITE_NAME       = "pine_site";     // siteディレクトリ名

のように、サイトIDを設定してください。※この値は近日中に pine -g コマンド実行後に自動で設定されるように修正がなされる予定です。

データベースへの参照設定

Pine FrameworkではController、Model、Viewのそれぞれのデザインにおいて、デフォルトでデータベースへの参照をメンバとして保持します。

このため、環境設定ファイルに利用するデータベースへの参照を記述する必要があります。

/sites/[site_id]/assets/environments/Database.php
    public static function getDB(): pine\bamboo\DB
    {
        $db = new DB;
        $db->system         = "MySQL";
        $db->version        = "8.0.18";
        $db->dbhost         = "localhost";
        $db->port           = 3306;
        $db->dbname         = "site_name";
        $db->schema         = "";
        $db->l_schema       = "";
        $db->dbuser         = "user_name";
        $db->dbpass         = "******";
        $db->engine         = "InnoDB";
        $db->charset        = "utf8mb4";
        $db->collate        = "utf8mb4_0900_ai_ci";
        $db->persistent     = true;
        $db->set_names      = "utf8";
        $db->timestamp_precision = 0;
        return $db;
    }

上記を、お使いのデータベースに併せて設定してください。

ここまで設定すると、httpdを介してHTTPでのサイトへのアクセスが可能になります。

httpdでDocumentRootをPine Frameworkの/sites/pine_site/publicディレクトリに設定してブラウザからアクセスしてみましょう。homeページが表示されたら成功です。

サイトディレクトリ

タイトルバーの文字列が『サイトタイトル』となっているのは、/assets/consts/consts.phpの以下の設定によるものです。

    // WEB
    const   SITE_TITLE      = "サイトタイトル";

上記を適切に書き換えることで、ページのタイトルが変わります。この値を変更することでタイトルバーの文字列が変わる事を確認してください。

自動生成ファイルのメタ情報を定義する

Pine Frameworkではpineコマンドを用いてファイルの自動生成を行っていきます。

この際のファイルヘッダのメタ情報は、上記ファイルconsts.php内、

    // ファイルヘッダ
    const   PROJECT_NAME    = "プロジェクト名";    
    const   COPYRIGHT       = "your_organization http://your_site.jp";
    const   AUTHOR          = "your_name";
    const   AUTHMAIL        = "your@mail.address";

に記載された情報が反映されるので、これらを適切に修正してください。

チュートリアルの準備は以上です。

次の章では、Pine Frameworkを使ってTODOアプリを制作します。

>> チュートリアル1~テンプレートの利用と、JavaScript・スタイルシートのコンパイル、バンドル