大石 啓登 (ギルド)
https://scrapbox.io/files/62626a6e600ba2001df63e93.jpg
自己紹介
知識情報・図書館学類の3年生の大石啓登です。高専からの3編生です。
Slack: Keito Oishi
Discord: ギルド
移植が終わったもの(scrapbox)
作った作品
使用技術
React.ts
ChakraUI
gh-pages(ReactをstaticなページにしてGitHubPagesに対応させられるツール)
開発経験
WebAPIやフレームワーク簡単にいじるくらいしかしたことないです。
興味のある技術(やりたいこと)
チュートリアル準拠でいいのでfirebaseで何かしらアプリ作ってみる
herokuとかにデプロイまでできると嬉しいかも ⇒ せっかく使っているのでfirebaseでデプロイ目指す
時間があれば勉強したいこと
適当にモデル引っ張ってきてTF.jsで遊んでみるのも楽しそう?
6/24
発表用資料をScrapboxにも移植
とりあえず記事を一つだけScrapboxに移植できた。
もう一つ完成記事があるのでそれも移植の必要アリ。
書いている途中のものもあるが、単純なコードじゃなくてプラットフォームの使い方+Python出の使い方なので正直力尽きそう
6/17
発表会資料の作成
正直成果物はあるが、学んだことをあんまり使っていないので書いた方がいいのかなぁと思いつつnotionでつらつら書き始めた。
フィードバック
おー!でもちゃんと見えるものがあるのよいね!!
アウトプットちゃんと文章化するの大事。完成が楽しみ!
休憩は大事……!
次回:資料の続きとGoの勉強
6/10, 15
6/8は着手発表を聴いていたので作業は無し。
GoのWebについて調査
結局echoの資料が少なすぎるので、一旦Ginでやって最終的に標準ライブラリで実装できるようになるのが目標としては良さそうかなという感じがしている。(net/http優秀らしいので)
ミドルウェアとか内部仕様までいい感じに説明している日本語資料に出会えなかったので本を買うことを検討中
単純に私生活が忙しくなり始めたので進捗がどんどん薄くなっている…
6/1
echoの調査
GolangのEchoをやってみようと思い、公式ドキュメントを見つつやってみたが、正直ドキュメントの説明がシンプルすぎて仕様が頭に入ってこなかった。。。 → GoでWeb系のことをしている知り合いに相談、OpenAPIを使うといいよ、とこのサイトをすすめられた。 OpenAPIについて全然知らないのでyamlファイルの書き方も含めつつ勉強する予定。
OpenAPIが他の言語でも規格としてあるっぽい(?)ので、その辺の汎用的な知識が身に着けられそうという意味ではGoで対応しているフレームワークがEchoなので、Echoで頑張るのがありかな、という気分になってきた。
やり方をちゃんと知らないけどフロントをReactで動かしてバックエンド(API)をEchoでやるというのが賢そう。
次にやること:OpenAPIについて調べる
5/31
やったこと:ポートフォリオの続き
結局Reactを全然調べないままChakraの優秀さでゴリ押して一旦実装した。
githubPagesにアプリが反映されなくてめっちゃ苦戦してしまった()
原因は恐らくyarn deployをしていなかったこと、適応ブランチをgh-pagesにしていなかったことの二つ。
何故か変更してプッシュしてもgithubページに反映されないのは地味に困る。。。(対処知っている方いたら教えていただけるとありがたいです。 ← たまたまいつもより反映が遅かっただけらしい
分かっていないこと(次に作るアプリでは実装したい)
ページ内リンク(スクロールするやつ)
固定ヘッダ
props周り
コンテナ周り
https://scrapbox.io/files/6295e19edbb519001d5fe2d9.png
次にやること
Goでバックエンドの勉強(現在GinをやっているがEchoも触ってどっちを集中的にやるか決める)
5/30
やったこと:ChakraUI
インターンの選考が始まるという事もあり、突発的にポートフォリオを作りたくなったのでやることに。(最近やることがぶれまくっているのでどこかで軌道修正します…)
出来次第GitHubPagesで公開する予定。
React+ChakraUIでどちらもほぼ初めて使いますが、TailwindCSSと若干WindiCSSを使ったことがあり、Tailwindに似ている&Tailwindより使いやすそうという事で採用。実際コンポーネント単位で直感的にかけていいですね。
環境構築
code:powershell
yarn create react-app chakuraui-tryout --template @chakra-ui/typescript
cd chakuraui
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
コマンド実行後は
そのあとはドキュメントを見つつ、とりあえず必要最低限の情報を書いていった。
https://scrapbox.io/files/62945c52e9165c001d459ab9.png
今はこんな感じ。アイコンの色は画像加工アプリでそのうち統一します。
詰まったことと解決方法
フォントを変えたい
ドキュメントを見る感じ、Googleが提供しているフォントであればnpm installやyarn addでフォントをインストールして適応できそう。 ドキュメントで紹介されているサイトからこのフォントを使用することを決定。 yarnインストール
code:powershell
yarn add @fontsource/abhaya-libre
フォントをインストールした後はそれを適応されるコードを書く。最初はQiitaなどを何故か参考にしており、うまくいかなくて詰まっていたが、公式ドキュメントにのっとって書けばよい。
まずはtheme.tsxを作成する
code:theme.tsx
import "@fontsource/abhaya-libre"
import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
fonts: {
heading: 'abhaya-libre', serif,
},})
export default theme
最初、サイトに書いてある
code:Document
body { font-family: "Abhaya Libre", serif; }
を参照してthemeを書いたが、反映されなかったためインストール時と同じ表記を用いることでうまくいくことが分かった。
上のUIはこのフォントを適用させたもの(かっこいい)
次にやること:Reactのコンポーネントの習得
ここからスキルや経歴について書くことになるが、何度も同じスタイルを使用するため、Reactの特徴のコンポーネントを用いたほうが良いので習得する必要がある。
追記
記録後に更にすすめ、ここまで出来た
tsxのpropsがいまいち理解できず、function Hoge(props:any) と書いているのが屈辱なのでちゃんと勉強したい()
https://scrapbox.io/files/6294dbd9dbb519001d51c4f6.png
5/27
やったこと:Gin
※今日は完全にメモ書き
あらかじめGoとDockerのインストールを終わらせたが、Dockerのやり方がいまいちわからなかったのでとりあえず素でスタート
hello, worldとstaticファイル開くことには成功
djangoに比べてシンプルだなという印象
GinというよりGoの問題で、GOHOMEやgo.modあたりが良く分かっていないのでどう設定したものか。。。
go.modはnpmでいうlock.json的なやつなのか。。。?
過去にGoやったときはGOHOMEとGOPATH周りのWarnが消えなくてあきらめた記憶があるので困ったらすぐ聞くようにしたい
Gin自体はDjangoより仲良くなれそう(進めてみないことにはわからない)
スクレイピングはPythonでやっているものの、やる言語を統一する必要はあまりないと思っているので最悪Pythonはbottleで簡易的にAPIサーバー立ててデータ利用するのも良いかなと思っていたり
次にやること
Vueも触っているらしいので、そのままWebサイト作ってしまうのも良いかも
PythonとGoを同時に動かせるのか分からないが、適当なサーバーに投げるのはよさそう(最悪SubProcessとか使える…?)
コメント欄
大沼怜生.iconbeautiful soup!スクレイピングだ!自分に合うフレームワーク探し……相性って大事ですよね
やることがしっかり整理されててえらい!
がんがん進捗生んでるのすごいなあ
最終的に造りたいものがあるというより色々触ってみてる感じです?
5/25
やったこと:アジャイルの動画を見る
同時視聴には参加しなかったものの、アジャイルの動画を視聴
ウォーターフォール的な開発した恐らく今まであまり経験していないので、違いと良いところをしっかり実感しながらチーム開発したいなと思った
djangoのチュートリアル
チュートリアル4をやった(5はテストなのでとりあえずなし)
API関連の処理が普通に大変そう&標準でPOSTやGETの区別とかをしていなさそうなのが気持ち悪いので他のフレームワークを触りたくなった(DRFもそれはそれで…)
もう少し直感的に書けるほうが個人的には良さそう…?
Dockerのインストール
WindowsHomeなので こちらを見ながらインストール Anacondaを今は使っているが、Dockerが便利そうというのと興味のあるフレームワークによってはDockerがあると構築が便利になる可能性があるので。。。
次にやること
他のWebフレームワークも触りたくなったので試してみる
今のところGoのGin触ろうかなと思っている
5/20
やること:djangoチュートリアル
今後も続きをやってアプリを作っていく
コメント欄
ちゃんと自分の役に立つものができそうでスゴイ!
5/18
やること:pandasでスクレイピング
結論:テーブルデータの扱いにはめちゃくちゃ楽
将棋の対局予定テーブルを出力
code: IPython
import pandas as pd
data = pd.read_html(url, header=0)
実行結果
https://scrapbox.io/files/62846b23ab94cf002322a728.png
4行で表データを取ってこれた。
PandasのDataFrame型で取っているので株価などの数値データをプロットしたり計算したりも楽
5/11の「次にやること」で書いた方法でやるとNaNのデータが飛ばされたりするので処理が非常に面倒なのでその点でもよい
リンクは取ってくれないっぽいのでクローリングには他の方法を使う必要がある
スクレイピングとCloudFireStoreを組み合わせる
特にやりたいことも思いつかなかったので、とりあえず将棋連盟から棋士の情報をスクレイピングしてとってくるコードを作った
<考えた方法>
https://scrapbox.io/files/6284852b63f20e001df0b19d.png https://www.shogi.or.jp/player/pro/175.html
取得したいデータ:
名前
棋士番号
生年月日
出身地
師匠
をとりあえず取得してみる
名前についてはBeautifulSoupを使ってとってくれば良さそう
開発者ツールで調べたらclass="jp"となっているspanタグを探せばよかった
他の情報はPandasを使ってテーブル取得すれば良さそう
ということで、実際に作ってみる。
1. 前に勉強したクエリ実行の方法で実装するため、まずはデータ構造を記述したクラスを作る 2. 棋士のプロフィールのURL構造はhttps://www.shogi.or.jp/player/pro/+棋士番号となっているので、存在する棋士の数だけFor文を回して取得する
さすがにプロ棋士全員(332人)のデータを取得するのは時間がかかる&サーバに負担をかけるのは怖いので、棋士番号200~249の50人の棋士のデータを2回に分けてDBに入れるようにした
https://scrapbox.io/files/62848808aa19f3002160509d.png
結果:データを取得できていることが分かった
生年月日をstrで使うのはあまりよくないとは思うが、とりあえずお試しなので加工してDate型にするのも面倒ということで、これで良いことにした
次にやること
djangoでアプリを作る ← Webで実際にFirebaseのデータを反映する
ただ今回取ったデータを使うとStaticな物になるので、動的にアプリを別で作った方が勉強になるかもしれない(両方やればいいが時間足りるか…?)
FirebaseのAuth機能とかも使いたい
例えば、師匠や出身地、年代でフィルタできるサイトを作るのが良さそう
5/13
やること:BeautifulSoupでクローリング
先にメモ
前回の次にやることで上げた表のスクレイピングについて、pandasが使えそう(参照) pandasからならグラフ作ったりcsvに保存したりも楽そう
クローリング
class名がサイトと違うので変える必要がある
多分そのまま書くとコピペでだれでもスクレイピングできてしまうので、セキュリティの観点的に意図して変えている
https://scrapbox.io/files/627e1cad39f9870023bbea4b.png
ちなみに、
前回の.要素で指定する方法がサイトの最後に書いてあり、先に教えてという感想になった。
解説サイトの前にドキュメントを読むべきな気もしますね()
次にやること
pandas, lxml, html5libを使用してテーブルを抽出する
できればFirebaseのCloudFireStoreに突っ込むところまで
FBはここ
レビューがちゃんと見せれるものあって最高of最高
スクレイピングかあ、自分もやってみたいなぁ
5/11
やること:jupyter-labの設定とBeautifulSoup4を使う
jupyter-lab
beautifulsoupをやろうと思ったが、jupyter使ったほうが見やすいかな?→3月にPC変えたのでjupyterの設定何もしてないや、となり環境構築から。
jupyter-labはインストール済みなので、ダークテーマと行数の表示を適応し、
jupyter-toc
jupyter-lsp
あたりの拡張のインストールをした。kiteの補完に高専の時にお世話になった記憶があるので重さが未知数だけど入れてみようか、と思ったが一時的に利用できないらしく断念。lspも500エラーで設定できなかったのでとりあえず保留。
Beautiful Soup
このサイトを参考にYahooニュースのタイトルとリンクの出力をしようと思ったが、2か月前の記事にもかかわらず、今取得するとaタグの中にさらにdivやらspanやらが入っており、.contentsを連打すれば出せないことはないがもっとスマートな方法がありそうなので、- いったん放置してリンクの一覧だけ取得できるようにした。 とりあえず一覧取得のコードを書きなぐっておく。
parserをlxmlにすると早くなるなど、スクレイピングを早くする手段はありそうだが、相当量のスクレイピングをするか、スクレイピングを開発で使うときに、その辺は考えれば良さそう。
※追記(5/13): soup = BeautifulSoup(res.text, ["lxml", "xml"])でlxml parserが指定できた(pip install lxmlの必要あり)
code:python
import re
import requests
from bs4 import BeautifulSoup
res = requests.get(url)
soup = BeautifulSoup(res.text, "html.parser")
elems = soup.find_all(href=re.compile("news.yahoo.co.jp/pickup"))
for i in elems:
タイトルの取得は、以下のコードで一応できたが、ぱっと見気持ち悪いのでこれ以外に方法あったら知りたい。。
おそらくelementを取得して、その中の指定された要素を抜き出す的なことはできる気がする(勉強すればそれこそBeautifulSoupのライブラリに該当機能なくても正規表現で切り抜けると思う)
code:python
elems0.div.div.h1.span.contents0 .〇〇でコンテンツ内の要素が指定できる。
一応これでできるので、以下のコードでタイトルとリンクのリストは作成できた(出力は略)
code:python
news = []
for i in elems:
news.append([i.div.div.h1.span.contents0, i.attrs'href']) 次にやること
引き続き記事を参考にクローリングをして、リンク先の記事の内容を取得してみる
そのままDLやってみたいけど多分それをしたらソロ活動期間が終わる
テーブルデータのスクレイピング方法を勉強する
過去に将棋連盟の対局表をスクレイピングしてDiscordbotに出力させたことがあるので、そのコードを振り返るといいかも(見たらfind_all(table)してるだけっぽい)
テーブルデータを取得したら、それをCloudFireStoreに突っ込んでみる
ここまで出来たら取得したデータを使ってサービス作ってみるのは楽しい気がする
code:python
def get_csv():
from urllib.request import urlopen
from bs4 import BeautifulSoup
read = BeautifulSoup(html, 'html.parser')
table = read.findAll("table", {"class": "tableElements03"})0 rows = table.findAll("tr")
with open("shogi_schedule.csv", "w", encoding='utf-8') as file:
writer = csv.writer(file)
cnt = 0
for row in rows:
csvRow = []
c = 1
if cnt != 0:
if (c < 4):
# print(cell.get_text())
csvRow.append(cell.get_text())
c = c + 1
cnt = cnt + 1
if cnt != 0:
writer.writerow(csvRow)
return 0
5/9
やること:複合クエリ
前回までのサイトを参考にして複合クエリを実行する
複合クエリの実行には複合インデックスを作る必要がある
ふつうに実行すると400エラーとリンクを吐くのでリンクへ飛んでインデックスを作成した(おそらく最初から複合インデックスを作る方法はある)
今まではクエリ実行して該当するデータのすべての情報を取り出していたので、必要なデータだけ取り出す
クエリで受け取ったデータをtype(to_dict())したところ、独自の型ではなく、dict型であることが分かった→pop('要素名')で取り出せる
code: python
denver_query = cities_ref.where(u'population', u'>', 860000).where(u'country', u'==', u'USA')
for doc in denver_query.stream():
print(f"{doc.id} => population: {doc.to_dict().pop('population')}, country: {doc.to_dict().pop('country')}")
code: powershell
LA => population: 3900000, country: USA
以上のコードから複合クエリを実行し、確認のために人口と国名を表示することができた。
そのほかの気づき
疑問「Firebase(=NoSQL)でリレーションってどうやるのか?」
そもそもNoSQLは「非リレーショナル」と同じ意味 (参考) NoSQLはキー値、ドキュメント、グラフなどの様々なデータモデルを利用でき、パフォーマスト規模に応じて最適化される
そもそもNoSQLについての知見が少なかったのでSQL文を使わないだけなのかな、と思っていたがNoSQLってどういう理由で出来たのかや利点について上リンクが非常に参考になった
Croud Firestoreの基本的な操作はこの辺だと思うので、あとはアプリ作るときに調べながらやろうかなと思っている。(他にCroud FirestoreやNoSQL関連で勉強しておいたほうが良さそうなことあれば教えてください。
次にやること
おそらくbsを触るが候補
BeautifulSoupでウェブスクレイピング
Django + React参考になりそうなもの ← できれば実際にCloudFirestore使ってみたい Firebase Authenticationを触る
4/29
やること:firebaseのクエリ実行
前回書いたクエリ実行を参照しながらPythonをいじる 1. データの例のコードを見ながらデータベース設計したとおりにデータを入れていく方法を学習
詰まったこと(公式から参照)
code:Python
@staticmethod
def from_dict(source):
# ...
当たり前だが中身がないのでindentationErrorがでる
説明がないのでどう書けばいいのかも不明(やりたいことは名前で察しが付くが。。。)
もう一つ中身がない関数があった
そもそもモジュールのインポートとかDBの初期化ははされている前提で書いてある
2. 単純なクエリ実行
code:python
cities_ref = db.collection(u'cities')
query = cities_ref.where(u'capital', u'==', True)
すべての首都が返ってくるはず… == 首都なら他の情報も全部入ってくる
出力
code:powershell
BJ => {'capital': True, 'population': 21500000, 'country': 'China', 'regions': 'hebei', 'state': None, 'name': 'Beijing'} DC => {'population': 680000, 'capital': True, 'country': 'USA', 'regions': 'east_coast', 'state': None, 'name': 'Washington D.C.'} TOK => {'capital': True, 'population': 9000000, 'country': 'Japan', 'regions': 'kanto', 'honshu', 'state': None, 'name': 'Tokyo'} 次にやること
複合クエリとかも学びたい
4/27
やること:firebaseをPythonで触ってみる
1. enpit用にMinicondaで仮想環境を作成
3. Pythonからfirebaseに触るのはDB周りになると思うので、公式ドキュメントを基にDBを軽く触ってみた 「Croud Firestoreの初期化する」のGoogle Cloud Platformで初期化するが良く分からなかった → 各自のサーバーで初期化するの方法で無事できた
このサイトだとCloud Platform Consoleで秘密鍵を作成となっているが、サービスの作成しかなかったため、Firebase Consoleの設定→サービスアカウントの作成→新しい秘密鍵の生成で行った
その後はDBの書込・読込・更新・削除を一通り試しながらバックエンド勉強会に参加
次の予定
引き続きCloud FireStoreの勉強→できればdjangoのチュートリアル