[RUBY] Erstellen Sie mit Rails x LineBot eine App für die Zusammenfassung von technischen Nachrichten im LINEnews-Stil! [Teil 1]
Was ich diesmal machen möchte
Erstellen Sie eine linenews-ähnliche App mit Linebot und Rails
Was ich diesmal gemacht habe
Wenn Sie Nachrichten eingeben, wird eine Liste mit Nachrichtenartikeln gesendet (Eine Funktion wie die Zustellung zu welcher Zeit am Morgen wird beim nächsten Mal implementiert.)
Warum hast du dich dafür entschieden?
Es ist weniger als vier Monate her, seit ich als Ingenieurpraktikant angefangen habe, aber ich wollte sensibler für technische Neuigkeiten sein. Und ich dachte, wenn ich es wie Leinen erhalten könnte, würde ich mir angewöhnen zu lesen, also beschloss ich, es zu machen. Das Bild ist wie eine Morgenzeitung
Diese Implementierungsumgebung
Rails 6.0.3.1
ruby 2.6.1
Verwenden Sie WSL mit Surface Pro 6 Stellen Sie die App selbst auf heroku bereit
Produktionsfluss
1. Registrieren Sie sich bei Line Developpers-Deploy bei Heroku und überprüfen Sie den Betrieb
Dieses Mal ist es kein Vorlesungsartikel darüber, wie man es macht, also werde ich es weglassen. Dieses Mal habe ich mich unter Bezugnahme auf den folgenden Artikel registriert.
2. Schaben
ICH. Einführung
Dieses Mal werden wir die neuen Nachrichten von TechCrunch abkratzen und die Top-10-Artikel anzeigen.
Ein Edelstein namens mechanize wird zum Schaben verwendet. Für die grundlegende Verwendung dieses Edelsteins habe ich auf "Verwendung der Rails-Scraping-Methode Mechanize" verwiesen.
Ⅱ. Tag-Analyse von HTML
Analysieren Sie die Tags mit den Entwicklertools von Chrome, um festzustellen, welche Teile abgekratzt werden müssen.
Als Ergebnis haben wir die Methode implementiert, um den Titel, das Bild und die URL des Nachrichtenartikels wie folgt abzurufen.
def get_tech_crunch_news
title_ary = []
src_ary = []
href_ary = []
agent = Mechanize.new
page = agent.get("https://jp.techcrunch.com/")
news_contents = page.search('div.block-content')
news_contents.search('h2.post-title').each do |title|
title_ary << title.inner_text
href_ary << title.at('a')['href']
end
news_contents.each do |news_content|
src_ary << news_content.at('img')['data-src']
end
return title_ary, src_ary, href_ary
end
Dieses Mal erhalten wir als Gegenmaßnahme gegen Lazy Load des img-Tags das data-src-Attribut anstelle des src-Attributs. Damit ist der Schaberteil abgeschlossen.
3. Erstellen Sie eine Line Flex-Nachricht
Dieses Mal verwenden wir Flexmessage, um lineNews-ähnliche Nachrichten zu übermitteln.
↑ Es ist so ein Typ
Weitere Informationen finden Sie in der offiziellen API.
Diese Flex-Nachricht kann einfach mit den von line bereitgestellten Tools im WEB erstellt werden.
Sie fühlen sich vielleicht ein wenig gestresst in der Operation, aber ich denke, dass Sie sie mit ein wenig CSS-Wissen bedienen können.
Wenn Sie fertig sind, klicken Sie oben rechts auf die Schaltfläche Ansicht als JSON und kopieren Sie Json und fügen Sie es ein. Der JSON lautet diesmal wie folgt.
{
"type": "bubble",
"size": "giga",
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "TechCrunch news",
"size": "xl",
"weight": "bold"
}
]
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "horizontal",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png ",← Hier src
"margin": "none",
"size": "full",
"aspectMode": "cover",
"gravity": "top"
}
],
"position": "relative",
"cornerRadius": "12px"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "WHILL führt das automatische Antriebssystem mit einem Elektrorollstuhl am Flughafen Haneda in das Flugsteig ein",← Titel hier
"size": "md",
"weight": "bold",
"align": "center",
"wrap": true,
"maxLines": 4,
"color": "#ffffff"
}
],
"position": "absolute",
"width": "100%",
"backgroundColor": "#00bfff80",
"offsetBottom": "10px"
}
],
"action": {
"type": "uri",
"label": "action",
"uri": "http://linecorp.com/"← hier href
},
"width": "50%",
"position": "relative"
},
～～～～～～～～～～～～～～～～～～～～～～(Abkürzung)～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
"uri": "http://qiita.com/"
},
"width": "50%",
"position": "relative"
}
]
}
]
}
}
Legen Sie dann einfach die durch Scraping dieser Zeit erfassten Daten an die entsprechende Stelle, und die Nachrichtenverteilungsfunktion ist vorerst abgeschlossen.
Am Ende des ersten Teils
Wenn Sie bisher "news" in linebot eingeben, können Sie 10 neue Artikel von TechCrunch von oben abrufen. Das nächste Mal möchte ich jeden Morgen um 8:00 Uhr neue Nachrichten überbringen können.
Zum Schluss werde ich die Quelle des Controllers angeben.
linebot_controller.rb
class LinebotController < ApplicationController
require 'line/bot'
protect_from_forgery :except => [:callback]
def client
@client ||= Line::Bot::Client.new { |config|
config.channel_secret = ENV["LINE_CHANNEL_SECRET"]
config.channel_token = ENV["LINE_CHANNEL_TOKEN"]
}
end
def callback
body = request.body.read
signature = request.env['HTTP_X_LINE_SIGNATURE']
unless client.validate_signature(body, signature)
head :bad_request
end
events = client.parse_events_from(body)
events.each { |event|
case event
when Line::Bot::Event::Message
case event.type
when Line::Bot::Event::MessageType::Text
if event.message['text'].eql?('Nachrichten')
client.reply_message(event['replyToken'], template)
end
end
end
}
head :ok
end
private
def get_tech_crunch_news
title_ary = []
src_ary = []
href_ary = []
agent = Mechanize.new
page = agent.get("https://jp.techcrunch.com/")
news_contents = page.search('div.block-content')
news_contents.search('h2.post-title').each do |title|
title_ary << title.inner_text
href_ary << title.at('a')['href']
end
news_contents.each do |news_content|
src_ary << news_content.at('img')['data-src']
end
return title_ary, src_ary, href_ary
end
def template
title, src, href = get_tech_crunch_news
{
"type": "flex",
"altText": "this is a flex message",
"contents":{
"type": "bubble",
"size": "giga",
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "TechCrunch news",
"size": "xl",
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
Abkürzung
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
end
Referenz-URL
Die URL, auf die ich während dieser Produktion verwiesen habe, ist unten angefügt.
Verwendung der Rails-Scraping-Methode Mechanize
Recommended Posts