Cloud9とは

Webプログラミング初心者にとって、最初につまずく「開発環境構築」ではないでしょうか。プログラム言語やサーバ、ツールのインストールには、それなりの知識と経験が必要になります。

そんな初心者のために近年、開発環境をクラウドで利用できるサービスが増えてきました。
「Cloud9」もブラウザ上でWeb開発できるクラウドサービスのひとつです。

あらかじめIDE（統合開発環境）が用意されており、面倒なサーバ設定をしなくても実際の現場で利用されているような開発環境を手に入れられます。

またブラウザで利用できるため、Windows、MacといったPCに関係なくプログラミングが可能です。
ブラウザ上でプログラムを書き、実行するので、自分のPCにツールをインストールする必要がありません。

Cloud9 以外にも、クラウドで学習専用のツールとして「Monaca」や 「Paiza」などがあります。

Cloud9 とローカル環境

Cloud9 自体は無料で使うことができますが、Cloud9のサーバは AWS EC2 というサービスと連動しているため、EC2の起動時間分は料金がかかるので注意してください。
ちなみにAWSを初めて利用する場合は、1年間の無料枠があります。詳しくは AWS 無料利用枠 を参考にしてください。

またインターネットが利用できないと開発ができなくなるデメリットがありますので、最終的には自分のPC（ローカル）で開発環境をできる知識も身に付けるようにしましょう。

ローカル環境構築は、「VirtualBox 」「Vagrant」「Docker」といったツールを利用することが一般的です。 エディタは無料であれば、Microsoftの「VSCode」を利用するのをおすすめします。

Cloud9 を利用する

まず、ブラウザ Google Chrome のインストール、AWSの決済に必要なクレジットカードを用意してください。
※ブラウザはChrome を利用することをおすすめ

それでは Cloud9 を利用してみましょう。

はじめに

GCE（Google Compute Engine）は、GCP（Google Cloud Computing）の IaaS（Infrastructure as a Service） な仮想PCで、AWS EC2と同じ位置付けです。

まずGCPを利用できるように、Googleアカウントでログインして、プロジェクトを作成しておいてください。

また、実際のインスタンス起動では料金が発生するため、クレジットカードの登録が必要です。

Google Cloud SDKインストール

ダウンロード

公式サイトからインストーラをダウンロードします。

https://cloud.google.com/sdk/docs/quickstart-macos?hl=ja

インストーラを解凍します。

$ tar -xvf google-cloud-sdk-280.0.0-darwin-x86_64.tar.gz

インストール

インストールは、シェルスクリプトで設問形式で行います。 デフォルトでは「.bash_profile」にパスが記述されます。

$ ./google-cloud-sdk/install.sh ... Do you want to help improve the Google Cloud SDK (y/N)? y 
... 
Do you want to continue (Y/n)? 
... 
[/Users/yoo/.bash_profile]:

インストール直後なので「.bash_profile」を再読み込みします。

$ source ~/.bash_profile

バージョンを確認

$ gcloud --version Google Cloud SDK 280.0.0 bq 2.0.53 core 2020.02.07 gsutil 4.47

Homebrew でインストールする場合

Homebrew でもインストールできますが、インストール後は主導でパスを通してください。

$ brew search google-cloud-sdk
$ brew install google-cloud-sdk

$ mkdir gcp 
$ cd gcp 
$ gcloud init

Googleログイン画面が表示されます。 利用するGCPのアカウントでログインし、内容を確認し「許可」します。

...
Pick cloud project to use: 
 [1] api-project-554441359651
 [2] voltaic-quest-272407
 [3] yoo-app
 [4] Create a new project
Please enter numeric choice or text value (must exactly match list 
item):  3
...
* Run `gcloud --help` to see the Cloud Platform services you can interact with. And run `gcloud help COMMAND` to get help on any gcloud command.
* Run `gcloud topic --help` to learn about advanced features of the SDK like arg files and output formatting

コンポーネントアップデート

$ gcloud components update
...
Do you want to continue (Y/n)?
...
Update done!

To revert your SDK to the previously installed version, you may run:
  $ gcloud components update --version 280.0.0

gcloudを使ってみる

プロジェクト一覧の確認

$ gcloud projects list
PROJECT_ID                NAME           PROJECT_NUMBER
api-project-554441359651  Houngout Test  xxxxxxxx
voltaic-quest-272407      Demo           xxxxxxxx
yoo-app                   yoo-app        xxxxxxxx

インスタンス作成＆起動

インスタンス「test-instance」を作成してみます。 インスタンス起動中はここから料金がかかるので、注意が必要です。

