htaccessを使った動的配信

webサイト制作




felica29.starfree.jp

「.htaccessファイル」を使った動的配信

動的な配信  |  検索セントラル  |  Google Developers



スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。

 

今回の自動振り分けは

  1. ウェブサーバが「Apache」
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。

デモページ

felica29.starfree.jp

.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /cat/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

 

まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。

<IfModule mod_rewrite.c>

</IfModule>


次にmod_rewriteモジュールを起動させます。

RewriteEngine On

 

次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。


RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /cat/sp/ [R,L]

RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。



今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、

スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。




自分のドメインでトップページを表示させたい場合（http://www.example.com）
4行目を以下のように直し、トップページ（PC用のindex.html）と同じ階層にアップロードする。

RewriteRule ^$ /sp/ [R,L]

スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない



スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。

<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>

最後に必ずモバイルフレンドリーテストを受けて合格するか確認しましょう。

モバイル フレンドリー テスト - Google Search Console

 

note.com

トンマナを合わせたバナー作り

webデザイン Photoshop

トンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要です。


仕事では既存のコーポレートサイトとは別に定期的にキャンペーンサイトやランディングページ、バナーなどを制作する事がよくあります。その場合、既存のコーポレートサイトとある程度デザインを合わせる事で、その「企業っぽさ」や「らしさ」などを判りやすくユーザーに伝える事が出来ます。

www.concentinc.jp

www.slideshare.net

今回はクライアントワークで作成したサイトのトンマナに合わせたバナーを作ってみましょう。

helpx.adobe.com

blog.adobe.com

liginc.co.jp



felicakunren.com

上記のランディングページのトンマナに合わせて作ったバナー

f:id:CHOCOtan:20220405110427j:plain



note.com



 

動きのあるバナー

Photoshop




バナーのサイズを決める

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250（Yahoo!/Google）PC/スマホ　※推奨

728×90（Yahoo!/Google）PC　※推奨

160×600（Yahoo!/Google）PC　※推奨

336×280（Google）PC　※推奨

320×50（Yahoo!/Google）スマホ（ビットマップ形式の場合２倍で作成）　※推奨

320×100（Yahoo!/Google）スマホ（ビットマップ形式の場合２倍で作成）　※推奨


制作見本

f:id:CHOCOtan:20220403182244g:plain

Photoshopのアニメーション機能を使う事で、比較的簡単に動きのあるバナーが作れてしまいます。
複数のフレームを順番に表示することで、画像が動いているように見せています。
必要なフレームをレイヤー別に作り、レイヤーの表示/非表示を切り替えて表示させるものを替えていきます。

f:id:CHOCOtan:20220403182322j:plain

テキストレイヤーは全フレームで表示させておきたいので、常に表示の状態にしておきましょう。

www.nike.com

 

 

動画を使ったバナー

動画ファイルを読み込んで、GIFアニメバナーをつくります。

１、Photoshopで動画を読み込む。
［ファイル］メニュー→［読み込み］→［ビデオフレームからレイヤー］を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。
こうする事で動画をレイヤーに読み込ませる事が出来、写真を補正するようにトーンカーブや色補正、変形処理などをかけることができます。

 

f:id:CHOCOtan:20220403182436p:plain

ただ、photoshopのバージョン（CS5）によっては32bit版でないと出来ないので注意が必要です。

32bitと64bitの切り替え方 for Win - Photoshopの情報集

 

32bitと64bitの切り替え方 for Mac - Photoshopの情報集

 

2、［ビデオをレイヤーに読み込み］をクリックするとダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。［頻度制限］を調整することで、GIFアニメバナーの容量を軽量化することができます。動画の長さは長くても10～15秒程度にし、［頻度制限］は5～10フレームおきに設定しないと、ものすごい数のレイヤーが出来てしまうので、注意が必要。だいたい30～50レイヤーくらいに抑えると良いと思います。

f:id:CHOCOtan:20220403182513p:plain

3、タイムラインにフレームを置く
あとはgifアニメと同じ要領でフレームを置いていき、必要なテキストレイヤーを作り、gif形式で保存します。

f:id:CHOCOtan:20220403182551p:plain

f:id:CHOCOtan:20220403182617g:plain

 

 

便利な素材

ferret-plus.com

ferret-plus.com

wordpressテンプレートタグを使う

WordPress

wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタグを選べるようになりましょう。

主なwordpressテンプレートタグ

管理画面「一般設定」で設定したサイトのタイトルを出力
<?php bloginfo( 'name' ); ?>
管理画面「一般設定」で設定したサイトのキャッチフレーズを出力
<?php bloginfo( 'description' ); ?>
現在のサイトのホームURLを出力
<?php echo esc_url( home_url() ); ?>
エスケープ処理

