https://atmarkit.itmedia.co.jp/ait/articles/1902/08/news028.html
javascript ファイルのダウンロードとボタン連打防止
javascript でファイルをダウンロードするプログラムを作成した。
ダウンロードを開始するボタンは連打できないよう対処した。
(download.html)
<script> function getFile(method, url, buttonid){ var request = new XMLHttpRequest(); request.onreadystatechange = function() { console.log(request.readyState); if(request.readyState === 1){ document.getElementById(buttonid).disabled = true; }else if(request.readyState === 4 ){ document.getElementById(buttonid).disabled = false; if(request.status === 200){ var link = document.createElement("a"); document.body.appendChild(link); link.href = window.URL.createObjectURL(request.response); link.download = url; link.click(); document.body.removeChild(link); } }else{ } }; request.open(method, url, true); request.responseType = "blob"; //Blobオブジェクトとしてダウンロードする var body = null; if( method === 'POST' ){ var formdata = document.getElementById("form_post"); var params = []; for( var i = 0; i < formdata.length-1; i++ ){ params.push(formdata[i].name + '=' + formdata[i].value); } body = params.join('&'); console.log(body); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } request.send(body); } </script> <form id="form_get"> <input type="button" value="get" name="get" id="button_get" onclick="getFile('GET','http://localhost:4567/get','button_get')"> </form> <form id="form_post"> <input type="text" name="a"> <input type="text" name="b"> <input type="button" value="post" name="post" id="button_post" onclick="getFile('POST','http://localhost:4567/post','button_post')"> </form>
指定したURLのファイルをダウンロードする関数getFile(method, url, buttonid)の引数は以下の通り。
method・・・get か post を指定する。
url・・・ファイルのurl。
buttonid・・・ダウンロード実行ボタンのid。ダウンロード中はこのボタンを無効にする。
ファイルをダウンロードさせるには?[JavaScript]
https://atmarkit.itmedia.co.jp/ait/articles/1603/30/news026.html
【メモ】XMLHttpRequestのイベントについて
https://qiita.com/ShinyaKato/items/64b6726c361f5377b0f3
ファイルデータを送る処理は sinatra で書いた。
(sendfile.rb)
require 'sinatra' before do response['Access-Control-Allow-Origin'] = '*' end get '/get' do sleep 5 send_file 'wallpaper.jpg' end post '/post' do sleep 5 logger.info "a:" + params[:a].to_s logger.info "b:" + params[:b].to_s send_file 'wallpaper.jpg' end
http://xxx/download.html から http://xxx:4567/xxx を呼び出すとCORS のエラーが出たので、response['Access-Control-Allow-Origin'] = '*' を追加した。テストなので。。
Access to XMLHttpRequest at 'http://localhost:4567/get' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
【Sinatra】CORS の設定をする
https://takagi.blog/sinatra-cors/
webサーバを起動し、ルートディレクトリにdownload.htmlを置く。
webブラウザで、http://xxx/download.htmlにアクセスする。
sendfile.rb は、ruby で実行する。
$ ruby sendfile.rb [2022-12-28 22:20:16] INFO WEBrick 1.4.2 [2022-12-28 22:20:16] INFO ruby 2.6.4 (2019-08-28) [x86_64-cygwin] == Sinatra (v3.0.3) has taken the stage on 4567 for development with backup from WEBrick [2022-12-28 22:20:16] INFO WEBrick::HTTPServer#start: pid=1078 port=4567 ...
get ボタンを押してみると、数秒間 get ボタンが無効になる。
post ボタンも、数秒間 post ボタンが無効になる。
テキストボックスに入力した値が、logger.info で表示できている。
$ ruby sendfile.rb [2022-12-29 01:08:07] INFO WEBrick 1.4.2 [2022-12-29 01:08:07] INFO ruby 2.6.4 (2019-08-28) [x86_64-cygwin] == Sinatra (v3.0.3) has taken the stage on 4567 for development with backup from WEBrick [2022-12-29 01:08:07] INFO WEBrick::HTTPServer#start: pid=1079 port=4567 I, [2022-12-29T01:08:21.755997 #1079] INFO -- : a:1 I, [2022-12-29T01:08:21.756392 #1079] INFO -- : b:2 ::1 - - [29/Dec/2022:01:08:21 +0900] "POST /post HTTP/1.1" 200 150788 5.0359 ::1 - - [29/Dec/2022:01:08:16 JST] "POST /post HTTP/1.1" 200 150788 http://localhost/ -> /post
選手の立ち位置が改善されることでサッカーの質がこれだけ上がるのか
「僕は22歳でアルテタ監督に出会って驚いた」冨安健洋が後輩に教えた、アーセナルの“超最先端な練習法”「日本では教わらなかったこと」
https://number.bunshun.jp/articles/-/855416
sudo su
sudoポリス「誰だ! 本番環境でsudo suしてるのは!」
https://qiita.com/keys/items/ba03b71fd34ebbff4c6e
本番環境で sudo su や sudo -s を使うのはよくない、と私は思います。
4軍制による弊害
【4軍制による弊害】ドラフトで大量14人育成指名のソフトバンク"4軍制導入"に里崎が物申す!【プロ野球】【現役ドラフト】
https://www.youtube.com/watch?v=FAKdrQokfL8
SKK
SKK に関するドキュメント
http://openlab.ring.gr.jp/skk/doc-ja.html
AquaSKK
https://aquaskk.osdn.jp/index.html
かな漢字変換プログラム SKK の紹介
https://emacs-jp.github.io/tips/skk-intro
AquaSKK で Sticky Shift を使う
https://attonblog.blogspot.com/2019/12/aquaskk-sticky-shift.html
Sticky Shift とは、変換の指定ポイントを大文字のアルファベットでは無く、特定の文字で指定する方法です。 例えば、';' を設定した場合、先程の「漢字と感じ」は ;kanji<space>to;kan;ji と入力できます。
AquaSKK プロジェクト::こんな機能もあります::使える『z』、便利な『z』
http://aquaskk.osdn.jp/inside_aquaskk/02.html
z / | ・ |
z SPACE | 全角スペース |
ヹ
ヹニスの商人
タブ文字をgrepしたい
Bashの文字列で特殊文字を使う方法
https://azisava.sakura.ne.jp/programming/0010.html#sec3-2
grep -e $'\t' file.txt