オリジナル短縮URLを作ってみた

[Life is Tech ! Kanto Advent Calendar 2022](https://qiita.com/advent-calendar/2022/life-is-tech-kanto)の13日目の記事ですを担当します、 webサービスコース メンターのつぼつぼです！
最近、流行りについていこうと、ぼっち・ざ・ろっく！を見始めました。
さて、そんなことは、全く関係なく、短縮URLの話です。

## はじめに

一度は目にしたことがあるだろう、YouTubeの[youtu.be](https://youtube.com)やGoogleMapの[goo.gl](https://www.google.co.jp/maps/),Abemaの[abe.ma](https://abema.tv/)などの短縮URL。 
メールやtwitterなど文字数が限られているところではよく見かけるかもしれません。
<img width="400px" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/60c3eb3a-4813-d417-0a02-7afa8b09527a.png">
突然ですが、こんな時ありませんか？？

この場にいる人たち全員に、この記事のURL共有したいけど、エアドロできない人もいるし。。。

そんな時、短縮URLサービスを使ったことがある人もいるかもしれません。

特に、bitlyの短縮URL [bit.ly](https://bitly.com/)は、有名かも！？

 **しかし！bit.lyなどの短縮URLサービスで作るURLは、見た目おしゃれじゃない!!**
 **せっかくなら、オレは、もっと、オシャレな短縮リンクを作りたいんだ!!** 

ということで、今回は、 **short.io** という短縮URL作成サービスを使って、自分の名前が入ったオリジナル短縮URLを作る方法を紹介していこうと思います！

↓完成目標の短縮URL(このQiita記事ページ）
<a href="https://qiita.com/Tsubo-Tsubo/items/f9330a6a656465407066" target="_blank" rel="noopener noreferrer">tsub.net/advent-day13</a>

https://tsub.net/advent-day13

## 短縮URLの活用方法
オリジナルを作る前に、どういう時に使えるのか、活用方法の一例を紹介。

→QRコード読み取りとは違い、大勢いる会場でも口頭で伝えるだけで、目的のページに誘導できる。
↓ある高校でのワークショップ後、感想をフォームで答えてもらったときのスライド
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/12cef0e0-91ea-e467-df88-b8a4fa26dbc8.png"> 

→短縮URLの作成後、遷移する先のサイトを変更することができる。
期限までに提出しないといけないリンクがある時、とりあえず短縮URLを提出しておいて、後で何事もなかったかのように遷移先を変えることができます。大学生の見方かもしれません。

→誕生日パーティーの時、粋な場所の伝え方ができる。
いつの時代も、ハチ公前集合は変わらない。
<img width="500px "src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/3357b83b-9881-2467-b477-9c03fbf22dec.png">



## 短縮リンクのしくみ
![PC (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/5da7de6a-cf88-1913-e66b-a9ce354aaf7e.jpeg)
## オリジナル短縮リンクを作ろう

!! **以下、自分のドメインを持っている前提で進めています** !!
持っていない方は、ドメインを取得できるサービスで、無料もしくは安価で取得できるので、下記事を参考に、取得してみてください！
ちなみに、僕のおすすめは、GMOがやってる、[ムームードメイン](https://muumuu-domain.com/)です。ドメインの種類が多く、UIがわかりやすいです。
[かんたん！ムームードメインでのドメイン取得方法をやさしく解説](
https://blog-bootcamp.jp/start/muumuudomain-registration/#:~:text=%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF-,%E3%83%A0%E3%83%BC%E3%83%A0%E3%83%BC%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%8F%96%E5%BE%97%E6%89%8B%E9%A0%86,-%E3%81%93%E3%81%93%E3%81%8B%E3%82%89%E3%81%AF)
↑ただし、サーバー契約はなし。デフォルトでネームサーバー（DNS）がロリポップになっているところをムームーDNSに変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/82ea37e3-9c04-40bc-61c0-a1da4a4aadc5.png)


### short.ioに自分のドメインを追加！ ###
 [short.io](https://short.io/ja) にアクセスして、メールアドレスを入力すると以下の選択画面が出てきます。右側を選択。　
実はshort.ioでもドメイン購入ができるのできるのですが、ドメイン種類が少ないのとアメリカ＄での購入で、高価なので今回は触れません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/a4637900-40d9-ea68-a633-e6a0afa66a6f.png)

自分の持っているドメインを入力！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/4d0d2662-fd55-e72a-6fef-9c4b6bfa79be.png)

### DNS設定 ###
ドメイン追加を押すと、以下のようなDNS設定のアナウンスが出てくると思います。
このステップ順にやっていけば問題ないです。以下に、完成画像を載せておきます。
``` 
これらの手順では、SHORT.IOでショートリンクを作成するためのドメインtsub.netの設定方法を説明します。
設定後、ドメインはすべてのHTTPおよびHTTPSリクエストをSHORT.IOサーバーに転送するため、ショートリンクが機能することになります。

ステップ1：ドメインレジストラにアクセスし、サインインしてからドメインの「DNS管理」画面に移動します。
ステップ2：DNS管理画面では、A、AAAA、CNAMEタイプの既存のレコードをすべて見つけて削除する必要があります。
ステップ 3: 名前「@」、値52.21.33.16の新しいタイプAのレコードを作成し、設定を保存します。
ステップ 4: 値 52.2.56.64 でステップ #3 を繰り返します

そして 2つの新規レコードを見ることができます:
@   A   52.21.33.16
@   A   52.2.56.64

設定完了！あとはサーバーの更新を待ちます。1～2時間かかる場合がありますが、完了したらメールでお知らせします。
```

ムームードメインに戻り、ムームーDNSから処理変更を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/6e14cd5f-791e-ea69-4349-88937f054cd0.png)

設定完了画面。セットアップ情報変更ボタンを押して変更完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/e6653045-b364-660f-3a29-795cfee8b9eb.png)

数分待っていると、メールでセットアップ完了通知が来ます。

### Let's Try! ###
short.ioに戻り、上部のバーに短縮したいURLを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/7d24b31a-598a-de8a-5bc9-ffe9385fa825.png)
勝手に、ランダムのスラッグがついたリンクが作成されるので、短縮URLとしてわかりやすい文字列に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/8e452fb1-8452-de99-0a18-2da590bf1b24.png)

　**短縮URL完成！！🥳　お疲れ様です！！🎉**


## えんでぃんぐ

ここまで読んでくださってありがとうございます！
短縮URLの活用方法は無限大！


さて、明日は、みみーの早稲田祭のwebサイトについて！
もしかして、みみーが作ったのかな！？
お楽しみに〜！！