久しぶりです。最近JAMStackとかが流行ってる流れでヘッドレスCMSが使われつつあるので実際に使って爆速でCMS機能を実装してみたので実装例とかを紹介したいと思います。 初心者はもちろん非エンジニアでもわかるレベルで解説・紹介します。 デモ：https://0115765.com/samples/php/MicroCMS_List.php サンプルコード microCMSとは microCMSは純国産のヘッドレスCMSです。 ヘッドレスCMSとは表示する部分を排除したCMS(コンテンツ管理システム)のことです。 通常WordPressなどの一般的なCMSはフロントエンドとバックエンドのセットで構築されます。WordPressはテーマなどを使って見える部分を整備しますよね。 一方ヘッドレスCMSは表示する部分(＝フロントエンド)を提供せず自分で見える部分を作るので自由度が格段に増します。(公式サイトより) そしてmicroCMSを使う場合はコンテンツをmicroCMS側に保管するため保守管理が楽です。 ヘッドレスCMSの利点・欠点 利点としては以下のことが挙げれられます。 必要な部分だけ導入できる 自由な言語・フレームワークを使うことができる バックエンドを構築する必要が無いためフロントエンド部分の作成に専念できる つまり「WordPressの導入するまでもないけどCMS機能ほしいなぁー！」レベルの一部分に導入したい時、大活躍ですね。 また欠点はこんな感じです。 一から見える部分を作るのでコンテンツ表示部を作成・改変するにはそれなりの言語的な知識を要する もちろんフロントエンド部分は自分で書かないといけないのでHTML/JSとかの言語やVueなりReactなりのフレームワークの知識も必要になってきます。逆に言えばエンジニアならもってこいのやつなんですね～ microCMSの無料プラン 無料プランと有料プランが用意されており無料プランはこんな感じです。 データ転送量：100GB API数：10個 メディア最大容量：40MB コンテンツ数上限：10000件 →個人のポートフォリオやや中小企業のコーポレートサイト・オウンドメディアには十分ですね。その他の比較は公式サイトを見てください。 実際に作ってみる それでは実際に作ってみましょう。 コンテンツ(記事)を作成する アカウント作成 以下リンクからサインアップ出来ます。無料プランならクレカ登録もないので勝手に請求…なことにはならないのでご安心を。 ログインしたら新規サービスを作成します。サービス名とサービスIDを任意の名前で設定します。 プラン選択で無料のヤツにします。 次にAPI基本情報を入力します。今回はNewsというAPI名にしました。 ブログ的な感じにしたいためリスト形式を選択。 最後にAPIスキーマを作成します。今回はタイトルと本文を追加しました。 更新日・投稿日などは元から入ってます 記事を書く それではコンテンツを作成していきましょう。右上の作成から作れます。 ここはWordPressのクラシックエディターと全く同じ操作で記事を書けます。 斜め字・太字・下線・取り消し線はもちろん文字色・背景色・コード・画像・YouTube埋め込みもできます！ 作成が完了したら公開をクリックして保存しましょう。That's All！それでは見える部分を作っていきましょう！ 表示部分を作る 本来はJAMStackやSSG(Static Site Generatin)を活用した環境などで使われることが多い(むしろそっちメイン)ですが今回は純粋なPHPのみ・JavaScriptのみで実装してみましたので参考にしてみてください。 APIをfetchなりcUrlなりで取得して加工するだけなので超簡単です！ まぁNuxtJSで作ってNetlifyでホスティングする…みたいな記事しか無いしドキュメントもそれしか無いのであんまやる人がいないんでしょう… ※JAMStackとは…Netlifyが開発した、クライアントサイドJavaScript・再利用可能なAPI・マークアップ(markup)の3つをベースとしたクラウドネイティブなウェブ開発アーキテクチャである。(Wikiより) 【PHP】実装例 PHPで計100行以内で実装してみたのでコード例を紹介します。 Bladeを使いたかったからLaravelでやろうと思ったところですがバニラのPHPを使いました。 記事表示部分 デモ：https://0115765.com/samples/php/MicroCMS_Content.php?id=w65rp7nbzn 各記事のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]/[記事ID]です。 クエリパラメータを使ってIDを認識してそれを元にcURLでAPIを叩いてHTMLとして加工します。 サンプルコード MicroCMS_Content.php <?php $id = $_GET['id']; // クエリパラメータを取得 if (isset($id) == true) { GetContent($id); } else { echo 'Set query parameters'; } function GetContent($id) { // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news/' . $id); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: ***************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); ShowHtml( $result['title'], $result['createdAt'], $result['updatedAt'], $result['body'] ); } // コンテンツ表示部 function ShowHtml($title, $createAt, $updatedAt, $body) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>更新日:' . $updatedAt . '</p><br>'; echo '<article style="background-color: aliceblue;">本文:<br>' . $body . '</article>'; } 記事一覧 デモ：https://0115765.com/samples/php/MicroCMS_List.php 記事一覧のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]です。そこにAPIキーをGETで渡すだけです。 MicroCMS_List.php <?php // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: **************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); foreach ($result['contents'] as $contents) { $url = 'https://0115765.com/samples/php/MicroCMS_Content.php?id=' . $contents['id']; ShowHtml( $contents['title'], $contents['createdAt'], $url ); } function ShowHtml($title, $createAt, $url) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>URL: <a href="' . $url . '">' . $url . '</a></p><hr>'; }; ５分でできるかよとか言われそうですがcURLコマンドをPHPコードに変換してくれるサービスがあるので簡単なんですね～あとはjson_decodeしてHTMLに入れるだけ。 動作確認 https://0115765.com/samples/php/MicroCMS_List.php にアクセスしたら記事一覧が表示されます。 各リンクをクリックすると該当IDの作成した記事が表示されます。ちゃんと出来てますね。 LightHouseっていうChrome系ブラウザに搭載しているWebサイトの速度などを評価するヤツで測定してみましたがSpeedは100点になっており速度面でも問題なさそうでした。 ※今回やってませんが一応XSS対策もしておいてくださいね。 とりまできました。 【JavaScript】実装例 PHPで十分だけど一応JavaScriptでも作ってみました。Vueなどのフレームワークを使わずVanillaのJavaScriptを使ったので勘違いなく… ちなみにこっちのほうが簡単です。 Content.html <!DOCTYPE html> <html lang='ja'> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Content</title> </head> <body> <main> <h2 id='title'></h2> <p id='date'></p> <article id='body'></article> </main> <script> // 取得 fetch('https://***********.microcms.io/api/v1/news/w65rp7nbzn', { headers: { 'X-API-KEY': '****************************************' } }) .then(res => res.json()) .then(json => { document.getElementById('title').innerHTML = 'タイトル:' + json.title; document.getElementById('date').innerHTML = '作成日:' + json.createdAt; document.getElementById('body').innerHTML = '本文' + json.body; }) </script> </body> </html> 確認してみても大丈夫でした。 注意事項 バニラのJSで作成するとAPIキーが丸見えになるのでそこだけ注意してください。デモが無いのもそういうわけです。 なのでサーバーサイドやSSGで開発することが必須になります！ 総括 超爆速で作ることができて正直感動しております() 最近有名なので是非使ってみてください！ Twitter@ichii731 | ポートフォリオ あ、ちなみにAPIは記事管理画面で直接投げて確認できますよ～

久しぶりです。最近JAMStackとかが流行ってる流れでヘッドレスCMSが使われつつあるので実際に使って爆速でCMS機能を実装してみたので実装例とかを紹介したいと思います。 初心者はもちろん非エンジニアでもわかるレベルで解説・紹介します。 デモ：https://0115765.com/samples/php/MicroCMS_List.php microCMSとは microCMSは純国産のヘッドレスCMSです。 ヘッドレスCMSとは表示する部分を排除したCMS(コンテンツ管理システム)のことです。 通常WordPressなどの一般的なCMSはフロントエンドとバックエンドのセットで構築されます。WordPressはテーマなどを使って見える部分を整備しますよね。 一方ヘッドレスCMSは表示する部分(＝フロントエンド)を提供せず自分で見える部分を作るので自由度が格段に増します。(公式サイトより) そしてmicroCMSはコンテンツをmicroCMS側に保管するためコンテンツの保守管理が楽です。 ヘッドレスCMSの利点・欠点 利点としては以下のことが挙げれられます。 必要な部分だけ導入できる 自由な言語・フレームワークを使うことができる バックエンドを構築する必要が無いためフロントエンド部分の作成に専念できる つまり「WordPressの導入するまでもないけどCMS機能ほしいなぁー！」レベルの一部分に導入したい時、大活躍ですね。 また欠点はこんな感じです。 一から見える部分を作るのでコンテンツ表示部を作成・改変するにはそれなりの言語的な知識を要する もちろんフロントエンド部分は自分で書かないといけないのでHTML/JSとかの言語やVueなりReactなりのフレームワークの知識も必要になってきます。逆に言えばエンジニアならもってこいのやつなんですね～ microCMSの無料プラン 無料プランと有料プランが用意されており無料プランはこんな感じです。 データ転送量：100GB API数：10個 メディア最大容量：40MB コンテンツ数上限：10000件 →個人のポートフォリオやや中小企業のコーポレートサイト・オウンドメディアには十分ですね。その他の比較は公式サイトを見てください。 実際に作ってみる それでは実際に作ってみましょう。 コンテンツ(記事)を作成する アカウント作成 以下リンクからサインアップ出来ます。無料プランならクレカ登録もないので勝手に請求…なことにはならないのでご安心を。 ログインしたら新規サービスを作成します。サービス名とサービスIDを任意の名前で設定します。 プラン選択で無料のヤツにします。 次にAPI基本情報を入力します。今回はNewsというAPI名にしました。 ブログ的な感じにしたいためリスト形式を選択。 最後にAPIスキーマを作成します。今回はタイトルと本文を追加しました。 更新日・投稿日などは元から入ってます 記事を書く それではコンテンツを作成していきましょう。右上の作成から作れます。 ここはWordPressのクラシックエディターと全く同じ操作で記事を書けます。 斜め字・太字・下線・取り消し線はもちろん文字色・背景色・コード・画像・YouTube埋め込みもできます！ 作成が完了したら公開をクリックして保存しましょう。That's All！それでは見える部分を作っていきましょう！ 表示部分を作る 本来はJAMStackやSSG(Static Site Generatin)を活用した環境などで使われることが多い(むしろそっちメイン)ですが今回は純粋なPHPのみ・JavaScriptのみで実装してみましたので参考にしてみてください。 APIをfetchなりcUrlなりで取得して加工するだけなので超簡単です！ まぁNuxtJSで作ってNetlifyでホスティングする…みたいな記事しか無いしドキュメントもそれしか無いのであんまやる人がいないんでしょう… ※JAMStackとは…Netlifyが開発した、クライアントサイドJavaScript・再利用可能なAPI・マークアップ(markup)の3つをベースとしたクラウドネイティブなウェブ開発アーキテクチャである。(Wikiより) 【PHP】実装例 PHPで計100行以内で実装してみたのでコード例を紹介します。 Bladeを使いたかったからLaravelでやろうと思ったところですがバニラのPHPを使いました。 記事表示部分 デモ：https://0115765.com/samples/php/MicroCMS_Content.php?id=w65rp7nbzn 各記事のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]/[記事ID]です。 クエリパラメータを使ってIDを認識してそれを元にcURLでAPIを叩いてHTMLとして加工します。 MicroCMS_Content.php <?php $id = $_GET['id']; // クエリパラメータを取得 if (isset($id) == true) { GetContent($id); } else { echo 'Set query parameters'; } function GetContent($id) { // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news/' . $id); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: ***************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); ShowHtml( $result['title'], $result['createdAt'], $result['updatedAt'], $result['body'] ); } // コンテンツ表示部 function ShowHtml($title, $createAt, $updatedAt, $body) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>更新日:' . $updatedAt . '</p><br>'; echo '<article style="background-color: aliceblue;">本文:<br>' . $body . '</article>'; } 記事一覧 デモ：https://0115765.com/samples/php/MicroCMS_List.php 記事一覧のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]です。そこにAPIキーをGETで渡すだけです。 MicroCMS_List.php <?php // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: **************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); foreach ($result['contents'] as $contents) { $url = 'https://0115765.com/samples/php/MicroCMS_Content.php?id=' . $contents['id']; ShowHtml( $contents['title'], $contents['createdAt'], $url ); } function ShowHtml($title, $createAt, $url) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>URL: <a href="' . $url . '">' . $url . '</a></p><hr>'; }; ５分でできるかよとか言われそうですがcURLコマンドをPHPコードに変換してくれるサービスがあるので簡単なんですね～あとはjson_decodeしてHTMLに入れるだけ。 動作確認 https://0115765.com/samples/php/MicroCMS_List.php にアクセスしたら記事一覧が表示されます。 各リンクをクリックすると該当IDの作成した記事が表示されます。ちゃんと出来てますね。 LightHouseっていうChrome系ブラウザに搭載しているWebサイトの速度などを評価するヤツで測定してみましたがSpeedは100点になっており速度面でも問題なさそうでした。 ※今回やってませんが一応XSS対策もしておいてくださいね。 とりまできました。 【JavaScript】実装例 PHPで十分だけど一応JavaScriptでも作ってみました。Vueなどのフレームワークを使わずVanillaのJavaScriptを使ったので勘違いなく… ちなみにこっちのほうが簡単です。 Content.html <!DOCTYPE html> <html lang='ja'> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Content</title> </head> <body> <main> <h2 id='title'></h2> <p id='date'></p> <article id='body'></article> </main> <script> // 取得 fetch('https://***********.microcms.io/api/v1/news/w65rp7nbzn', { headers: { 'X-API-KEY': '****************************************' } }) .then(res => res.json()) .then(json => { document.getElementById('title').innerHTML = 'タイトル:' + json.title; document.getElementById('date').innerHTML = '作成日:' + json.createdAt; document.getElementById('body').innerHTML = '本文' + json.body; }) </script> </body> </html> 確認してみても大丈夫でした。 注意事項 バニラのJSで作成するとAPIキーが丸見えになるのでそこだけ注意してください。デモが無いのもそういうわけです。 なのでサーバーサイドやSSGで開発することが必須になります！ 総括 超爆速で作ることができて正直感動しております() 最近有名なので是非使ってみてください！ Twitter@ichii731 | ポートフォリオ あ、ちなみにAPIは記事管理画面で直接投げて確認できますよ～

久しぶりです。最近JAMStackとかが流行ってる流れでヘッドレスCMSが使われつつあるので実際に使って爆速でCMS機能を実装してみたので実装例とかを紹介したいと思います。 初心者はもちろん非エンジニアでもわかるレベルで解説・紹介します。 デモ：https://0115765.com/samples/php/MicroCMS_List.php microCMSとは microCMSは純国産のヘッドレスCMSです。 ヘッドレスCMSとは表示する部分を排除したCMS(コンテンツ管理システム)のことです。 通常WordPressなどの一般的なCMSはフロントエンドとバックエンドのセットで構築されます。WordPressはテーマなどを使って見える部分を整備しますよね。 一方ヘッドレスCMSは表示する部分(＝フロントエンド)を提供せず自分で見える部分を作るので自由度が格段に増します。(公式サイトより) そしてmicroCMSはコンテンツをmicroCMS側に保管するためコンテンツの保守管理が楽です。 ヘッドレスCMSの利点・欠点 利点としては以下のことが挙げれられます。 必要な部分だけ導入できる 自由な言語・フレームワークを使うことができる バックエンドを構築する必要が無いためフロントエンド部分の作成に専念できる つまり「WordPressの導入するまでもないけどCMS機能ほしいなぁー！」レベルの一部分に導入したい時、大活躍ですね。 また欠点はこんな感じです。 一から見える部分を作るのでコンテンツ表示部を作成・改変するにはそれなりの言語的な知識を要する もちろんフロントエンド部分は自分で書かないといけないのでHTML/JSとかの言語やVueなりReactなりのフレームワークの知識も必要になってきます。逆に言えばエンジニアならもってこいのやつなんですね～ microCMSの無料プラン 無料プランと有料プランが用意されており無料プランはこんな感じです。 データ転送量：100GB API数：10個 メディア最大容量：40MB コンテンツ数上限：10000件 →個人のポートフォリオやや中小企業のコーポレートサイト・オウンドメディアには十分ですね。その他の比較は公式サイトを見てください。 実際に作ってみる それでは実際に作ってみましょう。 コンテンツ(記事)を作成する アカウント作成 以下リンクからサインアップ出来ます。無料プランならクレカ登録もないので勝手に請求…なことにはならないのでご安心を。 ログインしたら新規サービスを作成します。サービス名とサービスIDを任意の名前で設定します。 プラン選択で無料のヤツにします。 次にAPI基本情報を入力します。今回はNewsというAPI名にしました。 ブログ的な感じにしたいためリスト形式を選択。 最後にAPIスキーマを作成します。今回はタイトルと本文を追加しました。 更新日・投稿日などは元から入ってます 記事を書く それではコンテンツを作成していきましょう。右上の作成から作れます。 ここはWordPressのクラシックエディターと全く同じ操作で記事を書けます。 斜め字・太字・下線・取り消し線はもちろん文字色・背景色・コード・画像・YouTube埋め込みもできます！ 作成が完了したら公開をクリックして保存しましょう。That's All！それでは見える部分を作っていきましょう！ 表示部分を作る 本来はJAMStackやSSG(Static Site Generatin)を活用した環境などで使われることが多い(むしろそっちメイン)ですが今回は純粋なPHPのみ・JavaScriptのみで実装してみましたので参考にしてみてください。 APIをfetchなりcUrlなりで取得して加工するだけなので超簡単です！ まぁNuxtJSで作ってNetlifyでホスティングする…みたいな記事しか無いしドキュメントもそれしか無いのであんまやる人がいないんでしょう… ※JAMStackとは…Netlifyが開発した、クライアントサイドJavaScript・再利用可能なAPI・マークアップ(markup)の3つをベースとしたクラウドネイティブなウェブ開発アーキテクチャである。(Wikiより) 【PHP】実装例 PHPで計100行以内で実装してみたのでコード例を紹介します。 Bladeを使いたかったからLaravelでやろうと思ったところですがバニラのPHPを使いました。 記事表示部分 デモ：https://0115765.com/samples/php/MicroCMS_Content.php?id=w65rp7nbzn 各記事のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]/[記事ID]です。 クエリパラメータを使ってIDを認識してそれを元にcURLでAPIを叩いてHTMLとして加工します。 MicroCMS_Content.php <?php $id = $_GET['id']; // クエリパラメータを取得 if (isset($id) == true) { GetContent($id); } else { echo 'Set query parameters'; } function GetContent($id) { // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news/' . $id); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: ***************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); ShowHtml( $result['title'], $result['createdAt'], $result['updatedAt'], $result['body'] ); } // コンテンツ表示部 function ShowHtml($title, $createAt, $updatedAt, $body) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>更新日:' . $updatedAt . '</p><br>'; echo '<article style="background-color: aliceblue;">本文:<br>' . $body . '</article>'; } 記事一覧 デモ：https://0115765.com/samples/php/MicroCMS_List.php 記事一覧のAPIエンドポイントはhttps://[サービス名].microcms.io/api/v1/[API名]です。そこにAPIキーをGETで渡すだけです。 MicroCMS_List.php <?php // cUrlでAPIを叩く $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://***************.microcms.io/api/v1/news'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); $headers[] = 'X-Api-Key: **************************************'; curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch); curl_close($ch); // 取得したら表示 $result = json_decode($response, true); foreach ($result['contents'] as $contents) { $url = 'https://0115765.com/samples/php/MicroCMS_Content.php?id=' . $contents['id']; ShowHtml( $contents['title'], $contents['createdAt'], $url ); } function ShowHtml($title, $createAt, $url) { echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo '<h2>タイトル:' . $title . '</h2>'; echo '<p>作成日:' . $createAt . '</p>'; echo '<p>URL: <a href="' . $url . '">' . $url . '</a></p><hr>'; }; ５分でできるかよとか言われそうですがcURLコマンドをPHPコードに変換してくれるサービスがあるので簡単なんですね～あとはjson_decodeしてHTMLに入れるだけ。 動作確認 https://0115765.com/samples/php/MicroCMS_List.php にアクセスしたら記事一覧が表示されます。 各リンクをクリックすると該当IDの作成した記事が表示されます。ちゃんと出来てますね。 LightHouseっていうChrome系ブラウザに搭載しているWebサイトの速度などを評価するヤツで測定してみましたがSpeedは100点になっており速度面でも問題なさそうでした。 ※今回やってませんが一応XSS対策もしておいてくださいね。 とりまできました。 【JavaScript】実装例 PHPで十分だけど一応JavaScriptでも作ってみました。Vueなどのフレームワークを使わずVanillaのJavaScriptを使ったので勘違いなく… ちなみにこっちのほうが簡単です。 Content.html <!DOCTYPE html> <html lang='ja'> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Content</title> </head> <body> <main> <h2 id='title'></h2> <p id='date'></p> <article id='body'></article> </main> <script> // 取得 fetch('https://***********.microcms.io/api/v1/news/w65rp7nbzn', { headers: { 'X-API-KEY': '****************************************' } }) .then(res => res.json()) .then(json => { document.getElementById('title').innerHTML = 'タイトル:' + json.title; document.getElementById('date').innerHTML = '作成日:' + json.createdAt; document.getElementById('body').innerHTML = '本文' + json.body; }) </script> </body> </html> 確認してみても大丈夫でした。 注意事項 バニラのJSで作成するとAPIキーが丸見えになるのでそこだけ注意してください。デモが無いのもそういうわけです。 なのでサーバーサイドやSSGで開発することが必須になります！ 総括 超爆速で作ることができて正直感動しております() 最近有名なので是非使ってみてください！ Twitter@ichii731 | ポートフォリオ あ、ちなみにAPIは記事管理画面で直接投げて確認できますよ～

TwitterからWordPressへ投稿するPHPコード 制作した経緯 ググっても無かったので…。 前提条件 1.一時間毎にcronで実行ファイルを叩く 2.WordPressへ投稿したいツイートには任意のキーワードを設定する 3.同じような内容のツイート内容は投稿しない 4.TwitterOAuthとWordPressは適所にインストールされていること 5.毎日、ツイートしていること <?php //ini_set("display_errors",1); require_once(__DIR__ . '/../wp-load.php'); require_once("../vendor/autoload.php"); require_once("../tw/tw-config.php"); use Abraham\TwitterOAuth\TwitterOAuth; define("BLOGPOSTKEYWORD", "#BLOGPOST"); class tw_wp_class { public static function main() { $txt = (function () { $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET); $res = $connection->get('statuses/user_timeline', array( 'screen_name' => 'taoka358s', 'count' => '5', 'exclude_replies' => 'true', 'include_rts' => 'false' )); return $res; })(); return (new class($txt) { public $txt = ""; public function __construct($txt) { $this->txt = $txt; } public function wp_post() { $wp_error = $timeYMD = $timeH = $wp_post_txt = null; foreach ($this->txt as $key => $val) { if (preg_match("/" . BLOGPOSTKEYWORD . "/", $val->text)) { $wp_post_txt[] = $val->text; $timeYMD[] = wp_date('Y-m-d', (strtotime($val->created_at))); $timeH[] = wp_date('H', (strtotime($val->created_at))); } } if (count($timeH)) { foreach ($timeH as $key => $val) { if ($wp_post_txt[$key] !== "" && wp_date("Y-m-d") === $timeYMD[$key] && wp_date("H") === $timeH[$key]) { $my_post = array( 'post_title' => 'Twitterからの投稿 - ' . wp_date('Y-m-d H:i:s'), 'post_content' => $wp_post_txt[$key], 'post_status' => 'publish', 'post_author' => 1, 'post_category' => array(1) ); $post_id = wp_insert_post($my_post, $wp_error); } } } } }); } } if ($argv[0]) { tw_wp_class::main()->wp_post(); }

