LaravelとVue.jsでクイズアプリを作る

laravelでvue.jsを使うためのセッテイング

laravelをinstallしたら最初からpackage.jsonが用意されていてnpm installするとvue.jsも使えるようになる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
,

"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
}

}

vue.jsに関しては^2.5.7というバージョンが指定されている。

キャレットについては下記を参照のこと
package.jsonのパッケージバージョンに記載される ^ (キャレット) とは?どうしてつくのか?

dockerでの開発を想定しているが
jsのpackageのinstallやwatch,buildなどはホスト側で実行する

1
$ npm install

npm installしたところvueのバージョンはこの時点での最新バージョンである2.5.19がインストールされていた

vuexも必要なのでinstallしておく

1
$ npm install vuex --save

vue-routerも必要なのでinstallしておく

1
$ npm install vue-router --save

開発をはじめる

まずは、クイズアプリで使用するresources/js/app.js,resources/sass/quiz.scssを作成しよう。
作成したらそれをwebpack.mix.jsに追加します。

1
2
3
4
5
6
7
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/quiz.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/quiz.scss', 'public/css');
```

次のコマンドでファイルの変更を監視しながら開発できます

$ npm run watch
```

「SQLAlchemy」を試してみる

usage

下記のような感じ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
from sqlalchemy import Column, ForeignKey, Integer, String, Text, TIMESTAMP
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import relationship
from sqlalchemy.orm import sessionmaker
from sqlalchemy import create_engine

Base = declarative_base()


engine = create_engine('postgresql://user_name:password@localhost:5432/db_name')
Session = sessionmaker(bind=engine)

class Users(Base):
__tablename__ = 'users'
id = Column(Integer, primary_key=True)
status = Column(Integer)
profile = Column(Text)
created_at = Column(TIMESTAMP)


Base.metadata.create_all(engine)

session = Session()

# 全件取得
result = session.query(Users).all() # .all() は省略可
for user in result:
print(user.id, user.status, user.profile, user.created_at)

たまに役に立つSQL(PostgreSQL)

データを倍々に増やしていくsql

idがautoincrementであることが前提

1
2
3
4
5
6
7
8
9
10
11
INSERT INTO messages_test
(
column_name_1,
column_name_2
)
SELECT
column_name_1,
column_name_2
FROM
table
;

下記のようにすればランダムデータも入れれる  

1
2
3
4
5
6
7
8
9
10
11
INSERT INTO messages_test
(
column_name_1,
column_name_2
)
SELECT
(random() * 10000)::int % 100,
column_name_2
FROM
table
;

「cheat.sh」について

cheat.shはコミュニティドリブンのドキュメントを手軽に参照するためのツール(HTTPインターフェース)。
ブラウザでアクセスするかもしくはcurlコマンドでアクセスすることができる。
pythonについて学習したい場合は次のURLを叩くか。
https://cheat.sh/python/:learn

もしくはcurlで取得する

1
curl cheat.sh/python/:learn

参考

chubin/cheat.sh
cheat.sh公式

Python/Djangoのmeethubを試してみる

meethubとは

GithubにあがっいるPython/Django製のオープンソースのイベントマネジメントシステム
iyanuashiri/meethub

installation

1
2
3
4
$ git clone
$ git clone git@github.com:iyanuashiri/meethub.git
$ cd meethub
$ pip install -r requirements.txt

足りないモジュールがあったので入れた。

1
2
$ python -m pip install djangorestframework
$ python -m pip install django-nose

settings.py

1
2
3
4
5
6
7
8
9
10
11
12
#env = environ.Env(DEBUG=(bool, False),)
env = environ.Env(DEBUG=(bool, True),)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'meethub',
'USER': 'root',
'PASSWORD': '****',
'HOST': 'localhost', # Or an IP Address that your DB is hosted on
'PORT': '3306',
}
}

.env ファイルを作成
CLOUD_NAME以下の設定はcloudinaryのアカウントを作成してから設定する

1
DEBUG=True
# DJANGO_SETTINGS_MODULE=myapp.settings.dev
SECRET_KEY=your-secret-key

CLOUD_NAME=***
API_KEY=***
API_SECRET=***

migrationを実行
migrationファイルはすでにできているのでpython manage.py makemigrationsは実行しなくて大丈夫 (No changes detectedがでる)

1
$ python manage.py migrate

migration成功したらevents_categoryテーブルにマスターデータを用意しておこう。
※イベント登録する際にカテゴリー選択は必須なので。
※管理画面から登録しても良い

1
INSERT INTO events_category(name, description)VALUES('test', 'test-hoge-moge');

サーバー起動

1
python manage.py runserver 9000

centos7の環境でpuppeteerをインストールしてPDFを出力する

nodejsとpuppeteerインストール

公式のインストール方法があるみたい
node.js 8.x をyumでインストールする
https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

node.js10はまだLTS(LongTermSupport)じゃないのでやめとく。
2018/10からLTSとなるようだ。

インストールはroot権限で実行する。

1
2
3
$ sudo su -
# curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
# yum install -y nodejs gcc-c++ make

下記はpuppeteerの方で必要になるツール

1
2
$ sudo su -
# yum -y install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

puppeteerのインストール
※内部的にHeadlessChromeが使われるがChromiumも一緒にインストールされるので別途chromeをinstallする必要はない

1
npm i puppeteer

output-pdf.jsを作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page = await browser.newPage();
await page.goto('https://github.com/trending', {waitUntil: 'networkidle2'});

var file_name = 'default';

if (process.argv[2]) {
file_name = process.argv[2];
}

await page.pdf(
{
path: file_name + '.pdf',
width: '1680px',
printBackground :true,
}
);

await browser.close();
})();

下記のコマンドでgithub-trend.pdfが作成されれば成功

1
$ node index.js github-trend

Apache(php)からpuppeteerを実行するには?

Error executing Puppeteer from PHP
Can’t execute Puppeteer with user “apache” (CentOS 7)

上記などでも報告されているとおり、puppeteernpm i puppeteerによって最初からハンドルされているchromeを使用する場合はWebアクセスをトリガーにphpからpuppeteerを実行することはできない。

node_modules/puppeteer/.local-chromium/のpermissionを変更する方法もありますが、chromiumをOSにインストールする方が正攻法な気がする。

  1. 下記でchromiumをインストールする

    1
    $ sudo yum install chromium
  2. インストールしたchromiumを指定するようにソースを編集する

実行パス(executablePath)をインストールしたchromiumに変更する

1
2
3
4
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox'],
executablePath: '/bin/chromium-browser',
})
;

golang-migrate/migrateの使い方

installation of centos

パスの通ったディレクトリに移動

1
$ cd ~/bin

ダウンロードと解凍。
そして実行ファイルを作成。
Linux(centos)の場合

1
2
3
4
5
6
-- pathの通ったディレクトリに移動(~/bin とかでもよい)
$ cd /usr/local/bin
$ curl -L https://github.com/golang-migrate/migrate/releases/download/v3.2.0/migrate.linux-amd64.tar.gz | tar xvz
$ mv migrate.linux-amd64 migrate
$ migrate --version
3.2.0

macの場合

1
2
3
4
-- pathの通ったディレクトリに移動(~/bin とかでもよい)
$ cd /usr/local/bin
$ curl -L https://github.com/golang-migrate/migrate/releases/download/v3.2.0/migrate.darwin-amd64.tar.gz | tar xvz
$ mv migrate.darwin-amd64 migrate

バージョンの確認は以下のページから。
golang-migrate/migrate

usage

オプションをつけてmigrationファイルを作成した例1

1
$ migrate create -ext sql -dir dir_name alter_table_t_user

オプションをつけてmigrationファイルを作成した例2

1
$ migrate create -ext sql alter_table_t_user

migrationを実行

1
migrate -database 'postgres://user_name:vagrant@localhost:5432/db_name?sslmode=disable' -path ./ up