前回の記事、 「D-Waveの実機を使ったガチャの実践pythonコードを公開！みんなで量子コンピュータや量子アニーラで一万連ガチャしよう！」<a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-attribute">https</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">://blueqat.com/yuichiro_minato/</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">3</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">eaae</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">4</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">a</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">2</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">-</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">8</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">b</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">62</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">-</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">4660</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">-</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">8</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">bb</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">6</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">-</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">8</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">cd</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">8351</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank">c</a><a href="https://blueqat.com/yuichiro_minato/3eaae4a2-8b62-4660-8bb6-8cd8351c6745" rel="noopener noreferrer" target="_blank" class="hljs-number">6745</a> では、pythonの実際の実行コードを確認しました。今回はこれをウェブアプリとして完成させるために、フロントエンドのアプリ側のhtmlコードと、それを受けるサーバーサイドのフレームワークを確認します。 <h2>flaskコード</h2>早速サーバーサイドを先に見てみます。前回はpythonでのコードを確認しました。前回は問題をイジングの式で作り、それからD-Waveに投げてガチャをとってました。今回はアプリから指令がきたらD-Waveに問題をなげ、それをアプリ側に返します。 <h2>インストール</h2> <pre class="ql-syntax" spellcheck="false">pip install flask
</pre> ツール自体は、Flask,request,render_templateを使います。 <pre class="ql-syntax" spellcheck="false">from flask import Flask,request, render_template

app = Flask(__name__)
token = &#34;ここにtoken&#34;

@app.route(&#39;/&#39;)
def hello():
  return render_template(&#34;main.html&#34;)

@app.route(&#39;/api/&#39;)
def main():
  qubo = np.array([[0,-2,10],[0,0,-1],[0,0,-0.5]])
  bqm = dimod.BQM.from_numpy_matrix(qubo)

  response = EmbeddingComposite(DWaveSampler(endpoint=&#39;https://cloud.dwavesys.com/sapi&#39;, token=token, solver=&#39;Advantage_system1.1&#39;)).sample(bqm, num_reads=1)
  a = list(response.first.sample.values())

  if a == [1,0,0]:
    b = &#34;4&#34;
  elif a == [1,1,0]:
    b = &#34;1&#34;
  elif a == [0,0,0]:
    b = &#34;3&#34;
  else:
    b = &#34;2&#34;

  return b

if __name__ == &#39;__main__&#39;:

        app.run(host=&#39;0.0.0.0&#39;)
</pre> 基本的には、インターフェイスはtemplatesのフォルダに入れます。/api/をエンドポイントとして、getで処理しました。quboを設定し、BQMに落とします。また、D-Wave側にはエンドポイントとtokenを設定し、Advantage System 1.1をしています。サンプリングの回数は1回。そして、戻ってきた結果を配列に直して、レア度と対応させます。あとはフロントエンドに戻すので、returnで設定した値を返します。 あとは、サーバーを立ち上げます。 <pre class="ql-syntax" spellcheck="false">python3 hello.py
</pre> などと実行すればサーバーが立ち上がります。portはデフォルトで:5000になっていますので、ローカルもしくはクラウド上で設定してみてください。 <h2>フォルダ構成</h2> <pre class="ql-syntax" spellcheck="false">hello.py
-templates
 main.html
</pre> フォルダ構成はシンプルです。flaskで実行するpythonファイルと、テンプレートが入っています。次にテンプレートhtmlを解説します。 <h2>htmlファイル</h2>アプリ側はなんでも良いのですが、今回はウェブアプリとしてhtmlにしました。 <pre class="ql-syntax" spellcheck="false">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1, shrink-to-fit=no&#34;&gt;
&lt;link rel=&#34;stylesheet&#34; href=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&#34; integrity=&#34;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&#34; crossorigin=&#34;anonymous&#34;&gt;
&lt;style&gt;
body{font-family:courier;}
.table-bordered{border:3px solid black;}
.table-bordered tr:nth-child(3n){border-bottom:2px solid black;}
.table-bordered td:nth-child(3n){border-right:2px solid black;}
.table td{padding:0;}
input{-webkit-appearance:none;border:0;background:none;text-align:center;font-weight:bold;line-height:35px;}
.answer{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:37px;font-weight:bold;color:skyblue;opacity:0.6}
.result{color:red;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&#34;container&#34; style=&#34;margin-top:20px&#34;&gt;
&lt;div class=&#34;row&#34;&gt;
&lt;div class=&#34;col-12&#34;&gt;
&lt;img src=&#34;ガチャの絵&#34; style=&#34;width:100%;height:auto;&#34; id=&#34;main&#34;&gt;
&lt;div style=&#34;text-align:center;margin-top:5px;&#34;&gt;
 &lt;button id=&#34;sudoku&#34; type=&#34;button&#34; class=&#34;btn btn-outline-dark&#34; style=&#34;font-size:24px;font-weight:bold;padding:1px 15px;border:3px solid black;&#34;&gt;gacha&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script
 src=&#34;https://code.jquery.com/jquery-3.3.1.min.js&#34;
 integrity=&#34;sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=&#34;
 crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;

&lt;script&gt;
$(function(){
 var url = &#34;ガチャのキャラの絵の入ったフォルダ&#34;;

 $(&#39;#sudoku&#39;).click(function(){

 var anneal = setInterval(function(){
 //数字の表示系
 $(&#39;#main&#39;).attr(&#39;src&#39;,url + (Math.floor(Math.random()*4)+1) + &#39;.jpg&#39;);
 },50)

$.ajax({
 type  : &#39;GET&#39;,
 url   : &#39;設定したエンドポイント。サーバーがわ。&#39;,
 timeout : 15000
}).done(function(data, textStatus, jqXHR) {
 clearInterval(anneal);
 $(&#39;#main&#39;).attr(&#39;src&#39;,url +data+&#39;.jpg&#39;);
}).fail(function(jqXHR, textStatus, errorThrown) {
 clearInterval(anneal);
 $(&#39;#main&#39;).attr(&#39;src&#39;,url + &#39;0.jpg&#39;);
});


});

 })
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre> 基本的にはボタンを押したら、ajaxでgetリクエストを投げます。戻ってきたら表示するだけです。全てflaskサーバー側で処理されてるので、基本的にインターフェイスのみになります。 <h2>やってみよう</h2>是非やってみてください。アプリ側で式を作ると、問題が大きくなったときに苦労します。ですので、サーバー側での処理をするのがコツですので、その点だけ気をつければ簡単にアプリが作れますし、スマートフォンから量子コンピュータを操作することが可能になり、可能性が広がります。以上です！

D-Waveガチャのフロントエンドhtmlの公開とバックエンドpython flask APIの作り方を公開！

Yuichiro Minato