<p>今回は、LINEボットを作っていきたいと思います。<br>ユーザーのメッセージに対して自動で返信させたり、メッセージをトリガーに自社システムを動かしたり、<br>また、LINE PAYを使用した支払いフローも開発できます。<br><br>この記事では、LINE APIの概要を解説しつつ、実際にアプリを構築していきたいと思います。<br></p><h3 id="h5889d09e82">LINE API、通信の仕組み。</h3><p>LINE APIは、Webhookという仕組みを使っています。<br>LINE上で何かしらのアクションが起こると、そのアクションの情報を飛ばすようになっています。<br>送信先を自社システムに指定し、その内容を元に自社システムの動きを制御するといった形になります。<br></p><h3 id="h5b3e73489f">準備するもの</h3><ul><li>LINE APIのアクセストークン、シークレットキー</li><li>自社システム（私はNode.js, Express, Herokuを使用）</li></ul>

Node.js + Express で作るLINEアプリケーション

<p>何回かに亘ってStripeを使ったWEBアプリケーションを作っていこうと思います。<br>今回はその中の【準備編】になります。<br><br><strong>開発時の環境</strong></p><pre><code>"react": "17.0.2",
"next": "^12.1.0",
"@stripe/react-stripe-js": "^1.9.0",
"@stripe/stripe-js": "^1.24.0",</code></pre><p><br></p><h2 id="h0fe2a40aaf">Stripe事前チェック</h2><p>・Stripeは基本的に、<strong>サーバー側</strong>での実装になります。<br>・Next.jsでは、フロント側とサーバー側の処理が混在しているので、混乱しないように。<br>・基本フローは、<strong>Next.jsのAPI RouteでStripe APIの実装 → フロント側でAPI Routeを叩く</strong>という流れになります。<br>・本番環境で利用する場合、運営者、プラットフォーマー側の情報入力が必要になります。例えば、インボイスをテスト環境で送信する場合、オーナーアカウント自体に送信確認は可能ですが、別のアドレスにテスト送信できません。テスト送信する場合は<strong>オーナーアカウントを有効化（プラットフォーマー情報の入力）</strong>が必要になります。<br><br><br></p><h2 id="hd8d793506b">インストール</h2><h4 id="h9f6f4089c8">サーバー用ライブラリ</h4><pre><code>npm i stripe

yarn add stripe</code></pre><p><br></p><h4 id="hff8c070c8a">フロント用ライブラリ</h4><p>※ Stripeの初期化用ライブラリとReact用コンポーネントライブラリの２種類。</p><pre><code>npm i&nbsp;@stripe/stripe-js  //初期化用ライブラリ
npm i @stripe/react-stripe-js //React用コンポーネントライブラリ

yarn add&nbsp;@stripe/stripe-js  //初期化用ライブラリ
yarn add @stripe/react-stripe-js //React用コンポーネントライブラリ</code></pre><p><br><br></p><h2 id="h12e92202d2">API Keyの設定</h2><p>Stripeには、本番用とTEST用で、それぞれ２種類（公開可能キーとシークレットキー）があります。<br><br>上き以外に、自分で利用制限をかけらる「制限付きのキー」という物もあります。<br>基本は、標準の公開可能キーとシークレットキーで大丈夫ですが、<br>不要な機能にアクセスできないよう設定できるので、安全面でこちらを使うのもありです。<br><br><br></p><h2 id="hadb2c8d6da">初期化</h2><h3 id="h9a5e4fdf63">サーバー用</h3><pre><code>//　シークレットキー使用
const stripe = require('stripe')('sk_test・・・・・・');</code></pre><p><br>※ <strong style="background-color:#ffffff">シークレットキー</strong>使用。<br>※ <strong>API Route</strong>や<strong>SSG, SSR</strong>関数ないで使用。<br><br></p><h3 id="h00e2ebf914">フロント用</h3><pre><code>// 公開可能キー使用
const stripePromise = loadStripe('pk_test・・・・・・');</code></pre><p><br>※ <strong>公開可能キー</strong>使用。<br>※ フロント用コンポーネントのStripe Elements使用時に使う。（詳しくは別記事へ）<br><br><br></p><h2 id="ha214098e44">まとめ</h2><p>以上で準備編は終わりになります。<br>Stripeを始めて利用するとき用に、前提知識と初期設定の方法など、<br>僕が気になったポイントを紹介しました。<br><br>次回以降は実際に、決済処理の実装、商品登録、インボイス処理の実装、Webhookの連携などを紹介していこうと思います。<br><br>決済機能は、ビジネスやサービス運営者にとっては不可欠な機能だと思います。<br>Stripeは、そんな決済機能を比較的簡単に導入できるので、<br>慣れてくると非常につよつよなサービスです。</p>

Stripe×Next.jsで作る決済アプリケーション【準備編】

