세계 최초! 이색 콜라보레이션! 「러브라이브!」와 「와일드 스피드」의 성지를 가르쳐 주는 LINEbot!

「러브라이브!」사랑! 「와일드 스피드」도 사랑!
그런 욕심을 위해 LINEbot을 만들었습니다. 좋으면 끝까지 봐 주세요♪

작품 배경



성지 순례를 좋아하는 나. 로스앤젤레스에 와이스피의 성지 순례에 가고 싶다고 생각하고 있지만, 코로나에서 여행도 갈 수 없고・・・.

「와일드 스피드」시리즈는, 스핀 오프를 포함해, 지금까지 9 작품 상영되고 있습니다만,
3번째가 되는 「와일드 스피드 X3 TOKYO DRIFT」는, 무려 도쿄가 무대!

도쿄라면 순례할 수 있다! 라고 생각해, 와이스피 성지 순례 bot 도쿄판을 만들기로 했습니다! !

그런데 괜찮아! !
의기양양하게 조사했지만, CG로 만들어져 있거나, 이미 철거되고 있거나와, 성지 정보가 희박···. 울다

이것으로는 bot로서 성립하지 않기 때문에, 좋아하는 「러브라이브!」와 조합해 세계 최초의 콜라보레이션을 실현했습니다.

데모 동영상



완성된 것이 이쪽입니다!
위치 정보를 보내면 가장 가까운 성지를 가르쳐줍니다.

러브라이버가 아닌 분도 괜찮아! 와이스피 III의 성지도 나오기 때문에 전 인류를 사용할 수 있는 LINEbot이야 ☺️☺️☺️ #protoout


와이스피의 성지는 거의 없기 때문에 숨겨진 명령처럼 보입니다. 웃음



만들 때의 포인트



LINEbot을 만드는 방법



언제나 이쪽의 기사를 참고로 하고 있습니다!

#libedc



두 점 사이의 거리를 측정하는 방법



여기가 1번 고전했습니다. . .

무엇부터 손을 잡을 수 있는지 모르고 Qiita에도 질문 기사를 게시했습니다.



▶게시된 질문: #와이스피



그러면, #thefastandfurious 씨가 매우 친절하게 가르쳐 주셔, 곧바로 해결할 수 있었습니다.

정말 고마워요.



Qiita의 회전자는 아니지만, 질문 게시하는 진짜 공부가됩니다.

초보자 엔지니어에게 추천합니다.



완성된 코드가 이쪽.



// 角度をラジアンに変換
function toRad(deg) {
    return deg / 180 * Math.PI;
  }

  // 2点間の大円距離を計算(返り値は km 単位)
  // 参考: http://www.orsj.or.jp/archive2/or60-12/or60_12_701.pdf
  function distance(lat1, lon1, lat2, lon2) {
    lat1 = toRad(lat1);
    lon1 = toRad(lon1);
    lat2 = toRad(lat2);
    lon2 = toRad(lon2);

    return 6370 * Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
  }

  // 与えた緯度経度の地点からもっとも近い場所を返す
  function getNearestLocation(lat, lon) {
    // dataWithDistance は [ [場所1, 指定地点と場所1の距離], [場所2, 指定地点と場所2の距離], ... ]
    let dataWithDistance = data.map(item => [item, distance(lat, lon, item.lat, item.lon)]);

    // 距離がもっとも近い場所を取り出す
    // reduce() の解説: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
    return dataWithDistance.reduce((nearest, current) => current[1] < nearest[1] ? current : nearest)[0] || null;
  }


이제 가장 가까운 명소를 추출할 수 있습니다.



▶참고: 피 c. 라고 r. 코 m / l ぁぅ cQFt



메시지의 가독성



추출된 가장 가까운 명소를 쉽게 볼 수 있도록

설명문·이미지·지도를 메시지로서 돌려줄 수 있도록 했습니다.



August 25, 2020



다른 메시지 유형의 것을 함께 보내는 방법을 처음 알지 못했지만

간단하게 []로 정리하면 잘 갔습니다 ♪



async function handleEvent(event) {
  // 位置情報のみに入力制限
  if (event.type !== 'message' || event.message.type !== 'location') {
    return Promise.resolve(null);
  }
  // 取得した位置情報をログに表示
  console.log(event.message.latitude + ' : ' + event.message.longitude);

  const nearestLocation = getNearestLocation(event.message.latitude, event.message.longitude);

  console.log(nearestLocation);

  return client.replyMessage(event.replyToken,[
    {
      type: 'text',
      text: '【作品】' + nearestLocation.category + '' +nearestLocation.memo,
    }, 
    {
      type:'image',
      originalContentUrl:nearestLocation.image,
      previewImageUrl:nearestLocation.image,
    },
    {
      type: 'location',
      title: nearestLocation.spot,
      address:nearestLocation.address,
      latitude: nearestLocation.lat,
      longitude: nearestLocation.lon,
    }
  ]);
}


개선점



▶ 가장 가까운 것만이 아니고, 반경 ●킬로 이내라든지 있는 모든 스폿을 낼 수 있으면 좋겠다!

▶위치 정보뿐만 아니라 키워드 검색도 가능하게 하고 싶다

▶ 더 자력으로 검색하여 구현할 수 있도록 하고 싶다!



이번에도 여러분 덕분에 최소한의 형태가 되었습니다만, 아직 스킬이 부족해서 정진하고 싶습니다・・・!



결론



아직 미완성된 부분이 있으므로, 완성하면 배포하고, 소스 코드와 QR 코드도 올릴 예정・・・!

성지가 아니고, 좋아하는 가게라든지에 어레인지해 만들면 보다 실용성 높은 것이 된다고 생각하므로,

꼭 여러분도 만들어보세요~♪



(*^^)v 「좋으면 LGTM도 잘 부탁드립니다!」


좋은 웹페이지 즐겨찾기