量子コンピュータのコミュニティサイトを目指すQuantum Programming Studioの紹介

**注意：この記事は2019年4月20日時点の情報で記載しています。**

先日、[Quantum Programming Studio](https://quantum-circuit.com/)というサイトが公開されました。
このサイトは量子コンピュータのコミュニティサイトを目指しているように見え、非常に興味深いです。
この記事ではこのサイトについて簡単にご紹介します。
![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/80477ebb-499f-73c0-6966-7d683faa0fde.jpeg)

# Quantum Programming Studioとは何か？

## 概要

Quantum Programming Studioのトップページには次のような紹介文が記載されています。

> What is Quantum Programming Studio?

> The Quantum Programming Studio is a web based graphical user interface designed to allow users to construct quantum algorithms and obtain results by simulating directly in browser or by executing on real quantum computers.

WebベースのGUIで量子アルゴリズムを構築し、ブラウザ上でシミュレーションしたり、実物の量子コンピュータで実行できるそうです。

> Cross platform

> Circuit can be exported to multiple quantum programming languages and can be executed on various simulators and quantum computers.

WebベースのGUIで作成した量子回路を、複数の量子プログラミング言語にエクスポートでき、様々なシミュレータや量子コンピュータで実行できます。

> Simple UI

> You can use simple drag & drop user interface to assemble circuit diagram which automatically translates to code, and vice versa - you can type the code and diagram is updated accordingly.

ドラッグ&ドロップのシンプルなUIで量子回路図を組み立てることができ、自動でコードに変換されます。
また、その逆も可能で、コードをタイプすることで量子回路図が更新されます。

## Discover

このサイトに登録しユーザが作成・公開した量子回路を見たり、コードをダウンロードできます。
メニューの「Discover」をクリックすると、このような画面になります。
![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/e50bc571-7ea5-b2a6-5567-600f8ec7dcd9.jpeg)

「View Detail」をクリックすると詳細を確認できます。少し長いので、いくつかの画像で説明します。
画面上部にはプロジェクトに関する基本情報や詳細説明、量子回路図が表示されます。
![WS000026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/9789b8cf-396b-e247-c970-679fe7d89388.jpeg)

「Embed」は作成した量子回路をMediumなどのブログに埋め込むリンクです。
![WS000027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/41434960-cf7b-4225-b831-f93df4a2e85b.jpeg)
ブログに埋め込む詳しい方法は、こちらで紹介されています。
[How to embed interactive quantum circuit into Medium blog post
(https://medium.com/@petar.korponaic/how-to-embed-interactive-quantum-circuit-into-medium-blog-post-8331024501b7)](https://medium.com/@petar.korponaic/how-to-embed-interactive-quantum-circuit-into-medium-blog-post-8331024501b7)

「REST API」は作成した回路のソースコードや画像データをダウンロードするためのURLです。
![WS000028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/c206f788-a7aa-38a8-52a3-0cd40e24dc92.jpeg)



## Community

このサイトに登録しユーザを検索したり、ユーザにメッセージを送ったりできます。
![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/b80f8350-e8c2-3708-0aea-a4f7bd5eef69.jpeg)
このあと、ユーザ登録についても紹介しますが、上の図の「Satoyuki Tsukano」の部分が「full name」に該当し、「snuffkin」の部分が「Username」に該当します。

# ユーザ登録とプロジェクト作成

では、ユーザ登録をしてみましょう。
トップページの上部に「Register」ボタンがあるので、クリックしましょう。
![WS000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/0689b857-ca93-da4b-3040-ad6d60d9de3d.jpeg)
full name、Username、Email address、Passwordを登録します。
Usernameはハンドルネームのような扱いだと思われます。
パッと見た感じ、Username、Email addressは後から変更できないように見えたので、この点は注意が必要そうです。

ユーザ登録すると、次のような「My Projects」画面で自分が作成したプロジェクトを確認することができます。
※この図は「spike」というプロジェクトを作成した後の画面です。最初に表示したときはプロジェクトはありません。
![WS000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/887d0626-a4b1-83c7-a50a-a18c757403c3.jpeg)

forksやstarsといった機能もあることが分かります。
「New Project」をクリックすると、プロジェクト情報を入力する画面になります。
![WS000013.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/4fa39663-1609-a7f8-9ecf-55159ee71c10.jpeg)

Public/Privateを指定できるのは良いですね。
ここに記載した内容は後から変更することもできるので、ひとまず気負わずに入力して良いと思います。

プロジェクト情報を入力して「Continue」をクリックすると、量子回路図の作成画面に遷移します。

# 量子回路図の作成

プロジェクトを開き、「Edit」メニューをクリックすると、量子回路図を作成できます。

## Drag & Drop

Drag & DropのGUIで手軽に量子回路図を作成できます。
![WS000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/0e344670-38cc-fb03-1881-dc8b304d4e78.jpeg)

## Edit QASM

QASMのエディター画面です。
画面上部でQASMを編集すると、下の量子回路図がリアルタイムに更新されます。
![WS000006.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/d09bd51f-c8eb-1c7f-2a01-1810786aad47.jpeg)

文法ミスをしたりすると、×印でエラー箇所が可視化され、Messagesのタブや吹き出しでエラー内容が表示されます。
![WS000016.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/64f10810-fbfa-8de1-f9fe-6d1fac15d739.jpeg)

# 量子回路図のシミュレーション

「Simulate」メニューをクリックすると、量子回路図をシミュレーションする画面が開きます。
2019年1月24日現在はBrowser上でのシミュレーションのみサポートされています。

## Browser

「▶Simulate」をクリックすることで、作成した量子回路図をシミュレーションできます。
![WS000017.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/7e53e5e7-57ab-661b-091b-198f9c1a9534.jpeg)

「Show angles」「Show state vector」のトグルをonにすることで、これらの情報を表示することができます。
![WS000018.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/cb2fe69e-cf49-1c27-a949-0f59b01a70f7.jpeg)

「Bloch」の部分をクリックするとBloch球の画面になり、ドラッグすることで回転させたりできます。
![WS000019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/68621a60-c9ba-84d9-0b6f-4a185c2f27e9.jpeg)

# 量子回路図の実機での実行

「Run」メニューをクリックすると、量子回路図の実機で実行するための画面が開きます。
「Rigetti QCS」「IBM Q」のタブがあります。
![WS000009.JPG](https://qiita-image-store.s3.amazonaws.com/0/13107/e7b98e10-d49e-09cd-9b4a-dc03fbbebd8c.jpeg)

「Rigetti QCS」での実行方法については、このサイトのTwitterアカウントで紹介されている動画が参考になると思います。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Running quantum circuit on real quantum computer from <a href="https://t.co/RxnroSdElJ">https://t.co/RxnroSdElJ</a> UI. Video: <a href="https://t.co/r3KlfHigYG">https://t.co/r3KlfHigYG</a> <a href="https://twitter.com/rigetti?ref_src=twsrc%5Etfw">@rigetti</a> <a href="https://twitter.com/hashtag/quantumcomputer?src=hash&amp;ref_src=twsrc%5Etfw">#quantumcomputer</a> <a href="https://twitter.com/hashtag/quantum?src=hash&amp;ref_src=twsrc%5Etfw">#quantum</a></p>&mdash; Quantum Circuit (@quantcirc) <a href="https://twitter.com/quantcirc/status/1087693741245251585?ref_src=twsrc%5Etfw">2019年1月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

「IBM Q」についても実行方法が紹介されています。
![WS000021.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/8651da3f-2bb2-453b-196a-96552b34b2d2.jpeg)


# 量子プログラミング言語へのエクスポート

「Export」メニューをクリックすると、量子プログラミング言語へのエクスポートするための画面が開きます。

プルダウンメニューで言語を選択すると、下の画面にコードが表示されます。
「Download」をクリックすると、ファイルとしてダウンロードできます。
![WS000025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/80520515-bb26-8266-da2f-7c38f590b6aa.jpeg)

プルダウンメニューを開くと、サポートしている言語が分かります。
「Drawing」とあるように、量子プログラミング言語だけでなく、量子回路図をSVG形式やPNG形式でもエクスポートできて便利です。
また、Jupyter Notebookの形式でもダウンロードできます。
![WS000020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13107/419e8431-a047-c650-3c51-55f3a39f1b48.jpeg)


# 不具合報告

「Reposrt a bug」メニューをクリックすると、[GitHubのissue画面](https://github.com/perak/quantum-circuit/issues)が開きます。ここで不具合報告を行う事ができます。
このGitHubプロジェクトを見ると、Quantum Programming Studioはある程度OSSとして公開されているようですね。

# まとめ

駆け足でひと通りの様子を見てみました。
まだまだ粗削りで、今後に期待するサイトであることは否めません。
ただ、ユーザが集まって知見を共有する流れが広まると、強力なサイトになるかもしれません。
期待しつつ、自分自身も使ってみたいと思います。