全探索

February 6, 2023

問題

$ N $ 個の商品があり、商品 $ i (1 \leqq i \leqq N)$の価格は $ A_i $ 円です。

異なる３つの商品を選び、合計価格をちょうど1000円にすることができるでしょうか。

答えをYesかNoで出力して下さい。

[制約]
🔹$ 3 \leqq n \leqq 100 $

解き方・ソースコード

この問題は３重ループを使うことで解くことができます。

１つめのループは全商品をチェックするために、$ N $ 回実行します。

２つめのループは１つめの商品と同じ商品を選ばないように、$ N - 1 $ 回実行します。

３つめのループは１つめ、２つめの商品と同じ商品を選ばないように、$ N - 2 $ 回実行します。

３重ループの中では、選んだ３つの商品の合計が1000円かどうかを確認します。

[Google Colaboratory]

#--------- 入力例1 ----------
N = 3
A = [200, 300, 400]
#--------- 入力例2 ----------
# N = 5
# A = [100, 200, 300, 400, 500]
#----------------------------
def check(n, a):
    for i in range(n):
        for j in range(i + 1, n):
            for k in range(j + 1, n):
                if a[i] + a[j] + a[k] == 1000:
                    return "Yes"
    else:
        return "No"

print(check(N, A))

[実行結果(入力例1)]

No

与えられた３つの価格では1000円になることはないので、解はNoとなります。

[実行結果(入力例2)]

Yes

与えられた５つの価格のうち、[100, 400, 500]を選択すると1000円になりますので、解はYesとなります。

PyScript⑬（Bokeh）

February 5, 2023

Bokeh

PyScript内から、Bokehを使って折れ線グラフを表示します。

まずBokenライブラリを使うため、headタグに下記のようにCDN（コンテンツ配信ネットワーク）を設定します。

1	<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>

次にpy-configタグにbokehとnumpyを指定します。

そしてpy-script内では、Bokeh関連ライブラリをいろいろとインポートし、その後でBokenライブラリを使って図形オブジェクトを作成します。

最後にjson.dumps関数とBokeh.embed.embed_item関数を使ってブラウザ上に折れ線グラフを表示します。

（ざっくりとした説明になってしまいましたが、詳しくは下記のサンプルコードをご参照ください🙇‍♂️）

[ソースコード]

bokeh.html

<html>
  <head>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>

    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <div id="mpl"></div>

    <py-config>
      packages = ["bokeh", "numpy"]
    </py-config>

    <py-script>
      import json
      import pyodide

      from js import Bokeh, console, JSON

      from bokeh.embed import json_item
      from bokeh.plotting import figure
      from bokeh.resources import CDN

      d = [0, 1, 4, 9, 16]
      p = figure()
      p.line(range(len(d)), d) #     第1引数がx軸、第2引数がy軸

      p_json = json.dumps(json_item(p, "mpl"))  # pは図形オブジェクトで、"mpl"はHtml上のDiv-IDを指定
      Bokeh.embed.embed_item(JSON.parse(p_json))

    </py-script>

  </body>
</html>

[ブラウザ表示]

PyScript内で作成したBokehの図形オブジェクトを、ブラウザ上で表示することができました😊

PyScript⑫（Matplotlib）

February 4, 2023

Matplotlib

PyScript内から、Matplotlibを使って折れ線グラフを表示します。

まずpy-configタグにmatplotlibを指定し、PyScriptタグでmatplotlibライブラリをインポートします。

そしてpy-script内で、matplotlibライブラリを使って単純な折れ線グラフを描画し、最後にdisplay関数を使ってHtml上に折れ線グラフを表示します。

[ソースコード]

plotly1.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <div id="mpl"></div>

    <py-config>
      packages = ["matplotlib"]
    </py-config>

    <py-script>
      import matplotlib.pyplot as plt
      data = [2, 4, 6, 3, 5, 8, 4, 5]
      plt.plot(data)
      display(plt, target="mpl")
    </py-script>

  </body>
</html>

[ブラウザ表示]

PyScript内で作成したmatplotlibの図形オブジェクトを、ブラウザ上で表示することができました。

PyScript⑪（Plotlyで折れ線グラフ表示）

February 3, 2023

Plotlyで折れ線グラフ表示

PyScript内から、Plotlyを使って折れ線グラフを表示します。

まずpy-envタグにpandasとplotlyを指定し、PyScript内からこの２つのライブラリをインポートします。

（Plotlyライブラリの中ではPandasライブラリを使用しています。）

次にpy-scriptタグ内では、折れ線グラフを表示するグラフオブジェクトを作成し、そのオブジェクトをjson.dump関数でjson化します。

その際、引数にはcls=plotly.utils.PlotlyJSONEncoderを指定するのがポイントです。

json化した図形オブジェクトは、JavaScript内のJSON.parse関数でオブジェクト化し、最後にPlotly.newPlotを使って描画します。

[ソースコード]

plotly1.html

<html>
<head>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

    <py-env>
        - pandas
        - plotly
    </py-env>
</head>

<body>

    <div id="chart1"></div>

    <script type='text/javascript'>
        function plot(graph, chart) {
            var figure = JSON.parse(graph)
            Plotly.newPlot(chart, figure);
        }
    </script>

    <py-script>
        import js, json
        import pandas as pd
        import plotly
        import plotly.express as px

        fig = px.line([[1, 1], [2, 5], [3, 4], [4, 8], [5, 2]])
        graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
        js.plot(graphJSON, "chart1")
    </py-script>

</body>
</html>

[ブラウザ表示]

PyScript内で作成したPlotlyのグラフオブジェクトを、ブラウザ上に表示することができました。

PyScript⑩（JavaScriptからPyScriptの関数を使う）

February 2, 2023

JavaScriptからPyScriptの関数を使う

Pyodideのランタイム（PyScript.runtime）を使うと、JavaScriptからPyScriptの変数だけでなく関数を使用することもできます。

例えばPythonのsort関数を使用するためには、JavaScript内でpyscript.runtime.globals.get('sorted')とし、取得した関数に並べ替えるデータ（配列）を渡します。

[ソースコード]

p2j.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>

    <!-- クリックすると'Apple', 'Banana', 'Candy', 'Donut'を並び変えます。 -->
    <button onclick="sortInPython(['Candy', 'Donut', 'Apple', 'Banana'])">Sort In Python And Log</button>
    <script>
        function sortInPython(data){
            js_sorted = pyscript.runtime.globals.get('sorted') // Pythonのsort関数を取得
            const sorted_data = js_sorted(data) // Pythonのsort関数を使って並び変え
            for (const item of sorted_data){
                console.log(item)
            }
        }
    </script>

  </body>
</html>

[ブラウザ表示]

ボタンをクリックすると、コンソール（開発ツール）に配列データが並び変えられて表示されることを確認できます。

JavaScriptからPyScriptのsort関数を使うことができました。

PyScript⑨（JavaScriptからPyScriptの変数を参照）

February 1, 2023

JavaScriptからPyScriptの変数を参照

Pyodideのランタイム（PyScript.runtime）を使うと、JavaScriptからPyScriptの変数を参照することができます。

PyScript内のグローバル変数を参照するためにはJavaScriptにpyscript.runtime.globals.get('変数名')というように記述します。

[ソースコード]

p2j.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>

    <py-script>x = 42</py-script>

    <button onclick="showX()">Click Me to Get 'x' from Python</button>
    <script>
        function showX(){
            alert(`In Python right now, x = ${pyscript.runtime.globals.get('x')}`)
        }
    </script>

  </body>
</html>

[ブラウザ表示]

JavaScriptからPyScriptの変数を参照することができました。

PyScript⑧（PyScriptからJavaScriptをコール）

January 31, 2023

PyScriptからJavaScriptをコール

PyScriptからは、JavaScriptの変数を読み込んだり、JavaScriptの関数をコールしたりすることができます。

PyScriptからJavaScriptの変数や関数をインポートするためにはfrom js import ...と宣言します。

単純なJavaScriptの変数は、同等のPythonのデータ型にコンバートされます。（暗黙的コンバート）

より複雑なオブジェクトはJSProxyオブジェクトにラップされ、Pythonオブジェクトのように動作します。

[ソースコード]

j2p.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <script>
    name = "Guido" // JavaScriptの変数
    function addTwoNumbers(x, y){   // JavaScriptの関数
        return x + y;
    }
  </script>

  <body>
    <py-script>
      # PythonからJavaScriptの変数と関数をインポートする
      from js import name, addTwoNumbers

      print(f"Hello {name}")
      print("Adding 1 and 2 in Javascript: " + str(addTwoNumbers(1, 2)))
    </py-script>
  </body>
</html>

[ブラウザ表示]

PyScriptからJavaScriptの変数を参照したり、JavaScriptの関数をコールしたりすることができました。

PyScript⑦（print関数）

January 30, 2023

print関数

ブラウザ上に一番簡単にデータを表示する方法はprint関数を使うことです。

Python開発者にもっともなじみのあるprint関数をPyScriptで使用するとpy-terminal要素にデータを表示することができます。

[ソースコード]

print.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <button py-click="print_to_page()" id="print">Print Things!</button>

    <py-script>
    def print_to_page():
      print("I print things!")
    </py-script>

  </body>
</html>

[ブラウザ表示]

ボタンを押すと、ブラウザにすでに表示されている要素（今回のサンプルではボタンのみ）の下に黒いキャンバスが現れ、その中にprint関数で指定した文字列が表示されます。

この黒いキャンバスがpy-terminal要素です。

PyScriptでは、デフォルトで標準出力と標準エラーがこのpy-terminal要素に表示されます。

またpy-terminalタグをHtml上に明示的に指定することで、特定の位置にpy-terminal要素を表示することもできます。

PyScript⑥（display関数）

January 29, 2023

display関数

APIのdisplay関数を使うと、簡単にブラウザ上にコンテンツを表示することができます・

このdisplay関数では、文字列だけではなくイメージやマークダウン、SVGデータ、jsonも表示することができます。

サンプルコード

APIdisplay関数の第１引数には、ページに表示するデータを設定します。

また必ずtargetパラメータを指定して、どこにコンテンツを表示するかを設定する必要があります。

[ソースコード]

clock.html

<html>
  <head>
  <title>Writing to the page</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <div id="display-write"></div>
    <button py-click="display_to_div()" id="display">Say Things!</button>

    <py-script>
    def display_to_div():
      display("I display things!", target="display-write")
      # display("I display things!", target="display-write", append=False)  # 追記しない
    </py-script>
  </body>
</html>

[ブラウザ表示]

ボタンを押すと、display関数で表示したデータが表示されることを確認できます。

ただ、ボタンを押すたびに何度も文字列が表示されてしまうのは困りますが、これはappendパラメータにFalseを設定することで対処できます😊

PyScript⑤（クリック）

January 28, 2023

クリック

ボタンクリックを検知して、文字列を表示するサンプルを作成します。

ボタンクリック時にはPyScript内の、Pythonで定義した関数で処理を行います。

サンプルコード

まず、manual-writeというidのdiv要素を作成します。

次にpy-scriptタグ内に、関数write_to_pageを定義しボタンクリック時の処理としてmanual-write要素のテキストに”Hello World”を設定するコードを書きます。

ボタンにはpy-click属性に上記で定義した関数write_to_page()を設定します。

なおpy-click属性を使う際には、合わせて任意のid属性を設定する必要がありますので注意して下さい。

[ソースコード]

clock.html

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <div id="manual-write"></div>
    <button py-click="write_to_page()" id="manual">Say Hello</button>

    <py-script>
    def write_to_page():
      manual_div = Element("manual-write")
      manual_div.element.innerText = "Hello World"
    </py-script>
  </body>
</html>

[ブラウザ表示]

ボタンをクリックすると、ボタンの上に「Hello World」という文字列が表示されることを確認できました。