目次

はじめに
本書で説明しないこと
対象読者
免責事項
OGPとは
OGPを活用したアプリケーションとは
本書で解説するアプリケーションについて

第1章　APIの開発環境について
1.1　概要
1.2　筆者の開発環境

第2章　バックエンドのプロジェクトの構築
2.1　概要
2.2　Laravel6のプロジェクトを用意する
2.3　CORSの設定
2.4　DB接続情報を設定する

第3章　Dockerによるデータベースの構築
3.1　docker-compose.ymlを作成する
3.2　Dockerのコマンドを確認する

第4章　IAMのグループとユーザーを作成する
4.1　概要
4.2　S3のポリシーを割り当てた新しいグループを作成する
4.3　IAMユーザーの作成

第5章　Amazon S3環境の構築
5.1　概要
5.2　S3バケットを作成する

第6章　APIの設計
6.1　概要
6.2　必要なAPIの確認
6.3　データベース設計

第7章　OGP登録APIの実装
7.1　概要
7.2　コントローラを作成する
7.3　コントローラにアクションを追加
7.4　エンドポイントを追加
7.5　マイグレーションファイルを作成
7.6　マイグレーションを実行してテーブルを作成する
7.7　モデルを作成する
7.8　メッセージをデータベースに保存する
7.9　S3に画像をアップロードする

第8章　OGP詳細取得APIの実装
8.1　概要
8.2　エンドポイントを追加
8.3　コントローラにアクションを追加
8.4　環境変数からS3バケットのURLを取得
8.5　APIの動作検証

第9章　Nuxtの開発環境を構築する
9.1　概要
9.2　筆者の開発環境

第10章　フロントエンド開発用のプロジェクトを生成する
10.1　概要
10.2　Nuxtとは
10.3　OGPサービスでNuxtを使用する理由
10.4　Nuxt2系のプロジェクトを生成する
10.5　Nuxtを立ちあげましょう

第11章　Nuxtのベースレイアウトを修正する
11.1　概要
11.2　レイアウトファイルの修正
11.3　確認してみましょう

第12章　トップページを作成する
12.1　概要
12.2　編集ファイルについて
12.3　index.vueの修正
12.4　確認してみましょう

第13章　トップページの入力データを画像データにするコンポーネントの作成
13.1　概要
13.2　npmパッケージhtml2canvasのインストール
13.3　GenerateOGPButton.vueを作成する
13.4　html2canvasを利用する上でのコード上の注意

第14章　トップページからデータを渡すためのstoreを作成しよう
14.1　概要
14.2　ストアの作成
14.3　ストアの構成

第15章　OGPの詳細ページを作成する
15.1　概要
15.2　作成ファイルについて
15.3　コードの記述

第16章　NuxtGenerateボタンをトップページに入れ、通信の確認をする
16.1　概要
16.2　トップページの修正
16.3　Nuxt.config.jsの修正
16.4　実行の確認

第17章　詳細ページの情報を取得するストアを作成する
17.1　概要
17.2　編集ファイルについて

第18章　詳細ページを作成する
18.1　概要
18.2　編集ファイルについて
18.3　metaタグの設定について
18.4　確認してみましょう

第19章　アプリケーションの動作確認
19.1　ngrokのインストール
19.2　ngrokの使い方
19.3　LaravelとNuxtを結合してメッセージを作成する

はじめに

　本書はOGPを活用したSNSシェアアプリを、Nuxt.jsとLaravelで開発する方法について解説します。本書でお伝えする内容が、これからNuxt.jsとLaravelを使ってWebアプリケーションを開発したいとお考えの方にとってお役に立てば幸いです。

本書で説明しないこと

　作成したWebアプリケーションの公開方法については、本書では扱いません。

対象読者

　・Nuxt.jsとLaravelを触ったことのある方

　・AWSアカウントをお持ちの方（S3を画像の保存先として利用します）

　上記の方を対象読者として想定しています。

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

OGPとは

　OGPはOpen Graph Protocolの略称です。本書ではOGPを、TwitterやFacebookなどで、Webページのタイトルや画像、説明文などを表示するためのプロトコルと考えます。OGPに沿った設定をすることで、TwitterやFacebookに対象のWebページが投稿されたとき、そのサービスのしくみに従って情報が表示されます。

OGPを活用したアプリケーションとは

　このOGPをどのように活用するかについて、例を用いて説明します。次の画像は、筆者たちが開発したCALcalo(https://calcalo.com/)1 というWebアプリケーションで作成したページのURLを、Twitterに投稿したツイートの一部キャプチャです。

図1: OGPアプリケーションの例 - CALcalo

　OGPを設定可能なSNSであれば、OGPアプリケーションで作成した画像などの情報を、コンテンツとして扱えます。たとえばOGPにのっとって画像を設定したWebページのURLをTwitterに投稿すると、前図のように表示されます。そのため、文字だけの情報と比較して、目にとどまりやすくなります。また、ユーザーは投稿時にURLをツイートするだけで良いため、別途画像を添付する必要がありません。

1. https://calcalo.com/

試し読みはここまでです。
この続きは、製品版でお楽しみください。