リリースまであと一歩！ （ゲームみたいなニュースサービスを作ってみる 13）
前回のふりかえり
前回はゲーム全体を振り返ってみました。
今回は最後の仕上げとして下記の３つの対応をします。
・アイコン、favicon
・meta情報の整理
・google analyticsの設置
・ドメインあれこれ
アイコン、favicon
今回作ったのはアプリではないのでアイコンはそんなに重要ではないのですが、設定しておくとスマホのホーム画面にショートカットをおいた時に独自のアイコンにできるので対応しておきます。
アイコンは1024x1024で描いておくと後々アプリ化する時にも便利なのでこのサイズで描いておきます。
あんまりうまく描けないのでドット絵でごまかしました。
とりあえずこれで行きます。
通常、表示するデバイス毎に別々のサイズの画像ファイルを提供するので１つの画像からいろんなサイズのファイルを用意しなければいけないのですが、このサイトに画像ファイルをアップすると丸っと処理してくれます。
Downloadを押すとファイルのセットがダウンロードできます。
そして上記のようなlinkタグを<head>タグ内に記載しておけばOKです。
meta情報の整理
googleの検索に引っかかりやすくしたり、SNSへの共有時に特定の画像を表示させるためにhtmlの<head>にmeta情報を追加します。
具体的にはこんな感じにしました。
<head>
<!-- (1) 基本情報 -->
<meta charset="UTF-8" />
<title>賢者への道 -RPGみたいなニュースアプリ-</title>
<meta name="apple-mobile-web-app-title" content="賢者への道">
<meta name="description" content="ニュースを読み倒せ！賢者への道" />
<meta name="keywords" content="ニュース,アプリ,ゲーム,RPG" />
<!-- (2) open graph -->
<meta property="og:title" content="賢者への道 -RPGみたいなニュースアプリ-">
<meta property="og:type" content="website">
<meta property="og:description" content="ニュースを読み倒せ！賢者への道">
<meta property="og:url" content="https://road-to-kenja.com">
<meta property="og:image" content="./img/icon/icon.png">
<meta property="og:site_name" content="賢者への道">
<meta property="og:email" content="info@road-to-kenja.com">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="@roadtokenja">
<meta name="twitter:creator" content="@roadtokenja">
<!-- (3) viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- (4) リソース -->
<script src="common/jquery-3.4.0.min.js" type="text/javascript"></script>
<script src="common/common.js" type="text/javascript"></script>
<link href="common/common.css" rel="stylesheet"/>
<!-- (5) アイコン類 -->
<link rel="apple-touch-icon" sizes="57x57" href="img/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icon/favicon-16x16.png">
<link rel="manifest" href="img/icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>(1) 基本情報
このサイトの基本的な説明です。
(2) open grap
SNSでシェアされる時に表示させたい情報を記載します。
基本的にはcontentsの部分を書き換えるだけのテンプレです。
(3) viewport
スマホ表示に対応させるためのおまじない。
(4) リソース
読み込みたい外部ファイル類です。
全部同じファイルに書いてもいいのですが汎用性や可読性を考えて役割毎に別ファイルにするのが基本です。
(5) アイコン類
さっき作ったアイコンファイルへのパスです。
google analyticsの設置
どんなに素敵なサービスが作れても、どれくらいの人が使ってくれているかを測れないとサイトの評価ができません。
そこで登場するのがgoogleが無料で提供してくれるgoogle analyticsです。
詳細な説明は別回でやろうかなと思いますが、このサービスにもしっかりと設置しておきます。
ドメインあれこれ
以前「road-to-kenja.com」というドメインを取得してました。
これをこのサービスに適用する必要があります。
僕は今回ロリポップを使ったのでロリポップの管理画面から設定しました。設定は10分くらいで終わります。
もう1点、SSLの設定をしといたほうがいいのでこれもロリポップから設定します。詳細は割愛しますが、ロリポップだとSSLの設定も超簡単にしかも無料でできます。
それから、ドメイン関連でもう1点、
こちらのサイトを参考にするといいですが、サーバーにリダイレクトの設定を行います。
http://road-to-kenja.com
http://www.road-to-kenja.com
のようにアクセスがあった場合は全部
にリダイレクトするようにします。
こうすることによってSEOに効果があるだけではなくサイトの管理もしやすくなります。
具体的には.htaccessというファイルに下記を記載してサーバー上に設置します。
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]準備完了！
以上で準備は整いました。
それではサービスを公開して反応を見てみましょう。