$ gcloud compute instances create test-instance
...
Would you like to enable and retry (this will take a few minutes)? 
(y/N)?  y

暫く待つとリージョンの設問があるので、利用したい番号を入力します。
※インスタンスを一度作成するとリージョンは変更できません

東京の場合は「asia-northeast1」ですが、」無料枠を利用したい場合、「us-**」を選びます。
※コンピュータタイプ「f1-micro」であること

ロケーション別のプロダクト提供状況

Google Cloud Platform の無料枠

...
choose a zone:
...
 [7] asia-northeast1-a
 [8] asia-northeast1-b
 [9] asia-northeast1-c
...
Please enter your numeric choice: 7

テストインスタンスが作成と起動が完了しました。

Created [https://www.googleapis.com/compute/v1/projects/yoo-app/zones/asia-northeast1-a/instances/test-instance]. NAME ZONE MACHINE_TYPE PREEMPTIBLE INTERNAL_IP EXTERNAL_IP STATUS test-instance asia-northeast1-a n1-standard-1 xx.xx.xx.xx xx.xx.xx.xx RUNNING

デフォルトのインスタンスタイプは「n1-standard-1」になっています。
最小限に料金を抑えるためには、一度インスタンスを停止して、GCPで「f1-micro」に変更しましょう。

$ gcloud compute instances stop test-instance

ターミナルでインスタンスに sshログインします。

初回は認証鍵用のパスフレーズを入力します。

$ gcloud compute ssh test-instance
...
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
...
Enter passphrase for key '/Users/yoo/.ssh/google_compute_engine': 
...
Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.

Linuxのディストリビューションは「Debian」がインストールされているようです。

Apache2をインストール

Webサーバ Apache2 をインストールします。インストール完了後、Apacheは自動起動します。

$ sudo apt-get update && sudo apt-get install apache2 -y

HTTP、HTTPSの有効

「http」「https」ポートが利用できないので、インスタンス詳細 > 編集 から設定を有効にて「保存」します。

インスタンスの再起動

$ gcloud compute instances start test-instance
...
Instance internal IP is xx.xx.xx.xx
Instance external IP is xx.xx.xx.xx

起動したら、外部IPアドレスでブラウザにアクセスします。 最後に利用しない場合は、インスタンスを停止するのを忘れないでください。

awsコマンドの返り値はJSONで返ってきますが、見やすく整形するには色々とコマンドを記述しなければいけません。

そこでフィルタプログラム jq を利用すると少しだけ整形が楽になります。

jq をインストール

Homebrew で jq をインストールします。

$ brew install jq

AWS EC2のインスタンス一覧を取得

jEC2のインスタンスを「インスタンスID」「タグ」「インスタンスタイプ」で一覧表示してみます。
その際、jq のオプション -c（--compact-output）で圧縮出力します。

aws ec2 describe-instances | jq -c '.[][].Instances[]
         | [.InstanceId,[.Tags[] | select(.Key == "Name").Value][], .InstanceType]'

結果

["i-0cxxxxxx","Linux2","t2.micro"]
["i-01xxxxxx","cloud9-sample","t2.micro"]

このようにパイプ（|）で連結させてフィルタリングします。

インデントを揃える

結果内容を揃える場合、Macの標準コマンド column を利用します。

その際、jq コマンドのオプションを -r（--raw-output）で生出力にします。

aws ec2 describe-instances \
         | jq -r \
         '.[][].Instances[] 
         | [.InstanceId,
         [.Tags[] | select(.Key == "Name").Value][],
         .InstanceType]
         | @tsv' \
         | column -t

結果

i-0cxxxxxx  Linux2         t2.micro
i-01xxxxxx  cloud9-sample  t2.micro

参考

jqとcolumnでAWS CLIの出力を見やすく整形する

軽量JSONパーサー『jq』のドキュメント：『jq Manual』をざっくり日本語訳してみました

プロジェクト作成

composer でプロジェクト名「laravel_app」を作成します。

$ composer create-project laravel/laravel laravel_app

Laravel のバージョンを確認しておきます。

Laravel Framework 7.12.0

UIパッケージをインストール

laravel_app に移動して、ComposerでLaravelのUIパッケージ laravel/ui をインストールします。

$ cd laravel_app
$ composer require laravel/ui

Reactをインストール

Reactを利用できるようにスカフォールドをインストールします。

$ php artisan ui react
//Authを利用する場合
$ php artisan ui react --auth

npmでインストール＆ビルド（開発）

package.jsonに記述された内容で依存パッケージをインストールとLaravel Mixでビルドします。

$ npm install
$ npm run dev

関連ファイルの監視

関連ファイルの変更を監視しておきます。

$ npm run watch

これでReactがインストールされたLaravelプロジェクト作成が完了しました。

ここで Laravelサーバを起動して確認してみましょう。

おなじみの Laravel の画面は表示されましたが、この画面ではReact の動作実装されていません。

Reactを確認する

Laravel で React をインストールするとあらかじめサンプルファイルが作成されています。

app.js

resources/js/app.js には Bootstrap と Reactコンポーネント「Example」が読み込まれています。

require('./bootstrap');
require('./components/Example');

Example.js

resources/js/components/Example.js には、Reactコンポーネント「Example」の中身です。
Reactでは、HTMLレンダリングにJSXを利用しますが、JavaScriptに直接HTMLタグを記述できる点で便利です。

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        ...JSX...
    );
}

