自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Laravel】翻訳できるWebアプリを作ろう【DeepL】

Laravel

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回は、翻訳ができるWebアプリケーションを作成します。
LaravelでWebアプリケーションを作成し、DeepLを利用して翻訳を行います。

DeepLは無償のニューラル機械翻訳サービスで、翻訳結果がとても自然で質が高いです。

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 9 or 10

WindowsでもMacでも同様に作成できます。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

余談ですが、Django向けに解説した記事もございますので参考にしてください。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

プロジェクトの作成

Sail を使いプロジェクトを作成します。

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

「laravel-app-translation」の部分はプロジェクト名ですので、任意で指定してください。

VS Code でプロジェクトを開きましょう。
これ以降は、VS Code のターミナルでコマンドを実行します。
Sail を起動します。

$ sail up -d

コントローラ作成

以下のコマンドでコントローラを作成します。

$ sail php artisan make:controller TranslationController

コントローラでは初期画面を表示するための処理と、翻訳結果を表示するための処理を想定しました。

app\Http\Controllers\TranslationController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TranslationController extends Controller
{

    /**
     * index
     *
     * @param  Request  $request
     */
    public function index(Request $request)
    {
    }

    /**
     * translation
     *
     * @param  Request  $request
     */
    public function translation(Request $request)
    {
    }
}

ルーティングの作成

必要なルーティングを追加します。
初期画面表示と翻訳結果画面表示の二つを追加しました。

routes\web.php
use App\Http\Controllers\TranslationController;

Route::get('/translation', [TranslationController::class, 'index'])->name('translation-index');
Route::post('/translation', [TranslationController::class, 'translation'])->name('translation-translation');

初期画面の作成

以下のコントローラのindex関数を修正します。
viewを返すだけの処理を追記します。

app\Http\Controllers\TranslationController.php
    /**
     * index
     *
     * @param  Request  $request
     */
    public function index(Request $request)
    {

        return view('translation');
    }

テンプレートファイルを作成します。
翻訳を行う文章を入力するためのフォームを作成しました。

resources\views\translation.blade.php
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    {{-- フォーム --}}
    <form method="POST">
        @csrf
        <textarea rows="10" cols="50" name="sentence">{{ isset($sentence) ? $sentence : '' }}</textarea>
        <button type="submit">翻訳</button>
    </form>
</body>

</html>

この時点で動作確認をしましょう。
以下のURLにアクセスします。

http://localhost/translation

翻訳したい文章を入力する画面が表示されます。

デザインについては今回は気にしません。別記事で解説します。

スポンサーリンク

翻訳処理の実装

以下のコントローラのtranslation関数を修正します。

バリデーションを行う処理(空白チェック)を追記しました。
また、viewは初期画面と同じテンプレートを使用します。

app\Http\Controllers\TranslationController.php
    /**
     * translation
     *
     * @param  Request  $request
     */
    public function translation(Request $request)
    {
        // バリデーション
        $request->validate([
            'sentence' => 'required',
        ]);

        // 翻訳を行う文章
        $sentence = $request->input('sentence');

        // TODO: 翻訳処理

        return view('translation', compact('sentence'));
    }

DeepLライブラリ

翻訳は、DeepLを利用します。
以下の記事を参考に、DeepLのAPIを使えるように登録を行ってください。

「認証キー」が必要になりますので用意してください。
また、無料プランでも、一ヶ月あたり50万文字の翻訳ができますので、まずは試してみましょう。

余談ですが、DeepLが用意しているPythonのクライアントライブラリもあります。
Pythonでコーディングの際は、以下の記事を参考にしてください。

翻訳処理を実装します。(日本語から英語へ翻訳)
DeepLのAPIを利用して、翻訳を行います。

そのためには、LaravelのHTTPクライアントを使用します。
Guzzleパッケージですが、Laravelにデフォルトでインストールされています。

HTTPクライアント 10.x Laravel

先ほどのコントローラに認証処理を実装します。
認証キーについては、各自の値を指定してください。
また、APIの取得結果についてはJSON形式となっています。(JSONのtranslationsキーに格納)

app\Http\Controllers\TranslationController.php
use Illuminate\Support\Facades\Http;
...
    /**
     * translation
     *
     * @param  Request  $request
     */
    public function translation(Request $request)
    {
        // バリデーション
        $request->validate([
            'sentence' => 'required',
        ]);

        // 翻訳を行う文章
        $sentence = $request->input('sentence');

        // 翻訳処理
        // DeepLのAPIを呼ぶ
        $response = Http::get(
            // 無料版URL
            'https://api-free.deepl.com/v2/translate',
            // GETパラメータ
            [
                'auth_key' => '認証キーを指定',
                'target_lang' => 'EN-US',
                'text' => $sentence,
            ]
        );

        // 翻訳結果
        $translated_text = $response->json('translations')[0]['text'];

        return view('translation', compact('sentence', 'translated_text'));
    }

認証キーについては、ソース中にハードコーディングするのは避けるべきです。
Laravelの場合は、.envに定義し使用しましょう。
誤って認証キーをGitHubなどに公開しないように注意が必要です。

参考までに、.envファイルには以下のように定義します。

.env
DEEPL_KEY="APIキー"

処理側では以下のように呼び出せます。

$api_key = env('DEEPL_KEY');

.envはGitの管理対象外ですので、上記のようにしましょう。
誤ってAPIキーをGitHubなどに公開しないように注意が必要です。

翻訳結果を出力するために、テンプレートファイルを修正します。

resources\views\translation.blade.php
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    {{-- フォーム --}}
    <form method="POST">
        @csrf
        <textarea rows="10" cols="50" name="sentence">{{ isset($sentence) ? $sentence : '' }}</textarea>
        <button type="submit">翻訳</button>
    </form>

    {{-- 翻訳結果 --}}
    {{ isset($translated_text) ? $translated_text : '' }}
</body>

</html>

動作確認

これで完成です。
テキストを入力して、翻訳ボタンをクリックすると、翻訳結果が表示されます。

デザイン調整

デザインの調整に関しては、以下の記事を参考にしてください。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回は、DeepLを利用して翻訳するWebアプリケーションを作成してみました。
応用して、実用的なものに活かせると思います。

ぜひ試してみてくださいね。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント