What's New Qiita

20200223のlaravelに関する記事は6件です。

  • 投稿日：2020-02-23T20:26:41+09:00

Laravelでミニブログを作ろう #3

前回:https://qiita.com/customaddone/items/7563a3252e4debc05f1a
GitHub:https://github.com/customaddone/larablog

今回はdockerでterraformのコンテナを立てます

Terraform概要

Terraformとは

コードによりインフラの構築、変更を行うツール
AWS,GCPなどのクラウド上のインフラに手を加えることができる

Terraformのメリット

GUIを通さずインフラに変更を加えられる（ブラウザ上からの操作によるミスを防げる）
一度書いたコードを使い回すことができる

Dockerfile

まずdockerディレクトリ直下にTerraform用のディレクトリを追加して下さい

docker/terraform/Dockerfile
FROM alpine:3.10

# 最新バージョン
ARG terraform_version="0.12.21"

# Terraformインストール用のコマンドを使えるようにwget unzip curlをインストール
# Terraformをインストールして解凍する
# ディレクトリを作成する
RUN apk update --no-cache \
    && apk add --no-cache \
        wget \
        unzip \
        curl \
    && wget https://releases.hashicorp.com/terraform/${terraform_version}/terraform_${terraform_version}_linux_amd64.zip \
    && unzip ./terraform_${terraform_version}_linux_amd64.zip -d /usr/local/bin/ \
    && rm -rf ./terraform_${terraform_version}_linux_amd64.zip \
    && mkdir terraform

WORKDIR /terraform

# いちいちterraformコマンドを打つのが面倒な場合
# CMD ["terraform"]

docker-compose

docker-compose.yaml
terraform:
    build:
      context: .
      dockerfile: docker/terraform/Dockerfile
    volumes:
      - ./terraform:/terraform/ 
    environment:
      - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID}
      - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY}
      - AWS_REGION=${AWS_DEFAULT_REGION}
    tty: true

environmentでAWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEYを指定しますが
、直に書いたままgit pushするとGitHub上に反映され、キーの情報が全世界に向けて公開される（最悪赤の他人にキーを悪用されてMAX課金されてしまう）ので、環境変数を用います

.env
AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxx
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxx
AWS_DEFAULT_REGION=xxxxxxxxxxxxxxx

docker-compose.yamlはデフォルトで.envの情報を読み込むので、.envに変数の値（キーの情報）を書くと、docker-compose.yamlでその値を使えます
.envはgitignoreに書いてあるので、git pushしてもGitHub上に反映されません

これでdocker-compose up -d した後、docker-compose exec terraform shしてterraformコンテナの中に入ることでterraformを利用できます

Terraformの使用

試しにVPCを立ててみましょう

larablog
　　├── terraform
           ├── vpc # 追加
terraform/vpc/aws_vpc.tf
# ファイルの末尾にtfをつけてください
# VPCは他のネットワークから論理的に切り離されたネットワークです
# EC2などのリソースを配置します
resource "aws_vpc" "example" {

  #vpcのipv4のアドレス範囲を設定します
  # 10.0.0.0〜10.0.255.255まで使えるよ
  cidr_block           = "10.0.0.0/16"

  # AWSのDNSサーバーによる名前解決を有効にする
  # route53が使えるようになる
  enable_dns_support   = true
  enable_dns_hostnames = true

  # タグをつけてコンソール上でわかりやすく
  tags = {
    Name = "larablog"
  }
}

vpcディレクトリに移動してterraform init, terraform applyするとvpcが作成されます。
が、作成と同時にvpcディレクトリにterraform.tfstate等のファイルができます（どでかい）。これらはgitignoreに書き込んでgit管理しないようしましょう

.gitignore
...

# Local .terraform directories
/terraform/**/.terraform/* # 追加

# .tfstate files
/terraform/**/*.tfstate # 追加
/terraform/**/*.tfstate.* # 追加

...

これでterraform init, terraform applyコマンドを打つとvpcが立ち上がります。AWSのコンソールで確認してみてください

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T16:56:18+09:00

Laravelのslot機能を使ってボタンの文言を変えて使い回す！

はじめに

Laravelのbladeでhtmlのコーディングを行っていると、「Vueのコンポーネントの様に中身だけ変えて使い回したい！って場面が多々出てくると思います。

