Railsの日本語ドキュメント

Ruby on Rails ガイド (5.0 対応)
電子書籍版もあってうれしい。
Ruby on Rails チュートリアル

チュートリアルからやる。

1-3 最初のアプリケーション

フォルダ構成はここに書いてある。

railsサーバを立ち上げる

http://localhost:3000でアクセスできる。

1-4 Hello, world!

rubyは何でもシンプルだな。
アクションは、下記のように書く。

ルーターは、config/routes.rbで、下記のように書く。

コントローラ#アクション

gitで管理する。

Herokuにデプロイしてみる
HerokuはPostgreSQLしか使えないので、Gemfileの本場用にpgを追加する。
まだ、他のgemfileを変更してないので、下記も追加した。

bundle installする

Heroku CLIをインストールする。

2 Toyアプリケーション

Railsのscaffoldは、rails generateスクリプトにscaffoldコマンドを渡すことで生成されます。 scaffoldコマンドの引数には、リソース名を単数形にしたもの (この場合はUser) を使用し、必要に応じてデータモデルの属性をオプションとしてパラメータに追加します

次はDBをマイグレートする。

何でもシンプルだなー。

@記号で始まる変数をRubyではインスタンス変数と呼び、Railsのコントローラ内で宣言したインスタンス変数はビューでも使えるようになります。

windows10でRuby on Railsを使う

ここからrubyのダウンロードする。Ruby 2.3.3 (x64)にした。インストールした。

$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]

エディタはRubyMine使う。

gemが使えない。

$ gem install rails
Please update your PATH to include build tools or download the DevKit
from ‘http://rubyinstaller.org/downloads’ and follow the instructions
at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’

http://rubyinstaller.org/downloadsにあったからインストールした。

$ gem -v
2.5.2
$ gem update –system

できた。

$ gem -v
2.6.11

Ruby on Railsをインストール

$ gem install rails
$ rails -v
Rails 5.0.2

Railsのドキュメント見て勉強する。

webpack2でReactを使う

webpacke2でReactの開発環境を作る。

フォルダ・ファイルを作る

$ mkdir react1
$ cd react1
$ mkdir src
$ mkdir public
$ touch public/index.html
$ touch src/index.js
$ touch webpack.config.js
$ touch postcss.config.js

インストール

$ npm init -y
$ npm i -D webpack webpack-dev-server
$ npm i -D babel-loader babel-core babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-react
$ npm i -D extract-text-webpack-plugin
$ npm i -D style-loader css-loader postcss postcss-loader autoprefixer cssnano precss react-css-modules
$ npm i -D react react-dom

package.jsonは下記のようになった。

webpack.config.jsを作る

postcss.config.jsを作る

public/index.htmlを作る

src/index.jsを作る

webpackを実行する。実行後、public/bundle.jsが作成される。

$ webpack

webpack-dev-serverを実行する。実行後、http://localhost:8080にアクセスすると確認できる。

$ webpack-dev-server

PostCSS

PostCSSは、高速にCSSをごにょごにょできるツール。プラグインが沢山あって色々なことができる。

postcss/postcss
PostCSS とは何か by Yoshihide Jimbo
PostCSS まとめ
Webpack2でpostcssを使う
postcss/postcss-loader

プラグインは下記を使ってみることにした。
autoprefixer
cssnano
precss
react-css-modules

webpack2で使ってみる

$ npm install –save-dev postcss postcss-loader autoprefixer cssnano precss react-css-modules

postcss.coonfig.js

webpack.config.js

hoge.css

$ webpack

style.css

Google Cloud VisionでOCRする

CLOUD VISION API

PHP用のライブラリを使ってみる

Cloud Vision API Client Libraries
(APIリファレンス)Google\Cloud\Vision\VisionClient

$ composer require google/cloud
$ gcloud auth application-default login
$ vim cv.php
$ php cv.php

サンプルコード

cv.php

gcloudの設定がうまくいかなかった(プロジェクト指定ができなかった)ので、サービスアカウントを作成して、ダウンロードしたjsonファイルを下記のように設定したらできた。

CakePHP2 – Pingサーバを構築してブログの更新通知を受け取る

XML-RPCという仕組みが使われていて、大体weblogUpdates.extendedPingか、weblogUpdates.pingというメソッド名が使われる。IXR_Library.phpというライブラリがあるのでこれを使って作る。飛んでくる情報の最小単位はブログ名とブログURLなので、ブログURLからRSSのURLを取得して、RSSから最新記事のURLとタイトルを取得する。WordPressがweblogUpdates.extendedPingで、アメブロとライブドアが、weblogUpdates.pingだった。wordpressは、array(ブログ名、ブログURL、RSS_URL)できた。RSS URLを取得するのにphpQuery使おうと思ったけど、どうもライブドアだとエラーになるから使うのやめた。あとアメブロのRSSは、新規投稿が1分後くらいにしか反映されないから、CRONで5分後に再チェックするようにした。

参考:
更新Pingの送信
Pingを送信する!
Google ブログ検索の更新通知 API について
CakePHP + 更新Ping送信で更新情報サービスを利用する方法
IXRライブラリの使い方
utils/Model/Behavior/PingbackableBehavior.php
How-to-create-an-XML-RPC-server-with-CakePHP.rst
CakePHP-Wordpress-Datasource/Vendor/IXR_Library.php
[42-3] link rel=”alternate” で他言語サイトやモバイル版へ導こう

CakePHP2 – RSS取得

https://book.cakephp.org/2.0/ja/core-utility-libraries/xml.html

CakePHP2 – phpQueryを使う

phpQuery
Github:TobiaszCudnik/phpquery
Composer対応したやつ:zomberg/phpquery

使い方

CakePHP3 – Log出力にMonologを使う

Seldaek/monolog

$ composer require monolog/monolog

bootstrap.phpに下記を追加

config/logger.phpに下記を追加

こんな感じで使える。Slackとかに飛ばしたりしたいというときに役立ちそう。

cakeの標準機能でログ出力の調整をする場合は、app.phpのLog設定箇所を変更する。

CakePHPで作られたquickapps/cmsを使ってみる

quickapps/cmsは、CakePHPで作成されたCMSだそうです。ライセンスはGPL-3.0dだそうです。GitHubスターが150個くらい。試しにインストールしてみます。

インストール

$ composer create-project -s dev quickapps/website [website_name]

インストール画面


結構かっこいい。ワードプレスのようなインストール画面でインストール終わったらちゃんと表示された。

ホームページ


フォルダ構成が不思議な感じ。全部プラグイン内で動いてるみたいで、srcフォルダもない。

CakePHP3 – MinifyHtmlプラグイン

WyriHaximus/MinifyHtml

HTMLを圧縮して出力してくれるプラグイン。

インストール

$ composer require wyrihaximus/minify-html

bootstrap.phpに下記を追加。

設定

AppView.phpに下記を追加。

デバッグモードだと圧縮しない。本番モードなら上記だけで圧縮してくれる。

CakePHP3 – whoopsプラグイン

gourmet/whoops

whoopsという、かっこいいエラー画面にしてくれるプラグイン。

$ composer require gourmet/whoops:~1.0

bootstrap.phpの下記ErrorHandlerの箇所を修正する。

修正後

404の場合は変わらないけど、500の場合は、下記のエラー画面に変わった。確かにきれいでわかり易い。

CakePHP3用のよさそうなプラグイン

FriendsOfCake/awesome-cakephp

認証系

FriendsOfCake/Authenticate
CakeDC/users
dereuromark/cakephp-tinyauth
ivanamat/cakephp3-captcha
ADmad/cakephp-jwt-auth
ADmad/CakePHP-HybridAuth

認可系

ivanamat/cakephp3-aclmanager
JcPires/CakePhp3-AclManager
PilOop/cakephp3-auth-acl-bootstrap-adminlte

アップロード系

josegonzalez/cakephp-upload
jrbasso/MeioUpload
davidyell/CakePHP3-Proffer

管理画面系

FriendsOfCake/crud-view
prakashw3expert/cakephp3.0-admin
KarlJakober/CakeAutoAdmin

Bootstrap系

FriendsOfCake/bootstrap-ui

REST API系

CakeDC/cakephp-api
multidots/cakephp-rest-api
hantsy/angularjs-cakephp-sample
Wizehive/cakephp-api-utils
patarkf/cakephp3restapi

グラフ描画系

netusco/CakePhp3-ChartJs
scottharwell/GoogleCharts

ソーシャル系

webtechnick/CakePHP-Facebook-Plugin

画像系

burzum/cakephp-imagine-plugin

検索系

CakeDC/search
FriendsOfCake/search

色々入ってる系

dereuromark/cakephp-tools

CRUD系

FriendsOfCake/crud

カテゴリー・タグ・お気に入り・コメント・評価系

CakeDC/tags
CakeDC/categories
CakeDC/favorites
CakeDC/comments
CakeDC/ratings

CSV系

FriendsOfCake/CakePdf
FriendsOfCake/cakephp-csvview

PDF系

FriendsOfCake/CakePdf

Asset系

markstory/asset_compress

ストレージ系

burzum/cakephp-file-storage

キャッシュ系

ceeram/clear_cache

CMS系

croogo/croogo

チケット管理ツール系

yandod/candycane

Q&Aサイト系

Datawalke/Coordino

WYSIWYG系

CakeDC/TinyMCE

