3分でできるMilkCocoaを使用した短縮URLサイト作成方法

短縮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/に遷移したい場合は下図のよう登録する。

MilkCocoa短縮URLサイトサンプル