[RUBY] Créez une application de résumé de nouvelles techniques de style LINEnews avec Rails x LineBot! [Partie 1]
Ce que je veux faire cette fois
Créez une application semblable à Linews avec linebot et Rails
Ce que j'ai fait cette fois
Lorsque vous saisissez des actualités, une liste d'articles d'actualité sera envoyée (Une fonction comme la livraison à quelle heure du matin sera implémentée la prochaine fois.)
Pourquoi as-tu décidé de le faire
Cela fait moins de quatre mois que j'ai commencé à travailler en tant que stagiaire ingénieur, mais je voulais être plus sensible à l'actualité technologique. Et j'ai pensé que si je pouvais le recevoir comme du linge de maison, je prendrais l'habitude de lire, alors j'ai décidé de le faire. L'image est comme un journal du matin
Cet environnement d'implémentation
Rails 6.0.3.1
ruby 2.6.1
Utiliser WSL avec Surface Pro 6 Déployez l'application elle-même sur heroku
Flux de production
1. Inscrivez-vous avec Line Developpers-Deploy sur heroku et vérifiez le fonctionnement
Cette fois, ce n'est pas un article de conférence sur la façon de le faire, donc je vais l'omettre. Cette fois, je me suis inscrit en me référant à l'article suivant.
2. Grattage
JE. introduction
Cette fois, nous allons gratter les nouvelles nouvelles de TechCrunch et afficher les 10 meilleurs éléments.
Une gemme appelée mécaniser est utilisée pour le grattage. Pour l'utilisation de base de ce joyau, j'ai fait référence à "Comment utiliser la méthode de grattage Rails Mechanize".
Ⅱ. Analyse des balises de HTML
Analysez les balises avec les outils de développement de Chrome pour déterminer les pièces à gratter.
En conséquence, nous avons implémenté la méthode pour obtenir le titre, l'image et l'URL de l'article d'actualité comme suit.
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
Cette fois, comme contre-mesure contre le Lazy Load de la balise img, nous obtiendrons l'attribut data-src au lieu de l'attribut src. Ceci termine la partie raclage.
3. Créez un message Flex en ligne
Cette fois, nous utiliserons quelque chose appelé flexmessage pour délivrer des messages de type lineNews.
↑ C'est un tel gars
Consultez l'API officielle pour plus de détails.
Ce message flexible peut être facilement créé à l'aide des outils du WEB fournis par ligne.
Vous pouvez ressentir un peu de stress dans l'opération, mais je pense que vous pouvez l'exploiter avec un peu de connaissances en CSS.
Lorsque vous avez terminé, cliquez sur le bouton Afficher en tant que json en haut à droite et copiez et collez Json. Le JSON cette fois est le suivant.
{
"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 ",← Ici src
"margin": "none",
"size": "full",
"aspectMode": "cover",
"gravity": "top"
}
],
"position": "relative",
"cornerRadius": "12px"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "WHILL introduit un système de conduite automatique à la porte d'embarquement en fauteuil roulant électrique à l'aéroport de Haneda",← Titre ici
"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/"← ici href
},
"width": "50%",
"position": "relative"
},
～～～～～～～～～～～～～～～～～～～～～～(Abréviation)～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
"uri": "http://qiita.com/"
},
"width": "50%",
"position": "relative"
}
]
}
]
}
}
Ensuite, il suffit de mettre les données acquises en grattant cette fois à l'endroit correspondant et la fonction de distribution de nouvelles est pour l'instant terminée.
À la fin de la première partie
Jusqu'à présent, si vous tapez "news" dans linebot, vous pouvez extraire 10 nouveaux articles de TechCrunch du haut. La prochaine fois, j'aimerais pouvoir livrer de nouvelles nouvelles tous les matins à 8h00.
Enfin, je vais mettre la source du contrôleur.
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?('nouvelles')
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",
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
Abréviation
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
end
URL de référence
L'URL à laquelle j'ai fait référence lors de cette production est jointe ci-dessous.
Comment utiliser la méthode de grattage Rails Mechanize
Recommended Posts