昨年の振り返りと今年の抱負

新年明けましておめでとうございます。

年末年始はいろいろとバタバタしており、2018年の振り返りができなかったので、 今更ながら昨年(2018年)の振り返りと今年(2019年)の抱負を書いてみたいと思う。

昨年の振り返り

ざっくりと昨年の個人的に大きかった出来事を振り返ってみる。

CODEBASEプログラミング教室に参加

昨年の4月から6月までCODEBASEのプログラミング教室に2期生として通い始めた。

rnakamine.hatenablog.com

HTML・CSSから始まりJavascript(jQuery)、RubySinatraって流れで講義と合わせて何とか仕事と両立しながら約300時間ほどプログラミングを学習することができた。 このプログラミング教室を受講したことが、昨年でもっとも大きな出来事だった。

Okinawa.rbに参加

CODEBASEのプログミラング教室でRubyを学習していたこともあって、定期的に参加出来るときは参加するようにした。

初めて参加したのがこちら。

rnakamine.hatenablog.com

Okinawa.rbにはめちゃくちゃ凄腕エンジニアの方々がたくさんいてかなり刺激になった。 昨年はただ参加してもくもく作業を進めるっていうのが多かったので、今年は何か作ったものを見せたり いろいろ質問したりして自分からアクションを起こせるようしていければと考えている。

インターンとしてプロジェクトを進める

プログラミング教室の講師でもある、さぼさん @saboyutaka のもとで、インターンという形で、恵さん @20092014 と一緒にRailsのプロジェクトに参加させてもらった。 それまではひたすらコード書いたり本読んだりって感じだったが、実際にプロジェクトに参加させてもらって、 プロジェクトの進め方や、Githubでの運用、アプリケーションの設計などいろいろ得るものがとてもたくさんあった。 独学では絶対に得られないような経験をたくさんさせてもらったので、とても感謝している。 アプリケーション自体はまだまだ完成していないので、今年は合間を見て進めていけたらなと思う。

Laravelのお仕事を始める

インターンの流れでLaravelでのお仕事を頂くことになった。 もちろん、この頃はPHPもLaravelのやったことなかったので、急ピッチで勉強するところから始まった。 Railsはやっていたので、Railsで言うとこの部分か!みたいな感じで似たような部分がいくつかあったので、どうにかやっていけてる感じ?やっていけてないかも。。。 とりあえず、こちらでも本当にたくさんの事を学ばさせてもらっているので、本当に感謝の気持ち。。。

Laravel MeetUp OkinawaでLT枠初登壇

ちょうどLaravelを学習し始めたころだったので、勢いで初LTさせてもらった。

laravel-meetup-okinawa.connpass.com

バリバリ働いているエンジニアの前で技術的な話をするのは死ぬほど緊張した。 どんどんいろいろな勉強会などで、たくさん発表してLT慣れしていきたい。それと平行に人前で話せるような技術力をつけれるように、日々のインプットをしっかりやっていきたい。

今年の抱負

いろんな人に知ってもらえるようにたくさんアウトプットする

僕自身かなりアウトプット力が弱く、昨年はブログも全然書けてなかったので、今年はアウトプットに力を入れていきたい。 具体的には、最低でも週一で記事を書く、LT出来るチャンスがある時は必ず参加するというのを徹底していきたい。

個人プロジェクトを進める

まだ設計の部分全般がかなり弱いので、個人プロジェクトを通して全体を1人で作り上げていきたい。 作りたいものはまだ決まってないので、今月中にはある程度の形は決めていきたいと考えている。

最後に

昨年は4月からプログラミングを始め、人生の中でもかなり大きな変化があった。 今年の4月からは本業としてWebアプリケーションエンジニアとしてお仕事させて頂く予定なので、 しっかりと技術力をつけていき、早く一人前になれるように頑張りたい。 今年はとりあえず、技術力をしっかり身に着ける年にし、また来年新しいことができたらと思う。

今年もどうぞ宜しくお願いします!

Mailableクラスを使ってMail送信機能を実装

個人的な学習でLaravelのMailableクラスを使用してMail送信機能についてまとめてみました。

MailableクラスはLaravel 5.3から使用することができます。

僕自身が書いたコードはこちら

