サビリピのHTMLヘッダー部について

サビリピソース解析の1回目。サビリピのHTMLヘッダー部について説明していきます。

サビリピの概要、全ソースの記事
サビリピ – YouTube Player APIでWEBアプリケーションを作成しました。

<?php
    //HTML エンティティに変換
    function h($value){
        return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
    }
    //各ソーシャルボタンのタイトル、URLの設定
    $site_name='サビリピ';

    $url=$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
    //以下のクエリパラメータ削除
    $url=str_replace('&play=1','',$url);
    $url=str_replace('&share-btn=1','',$url);
    $url=str_replace('&share=1','',$url);

    $url.=(empty($_GET['url'])?'':'&share=1');
    $full_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://").$url
?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Youtubeに投稿されている曲の開始位置を設定し無限リピートします。大好きな曲の特定のメロディーを流しましょう">
    <!-- 表示領域を端末や ブラウザに合わせ、初期倍率を1に設定 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <!-- honoka css  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.honokak.osaka/honoka/3.3.7/css/bootstrap.min.css">
    <?php if(empty($_GET['title'])): ?>
        <title><?php echo $site_name ?> - Youtube動画で大好きな曲のサビを無限リピートしよう</title>
    <?php else: ?>
        <title><?php echo h($_GET['title']) ?> - <?php echo $site_name ?></title>
    <?php endif; ?>
</head>

1行目の<?phpから17行目の?>までの部分はPHPのコードです。

クロスサイトスクリプティング対策

//HTML エンティティに変換
    function h($value){
        return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
    }

「< >」といったHTML特殊文字を「<>」にエスケープするための関数です。
ユーザーが入力した文字に対して上記の関数を通さずに出力した場合、Javascriptのコードが埋め込まれていた場合、実行されてしまいます。
「<script>」などの文字列は「<script>」にエスケープされます。

ソーシャルボタン用のタイトル、カレントURLの取得

$url=$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
    //各ソーシャルボタンのタイトル、URLの設定
    $site_name='サビリピ';

    //以下のクエリパラメータ削除
    $url=str_replace('&play=1','',$url);
    $url=str_replace('&share-btn=1','',$url);
    $url=str_replace('&share=1','',$url);

    $url.=(empty($_GET['url'])?'':'&share=1');
    $full_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://").$url

2行目：サイトタイトルを設定しています。
4行目：カレントURLを取得しています。

6〜8行目：フォームでサブミットされた際に付加される不要なパラメータを削除しています。

10行目：共有用のURLと判断するために、shareパラメータを付加します。

11行目：プロトコルを設定し、フルURLとしてソーシャルボタン内で使用します。

HTMLヘッダーのマークアップ部分

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Youtubeに投稿されている曲の開始位置を設定し無限リピートします。大好きな曲の特定のメロディーを流しましょう">
    <!-- 表示領域を端末や ブラウザに合わせ、初期倍率を1に設定 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <!-- honoka css  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.honokak.osaka/honoka/3.3.7/css/bootstrap.min.css">
    <?php if(empty($_GET['title'])): ?>
        <title><?php echo $site_name ?> - Youtube動画で大好きな曲のサビを無限リピートしよう</title>
    <?php else: ?>
        <title><?php echo h($_GET['title']) ?> - <?php echo $site_name ?></title>
    <?php endif; ?>
</head>

５行目の「meta descriptionタグ」はGoogleなどの検索エンジンで検索された際にタイトルの下に表示されます。他サイトと差別化し、興味を持ってもらえる様な内容を設定します。タイトルに入れられないキーワードなども意識して設定しました。

１１行目でBootstrapのcssをCDN（Content Delivery Network）サービスで配信されているものを利用しています。

１２行目はBootstrapを使用して作成したサイトの日本語を綺麗に表示してくれるHonokaテーマを使用しています。

Honoka

１３行目から１７行目でタイトルを設定しています。

「title」のクエリパラメーターが設定されている場合は「title」クエリパラメーター＋「サイト名」を表示しています。設定されていない場合は１４行目のサイト名とサブタイトルを表示しています。

タイトルは検索エンジンが最も重視している部分の一つなので、「トリプルリピート（サイト名）」+「Youtube動画連続再生（検索エンジンを意識したキーワード）」にしました。

次回はサブリピソース解析の2回目でコンテンツ部分のbootstrapのナビゲーションについて説明していきます。

クロスサイトスクリプティング対策

ソーシャルボタン用のタイトル、カレントURLの取得

HTMLヘッダーのマークアップ部分

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル