はじめに
以前の記事で、翻訳ができるWebアプリケーションを作成しました。
今回は、以下の記事の続きになりますが、Bootstrapを使いデザインを適用します。
DeepLは無償のニューラル機械翻訳サービスで、翻訳結果がとても自然で質が高いです。
DeepLについては以下の記事をご覧ください。
Laravel Sailでの開発環境の構築方法は以下をご覧ください。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
余談ですが、Django向けに解説した記事もございますので参考にしてください。
VS Codeの用意
VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。
設定方法は以下を参考にしてください。
Bootstrapの導入
LaravelにBootstrapを導入する手順は、以下の記事を参考にしてください。
デザイン適用
Viteの場合
翻訳テンプレートを修正します。
ビルドして出力された、app.scssとapp.jsファイルを読み込みます。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style>
body {
padding-top: 70px;
}
</style>
</head>
<body>
...
</body>
</html>
今回はナビゲーションバーを設置してみました。
<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>
...
</body>
</html>
フォームやボタンもBootstrapを適用します。
テンプレート全体としては、以下のようになりました。
<html>
<head>
<meta charset='utf-8' />
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<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>
</body>
</html>
Viteについては以下の記事にもまとめました。
Laravel Mixの場合
翻訳テンプレートを修正します。
ビルドして出力された、app.cssとapp.jsファイルを読み込みます。
<!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>
今回はナビゲーションバーを設置してみました。
<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を適用します。
テンプレート全体としては、以下のようになりました。
<!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を活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
さいごに
今回は、Bootstrapを使いデザインを適用しました。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
コメント