Markdown系

ivanamat/cakephp3-markdown

開発サポート系

josegonzalez/cakephp-mail-preview
ebrigham1/cakephp-error-email

その他

passbolt/passbolt_api
josegonzalez/cakephp-environments
josegonzalez/cakephp-queuesadilla
fheider/cakephp-datatables
scherersoftware/cake-notifications

cakephp3 – DB設定時のTime Zoneエラー

Windows10でXampp使ってcakephp3を動かすとき、DB設定のtimezoneをAsia/Tokyoにすると下記エラーがでた。
General error: 1298 Unknown or incorrect time zone: ‘Asia/Tokyo’

対処法は、ここのとおりやったらできた。

ここから、timezone_2017a_posix_sql.zipをダウンロード・展開して、出てきたsqlファイルをどこかに置く。

そして、下記のようにやる。
$ cd /d/xampp/mysql/bin
$ ./mysql -u root mysql -p < /e/timezone_posix.sql

GCPでUbuntu16・Nginx・PHP7・cakePHP3環境をつくる

Google Cloud Platform(GCP)はAWSのgoogle版です。ここにサービスの説明があります。

Compute Engine

まずプロジェクトを作成する。次に、Compute Engineのコンソールで、VMインスタンスを作成する。ゾーンを日本、マシンタイプをf1-micro、OSをUbuntu16.10で作成してみた。数十秒程度でインスタンスが作成完了し、ブラウザ上でssh接続、ターミナル操作がすぐ可能になった。

マシンタイプの変更方法

参考:vm instanceのMachine type変更方法
IPをスタティックにして、ディスクを削除しないようにしながら、VMインスタンスを削除して、新しくインスタンスをつくるらしい。この間サーバは止まってしまう。でもいずれにしても結構簡単に切替は可能。

ローカル環境でssh接続できるようにする

google cloud SDKをインストールする。インストール完了したら初期設定が動き出すので、ログインしたりゾーン選択したりする。
Compute EngineのVMインスタンスの画面にある、ssh接続用のgcloudコマンドを実行する。これでssh接続できた。

PHPとかNginxとかをインストールする

$ sudo apt-get update
$ sudo apt-get install php
$ php -v
PHP 7.0.15-0ubuntu0.16.10.4 (cli) ( NTS )
$ sudo apt-get install nginx
$ nginx -v
nginx version: nginx/1.10.1 (Ubuntu)
$ sudo apt-get install git vim composer

デフォルトでapache2が入っていて起動されているようだ。
$ sudo systemctl stop apache2
$ sudo systemctl start nginx

Cloud DNS

https://cloud.google.com/dns/quickstart
上記に従って、DNS APIを有効にして、DNSコンソールからドメインを追加する。記載されているネームサーバに合わせて、ドメインのネームサーバを変更して、必要な設定をすると反映される。

Cloud SQL

Google Cloud SQL ドキュメント
Cloud DNSと同様にAPIを有効にしてインスタンスを作成する。Compute Engineから接続するには、ネットワークの承認が必要。下記にやり方が書いてあった。
MySQL クライアントを Compute Engine から接続する

Compute Engineを設定してCakephp3を動かす

$ sudo vim /etc/nginx/sites-available/default

$ sudo systemctl restart nginx
$ cd /var/www/html
$ sudo apt-get install php-fpm php-intl php-mbstring php-zip
$ sudo composer create-project –prefer-dist cakephp/app hoge.com

Compute EngineをCloud SQLにつなぐ

phpmyadminを使う

$ sudo apt-get install mysql-client
$ sudo apt-get install phpmyadmin
$ sudo vim /etc/phpmyadmin/config-db.php

config-db.php

$dbnameがないとエラーになるけど、内容は適当でも大丈夫だった。

$ sudo echo “hoge:$(openssl passwd -apr1 hogepassword)” > /path/to/hogepath
$ sudo chmod 604 /path/to/hogepath
$ sudo vim /etc/nginx/sites-available/default

コマンドラインでmysqlにつなぐ

$ mysql –host=[INSTANCE_IP_ADDR] –user=root -p

cakephp3でmysqlにつなぐ

$ sudo vim /var/www/html/hoge.com/config/app.php
hostをCloud SQLにする。

Let’s EncryptでSSL取得・設定

hoge.comとphpmyadminをhttps接続のみ可能にする。hoge.comにhttpアクセスした場合はhttpsにリダイレクトさせる。

$ sudo apt-get install letsencrypt
$ sudo systemctl stop nginx
$ sudo letsencrypt certonly –standalone -d hoge.com
$ sudo letsencrypt certonly –standalone -d hogehoge.com
$ sudo systemctl start nginx
$ sudo vim /etc/nginx/sites-available/default

$ sudo systemctl restart nginx