すき家とかかつやみたいな和食屋で外国人雇うな (89ﾚｽ)
すき家とかかつやみたいな和食屋で外国人雇うな http://mevius.5ch.net/test/read.cgi/tech/1607138691/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
23: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 19:21:50.41 ID:VbRdXPuW まず、最新のRubyをインストール。次に、gemプログラムを使って必要なモジュールをインストール。 gem install nokogiri gem install selenium-webdriver gem install ffi さらに https://github.com/mozilla/geckodriver/releases にあるgeckodriver.exe をPATHの通った場所に置く。 # shottest.rb require 'selenium-webdriver' driver = Selenium::WebDriver.for(:firefox) driver.get('https://www.google.co.jp') driver.save_screenshot('File01.png') これでOK。shottest.rbを実行するとブラウザが起動し、自動的にスクリーンショットが撮られる。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/23
24: 20 [sage] 2020/12/09(水) 19:23:07.99 ID:y7KEYUhD a.js.erb という感じで、 JavaScript も、ERB で書ける ERB は、あらゆるファイルに、Ruby の式を埋め込んで書ける Ruby on Rails では、React, Bootstrap を使う事が多い http://mevius.5ch.net/test/read.cgi/tech/1607138691/24
25: 蟻人間 ◆T6xkBnTXz7B0 [katayama.hirofumi.mz@gmail.com] 2020/12/09(水) 19:26:30.84 ID:VbRdXPuW 言い忘れたが、事前にFirefoxのインストールが必要だ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/25
26: 20 [sage] 2020/12/09(水) 19:28:15.24 ID:y7KEYUhD ffi なんて、いる？ Ruby のselenium-webdriver は、Chrome 以外で動くかな？ Edge Chrome では、動く機能が少なすぎる Rails のシステムテストでは、Capybara, Headless Chrome を使う http://mevius.5ch.net/test/read.cgi/tech/1607138691/26
27: 20 [sage] 2020/12/09(水) 19:40:29.34 ID:y7KEYUhD こういう感じ require "selenium-webdriver" options = Selenium::WebDriver::Chrome::Options.new options.add_option(:detach, true) # ブラウザを切り離す options.add_argument('--start-maximized') # 画面最大 driver = Selenium::WebDriver.for :chrome, options: options driver.manage.timeouts.implicit_wait = 15 # 要素の検索の timeout url_0 = "ttps://何々" url_1 = "ttps://何々" driver.navigate.to url_0 driver.execute_script( "window.open()" ) # 新しいタブを開く driver.switch_to.window( driver.window_handles.last ) # 新しいタブへ移動する driver.navigate.to url_1 http://mevius.5ch.net/test/read.cgi/tech/1607138691/27
28: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 19:44:41.00 ID:jb06R+pz テーマは、ホームページの破壊。DOM要素にスタイルを適用して「壊す」。 ターゲットはこのホームページ（私のです）： https://katahiromz.web.fc2.com/ このホームページを「破壊」する動画を制作する。一般に動画を作成するには、動きのある複数のスクリーンショットを撮ってテキトーなツールで動画に変換すればいい。「画像から動画を作る ツール」を検索。 ドライバーでJavaScriptスクリプトを実行してスタイルを編集した後で、再びスクリーンショットを撮ればスタイルが変更された画像が得られるという訳だ。 壊すということは、部品がガタつくとか、外れるとか、落ちるとか言うことだから、こういう動きをスタイルで再現すればいい。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/28
29: 20 [sage] 2020/12/09(水) 19:46:05.31 ID:y7KEYUhD nokogiri を使うのなら、 require "nokogiri" url = "file:///" + File.join( __dir__, 'test.htm' ) driver.navigate.to url doc = Nokogiri::HTML( driver.page_source ) http://mevius.5ch.net/test/read.cgi/tech/1607138691/29
30: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 19:49:02.13 ID:jb06R+pz ハンマーで叩くというのも、画像を重ねればできるだろう。叩いた瞬間、部品は振動するはずである。 何度か叩くと部品が少しずつ落下する。落下運動は放物線をたどるはずだ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/30
31: 20 [sage] 2020/12/09(水) 19:52:36.99 ID:y7KEYUhD DOM を破壊するのは、Vue.js で、要素の位置を入れ替えるとか、どうかな？ http://mevius.5ch.net/test/read.cgi/tech/1607138691/31
32: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 19:54:57.39 ID:jb06R+pz >>31 ひとまずやってみてくれ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/32
33: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 20:01:15.64 ID:jb06R+pz >>1-2 Say No to racism! http://mevius.5ch.net/test/read.cgi/tech/1607138691/33
34: 20 [sage] 2020/12/09(水) 20:10:13.64 ID:y7KEYUhD 無理。難しすぎる 表示を壊して、動画まで作成できません http://mevius.5ch.net/test/read.cgi/tech/1607138691/34
35: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/09(水) 21:05:01.26 ID:VbRdXPuW >>34 初めはみんなそう言うもんなんや。 でも細かく分解して考えれば大丈夫やねん。 ちょっと待てよ。動くサンプルプログラムを考えるから。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/35
36: デフォルトの名無しさん [sage] 2020/12/09(水) 21:30:47.76 ID:YZTCBh8U Web ページがだんだん崩れていくアニメーションってすでにあったよね確か GigaZine の記事で見たんだっけな http://mevius.5ch.net/test/read.cgi/tech/1607138691/36
37: デフォルトの名無しさん [] 2020/12/10(木) 09:39:32.67 ID:Bau3ggnP これがサンプルだ。これを参考にして色々作ってみてくれ。 require 'selenium-webdriver' driver = Selenium::WebDriver.for(:firefox) driver.get('https://katahiromz.web.fc2.com/') for t in 0..10 ＿driver.execute_script(" ＿＿let r = Math.random() * 4 - 2; ＿＿let elements = document.querySelectorAll('*'); ＿＿for (let i in elements) { ＿＿＿if (elements[i].style) { ＿＿＿＿elements[i].style.transform = 'rotate(' + r + 'deg)'; ＿＿＿} ＿＿} ＿"); ＿filename = sprintf('File%03d.png', t); ＿driver.save_screenshot(filename) end あ、「＿」はスペースかタブに置換してくれ。 transformの使い方はここに書いてある： https://developer.mozilla.org/ja/docs/Web/CSS/transform http://mevius.5ch.net/test/read.cgi/tech/1607138691/37
38: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 09:58:49.94 ID:a08vYCAA >>37 一応、簡単に解説しよう。 4行目。tは時間の変数。 5行目。execute_scriptメソッドで文字列のJavascriptコードを実行する。 6行目。乱数を取得。 7行目。CSSセレクタでDOM要素を取得する。 9行目。styleがないDOM要素は無視する。 10行目。transformで回転させる。 14行目。tを使って、連番のファイル名の文字列を構築する。 15行目。スクリーンショットを取得する。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/38
39: デフォルトの名無しさん [] 2020/12/10(木) 11:47:18.24 ID:YXjbRyJb 自演でコロコロ名前変えてるからまたトリップ付け忘れちゃったねｗｗｗ >>37->>38 http://mevius.5ch.net/test/read.cgi/tech/1607138691/39
40: 20 [sage] 2020/12/10(木) 15:36:36.89 ID:HstTQkWC なるほど 平衡感覚が狂うw http://mevius.5ch.net/test/read.cgi/tech/1607138691/40
41: 20 [sage] 2020/12/10(木) 16:07:15.87 ID:HstTQkWC >>37 JavaScript のコードは、ヒアドキュメントにした方が良い # style のある要素だけを回転させる jsCode = <<'EOT' let r = Math.random( ) * 4 - 2; let elements = document.querySelectorAll( '*' ); for ( let i in elements ) { if ( elements[i].style ) { elements[i].style.transform = 'rotate(' + r + 'deg)'; } } EOT for count in 0..3 # JavaScript を実行 driver.execute_script jsCode image_filepath = sprintf( 'File%03d.png', count ); driver.save_screenshot( image_filepath ) # スクリーンショット end http://mevius.5ch.net/test/read.cgi/tech/1607138691/41
42: 20 [sage] 2020/12/10(木) 16:27:33.98 ID:HstTQkWC エンジニアチャンネル・粟島 プログラミングでYouTube動画の編集作業を自動化する https://www.youtube.com/watch?v=2nDkNHeCKs4 Python で動画の無音部分を、自動的にカットする こういうツールを作れば、編集作業が減って、YouTuber は大助かり！ http://mevius.5ch.net/test/read.cgi/tech/1607138691/42
43: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 17:00:54.83 ID:a08vYCAA 次はハンマーで叩いてみるんだが、ハンマーは今回はアニメGIF画像で表現する。 GIF画像はアニメーションと透過ができるファイル形式である。アニメGIFを作るには複数のGIFファイルをつなげてアニメにする特殊なソフトを使用する(フリーソフトでOK)。 画像要素の追加には document.createElement('img') と appendChildを使用する。画像を追加して表示すればアニメーションは自動的に開始される。 画像のソース(src)には、data: urlを使用して画像データを埋め込むことにする。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/43
44: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 17:03:30.58 ID:a08vYCAA 画像をdata: urlに変換するツールは次の通り: https://www.peko-step.com/tool/datauri.html http://mevius.5ch.net/test/read.cgi/tech/1607138691/44
45: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 17:48:32.47 ID:Bau3ggnP ハンマー画像はこれを使うことにする： https://github.com/katahiromz/hammer2t/blob/main/hammer2t.gif http://mevius.5ch.net/test/read.cgi/tech/1607138691/45
46: 20 [sage] 2020/12/10(木) 17:57:49.56 ID:HstTQkWC <img src="data:image/png;base64,<data>"> base64 エンコードした、dataURL は、データサイズが大きくなる http://mevius.5ch.net/test/read.cgi/tech/1607138691/46
47: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 19:01:10.68 ID:Bau3ggnP >>44 のツールは使えないようだ。 https://hi0a.com/demo/-js/img-base64-datauri/ こっちを使ってくれ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/47
48: 蟻人間 ◆T6xkBnTXz7B0 [katayama.hirofumi.mz@gmail.com] 2020/12/10(木) 19:09:55.36 ID:Bau3ggnP https://ideone.com/SMVNwf こうなった。なめらかに動かすのは難しいようだ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/48
49: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 22:00:35.51 ID:a08vYCAA >>48 一応解説しておこう。 4行目。ideoneが勝手にＵＲＬを改変したので、ＵＲＬの修正が必要だ。 10行目。srcにdata URLを設定して画像を作成している。このデータは>>47を使って作成した。 11行目。document. getElementByIdなどでアクセスできるIDを設定している。このIDは後で使う。 12〜14行目。img要素の位置を指定している。CSSの勉強をした人なら位置の指定方法を知っているはずだ。 http://mevius.5ch.net/test/read.cgi/tech/1607138691/49
50: 蟻人間 ◆T6xkBnTXz7B0 [sage] 2020/12/10(木) 22:18:55.55 ID:a08vYCAA ここまで。CSSを勉強した人なら、位置やサイズ、色、回転角度をピクセル単位やパーセントなどで自由に指定できるはずだ。 window. innerWidthとwindow. innerHeight を使えばブラウザの画面サイズが得られるはずだ。 ひび割れを入れるとか、爆発させるとか、画面を暗くするとか、カーテンを下ろすなどの効果も考えられるだろう。 >>20さん、何か作ってくれませんか？ http://mevius.5ch.net/test/read.cgi/tech/1607138691/50
51: デフォルトの名無しさん [] 2020/12/10(木) 22:55:54.47 ID:YXjbRyJb 自演でコロコロ名前変えてるから >>37-38ではトリップ付け忘れちゃったのに >>48-49では反省して間違えなかったねｗ エライエライｗｗｗ http://mevius.5ch.net/test/read.cgi/tech/1607138691/51
52: デフォルトの名無しさん [sage] 2020/12/11(金) 01:10:46.88 ID:ki/gtV8Z 蟻人間さん、5ch専ブラみたいなの作れる？おせーてちょ http://mevius.5ch.net/test/read.cgi/tech/1607138691/52
ﾒﾓ帳
(0/65535文字)
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 37 ﾚｽあります
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.005s