誰でも苦労せずにPHPが使えるよ。第4回 JSONファイルからデータを取得!ちょっと作っただけで印象が変わるCSS！
今回は、前回保存したJSONファイルからデータを読み込み、ブログ記事を表示する画面に出します。CSSで簡単なデザインをして見た目も良くしていきたいです。
前回は、JSONファイルにデータを保存しました。
JSONファイルからデータを読み込む
ブログ記事表示用コードを作ります。ターミナルを開いて、次のコードを打ち込みましょう。<あなたのユーザー>は変更して下さい。
touch /home/<あなたのユーザー>/blog/articles.php作成したarticles.phpを開いて次のコードを打ち込んでみましょう。
<?php
$file = "blog.json";
$json = file_get_contents($file); //①
var_dump($json);
$blog_contents = json_decode($json, true); //②
var_dump($blog_contents);
?>① file_get_contentsでJSONファイルを読み込みます。file_get_contentsは、ファイルやwebサイトのソースを読み込む関数です。
PHP: file_get_contents – Manual
ターミナルを開いて、php -a を入力してインタラクティブモードにして、次のコードを打ってみましょう。Google 日本ブログのHPのソースが簡単にGETできます。試してみましょう！
$html = file_get_contents("https://japan.googleblog.com/");
print_r($html);phpのインタラクティブモードについてこちらをご覧ください。
② json_decodeは、JSONエンコードした文字を受け取りPHPの変数に変換する関数です。JSONファイルから読み込んだデータをPHPの連想配列の形に変換しました。
json_decodeは、オプション「true」をつけると連想配列に変換してくれます。
ブラウザーを開いて、アドレスバーに「localhost:8000/articles.php」入力して実行してみましょう。
string(123) "{"title":"面白い！ﾌﾞﾛｸﾞ作成",
"category":"ニュース",
"comment":"ブログ作成を始めましょう！"}" object(stdClass)#1 (3) {
["title"]=> string(33) "面白い！ﾌﾞﾛｸﾞ作成"
["category"]=> string(12) "ニュース"
["comment"]=> string(39) "ブログ作成を始めましょう！" }JSONファイルから読み込んだデータが表示されました。前者は、json_decode前のJSONエンコードされた文字列です。後者は、json_decode後のPHPの変数に変換された文字列です。
JSONファイルから読み込んだ後、PHPで処理をするので、PHPに適した形に変換する必要がありました。
PHPファイルにHTML文を書く
JSONファイルから読み込んだデータを表示しましょう。PHPの優れたところは、HTML文をPHPファイルの中に書けることです。これがまさにWebページに動きをつけるために開発された言語である所以です。
<?php
$file = "blog.json";
$json = file_get_contents($file);
$blog_contents = json_decode($json, true);
?>
<html>
<haed>
<title>ブログ記事一覧</title>
</head>
<body>
<h1><?php echo $blog_contents['title']; ?></h1>
<span><?php echo $blog_contents['category']; ?></span>
<div><?php echo $blog_contents['comment']; ?></div>
</body>
</html>ブラウザーを開いて、アドレスバーに「localhost:8000/articles.php」入力して実行してみましょう。
ちゃんと表示できましたが、なにか味気がないですね。HTML文を装飾するCSSを追加してみましょう。
CSSファイルでデザインをする
ターミナルを開いて、次のコマンドを打ってください。CSSファイルを作りましょう。
touch /home/<あなたのユーザー>/blog/style.cssCSSファイルに次のコードを書いて保存してください。
@charset "utf-8";
body {
background-color: #F9F6F1;
padding: 2rem;
}
a {
color: #1E75CC;
}
a:hover {
color: #333231;
}
h1 {
color: #333231;
font-size: 26px;
margin-top: 1em;
margin-bottom: 1em;
font-weight: 700;
line-height: 1.75;
padding-left: 1rem;
border-left: 10px solid #1E75CC;
}
span{
border-bottom: 1px solid #1E75CC;
}
div {
margin-top: 1em;
padding: 2rem;
border: solid 2px #1E75CC;
}<?php
$file = "blog.json";
$json = file_get_contents($file);
$blog_contents = json_decode($json, true);
?>
<html>
<haed>
<title>ブログ記事一覧</title>
<link media="all" rel="stylesheet" href="style.css" />
</head>
<body>
<h1><?php echo $blog_contents['title']; ?></h1>
<span><?php echo $blog_contents['category']; ?></span>
<div><?php echo $blog_contents['comment']; ?></div>
</body>
</html>
いかがでしょうか。少しは、印象がよくなったのではないでしょうか。CSSで装飾することによって印象が変わるので、Webサイトデザインは大事です。
今回は以上です。
本格的にPHP学びたいという場合は、スクール受講おすすめします。今回の内容だとはじめてのプログラミングコース
とかです。
まとめ
今回は、JSONファイルからデータを読み込み、ブログ記事表示画面に出しました。
CSSファイルを適用してWebをデザインをしてみました。見た目が変わると印象も変わるので、Webサイトにはデザインが必要です。
次回は、複数の記事投稿を処理します。
最後までお読みいただきありがとうございました！
Photo by Background vector created by pikisuperstar – www.freepik.com