Go&Heroku를 사용하지 않아도 GitHub Pages로 쉽게 실현 가능합니다.
【LINE/LIFF 입문】LIFF로 LINE 공식 어카운트(구LINE@)상에 예약 폼을 작성한다(GitHub Pages 사용)

소개

이런 느낌을 만듭니다

사용 기술

LIFF (LINE Front-end Framework)

LINE에서 제공하는 웹 앱 플랫폼

공식 HP는 이쪽

Go

Go를 공부하고 싶었기 때문에 Go로 만들었지만 백엔드는 무엇이든 좋습니다.

JavaScript, jQuery

Heroku

Git

소스 코드는 여기(GitHub)

LINE 공식 계정 생성

여기 공식 HP 를 참고로 작성합니다.

리치 메뉴 설정

리치 메뉴용 이미지 만들기

채팅 화면 아래에 표시되는 배너를 리치 메뉴라고 합니다.
먼저 리치 메뉴에 설정할 이미지를 Canova 을 사용하여 만듭니다.
Canova는 소재가 풍부하고 무료 플랜에서도 좋은 느낌의 이미지를 만들 수 있으므로 편리합니다.

리치 메뉴 설정

LINE Offical Account Manager에서 좋은 느낌으로 설정합니다. (적당)
PC에서만 설정할 수 있고, 스마트폰에서는 설정할 수 없는 것 같습니다.
링크는 일단 적당한 링크를 설정해 둡니다.
LIFF 앱을 만든 후 URL을 설정합니다.

LIFF 앱 만들기

채널 생성

여기 공식 HP 을 참고하여 LINE Developers에서 채널을 만듭니다.
LIFF를 사용하기 위해 기본 정보를 등록합니다.

코딩

디렉토리 구성

임의의 디렉토리에 작업용 디렉토리를 다음의 구성으로 작성합니다.
Go 이외에서 시도하는 경우 index.html 와 static/ 가 있으면 작동한다고 생각합니다.

reservation/
|- static/
   |- liff.js
   |- index.js
|- vendor/
   |- vendor.json　// Heroku上でGoを動かすために必要
|- index.html
|- main.go

소스 코드는 시작 부분의 GitHub를 참조하십시오.

하마리 포인트

PORT의 지정은 port := os.Getenv("PORT") 와 같이 환경 변수로부터 취득합니다.
Heroku에서 실행할 때는 Heroku 지정의 PORT 번호로 Listen 할 필요가 있기 때문입니다.

main.go

func main() {
    port := os.Getenv("PORT")
    fmt.Printf("Starting server at Port %s", port)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static/"))))
    http.HandleFunc("/", handler)
    http.ListenAndServe(fmt.Sprintf(":%s", port), nil)
}

Heroku에 배포

Heroku에 대한 설명은 생략합니다.
Heroku에서 새 앱을 만든 후 다음 명령을 실행합니다.
Heroku의 Deploy 화면에 표시된 명령을 그대로 둡니다.

$ heroku login
$ cd reservation/
$ git init
$ heroku git:remote -a (自分のApp名)
$ git add .
$ git commit -am "make it better"
$ git push heroku master

배포 후 Heroku URL에 액세스하여 양식이 표시되면 성공합니다.

LIFF 앱을 채널에 추가

여기 공식 HP 을 참고하여 LIFF 앱이 LINE 또는 브라우저에서 작동할 수 있도록 LIFF 앱을 채널에 추가합니다.
엔드포인트 URL에 Heroku URL을 설정합니다.

동작 확인

LINE Offical Account Manager의 리치 메뉴 링크를 LIFF 설정 화면에 표시되는 LIFF URL을로 변경합니다.


LINE 공식 계정을 내 LINE 친구에게 추가하여 사용해 보세요.
서두의 데모 이미지처럼 되면 성공입니다.

덤

로컬 서버에서 동작 확인을 하려면 ngrok가 매우 편리합니다.
참고 링크를 붙여 둡니다.

참고

LIFF를 이용하여 웹과 LINE Bot을 연계

리치 메뉴 활용법 │ 작성에서 설정 방법까지 해설

관계없지만 공식인데 http를 포함하는 것 같다

GO 언어로 "Hello World!"를 Heroku에 배포합니다.

[jQuery UI] Datepicker 사용 및 옵션

ngrok 사용 방법