何を作ったか
URL:https://あ.ml/
上記のスクリーンショットから見てわかる通り、URLを短縮出来る”あ.ml”というサービスを作りました。
このサイトで使っている.mlを含む.tk/.cf/.ml/.ga/.gqの5種類は、Dot tkというFreenomの運営しているドメインレジストラで無料で取得することが出来るのですが、その取得の時にxn--から始まる国際化ドメイン(ex.あ.ml)を取得することが出来、これを使えば顔文字を含んだドメインを取得することも出来ます。
その取得には、登録したい文字列をPunycode変換(例:だふ→xn--g9jzb)して用います。
また、Dot.tkでは、このPunycodeが何文字かでプレミアムドメインかどうかを判定しているので、日本語では1文字や2文字でも、無料で取得することが出来ます。
そして、今回私がこのサイトを作るのにあたり使用したライブラリはShortyです。
これはPHPベースで書かれたライブラリで、簡単にURL短縮サイトを作ることが出来ます。
作り方
1. Shortyを以下のリンクからDLする。もしくはgit cloneする。
2. このままだとindex.phpが404を返すので、inedx.htmlを作ってサイトのフロントエンドは全てそちらに振る。
(index.phpをトップページにする場合は、shorty->run();後のコードがexit();されていて読まれないので注意
このときに環境によっては.htaccessを書き換えてTOPページの優先順位を変更しておく。
参考:http://www.shtml.jp/htaccess/directoryindex.html
DirectoryIndex index.html index.php
こうして、index.phpからjQueryなりなんなりで短縮結果を取得する。
これに使っているjQueryがこちら
$(document).ready(function(){
$('input[type="submit"]').click(function(e){
var link = $('input[name="url"]').val();
$.ajax({ // json読み込み開始
type: 'GET',
url: 'https://xn--l8j.ml/index.php?url='+link+'&format=json',
dataType: 'json'
})
.then(
function(json) { //jsonの読み込みに成功した時
console.log('成功');
//初期化
$("#status").html("");
$("#input").text("");
$("#output").text("");
//出力
$("#status").html("<div class='notification is-success'><p>生成に成功しました。</p></div>");
$("#input").text(link);
var t = json["url"];
t = t.replace("https://xn--l8j.ml","https://あ.ml");
$("#output").text(t);
},
function() { //jsonの読み込みに失敗した時
console.log('失敗');
//初期化
$("#status").html("");
$("#input").text("");
//出力
$("#status").html("<div class='notification is-danger'><p>生成に失敗しました。</p></div>");
$("#input").text(link);
}
);
});
});
こんな感じでjsonとして結果を読み込み、それを表示しています。
特に面白いこともないので、解説は省きます。
と、こんな感じで簡単にURL短縮サイトを作成出来ます。
運用上の注意
兵庫県警っていう日本国の警察組織の一部がjsの無限ループでJCを補導した事件は記憶に新しいですが、その取り調べの中で短縮URLについて”URLを偽装した”と見なされることがあるという貴重な知見を得ました。
そのため、違法サイトに飛ばされるような短縮を利用規約でしっかりと縛っておくのは大事でしょう。
利用規約のひな形として、以下のサイトを参考にするといいと思います。
まとめ
自分のドメインで短縮URLサービスを作るのは難しいことではありません。
短いURLを取得した暁には是非一度このようなサービスを作ってみてはいかがでしょうか。
しかし、ある県警曰くURL偽装に当たるらしいので利用規約をしっかりと固め、警察にいちゃもん付けられることのないようにしておきたいですね。