自分だけのクイズ作成 - Quipha公開中

【Laravel】翻訳アプリにデザイン適用【Bootstrap】

Laravel
スポンサーリンク

はじめに

以前の記事で、翻訳ができるWebアプリケーションを作成しました。
今回は、以下の記事の続きになりますが、Bootstrapを使いデザインを適用します。

DeepLは無償のニューラル機械翻訳サービスで、翻訳結果がとても自然で質が高いです。
DeepLについては以下の記事をご覧ください。

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

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

WindowsでもMacでも同様に作成できます。

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

【紹介】個人開発

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

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

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

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

VS Codeの用意

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

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

Bootstrapの導入

LaravelにBootstrapを導入する手順は、以下の記事を参考にしてください。

スポンサーリンク

デザイン適用

翻訳テンプレートを修正します。
ビルドして出力された、app.cssとapp.jsファイルを読み込みます

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

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

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <style>
        body {
            padding-top: 70px;
        }

    </style>
</head>

<body>

...

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

今回はナビゲーションバーを設置してみました。

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

...

<body>

    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">翻訳アプリ</a>
            </div>
        </nav>
    </header>

...

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

フォームやボタンもBootstrapを適用します。
テンプレート全体としては、以下のようになりました。

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

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

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <style>
        body {
            padding-top: 70px;
        }

    </style>
</head>

<body>

    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">翻訳アプリ</a>
            </div>
        </nav>
    </header>

    <div class="container">

        {{-- フォーム --}}
        <form method="POST">
            @csrf
            <div class="mb-3">
                <label for="sentence" class="form-label">翻訳(日本語):</label>
                <textarea rows="10" name="sentence" class="form-control" required
                    id="sentence">{{ isset($sentence) ? $sentence : '' }}</textarea>
            </div>

            <button type="submit" class="btn btn-primary">翻訳</button>
        </form>

        {{-- 翻訳結果 --}}
        @isset($translated_text)
            <div class="alert alert-primary mt-3" role="alert">
                {{ $translated_text }}
            </div>
        @endisset
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

動作確認

以下のURLにアクセスして確認しましょう。

http://localhost/translation

初期画面は以下のようになりました。

翻訳をしてみた結果の画面です。

その他

初学者へ

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

外部サーバーへ公開

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

脆弱性対策

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

GitHubと連携

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

さいごに

今回は、Bootstrapを使いデザインを適用しました。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました