短縮URLサービスについて
URL短縮サービスとは長い文字列のURLを短く変換するサービス。
goo.glやbit.lyなどが有名。
短縮URLサービスを使用するデメリット
短縮URLサービスは便利だがURLの語尾に+記号を付けると、アクセス数などが第三者などに知られてしまうため、ビジネスで使用するのは好ましくない。
自社のサイト内に短縮URL生成ページを作成
自社のサイト内に短縮URL生成ページを作成すれば第三者などに短縮URLのアクセス数などを知られてしまう心配はなくなる。
短縮URL生成ページを作成すると作るのに時間がかかると思う人が多いと思うが、MilkCocoaを使用すれば3分くらいで作成できる。
MilkCocoaとは
Milkcocoaは、IoTデバイス・スマートフォン・PC間で簡単にリアルタイムなデータのやり取りが出来るようになるクラウドプラットフォームです。
以上のように公式サイトに書かれている。
簡単に言うとJavaScriptだけで利用できる簡易データベース(MySQL)のようなものだ。
Milkcocoaの公式サイトでアカウントを作成するとデータを保存したりする場所を使用できるようになる。(データストア)
コーディング手順
まず短縮URL、短縮URLの遷移先URL、短縮URL登録ボタン、結果を表示する場所をHTMLで書く。
<table>
<tr>
<td>iwb.jp/b?</td>
<td><input type="text" value="" id="val"></td>
</tr>
<tr>
<td>遷移先URL</td>
<td><input type="url" value="" id="url"></td>
</tr>
</table>
<p>
<button id="b">短縮URL登録</button>
</p>
<p id="r"></p>
次にデータのやり取りをするJavaScriptを記述する。
まず最初にMilkcocoaを使えるようにmilkcocoa.jsとnew MilkCocoa('ID')を読み込む。
IDの部分はアカウントによって異なる。
// <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
const milkcocoa = new MilkCocoa('vuejcx8418w.mlkcca.com');
次にURLの?以降のパラメーターの取得やMilkcocoaのデータを取得するコードを追加する。
const ds = milkcocoa.dataStore('urls');
const b = document.getElementById('b');
const c = document.getElementById('c');
const r = document.getElementById('r');
const p = location.search.substring(1);
let datas;
milkcocoa.dataStore('urls').stream().next((err, data) => {
datas = data.filter(x => x.value.val);
datas.forEach(x => {
if (x.value.val === p) {
location.href = x.value.url
}
});
});
次に登録ボタンを押したらMilkcocoaにデータを登録する処理と追加する。
// 登録ボタンを押したら登録
b.addEventListener('click', () => {
const val = document.getElementById('val').value;
const url = document.getElementById('url').value;
if (!val || !url) return;
// 登録済みの短縮URLは処理を中断
if (datas.find(x => x.value.val === val)) {
r.textContent = 'この短縮URLは登録済みです。';
return;
}
// 短縮URLを登録
ds.push({val: val, url: url});
r.innerHTML =
`<pre>短縮URLを登録しました。
iwb.jp/b?${val}
↓
${url}</pre>`;
// 最新のデータに更新
milkcocoa.dataStore('urls').stream().next((err, data) => {
datas = data.filter(x => x.value.val);
});
});
以上の手順で簡単にMilkCocoaを使用した短縮URLサイトを作成することができる。
例えばhttps://iwb.jp/b?svgからhttps://iwb.jp/svg-file-how-to-use/に遷移したい場合は下図のよう登録する。
