HTML】毎回ファイル名を変更して指定・実行したいプログラミングTwitterFacebook0はてブ0Pocket0LINELinkedIn2019.05.07Flaskでアプリを開発している時、ある問題に直面しました。HTMLで画像を指定する場合、srcでパスとファイル名を指定する必要がありますが、アプリの仕様上このやり方ではその都度ファイル名が変更するプログラム、または毎回違うファイル名を指定することが出来ません。今回はその方法を紹介します。・コードを書く(Python編)・コードを書く(HTML編)まとめスポンサーリンク・問題が発生した経緯FlaskでCSVファイルを取得して画像を生成するアプリを作っていたのですが、画像のファイル名が毎回変わる(CSVファイル名と同じにする)ためscvで指定できなかったのです。生成した画像をresult.pngにして、プログラムを実行するたびに内容を上書きするのを試したのですが、前の画像が生成されて断念。他に良い方法がないか探していたら、バックエンド(Python)でパスとファイル名を変数に渡して、HTMLでその変数を指定することが出来ると知りました。「コレだ!」と思いましたね。コレを応用すれば、いつも名前が変わるファイル名を的確に指定することはもちろん、リスト化してランダムに指定する、なんてことも出来るでしょう。・コードを書く(Python編)まずはPythonで必要なコードを書きます。Flaskの公式ページに載っているコードを基に、必要な部分を追加します。render_template("result.html")123456789101112131415161718192021222324importosfromflaskimportFlask,request,redirect,url_for,render_templatefromwerkzeugimportsecure_filenameUPLOAD_FOLDER="パス"ALLOWED_EXTENSIONS=["csv"]app=Flask(__name__)defallowed_file(filename):return'.'infilenameand\filename.rsplit('.',1)[1]inALLOWED_EXTENSIONS@app.route('/',methods=['GET','POST'])defupload_file():ifrequest.method=='POST':file=request.files['file']iffileandallowed_file(file.filename):filename=secure_filename(file.filename)file.save(os.path.join(UPLOAD_FOLDER,filename))returnredirect(url_for('uploaded_file',filename=filename))returnrender_template("index.html")@app.route('/uploads/<filename>')defuploaded_file(filename):os.path.abspath(UPLOAD_FOLDER+filename)returnrender_template("result.html")上記のupload_file関数でファイルを受け取り、その下のuploaded_file関数でファイルを表示することが出来ます。このままではファイル名をきっちり指定しないとプログラムが働かないので、uploaded_file関数にコードを追加します。".png")1234@app.route('/uploads/<filename>')defuploaded_file(filename):os.path.abspath(UPLOAD_FOLDER+filename)returnrender_template("result.html",img="パス"+filename+".png")returnの戻り値に注目すると、”result.html”の隣にimgの変数が追加されています。.png、とすることでcsvファイル名そのままを指定することが出来るのです。このままだと”~.csv.png”になるじゃん。ドットが2つ付いたらダメなんじゃないの?大丈夫なんです(迫真)なんかダメそうな気が(負けた気が?)しますけど、動くんです(白目)・コードを書く(HTML編)次に実行結果を表示するrusult.htmlに簡単な変更を加えます。公式ページにはresult.htmlが載っていませんが、画像を生成するなら基本は下記のようになるでしょう。<h2>画像が完成しました。</html>1234567891011<!DOCTYPEhtml><htmllang="ja"><head><metacharset="UTF-8"><title>Result</title></head><body><h2>画像が完成しました。</h2><imgsrc="パス/result.png"alt="result.png"></body></html>コレをこのように変更します。<h2>画像が完成しました。</html>1234567891011<!DOCTYPEhtml><htmllang="ja"><head><metacharset="UTF-8"><title>Result</title></head><body><h2>画像が完成しました。なっていることが分かります。Pythonで作った変数が組み込まれているのです。やってみると、マジ単純。まとめ以上、いつも名前が変わるファイル名を的確に指定、実行する方法の紹介でした。今回の方法を活用すれば、バックエンドのプログラムの都合でファイル名が変わっても、HTMLを書き換える必要がなくなります。単純かつ応用が効く手法ですね。IT関係シェアする:TwitterFacebook0はてブ0Pocket0LINELinkedIn魔威駆しれっと更新ブログ関連記事IT関係Ubuntuのストレージ不足が未割り当て領域を見つけて容量2.5倍UP今までちまちまと不要なファイルを削除して慢性的なストレージ不足を凌いでましたが、そもそも未割り当て容量があることを発見して、それを解放して12Gしか使用できなかったUbuntuストレージを一気に30Gまで使用可能にした方法を紹介をします。APIの申請をして、翌日に承認をもらいました。2018年の後半からTwitt...暮らしランサーズでシルバーランクになったから、なれる方法とメリットを記すまだ2件しか案件を請け負っていないんですけれども、ボクも晴れてランサーズでシルバーランク認定されたました。最近ランサーズを始めたばかりなのでまだ分からない事もありますが、せっかくなれたことですし、この体験...プログラミング【Python3】PycharmからBeautifulSoupをインストールpythonでWebスクレイピングするにあたり、メッチャ便利なのがBeautifulSouというパッケージ。コレを使ってHTMLの構文解析をしますが、コマンドラインでBeautifulSoupをインストールし...プログラミング【Python】自動で(次へ)ボタン&サイトを全スクレイピングWebスクレイピングで現在のページにある情報が取れるようになっても、他のページにある情報はどうすれば取れるでしょうか。この記事は(次のページ)ボタンを自動で押してサイト情報を全スクレイピングする方法を紹介します。プログラミング【Python】LINEでメッセージを自動で通知させる以前、Gmailでメッセージを送信する方法を紹介しました。GmailとLINEの両方を使い分けることが出来れば良いね。魔威駆IT関係や自転車ロードレースなど手広く扱うブログを運営しています。日本で2番目に有名なマテ茶特化ブログの管理人もやってます。魔威駆IT関係や自転車ロードレースなど手広く扱うブログを運営しています。日本で2番目に有名なマテ茶特化ブログの管理人もやってます。フィクション未分類カテゴリー別人気記事seleniumで要素が取得できない時はこの6つで乗り切れ!2019.07.222020.01.30【Python】スクレイピングで得た情報をGmailで送信する2019.03.212019.07.23【Python3】PycharmからBeautifulSoupをインストール2019.02.032019.03.11【入門】Pythonで初Webアプリ開発!作り方&必要な知識を語る2019.04.292020.01.22【Python】LINEでメッセージを自動で通知させる2019.03.252019.03.27スポンサーリンク。