取得に失敗しました

2019年度 入部

GitHub

小石こは

プロセカにはまりました

自己紹介

みんなCö shu Nieを聞こう!
推しバンドです.

自己紹介画像

取得に失敗しました

この人が書いた記事

プログラミング Polygon
プログラミング

Twitterのタイムライン上の画像だけを表示したい!

こんにちは.小石こはです. 概要twitterのタイムライン上の画像をギャラリーのように表示させるまでの流れを紹介します. 使用技術Python3.9.5tweepyStreamlitTwitter API今回作成したもの以下の画像のように,タイムライン上の最新の画像を何件か取得して,ローカルWebサイト上に表示させるものを作成しました. ↓Twitterのタイムラインの様子 ↓今回作成した,ローカルwebサイト上にタイムライン上の画像を表示させたもの Twitter APIの利用申請,tweepyの導入Twitterからデータを取得したいので,Twitter APIの利用申請をします. Twitter API→ https://developer.twitter.com/en/docs/twitter-api 次に,Twitter APIを便利に使用するためのPythonのライブラリであるtweepyを以下のコマンドで導入します.pip install tweepy今回はローカルWebサイト上でTwitterのタイムライン上の画像をギャラリーのように表示させることを最終目標とします.他人に公開することはなく自分のみが閲覧するため,フロント実装が面倒になり,Streamlit(フロントエンドアプリケーションを作成できるPythonのフレームワーク)を使用することにしました. Streamlit→ https://streamlit.io/ 作成したプログラム作成したプログラムのディレクトリ構造は以下の通りです. main.pyの中身は以下の通りです. import streamlit as st from PIL import Image import streamlit.components.v1 as components from requests_oauthlib import OAuth1Session import tweepy import requests import json with open('twitter.json') as f: twitter_keys = json.load(f) def main():      # twitter.jsonからKEYを取得     CONSUMER_KEY = twitter_keys['consumer_key'] CONSUMER_SECRET = twitter_keys['consumer_secret'] ACCESS_TOKEN_KEY = twitter_keys['access_token'] ACCESS_TOKEN_SECLET = twitter_keys['access_token_secret'] auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET) auth.set_access_token(ACCESS_TOKEN_KEY, ACCESS_TOKEN_SECLET) api = tweepy.API(auth, wait_on_rate_limit=True, wait_on_rate_limit_notify=True) public_tweets = api.home_timeline() # タイムラインの情報を取得 img_urls = []  # タイムラインの情報から,画像のURLを取得 for tweet in public_tweets: if 'media' in tweet.entities: for media in tweet.extended_entities['media']: media_url = media['media_url'] img_urls.append(media_url) # 取得した画像のURLをjpgに変換,imagesフォルダに保存 for i in range(0,len(img_urls)): url = img_urls[i] file_name = f"./images/{i}.jpg" response = requests.get(url) img = response.content with open(file_name, "wb") as f: f.write(img) # ローカルwebサイト上に画像を表示させる for i in range(0,len(img_urls)): img = Image.open(f'./images/{i}.jpg') st.image(img, use_column_width=True) if __name__ == "__main__": main() プログラムを実行するには以下のコマンドをたたきます. するとローカルサーバーが立ち上がります. streamlit run main.py これで完成です. Twitterを開かなくても,streamlit run main.pyとたたけばタイムライン上の画像を閲覧可能になりました. 以上です.ありがとうございました.

> 内容を見る

プログラミング Polygon
プログラミング

Nuxt.js+Netlifyを使って初心者でもできるwebサイト構築

こんにちは.初めまして.小石こはです. #ショート記事週間3日目(のっかりました) 概要Nuxt.jsとNetlifyを使用して自身のポートフォリオWebサイトをつくりました.この記事は,Node.jsのインストールから実際にサイトを公開するまでの流れを備忘録として残すためのものです.対象読者としては初心者の方を想定しています. Node.jsをインストールするNuxt.jsを使用するためには,Node.jsが必要となります. Node.jsはこちらからインストールできます.→ https://nodejs.org/ja/download/ Node.jsをインストールできたら,プロンプトで以下のコマンドを使って,Node.jsが正常にインストールできており,使用可能になっているか確認します.node.exe --version npm -version以上の2つのコマンドを実行し,現在のバージョンが表示されればOKです. Nuxt.jsでプロジェクトを始めるnpmコマンドが正常に使用できることを確認できれば,プロジェクトを作成したいディレクトリに移動し,以下のコマンドでNuxt.jsのプロジェクトを作成します.npx create-nuxt-app (プロジェクト名)すると以下のようにいろいろと聞かれるので,適当に答えます.create-nuxt-app v3.7.1 ✨  Generating Nuxt.js project in (プロジェクト名) ? Project name: (プロジェクト名) ? Programming language: JavaScript ? Package manager: Npm ? UI framework: None ? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA) ? Linting tools: ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Depend abot (For auto-updating dependencies, GitHub only) ? What is your GitHub username? (GitHubのusername) ? Version control system: Git 🎉  Successfully created project (プロジェクト名)   To get started:         cd (プロジェクト名)         npm run dev   To build & start for production:         cd (プロジェクト名)         npm run build         npm run start Google Fontの導入Google Fontはこちら→ https://fonts.google.com/ Google Fontを導入するにはnuxt.config.jsを編集し,以下の記述を追加します.export default{ head:{ link:[ {rel:"stylesheet", href:"https://fonts.googleapis.com/css2?family=Geo&display=swap"} ], }, target:'static', }画像を使用したいときは画像を使用したいときは,プロジェクト名のディレクトリの下にassetsというディレクトリをつくり,その中に画像を入れるます. プレビューしたいときエディタのターミナル(エディタじゃなくても大丈夫ですが)で以下のコマンドを実行して,ローカルホストに接続すればプレビューを確認できます.npm run devビルドするビルドするには以下のコマンドを実行します.(このコマンドでdistディレクトリが作成されます)npm run generate次に以下のコマンドを実行し,ローカルサーバーを立ち上げることでビルドするサイトが意図したとおりのものになっているか確認できます.npm run start プロジェクトをGitHubのリポジトリにあげるプロジェクトをcommitします. commitが完了したらGitHubのWebサイト上で新しいリポジトリを作成します. 新たなリポジトリを作成したときに表示されるGitHubのガイドに沿って以下のコマンドを実行します.git remote add origin https://github.com/(GitHubのaccount name)/(リポジトリ名).git git branch -M main git push -u origin main NetlifyにデプロイするNetlifyはこちら→ https://www.netlify.com/ Netlifyのダッシュボードで,「New site from Git」というボタンをクリックします. Continuous DeploymentでGitHubを選択します. 先ほど作ったリポジトリを選択し,各項目は以下のように設定し,「Deploy site」のボタンを押します. 以下の画像のように「Published」と表示されれば成功です. 画像上の緑色のURLで全世界にWebサイトが公開されている状況になりました. 以上です.簡単にWebサイトが構築できるので,みんな気軽に作ってみよう! ありがとうございました.

> 内容を見る