できる！自作の短縮URLの作り方

短縮URL(Short URL)を作るには、外部の短縮URL生成サービスを使う方法もありますが、自分HPのドメイン名を使って、自作の分かりやすい名前の短縮URLを作る方法がります。
このページでは、HTMLで短いURLを作る２つ方法について説明します。

自作の短縮URL デモ

短縮URL作成手順

短縮URLを置くドメインはこのページと同じドメイン名urbanqee.comを使用します。従い、短縮URLは、http://urbanqee.com/XXXXX となります。

(1) 短縮URLの名前の決定

短縮URLの名前は、英数字の４～５桁が良いでしょう。このページのサンプルでは、SHTURLとします。よって、短縮URLはhttp://urbanqee.com/SHTURL となります。

(2) 短縮URLの名前と同じフォルダを作成

短縮URLの名前と同じフォルダをサーバの public_htmlフォルダの中に作成します。例えば、SHTURLとします。

(3) 本来の長いURLのページへリダイレクト用index.htmlの作成

例では、本来の長いURLを、http://urbanqee.com/webutil/shorturl/test/shorturl-test.htmlとします。
作成したindex.htmlをフォルダ名SHTURLにアプロードします。


<!DOCTYPE html>
<head>
<title>短縮URL リダイレクト</title>
<meta http-equiv="cache-control" content="no-cache" /> <!--ページキャッシュ制御-->
<meta name="robots" content="noindex,nofollow" />      <!--検索エンジンロボットの制御-->
<meta http-equiv="refresh" content="0; url=http://urbanqee.com/webutil/shorturl/test/shorturl-test.html">
</head>
<body>

<!--
必要ならここに、統計データ取得Javascriptなどを挿入します・・・
-->

</body>
</html>

短縮URL作成応用編サンプル（FORM SUBMITでリダイレクト）

リダイレクトのHTML-index.htmlを作り、FORMをSUBMIT(POST)して本来の長いURLのページへリダイレクトしする方法は、本来の長いURLのページがCGIで、短縮URLから起動されたか否かを判定して、統計データとして用いる場合に使用します。
このような場合、本来の長いURLのページのCGIの改造が伴います。
サンプルの短縮URL作成応用編デモの本来の長いURLおよび短縮URLは、つぎのとおりです。クリックでデモを見ることができます。

index.html ソースコード（短縮URLのページ)
shorturl-test.php ソースコード（本来の長いURLのページ)


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Short URL Form Submit-Post</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="robots" content="noindex,nofollow" />
</head>
<body> <!-- formタグのmethodは、postとします。getまたは省略するとURLのパラメータが見えてしまいます -->
<form name=form 
 action="http://urbanqee.com/webutil/shorturl/test/shorturl-test.php" method=post>
<input type=hidden value="yes" name="surl">
</form>

<script>
document.form.submit();
</script>
</body>
</html>


<?php
if(isset($_REQUEST['surl'])){
  $surl = "短縮URLから起動されました！"; 
}
else{
  $surl = "通常の起動です！"; 
}
?>


<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>短縮URLテストページ</title>

<style>
body { 
    max-width: 800px;
    margin: 0 auto;  
    padding: 0px; 
    background: url('../img/BingWallpaper-2017-08-17-2.jpg') repeat center top; /* lady01 BingWallpaper-w1600h1000.jpg FreeGreatPicture.com-584-definition-of-natural-and-urban.jpg*/
    height:100%;
font: 14px 'Lucida Grande', Verdana, sans-serif;
 } 

UL,li{
    list-style-type:decimal; margin:5px
}

DIV.img{
background-image: url(http://urbanqee.com/img/topbg/girl-white-black9.jpg);
background-repeat: no-repeat;
background-position: center bottom

}.
</style>
    </head>
    <body>
 <h2 style="text-align:center;margin-top:5px"><img src="http://urbanqee.com/img/urban-qee1.gif"><br>短縮URL http://urbanqee.com/SHTURL テスト ページ</h2>
<h3 style="text-align:center;color:red"><?php echo $surl  ?></h3>
<DIV class=img style="padding-top:10px;padding-bottom:10px;width:100%;height:500px">

</DIV>
<hr>
<div style="text-align:center;width:100%;">
<a href="http://urbanqee.com" target="_top">
<img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 alt="HOME"><span style="font-size:15px;color:#000000"></span></a>
 <font color=#000000><small><small>最終更新日</small>：2018.9.10</font></small>
</div>


    </body>
</html>

・本来の長いURL	http://urbanqee.com/webutil/shorturl/test/shorturl-test.html

・短縮URL	http://urbanqee.com/SHTURL（REFRESH方式)