🕛 2021.1.29 00:43

誰でも苦労せずに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」をつけると連想配列に変換してくれます。

PHP: json_decode – Manual

ブラウザーを開いて、アドレスバーに「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.css

CSSファイルに次のコードを書いて保存してください。

@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

プロフィール

プログラマー歴20年の管理人がプログラミング、ブロックチェーンなどの話題に書いていきます。>>続く

目次Toggle Table of Content