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回目は、ブログシステムの超重要機能である「記事作成画面」を実装しました。

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

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

次回もお楽しみに!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、「好きを仕事にするエンジニア集団」です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

次回の記事はこちら

第1回はこちら

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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア