curlコマンドでHTMLのformでの画像送信を代替する方法です。

このページはhttps://np-sys.com/に移動しました

どうも7noteです。web用に画像を書き出し保存した時に、なんか1pxズレる問題の解決法

「横幅1000pxの画像のはずなのに、書き出すと1001pxになってしまう！」

フォトショップで確認するとこんな感じに薄い1px分の領域ができてしまう。

原因は表示位置にありました。

原因は、画像の配置されている位置が「xx.15px」のように小数点が使われているのが問題でした。

対策方法

X座標とY座標を整数にしてから書き出し保存することで解決できます。

（私はいつも0⇒tab⇒0と入力してから書き出し保存しています。）

まとめ

特にjpgの画像などを書き出すと、淵が1px分白っぽくなるのですが、
書き出すときに対策をすることで解決することができるので、覚えておいて損はないと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

input

checkedを使う。
デフォルトでチェックしてある状態になる。
if文で1か0かで表示を変えるなど。

<input(type="radio" name="gender" value="1" checked)>

select

selectedを使う。
selectedを入れた値がデフォルトで選ばれる。
以下の場合では1。

<select name="age">
<option value="1" selected>
<option value="2">
<select>

備忘録として残しておきます。

HTML

tab.html

<div class="tab">
    <ul class="nav-tabs">
      <li class="active"><a href="#tabs1" data-toggle="tab">あ行</a></li>
      <li><a href="#tabs2" data-toggle="tab">か行</a></li>
      <li><a href="#tabs3" data-toggle="tab">さ行</a></li>                
      <li><a href="#tabs4" data-toggle="tab">た行</a></li>
      <li><a href="#tabs5" data-toggle="tab">な行</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="tabs1">
        <p>あいうえお</p>
      </div>
      <div class="tab-pane" id="tabs2">
        <p>かきくけこ</p>
      </div>
      <div class="tab-pane" id="tabs3">
        <p>さしすせそ</p>
      </div>
      <div class="tab-pane" id="tabs4">
        <p>たちつてと</p>
      </div>
      <div class="tab-pane" id="tabs5">
        <p>なにぬねの</p>
      </div>
    </div>
</div>

CSS

tab.css

ul {
  list-style: none;
}
li {
  margin-top: 10px;
}
a {
  text-decoration: none;
  color: #000000;
  padding: 5px 30px;
  border-radius: 20px;
}
.tab{
  display: flex;
}
.tabs > li > a {
  padding: 11px 25px;
  min-width: 100px;
  text-align: center;
  border: 2px solid #e8e8e8;

}
 li.active a {
  color: #fff;
  border-color: #000000;
  background-color: #000000;
 }
.tab-content{
  padding: 0 80px;
  margin-top: 10px;
}
.tab-content .tab-pane { 
  display: none;
 }
.tab-content .active { 
  display: block;
 }

jQuery

tab.js

$(".nav-tabs a").on("click", function() {
  $(this).parent().addClass("active").siblings(".active").removeClass("active");
  var fade = $(this).attr("href");
  $(fade).addClass("active").siblings(".active").removeClass("active");
    return false;
});

結果

あ行をクリックすると、あ行だけ表示され

か行をクリックすると、か行だけ表示されます。

参考リンク

https://www.design-memo.com/coding/jquery-tab-change

①条件式を三択以上で使用したい

 const answer = window.prompt('ヘルプを見ますか？');
  if(answer === 'yes') {
    window.alert('タップでジャンプ、障害物をよけます。');
  } else if(answer === 'no') {
    window.alert('ゲームを起動中...');
  } else {
    window.alert('yesかnoでお答えください。');
  }

基本的にelseとifを組み合わせるだけで何択でも大丈夫そうです。

②数当てゲーム

const number = Math.floor(Math.random() * 6);
const answer = parseInt(window.prompt('数当てゲームです。0~5の数字を入力してください。'));
let message;
if(answer === number) {
  message = '当たり！'
} else if(answer < number) {
  message = '残念でした！もっと大きい';
} else if(answer > number) {
  message = '残念でした！もっと小さい';
} else {
  message = '0~5の数字を入力してね。';
}
window.alert(message);

使用したのはMath.floor(Math.random() * x)とparseInt(window.prompt())
前者は0~(x-1)の整数をランダムに代入する為のコードで、後者は文字列(window~)を数値に変換する為のコードです。
条件式で変数messageに代入する値を決めて最後に表示するといった流れになります。

③時間毎に異なるメッセージを表示

const hour = new Date().getHours();

if(hour >= 19 && hour < 21) {
  window.alert('お弁当30%OFF！');
} else if(hour === 9 || hour ===15) {
  window.alert('お弁当一個買ったら一個おまけ！');
} else {
  window.alert('お弁当はいかがですか');
}

使用したのはnew Date().getHours()、演算子&&と||です。
現段階では.getHours()はページを開いた時刻を24時間時計で取得するくらいに捉えています。
演算子&&はドモルガンの法則のA∩Bで、複数の条件全てに当てはまった時Trueになります。
演算子||はA∪Bで、複数の条件のうち一つ以上当てはまった時Trueになります。

データ分析会社ならいざ知らず、製造業やWeb制作会社だとPythonをインストールしているのが自分のPCだけだったりします。そんな時、PythonをインストールしていないPCでもMatplotlibでグラフを生成し、画像としてダウンロードする方法をメモします。

これにより、

• 誰にでもMatplotlibで生成したグラフにアクセスしてもらえる環境を構築する
• 自分のPCが非力な時、性能の良いサーバで画像を生成して効率化を図る
• めちゃめちゃ重いデータをあらかじめグラフ作成しておいてすぐ提供できるようにする

ことができるようになります。

方法と項目

方法は下記のとおりです。

• WebAPIを作成し、あるURLを叩いたらPythonの関数が走るようにする
• その関数の中でMatplotlibで画像を生成し、returnする

この記事ではそれぞれについて説明した後、さらに

• 本番環境でも耐えられるようにクラウドサービスの一つであるGCFにデプロイする方法と、
• そのAPIを叩いてcanvas要素に描写するHTMLのサンプル作成

まで記載します。
実際のところ、Flaskで返すのはグラフではなくデータにして、ユーザー側でJavaScriptのChart.jsなどで描写することの方が望ましいとは思います。でも、結構Matplotlibで凝ったグラフを作るとこういうことやりたくなりますよね。Geekな気分の時にお役に立てるとうれしいです。

FlaskでWebAPIを作成し、あるURLを叩いたらPythonの関数が走るようにする

これはFlaskで簡単に作成します。とりあえず自分だけに公開します。

main.py

# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    name = "Hello World"
    return name

if __name__ == "__main__":
    app.run(debug=True)

これを実行するとこうなります。

 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with fsevents reloader
 * Debugger is active!
 * Debugger PIN: 280-448-684

http://127.0.0.1:5000　にアクセスするとこう表示されます。

もし同一ネットワーク内の他のPCからも見られるようにしたいなら、最後の部分をこうします。

main.py

