LoginSignup
7
15

More than 5 years have passed since last update.

lineのurlスキームで簡単な注文システムを作ってみた

Last updated at Posted at 2016-01-24

はじめに

※LINEを商用利用する場合はLINE@を使う必要があります。

どーも、初投稿のpio2です。
python大好きな終末プログラマ(自称)です。

知り合いが持ち帰りの飲食店をオープンしたのでbootstrapのテンプレートをいじってwebサイトを作ってあげたのですが、その際に表題について思いついたので作ってみました。
まだサイトは公開してないのですが、どんな感じで作ったかを書きたいと思います。

初心者ですのでご意見あればどしどしください(^o^)/

LINEのURLスキーム

urlスキームを使用するとスマートフォンのブラウザからLINEを起動し、メッセージを送ることができます。

詳細は
https://media.line.me/howto/ja/

テキストを送る場合はCONTENT TYPEをtextにし、CONTENT KEYに送りたいテキストの内容にする。
例えば、hello world!なら 
line://msg/text/hello world!
とする。

CONTENT KEYに注文内容がある程度簡単に入力できるようになれば、簡易な注文システムができるんじゃないかと思ったのが作ったきっかけです。

htmlのform selectとjavascriptのlocal.hrefで簡単注文システムを作る

流れはこんな感じです。

数量を選択する

それをurlのCONTENT KEYに渡す

local.hrefでそのurlに飛ぶ

LINEが起動し、メッセージの送信先(お店)を選択する

メッセージが送信される

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script>
        function line_message(){
                    var order_sea_food = document.order.sea_food.value;
                    var line_url = "line://msg/text/" + order_sea_food;
                    location.href = line_url;
                    }
    </script>
</head>
<body>シーフード 
  <form name="order">
    <select name="sea_food">
      <option value="">0</option>
      <option value="シーフード1枚">1</option>
      <option value="シーフード2枚">2</option>
      <option value="シーフード3枚">3</option>
    </select>
    <br>
    <input type="button" value="LINEで送る" onclick="line_message() ">
  </form>
</body>
<html>


実際はもう少し商品の種類や選択数量が多く、自由記載のコメントや来店時間があったり、入力がない場合や来店時間がメッセージの投稿時間より前でないかのロジカルチェックを入れました。
LINEを起動してからはメッセージ内容が投稿後にしか確認できないためconfirmを使いブラウザでメッセージ内容を確認した後にLINEが起動するようにしました。

あと、input type="submit"とすると動かなかった。
ネットで調べるとbuttonとsubmitは一緒って書いてるのに。なぜだろう?

作ってみて感じたこと

長所

  • サーバーサイドを一切準備せず注文システムが作れる
  • データの受け渡しがスマホ内のためセキュリティーとかあんまり気にしなくてもいい
  • LINEは多くの人のスマホに入っているため使うことに抵抗が少ない

短所

  • LINE@は無料で月に1000通しか送れない(お客からメッセージが送られ、店側が返信して注文完了というシステムにしたかったので1000件までしか注文が受けられない)
  • ロジカルチェックのアラートやconfirmがあるため、safariに「このサイトは頻繁に通知を送ってくる」と怒られる
  • 普通に入力されて送られてきたメッセージと区別できない
  • いたずらで送られてくると対応できない(アカウントが電話番号と紐づいてるので少ないとは思う)
  • 知り合いが機械オンチのためお蔵入になる可能性大

最初は購入金額が計算できるようにしようと思ったのですが、通常入力のメッセージと区別ができないため金額の改竄がおこなわれトラブルになる可能性があると思いやめました。

おわりに

スマホで何かする=スマホアプリって風潮な気がするが、機能の少ないアプリや使用頻度の低いアプリをスマホにDLしたくないのは私だけ?
この位の機能ならwebで十分だし、みんな大好きLINEに乗っかってもいいんじゃないでしょうか。

あと、option valueが数違いでいっぱいある場合みなさんどうしてるんですか?
javascriptのdocument.writeの中に書いてループして使ってるんですか?
私は最初コピペで数字だけ変えてたんですが、3行目でバカらしくなってpythonでprintをループさせて一気につくってコピペしました。

ご意見おまちしてまーす。

7
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
15