1. HOME
  2. ブログ
  3. IT技術
  4. 【第6回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる【記事作成画面の実装】

【第6回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる【記事作成画面の実装】

第6回~モダンなフレームワークの使い方を学びながらブログシステムを構築~

前回は、記事作成部分を作りました。

連載「Python Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる」第6回目です。

前回は、記事個別ページを作成しました。

記事作成画面を作ろう

今回は、いよいよ「記事作成画面を実装」していきます。

記事の作成画面は、ブログシステムにとって重要な役目を果たします。

ユーザビリティを考慮しながら作成していきましょう。

記事作成ページに必要なもの

実装に入る前に、「記事作成ページに何が必要か」を考えてみましょう。

  1. タイトルやコンテンツを書く操作
  2. カテゴリを選ぶ操作
  3. 下書き保存
  4. プレビュー
  5. 公開

上記に挙げた機能をひとつひとつ実装していきましょう。

執筆形式はマークダウン形式で

コンテンツ作成画面で HTML を直打ちするのは、ユーザビリティに欠けるので避けた方がいいでしょう。

今回は、「マークダウン形式で記事を執筆」できるようにします。

ルーティングおよびビューを作る

最初に「記事作成画面への遷移」と「ビュー」を作っていきます。

ルーティング

ルーティングは「/admin/new」としておきます。

ビュー

ビューは、以下の様にデザインしてみました。

完成!

記事編集画面:上部

記事編集画面:下部

こんな感じになりました。

下部にある3つのボタンのうち、「プレビューだけは新規ウィンドウで開く」ようにしています。

また、いずれのボタンでも、POST は「/admin/add」に投げる様にしているので、早速これを実装していきます。

3つの処理を実装する

各ボタンによって行われる処理は、整理すると以下の様になります。

  1. 下書き保存: released=False としてデータベースに保存
  2. プレビュー :データベースには保存せずに、新規ウィンドウとして「現在書かれている内容を反映させた一時的なページ」を表示
  3. 下書き保存: released=True としてデータベースに保存

HTML に変換しよう

プレビューや実際に記事を表示するときには、「Markdown => HTML」の変換が必要です。

データベースへの保存は、マークダウン形式のままで問題ありません。

エラー処理とサムネイルはまた後で

エラー処理などはここでは実装しません、割愛します。

なお、サムネイルはまた後程実装します。

ひとまず今は空文字列で代用するので、ご了承ください。

プレビューのビューを作る

前回作った single.html をもとに preview.html を作成します。

日付などは必要ないので、ダミーを入れます。

動作確認

プレビュー

では、プレビューの動作確認をしてみましょう。

試しに、以下のマークダウンを入れてみます。(他は適当に埋めてください)

すると、新規ウィンドウで以下の様に表示されるはずです。

完成!

HTMLに変換された

まだデザインが追いついていないところもありますが、うまくプレビュー画面が反映されましたね!

第7回へつづく!

第6回目は、ブログシステムの超重要機能である「記事作成画面」を実装しました。

これだけで、かなりブログシステムっぽくなってきましたね。

あとは、「メディアの投稿」や「カテゴリの作成」、また「記事デザインの整備」などを地道にやっていきます。

次回もお楽しみに!

次回の記事はこちら

第1回はこちら

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア