2024-11-30

【GitHubActions】GitHubにpushしたいにコードを自動レビュー

プログラミング GitHubActions

GitHub ActionsでSonarCloudスキャン結果に基づいてGitHub Issueを作成する手順

前提条件

GitHub リポジトリにSonarCloudがセットアップされていること。
SonarCloudのAPIキー（SONAR_TOKEN）とGitHubの認証用トークン（GITHUB_TOKEN）が設定されていること。

1. GitHub Actionsの設定

GitHub ActionsのWorkflowの作成

GitHub Actionsのワークフローを作成し、SonarCloudのスキャン結果をチェックして、スキャンが成功した場合にGitHub Issueを作成する処理を実行します。

以下はsonarcloud.ymlという名前のワークフローファイルの例です。

name: SonarCloud Analysis

on:
  push:
    branches:
      - main  # mainブランチにpushしたときに実行
  pull_request:
    branches:
      - main  # mainブランチに対するPRが作成または更新されたときに実行

permissions:
  issues: write  # GitHub Issuesへの書き込み権限を付与

jobs:
  sonarcloud:
    runs-on: ubuntu-latest
    steps:
      # ソースコードをチェックアウト
      - name: Checkout code
        uses: actions/checkout@v2

      # Java 17をセットアップ
      - name: Set up Java 17
        uses: actions/setup-java@v3
        with:
          java-version: "17"
          distribution: "adopt"

      # SonarCloudのキャッシュを設定
      - name: Cache SonarCloud
        uses: actions/cache@v2
        with:
          path: ~/.sonar/cache
          key: ${{ runner.os }}-sonar-${{ hashFiles('**/sonar-project.properties') }}
          restore-keys: |
            ${{ runner.os }}-sonar-

      # SonarCloudスキャンの実行
      - name: Run SonarCloud Scan
        id: sonarcloud
        uses: SonarSource/sonarcloud-github-action@v2
        with:
          args: >
            -Dsonar.projectKey=crazymaki_training-note
            -Dsonar.organization=crazymaki
            -Dsonar.host.url=https://sonarcloud.io
        env:
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}  # SonarCloudのAPIトークンを設定

      # SonarCloudスキャンが成功したかチェック
      - name: Check if SonarCloud scan was successful
        id: check-sonarcloud-status
        run: |
          if [ $? -eq 0 ]; then
            echo "SonarCloud scan was successful."
          else
            echo "SonarCloud scan failed."
            exit 1  # スキャン失敗時にエラーを返す
          fi

      # スキャンが成功した場合にGitHub Issueを作成
      - name: Create GitHub Issue for successful scan
        if: success()  # スキャンが成功した場合のみ実行
        run: |
          curl -X POST             -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}"             -d '{"title": "SonarCloud Scan Successful", "body": "SonarCloudのスキャンが正常に完了しました。問題はありません。"}'             https://api.github.com/repos/${{ github.repository }}/issues

コードの説明

name: ワークフローの名前を指定します（この例では「SonarCloud Analysis」）。
on: トリガー設定。pushやpull_requestに対して、このワークフローが実行されます。
- push: mainブランチへのpushイベントでワークフローをトリガー。
- pull_request: mainブランチへのPR作成や更新時にトリガー。
permissions: GitHub Actionsに対する権限設定。ここでissues: writeを設定することで、GitHub Issuesへの書き込みが許可されます。
jobs: 実行するジョブを定義します。この例ではSonarCloudスキャンを実行し、その結果に応じてGitHub Issueを作成します。
- checkout: リポジトリのコードをチェックアウトします。
- setup-java: Java 17をセットアップします。SonarCloudスキャンにはJavaが必要です。
- cache: SonarCloudのキャッシュを設定します。
- sonarcloud: SonarCloudスキャンを実行します。この際に必要な引数（プロジェクトキーや組織名）を指定します。
- check-sonarcloud-status: SonarCloudスキャンが成功したかどうかを確認します。$?は直前のコマンドの終了コードを取得し、成功（終了コード0）の場合は次に進み、失敗（非0）の場合はエラーを返します。
- create-issue: スキャンが成功した場合にGitHub Issueを作成します。curlコマンドを使ってGitHub APIにPOSTリクエストを送り、GITHUB_TOKENを使用して認証します。

2. 必要な設定

SONAR_TOKEN: SonarCloud API用のトークン。このトークンをSecretsに登録し、GitHub Actionsで使用します。
GITHUB_TOKEN: GitHubの認証トークン。このトークンはGitHub Actionsに自動的に与えられますが、必要に応じてpermissionsで明示的に設定します。

3. 実行結果

成功した場合：

SonarCloudスキャンが成功した場合、GitHub Issuesに「SonarCloud Scan Successful」というタイトルのIssueが作成されます。
Issueの内容には「SonarCloudのスキャンが正常に完了しました。問題はありません。」というメッセージが含まれます。