現在絶賛勉強中のPHPフレームワークlaravelが無料で学べるサイトを集めました。(随時更新していきます) 環境構築編 MAMPを使ってlaravel6の環境構築がローカル上でできます https://youtu.be/yaitzPzBzuI cloud9を使ってlaravel6の環境構築ができます https://youtu.be/XGDS6TRWDLU cloud9を使ってlaravel8の環境構築ができます https://youtu.be/XXXQOYnsCBk 基本的なCRUD機能実装 参考サイト

下記の記事を参考にgmailのサービスを使ってlaravelからパスワードリセットのメール等を送れるように試みました。 環境 IDE AWS cloud9 laravel6 設定は完了したものの所々でエラーに捕まったのでシェアします エラー 前提のcache等のクリア .envファイルを書き換えたら必ずcacheをクリアしましょう。クリアしないとenvファイルの内容が反映されません。 php artisan cache:clear 下記の記事を保存しておきましょう https://qiita.com/Ping/items/10ada8d069e13d729701 config/mail.phpの確認 envファイルの内容はconfigファイルを経由して反映されます。 envファイルの内容によって変わります 例 .env MAIL_DRIVER=smtp の場合には config/mail.php 'driver' => env('MAIL_DRIVER', 'smtp'), .env MAIL_MAILER=mailgun の場合には config/mail.php 'driver' => env('MAIL_MAILER', 'mailgun'), laravel Expected response code 250 but got code "530"のエラーが出た 下記の記事を参考にしました 自分は MAIL_ENCRYPTION=null から MAIL_ENCRYPTION=tls に変えたら動きました メール認証メールのリンクをクリックすると403エラー E-Mail Verificationを実装中にTarget class [App\Listeners\LogVerifiedUser] does not exist. 感想 このエラーを解消するだけで丸2日かかりました。 少しでも役に立っていただければと思います。