Wait a moment...

図で分かる!TipSlackの使い方(For Windows)

nem217xem (6)
276
0
2020-07-13 23:19:36
図で分かる!TipSlackの使い方(For Windows)
目次
●はじめに:重要な話●

1:ngrokからいってみようぜ!
 1-1 ダウンロード
 1-2 exe起動
 
2:Node.jsいっちゃいましょう!
 2-1 ダウンロード
 
3:ngrokもう一回触るぞ!
 3-1 インストール
 3-2 起動

4:Slack Commandsでお願いします!
 4-1 インストール(設定)

5:Incoming WebHooksご馳走様です!
 5-1 インストール(設定)

6:Gitいっちゃうかぁ!

 6-1 インストール
 6-2 設定
 6-3 GitHubに公開鍵の登録

7:TipSlackに到達!!
 7-1 インストール
 7-2 設定
 7-3 ライブラリのインストール

8:サーバ起動させちゃいましょう!!
 8-1 サーバ起動

9:TipSlackを動かしちゃうよ!!!
 9-1 アドレス取得
 9-2 TipSlackで投げNEMをしよう

●おわりに●

 

●ごあいさつ●
■はじめに~重要な話~
拝啓

善良なるこの記事を観ている皆様。
この記事は、我らがXEMBook大先生が2018年の7月頃に作成した、

Slack上でNEM(モザイク)を送金出来るライブラリ「TipSLACK」を実際に試してみよう!

という記事となります。(Windowsでの説明)

「TipSLACK」はSlackチャンネル内の全メンバが、独自のアドレスをコマンド1つで持つことが出来ます。
凄く夢の広がるツールです。

しかしながら、「TipSLACK」はその時代ではOKだった
運用者が「ユーザーの資産を預かる」という形で作成されております。
(各ユーザの秘密鍵を "運営者の決めたパスワード + slack上のユーザID" で生成している為。)

現在では、カストディ規制がある為、その様なことはNGとなっております。
と言っても、自身のアドレスだけ作成し、自身でだけ楽しむ分には大いに結構でございます。
無価値のモザイクとかなら全く問題ないでしょう。

友達にSlack上でXEMを送って、驚かせてやりましょう!!
僕は自分が驚きたかったからやりました。(最高にシビレタゼ)

これを観たあなたが、NEMはんこの様にカストディを越えるアイデアで
みんなが自由に使えるようなアップデートをしてくれますように。

最後に、
何もかも分からない人(僕)向けに作りました。
質問されても答えられません。

なにより、
クソ長です。

基本的には「まつしん様」が作成されたこちらを見てもらえれば
知識のある人は1発だと思います。

それでは僕へTipSlackから沢山のTipが届くことを楽しみに、
行ってらっしゃいませ。


2020.07 ねむ”ハブ”ぐま

 

1:ngrokからいってみようぜ!
■1-1 ダウンロード

⑴早速、HPからダウンロード画面に移行しましょう。
(↓画像クリックしたら飛ぶよ)


⑵「Windows」をクリック


⑶「ngrok.exe」が無事にダウンロードされました!


■1-2 exe起動

⑴「ngrok.exe」をダブルクリックで起動。こうなれば多分OK。



 

2:Node.jsいっちゃいましょう!
■2-1 ダウンロード

・早速、HPからダウンロード画面に移行しましょう。
(↓画像クリックしたら飛ぶよ)


・ダウンロードしたインストーラーを叩いていきましょう
⑴ 「Next」 を押下


⑵このまま「Next」押下


⑶ インストール先に指定が無いならこのまま「Next」押下


⑷ よくわからんけどこのまま「Next」押下



⑸これまた、よくわからんけどこのまま「Next」押下


⑹ ようやく「install」押下でStart


⑺インストール完了でございます!!


 

3:ngrokもう一回触るぞ!
■3-1 インストール
・「ngrok.exe」を起動

⑴「npm install ngrok」と入力
※「ngrok.exe」が存在するディレクトリにて実施すること


⑵エンターキーを押下すると「ngrok」??良くわからんけど何かがインストールされる(信じるのじゃ)



■3-2 ngrok起動
・「ngrok.exe」を起動

⑴「ngrok.exe」上のディレクトリを、「ngrok.exe」が存在するディレクトリに合わせよう


⑵「ngrok http 1337」と入力⇒エンター



⑶URLが発行されたらOK!!
(あとで赤線のURL使うからコピーしてテキストにでも貼りつけるのです。)
※このURLは起動するたびに変わるから、今開いている奴は最後まで閉じないことをオススメ



 

4:Slack Commandsでお願いします!
■4-1 インストール(設定)

・「TipSlack」を利用したいSlackチャンネルを起動し、Appを選択しましょう。

⑴検索に「Slash Commands」と入力し、追加を押下しよう


⑵「Slackに追加」を押下しよう


⑶下記の様に「/tipslack」と入力したら、「スラッシュコマンドインテグレーションを追加する」を押下しよう
※ここで設定したコマンドをSlack上で入力することで起動する感じになるやつです。(多分)


⑷インテグレーションの設定で下記の通り、「設定」&「保存」しよう
 ・URL:「3-2 ngrok起動」で保存しておいたURLを張り付けましょう
 ・トークン:あとで使うので、テキストにでも保存しておきましょう


⑸「インテグレーションの保存」を押下して完了です


 

5:Incoming WebHooksご馳走様です!
■5-1 インストール(設定)
・「TipSlack」を利用したいSlackチャンネルを起動し、Appを選択しましょう。

⑴検索に「Webhook」と入力し、「Incoming Webhooks」追加を押下しよう


⑵「Slackに追加」を押下しよう


⑶TipSlackを実行した時の通知を、どのチャンネルに送るか決めよう
※以下の画像では、自分のSlackに「tipslack用」を作成し、登録しました。
※登録後、「Incoming Webhook インテグレーションの追加」を押下しましょう。


⑷Webhook URLが発行されたらOK!!
(あとで赤線のURL使うからコピーしてテキストにでも貼りつけるのです。)


 

6:Gitいっちゃうかぁ!
■6-1 インストール

・早速、HPからダウンロード画面に移行しましょう。
(↓画像クリックしたら飛ぶよ)


・インストールをはじめよう
⑴ダウンロードした「exe」をダブルクリックで起動しよう


⑵「Next」を押下しよう


⑶「Default」のままで「Next」を押下しよう


⑷何も選択せずに「Install」を押下しよう


⑸インストールが完了後に、PCのアプリケーション検索で「Git Bash」が表示されていればOK


■6-2 設定
・「Git Bash」を起動し、以下の準備をしよう
※準備するもの

 ⇒メールアドレス
 ⇒GitHubのアカウント

⑴SSHの鍵を取得するために、「ssh-keygen -t rsa -b 4096 -C "準備したメールアドレス"」を入力しよう
※下記画像ではGmailのアドレスが設定されてますね


⑵SSHの鍵を保存する場所と、パスフレーズの入力を求められますので、以下の通り設定しよう
 ⇒SSHの鍵を保存する場所:変更なしで良いでしょう(画像ではC/Users/nembear/.ssh/id_rsa)
 ⇒好きなパスフレーズを入力してください(入力しても画面には表示されないですが、大丈夫です)


⑶再度、今入れたパスフレーズを要求されるので、同一のものを入力しよう


⑷上記まですべて終了すると、指定されたフォルダ内にSSH鍵ファイルが作成されています
 ※デフォルトでは「C/Users/yourname/.ssh」直下です


⑸「Config」ファイルの設定するために、「vim ~/.ssh/config」を入力しよう
※「Git Bash」を起動させてください


⑹「config」に以下の様に書き込みをしよう

Host github
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_github



⑺ 以下の手順で、入力値を保存しよう
 ・「Esc」+「:」を押下(僕はここが分からなくて、長いこと詰みました、、)


 ・「wq」を入力して、エンター


⑻無事「config」ファイルが作成されました


