はじめに
Angularを使用して、日本語・英語をモールス信号に変換するWebサイト「モールス信号 翻訳」を作成しました。
↓のURLから実際に触ることができます
https://l08084.github.io/morse-code-translate-website/
GitHubにソースコードもアップしています
使用ライブラリ・言語のバージョン情報
TypeScript(JavaScriptのスーパーセット)のフレームワークであるAngular(v7)を使用して作成しました。 CSSフレームワークはAngular Materialを利用しています。
- Angular@7.3.6
- AngularCLI@7.3.6
- Angular Material@7.3.5
- rxjs@6.3.3
- TypeScript@ 3.2.4
- webpack@4.29.0
「モールス信号 翻訳」の機能
「モールス信号 翻訳」には、日本語・英語をモールス信号に変換する機能と、モールス信号を日本語・英語に逆変換する機能があります。
アカウント登録などの機能はないためAPIがない、いわゆる静的サイトになっています。（フロントサイドで完結するから作るのが楽だったということを言いたい）
実装
ソースコードの中身について解説していきます
ディレクトリ構成
$ tree -I node_modulesコマンドで出力したディレクトリ構成(一部ファイル省略)。
. ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ ├── description │ │ │ │ ├── description.component.html │ │ │ │ ├── description.component.scss │ │ │ │ └── description.component.ts │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.scss │ │ │ │ └── header.component.ts │ │ │ ├── input │ │ │ │ ├── input.component.html │ │ │ │ ├── input.component.scss │ │ │ │ └── input.component.ts │ │ │ ├── output │ │ │ │ ├── output.component.html │ │ │ │ ├── output.component.scss │ │ │ │ └── output.component.ts │ │ │ ├── select │ │ │ │ ├── select.component.html │ │ │ │ ├── select.component.scss │ │ │ │ └── select.component.ts │ │ │ └── share-button │ │ │ ├── share-button.component.html │ │ │ ├── share-button.component.scss │ │ │ └── share-button.component.ts │ │ └── service │ │ ├── convert.service.spec.ts │ │ └── convert.service.ts │ ├── assets │ │ └── mapping.json │ ├── index.html │ ├── styles.scss └── tslint.json
コンポーネントの構成
ディレクトリ構成をみればわかる通り（？）、ルートコンポーネントに下記のコンポーネントがぶら下がっている構成になっています。
- header コンポーネント
- ただのヘッダー
- select コンポーネント
- ドロップダウンのコンポーネント。変換方式を選択する
- input コンポーネント
- 変換対象のテキストを入力するテキストエリアのコンポーネント
- output コンポーネント
- 変換結果が表示されるテキストエリアのコンポーネント
- share-button コンポーネント
- facebook、はてブ、Twitterのシェアボタンを表示するコンポーネント
- description コンポーネント
- サイトの使い方などを説明するテキストを表示しているコンポーネント
上記のコンポーネントに加えて、テキスト⇄信号 変換のビジネスロジックが記述されているConvert サービスクラスがあります
ルートコンポーネントの実装
ルートコンポーネント(AppComponent)では、子コンポーネントにAngularの@Inputと@Outputを使用して値の受け取りと受け渡しを行なっています。
input コンポーネントの実装
input コンポーネントは、翻訳したいテキスト・モールス信号を入力するテキストエリアの役割を持っています。
input コンポーネントでは、下記の処理を行なっています。
- 翻訳形式によって、placeholderとヒント文を切り替える
- テキストエリアの値が変更されてから500ミリ秒経過した後に、翻訳サービスロジック(Convert サービスクラス)を呼び出す
convert サービスクラスの実装
テキストからモールス信号に変換するロジックですが、Mapデータ構造を使用しました。具体的には下記の手順になります。
- JSONファイルでモールス信号と、カタカナやアルファベットのリストを作成する
- keyにカタカナとアルファベット、valueにモールス信号を設定したMap型のデータを作成する
- 入力テキストを1文字ずつ分割する
- 2で作成したMapを経由することでテキストをモールス信号に変換する...といった流れです（逆変換の場合はこの逆です）
share-buttonコンポーネントの実装
数字がずっと0から変わらない気がする...share-buttonコンポーネントの実装、ひいてはSNSシェアボタンの表示方法ですが、各種SNSの開発者サイトにいくとシェアボタンのコードが提供されているので、それをコピペして貼り付けるだけです（開発者アカウントの登録などは必要ありません）。
注意点としては、SNSの開発者サイトだと、ボタンのHTMLタグとスクリプト(script)タグが一緒くたにされているため、コピペするときは分割する必要があります。ボタンのHTMLについては、コンポーネントのHTMLにコピペして、<script>については、index.htmlの方に貼り付ける必要があります。
テンプレートファイルには、SNSシェアボタンのHTMLタグだけを貼り付けます。
share-buttonコンポーネントのテンプレートファイル
SNSシェアボタンの<script>はindex.htmlに貼り付けます
- index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>モールス信号翻訳</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="日本語（ひらがな・カタカナ）や英語（アルファベット）をモールス信号に変換するサービスです。"> <meta name="keywords" content="モールス信号,モールス符号,モールス,和文モールス,和文モールス符号,和文モールス信号"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"> </script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"> </script> </head> <body> <app-root></app-root> </body> </html>
デプロイ
GitHub Pageへのデプロイ方法について
GitHub Pagesにデプロイする
How to deploy an Angular 7 app to Github Pages | by Marina Ferreira | Code Sketch | Medium
Angular 7系以降のデプロイ方法については、上のサイトが詳しいです。
↓は自分がGitHub Pagesにデプロイした時のコマンドです。
$ npm install -g angular-cli-ghpages $ ng build --prod --base-href "https://l08084.github.io/morse-code-translate-website/" $ git checkout -b gh-pages $ git push origin gh-pages $ ng build --prod --base-href "https://l08084.github.io/morse-code-translate-website/" $ ngh --dir=dist/morse-code-tweet
終わりに
休日にテキストとモールス信号のマッピング表を作ってると虚無感がすごい。「あ・い・う・え・お」とか打つ必要があるので（虚無感というか虚無そのものだった気がする）