github.com

環境

今回は Laravel5.6.x、PHPは7.2.xを使用しています。

ドライバ

Laravelでは、APIベースのドライバであるMailgun、SparkPost、Amazon SESを使用することができ、かつSMTPよりも高速に動作します。今回はAmazon SESを使用していきます。

まずはこれらのAPIドライバを使用するために、ComposerよりGuzzle HTTPライブラリをインストールしていきます。

$ composer require guzzlehttp/guzzle

さらにAmazon SESドライバを使用する場合は、Amazon AWS SDK for PHPのインストールが必要となります。 comporser.jsonrequireセクションを以下のように編集。

"require": {
    "php": "^7.1.3",
    "fideloper/proxy": "^4.0",
    "guzzlehttp/guzzle": "^6.3",
    "laravel/framework": "5.6.*",
    "laravel/tinker": "^1.0",
    "aws/aws-sdk-php": "~3.0"  // 追加
},

composer updateを実行します。

次にconfig/mail.phpのdriverオプションをsesに設定します。デフォルトでは以下のようになっていて、こちらに合わせて.envを編集します。

'driver' => env('MAIL_DRIVER', 'smtp'),

config/services.phpも同じで、以下のようになってる箇所を.envから指定していきます。

'ses' => [
    'key' => env('SES_KEY'),
    'secret' => env('SES_SECRET'),
    'region' => env('SES_REGION', 'us-east-1'),
],

.envで最低限、以下の項目が指定されていれば実際に動かすことができました。

MAIL_DRIVER=ses
SES_KEY=
SES_SECRET=
SES_REGION=

Amazon SESに関してはこちらを参考にさせて頂きました。

dev.classmethod.jp

Mailableクラス

アプリケーションから送信されるMailの各種設定をMailableクラスの方で行います。 make:mailコマンドを使用し、Mailableクラスを生成していきます。

$ php artisan make:mail OrderShipped

生成されたクラスのbuildメソッド内で各種設定を行います。

送信元の設定

fromメソッドを使用して送信元を設定します。

/**
 * Build the message.
 *
 * @return $this
 */
public function build()
{
    return $this->from('example@example.com');
}

アプリケーションで同じ"from"アドレスを全メールで使用するのであれば、config/mail.phpでグローバルに指定することもできます。

'from' => [
    'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
    'name' => env('MAIL_FROM_NAME', 'Example'),
],

こちらに合わせて、.envを編集していきます。

また、Amazon SESを使用する場合、送信元の設定はAmazon SESで登録した送信メールアドレス(送信者認証を行ったメールアドレス)を登録しなければなりません。

ビューの設定

Mailableクラスのbuildメソッドの中で、viewメソッドを使用してviewを設定していきます。 メールの中身もBladeのテンプレートエンジンを使用したviewを使うことができます。

/**
 * Build the message.
 *
 * @return $this
 */
public function build()
{
    return $this->view('emails.orders.shipped');
}

viewにデータを渡す

withメソッドを使いviewにデータを渡すことができます。

<?php

namespace App\Mail;

use App\Order;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class OrderShipped extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * @var
     */
    protected $order;

    // 新しいメッセージインスタンスの生成
    /**
     * OrderShipped constructor.
     *
     * @param Order $order
     */
    public function __construct(Order $order)
    {
        $this->order = $order;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('emails.orders.shipped')
            ->with([  // こちらでview側にデータを渡している
                'orderName' => $this->order->name,
                'orderPrice' => $this->order->price,
            ]);
    }
}

今回は適当に以下のようなviewを作成してデータを受け取るようにしています。

resources/views/emails/orders.shipped.blade.php

<p>{{$orderName}}さん</p>
<p>{{$orderPrice}}円のお支払いです。</p>

メールの送信

Mailファサードtoメソッドを使い、宛先を指定することができます。 引数に直接メールアドレスを指定することも可能ですし、ユーザーインスタンス、もしくはユーザーのコレクションを指定することもできます。

Mailableクラスのインスタンスsendメソッドへ渡すことで、メールを送信させることができます。

<?php

namespace App\Http\Controllers;

use App\Order;
use App\Mail\OrderShipped;
use Illuminate\Support\Facades\Mail;

class OrderController extends Controller
{
    public function ship($orderId)
    {
        $order = Order::findOrFail($orderId);

        Mail::to('hello@example.com')->send(new OrderShipped($order));

        return redirect('/');
    }
}

routeも以下のように追加し、

<?php

Route::get('/', function () {
    return view('welcome');
});

Route::get('order/{orderId}', 'OrderController@ship');  // 追加

適当にOrderインスタンスをtinkerなどから作成して、

/order/1にアクセスすると f:id:rnakamine:20181219092342p:plain

メールが送信されてることを確認できました!!

まとめ

Mailableクラスを使用することで、比較的簡単にMail送信機能を実装することができます。

Mailファサードqueueメソッドを使うことによってレスポンスの時間を待たず、バックグラウンドで処理(非同期)したりできるようなので、次回試してみます。

Laravel Novaをインストールしてみる

一緒にお仕事させてもらってるLaravelの案件で、Laravel Novaを使う場面がでてきたので、いろいろ調べたことを何回かに分けて記事にしていきたいと思います。今回は導入編ってことで、Laravel Novaをインストールしていきます。

Laravel Novaとは

Laravelの開発者であるTaylor Otwellが発表した公式の管理画面作成用のパッケージとなっています。 フロントエンドではVue.jsやVue Router、Tailwind.cssが使用されたSPAで構築されており、優れたデザイン性を持った管理画面を構築することができます。 Eloquentモデルに触れることなく、既存のLaravelアプリケーションに簡単に導入することが可能で、その他にもいろいろな機能を持っており、簡単な操作でカスタマイズができるようになっています。

Laravel Nova - Beautifully-designed administration panel for Laravel

要件

  • Composer
  • Laravel Framework 5.6+
  • Laravel Mix
  • Node.js & NPM

なお、Laravel Novaは有償となっており、使用するにはサイト毎にライセンスの購入が必要となります。 ライセンスの購入はこちらから。

インストール

Laravel Novaをインストールするには2種類の方法があり、一つはNovaソースコードを含むzipファイルを直接ダウンロードしてインストールする方法、もう一つはNovaのプライペートリポジトリを使用してComposer経由でインストールする方法です。

今回は後者のNovaのプライペートリポジトリを使用したインストール方法について紹介したいと思います。

まずはcomposer.jsonにNovaリポジトリを追加します。

"repositories": [
    {
        "type": "composer",
        "url": "https://nova.laravel.com"
    }
],

composer.jsonlaravel/novaのパッケージを追加します。

"require": {
    "php": "^7.1.3",
    "fideloper/proxy": "^4.0",
    "laravel/framework": "5.6.*",
+   "laravel/nova": "~1.0"
},

そしてcomposer updateを実行します。

$ composer update

この時、以下のように資格情報が求められます。

f:id:rnakamine:20181006084533p:plain

これらの資格情報は、Novaソースコードをダウンロードする権限を持っているとしてComposerセッションを認証します。自動で資格情報を入力するようにするには、auth.jsonファイルを作成します。

getcomposer.org

auth.jsonを以下のようにユーザーとパスワードを入力し、composer.jsonと同じプロジェクトの直下に配置します。

{
    "http-basic": {
        "nova.laravel.com": {
            "username": "{ユーザー}",
            "password": "{パスワード}"
        }
    }
}

次にnova:installmigrateを実行し、novaのサービスプロバイダとアセットファイル等をアプリケーション内にインストールします。

$ php artisan nova:install
$ php artisan migrate

nova:publishコマンドを実行し、アセットファイル等をpublicディレクトリにコピーします。

$ php artisan nova:publish

f:id:rnakamine:20181009190025p:plain

ここまででインストール完了なので、実際に管理画面にアクセスしてみます。

管理画面にアクセス

デフォルトは/novaで管理画面にアクセスすることができます。

/novaは変更可能

f:id:rnakamine:20181010003116p:plain

標準では認証にUsersテーブルが利用されるので、登録済みのユーザーでログインします。 すでにUsersリソースはNova上で操作ができる状態になっています。

f:id:rnakamine:20181010003553p:plain

パッケージをインストールしていくつかのコマンドを入力すれば、あっという間にここまで作ることができてとても便利です。

