人名や企業名など、旧字体などが表示されないことがあります 葛→葛?? IVS文字とは? 文字コードの確認 下記サイトで文字コードを確認 https://wakufactory.jp/densho/font/ivs.html https://747.github.io/vsselector/ Webサイトでの指定方法 葛?󠄀 [使用したい感じ]&#x[コード]で指定する その他の方法 CSSですべての漢字を旧字体で表示する html { font-feature-settings: "jp83"; } 他の字体はjp78 jp83 jp90 jp04 nlck trad

久しぶりです。最近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は記事管理画面で直接投げて確認できますよ～

はじめに 最近CSSを書くことが多くなったので、書きながら覚えたCSSの技をまとめていこうと思います。随時追加する予定です。 要素を中心に配置 marginを使って中心に配置したいときmargin: 0 auto;を使います。 css body { margin: 0; } .container { width: 500px; margin: 0 auto; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <nav>left</nav> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> 要素を横並びにする 要素同士を横並びにしたいとき、display: flex;を使います。 css body { margin: 0; } .container { width: 800px; margin: 0 auto; display: flex; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> 要素を比率で配置する 要素を比率で配置したい場合、flex: 比率;を使います。 css body { margin: 0; } .container { width: 800px; margin: 0 auto; display: flex; } main { flex: 2; } aside { flex: 1; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> レスポンシブデザイン対応 レスポンシブデザイン対応は、@media screen and (max-width: 数値)を使います。 下記のコードの場合、横幅が1000px以下になった場合、スタイルを適用させることができます。 css @media screen and (max-width: 1000px) { main { flex: 1; } } ダミーテキストの生成 Visual Studio CodeではEmmet記法が使え、その中のloremを使うとダミーテキストを生成させるものです。 使い方は、Visual Studio Code上でloremと入力するだけで、サジェストに表示されるようになります。 lorem数値と入力すると、数値の数だけダミーテキストを用意してくれます。

はじめに Fullscreen API に対応していない iPhoneで、どうしても全画面で表示させたい時がある。 特に landscape時の上部バーは、普通のサイトではスクロールすると隠れてくれるので邪魔に感じることはない。しかし、パノラマやVR等のコンテンツを表示する場合は邪魔に感じてしまいます、よね。 PWAにしてホーム画面に追加で解決はする、するのかもしれない、、がそうじゃない、んだ。解決はするかもなのだが、わざわざホーム画面に追加したりはしなかったりとか、するよね。 こんな時、個人的に好きなこがいる、krpanoである。 上下にスワイプして上部バーを隠してくれる。 他のコンテンツでもコレをやりたい、んだ。 やってみよう サンプルコード index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <style > * { margin:0; padding:0; } html { height:100%; } body { height:100%; font-family:Lato, sans-serif; color:#fff; line-height:1.8; } #fs { overflow:hidden; position:absolute; z-index:2; display:none; justify-content:center; align-items:center; width:100%; height:calc( 100vh + 1px ); background-color:RGBA(0,0,0,0.8); touch-action:pan-y } #container { overflow:hidden; position:relative; z-index:1; top:0; width:100%; height:100%; background-color:#b1dff7; touch-action:none; } @media ( orientation:landscape ){ #container { height:100vh; } } </style> </head> <body> <div id="container"> <p style="position:absolute;left:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;right:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;right:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;left:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></p> </div> <script> let _ua = navigator.userAgent.toLowerCase(), _container = document.querySelector('#container'); if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){ var _fs = document.createElement('div'); _fs.id = 'fs'; document.body.insertBefore(_fs, _container); _fs.innerHTML = '&#8593;&#8595;&nbsp;SWIPE'; document.addEventListener( 'DOMContentLoaded', fs_display ); window.addEventListener( 'resize', fs_display ); function fs_display() { if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){ _fs.style.display = 'none'; } else if ( screen.width - window.innerHeight > 20 ) { _fs.style.display = 'flex'; } } } else { _container.style.height = '100%'; } </script> </body> </html> 構造 HTML <body> <div id="fs">↑↓&nbsp;SWIPE</div> <div id="container"> // Your contents. </div> </body> CSS html, body { height:100%; } #fs { overflow:hidden; position:absolute; z-index:2; display:none; width:100%; height:calc( 100vh + 1px ); touch-action:pan-y } #container { overflow:hidden; position:relative; z-index:1; width:100%; height:100%; touch-action:none; } @media ( orientation:landscape ){ #container { height:100vh; } } html, body, div#container を height:100%、div#fs を height:calc( 100vh + 1px ) とし、landscape時の div#container を height:100vh とします。 landscape時、コンテンツの高さを 100vh とし div#fs の高さを +1pxすることによって、上下スワイプによる上部バーの移動がよりスムーズに処理されます。 Android等において、下部バーに要素が隠れないよう iPhone Safari 以外は js にて height:100% に戻します。 div#fs, div#container を overflow:hidden とし、div#fsは touch-action:pan-y、div#contanerは touch-action:none とし制限をかけます。 制御 JS let _ua = navigator.userAgent.toLowerCase(), _container = document.querySelector('#container'); if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){ var _fs = document.createElement('div'); _fs.id = 'fs'; document.body.insertBefore(_fs, _container); _fs.innerHTML = '&#8593;&#8595;&nbsp;SWIPE'; document.addEventListener( 'DOMContentLoaded', fs_display ); window.addEventListener( 'resize', fs_display ); function fs_display() { if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){ _fs.style.display = 'none'; } else if ( screen.width - window.innerHeight > 20 ) { _fs.style.display = 'flex'; } } } else { _container.style.height = '100%'; } div#fs は iPhone Safari のみDOM生成します。 landscape時に div#fs を表示し、上下スワイプで上部バーが隠れると同時にウィンドウリサイズイベントがトリガーされ div#fs がdisplay:noneとなります。 まとめ Safari以外は、試行錯誤を繰り返した結果、、未対応となっております。