■6-3 GitHubに公開キーの登録
・「GitHub」にログインして、以下の設定をしよう

⑴「Setting」に遷移しよう


⑵「SSH and GPG Keys」に遷移しよう


⑶「New SSH Key」に遷移しよう



⑷保存されているSSH鍵である「id_rsa.pub」を開き、すべてコピーしよう


⑸「Key」内に、⑷でコピーした内容をすべて張り付けて「Add SSH Key」を押下しよう

 

7:TipSlackに到達!!
■7-1 インストール
・「TipSlack」用フォルダを「C:\Users\YourName」直下に作成し、「Git Bash」を起動しましょう
※図では「C:\Users\nembear\TipSlack」としております

⑴現在のディレクトリを、新規で作成したフォルダに移行しよう
※コマンド 「cd 新規フォルダ名」


⑵コードファイルを取得しよう
※コマンド「git clone git@github.com:mediaprogramer/tipslack.git」


⑶パスフレーズを入力しよう
※パスフレーズが要求されるので、シナリオNo.6-2で設定したパスフレーズを入力


⑷指定したフォルダに「tipslack」フォルダが格納されたらOKです


■7-2 設定
・「tipslack.js」の設定を変更しよう

⑴「tipslack.js」を開こう
※シナリオNo.7-1で作成された「tipslack」フォルダ内に格納されてます


⑵「tipslack.js」を編集しよう
 ・SYSTEM_PRIVATE_KEY = "64桁のユニークな英数字に変更してください"
 ・SLACK_HOOL_URL = "シナリオNO.5-1で保存した「Webhook URL」を張り付けてください"
 ・SLACK_TOKEN = ”シナリオNo.4-1で保存した「トークン」を張り付けてください”


■7-3 ライブラリのインストール
・「nemlibrary」をインストールしよう

⑴「Git Bash」を起動し、コマンド
 「npm install log4js nem-library rxjs rxjs-compat express body-parser request」を入力する


⑵インストールが完了しました

 

8:サーバ起動させちゃいましょう!
■8-1 サーバ起動

・「Git Bash」を起動しよう

⑴ディレクトリを、シナリオNo.7-1で作成した「tipslack」直下に移動しよう


⑵コマンド「node tipslack.js」を入力しよう


⑶サーバが起動しちゃいました!

 

9:TipSlackを動かしちゃうよ!!!
■9-1 アドレス取得
・「Slack」を起動しよう
※いよいよ、TipSlackが動きますよ!!!!!!


⑴Slack内で「/tipslack deposit」とコマンドを打つと.....アドレスが自動で作成されます!!!!
※これが自分自身のNEMアドレスとなります。
※このアドレスに数XEMでも送金しておきましょう(NEMWalletなどから)


■9-2 TipSlackで投げNEMをしよう!
・いよいよ投げNEMをしてみましょう。同じくコマンドで
 「/tipslack withdraw 送金先NEMアドレス 送金数 xem」を入力しましょう。


お疲れさまでした。
無事にここまで来れたからは何割でしょうか?
送金結果は、トランザクション情報をWalletからご確認くださいませ。

 

~おわりに~
■TipSlackのサルベージ


最後までお付き合いいただきありがとうございました。
XEMbook先生の名作「TipSlack」ご存知の方はどれぐらいいらっしゃったでしょうか?

この作品は2018年に生まれています。
世間がようやく、Zoomだ~Slackだ~と言い始めた2年前に未来を見通して作成されています。
その技術はぎーくではなく
このように誰にでも使え、そして美しいです。無駄が無い。

NEMの界隈にはそんな偉人たちが残した、様々な宝物が
実際に多く眠っております。

是非、みんなで掘り起こし、
今の技術で更にアップデートをかけ、感嘆するのはとても素晴らしいことだと思います。

XEMBookさんに最大の敬意を持って、締めの言葉とさせていただきます。

あ~疲れた

ねむぐま

 

この記事を書いた人
毎度!ねむぐま屋です! そいえば、今まで発信源がTwitterしかなかったので、ワイの活動をここに書くようにしてみます。