アプリ関連ニュース

Django REST Framework

Today I would like to share a brief explanation about Django REST framework. Let’s take a look.

Django REST framework is a powerful and flexible toolkit for building Web APIs. Its main benefit is that it makes serialization much easier. Django REST framework is based on Django’s class-based views. It adopts implementations such as class-based views, forms, model validator, QuerySet, etc.

Django REST Framework includes built-in API browser for testing out newly developed API. Web API developed with Django REST Framework is web browsable, supports a wide range of media types, authentication and permission policies out of the box. API’s display data can use standard function based views, or granular with powerful class based views for more complex functionality.

Good Features of Django REST framework

  • Powerful Serialization that supports both ORM and non-ORM data sources.
  • Web browsable API is very useful for developers.
  • Authentication policies including OAuth1a and OAuth2 out of the box.
  • Easy to customize validators, parsers and authenticators.
  • Generic classes for CRUD operations.
  • Clean and simple views for Resources by using Django’s new class based views.
  • HTTP response handling, content type negotiation using HTTP Accept headers.
  • Pagination simplifies the process of returning paginated data in a way that can then be rendered to arbitrary media types.
  • Publishing of metadata along with querysets.

This is a brief introduction about Django REST Framework.

Hope you enjoy that.

By Asahi

このエントリーをはてなブックマークに追加


waithaw at 2022年03月15日 10:00:00

Mac Studio

Apple has announced the latest desktop computer, MacStudio. This is a new company computer and the most powerful computer Apple has ever made. It’s twice the size of the Mac mini, but thanks to some great Mac Studio specs, it offers twice the performance of the latest MacBook Pro thanks to the new M1 Ultra processor.

Apple、まったく新しいMac StudioとStudio Displayを発表 - Apple (日本)
Credit: Apple

Inside your computer, Mac Studio specifications include Wi-Fi 6 and Bluetooth 5.0 for the fastest connection speeds. If you prefer a wired connection in your old school, Mac Studio will cover you too.

There are two USB-C ports on the front of Mac Studio. In the M1 Max version, these support USB 3, and in the M1 Ultra version, they are upgraded to Thunderbolt 4. There is also an SD card slot on the front, which is safe for photographers and videographers.

Credit: Apple

Inside is the M1 Ultra processor. It’s made from Apple’s latest Apple silicon processor and basically connects two M1 Max processors. The M1 Ultra has a 20-core CPU, a 48-core GPU 24, a 32-core neural engine 16, 64 GB of unified memory, and 1 TB of SSD storage. Debuting on the MacBook Pro in late 2021, the M1 Max accounts for half of all these numbers and still surprises everyone at launch.

This is my personal favourite for now as a work stations and I hope Apple will annouce a beast macbook pro by estimating with the products launched this time

Yuuma

このエントリーをはてなブックマークに追加


yuuma at 2022年03月14日 11:04:00

Laravel 8のメール送信の例と、alwaysTo()を使って誤送信を防ぐ方法

今回は、Laravel 8のメール送信の例と、alwaysTo()を使って誤送信を防ぐ方法を紹介します。

Laravel 8には、メール送信のためのmailクラスがあり、メール送信のためのドライバーを複数用意し、お好みで使用することができます。smtp、Mailgun、Postmark、Amazon SES、sendmailが使用できます。どのドライバを使用するかは、envファイルで設定する必要があります。
今回はsmtpドライバを使用します。

.envでSMTPを設定する

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=Add your user name here
MAIL_PASSWORD=Add your password here
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=Add your user name here

※メールを使い場合、googleアカウントのless secure app accessでturnをオンにする必要があります。

利用可能なメールクラスの作成

以下のコマンドを使用して、MyTestMailという名でメイラブルクラスを作成します。

php artisan make:mail MyTestMail

MyTestMailで以下のように変更する必要があり

    public $details;
    public function __construct($details)
    {
        $this->details = $details;
    }

    public function build()
    {
        return $this->subject('Mail from AMI')
                    ->view('emails.myTestMail');
    }

ブレードビューの作成