失敗した場合：

SonarCloudスキャンが失敗した場合、エラーメッセージ「SonarCloud scan failed」が表示され、ジョブがエラーとして終了します。

4. まとめ

このワークフローにより、SonarCloudのスキャン結果をGitHub Issuesとして記録できるようになり、プロジェクトの品質管理が自動化されます。また、スキャン結果が正常であれば、GitHub Issuesが作成され、チームメンバーに通知されるため、手動でのチェックが不要になります。

2024-11-28

【Laravel】Laravel Sailで簡単に環境構築する方法

プログラミング PHP Laravel

Laravel Sailで簡単に環境構築する方法

Laravelで開発を始めたいけど、環境構築が難しそう…と思っていませんか？
そんな方におすすめなのが、Laravel Sailです！
Sailを使えば、Dockerを利用してLaravelの開発環境を簡単にセットアップできます。この記事では、初心者にもわかりやすく、Laravel Sailで環境を構築する手順を解説します。

Laravel Sailとは？

Laravel Sailは、Dockerを利用したLaravel公式の開発環境です。
従来、PHPやMySQLなどのインストールに手間がかかっていましたが、Sailを使えばその必要がありません。初心者でもコマンドを実行するだけで、Laravelの開発を始められる便利なツールです。

Laravel Sailで環境を構築する手順

1. 必要なツールを準備する

Laravel Sailを使うには、以下のツールが必要です：

Docker
Dockerは、仮想コンテナを使ってアプリケーションを動作させるツールです。以下のリンクからインストールしてください：
Docker公式サイト
Composer
PHP用のパッケージ管理ツールです。インストール方法はこちら：
Composer公式サイト

2. 新しいLaravelプロジェクトを作成する

ターミナル（またはコマンドプロンプト）を開き、以下のコマンドを実行します：

   composer create-project laravel/laravel example-app

ここで、example-appはプロジェクト名です。好きな名前に変更してください。

プロジェクトのディレクトリに移動します：

   cd example-app

3. Laravel Sailをインストールする

curlを使ってLaravel Sailをセットアップする方法は以下の通りです：

Sailの実行スクリプトをダウンロードして実行します：

   curl -s https://laravel.build/example-app | bash

example-appの部分は、プロジェクト名に置き換えてください。このコマンドは、必要なサービスを自動的に設定し、Laravelプロジェクトを準備します。

ダウンロードが完了すると、自動的にプロジェクトのディレクトリが作成されます。次のコマンドでディレクトリに移動します：

   cd example-app

4. Dockerコンテナを起動する

Sailを使って開発環境を起動するには、以下のコマンドを実行します：

./vendor/bin/sail up

初回は必要なイメージをダウンロードするため、少し時間がかかります。
完了後、ブラウザで http://localhost にアクセスするとLaravelの初期画面が表示されるはずです！

5. Sailを使った基本操作

Sailを使えば、よく使う開発環境の操作も簡単です。

サーバーを停止する

./vendor/bin/sail down

Artisanコマンドを実行する

./vendor/bin/sail artisan migrate

Composerを使う

./vendor/bin/sail composer require パッケージ名

よくある質問（FAQ）

Q. Dockerがインストールできません。どうすればいいですか？

Dockerの公式サイトから最新バージョンをダウンロードしてください。また、システム要件を確認してみましょう。

Q. Laravel Sailを使うメリットは？

Dockerを使うことで、開発環境が他の開発者と同じ設定で再現できます。また、面倒な環境構築が不要になります。

まとめ

Laravel Sailを使えば、環境構築のハードルを大幅に下げることができます。Dockerを初めて使う方でも簡単にセットアップできるので、ぜひ挑戦してみてください！

この記事が参考になったら、シェアやブックマークをお願いします！😊

2023-11-22

【Git】Gitのブランチ運用について

プログラミング

はじめに

Gitのブランチを作成する際にfeature/〇〇などのブランチ名をつけたことがあると思うのですが、正直意味を理解していないまま使っていたりしませんか？意外と知らないブランチの知識をまとめてみました！！

ブランチについて

作業履歴を枝分かれさせていきバージョン管理していくためのもの。切り取ったブランチは他ブランチの影響を受けないため複数の作業を同時に進めることが出来ます。チームで開発する際は、それぞれが他のメンバーの作業の影響を受けずに開発が可能で、個人開発する際も作業履歴を綺麗に管理して見やすくなるので、利用しない選択肢は無い。

ブランチの種類

mainブランチ

Gitでリポジトリを新規作成するとデフォルトで作成されるブランチのこと。 git-flowでは、mainブランチに直接コミットすることはなく、マージを行うだけのブランチになります。 例 : main

developブランチ

