開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

今回は素晴らしいHTMLの属性についていくつか共有したいと思います。

Contenteditable

Contenteditable属性は、コンテンツが編集可能かどうかを確認するために使用される。

Spellcheck

Spellcheck属性は、編集可能なモードでテキストのスペルや文法をチェックするために使用されます。

Translate

Translate属性は、あるコンテンツを翻訳するかどうかチェックするために使用されます。

Multiple

Multiple 属性は、ユーザーが複数の値を入力/選択できることを指定します。

Accept

accept属性は、ユーザーがファイル入力ダイアログボックスから選択できるファイルの種類をフィルタリングするために指定します。

Poster

poster 属性は、ユーザーが再生ボタンを押すまで表示する画像を指定することができます。

Download

download 属性は、ユーザーがリンクをクリックしたときに画像やビデオがダウンロードされることを指定します。

Inputmode

ブラウザに適切な仮想キーボードを表示できるようにする。

はい！ということで今回は以上になります。

金曜担当：Ami

Tweet

今回は、Laravelで検証を行う前にリクエストデータを操作することについて話したいと思います。

フォームのリクエスト例

まず、記事の投稿を保存するためのフォームリクエストの例から見てみましょう。入力に適用されるルールに注目してください。

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreRequest extends FormRequest
{
    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required|max:200',
            'body' => 'required',
            'tags' => 'required|array|max:10',
            'is_published' => 'required|boolean',
            'author_name' => 'required',
        ];
    }
}

ここで、ユーザーが投稿を作成するためにフォームを送信し、次のような入力データを渡したと仮定します。

[
    'title' => 'My  articles post',
    'body' => 'This is the <script>alert('Alert!')</script> articles body.',
    'tags' => 'laravel,code,updates',
    'is_published' => 'true',
    'author_name' => 'Ami',
]

tagsはカンマ区切りの値のリストとしてフロントエンドから送信され、is_publishedの入力は文字列として解釈されます。どちらも、コンテンツの観点からは正しいにもかかわらず、形式が正しくないだけで検証は失敗します。

さらに、titleにタイプミスがあり、本文に悪意のあるコードが含まれているように見えます。技術的にはこれらはバリデーションの問題ではないと言えますが、ユーザーを自分自身から救い、アプリケーションを保護する手助けをすることは可能です。

prepareForValidation

このメソッドはprepareForValidationという適切な名前で、デフォルトのアクションを持ちません。つまり、オーバーライドするためだけに置かれたものです。

protected function prepareForValidation()
{
    // no default action
}

ベースとなる FormRequest クラスは Request クラスを継承しているので、 merge ヘルパーメソッドにアクセスし、必要な入力値だけを更新することができます。また、入力値そのものにクラスのプロパティのようにアクセスすることもできます。

protected function prepareForValidation()
    {
        $this->merge([
            'title' => fix_typos($this->title),
            'body' => filter_malicious_content($this->body),
            'tags' => convert_comma_separated_values_to_array($this->tags),
            'is_published' => (bool) $this->is_published,
        ]);
    }

値はリクエスト自体で更新されるので、バリデーションを行った後にコントローラでどのようにアクセスしても、操作された値が戻ってくることになります。

[
    'title' => 'My blog post',                         // 誤字を修正しました!
    'body' => 'This is the post body.',         //悪質なコンテンツは削除されました!
    'tags' => ['laravel', 'code', 'updates'],   // 配列になりました!
    'is_published' => true,                     // 今はブール値です！
    'author_name' => 'Ami',    // 相変わらずです。

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

By Ami

Tweet

DataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアしたいと思います。
今回はサーバーサイド側の処理でデータベースから取得したレコードをDataTables表示に反映させる部分を説明いたします。

データベースから取得したレコードをDataTables表示に反映

以下のようにレコード内容がa,b,c,d,e固定になっていた部分をテーブルから取得した
実際のレコードに書き換えます。

function user_datatables(Request $request) {

    $rec_data = [];
    //テーブルから取得した実際のレコードに書き換え
    $query = Member::query();
    $member_list = $query->get();
    foreach($member_list as $member){
        $row_data = [
            'item1' => $member->id,
            'item2' => $member->sei.$member->mei,
            'item3' => $member->sei_kana.$member->mei_kana,
            'item4' => $member->mail,
            'item5' => $member->created_at->format('Y-m-d H:i'),
        ];
        $rec_data[] = $row_data;
    }

    $draw = $request->draw;

    $res_json = array(
        'draw' => $draw,
        'recordsTotal' => '57', 
        'recordsFiltered' => '57', 
        'data' => $rec_data, 
    );

    return response()->json($res_json);
}

以下のようにテーブルから取得したレコードがDataTablesに反映されていることが確認できました。

ページング処理の追加

次にページング処理の作成方法を説明いたします。

サーバーサイドでページング処理を実装するために
・1ページあたりの表示件数
・何件目から表示するか
のデータが必要になりますが、これらのデータはDataTablesがpostしてくれます。
以下のように取得できます。

//1ページあたりの表示件数
$length = $request->length;

//何件目から表示するか
$start = $request->start;

Laravelでレコードの抽出処理をおこなう際に、それぞれの数値をlimitおよびoffsetに設定します。

$query->offset($start);
$query->limit($length);

またフロント側でページ番号の表示処理をおこなうためにサーバーサイドからレコードの全件件数を
返す必要がありますが、これはLaravelの以下のメソッドで取得できます。

//全件件数の取得
$total_cnt = $query->count();

次回は上記の設定をおこなったページネーションのサーバーサイド処理の説明をおこないたいと思います。

木曜日担当：nishida

Tweet

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

Tweet

今回は、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

Tweet