次回はNova上で各リソースの扱い方について書いていきたいと思います。

すでにindex貼られているカラムに対してunique制限をかける方法 - Ruby on Rails

すでにindexが貼られているカラムに対して、以下のようにmigrationファイルを編集してunique制限をかけようとした時に

def change
    add_index :users, :email, unique: true
end

そのままdb:migrateすると

Index name 'index_users_on_email' on table 'users' already exists

と怒られてしまうので、その対策メモ

対応

そのままindexを追加すると既に存在するということでエラーがでてしまうので、 一旦、indexを削除してからunique制限をかけると、上手くいった

def change
    remove_index :users, :email
    add_index :users, :email, unique: true
end

参考文的

stackoverflow.com

カラムの型をstringからintegerやbigintに変更しようとしてエラーが出た時の話

カラムの型をstring型からbigint型に変更しようと思って以下のようにmigrationファイルを編集して

class ChangeColumnParentStringToBigint < ActiveRecord::Migration[5.2]
  def change
    change_column :categories, :parent_id, :bigint, null: true
  end
end

rails db:migrateしたところ...

-- change_column(:categories, :parent_id, :integer, {:nill=>true})
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DatatypeMismatch: ERROR:  column "parent_id" cannot be cast automatically to type integer
HINT:  You might need to specify "USING parent_id::integer".
: ALTER TABLE "categories" ALTER COLUMN "parent_id" TYPE integer

とエラー出てしまいます。 日本語に直すとこんな感じです

自動的に整数型にキャストすることはできません "USING parent_id :: integer"を指定する必要があります。

その後、Rollbackしたりして色々やって結構ハマったのでメモ

対応

変更後の型を:bigintと書くのではなく'bigint USING CAST(parent_id AS bigint)'とすることで解決しました

class ChangeColumnParentStringToBigint < ActiveRecord::Migration[5.2]
  def change
    change_column :categories, :parent_id, 'bigint USING CAST(parent_id AS bigint)'
  end
end

integerでも同じように解決できます。

参考文的

stackoverflow.com

qiita.com

Golangの勉強を始めた

普段はRuby on Railsを勉強しているが、Go言語もやらないとなーと思いつつ、先日okinawa.goの勉強会があり、Tour of Goをやるということだったので、その前にまずはドットインストールで事前に学習。その時のメモ。

ちなみに今回の勉強会は出張で参加できなかったので、次はぜひ行きたい。

okinawa-go.doorkeeper.jp

Go言語とは

Go言語は2009年にGoogleが開発した比較的新しい言語で、シンプルな仕様言語、C言語を元に作られているためコンパイルや実行が高速で並行プログラミングに強い。

まずはお約束のHello wolrd

Go言語のプログラミングは何らかのパッケージに属している必要があり、そのうちの一つは かならず mainでなければならない

package main

mainパッケージの中でmain関数があればそれを実行するようになっている

func main() {
}

hello worldと表示させたいので、入出力をするためのパッケージをインポートさせる。 Go言語にはfmtという入出力するためのパッケージが標準で用意されている

import "fmt"

fmtパッケージでは改行付きで表示させるためのPrintlnというメソッドを使うことができるので、これを使ってhello worldを表示させる

func main() {
    fmt.Println("hello world")
}

Go言語は.goという拡張子が推奨されているのので、今回はhello.goというファイル名で、上記で書いたプログラムをまとめたのがこちら

package main
    
import "fmt"
    
func main() {
    fmt.Println("hello world")
}

Go言語の実行

Go言語はコンパイル型の言語なので、go buildコマンドでコンパイルさせる必要があり、 そこで出来た実行ファイルを実行していく

$ go build hello.go
$ ./hello 
hello world

go runコマンドを使うと、コンパイルして実行してくれるので、これでやるといいかも

$ go run hello.go           
hello world

プログラミング教室@CODEBASE 講座3〜4日目

はじめに

先日からCODEBASE主催のプログラミング教室を受講させてもらってます。
今回は講座の3〜4日目の内容について書いて行きます。

講座1〜2日目の内容はこちら

rnakamine.hatenablog.com

HTML, CSS(プログラミング講座3日目)

  • HTMLとは
  • CSSとは
  • HTMLとCSSの関係性
  • Google Chrome 開発ツールの使い方
  • HTML, CSSデザインのトレンド

90年代のWebサイトから現在までのフロント側の技術の流れを見て行きました。

liginc.co.jp

miz2403.com

appleとかgoogleの昔のwebサイトを見ているととても歴史が感じられます。 HTMLの組み方も今と全然違くて、そこをChromeの開発ツールで見ていくのが面白かったです。 divではなくて tableiframe タグを駆使して組んでるのが印象的でした。

こちらで、ウェブの技術やブラウザの技術の歴史の流れを見ることができて面白いですよ。

www.evolutionoftheweb.com

また、HTML5やCSS3のブラウザでのサポート情報が見れる Can I use は是非活用すべき! 私自身も前々職あたりで使用した経験があります。当時はIE6(だったかな?)ぐらいのとても古いブラウザにとても苦しめられてた記憶が。。。

  • MDN

コード書いているなかで、何かつまずいたりしたら、まずはドキュメントを見る癖をつけなきゃなと感じました。 そのなかでも、Mozilaが運営しているMDNのドキュメントはかなりおすすめ。 何か調べ物をする時だけではなく、ざっと目を通すだけでも勉強になります。

  • HTMLの最近の書き方の傾向
    • レイアウト
    • bootstrapとjQueryの功績

jQueryJavascriptのライブラリの一つで、昔のブラウザ毎の仕様がバラバラな時代、その差分を吸収してくれ、DOMの操作も手軽にでき、人気だったのですが、今はブラウザの技術も上がり、本質的な役割は終わったので、積極的にjQueryを使っていく必要がなくなったのかな。 生のJSでもいろんなことができるようですが、まだまだjQueryが使われているところが多いみたいなので、今から勉強するのも全然需要あるのではと思います。

BootstrapはCSSフレームワークTwitter社が提供しています。 Gridシステムを使い、簡単にイケてる感じのデザインのページを作ることができます。

qiita.com

クラスを追加するだけで簡単にボタンが出来たり、レスポンシブ対応させたり、タブを作れたりと かなり便利で慣れれば使いやすそうな印象。テンプレートも豊富で、デザインにあまりお金や時間をかけたくなければぜひ使った方がいいと思います。

Bootstrap(プログラミング講座4日目)

  • Bootstrapとは

先程も出てきましたが、引用させて頂くと、

Twitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。

現在はBootstrap4がリリースされています。

主な変更点は

  1. 使用しているCSSプリプロセッサーがSassに変更された
  2. 基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更された
  3. グリッドシステムがflexbox対応になり基準のサイズ名が変更になった
  4. Panelsが廃止され、Cardsが追加された
  5. 汎用クラスが追加された
  6. 各種記述法が変更された

となっています。

参照: Bootstrap4の変更点についてまとめてみた | Will Style Inc.|神戸にあるウェブ制作会社

テンプレート自体も豊富で、無料で提供しているものから有料なものまであり、 デザイン力がなくてもいい感じのページが作れたりします。 海外製のテンプレートが豊富とのこと。

  • Bootstrapの書き方
  • 実際にBootstrapのテンプレートを使ってサイトを作ってみよう

この日は実際に公式サイトからテンプレートを探してきて、Bootstrapの読み込みから各自行い、 簡単なWebサイトを作成する時間が設けられました。

テンプレートの枠にはめて編集していくのが逆に難しくて、いい感じの仕上がりにはならなかったですが、公式ドキュメントを見ながらCarousel Slider(カルーセルスライダー)などを実装して動かすことができたので良かったです。

受講生でも何名かいい感じのWebページを仕上げていたので、素晴らしかったです!

この一週間でやってきたこと(自主学習)

prog-8.com

  • ドットインストール Bootstrap

Bootstrap 4入門 (全22回) - プログラミングならドットインストール

  • 楽しいRuby(15章まで)

たのしいRuby 第5版

たのしいRuby 第5版


最後に

プログラミングスクールも2周目に入り、そろそろ受講生の顔と名前も覚えてきて、 学生と授業を受けるのが専門学校以来なので、楽しいです! 自主学習時間もいい感じに確保できているので、あとはしっかりスキルをつけていきたいと思います。