開発の中心となるブランチのこと。開発中は、developブランチからブランチを切って、作業完了後に再びマージするという作業を繰り返します。リポジトリを新規作成したときに、masterブランチからdevelopブランチを切って作成します。 例 : develop/[バージョン番号など]

featureブランチ

機能の追加や変更、バグ修正などを行うブランチのこと。ブランチの名前は、変更の内容が分かるような名称にします。developブランチから派生させ、作業完了後に再び developブランチにマージします。そして、マージ完了後に削除します。 例 : feature/[機能名など]

releaseブランチ

製品をリリースするために使うブランチのこと。製品のリリース時には、関連する作業が必要になる場合が多いでしょう。 developブランチからreleaseブランチを切って、そのブランチでリリース作業を行います。リリース作業が完了したら、masterブランチと developブランチにマージし、masterブランチのマージコミットにリリースタグ（バージョンなど）を打ち、その後、release ブランチは削除する。 例 : release/[バージョン番号]

hotfixブランチ

製品のリリース時に重大な不具合が見つかった際に使うブランチのこと。 masterブランチからhotfixブランチを切って、緊急の修正を行う。修正完了後には、masterブランチとdevelopブランチにマージして、リリースタグ（マイナーバージョンなど）を打ち、その後、hotfixブランチは削除します。 例 : hotfix/[バージョン番号]/[バグ識別名] or hotfix/[バグ識別名]

supportブランチ

旧バージョンの保守とリリースを行うブランチのこと。サポートが必要なバージョンのmaster ブランチのコミットから派生させ、サポートを終了するまで独立してバグフィックスやリリースを行う。 例 : support/[バージョン番号]

終わりに

個人で使っているだけだとあまり使い分けることがないと思います。実際に実務で使う際にはこのような内容でブランチ運用が重要になってくるので参考になればと思います。

2023-11-19

【Git】Gitのブランチ運用について

プログラミング

はじめに

ブランチについて

ブランチの種類

mainブランチ

developブランチ

featureブランチ

releaseブランチ

hotfixブランチ

supportブランチ

終わりに

2023-11-04

【Laravel】Font Awesome を使用する方法(npmでインストール)

プログラミング PHP Laravel

本記事はLaravelプロジェクトFont Awesomeをインストールして使用する方法をまとめたものです。もし、間違えている点などがあれば教えていただければと思います。

環境

PHP 8 Laravel 10 npm 9 node 20

インストール

※npmが使用できることを前提としています。

① @fortawesome/fontawesome-freeをインストール

npm install @fortawesome/fontawesome-free --save

② インストールしたパッケージの使用

以下内容をapp.jsに記載してFont Awesomeを使用できるようにします。

import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/brands";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";

③ 再度実行する

npm run dev

④ viewにFont Awesomeを追加

<i class="fab fa-apple"></i>
<i class="fas fa-shopping-cart"></i>
<i class="far fa-heart"></i>

補足

パッケージの種類

Font Awesomeには大きく以下の2つのパッケージがある。

@fortawesome/fontawesome-free 全アイコンをインストールしすぐに使える
@fontawesome-svg-core 指定のアイコンのみインストールしAPIで詳細に制御できる

2023-11-01

【Laravel】paginationの実装

ページネーションを実装しよう

LaravelはPHPベースのウェブアプリケーション開発フレームワークで、データのページネーションを簡単に実装できる多くの機能を提供しています。
この記事では、Laravelでページネーションを実装する方法について詳しく説明します。

ページネーションの基本

ページネーションは、大量のデータを複数のページに分割し、ユーザーに分かりやすく表示するための方法です。
Laravelでは、Eloquentモデルやクエリビルダを使用してデータベースからデータを取得し、paginateメソッドを使用してページネーションを有効にすることができます。

$items = DB::table('items')->paginate(10);

このコードでは、itemsテーブルから10個のアイテムを1ページに表示するためのページネーションが有効になります。
ページネーション結果は、Bladeビューで表示することができます。

Bladeビューでページネーションを表示する

Bladeビューを使用して、ページネーションを表示します。
以下は、簡単な例です。

@foreach ($items as $item)
    <!-- アイテムを表示 -->
@endforeach

{{ $items->links() }}

$itemsはページネーションされたデータを表しており、linksメソッドを呼び出すことでページネーションリンクを表示します。
デフォルトでは、ページネーションはBootstrapスタイルのリンクとして表示されますが、カスタマイズも可能です。

カスタマイズ

Laravelのページネーションはカスタマイズ可能で、アプリケーションのデザインに合わせてスタイルを変更できます。
カスタマイズするためには、BladeビューでPaginatorファサードを使用することができます。

{{ $items->onEachSide(2)->links('pagination.custom') }}

この例では、onEachSideメソッドを使用して、現在のページの前後に2つのページリンクを表示するようにページネーションを設定しています。
さらに、linksメソッドの引数としてカスタムページネーションビューを指定しています。