ブレードビューファイルを作成し、送信するメールを記述します。「emails」フォルダに以下のようなファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>メール送信テスト</title>
</head>
<body>
    <h1>{{ $details['title'] }}</h1>
    <p>{{ $details['body'] }}</p>
   
    <p>Thank you</p>
</body>
</html>

最後に、テストメールを送信するための “MyTestMail “を作成します。


Route::get('send-mail', function () {
   
    $details = [
        'title' => 'Mail from AMI',
        'body' => 'This is for testing email using smtp'
    ];
   
    \Mail::to('name@gmail.com')->send(new \App\Mail\MyTestMail($details));
   
    dd("Email is Sent.");
});

プロジェクトを実行すると結果は

ステージング環境から実際のお客様に誤って何千通ものメールを送信してしまうこともあります。その時、どうのように設定するのかを共有します。

class AppServiceProvider extends ServiceProvider
{
    // Stuff omitted
 
    public function boot()
    {
        f (! app()->environment('production')) {
            Mail::alwaysTo('ex@example.org');
        }
    }
}

alwaysToで何が起きているのか？

alwaysTo() メソッドは、メールメッセージ内の to, cc, bcc に追加されたすべてのアドレスを上書きします。

そこで、上記のコードでは、Laravelに、本番環境でない場合のみ、ex@example.org にメールを送信するように指示しています。

ということで今回はこれで終わりです。

By Ami

このエントリーをはてなブックマークに追加


asahi at 2022年03月11日 10:00:00

Laravel + Vue JS CRUD Single Page Applicationの作成

今回は、LaravelとVue JSを使ったSingle Page Applicationの作成方法についてご案内します。

ここでは、セットアップに必要な手順を説明します。

このコマンドでLaravelのプロジェクトを新規に作成する必要があります。

composer create-project laravel/laravel --prefer-dist laravel-vue

次に、プロジェクトの.env configファイルにデータベース名、ユーザー名、パスワードを追加して、データベース接続を行う必要があります。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_vue
DB_USERNAME=root
DB_PASSWORD=

LaravelでArticleモデルを作成するには、以下のコマンドを実行してください。

php artisan make:model Article -m

database/migrations/create_articles_table.php に以下のコードを追加してください。

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateArticlesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('artcles', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('descriptions');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

マイグレーションを呼び出すには、以下のコマンドを実行してください。

php artisan migrate

記事コントローラを作成

記事コントローラを作成し、CRUD操作のメソッドを定義する必要があります

php artisan make:controller ArticleController

Article Controllerを以下のコードで更新します。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Article;
class ArticleController extends Controller
{
    public function index()
    {
        $articles = Article::all()->toArray();
        return array_reverse($articles);      
    }
    public function store(Request $request)
    {
        $article = new Article();
        $article->title = $request->input('title');
        $article->description = $request->input('description');
        $article->save();

        return response()->json('New Article is successfully created!');
    }
    public function show($id)
    {
        $article = Article::find($id);
        return response()->json($article);
    }
    public function update($id, Request $request)
    {
        $article = Article::find($id);
        $article->title= $request->title;
        $article->description = $request->description;
        $article->save();

        return response()->json('Article is successfully updated!');
    }
    public function destroy($id)
    {
        $article = Article::find($id);
        $article->delete();
        return response()->json('Article is successfully deleted!');
    }
}

routesのweb.phpとapi.phpを更新してください。

routes/web.php

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

routes/api.php

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
*/
Route::middleware('api')->group(function () {
    Route::resource('articles', ArticleController::class);
});

laravel/ui composer パッケージをインストールします。

composer require laravel/ui

次に、Vueの足場を設定します。

laravel/uiパッケージには、Vueを使い始めるために必要なすべてのものを自動的に足場にしてくれる便利なArtisanコマンドがいくつか用意されています。

php artisan ui vue

ファイルをコンパイルする

最後に、新しく追加された依存関係をインストールして、コンパイルする必要があります。

npm install && npm run dev

コマンドを使用して、vue router および vue axios パッケージをインストールします。

npm install vue-router vue-axios

次に、npm パッケージをインストールし、アセットをコンパイルするために、次のコマンドを実行します。

npm install
npm run watch

LaravelでVueを開始する

layoutフォルダを作成し、このフォルダ内にapp.blade.phpを作成してアプリケーションを設定する必要があります。

resources/views/layout/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}" />
    <title>Vue JS CRUD Operations in Laravel</title>
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

App.vue ファイルに router-view 命令を追加する必要があります。そこで、resources/js フォルダに App.js ファイルを作成します。

resources/js/App.js

<template>
    <div class="container"> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Articles List</router-link>
                    <router-link to="/create" class="nav-item nav-link">Create Article</router-link>
                </div>
            </div>
        </nav>
        <router-view> </router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

そして、resources/js/componentsフォルダの中に必要なvue jsコンポーネントファイルを作成します。

resources/js/components/AllArticle.vue

<template>
    <div>
        <h2 class="text-center">Article List</h2>
 
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Desciption</th>
                <!-- <th>Actions</th> -->
            </tr>
            </thead>
            <tbody>
            <tr v-for="article in articles" :key="a.article">
                <td>{{ article.id }}</td>
                <td>{{ article.title }}</td>
                <td>{{ article.description}}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: article.id }}" class="btn btn-success">Edit</router-link>
                        <button class="btn btn-danger" @click="deleteArticle(article.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                articles: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                    this.articles = response.data;
                });
        },
        methods: {
            deleteArticle(id) { 
                this.axios
                    .delete(`http://localhost:8000/api/articles/${id}`)
                    .then(response => {
                        let i = this.articles.map(data => data.id).indexOf(id);
                        this.articles.splice(i, 1)
                    });
            }
        }
    }
</script>

resources/js/components/CreateArticle.vue

<template>
    <div>
        <h3 class="text-center">Create Article</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addArticle">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="article.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="article.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Create</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                article: {}
            }
        },
        methods: {
            addArticle() {
                this.axios
                    .post('http://localhost:8000/api/articles', this.article)
                    .then(response => (
                        this.$router.push({ name: 'home' })
                    ))
                    .catch(err => console.log(err))
                    .finally(() => this.loading = false)
            }
        }
    }
</script>

 resources/js/components/EditArticle.vue

<template>
    <div>
        <h3 class="text-center">Edit Article</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="updateArticle">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="article.title">
                    </div>
                    <div class="form-group">
                        <label>Detail</label>
                        <input type="text" class="form-control" v-model="article.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Update</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                article: {}
            }
        },
        created() {
            this.axios
                .get(`http://localhost:8000/api/articles/${this.$route.params.id}`)
                .then((res) => {
                    this.article = res.data;
                });
        },
        methods: {
            updateArticle() {
                this.axios
                    .patch(`http://localhost:8000/api/articles/${this.$route.params.id}`, this.article)
                    .then((res) => {
                        this.$router.push({ name: 'home' });
                    });
            }
        }
    }
</script>

vueのルートを作成するには、resources/jsディレクトリの中にroutes.jsを作成します。

resources/js/routes.js

import AllArticle from './components/AllArticle.vue';
import CreateArticle from './components/CreateArticle.vue';
import EditArticle from './components/EditArticle.vue';
 
export const routes = [
    {
        name: 'home',
        path: '/',
        component: AllArticle
    },
    {
        name: 'create',
        path: '/create',
        component: CreateArticle
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditArticle
    }
];

最後にVue App.jsを定義します。

 resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

アプリを起動するには、以下の2つのコマンドを実行します。

npm run watch
php artisan serve

ブラウザで http://127.0.0.1:8000 にアクセスすると、記事の一覧表示、記事の作成、更新ができます。

この記事があなたのお役に立てれば幸いです。

By Tsuki

このエントリーをはてなブックマークに追加


tsuki at 2022年03月10日 10:00:00

  • 2022年3月10日
  • Mac

2022-03-08 AppleEvent開催！

昨日(2022-03-08)にAppleEventが開催されました。
新製品が発表されましたので感想をシェアしたいと思います。

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


nishida at 2022年03月10日 10:00:00


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