ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【Node.js】LINE Botでブログを投稿できるシステムを作る。

ターゲット

「ブログを使いこなすのは難しいけれど、LINEなら使える!」という人のために、簡単な指示に従うだけでブログを投稿できるシステムを作りました。フードバンクのお礼を投稿するWebサービスのプロトタイプとして作成したもので、団体や企業の情報発信でも使用できます。

使用技術

当初は、LINE BotをGAS・WebサイトをNode.jsで作る予定でしたが、全てNode.jsで処理する方法に変更しました。デプロイはFirebaseのみで完結しており、Node.jsの実行にFirebase HostingとFunctions、状態データの保存にFirestore、写真の保存にFirebase Storageを使用しています。また、デザインにはFigmaを使用しています。

デモ

Line Botから記事を投稿して、Webサイトで見ることができます。
※プロトタイプ版のためリンクは変わる可能性があります。

Webサイト
sandbox-35d1d.web.app
Line Botから記事投稿
lin.ee

機能紹介

記事投稿機能

LINE Botの指示に従い、タイトル・写真・本文を入力だけで、このような記事が簡単に投稿できます!

ヘッダーのタイトルか最新記事をクリックすると、最新記事一覧が表示されます。アーカイブをクリックすると、月別アーカイブが表示されます。前後の記事は、画面下の前のページ・次のページをクリックすると見ることができます。

月別アーカイブ機能

画面下のMonthly Archiveからは、月ごとの記事をまとめてみることが出来ます。

右側には、その月に何個の記事が投稿されたかが表示されています。ページ最下部にはフッターがあり、タイトルを押すと最新記事へ、TOPへ戻るを押すとみているページの一番上に移動するようになっています。

ダウンロード

実行する前に、FirebaseとLINEのアクセストークンやNode.jsのモジュールを準備する必要があります。Readme.mdに従って準備してください。

github.com

参考資料一覧

今回使用したNode.jsなどに関する資料はNotionにまとめています。
cat-form-2c7.notion.site