- 投稿日：2021-05-04T23:37:52+09:00
[HTML/JavaScript]RPA(UiPath)でスクレイピングするためのテストページを作ってみた
[0]はじめに Zitanです。 RPAでWebスクレイピングする際のテスト用のWebページを作成することにしました。 サイト様にもよりますが、Webスクレイピング禁止にしているところもあるようで。。。 今後使うかどうかは別として、コードを残すことにしました。 [1]GitHub Pagesを使う 筆者はGithub初心者なので詳しくないのですが、、、 ここに残したのでZipファイルでダウンロードできます。 作ったサイトを見るには。。。 下の方に「GitHub Pages」がありますので、クリック。 このURLをコピペすれば誰でもアクセスできます。自由に使って下さい。※UI変更する可能性はありますが。。 静的なページであれば作成できるらしいです。今回は、HTMLとjavaScripのみを使っています。 アクセスするとログインページに遷移します。 UserName：testuser Password：password です。ただのテスト用のサイトなのでセキュリティとか気にしていません。 [1-1]ログインページ [1-2]ログイン成功 [1-3]ログイン失敗 コードは全部同じ階層です。 [2]HTMLコード [2-1]ログインページ：index.html index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="process.js"></script> <title>Login Test Page</title> </head> <body> <center> <h1>Login Test Page</h1> <form name="login_form" action="clickButton();"> <p>Please Input your ID/Password(testuser/password)</p> <input type="id" name="id" placeholder="UserName"> <br> <input type="password" name="password" placeholder="Password"> <br> <button type="button" onClick="clickButton();">Login</button> </form> </center> </body> </html> [2-2]ログイン成功ページ：success.html success.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="process.js"></script> <title>Success Page</title> </head> <body> <center> <h1>Success Page</h1> <p>This is Success Page !</p> <dl> <dt>RPAのクラス_総務省HPより(https://www.soumu.go.jp/menu_news/s-news/02tsushin02_04000043.html)</dt> <dd> <table class="tableList" border="1"> <thead> <tr> <th scope="col" style="width: 25%;">クラス</th> <th scope="col" style="width: 20%;">主な業務範囲</th> <th scope="col">具体的な作業範囲や利用技術</th> </tr> </thead> <tbody> <tr> <th scope="row">クラス1<br />RPA（<span xml:lang="en" lang="en">Robotic Process Automation</span>）</th> <td>定型業務の自動化</td> <td> <ul class="normal"> <li>情報取得や入力作業、検証作業などの定型的な作業</li> </ul> </td> </tr> <tr> <th scope="row">クラス2<br />EPA（<span xml:lang="en" lang="en">Enhanced Process Automation</span>）</th> <td>一部非定型業務の自動化</td> <td> <ul class="normal"> <li>RPAとAIの技術を用いることにより非定型作業の自動化</li> <li>自然言語解析、画像解析、音声解析、マシーンラーニングの技術の搭載</li> <li>非構造化データの読み取りや、知識ベースの活用も可能</li> </ul> </td> </tr> <tr> <th scope="row">クラス3<br />CA（<span xml:lang="en" lang="en">Cognitive Automation</span>）</th> <td>高度な自律化</td> <td> <ul class="normal"> <li>プロセスの分析や改善、意思決定までを自ら自動化するとともに、意思決定</li> <li>ディープラーニングや自然言語処理</li> </ul> </td> </tr> </tbody> </table> </dd> </dl> </center> </body> </html> [2-3]ログイン失敗ページ：failure.html failure.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="process.js"></script> <title>Failure Page</title> </head> <body> <center> <h1>Failure Page</h1> <p>This is Failure Page !</p> </center> </body> </html> [3]javaScriptコード [3-1]ログインページ：prcess.js prcess.js function clickButton() { input_id = document.login_form.id.value; input_pwd = document.login_form.password.value; if(input_id == "testuser" && input_pwd == "password"){ location.href = "success.html"; return; } location.href = "failure.html"; } UserName(input_id)とPassword(input_pwd)の値はname属性で取得して、IF文で成功ページと失敗ページの遷移を分岐しています。 name属性を指定してテキストボックス内の値を取得する input_id = document.login_form.id.value; input_pwd = document.login_form.password.value; [4]まとめ いかがでしょうか。 ネットの情報を組み合わせて作っているだけなので詳しくはありませんが、 RPA(UiPath)で色々やるときの手段として作成してみました。
- 投稿日：2021-05-04T22:15:29+09:00
【初心者でも簡単】CSSで再生ボタンを作る
どうも7noteです。動画が流行っているので再生ボタンを作ってみました。 動画の再生ボタンを独自で作成したい時用に、「再生ボタン」を作ってみました。 クリックで再生停止も操作できるようにクリックしたら一時停止の見た目に変わるようにします。 ソース index.html <div class="btn"></div> style.css .btn { width: 100px; /* 幅を指定 */ height: 60px; /* 高さを指定 */ background: #F00; /* 背景色を赤に指定 */ border-radius: 10px; /* 角を丸くする */ position: relative; /* 基準位置とする */ cursor: pointer; /* マウスカーソルを指（?）の形にする */ } .btn::after { content: ''; /* 疑似要素に必須 */ width: 0; /* 幅を0に指定 */ height: 0; /* 高さを0に指定 */ border-style: solid; /* 線の種類を指定 */ border-width: 15px 0 15px 30px; /* 線の幅を指定して三角を作る */ border-color: transparent transparent transparent #fff; /* 左のみ線の色を指定 */ position: absolute; /* 相対位置に指定 */ top: 50%; /* 上から50%の位置に配置 */ left: 50%; /* 左から50%の位置に配置 */ transform: translate(-50%,-50%); /* 要素の半分ぶんだけ左上方向に移動。 */ } .btn.playback::after { width: 15px; /* 幅を指定 */ height: 30px; /* 高さを指定 */ border-width: 0 4px 0 4px; /*線を左右に指定*/ border-color: transparent #fff transparent #fff; /* 左右に線の色を指定 */ transition: .5s; /* アニメーションの秒数を指定 */ } script.js $(function () { $('.btn').on('click', function(){ // クリックされた時 $(this).toggleClass('playback'); // クラスを 付与する or 外す }); }); まとめ 背景を使わずに、▶と||だけでも十分利用できると思います。 movieタグなどで利用する場合はデフォルトの再生ボタンは非表示にしておきましょう。 【iosのデフォルト再生ボタンを非表示にする方法】 https://qiita.com/YukiYuki0508/items/651e70b50c278b16cfa1 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-05-04T20:48:19+09:00
画像ファイルをドラッグ＆ドロップでブラウザのアプリケーションに取り込ませる方法
画像ファイルをドラッグ＆ドロップでブラウザのアプリケーションに取り込ませる方法を調べました。 例えば、以下のような写真をカレンダー形式で管理するアプリケーションを作るとして、画像ファイルをドラッグ＆ドロップで表示できれば便利かと思います。 JavaScriptだけを使った簡易な実装方法と、PHPを使ったきちんとした（つもりの）実装方法の２パターンを書きます。 1.JavaScriptだけで実装 calender.html <table> <tr> <td id="box1">ボックス1</td> <td id="box2">ボックス2</td> </tr> </table> drag_drop.js $(function () { $("td").on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); $("td").on('drop', function (e) { e.stopPropagation(); e.preventDefault(); var boxid = $(this).attr("id"); var items = e.originalEvent.dataTransfer.items; var file = items[0].getAsFile(); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { $("#" + boxid).append("<img src=" + reader.result + " width=130>"); }; }); }); このコードでたしかに画像をブラウザに表示させることはできるのですが、画像を保存できないため、実用上はあまり意味がないものです。 aタグに画像を挿入し、aタグのDownload属性を使ってダウンロードフォルダに格納することも試したのですが、使い勝手はあんまり良くなかったです。 2.PHPを使って実装 calender.html <table> <tr> <td id="box1"> ボックス1 <?php if ($box == "box1") { print("<img src=\"" . $data . "\" width=130>"); } ?></td> <td id="box2"> ボックス2 <?php if ($box == "box2") { print("<img src=\"" . $data . "\" width=130>"); } ?></td> </tr> </table> drag_drop.js $(function () { $("td").on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); $("td").on('drop', function (e) { e.stopPropagation(); e.preventDefault(); var boxid = $(this).attr("id"); var items = e.originalEvent.dataTransfer.items; var file = items[0].getAsFile(); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { $("#" + boxid).append("<form id=\"upload" + boxid + "\" action=\"calender.php\" method=\"POST\"></form>") $("#upload" + boxid).append("<input type=\"hidden\" name=\"day\" value=\"" + boxid + "\">"); $("#upload" + boxid).append("<input type=\"hidden\" name=\"data\" value=\"" + reader.result + "\">"); var form = $("#upload" + boxid); form.submit(); }; }); }); calender.php function get_post_data($key) { $str = ''; if (isset($_POST[$key]) === TRUE) { $str = $_POST[$key]; } return $str; } $box = ""; $data = ""; if ($_SERVER['REQUEST_METHOD'] === "POST") { $box = get_post_data('box'); $data = get_post_data('data'); } include_once "calender.html"; これで画像をブラウザに表示させることができます。 あとは画像データのDBへの出し入れと、ブラウザへの描画の部分を修正すれば、意図した通り画像ファイルの取り込みをドラッグ＆ドロップで実現できます。
- 投稿日：2021-05-04T18:12:31+09:00
TSで簡単なアニメーション
サーバーサイド言語ばかりをやっていると、たまにはhtml, css, typescriptで遊びたくなる今日この頃。 Vue.jsしか使わない私がTSだとアニメーションがわからなくなったのでメモ。 vue.jsのcreatedでAjax通信の関数を呼び出し、返ってきたときに画面が描画されるような仕様にしたかった。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./index.css"> <script src="./index.js" defer></script> </head> <body> <div id="wrapper" class="none"> <span>hello</span> <button onclick="hello()">Hello world</button> </div> </body> </html> index.css .none{ opacity:0; visibility: hidden; transition: all 3s } .show{ opacity:1; visibility: visible; /*おそらくopacityだけだと隠れている時でもイベントが発火する*/ transition: all 3s } index.ts const wrapper = document.getElementById("wrapper") as HTMLDivElement; //右側にasをつけて型注釈することでこれはHTMLDivElementだと確定させる(アサーション) //左側だとnullの可能性があると怒られる。下記でもよし //<HTMLDivElement>document.getElementById("wrapper") function ready(){ wrapper.classList.add('show') } function hello(){ console.log('Hello world') }
- 投稿日：2021-05-04T13:10:43+09:00
ウルトラ簡単に導入できてしまうBootstrap
こんにちは。 当記事ではBootstrap導入と簡単な使用例について記していきます。 対象はプログラミングhtmlやcssは触ったことある初学者向けです。 ※検証環境:Eclipse・GoogleChrome(Java8・PostgreSQL・SpringBoot・Thymeleaf) 1．以下サイトからBootstrap本体をダウンロード https://getbootstrap.com/docs/5.0/getting-started/download/ 2．ダウンロードしたzipを解凍後cssとjsファイルを自分の環境にコピーする。 私の開発環境のSpringbootアプリだとここにドラッグ&ドロップしました。 3．HTMLファイルに以下を追記する 3.1 <head></head>の中に以下2行をコピー sample.html <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 3.2 <body></body>の中に以下3行をコピー(私はbody部の最後に書きました) sample.html <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> BootStrapの導入は以上で終わりです。pomに追記するなどの別の方法もありますが、今回は割愛します。 後は実際にHTMLのタグにclassを追加して試してみると良いと思われます。
- 投稿日：2021-05-04T12:15:25+09:00
Twitter カードの画像（OGP)を PHP で動的に変更する
やりたいこと 自分のホームページを Twitter で宣伝したい。 そのときに Twitter カードという形式で表示したい。 また、表示する画像を幾つか用意して、同じサイトでも違う画像で表示したい。 どうすれば良いのか？ まず、Twitter カードの設定が必要。 下記の meta タグを<head></head>のなかに入れます。 <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@safetyinternetz" /> <meta property="og:url" content="http://safetyinternet001.ddns.net/" /> <meta property="og:title" content="安全にインターネットを楽しもう" /> <meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" /> <meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/001.jpg" /> 一つ目が、大きなカードで表示。 二つ目が、自分の Twitter アカウント 三つ目が、ホームページのアドレス。 四つ目が、タイトル。 五つ目が、HPの要約。 六つ目が、Twitter にアドレスを貼ったときに表示される画像。この画像部分を動的に変更したい。 ちなみに画像のパスは、相対パスではなく絶対パスで記述する必要があります。ご注意を。 この情報が入ったホームページを作成し、Card validatorというサイトで登録してみましょう。URL を入れて、Preview cardを押すと、URL を貼ったときに、どのような画像が表示されるかがわかります。 で、画像が 1 つだけの場合はこれで良いんですけど、複数の画像をひとつのサイトにつけたいときに少々問題があるわけです。 もともと svelte でつくったサイトで、svelte で動的に変えてもダメでした。 仕方なく php で変更することに……。 PHP で何をすれば良いのか？ OGP は、同じ URL ではひとつの画像しか生成されません。 よって異なる URL として認識させた上で、その URL に応じて画像を設定できればいいわけです。 つまり、http://safetyinternet001.ddns.net/?id=001 このときに 001 の画像を表示し、http://safetyinternet001.ddns.net/?id=002 このときに 002 の画像を表示すればいいわけです。 冒頭に下記のようなコードを入れてみましょう。 <?php if(!$_GET){ $id = '001'; } else { $id = $_GET['id']; } ?> PHP には詳しくないので動くだけのソースですが、GET で ID のパラメータがなければ自動的に 001 を設定、もしパラメータがあれば$idという変数に 002 とか 003 の数値が入るわけです。 さらに、さきほどの head 部分を少し変えてみましょう。 <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@safetyinternetz" /> <meta property="og:url" content="http://safetyinternet001.ddns.net/" /> <meta property="og:title" content="安全にインターネットを楽しもう" /> <meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" /> <meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/<?php echo "$id"?>.jpg" /> まあ画像のアドレスを id という変数にしただけです。 これで、さきほどのCard validatorでhttp://safetyinternet001.ddns.net/?id=201などを入れてみたら、201 の画像が表示されます。 あとは何かしらでhttp://safetyinternet001.ddns.net/?id=001～240とか、自分の用意した画像の分だけアドレスを作成し、BOT に突っ込めば URL を投稿したときに自動的に異なる画像が表示されるようになります。 僕が使っている BOT サービスはBot Birdです。 id=001とかの部分は、好きなようにつくっていいと思います。 僕は無骨に node.js で書いてみました。 const R = require("ramda"); const fs = require("fs"); const rangeArray = R.range(1, 243); console.log(rangeArray); const zeroPaddedArray = rangeArray.map((item) => item.toString().padStart(3, "0")); const write = (item) => { fs.appendFileSync( "./out.text", `http://safetyinternet001.ddns.net/?id=${item}` + "\n", (err) => { if (err) throw err; console.log("text追記"); } ); }; zeroPaddedArray.map((item) => write(item)); 普通に画像の個数（今回は 243 個）分の配列を作成し、padStartでゼロ埋めをし、テキストファイルに書き出すだけです。 ここで 243 個と画像が決まっていれば、php のほうで 243 以上の数字、あとは他の文字列だったら 001 にするとか、そういう処理を入れてもいいかも。 そんな感じで、1 時間に 1 回、違う画像で自分のホームページを Twitter で宣伝できるようになりました。
- 投稿日：2021-05-04T08:00:41+09:00
JavaScriptで入力チェックする方法（修正版）
スペースが入ると入力チェックを通過してしまうのと、入力漏れメッセージを配列に変えたほうが良いとのアドバイスを頂きましたので修正いたします。また修正前の記事でタグに誤りがあったのを発見したのでその部分も修正済みです。修正前の記事も勉強のため残します。 <!DOCTYPE html> <html lang="ja"> <style> body { padding:50px; background-color: greenyellow; } body #title { color:red; font-size : 50px; } body #name { width:200px; } body #mail { width:400px; } body #button1 { background-color: blue; } </style> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1 id = "title">送信フォーム</h1> <form action = "index4.html" method="POST"> Name:<input type="text" id="name"><br> Mail:<input type="email" id="email"><br> Detail:<textarea id="detail" value="detail" cols="50" rows="3" maxlength="150"></textarea><br> year：<select id = "year"> <option value="2021" id="2021">2021年</option> <option value="2022" id="2022">2022年</option> <option value="2023" id="2023">2022年</option> </select> month:<select id = "month"> <option value="1" id="1">1月</option> <option value="2" id="2">2月</option> <option value="3" id="3">3月</option> <option value="4" id="4">4月</option> <option value="5" id="5">5月</option> <option value="6" id="6">6月</option> <option value="7" id="7">7月</option> <option value="8" id="8">8月</option> <option value="9" id="9">9月</option> <option value="10" id="10">10月</option> <option value="11" id="11">11月</option> <option value="12" id="12">12月</option> </select> <input type="button" id="button1" value="送信" onclick="func1()"> </form> <div id="div1"></div> <script language="javascript" type="text/javascript"> //変数の定義 const name = document.getElementById('name'); const mail = document.getElementById('email'); const detail = document.getElementById('detail'); const button1 = document.getElementById('button1'); //入力チェック処理 const func1 = () => { const unfilledItems = []; if(name.value.replace(/\s+/, '').length === 0) { unfilledItems.push('名前'); } if(mail.value.replace(/\s+/, '').length === 0) { unfilledItems.push('メールアドレス'); } if(detail.value.replace(/\s+/g, '').length === 0) { unfilledItems.push('詳細'); } if(unfilledItems.length > 0) { alert(`${unfilledItems.join('、')}が入力されていません。`); } else { if (window.confirm('送信してもよろしいですか？')) { div1.innerText = `Name:${name.value}、Mail:${mail.value}、Detail:${detail.value}、year:${year.value}、month:${month.value}`; } } } </script> </body> </html>