WordPress のテーマで文字列を echo や print などを使って出力する際は、それらを適切にエスケープ処理する必要があります。PHP には、htmlspecialchars() 関数などのエスケープ処理用の関数がありますが、WordPress にも文字列を適切にエスケープしたり、HTML タグや URL を処理してくれる関数が用意されています。変数や関数などの値や文字列を出力する場合は、用途によってエスケープやサニタイズの方法を適切に選択してセキュリティ上のリスクを回避する必要があります。


有効化テーマのディレクトリのURI を取得し、表示
<?php echo get_template_directory_uri(); ?>
有効化テーマのスタイルシートのURI を取得し、表示
<?php echo get_stylesheet_uri(); ?>

投稿関連

現在の投稿のタイトルを表示

<?php the_title(); ?>


現在の投稿の本文を出力

<?php the_content(); ?>


現在の記事が属するカテゴリーへのリンクを表示できます
※必ずループの中で使う必要があります

<?php the_category(); ?>


投稿の公開時刻を取得、表示

<?php echo get_the_date(); ?>

 

投稿のパーマリンク の URL を表示します。
※必ずループの中で使う必要があります

<?php the_permalink(); ?>

more-field.co.jp

モバイル用のバナーの作成

Photoshop



最近ではモバイル用のバナーのニーズもとても増えてきました。


モバイルバナー広告のサイズ

代表的なサイズ　320x50、320x100


モバイル用のバナーはPC用に比べ、サイズが小さいのでテキストや画像の選択が非常に難しくなります。
さらにモバイル用であれば高解像度ディスプレイで閲覧される事が前提なので、2倍のサイズで作成します。


最近はデバイスの画面が大きくなっている傾向があるので300x250と同比率ながら一回り大きい「336×280」に徐々にシフトしているので、このサイズも意識しておいて下さい。同比率なので300x250のデータをリサイズするだけです。

f:id:CHOCOtan:20220403181822p:plain

 

3月29日作業分（カラムレイアウト）

index..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>Column-layout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<h1>Column-layout</h1>
<div class="col-wrapper">

<div class="col-box">
<a href="img/01.jpg" data-lightbox="photo"><img src="img/01.jpg" alt=""></a>
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/02.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->


<div class="col-box">
<img src="img/03.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/04.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/05.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/06.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/07.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
<div class="col-box">
<img src="img/08.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/09.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->


<div class="col-box">
<img src="img/10.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/11.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
<div class="col-box">
<img src="img/12.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/13.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/14.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/15.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->

<div class="col-box">
<img src="img/16.jpg" alt="">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto, commodi.</p>
</div><!-- /.col-box -->
</div><!-- /.col-wrapper -->

<div class="button02">
  <a href="#" id="more" ></a>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
$('#more').on('click',function(){
$('.col-box:nth-of-type(n+5)').fadeToggle(200);
$(this).toggleClass('close');
return false;
});
});
</script>
</body>
</html>

 

style.css

@use "reset";
@use "lightbox";

//ブレイクポイントの設定
$l-point:959px;
$m-point:765px;
$s-point:420px;
//mixinの設定
@mixin size-l {
  @media (max-width:$l-point){
    @content;
  }
}
@mixin size-m {
  @media (max-width:$m-point){
    @content;
  }
}
@mixin size-s {
  @media (max-width:$s-point){
    @content;
  }
}


body{
font-family: 'Dosis', sans-serif;
background-color: #adc4da;
}
h1{
text-align: center;
padding: 30px 0;
font-size: 54px;
}
.col-wrapper{
width: 90%;
margin: 0 auto 50px;
columns: 4;
@include size-l{
columns: 3;
}
@include size-m{
columns: 2;
}
@include size-s{
columns: 1;
}
column-gap: 20px;
}
.col-box{
break-inside: avoid;
background-color: #FFF;
padding: 10px;
margin-bottom: 20px;
@include size-s{
&:nth-of-type(n+5){
display: none;
}
}

h2{
margin: 10px 0 2px;
}
p{
font-size: 20px;
}
}

.button02{
display: none;
@include size-s{
display: block;
}
}
.button02 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 50px;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  border-radius: 50vh;
}
.button02 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button02 a:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}
#more::before{
content: "もっと見る";
}
#more.close::before{
content: "閉じる";
}

インターネット広告について

バナー作成

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。

dentsu-ho.com

dentsu-ho.com

上の記事にあるように2020年のインターネット広告費はマスメディア4媒体（テレビ、ラジオ、新聞、雑誌）とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。

インターネット広告の種類

ディスプレイ広告（ターゲット広告）

ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。

リスティング広告

リスティング広告とは、ユーザーがGoogleやYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。

純広告・バナー広告

純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。

動画広告

動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。

digitalidentity.co.jp

www.uniad.co.jp