非プログラマーでも出来た！４STEPで、はじめてのブロックチェーンアプリ開発！！






この記事は「[nem Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nem)」の12/4の記事として書かれています。


こんにちは。[キツツキさん](https://twitter.com/kitsutsukick)です。

わたくし、非プログラマーではありますが、今年（2021）は、ブロックチェーンアプリの公開実験を開催することが出来ました。

今回は、その体験（どんな感じで進めたのか？）を記事にして、これから始めてブロックチェーンアプリの開発をしたい方のための参考情報にできればと思います！

※ 使用するパブリックブロックチェーンはSymbol(NEM)となります。


Qiitaということもあり、対象読者としては、「ほぼ素人だけどプログラミングに触れたことがないわけではない」以上のプログラミング能力の方を対象としています。

そのくらいのプログラミング能力があれば、何かしら動くブロックチェーンアプリを作れるようになるまでの流れを４STEPにまとめてみました。

必ずしも、このSTEPどおりである必要はありませんが、参考にしていただければと思います！


その４STEPの説明に入る前に、まずは前提の共有です。


#【 つくったもの 】

その１ ： [サブスクリプション課金の公開実験（NEMscription）](https://nemlog.nem.social/blog/60623)

パブリックチェーン(Symbol)を利用して、サブスクリプション課金（名付けて、NEMscription）する仕組みの原理実験を行いました。


その２ ： [メタデータによる外部サービス連携](https://kitsutsuki.tokyo/nemscriptionplatform-openexperiment/)

上記の「その１」をつくったところ、@XEMBook氏よりお誘い（ 下に張り付けたツイート参照 ）頂き、上記のサブスクと外部サービスの連携実験を行いました。

https://twitter.com/xembook/status/1388647166105710592?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1388647166105710592%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fnemlog.nem.social%2Fblog%2F63981

↑とてもありがたいことで、このお誘いをきっかけに、いままで触ったことのなかったメタデータの取り扱いについて学ぶことができました。とにかく、何かやってみると、神々のような諸先輩方から声をかけてもらって、新しいことができるチャンスがやってきたりします。


そして、その仕組みを使えば、パブリックブロックチェーンをつかったワクチンパスポートのようなシステムも作れますよ、という記事を書きました。

https://nemlog.nem.social/blog/63981


プログラミングの素人に毛が生えたレベルのキツツキさんでも、いろいろやってみた結果、このくらいのことは出来ましたので、今回の記事に沿って進めてもらえれば、これよりも全然いいものが作れるようになると思います。


※ 今回、アドカレ参加を記念して、一時的に公開実験を一時再開しようかと思いましたが、アグリゲートトランザクション詐欺が発生している現状と、実行環境が死んでいる現状を鑑みて、実験再開会は中止しました。


#【成果】

せっかくの機会なので、上記の実験の成果を少しだけ宣伝させてください。

ITに詳しいジャーナリストの星さんに取り上げて頂きました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本件、メンションいただいたので、読んでみました。面白い話なので、連続ツイートで紹介してみます。<br><br>まず前提から。<br>(1) これはITの話です。パブリックブロックチェーンを公共目的（ワクチンパスポート）に応用する実験です。<br>(2) 特定の仮想通貨の売買を推奨する話ではまったくありません。 <a href="https://t.co/lfeS7gqQEL">https://t.co/lfeS7gqQEL</a></p>&mdash; 星 暁雄 (ITと人権) (@AkioHoshi) <a href="https://twitter.com/AkioHoshi/status/1404690638533136385?ref_src=twsrc%5Etfw">June 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


海外記事でも紹介されました。

https://symbolblog.com/articles-news/how-to-create-a-vaccine-passport-using-the-symbol-public-blockchain/?p=645

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530025/e0b1ec34-d942-6e3c-34c9-9466c0bd093e.png)




#【開始時のプログラミング能力】

「非プログラマーでも出来る！」とは謳っていますが、さすがに、まったくコードが書けない状態だと、ブロックチェーンアプリ開発は厳しいです。（当たり前ですが）

とはいえ、キツツキさんは、プログラマーとしての仕事をしたことはなくて、実力は、せいぜい↓くらいです。

***

C言語：学生時代の授業で薄めの入門書は一通りやったことがある。（ if とか for とか ファイル入出力 くらいは出来る。ポインタとかは微妙。 ）
→　ちなみに、電子系の学科だったので、プログラミングの授業は1コマだけです。情報系の学科とかではないです。

php、python ： やりたいことをキーワードにググって出てきたサイトのコードをコピペしてきて、ifとかで実行を制御してなんとか誤魔化しごまかし動かせるくらい。自分でゼロからコード書くのは厳しい。

javascript ： まったく未経験。（非同期処理という言葉すら知らずに、今回初めて手を出して、コールバックとか意味不明な概念が出てきて大混乱した）

***


というわけで、見て頂ければわかると思いますが、完全なる未経験ではりませんが、ほぼ初心者の素人です。
おそらく、この記事の読者さんの平均よりも遥かに低いプログラミング能力だと思います。


このレベルから、ブロックチェーンアプリの公開実験を開催にこぎつけるまでを、この記事で書こうと思います。（さすがに信頼性の要求される本番アプリの開発はハードルが高すぎるので手を出しませんでした）

これから何か作ってみたい方にとって、何かの参考になれば幸いです！



# ゼロから始めるブロックチェーンアプリ開発 ４STEP

さて！では、いよいよ本編です！

上に書いて来た以上のスタート地点に立っている方であれば、以下を実践すれば、れっきとした＠アブリックブロックチェーンを利用したアプリをつくることが出来ると思います。



##【 STEP１ ： 一般ユーザーになるために！編 】

まず、この記事の読者さんは、ほぼほぼキツツキさんよりもプログラミング能力は高いと思いますので、その点は心配ないのですが、ブロックチェーンアプリをつくるには、当然ながらパブリックブロックチェーンの基本的な動作を理解している必要があります。

今回使用するパブリックブロックチェーンは、Symbol(NEM)を念頭に置いているので、その前提で話を進めます。

（ほかのチェーンでのアプリ開発は経験がないので、ノーコメントとさせてください）


まずおすすめしたいのは、一旦、アプリ開発のことをは忘れて、パブリックチェーンに触れてみることです。

（すでに、一般ユーザーとして使いこなしているという場合は、このセクションは読み飛ばしてください）


Symbolには、実際に市場価値のあるトークン(基軸通貨:XYM)を取り扱うメインネットと、開発用に市場価値のないダミートークンが流通しているテストネットがあります。

まずは、失敗しても金銭的ダメージのないテストネットを触ってみることをお勧めします。

その後、アプリを世にリリースするためには、いずれメインネットで市場価値のあるトークンも扱う必要があるので、メインネットにも触れる必要があります。

（後程触れますが、アプリ動作のためにTxを発生しようと思うと、必ず、手数料として基軸通貨xymが必要となります。Txを発行しないアプリでもない限り、ほぼほぼxymが必要になると思っておくとよいでしょう）

ですから、取引所への登録、ウォレットへの送金などの捜査には慣れておいた方が良いでしょう。

慣れないと失敗することもあるので、必ず、少額でテストすることから始めましょう。（慣れても、失敗しないかヒヤヒヤします）

流れとしては、

・ 公式ウォレットの入手
・ 自分のウォレットにトークンを送金
　　→　メインネットの場合には取引所で購入して送金。テストネットの場合には、いわゆる「蛇口（faucet）」から無料で貰うのが一般的です。

※ テストネットの蛇口は、「[http://faucet.testnet.symboldev.network/](http://faucet.testnet.symboldev.network/)」ここにあったのですが、この記事の執筆時点で使えませんでした。随時、「 faucet symbol testnet 」などでググって探してみてください。どうしてもダメな場合、twitterでハッシュタグ「#NEM #Symbol」を付けて助けを求めれば、誰かしら、テストネットのxymを分けてくれると思います。

です。

この記事は、自分で調べられる人を対象にしているので、詳しいやり方はカットします。「Symbol wallet」とかで検索してみてください。（以下も同じ）


そして、実践（体験）と理論（WEB検索など）で、以下のキーワードについて理解したり、出来るようになったりします。

ここまでの内容は、アプリ開発をする、しないにかかわらず、自分でパブリックチェーンに触るなら誰でも理解しておいた方が良い内容です。


以下、このステップで理解しておいた方がいいキーワードや、触っておいた方が良いツールです。

・ 秘密鍵の役割と取り扱い（特に秘密鍵（ニーモニック）のバックアップと、秘密鍵（ニーモニック）からのウォレット復元が出来ることは必須）
・ 送金や受け取り作業（ その過程で、アドレス、秘密鍵による署名、Tx hash などなどを理解 ）
・ ブロックチェーンエクスプローラによるアドレスやトランザクション（Tx）の監視

メインネット用エクスプローラ
https://symbol-explorer.com/

テストネット用エクスプローラ
http://explorer.testnet.symboldev.network/

XEMBook
https://xembook.github.io/xembook/


ここまでは、アプリ開発のことは忘れて、一般ユーザー（投資家とか）になったつもりで、GUIウォレットでやればいいと思います。

まずは、GUIの馴染みやすいインターフェイスで、Txの発生で何が起こっているのかとかをイメージできるようになるのがおすすめです。



##【 STEP２ ： アプリ開発に向けた準備編 】


上記で、最低限の操作は出来るようになると思いますが、アプリをつくろうと思うと、もう少し、理解しておいた方が良い範囲が広がります。

↓で、説明していきます。

ノード … 正確ではないかもしれないけれど、雰囲気で言うと、パブリックチェーンと物理世界の接続点。ここにアクセスしてTxを送信したり、ブロックチェーンの情報を受け取ったりします。

何をするにも、ノードから情報を貰ったり、ノードに情報を渡したり出来なければ何もできません。

よって、アプリをつくる際には、使えるノードを見つけて、どのノードとやりとりするのかなどを考えなければなりません。

現在、どんなノードがあるのかを知る方法としては、たとえば、下記のような方法がります。

ノードリストを利用

　メインネット：https://symbolnodes.org/nodes/
　テストネット：https://symbolnodes.org/nodes_testnet/

→　迷ったら、これらの中にある「 Opening Line  社さまのノード （ドメイン： opening-line.jp ） 」を使っておけば、とりあえず間違いないと思います。メインネットでは、キツツキさんのノードもあります。ドメイン名「kitsutsuki.tokyo」のノードです。


とりあえず、テスト的に動かすだけなら、その時、生きていることが分かっているノードを１つ指定して接続するだけでも、動くプログラムを書くことは出来ますが、大きなサービスをつくりたい場合や、長期安定したサービスの提供のためには、複数のノードに接続する方が良いでしょう。（負荷分散や、ノードが落ちた時に他のノードと接続するため）

そういうことをしたい場合には、[だいさん](https://twitter.com/ishidad2)が作った、今生きているノードを取得できるAPI（ https://rohr.sfn.tools/api/references ）などが便利かもしれません。

※ 現在、 WebSocketの判定は上手くいっていないようなのでご注意ください。 WebSocket判定以外は問題なしとのこと。また、全体的に再構築する予定もあるそうです。（時期未定）



ノードについて理解したので、次は、実際にノードから情報を得てみましょう。（前のステップで触ったGUIウォレットやXEMBookなども、裏側では、ノードから情報を得ているわけですが…。）

まずは、RESTゲートウェイ（ https://docs.symbolplatform.com/ja/api.html ）の説明ページを見て、何かしらの情報を得てみるとイメージがわくと思います。

※ ブラウザのURLを入れるところに打ち込むだけで、簡単に情報取得できます。

たとえば、単純な例として、キツツキさんのノード（nem1.kitsutsuki.tokyo）から、現在のブロック高を知る方法を考えてみましょう。

その場合、ブラウザのURLを打ち込むところに下のように打ちます。


https\://nem1.kitsutsuki.tokyo:3001/chain/info
http\://nem1.kitsutsuki.tokyo:3000/chain/info


上はhttps接続で、下はhttp接続です。（httpではポート番号は3000、httpsでは3001を使います。決まりではないようですが、だいたいみんな、この設定でノードを立てていることが多いです。）

すると、こんな感じでjson形式の値が返ってきます。（↓はfirefoxでの表示例）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530025/9456c7ab-a083-09fc-5a63-e004606f584e.png)

この中のheightの項目が、現在のブロック高ですね。


もう少し複雑な例として、Pythonにて「指定したブロック高の間で、特定のアドレスに対して送信されたTRANSFER Txを取得する関数」を考えます。

そんな時には、こう書くと実現できます。（ちょっと今、動作確認できる環境が死んでいて、動作確認できなかったのですがたぶん平気です…。）



```
# 指定ブロック間の送金トランザクションを取得
def getTxData( scanAddress , startHeight , stopHeight , nodeURL ):

    url = nodeURL + "/transactions/confirmed"
    
    # 次の行の「\」は改行対策
    payload = \
    {
        "address" : scanAddress ,
        "fromHeight" : startHeight ,
        "toHeight" : stopHeight ,
        "type" : 16724 ,
        "pageSize" : 100
    }
    
    try:
        req = requests.get(url, params=payload)
        #print( req.json() )
    except requests.exceptions.RequestException as e :
        createLog( str(0) , str(e) )
        return False
    else :
        json = req.json()
        return json
    
```

各引数の意味は↓です。

scanAddress ： このアドレスに送信されたTxを
startHeight　： このブロック高から
stopHeight　： このブロック高まで
nodeURL　　： このノードから情報を貰ってね。


ちなみに、payloadの中にある「"type" : 16724」は、TRANSFER Txを意味します。

参考：https://qiita.com/nem_takanobu/items/cf7c5e0fe5faa9221c29 （ 作者 ： takanobu氏 ）



この後、SDKについて書きますが、クソ雑魚技術力のキツツキさんは、SDK使ってやりたいことが出来なかったときは、とりあえず、上記のような方法でしのいでましたｗ

jsonで帰ってくるので、その中から、必要なデータを抽出して使いました。


こうやって、いろいろやっていると、下のようなキーワードが理解できてくると思います。（理解できてないと使えないので、どこかでぶつかって調べることになる）

PublicKey、Tx hash、height、Finalization、Comfirmed、 TransactionType …etc.etc.etc.

「このあたりの意味不明ワードにぶつかっては調べてを繰り返しつつ、その時やりたいことを実現するコードを書く」を繰り返すと、基本的な概念がどんどん理解できてくると思います。


このあたりで、Symbol CLIに触ってみるのもおすすめです。

https://docs.symbolplatform.com/ja/cli.html#wallet-cli

CLIでウォレットつくったり、Tx送ったりしてみると、理解が深まります。

※ CLIの項目がこんなにサッパリしているのは、このままだとアドカレの日程に間に合いそうもないからなのですが、CLI触るのもとても役立った記憶があるので、おすすめです。


この記事も参加しているNEMアドベントカレンダーの過去記事や、NEMLOGの開発系過去記事なども読んでみると、どんどん、いろんな知識がつなってくると思います。

アドカレ
https://qiita.com/advent-calendar/2021/nem

NEMLOG
https://nemlog.nem.social/

特に、目指せ北海道さんや、XEMbookさん、44ukさんなどの記事にはお世話になりました。ほかにも、たくさんの開発系の記事を書いている方がいるので、いろいろ見てみましょう。

https://nemlog.nem.social/profile/416
https://nemlog.nem.social/profile/11
https://nemlog.nem.social/profile/131

ちなみに、開発系は少ないですが、キツツキさんも何かいろいろ書いてます。
https://nemlog.nem.social/profile/50

あと、忘れてはいけないのが、takanobuさんのQiita記事ですね。開発系の記事の質・量ともに最強クラスではないでしょうか？
https://qiita.com/nem_takanobu



#【 STEP３ ： 何を作りたいか考える編 】

すでに明確にやりたいことがある人は、このSTEPは不要と思います。

ただ、やりたいこと（こんなプログラムをつくりたい！）がない場合には、「とりあえず、○○なものつくってみるか！」程度でもいいので、何かしらつくりたいものをイメージしておくのが良いと思います。

お勉強として学ぼうとしても、なかなか頭に入ってこないと思います。

「これを作りたいから、○○の機能が使えそう！どうだろう？できるかな！？」と楽しみながら進めないと、たぶんすぐに嫌になります。

できれば、STEP０でこれがあると理想なのですが、どんな機能があるのか？何ができるのか？もわからない状態だと、なかなか作るもののイメージもわかないと思うので、便宜上、この位置に置きました。

ただ、早ければ早い方が理想だと思います。

ぶっちゃけ、全ステップの中で、このステップが一番重要だと思います。

この記事で紹介しているレベルであれば、最低限、 for文 とか if文 とかを苦手意識なく使えるレベルがあれば、誰でも時間を書ければ実行可能です。

その実行していくエネルギーの源泉として、「やってみたい！」とか、「これを作ってみたい！」みたいな「モノづくりの楽しさ」ほど有効なものはないと思います。

自分の頭の中に沸いたイメージを、現実世界に構築していく楽しさと感じられれば、多少行き詰っても、挫折しないで進んでいけるエネルギーになると思います。

なんか、他に比べてフワッとしたSTEPですが、このステップが最重要だと思います。



#【 STEP４ ： SDK編 】


ここまでくると、基本的なことはかなりわかっていて、さらに作りたいもののイメージもわいていると思うので、次はSDKを触ってみましょう。

まずは、公式ドキュメントを読みましょう…。
https://docs.symbolplatform.com/ja/sdk.html

わからなかったら、「Symbol SDK インストール」とかで調べれば、神々がわかりやすい解説を書いてくれている友うので、それを参照します（人任せ）。


そして、公式ドキュメントの中からやりたいことを探します。

たとえば、「アカウントにメタデータを付与したい」ということであれば、このページです。

https://docs.symbolplatform.com/ja/guides/metadata/assigning-metadata-entries-to-an-account.html


ぶっちゃけ、簡単にやりたいなら、サンプルコードも公開されているので、これをコピペして、必要な箇所（たとえば、 bobPrivateKeyの中身とか）だけ書き換えれば動きます。

（一通り眺めて、どこを書き換える必要があるかくらいは見極められないと無理ですが、ここまでのステップを踏んでいれば、なんとなくわかるでしょう。）

https://github.com/symbol/symbol-docs/blob/main/source/resources/examples/typescript/metadata/AssigningMetadataToAnAccount.ts


さらにぶっちゃけると、クソ雑魚のキツツキさんは、メインの制御系を非同期（javascript）で書くことができなかったのですが、欲しい機能のSDKのサンプルコードはjavascriptしかなかった（少なくとも当時は）ので、メインの制御系はpythonで書いて、ほぼサンプルコードコピペ状態のjavascriptのコードを呼び出すという感じでつくりました…。

あまり推奨できる方法ではないと思うのですが、とりあえず、勉強の過程としてはアリなのではないかと個人的には思います。

ハードル上げ過ぎて、挫折するよりは、誤魔化し誤魔化しでも何か作っているうちに、徐々に上達するのではないかと。

ちなみに、pythonからjavascriptの呼び出し方は、↓の感じでやりました。


python側からの呼び出し部分（変数を渡して、結果を受け取る部分）

```
def DecEncryptoMessage( pubKey , txHash , nodeURL ):

    import subprocess
    
    com = "node /home/ubuntu/DecodingEncryptoMessage.js" + " " + pubKey + " " + txHash + " " + nodeURL
    proc = subprocess.run([com], shell=True,stdout = subprocess.PIPE)
    return proc.stdout.decode("utf8")
```



javascript側で変数を受け取る部分

```
let publicKey = 0;
let txHash = 0;
let node_url = 0;

for(var i = 0;i < process.argv.length; i++){
  publicKey = process.argv[2];
  txHash = process.argv[3];
  node_url = process.argv[4];
}
```

参考にした記事：https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3



とりあえず、このくらいまでできれば、信頼性不問の公開実験くらいは作れるようになりました。

いざやってみれば、案外、簡単にできます。

この記事を読んでいる方のプログラム能力は、キツツキさんより全然高いと思うので、ブロックチェーンに触れたことがなくても、この記事のステップを参考に進めてもらえれば、もっと良いものが楽勝で出来てしまうと思います！

このSTEP４まで来ていれば、次に何かやりたいことがあれば、どんな感じで進めたらいいのか自分で考えられるようになると思います。

是非、やってみてください！


そして、どうしても壁にぶつかってしまった場合には、「#NEM #Symbol」のハッシュタグをつけて、困っている内容をツイートすれば、神々が助けてくれることがよくあります。

（神々も忙しい中善意で助けてくれているので、頼りきりにならず、まずは自分で調べてみることも大事ですが、どうしようもなくて挫折するくらいなら聞いてみるのも手です）



#【さいごに】

最後まで読んでいただきありがとうございます。

他のパブリックチェーンを使った開発は経験したことがありませんが、NEM Symbolを使った開発は、クソ雑魚プログラミング能力のキツツキさんでも、簡単にすることが出来ました。

やはり、既存の言語が使えるので、少し検索すれば、必要な情報が簡単に得られるメリットははかり知れません。

ぶっちゃけ、この程度の実力で偉そうに記事書くのも憚られたのですが、これを機会に、何かしらのパブリックチェーンアプリ開発にチャレンジしてみよう！と思ってくれる人が1人でも現れれば幸いです。

最後に、先輩開発者の皆様へ。ここおかしいじゃね？とか、最初にこの情報知ってるともっと楽だよ！とかあったら教えてください。追記したいと思います。