<p><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/06fd3fbc975641b180f0af5ea681d141/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-06%2020.15.21.png" alt=""><br>今回は<a style="color:#38a5c3" href="https://www.noway-form.com/" target="_blank" rel="noopener noreferrer">Noway Form</a>の紹介です。<br>こちらは最近ベータリリースされた<strong>Notion</strong>用のアプリケーションで、<br>Google FormのNotion版です。（しかも無料）<br><br>埋め込み用コードも用意されているので自社サイト等に埋め込みも可能です。<br>私たちのサイトの連絡フォームで採用しています。<br><br>Notion使用率が増えているので、この機会にぜひ導入を検討してみてはいかがでしょうか。<br>早速、そんな<strong>Noway Form</strong>の作り方をご紹介していきます。<br><br></p><h3 id="hebfd6c1378">Notionの用意</h3><p>何はともあれ、まずはNotionを用意してください。<br>登録作業は省きます。<br><br></p><h3 id="hcb73ffdb5f">データベースの用意</h3><p>Notionの左タブから<strong>ページを追加→データベースからテーブルを選択。</strong>（今回は「テーブル」を選択してますが、フォーマットは好きなものを選んでも構いません。）<br><br><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/25b731eb4339464cb04f9b2aa0a0576e/%E2%91%A0.png?w=1315&amp;h=600" alt=""><br>① ページタイトル<br>② 必要なタブを追加（<em> このタブがそのままNoway  Formの入力欄になります。</em>）<br><br></p><h3 id="h0e04f80e18">Noway Formの用意</h3><p><br>やることは3つ。</p><ol><li>ワークスペース作成</li><li>Notionデータベースへのアクセス権限作成。</li><li>フォームデザイン、バリデート等を設定。</li></ol><p><br>初めての方は、ポップアップウィンドウで手順が表示されていると思います。<br>そのまま進めていってください。<br><br><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/1454e7700a8d4badbcd1b475ba51dac1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-06%2022.50.22.png" alt=""><br><br>私たちの場合、データベースタブに「返信済み」「作成日時」というものがあります。<br>こちらは管理時に使用するものなので、フォームからは見えないよう<strong>非表示</strong>しています。<br><br>諸々設定したら、晴れてNoway Form の完成です。<br><strong>本番のフォームを見る</strong> からリンクを配布してアンケートみたいに利用してもいいし、<br><strong>埋め込み(iframe)</strong> のコードを自社サイトのHTMLに貼り付けて使用もできます。<br><br><br></p><h3 id="ha214098e44">まとめ</h3><p>以上になります。<br>作成も管理も非常に簡単でした。<br>現在はベータ版ですが、近く正式リリースされる予定です。<br><br>Notionも日々進化しているので、今後の発展に期待ですね。<br></p>

【Noway Form】Notionで作るメッセージフォーム

<p>Next.jsをアップデートし、<strong>npm run dev</strong>すると下記のエラーが出るようになった。<br></p><pre><code>//下記のどちらかが出る。
Error: Cannot find module '.next/server/pages/_document.js'

TypeError: Cannot destructure property 'components' of 'object null' as it is null.</code></pre><p><br>今まで出なかったエラーだけに困惑した。<br></p><h3 id="hfadbe0f6e2">解決策：</h3><p><strong>/.next</strong>フォルダを削除<br><br><strong>この</strong>フォルダは<strong>run dev</strong> すると自動で生成されるフォルダで、Next.jsのビルド情報が入っている。<br>旧バージョンのビルド情報が残っており、新バージョンとの差異で出たエラーである。<br>※本番環境だと、ビルドするたびに<strong>.next</strong> が書き変わる（Next.js 11以上）ので普通に動作するが、デバック環境だとそうでは無かった。<br></p><h2 id="ha214098e44">まとめ</h2><p>とりあえず解決できたのでOk！</p>

【解決】Next.jsをアップデートした際に生じたエラー。

<h2 id="h8d027c8ed3">はじめに</h2><p>はじめまして。A-Release 代表、湯本好明と言います。A-Releaseでは、WEB制作事業として活動しています。<br>基本的には、オンライン中心の活動を行っていく方向で、全国どこからでも依頼可能となります。<br>よろしくお願いします。<br></p><h2 id="hedc51bed0c">コーポレートサイト開発</h2><p>このサイトは下記の技術を用いて開発されています。</p><ul><li>Next.js</li><li>TypeScript</li><li>Chakra-ui</li><li>Vercel</li><li>microCMS</li></ul><p><br>簡単に実装の詳細を公開します。<br></p><h3 id="h90ca6305d2">モダンフレームワーク「Next.js」</h3><p>Next.jsは、Vercel社が開発しているJavaScript フレームワークで、<br>その機能やパワーの凄さから使用者が増加している、勢いのある技術です。<br><br>このサイトの大枠になります。<br>ページルーティングや画面遷移の効率化(Link)、microCMSからデータフェッチするためのAPI処理と、至る所でその恩恵を受けています。<br><br>ブログ一覧、記事詳細ページは、Next.jsに搭載のISRで実装しています。これによりSEO対策、UX向上、かつ最新ビルドという事ができます。強強<br></p><h3 id="hbc08ded6c8">TypeScript</h3><p>これはフロント開発では必須ですね。<br>JavaScriptに型が付いたプログラミング言語です。<br>型判定によって、予期せぬ値が入った場合、開発時にエラーで弾かれます。そのおかげで事故が未然に防げるというものです。強<br></p><h3 id="he0e5563868">Chakra-ui</h3><p>CSSの代わり。コンポーネントライブラリです。一からCSSを充てがうのは時間がかかるので、簡単かつ良い感じにしてくれるのがこのライブラリです。<br><br>普段Tailwind CSSを使っているのですが、今回試しに、初めて使ってみました。まあ悪くない。<br></p><h3 id="h065a574f0d">Vercel</h3><p>サーバー。ホスティング先。<br>レンタルサーバーみたいなもの。<br>Next.jsを使用している人はほぼ脳筋「これ 1択」みたいな感じで使えばいいと思います。<br><br>上で説明したとおり、Next.jsの生みの親Vercel社のサーバーです。Next.jsとの相性だけを考えて作られたと言えるくらい強いです。<br><br>よほど利用されるアプリケーションでない限り、充分だと思います。<br></p><h3 id="hae6947d5ce">microCMS</h3><p>昨今流行りのHeadless CMSの一つが「microCMS」です。<br>一体型CMSの代表「WordPress」に代わるもの。<br>日本製なのでダッシュボードも見やすいし、ドキュメントも読みやすく、初心者でもかなり使いやすいと感じます。<br><br>ブログを作る際、<br>「自分でフロント側を実装したい」<br>「既にあるサイトに搭載したい」<br>この場合、どうしてもWordPressだと厳しいし、パフォーマンスを考えたらHeadlessCMS一択かなと思います。その中でも日本製のmicroCMSは特におすすめです。<br><br>この記事もmicroCMS上で書いてます。<br></p><h2 id="h1afe451c43">さいごに</h2><p>A-Releaseをこれからもよろしくお願いします。</p>

A-Release コーポレートサイト制作。公開しました。

<h2 id="hdb41525ba7">ブログテンプレートから作成されました🎉</h2><p>ブログテンプレートからAPIを作成しました。<br>おつかれさまでした🎉<br></p><h2 id="hf45076424a">APIプレビューを試そう🚀</h2><p>最初に「APIプレビュー」をしてみましょう。<br>入稿したコンテンツはAPI経由で取得し、Viewに繋ぎ込みます。<br>APIプレビューでは実際のAPIレスポンスを確認でき、あなたの開発を加速させます。<br><br>👇まずはここをクリックします。<br><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/33a58a465298405aaf2f6665de4235f4/blog-template-description1.png" alt=""><br><br>APIプレビュー画面が開いたら、<strong>「取得」</strong>ボタンでリクエストを試してみましょう。<br><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/aabef5d4bd704d99bf77cb83cc4d73e6/blog-template-description2.png" alt=""><br><br>この記事の内容がAPIで取得できていることがわかります。<br><img src="https://images.microcms-assets.io/assets/47e7fcaea43947baa0cd0b9e6f59b2f9/98e1a025aaff4ea2ba3ae3257acb7a7d/blog-template-description3.png" alt=""></p><h2 id="h4c50a0f1e5"><br>次にやること🏃‍♂️</h2><p>APIプレビューで確認したレスポンスを参考に、あなた自身のWebサイトを構築しましょう。<br>microCMSはAPIでコンテンツを取得するため、お好きな言語・フレームワークで画面を構築できます。<br></p><ul><li><a href="https://document.microcms.io/tutorial/javascript/javascript-top" target="_blank" rel="noopener noreferrer">JavaScript SDK</a></li><li><a href="https://document.microcms.io/tutorial/nuxt/nuxt-top" target="_blank" rel="noopener noreferrer">Nuxt SDK</a></li><li><a href="https://document.microcms.io/tutorial/gatsby/gatsby-top" target="_blank" rel="noopener noreferrer">Gatsby SDK</a></li></ul><p><br>その他に<a href="https://microcms.io/features/sdk" target="_blank" rel="noopener noreferrer">サーバーサイドSDK（PHP / Go / Ruby）やモバイルSDK（iOS / Android）</a>もございます。<br><br>お困りなことや疑問点などございましたらお気軽にご連絡ください。<br><br>サポート窓口：<a href="mailto:support@microcms.io" target="_blank" rel="noopener noreferrer">support@microcms.io</a><br>よくある質問：<a href="https://help.microcms.io/ja/knowledge" target="_blank" rel="noopener noreferrer">https://help.microcms.io/ja/knowledge</a></p>

α-Release企画📱

BLOGブログ

Node.js + Express で作るLINEアプリケーション

Stripe×Next.jsで作る決済アプリケーション【準備編】

【Noway Form】Notionで作るメッセージフォーム

【解決】Next.jsをアップデートした際に生じたエラー。

A-Release コーポレートサイト制作。公開しました。

（サンプル）まずはこの記事を開きましょう