app.run(debug=False, host='0.0.0.0', port=5000）

host=''0.0.0.0'をしていることで可能になります。あとはネットワーク内の自身のIPを調べて、http://xx.xx.xx.xx:5000でアクセスできるようになります。

以上がFlaskでの簡単のWebAPIの作成です。これについてはQiitaにたくさん記事あると思いますので次行きます。

関数の中でMatplotlibで画像を生成し、returnする

先ほどの関数の中でグラフを生成して、文字列の代わりにグラフをリターンすることにします。

main.py

# -*- coding: utf-8 -*-
import io
import numpy as np
import matplotlib
import matplotlib.pyplot as plt
matplotlib.use('Agg')
from flask import Flask, send_file

app = Flask(__name__)

@app.route('/')
def hello():
    image = io.BytesIO()
    x = np.linspace(0, 10)
    y = np.sin(x)
    plt.plot(x, y)
    plt.savefig(image, format='png')
    image.seek(0)
    return send_file(image,
                     attachment_filename="image.png",
                     as_attachment=True)

if __name__ == "__main__":
    app.run(debug=True)

ポイントは２つあって、一つはmatplotlib.use('Agg')という部分と、二つ目はsavefigの部分でメモリ上でファイを書き出していることです。

matplotlib.use('Agg')

FlaskはGUIをサポートしていないので、Aggがないとエラーで落ちます。

ioモジュールを使ってメモリ上でファイルを書き出し

ローカルで動かす場合は、普通にHDD（SSD？）にjpgなどで書き出しても問題ないと思いますが、クラウドなどだとローカルへのアクセスが禁止されていることが往々にしてあります。この場合に備えて、メモリ上でファイルの読み書きを行うioモジュールを使って、ローカルに書き出すことなく画像を出力します。

http://127.0.0.1:5000　にアクセスすると勝手にダウンロードしてくれます。

開くとちゃんと画像になってます。

実際は、URLを叩く時にクエリパラメータを付与して、それに基づいてデータを読み込んでグラフかすると思います。

以上でとりあえず動作するようになりましたが、下記の２つの問題があります。

• Flaskの簡易サーバで実行していること
• 通信は暗号化されていないこと

Flaskの簡易サーバで運用することは元々推奨されていないですし、httpsではなくhttpでアクセスしていることからわかるように通信は暗号化されていません。これでは実用に耐えられるものではありません。

そこで、この辺の本番環境への移行を簡単にしてくれるサービスとして、AWS,Herokuなどのクラウドサービスが登場するわけですが、今回はGoogle Cloud PlaftformのCloudFunctionsでデプロイします。勝手にSSL化もしてくれます。AWSならlambdaがGCFに相当します。

GCPのCloud Functionsでホスティングする

Cloud Functionsでホスティングするには、GCPを契約した後、SDKをダウンロードして、GCFの設定を完了する必要があります。最初は訳分からなくて少し大変でしたがクラウドは応用範囲広いので頑張りたいところです（自分に言ってる）。

GCFについてはこちら
https://cloud.google.com/functions/docs/quickstart-console

GCFですが、欠点としてデプロイに時間がかかることがあります。したがって、開発時は自分のローカル環境でエミュレート（クラウドの環境を再現）して開発し、うまく行ったらデプロイする流れになります。エミュレートしないと開発効率が非常に落ちました。

ローカルでエミュレートする

ローカルでエミュレートするには、少し特殊な設定が必要です。SDKに加えて、pipでfunctions-frameworkというものをインストールします。

pip install functions-framework


デプロイしたいファイルを用意します。GCFの場合、必ずmain.pyという名前で作成する必要があります。

main.py

# -*- coding: utf-8 -*-
import matplotlib.pyplot as plt
import io
import numpy as np
import matplotlib
matplotlib.use('Agg')
from flask import Flask, send_file


def hello(request):
    image = io.BytesIO()
    x = np.linspace(0, 10)
    y = np.sin(x)
    plt.plot(x, y)
    plt.savefig(image, format='png')
    image.seek(0)
    return send_file(image,
                     attachment_filename="image.png",
                     as_attachment=True)

main.pyのファイルのあるフォルダでターミナルを開いて、下記を打ち込むとエミュレートしてくれます。

functions-framework --target=hello  --port=8080

あとはhttp://localhost:8080/にアクセスするだけです。
なお、WindowsでAnacondaの場合は、anaconda prompt経由でcdで移動してコマンド打つ必要があります。また、 http://0.0.0.0:8080/ではなく localhost:8080/でアクセスします。

詳しくはこちら。
https://github.com/GoogleCloudPlatform/functions-framework-python

いよいよ本番環境へデプロイします。

本番環境へデプロイする

本番環境でデプロイする場合、ファイルの存在するフォルダで下記を実行します。もし標準モジュール以外のものを使う場合、同じ階層にrequiremet.txtというテキストファイルを作成し、使用するライブラリを一つずつ記載する必要があります。今回で言うとmatplotlibとnumpy、Flaskの記載が必要です。

requirements.txt

Flask==1.1.2
matpolotlib==3.3.2
numpy1.19.2

基本的には、pip listで表示した自分の使ったライブラリのバージョンを記載すればOKですが、ランタイム環境が開発とデプロイ先で異なる場合は注意が必要です。例えば自分はPython３.６で開発していて標準のランタイムであるPython３.７にデプロイする場合、使っていたライブラリのバージョンがデプロイ先のランタイムではサポートされていないことがあります。この場合、意味不明のエラーでデプロイできませんので注意してください。

諸々準備したら、下記のコマンドでデプロイします。

 gcloud functions deploy hello --runtime python37 --trigger-http --allow-unauthenticated

あとはコンソールにデプロイ先のURLが表示されるので環境です。httpsでアクセスできるようになって、SSL化もバッチリです。

最後にHTML側のコードの紹介です。

APIを叩いてcanvas要素に描写する

これまではURLを直接叩いてましたが、APIを叩いてcanvas要素に描写するHTMLも載せておきます。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" 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>

    <title>bootstrapとjquery</title>

  </head>
  <body>

<main>
<article>
  <section>
       <input type="button" value="Start" onclick="main();"/>
        <canvas style="height: 30vw;width:50vh"></canvas>
  </section>
</article>
</main>

<script language="javascript" type="text/javascript">

    function main(){
      var canvas = document.getElementsByTagName('canvas');
      var ctx = canvas[0].getContext('2d');

      var img = new Image();
      img.src = 'http://0.0.0.0:5000';//FlaskでホスティングしたURL

      img.onload = function() {
        img.style.display = 'none'; // ようわからん
        console.log('WxH: ' + img.width + 'x' + img.height)

        ctx.drawImage(img, 0, 0);
        var imageData = ctx.getImageData(0, 0, img.width*2, img.height*2)

        for(x = 0 ; x < 1000 ; x += 10) {
          for(y = 0 ; y < 1000 ; y += 10) {
             ctx.putImageData(imageData, x, y);
          }
        }
      };    }
</script>


  </body>
</html>

ボタンを押したらURLを叩いて、canvas要素へ描写してくれます。

最後に

実際のところ、Flaskで返すのはデータにして、ユーザー側でJavaScriptのChart.jsで描写することの方が望ましいとは思います。でも、結構Matplotlibで凝ったグラフを作るとこういうことやりたくなりますよね。Geekな気分の時にお役に立てるとうれしいです。

この記事が役に立ったと思ったらLGTMお願いいたします

justify-contentの種類

justify-contentは大きな分類として「位置による配置」と「均等配置」があります。
それぞれの配置方法で値を列挙します。

【位置による配】
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

【均等配置】
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

これだけあります。ただ実際に良く使うものとしては以下になります。

【よく使う値】
justify-content: center;
justify-content: flex-start;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

今回はこのよく使う5つに焦点を当てて解説していきたいと思います。

そもそもjustify-contentとは

簡単に言ってしまうと。
flexboxにおける、コンテナ内のアイテムの整列をするプロパティです。
整列というのは、ExcelやWordにもある、文章の中央揃えや文字の間隔を空ける機能をイメージに近いです。

一応大前提として、flexboxの親クラスをコンテナ、子クラスをアイテムと言います。
これがわからないと理解出来ないのでしっかり区別しましょう。

それぞれの特徴

justify-content: space-between;

１番目のアイテムと最後のアイテムを両端に設置し、残りのアイテムを等間隔に配置します。
値の部分の英語の意味を理解するとより分かりやすくなります。

space→空白
between→間

アイテムとアイテムの「間」に「空白」を入れる。と考えといいでしょう。
また「空白」は当分された値が配置されます。以下参照。

一番イメージしやすい値だと思います。使用頻度も高いです。

justify-content: space-around;

ちょっと考え方が難しいです。まずは英語の意味を理解します。

space→空白
around→周り

アイテムの「周り」に「空白」が均等に配置されます。
言葉だけだと難しいので画像と図を作りました。

アイテムの周りに同じサイズのmarginをつけてる感じです。使用頻度としては、これも結構使われます。

justify-content: space-evenly;

一見「space-around」に近いですが、全ての「空白」が「均等」に配置されます。
英語の意味通りです。

space→空白
evenly→均等

空白が全て均等なので非常に分かりやすい値です。使用頻度としては、これも結構使われます。またspace-aroundとどっちを使うかよく迷います。

justify-content: center;

これは簡単です。コンテナの中心にアイテムが配置されます。

justify-content: flex-start;

これも簡単なのですが、使い所に関しては悩むところがあります。コンテナの「左」から配置が始まります。
ちなみにflex-endだと「右」から配置されます。
正直今のところ「justify-content:normal;」「justify-content:start;」と違いが分からないです。(わかる人いたら教えて)
ただしレスポンシブで値を上書きする時によく見かけます。

最後に

今回はだいぶ内容が薄くなってしまいました。
ただjustify-contentはdisplay:flex;とセットでよく使うので復讐になってよかったです。
それぞれ実際に使う際に気をつけないと行けない点があってそれも記事にしたかったのですが時間の関係でまとめられませんでした。手が隙次第まとめていきます。

30代からのプログラミング勉強　1日目

ズブズブの素人(おっさん)備忘録。
学習は主にUdemyを活用。
アウトプットによる理解度確認として日々投稿していく予定。

どうぞよしなに。

学習コースと内容

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

導入部からという事でVisual Studio Codeのインストールや設定から行い簡単なHTMLの動作について動画内容を真似をしつつ学習。

学習したHTMLタグ

見出し（6段階ある）

<h1><h/1>

行（という表現でいいのか...）

<p></p>

input（nameは必須。他は必要に応じて）

<input type="" name="" value="">

所感

動画コンテンツなので直接動作を見ながら学習できる点は初心者の私から見ても進めやすいと感じた。
あと、Chromeで即反映するのはとても楽しい。

番外

Markdown記法？なんだこれ慣れてないと時間かかる...けど、これもこれで楽しかったり。

学ぶべき事は膨大だがこれに限らず引き続き楽しみながらの学習ライフとしていきたいと思うのであった。(ここまで書くだけで1時間かかったけど笑)