ページネーションのカスタムビュー

カスタムページネーションビューを作成するには、resources/viewsディレクトリにpaginationディレクトリを作成し、その中にカスタムビューファイルを配置します。
例として、custom.blade.phpファイルを作成することができます。このファイルには、ページネーションリンクのHTML構造を定義します。

<div class="pagination">
    <span class="pagination__prev">{{ $paginator->previousPageUrl() }}</span>
    <span class="pagination__next">{{ $paginator->nextPageUrl() }}</span>
</div>

まとめ

Laravelのページネーションは、大量のデータを効果的に表示するための強力なツールです。
基本的なページネーションの実装からカスタマイズまで、さまざまな方法でページネーションを活用できます。
アプリケーションのデザインに合わせてページネーションを調整し、ユーザーエクスペリエンスを向上させましょう。
Laravelのページネーションに関する詳細な情報は、公式ドキュメントを参照してください。

2023-11-01

【Laravel】Laravel SocialiteでGoogleログインを実装

プログラミング Laravel PHP

ランキング参加中

プログラミング

本記事では、Laravel SocialiteでGoogleログインを実装する方法について紹介しています。

環境

PHP 8 Laravel 10 npm 9 node 20 OS mac

動作イメージ

Googleのログインボタンを押す
LoginWithGoogleControllerでGoogleの認証画面にリダイレクト
認証成功したら、LoginWithGoogleControllerで指定したルート(auth/google/callback)へリダイレクト
auth/google/callbackに来たら、LoginWithGoogleControllerのhandleGoogleCallback()でユーザを新規作成してDBへ登録
登録完了後にダッシュボード画面にリダイレクト

設定手順

Laravel Breezeをインストール

composer require laravel/breeze
php artisan migrate
php artisan breeze:install blade
npm install & npm run dev

Socialiteをインストール

composer require laravel/socialite
npm install && npm run dev
php artisan migrate

APIとサービスのメニューから認証情報を作成
OAuth クライアント ID の作成を選択
認証情報を取得する。URIをそれぞれ(認証リクエスト送信元・送信先)設定
.envの変更

GOOGLE_KEY="xxxxxxxxxx"
GOOGLE_SECRET="xxxxxxxxxx" 
GOOGLE_REDIRECT_URI="http://localhost:8000/auth/google/callback"

services.phpの変更

'google' => [
  'client_id' => env('GOOGLE_KEY'), 
  'client_secret' => env('GOOGLE_SECRET'), 
  'redirect' => env('GOOGLE_REDIRECT_URI'), 
],

ユーザーテーブルにgoogle_idカラムを追加

php artisan make:migration add_google_id_to_users_table

<?php


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;


class AddGoogleIdToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table("users", function (Blueprint $table) {
            // 追加
            $table->string("google_id")->nullable();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table("users", function (Blueprint $table) {
            // 追加
            $table->dropColumn('google_id');
        });
    }
}

マイグレーションの実施

php artisan migrate

Userモデルのホワイトリストにgoogle_idを追加

 protected $fillable = [
        "name",
        "email",
        "password",
        // 追加
        "google_id",
 ];

ルーティング設定

<?php 
// 追加
use App\Http\Controllers\LoginWithGoogleController;

// 追加
Route::get("auth/google", [
  LoginWithGoogleController::class,
  "redirectToGoogle",
]);

// 追加
Route::get("auth/google/callback", [
  LoginWithGoogleController::class,
  "handleGoogleCallback",
]);

コントローラの作成

php artisan make:controller LoginWithGoogleController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// 追加
use Laravel\Socialite\Facades\Socialite;
// 追加
use App\Models\User;
// 追加
use Illuminate\Support\Facades\Auth;
// 追加
use Exception;

class LoginWithGoogleController extends Controller
{
    // 追加
    public function redirectToGoogle()
    {
        return Socialite::driver("google")->redirect();
    }

    // 追加
    public function handleGoogleCallback()
    {
        try {
            $user = Socialite::driver("google")->user();
            $finduser = User::where("google_id", $user->id)->first();

            if ($finduser) {
                Auth::login($finduser);
                return redirect()->intended("dashboard");
            } else {
                $newUser = User::create([
                    "name" => $user->name,
                    "email" => $user->email,
                    "google_id" => $user->id,
                    "password" => encrypt("123456dummy"),
                ]);

                Auth::login($newUser);

                return redirect()->intended("dashboard");
            }
        } catch (Exception $e) {
            \Log::error($e);
            throw $e->getMessage();
        }
    }
}

ログイン画面にGoogleのログインボタン追加 resources\views\auth\login.blade.php

<div class="flex items-center justify-end mt-4">
  <a href="{{ url('auth/google') }}">
    <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">
  </a>
</div>