フレーム神南坂食事難民【TECH::EXPERT】

JavaScript Ruby TECH::EXPERT プログラミング 応用カリキュラム編

【本日のメニュー】
・複数のページからスクレイピング
・Rubyの実行時刻を表示する
・window.onload
・functionコードを短く
・HTML・CSS内部を掴んでイジくるメソッド
・progateとカリキュラムの違い
・フレーム神南坂教室

【複数のページからスクレイピング】

require 'mechanize'

agent = Mechanize.new
page = agent.get("http://ikinaristeak.com/shopinfo/?area1=%E6%9D%B1%E4%BA%AC%E9%83%BD")
elements = page.search('h3.title')
puts elements

elements.each do |ele|
puts ele
end

 

▼試したこと
①page = agent.get(“URL”)を増やす
>この行を2行に増やしても、「page」変数に再度上書きされるだけなので、エラーは出ないが最後の行のURL分しか結果が出ない

②brunchって予約語じゃないよね?
調べたけど予約語じゃなかった。
前の職場でプログラマーさんがbrunchがどーのって言ってたから、実はメソッドだった?と思ったが違ったようです。
代理店云々のシステムだったから変数にbrunch使ってたのかもね。

ハッシュにしてみるとかやったけど時間がかかりそうだったのでmoovieの先ちょろっと見たら普通にやり方載ってたわ。
こっちに時間かけすぎたのでカリキュラム戻って、また気が向いたら戻ってきます。

▼参考 Rails スクレイピング手法 Mechanizeの使い方
https://qiita.com/shizuma/items/d04facaa732f606f00ff
>スクレイピング、だいたい覚えているならカリキュラムでなくこっちの方が早く引けそう。

▼Ruby予約語一覧
https://qiita.com/daisuke-team-ai/items/7b1a58b343f6c737ca3f

【Rubyの実行時刻を表示する】
スクレイピングを複数URLから持ってくるをやていた時に、何度も実行していたのですが、

今の実行は成功したのか?

がログが多すぎてわからなくなったので、
コードの上部に実行時刻を表示する記述をしました。

もりもり改行もしてるので、それも目印になって捗りましたとさ。

▼コード

require "date"
time = DateTime.now
puts "\n\n\n\n#{time}\n\n\n\n"

 

▼参考ページ
https://techacademy.jp/magazine/7790

【window.onload(js)】

window.onload = function() { 処理 };
//rubyで言うところ{ }の中にメソッドを書くイメージです。

window.addEventListener('load', function() { 処理 });
//上記で定義したものを、ブラウザ上で全て読み込まれた後に処理する

 

<head>
<!— js読み込みタグが書いてる —>
</head>
<body>
<button id="Button">ボタン</button>
<!— ↑このボタンにイベントを仕掛けたいが、上の行から順に処理されるためheadタグの中にjs読み込みタグを入れたら処理できない! —>
</body>

HTMLではjsタグは<head>タグの中に入っているので、必ず最初の方に読み込まれます。
HTMLも、JSも上から順に読み込む性質ですが、それじゃあ<body>の中では何もできないのでwindow.onloadを使います。

○ window.onload使う
ブラウザにアクセス→ページが読み込まれる→<head>内(JS読み込まれる)→<body>読み込まれる→ページの読み込み終了後window.onloadが読み込まれる→ボタンをクリックするとイベント発生して解決

× window.onload使わない
ブラウザにアクセス→ページが読み込まれる→<head>内(JS読み込まれる)→<body>読み込まれる→ボタンをクリックするが、js読み込み時にイベント場所指定先が読み込まれなかったためjsは動作できない

【functionコードを短く】

function yakiniku() {
console.log(“焼肉”);
}
// クリックで焼肉というメッセージが表示される関数

btn.addEventListener("click", yakiniku);
// yakiniku実行の定義

↓こんなに短くなるんです。

btn.addEventListener("click", function yakiniku() {
console.log(“焼肉”);
});
// 関数と実行定義を一緒にしたもの

 

【HTML・CSS内部を掴んでイジくるメソッド】

changeText.innerHTML = '焼肉';
//中に入っているテキストを焼肉に変更して腹を減らせるメソッド

changeText.classList.add("[CSSのclass名]");
//指定したCSSのクラスを追加する ※事前にCSSが記述されている必要がある

classList.remove(“[CSSのclass名]”)
//指定したCSSのクラスをとる

 

スクレイピング勉強しているときは、APIあるしなんでこんな海賊みたいなこと勉強するんだと思ってたけど、JSにこの概念が活かせるからだったのかなるほど。

JSではスクレイピングの要領でHTMLの要素を指定して、
その中身のテキストを変更したりだとか、そのHTMLを触ったらどうなるとか、
そういう指定をするようです。

見た目に何かを施すことをする言語だと最初の方に書いてありましたが、
こんな風につながるなんて面白い。
スクレイピングが伏線だなんて全然気づかなかった!

Js章 簡単な機能実装エリアはクリア。
心が不安定になりそうなひまわりの写真には触れずに完了するホラー回だった。

【progateとカリキュラムの違い】
ProgateでもJS勉強をしているのですがカリキュラムと進め方が違う。
Progateはどれから始めてもいいように、どの言語でも「ではまず●●メソッドを使ってみましょう〜」という風に始まるが、
カリキュラムでは、パラシュート方式で、「じゃあこのHTMLにJSぶち込んで動かしてみよう!」なので「これprogetaでやったやつだ!」という場面が少ない。
これは良いことで、もともとワンパターン、もうみた系勉強は集中力が持たないので
別物として勉強できることは非常にいい。

【フレーム神南坂教室】
近くは服屋ばっかりで飯屋があんまりないなぁ。コンビニもないし。
フォンティス恵まれてたんやなって。
教室自体は、ガラス張りで天気が良い日は気持ちよさそう。
雰囲気があのプールににてる。つまりオシャレってことです。(白目)

大雨降った時見てみたい。(クソガキ)