export default Example;
...

レイアウトファイルの修正

現状だと Reactコンポーネントは表示できないため、Laravelのレイアウトファイル「resources/views/welcom.blade.php」を修正します。

Laravelのmix()関数で app.jsを読み込んでいます。

<script src="{{ mix('js/app.js') }}"></script>

また、Exampleコンポーネントを表示する場合、HTMLタグにidを指定して呼び出します。

<div id="example"></div>

動作確認

もういちど、サーバを確認してみると今度は、Exampleコンポーネントを読み込んだ状態で表示されました。

Homebrewとは

HomebrewはMacのパッケージ管理システムです。

MacはGit、PHP、Ruby、Pythonといったアプリケーションが標準インストールされてますが、Macで開発環境を構築する場合、異なるバージョンで利用するケースが発生します。
そこでHomebrewを利用すると、Gitで管理されたパッケージをダウンロードして、インストール、アンインストールなど管理することができます。

最近ではDockerやクラウド開発の登場で Macに直接インストールすることも減りつつありますが、Dockerだけでは賄えない部分も多々あるので、いまだ必須のツールになっています。

参考

Homebrew - インストール

インストール

以前の記事ではrubyでインストールしていましたが、公式をみるとシェルスクリプトでインストールしています。
実際はGitでパッケージをダウンロードし、Ruby の gem で実行しているのでやっていること自体は変わりません。

ターミナルを開き、以下のコマンドを実行します。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

しばらくしてインストールが完了したら、バージョンを確認します。

$ brew --version
Homebrew 2.2.17
Homebrew/homebrew-core (git revision c87df; last commit 2020-05-22)

パッケージのインストール

試しに、ファイルダウンロードをするコマンド wget を brew でインストールしてみましょう。

$ brew install wget

インストールが完了したら、バージョンを確認します。

$ wget -V
GNU Wget 1.20.3 built on darwin18.7.0.
...

このようにHomebrewは Macで利用できないコマンドやアプリケーションを brew コマンドで管理します。

Cask でインストール

Cask は MacのGUIアプリ、フォント、プラグイン、その他オープンソースででないソフトウェアをインストールするときに利用します。

例えばブラウザアプリ「Firefox」を、Homebrewでインストールすることができます。

$ brew cask install firefox

Macのアプリケーションフォルダを確認するとFirefoxがインストールされているはずです。

PHPのインストール

Macのバージョンによっては、標準でインストールされているPHPのバージョンは異なります。
例えばLaravel 7.x をMac上で利用する場合、PHPのバージョン7.2.5以上が必要なため、別途インストールが必要です。

PHPパッケージの検索

PHPのインストールの前に、パッケージを検索してみます。

$ brew search php
==> Formulae
brew-php-switcher     php-code-sniffer      php@7.2               phplint               phpmyadmin            phpunit
php                 php-cs-fixer          php@7.3               phpmd                 phpstan

PHP7.3をインストール

php@7.3 パッケージがあるので、これをインストールします。

$ brew install php@7.3

PHPのパス設定

インストールが完了しましたが、現状はPHPの旧バージョンが有効のままです。

PHP7.3が利用できるようにパスの設定を ~/.bash_profile に記述します。

$ echo 'export PATH="/usr/local/opt/php@7.3/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

設定をすぐに反映するために .bash_profile を読み込むと、PHPのバージョンが変更されたことを確認できます。

$ php -v
PHP 7.3.18 (cli)

Matplotlib で3直線で囲まれた範囲を塗りつぶしをしてみます。

3直線の定義

まず、x の範囲を適当に設定し、3直線を定義します。

x = np.arange(0, 100, 0.1)
y1 = -x * (3/2) + 100
y2 = -x / 5 + 32
y3 = -x * (3/4) + 250 / 3

プロット

plt.plot(x, y1, label="y1: 3*x1 + 2*x2 >= 200")
plt.plot(x, y2, label="y2: x1 + 5*x2 >= 160")
plt.plot(x, y3, label="y3: 4*x1 + 3*x2 >= 250")

塗りつぶし

実際の塗りつぶしは、fill_between() 機能を利用します。

ですが、fill_between() は3式以上には対応していないため、2つのデータに落とし込む必要があります。

2式（データ）に落とし込む

numpy の maximum(), minimum() で2式の最大値または最小値を取得します。

まず y1  y2 のグラフのような条件下でデータ y4 を設定します。

y4 = np.maximum(y1, y2)

グラフを塗りつぶす

今度は y3, y4 を fill_between() と where パラメータで塗りつぶします。

グラフでもわかるように y4（y1, y2 条件のデータ） <= y3 となります。

ax = plt.axes()
ax.fill_between(
    x,
    y3,
    y4,
    where=y3 > y4,
    alpha=0.3,
    interpolate=True,
)

第1引数は、x軸の値、第2,3引数は2式のデータ、オプションとして where など設定します

もし、3式の交点がわあかっていれば、fill() を使って交点指定で塗りつぶしても良いかと思います。

線形最適化問題とは？

1次式のみで定義できる式から、ある条件（制約）をもとに問題の最適解を見つけることです。
2次以上の式や、離散的な変数（連続でない）に関しての問題は対象外となります。

目的関数と制約

問題を解決するには、目的関数（求めたい解の定義式）と、問題の制約（条件）を定義します。
問題定義の関数は、 最小化と最大化の2種類あります。

例えば、生産するための最大利益、乗り換え案内などの最短経路を求めたりする問題です。

上記は3つの制約で、ある目的関数から最適解を求めたグラフ化です。
制約は（不等式）の不等号の向きで範囲が異なります。

PuLP とは

PuLP は COIN-OR プロジェクトで開発された線形最適化問題を解くための Pythonライブラリです。

Jupyter Notebook インストール

視覚的に確認するために、Jupyter Notebook をインストールします。
個人的には、Anaconda は入れたくないので pip3 でインストールします。

$ pip3 install jupyter

Pulp インストール

$ pip3 install pulp

Pulp の基本

決定変数

変数作成変数は、 LpVariable() で定義します。

• 連続変数（実数値）
• 0 or 1変数
• 整数値

第1引数

「インスタンス名」で必須です。

第2引数

• lowBound：変数の下限値（デフォルト：None）
• upBound：変数の上限値（デフォルト：None）
• cat：変数の種類（デフォルト：連続変数 = pulp.LpContinuous）

変数の利用例

x1 = pulp.LpVariable('x1', 0)
x2 = pulp.LpVariable('x2', 0) 

問題定義のモデル作成

目的関数と制約

目的関数を LpProblem() でインスタンスを作成し、制約を追加してきます。

最大化モデル作成

LpProblem(sense= LpMaximize)

最小化モデル作成

LpProblem(sense=LpMinimize)

ラベル付きの例

problem = pulp.LpProblem('最大化問題', sense=pulp. LpMaximize)

作成したインスタンスに、目的関数、制約の式を追加します。

problem = pulp.LpProblem('生産計画問題', sense=pulp. LpMaximize)
problem+= x1 + 2*x2, '目的関数 利益見込み'
problem+= x1 + 3*x2 <= 24, '原料制約'
problem+= 4*x1 + 4*x2 <= 48, '労働時間制約'
problem+= 2*x1 + x2 <= 22, '機会稼働制約'
problem

最適解の計算

定義した問題定義を実際に解くには、 solve() を利用しますが、戻り値は実際の解ではなく、成功フラグになります。

result = problem.solve()

実行結果のステータス

実行結果のステータスを確認するのに、 LpStatus() を利用します。

print(pulp.LpStatus[result])

ステータスの種類

{
 -3: 'Undefined',
 -2: 'Unbounded',
 -1: 'Infeasible',
 0: 'Not Solved',
 1: 'Optimal'
}

目的関数の最適値（最大・最小値）

目的関数の最適解は、 value(モデル.objective) で取得します。

print(pulp.value(problem.objective))

最適解を求める

解の取得

最適解を求めたら、解を取得します。
定義した決定変数を variables() 、それぞれの解を value(オブジェクト) で取得します。

for v in problem.variables():
    print(f’{v} = {pulp.value(v)}’)

結果

$ python3 2-1.py 
x1 = 6.0
x2 = 6.0

Jupiter Notebook

ペジネーションビューの書き出し

artisan コマンドで、ペジネーションビューをプロジェクト内に書き出します。

$ php artisan vendor:publish --tag=laravel-pagination

resources/views/vendor/pagination/ にページネーションのBladeファイルが作成されます。

あとで説明しますが、デフォルトは「bootstrap-4」で書き出されますが、ページネーションメソッドで他のBladeファイルを指定することができます。
よって、利用したいBladeファイルをカスタマイズしてください。

Eloquent モデルで取得

Eloquent モデルには、paginate()、simplePaginate() メソッドを利用できます。

$limit = 10;
$offset = 0;
$user = User::paginate($limit, '[*]', 'page', $offset);

AppServiceProvider に追加

AppServiceProvider::boot() でページネーションのBlade ファイル名を指定します。

    public function boot()
    {
        Paginator::defaultView('pagination::bootstrap-4');
        Paginator::defaultSimpleView('pagination::simple-bootstrap-4');
    }

Blade にページネーションを実装

Blade ファイルでは、Eloquent モデルデータの links() メソッドでページネーション表示できます。

{!! $user->links() !!}

また、Blade 側で明示的に指定することもできます。

{{ $paginator->links('pagination::bootstrap-4', ['key' => 'value']) }}

Eloquent のページネーションメソッドは以下を参照してください。

https://readouble.com/laravel/7.x/ja/pagination.html

node-sass をインストールする

CSSコンパイルは開発のみで利用するため、ローカル（devDependencies）にインストールします。

$ npm install node-sass --save-dev
//または
$ yarn install node-sass --dev

--save-dev はローカル（devDependencies）にインストールする npm コマンドオプションです。
yarn では --dev にあたります。（混乱しますが・・・）

ファイル構成

sass から css に書き出すディレクトリを構成します。

元ファイル（sass）

sources/sass/default.scss

書き出しファイル（css）

public/css/default.css

ファイル構成

npm を初期化してない場合は、新規作成します。

$ npm init

package.json

package.json の scripts に sass の設定を記述します。

"scripts": {
    "sass": "node-sass resources/sass/ --output public/css/ --output-style compressed --watch --source-map true"
}

• compressed：css圧縮
• --watch：監視設定（sass保存時に自動書き出し）
• --source-map true： .css.map ファイルの書き出し/li>

CSSコンパイル

$ npm run sass

public/css/ に対象の cssファイルが書き出されます。

SQL が発行されるたびに Log ファサードを利用して SQLログを書き出してみます。

Laravel のLogファサードの仕様は以下を参照してください。

https://readouble.com/laravel/7.x/ja/logging.html

LogSqlServiceProvider の設定

プロバイダは、AppServiceProvider に登録しても良いですが、今回はカスタムで LogSqlServiceProvider を作成します。

$ php artisan make:provider LogSqlServiceProvider

app/Providers/LogSqlServiceProvider.php が作成されているのを確認します。

AppServiceProvider に登録

config/app.php の providers に LogSqlServiceProvider を登録します。

    'providers' => [
...
        App\Providers\LogSqlServiceProvider::class,
...
    ],

SQLログ処理を記述

app/Providers/LogSqlServiceProvider.php の register() に記述します。

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;

class AppServiceProvider extends ServiceProvider
{
    const SQL_LOG_ENVIROMENT = [
        'local',
        'development',
    ];
....

    public function register()
    {
        if (in_array(App::environment(), self::SQL_LOG_ENVIROMENT)) {
            DB::listen(function ($query) {
                $sql = $query->sql;
                for ($i = 0; $i < count($query->bindings); $i++) {
                    $sql = preg_replace("/\?/", $query->bindings[$i], $sql, 1);
                }
                Log::channel('sql')->debug("SQL", ["time" => sprintf("%.2f ms", $query->time), "sql" => $sql]);                                                      
            });
        }
    }

App::environment() で現在の環境を取得し、任意に設定した SQL_LOG_ENVIROMENT の場合に、ログを書き出します。

環境による設定は、.env の boolean で設定しても良いかも知れません。

SQLログファイルパス設定

config/logging.php で設定でき、デフォルト「storage/logs/larave.log」となります。

Log::debug() の場合、デフォルトで single チャンネルで書き出されるため、Log::channel('チャンネル名')で、SQL用のログを設定します。
（内部的に、Illuminate\Log\LogManagerクラスで、driver() に設定される模様）

    'channels' => [
...
        'sql' => [
            'driver' => 'sql',
            'path' => storage_path('logs/sql.log'),
            'level' => 'debug',
        ],
...
    ],

またロガーは RFC 5424 の以下の８つのログレベルを提供しています。

• emergency
• alert
• critical
• error
• warning
• notice
• info
• debug

Logファサードは、最終的にPsr\Log\LoggerInterface を実装した Monolog\Logger を利用しています。