Markdwonメモアプリ作成(TypeScript)(第三回)

前回はトップページを作成しました。
今回はマークダウンのページを作成します。
前回の内容は以下を参照してください。


今回の手順は以下のとおりです。
目次
マークダウン個別取得API作成(back:Flask側作成)
Flaskのapp.pyを修正します。
import os
from flask import Flask, request
from flask_cors import CORS
import pymysql.cursors
import json
app = Flask(__name__)
CORS(app)
def db_connection():
conn = pymysql.connect(
host='database',
port=3306,
user=os.environ.get('MYSQL_USER'),
password=os.environ.get('MYSQL_PASSWORD'),
db=os.environ.get('MYSQL_DATABASE'),
cursorclass=pymysql.cursors.DictCursor
)
return conn
@app.route('/markdown', methods=["GET"])
def get_markdown():
conn = db_connection()
with conn.cursor() as cur:
cur.execute(f"SELECT * FROM markdown")
results = cur.fetchall()
return json.dumps(results, indent=2)
@app.route('/markdown/<path:path>', methods=["GET"])
def get_markdown_url(path):
conn = db_connection()
with conn.cursor() as cur:
cur.execute(f"SELECT * FROM markdown WHERE url = '{path}'")
results = cur.fetchall()
if not results:
return json.dumps({}, indent=2)
return json.dumps(results[0], indent=2)
get_markdown_url()の関数を追加しました。
URLのパスを取得し、そのURLをキーとしてマークダウンのデータを取得します。
自動採番などで生成したidをキーにすることも検討しました。
マークダウンの場合は[xxx](xxx)このような書き方でリンクを生成することができます。
リンクはURL形式であり、今回作るアプリのように表示と編集が手軽にできる場合はURL形式をキーにデータを取得することが望ましいと判断しました。
ブログなど投稿を管理画面を使ってあらかじめリンク先が決まっている場合はIDをキーに使う方がよいかもしれません。
マークダウンページの更新
マークダウンページ(Markdown.tsx)のファイルを更新します。
Markdownのページは、以下のテンプレートを切り替えて出力します。
なお、今回は表示用のテンプレートのコーディングをメインで紹介します。
表示用テンプレート | ViewTemplate |
---|---|
編集用テンプレート | EditTemplate |
編集用テンプレート作成
編集用テンプレート(EditTemplate.tsx)ファイルを作成します。
編集モードできりかえるときのダミーテンプレートとして事前に作成しておきます。
編集用テンプレートの文言を表示します。
表示用テンプレート作成
表示用テンプレート(ViewTemplate.tsx)ファイルを作成します。
前回作成したヘッダーナビゲーション部品を配置します。
サブヘッダーナビゲーションのコンポーネントを作成しました。
サイドメニュー用のDrawerコンポーネントを用意していますが、今回コーディングは省略します。
react-markdownのコンポーネントを呼び出します。
マークダウンのデータ形式をHTML形式に変換するコンポーネントです。
プラグインとして「remarkGfm」を使っています。
このプライグインを使うことでテーブルや、取り消し線などが変換できます。
サブヘッダーナビゲーション部品の作成
サブヘッダーナビゲーション部品(SubHeaderNavigation.tsx)ファイルを作成します。
「organisms/」ディレクトリ配下に配置します。
project/
┣ front/
┃ ┣ Dockerfile
┃ ┗ src/
┃ ┗ markdown-app/
┃ ┗ src/
┃ ┣ components/
┃ ┃ ┗ uilibs/
┃ ┃ ┗ organisms/
┃ ┃ ┗ SubHeaderNavigation.tsx
・・・略・・・
コーディングの内容は以下の通りです。
マークダウンのURLとタイトルをサブヘッダーナビゲーションで表示します。
編集モードか表示モードか判定をしてTextFiledとTypographを切り替えるコンポーネントを作成しました。
同様に編集モードか表示モードか判定をしえ編集、表示のアイコンを変えるコンポーネントも作成しています。
テキスト表示切り替え部品作成
テキスト表示切り替え部品(SwitchTextFieldTypography.tsx)ファイルを更新します。
表示モードの時はTypographyのコンポーネントを使用します。
編集モードは、TextFieldのコンポーネントを使用します。
「molecules/」ディレクトリ配下に(SwitchTextFieldTypography.tsx)を配置します。
project/
┣ front/
┃ ┣ Dockerfile
┃ ┗ src/
┃ ┗ markdown-app/
┃ ┗ src/
┃ ┣ components/
┃ ┃ ┗ uilibs/
┃ ┃ ┗ molecules/
┃ ┃ ┗ SwitchTextFieldTypography.tsx
・・・略・・・
コーディングの内容は以下の通りです。
編集モードか表示モードを判定をしてTextFiledとTypographを切り替えます。
TextFieldとCustomTypographyはそれぞれ部品化しています。
カスタムテキストフィールド部品作成
カスタムテキストフィールド部品(CustomTextField.tsx)ファイルを作成します。
「atoms/」ディレクトリ配下に(CustomTextField.tsx)を配置します。
project/
┣ front/
┃ ┣ Dockerfile
┃ ┗ src/
┃ ┗ markdown-app/
┃ ┗ src/
┃ ┣ components/
┃ ┃ ┗ uilibs/
┃ ┃ ┗ atoms/
┃ ┃ ┗ CustomTextField.tsx
・・・略・・・
TextFieldの部品化です。
onChangeの関数をpropsで渡していますが、ここの記述方法がわからずコーディングに時間がかかってしまいました。
TextFieldのonChangeイベントのeventの型は、「React.ChangeEvent<HTMLTextAreaElement>」です。
Eventの型がわかりませんでした。
Typescriptは数値、文字はわかりやすいですが、event系の型やコンポーネントの型がわかりずらいですね。
カスタムタイポグラフィ部品の作成
カスタムタイポグラフィ(CustomTextField.tsx)ファイルを更新します。
「atoms/」ディレクトリ配下に(CustomTextField.tsx)を配置します。
project/
┣ front/
┃ ┣ Dockerfile
┃ ┗ src/
┃ ┗ markdown-app/
┃ ┗ src/
┃ ┣ components/
┃ ┃ ┗ uilibs/
┃ ┃ ┗ atoms/
┃ ┃ ┗ CustomTextField.tsx
・・・略・・・
propsで受け取った文字列を出力するコンポーネントです。
表示と編集の切り替えアイコン部品作成
表示と編集の切り替えアイコン部品(SwitchModeButtonNavi.tsx)ファイルを作成します。
「molecules/」ディレクトリ配下に(SwitchModeButtonNavi.tsx)を配置します。
project/
┣ front/
┃ ┣ Dockerfile
┃ ┗ src/
┃ ┗ markdown-app/
┃ ┗ src/
┃ ┣ components/
┃ ┃ ┗ uilibs/
┃ ┃ ┗ molecules/
┃ ┃ ┗ SwitchModeButtonNavi.tsx
・・・略・・・
propsでeditModeを受け取って編集と表示を切り替えます。
画面確認
docker-compose upを使って各コンテナを起動します。
docker-compose.ymlファイルがある場所で以下のコマンドを実行します。
起動したら以下のURLをブラウザに入力します。
http://localhost:3000
以下ブラウザの表示です。
トップページ
markdownページの表示モードです。
まとめ
Markdwonメモアプリ作成(TypeScript)でマークダウンの表示ページを作成しました。
0 件のコメント:
コメントを投稿
コメントをお待ちしています。