Login.こんにちは。APIやLINEログイン等のプラットフォームの啓蒙活動を担当している立花です。2017の12日目の記事です。message)の概要と、日頃ハッカソンで最も多くご要望をいただく、タップして詳細を表示できる、ピンがたくさん刺さったマップの表示方法について解説します。APIは、ボットを作るためのAPIです。ボットというと、テキストでしかやり取りしかできず不便という印象をお持ちの方もいらっしゃるかもしれません。APIを使うと、画像やファイル、さらにはHTMLアプリやネイティブアプリでいうところのAlertViewのようなものも手軽に実装でき、ユーザーにストレスなく使ってもらえるボットを簡単に作ることができます。APIの一部で、画像を背景として、その上にタップ可能なエリアとタップ時に実行されるアクションを定義したメッセージです。エリアは目に見えませんが、ユーザーがタップするとその座標からエリアが判断され、定義されたアクションが実行されます。Developersサイトのドキュメント「イメージマップメッセージ」を参照してください。イメージマップメッセージを使うと、スペースが狭くてもタップで操作しやすいUIや、簡単なゲームで遊べるようなボットを作ることができます。ボットの開発では実際に実装しながら使い方を解説します。3.6、フレームワークとしてFlaskを利用しています。SDKはこちらからダウンロードできます。今回作るボットについて今回はイメージマップメッセージを便利に使う一例として、「終電に乗り遅れる」というよくある問題の解決に役立つボットを作成します。このボットは以下の機能を持ちます。ボットを立ち上げると、位置情報を送信するためのボタンが表示される。位置情報を送信すると、最寄り駅の出口のうち、終電まで開いているものを検索できる。検索結果は地図にピンが刺さった状態で表示される。ピンをタップすると駅の詳しい情報が表示され、経路を調べたり、友だちに送信したりできる。このボットには以下の特長があります。スマホでアプリを検索する手間なくアクセスできる(皆さんのスマホ、アプリで溢れていませんか?)。LINEのシンプルで使い慣れたUIから利用するので、迷わず使えて誤操作がない(やめよう歩きスマホ)。最寄り駅情報だけではなく、終電まで開いている最寄りの出口のみが表示される。検索結果は静的画像なので、一瞬で表示される。検索結果はユーザーに表示されるだけではなく、簡単にLINEのグループ等にシェアできる。今回は筆者が通勤に利用している新宿三丁目駅のデータのみが収録されています。Botのアカウントを開設します。Developersサイトのドキュメントを参照してください。APIを利用するには」および「ボットを作成する」(「ボットを友だち追加する」まで)に記載されています。開通確認まず、オウム返しをしてくれるボットを作成しましょう。app.pyを以下のように編集します。スペースの都合上、要点のみを解説し、最後に完成したコードを掲載します。app.run()終わったらボットに呼びかけ、自分が呼びかけたテキストがそのままオウム返しされることを確認します。次に、ユーザーがボットに送信する位置情報を受け取る処理を追記します。ユーザーが位置情報を送りやすいように、位置情報以外のメッセージを送信してきた場合はURLスキームを返すように変更しておきましょう。絵文字(1)は0x10002Aに置き換えてください。送信可能な絵文字についてはこちらを参照してください。line://で始まるURLにはLINEの各種機能が紐付いており、この例の場合は位置情報の選択画面が1タップで開くようになっています。他にも便利なURLスキームがありますので、ぜひ使ってみてください。URLスキームを使う」を参照してください。LocationMessageには緯度経度の他に住所も格納されていますので、本番ではそれを利用してある程度検索範囲を絞る処理が可能です。イメージマップメッセージを送信してみるでは次にイメージマップメッセージを送信してみましょう。背景画像は受け取った位置を中心とする地図となります。ダミーのエリアを1つだけ置いた状態で送信してみます。)イメージマップメッセージを送信する際には画像のURLを指定します。このURLは、ユーザーのアプリに表示されるタイミングで読み込まれます。その際、端末の画面解像度に応じて要求されるサイズが変わるので、パラメーターから要求されたサイズを取得し、リサイズして返すよう実装する必要があります。APIを利用して取得します。keyをご自分のものに置き換えてください。イメージマップメッセージの背景として、要求される最大サイズである1040ピクセルで取得するため、sizeを520、scaleを2としています。タップ可能なエリアを定義しています。左上が(0,0)となります。base_sizeには、幅を1040とした場合の縦のサイズを記入します。地図にピンを刺すでは地図に複数のピンを刺してみましょう。lon_pixel新宿三丁目駅の出口の中から、終電まで空いている出口のみを格納したリストです。ピンがタップされたら、その出口の位置情報をLocationMessageとして返信します。ピンが画像上のどの座標に刺さっているかを取得するため、緯度経度の差をピクセルに変換する必要があります。0.5する必要があります。今回はscaleに2を指定して画像サイズが2倍のものを取得しているため、実際のズーム数から1を減算しています。取得した座標を元に、画像に配置できる出口のみを追加します。Mapはメルカトル図法による投影のため、逆グーデルマン関数を利用し緯度経度をピクセルに変換できます。APIにおける、ズームレベル21の時の赤道半周の値のピクセル値です。Mapで開いたり、経路検索したり、LINEのトークやグループに送信したりできます。完成コードこれで、最低限の機能を持つボットが完成しました。ここまでのコードを掲載します。絵文字(2)は0x100047に置き換えてください。送信可能な絵文字についてはこちらを参照してください。機能自体は実装できました。最後にリッチメニューを作成し、さらに使いやすくしましょう。LINE@マネージャーにアクセスし、作成したボットアカウントの左サイドバーにある「リッチコンテンツ作成」をクリックします。右上の「新規作成」から新しいリッチメニューを作成できます。今回はシンプルに素早く操作できることが肝心なので、ボタンは1個だけにし、初期表示もオン、リンクには「line://nv/location」を指定します。ついでに「アカウント設定」から「アカウントページメニュー」を非表示にしておきます。リッチメニューの設定が終わったらトーク画面を開き直します。画面下部にメニューが表示され、タップすると位置情報の選択画面が開きます。リッチメニューはLINE@マネージャーで設定するだけでなく、メニューを動的に作成したり、切り替えたりできるAPIも用意されています。こちらも用途に合わせてお使いください。まとめいかがでしたか?とても簡単に便利なUIが実現できたと思います。APIには、ユーザーがストレスなくボットとコミュニケートできる機能が数多く備わっています。今年は年末年始のお休みが長めの方も多いと思います。Botは開発だけでなく、公開するのも、友だちにおすすめして使ってもらうのも簡単です。Botで解決してみてください。LINEプラットフォーム関連のTwitterハッシュタグは「#LINE_API」ですので、ボットを作ったらぜひこのタグをつけてツイートしてください。APIリファレンス明日は上村さんによる「類似文字列検索ライブラリResemblaを公開しました」です。v2がリリースされ、外部ブラウザ対応やQRコードリーダー等便利な機能が追加されました。Developers。