そんな時にLaravelに元々あったsectionとは別にslotという機能がめちゃくちゃ感覚的に使えて良かったので説明していきます。

slot機能とは

まず、プロダクトの中で使い回すパーツをコンポーネントと呼びます。
例えば、こんな感じのボタンですかね。

スクリーンショット 2020-02-23 16.09.43.png

これをslot機能を使う事で、中の文言だけ変えて色々なところで使い回していきます。

slotの使い方

コンポーネント作成

まずコンポーネントを作っていきます。

変えていきたい部分を {{$slot}} としておきます。

views/button.blade.php
<button class="Button -fill -blue" type="button">
    <span class="Button__inner">
        <span class="Button__text">
            {{$slot}}
        </span>
    </span>
</button>

ちなみにボタンのscssはこんな感じですでに定義しています。

views/button.scss
.Button {
    @at-root {
        & {
            display: inline-flex;
            border: 0;
            border-radius: 3px;
            background-color:#ffffff;
            color: black;
            font-size: 14px;
            text-decoration: none;
            vertical-align: middle;

            &:hover {
                opacity: 0.8;
            }

            &.-fill {
                background: linear-gradient(to bottom, #fefefe 0%, #f3f5f7 100%);

                &.-blue {
                    background: linear-gradient(180deg, #1E4A91 0%, #193E79 100%);
                    color: $white;
                }

                &.-red {
                    background: linear-gradient(180deg, #F85359 0%, #DC151D 100%);
                    color: $white;
                }
            }

        .Button__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 32px;
            padding: 4px 15px;
            border: 1px solid $border-color;
            border-radius: 3px;
        }

        .Button__text {
            flex: 0 1 auto;
        }
    }
}

これにてボタンのコンポーネントはできました。

コンポーネントを呼び出す

先ほど作ったコンポーネントを呼び出していきます。

top.blade.php
@component('button')
    確認画面
@endcomponent

この様に('button')の部分にコンポーネント名。
@componentと@endconponentの間に{{$slot}}に入れたい文言を書きます。

ボタンを使い回す！

今後ボタンを使うときは、先ほどやった様に文言を指定して呼び出してあげるだけで簡単にできます。
top.blade.phpのみをいじる事で様々な文言のボタンを出してみましょう。

スクリーンショット 2020-02-23 16.51.34.png

top.blade.php
<div class="Button_group">
  @component('button')
    下書きを削除
  @endcomponent
  @component('button')
    下書きの保存して一覧の戻る
  @endcomponent
  @component('button')
    確認画面
  @endcomponent
</div>

<style>
.Button_group{
display:flex;
}
</style>

こんな感じで簡単に文言違いのボタンを複製できますね。
slotを使う事で、@includeだけでは実践できなかった、ちょっとした変更ができる様になります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T14:18:40+09:00

Laravel プロジェクトに郵便番号データ、都道府県、市区町村データを簡単に作成する

Laravel プロジェクトに郵便番号データ、都道府県、市区町村データを簡単に作成するライブラリを作成しました。

Github
https://github.com/ShibuyaKosuke/laravel-postalcode-japan

laravel-postalcode-japan

郵便番号データを取り込んで住所マスタを作成します。

Install

composer require shibuyakosuke/laravel-postalcode-japan

Setup

マイグレーションを実行します。

php artisan migrate

postal_codes, cities, prefectures テーブルが作成されます。

php artisan postalcode:update

を実行すると、自動的に郵便番号データをダウンロードし、
各テーブルにデータを投入します。同じコマンドを再度実行しても、cities, prefectures のデータは updateOrCreate() で更新されます。

Usage

あらかじめルートが設定されており、ajax/prefectures/ にアクセスすると都道府県の一覧、ajax/cities/{prefecture}
にアクセスすると市区町村の一覧をJSONデータで取得することができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T07:23:22+09:00

【初学者向け】LaravelチュートリアルToDoアプリへの機能追加

はじめに

私は所属しているエンジニアサークルでLaravelを学んでいます。
Laravelのとっかかりで、こちらのチュートリアルをやった方も多いんではないでしょうか。
今回はこの完成したToDoアプリに機能追加の第一弾を行おうと思います。

今回やること

今回やりたいことは大きく分けると2つです。

1, ユーザーページを作り下記3つを表示させる
・ユーザー名
・アドレス
・ユーザー名編集ページへのリンク

2, ユーザー名変更機能の実装
・ログイン後であれば任意のユーザー名に変更可能

難易度としてはそこまで高くないですが、WEBサービスを今後作る上で必要な機能なので確実に押さえておきたい所です。

実装までの流れ

コードを書く前に必要な事を整理してきます。

・ ユーザーページへ遷移するためのルーティングを用意
・ ユーザーページへ遷移するためのリンクを用意
・ コントローラーにユーザーの情報を取得するメソッドを用意
・ ユーザーページのテンプレートファイルを用意
・ ユーザーページにユーザー名編集ページへのリンクを用意
・ ユーザー名編集ページへのルーティングを用意
・ ユーザー名編集ページでユーザー名が変更された際のルーティングを用意
・ コントローラーにユーザー名を更新するメソッドを用意

一見すると大変そうですが、１つ１つは大変な作業ではありません。

タスク一覧ページ

まず見た目を確認しておきましょう。
ヘッダー部分にユーザーページというリンクがあるのが分かると思います。
スクリーンショット 2020-02-22 23.37.34.png

ルーティング

では早速web.phpにルーティングを書いていきます。

web.php
Route::get('/users', 'UsersController@showUsers')->name('users.showUsers');

users.showUsersと名前をつけました。

ユーザーページへのリンクを設置

次にヘッダー部分に、ユーザーページへ遷移するためのリンクを準備します。
先ほど定義したルーティングを利用します。

layout.blade.php
        <a href="{{ route('users.showUsers') }}" class="my-navbar-item">ユーザーページ</a>
        |

コントローラー

次に、UsersControllerにメソッドを追加します。

UsersController.php
public function showUsers()  //ユーザー情報を取得
    {
        $user = Auth::user();

        return view('users/showUsers',['user' => $user]);

Auth::を使ってログインしているユーザーの情報を取得し、$userに代入しています。
これでログインしているユーザーの情報は取得できました。
そしてshowUsersというテンプレートに情報を渡しています。
テンプレートファイルはこれから準備します。

ユーザーページ

ユーザーページの見た目を確認をしておきましょう。
冒頭でも説明したように、ユーザー名、アドレス、ユーザー名編集ページへのリンクが表示されているシンプルな画面です。
スクリーンショット 2020-02-22 23.37.43.png

テンプレートファイル

ではユーザーの情報を表示させるshowUsersというテンプレートファイルを準備します。

$ touch resources/views/users/showUsers.blade.php

ファイルが出来上がったら記述します。

showUsers.blade.php
//省略
<p>{{$user->name}}</p>  //ユーザー名
//省略
p>{{$user->email}}</p>  //メールアドレス
//省略
<a href="{{ route('users.editUsers') }}">ユーザー名を編集する</a>  //ユーザー名編集ページへのリンク
//省略

先ほどコントローラーから受け取った$userは認証されたユーザーの情報も保持しています。
$user->でカラムへアクセスすると値を取得し表示できます。

ユーザー名編集ページへのルーティング

ユーザーページに設置したリンクをクリックされた時のルーティングをweb.phpに記述します。

web.php
Route::get('/users/edit', 'UsersController@editUsers')->name('users.editUsers');

users.editUsersと名前をつけました。
ルーティングの名前は自分以外がコードを見た時に、処理の内容をイメージしやすい名前をつけます。

コントローラー

ルーティングで呼ばれたeditUsersメソッドをUsersControllerに記述します。

UsersController.php
public function editUsers()  //ユーザー名編集画面へ遷移する
    {
        return view('users/editUsers');
    }

内容としてはユーザー名編集ページへ遷移するためだけの記述です。
テンプレートファイルであるeditUsersは後から準備します。

ユーザー名編集ページ

最後にユーザー名編集ページの見た目を確認しておきましょう。
スクリーンショット 2020-02-22 23.37.51.png

ルーティング

先に変更ボタンが押された時にメソッドを呼ぶ必要があるため、ルーティングを定義しておきます。

web.php
Route::post('/users/edit','UsersController@updateUsers')->name('users.updateUsers');

今回は入力値があるため、postを使いました。

テンプレートファイル

ユーザー名が入力され変更ボタンが押された時に、先ほど定義したルーティングを利用したいため、フォーム内に記述します。

editUsers.blade.php
//省略
<form action="{{ route('users.updateUsers') }}" method="post">
//省略

コントローラー

UsersController.php
public function updateUsers(Request $request)  //ユーザー名を変更する
    {
        $name = $request->name;

        $edit_user = Auth::user();
        $edit_user->name = $name;
        $edit_user->save(); 

        return redirect()->route('users.editUsers');
    }

こちらが今回の課題の要と言えるでしょうか。
Requestクラスには、アクセスしてきた際の情報が格納されています。
今回の場合、Viewのフォームの中でname = "name"としたため（View省略のため掲載なし）$Requestクラスのオブジェクトでnameにアクセスして、入力された変更したいユーザー名を取得しています。
そして現在ログインしているユーザーの名前に上書きしています。

最後に、ユーザー名を変更しても画面遷移をする必要はないため、ユーザー名編集ページへリダイレクトとしています。

動作確認

では,最後にユーザー名を実際にtestからabcへ変更してみます。
スクリーンショット 2020-02-23 0.57.32.png

変更ボタン押下
スクリーンショット 2020-02-23 0.57.39.png
ヘッダーのユーザー名がabcに変わりましたね。

さいごに

LaravelチュートリアルはLaravel導入にとてもいい教材だと感じました。
また、実際に自身で考えて機能を追加する事で、理解が深まったと強く感じるのでぜひ色々な機能実装に挑戦してみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T02:45:13+09:00

twitterの情報発信を助けるWebサービス「EMOEMO」を公開して見て感じた事。(個人開発)

はじめに

初めまして！てらって呼んでください:relaxed:
簡単に自己紹介をするとプログラミング初学者です。(３ヶ月目)
現在個人開発中のWEBサービス（EMOEMO）のプロトタイプを先週公開し、今日リニューアルしました。
苦労した点や、実際にどの様に考え何を改善したのかアウトプットしてみようと思います。

↓プロトタイプを試しにデプロイし公開した記事です。
前回の記事

↓Webサービス「EMOEMO」のURLです。
EMOEMOはこちら

結論（問題点=>解決策）

  1. モバイルファーストの欠如 => SPユーザーの離脱率向上
  2. 利用する際UIへの不安感 => 投稿時のUIを整備する
  3. 利用用途の不明瞭性 => アプリケーションの説明を簡略化

上記３点を改善しました。この3つについて今回は書いていきます。

モバイルファーストの欠如 => スマートフォン(SP)ユーザーの離脱率向上

PCのみでの利用を想定していて、スマートフォン（SP）での利用を考えていませんでした。
実際に公開して誰一人登録してくれなかったので、Twitterを利用しているユーザーはスマホでの利用が多い現実を知り、レスポンシブ対応してみる事にしました。

！編集前！
スクリーンショット 2020-02-11 17.37.25.png

！編集後！
スクリーンショット 2020-02-21 12.45.19.png

利用する際UIへの不安感 => 投稿時のUIを整備する

UIがぐちゃぐちゃだったので整えました。CSSがバグって一回大変なことにもなりました。汗。
だいぶマシになった気がします。

！編集前！
スクリーンショット 2020-02-11 17.16.36.png
スクリーンショット 2020-02-11 17.55.22.png
！編集後！
スクリーンショット 2020-02-20 17.10.01.png
スクリーンショット 2020-02-23 0.24.05.png
スクリーンショット 2020-02-21 12.45.39.png

利用用途の不明瞭性 => アプリケーションの説明を簡略化

LP部分の説明が見辛かったので、モダンなサイト真似て見やすい構成にしました。（SPレスポンシブもしています。）

！編集前！
スクリーンショット 2020-02-11 17.37.29.png

！編集後！
スクリーンショット 2020-02-21 12.45.19.png

スクリーンショット 2020-02-21 12.45.16.png

苦労した点

1位
twitterの認証を利用した画像送信関連の実装。
まず、1枚遅れる様にし、それを4枚にする。
その後編集できる様にするのが大変でした。一番時間かかったと思います。

2位
twitter認証でログインする。
コールバックIDの指定がかなり難しく訳わかんないURLの指定をしていてなかなかうまくいきませんでした。
なんとかログインできる様になった瞬間滅茶苦茶嬉しかったのを覚えています。

WEBアプリを個人開発してみて感じた事

色々試しては見たのですが使ってもらうって滅茶苦茶難しいということを身を持って実感しました。WEBアプリケーションを作るのがまず難しいのに実際にそれを使ってもらうのはまじで激ムズです。

↓勉強した事等を呟いています。
twitterアカウント

↓EMOEMOのリンク
EMOEMO

もし最後まで読んでくれている方がいたら嬉しい限りです。
もし気に入ったらいいねをしていただけると嬉しいです！
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T02:45:13+09:00

twitterの情報発信を助けるWebサービス「EMOEMO」を公開してみて感じた事。(個人開発)

はじめに

初めまして！てらです:relaxed:
簡単に自己紹介をするとプログラミング初学者です。(３ヶ月目)
現在個人開発中のWEBサービス（EMOEMO）のプロトタイプを先週公開し、今日リニューアルしました。
苦労した点や、実際にどの様に考え何を改善したのかアウトプットしてみようと思います。

↓プロトタイプを試しにデプロイし公開した記事です。
前回の記事

↓Webサービス「EMOEMO」のURLです。
EMOEMOはこちら

結論（問題点=>解決策）

  1. モバイルファーストの欠如 => SPユーザーの離脱率向上
  2. 利用する際UIへの不安感 => 投稿時のUIを整備する
  3. 利用用途の不明瞭性 => アプリケーションの説明を簡略化

上記３点を改善しました。この3つについて今回は書いていきます。

モバイルファーストの欠如 => スマートフォン(SP)ユーザーの離脱率向上

PCのみでの利用を想定していて、スマートフォン（SP）での利用を考えていませんでした。
実際に公開して誰一人登録してくれなかったので、Twitterを利用しているユーザーはスマホでの利用が多い現実を知り、レスポンシブ対応してみる事にしました。

！編集前！
スクリーンショット 2020-02-11 17.37.25.png

！編集後！
スクリーンショット 2020-02-21 12.45.19.png

利用する際UIへの不安感 => 投稿時のUIを整備する

UIがぐちゃぐちゃだったので整えました。CSSがバグって一回大変なことにもなりました。汗。
だいぶマシになった気がします。

！編集前！
スクリーンショット 2020-02-11 17.16.36.png
スクリーンショット 2020-02-11 17.55.22.png
！編集後！
スクリーンショット 2020-02-20 17.10.01.png
スクリーンショット 2020-02-23 0.24.05.png
スクリーンショット 2020-02-21 12.45.39.png

利用用途の不明瞭性 => アプリケーションの説明を簡略化

LP部分の説明が見辛かったので、モダンなサイト真似て見やすい構成にしました。（SPレスポンシブもしています。）

！編集前！
スクリーンショット 2020-02-11 17.37.29.png

！編集後！
スクリーンショット 2020-02-21 12.45.19.png

スクリーンショット 2020-02-21 12.45.16.png

技術的に苦労した点

1位
twitterの認証を利用した画像送信関連の実装。
まず、1枚遅れる様にし、それを4枚にする。
その後編集できる様にするのが大変でした。一番時間かかったと思います。

2位
twitter認証でログインする。
コールバックIDの指定がかなり難しく訳わかんないURLの指定をしていてなかなかうまくいきませんでした。
なんとかログインできる様になった瞬間滅茶苦茶嬉しかったのを覚えています。

使用した技術

フレームワーク： laravel
データベース：　mysql
API：　　　　　twitterAPI
デプロイ：　　　heroku

WEBアプリを個人開発してみて感じた事

色々試しては見たのですが使ってもらうって滅茶苦茶難しいということを身を持って実感しました。WEBアプリケーションを作るのがまず難しいのに実際にそれを使ってもらうのはまじで激ムズです。

↓勉強した事等を呟いています。
twitterアカウント

↓EMOEMOのリンク
EMOEMO

もし最後まで読んでくれている方がいたら嬉しい限りです。
もし気に入ったらいいねをしていただけると嬉しいです！
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