プラスプラス開発者ブログ

岩手県盛岡市のシステム開発会社「株式会社プラスプラス」の開発者ブログです。

タイムライン的なSNSのようなもの

こんにちは。

業務の報告を行うタイムラインを社内実験として開発して運用しています。

弊社は岩手県盛岡市に本社がありますので、コロナウィルスの直接の影響はでておりませんが、 4月下旬の緊急事態宣言を全国に拡大した際に、リモートワークをより推進することになりました。

リモートワークの問題としまして、作業の成果をどのように見せるか?が課題として挙げられるかと思います。

弊社では以前よりチャットワークやSlackを業務のコミュニケーションとして使用しておりますので、業務に関連するメンバー同士であれば、ある程度状況が見える形になっていますが、チャット系のコミュニケーションツールは、グループやチャンネルに入っていないと、発言が見えなかったりします。

リモートワークを行うスタッフを見えるようにしたいということで、業務の報告を行うチャットワークのグループを作って運用していましたが、それですと、他の人の報告も流れて来ますので、どんなメッセージかな・・・と確認してしまったり作業に集中できなかったりします。

そこで、チャットワーク安ラックのような話題ごとにグループを作るのではなく、

  • 全社員が互いにお仕事の報告を投げあい、
  • それが他の人に通知されるのではなく、
  • あとから報告を俯瞰して情報を見れるようなもの

を作ることにしました。

こんな感じのインターフェースです。

f:id:plusplus-sawada:20200507141615p:plain
タイムライン的なSNSのようなもの

ウェブはNuxt.jsで作成、データのやり取りはNode.jsでWebAPIを実装しています。

ざっくり作ったところで、会社にレビューしましたところ、「5月いっぱいやってみましょう」ということになり、連休明けの本日より運用を開始しています。

会社の時間を使って開発しますので、実証実験として行っています。

ですので、次のような告知を全社に行いぜひ使い倒してください、としています。

  • 「リモートワークをするにあたって、こういった物を作りたいです。作っていいですか?」と会社に提案して作りました。仕様もコンセプトも一人で考えましたので、偏りがあるかもしれません。
  • いまはメッセージを投稿して、それをタイムラインで見るだけの機能です。メッセージへのリプライ、検索、メンション、タグ、URLのリンクといった機能もまだありません。
  • もっとより良いコンセプトがありましたら提案がほしいです。
  • 改善案がありましたら教えて下さい。
  • メインのお仕事の隙間時間で作りましたので、バグがあるかもしれません。ぜひバグ報告をお願いします。なるべく対応します。

というわけで業務の合間に実験開発を進めていきつつ、 こちらにも紹介をしていきたいと思います。

Nuxt.js でウェブサービスを開発する

こんにちは。

自社でウェブサービスを開発することになりました。

まだ開発中ですので、どのようなことをするのか具体的には書けないのですが、 出せる範囲でこちらに書いていきたいと思います。

システムの組み合わせ

フロントエンドに Nuxt.js バックエンドは Node.js で API という組み合わせです。

ユーザー別の処理やウェブコンテンツ提供の処理を行うために、APIはアクセストークンによる認証という方式を採用することにしました。

サーバーサイドでのAPI通信とクライアントサイドでのAPI通信の区別

それ自体は universal モードで動作させる予定ですが、APIとの接続にはユーザー個別の処理や会員向けの情報をやりとりするために、工夫が必要です。

会員ログインする前の情報は asyncData() にAPI通信の処理を書き、サーバー側でAPI通信してデータを取得する形ですね。 データの管理を Vuex store とするなら fetch() でやる感じですね。

 async asyncData() {
        let categories = [];
    
        const res = await axios.get(/* APIのエンドポイント */);
        /*
        res.data の中身を処理する
        */
    
        const data = {
            
        };
        return data;
    },

一方、会員向けのAPI処理は誰からのリクエストなのか?を区別する必要がありますので、ログイン認証時に払い出されたアクセストークンを API のリクエスト時に付与する、といった実装が必要です。

アクセストークンの保持はくアイアント側の処理で行われますので、 API通信の処理を plugin として実装し、クライアントサイドで動作するように next.config.js に設定します。

    plugins: [
        { src: '~plugins/API通信するプラグイン', ssr: false },
    ],

あとはここのページやコンポートンとからそれらの処理を呼び出すイメージです。 ↓ページ読み込みの際にAPI通信するように mounted() に実装する場合の例です。

 mounted: async function() {
        try {
            const res = await API通信するプラグインの処理を呼び出す();
            /*
            res.data の中身を処理する
            */
        } catch (e) {
            // エラー時の処理
            
            // 必要に応じてログアウト処理など・・・
            
        }
    },

処理がサーバーサイドで行われるのか、クライアントサイドで行われるのか、意識が必要ですが、 慣れれば同じような形で実装を進めていけるかなと思います。

宜しくお願い致します。

アンケートをブロックチェーンに作成し投票を受け付けるスマートコントラクト(crypto-vote)

こんにちは。

弊社の技術検証で開発したスマートコントラクトについてお知らせします。

github.com

アンケートをブロックチェーンに作成し投票を受け付けるスマートコントラクト(crypto-vote)を開発しました。

ソースコードはMITライセンスで公開しています。

https://ropsten.etherscan.io/address/0x8E401abFEf4B94cDC1037530B50af430CDbdafD1

スマートコントラクトはテストネット(ropsten)にデプロイしています。

Etherscanにもソースコードを添付しましたので、そちらで動作を確認することもできます。

テストネットに上げているものは、アンケートの登録が弊社のアカウントのみが可能になっていますので、 実験してみたい方はぜひフォークしてお試しください。(^^)

基本的には、cloneしたディレクトリのトップで、

$ npm install
$ truffle compile
$ truffle migrate

といった操作でいけます。

また、アンケートの回答を受け付けるデモとして、弊社の技術検証サイト(PLUSPLUS-LAB)に

  • アンケートの登録のフォーム実装例
  • アンケートの投票・結果の表示例

を作ってあります。

lab.plusplus.jp

f:id:plusplus-sawada:20190415104028p:plain
接続先がropstenになっていることを確認し・・・

f:id:plusplus-sawada:20190415103848p:plain
アンケートの一覧

f:id:plusplus-sawada:20190415103940p:plain
回答結果の表示例

投票は実際に試してみることができます。(テストネットですので安心して使えますね^^)

アンケートの登録は、弊社のアカウントだけがスマートコントラクトの機能を利用できるようになっていますので、みなさんが実際に登録してみることはできないのですが、登録するウェブの実装例として、そのフォーム画面までは見ることができます。

f:id:plusplus-sawada:20190415104136p:plain
アンケートを登録するフォーム

お試しください。

ファイルのハッシュ値をブロックチェーンに登録するスマートコントラクト(PLUSPLUS-LAB の紹介)

こんにちは。

社内の技術検証で開発していたスマートコントラクトについてお知らせします。

file-identity-verification

ファイルのハッシュ値ブロックチェーンに登録するスマートコントラクトを公開しました。 GitHubソースコードをMITライセンスで公開しています。(^^)

github.com

スマートコントラクトはテストネット(ropsten)にデプロイしていまして、ソースコードの添付していますので、Etherscanから動作させることもできます。 (ちょっとインターフェースがとっつきにくい感じですが・・・)

https://ropsten.etherscan.io/address/0x0687cf290377571bda05061cec5c0f2be1a120bc

さすがに、Etherscanからだけしか動作確認できないのはつらいと思いますので、ウェブサイトをつくりました。

f:id:plusplus-sawada:20190409140709p:plain
ファイルのハッシュ値ブロックチェーンに登録できます

PLUSPLUS-LAB

PLUSPLUS-LAB の紹介です。

ウェブサイトはNuxt.jsで構築しています。

ブロックチェーンへの接続はMetamaskで、ブロックチェーンとの接続は web3.js でやっています。定番ですね。(^^)

このスマートコントラクトをウェブページから操作できるようになっています。

lab.plusplus.jp

お試しください。

TRON(TRX)ブロックチェーンで ERC223 トークンを動作させた実験の紹介

こんにちは。

弊社が参加している GoÐAppsプロジェクトで、 TRON(TRX) ブロックチェーンのスマートコントラクトにも挑戦してみました。

developers.tron.network

開発環境について

開発環境が Ethereum と同じような感じで揃っていまして、このような対応になります。

Ethereumの場合 TRONの場合
開発環境 truffle tronbox
プライベートネット gethで自力で構築するか Ganache を利用 TRON Quickstart
ブロックチェーンへの接続 infura trongrid
ブロックチェーンとの接続ライブラリ web3 tronweb
Chrome拡張機能 metamask tronpay

(TronPayについては後述します)

今回作成したスマートコントラクト:ERC223トークンの実装(TRON)

TRONはスマートコントラクトは Solidity が使えますので、 GoDappsプロジェクトで実装した ERC223 トークンを TRONブロックチェーンで動作するように修正してみました。

修正したトークンのソースコードGitHub で公開しています。

github.com

トークンをブロックチェーンにデプロイしただけでは使い勝手が良くないですので、 そのトークンの送金ができるウォブウォレットも作ってみました。 GoGoÐAppsのライブデモ で送金を試してみることができます。

※今回は実験ですので、TRON のテストネットにデプロイしています。

f:id:plusplus-sawada:20190329110437p:plain
TRONブロックチェーントークンを送金できる簡易ウェブウォレット

https://lab.godapps.io/tron-test/walletlab.godapps.io

動作には TronPay Chrome Extension for TRON が必要です。Chrome ウェブストアでダウンロードでダウンロードしてお使いください。

chrome.google.com

f:id:plusplus-sawada:20190329110320p:plain
送金を実行するとTron Payのダイアログが表示される

以上、実証実験結果のお知らせでした。

宜しくお願い致します。

Ethereumのスマートコントラクトの開発事例:GoDappsプロジェクトと開発したスマートコントラクトの紹介

こんにちは。プラスプラスの澤田です。

久しぶりのブログ記事です。

Ethereumのスマートコントラクトの開発事例として、 GoDappsというプロジェクトに参加してスマートコントラクトの開発を行いました。

www.godapps.io

今回実装したものは、GitHubでもソースコードを公開しています。(MITライセンスです。ぜひフォークしてね)

ざっくりと作ったものを説明したいと思います。(^o^)

Internal Distribution Token

GitHub - godappslab/internal-distribution-token: Implementation of Internal Distribution Token

ERC20/223ベースのトークンですが、ショッピングをしたときのポイントなどのような用途に特化した実装です。

Signature verification implementation for EIP712

GitHub - godappslab/signature-verification: Signature verification implementation for EIP712

EIP712ヒューマンリーダブルな型付署名の実装例です。

f:id:plusplus-sawada:20190315190307p:plain
署名すると Metamaskのウィンドウに内容が表示されます

この署名を利用したトークン交換の実装と、ユーザー認証の実装をスマートコントラクトで行っています。

Implementation for exchanging from Internal Distribution Token to ERC 20/223 Token

GitHub - godappslab/token-transfer: Implementation for exchanging from Internal Distribution Token to ERC20/223 Token

"Internal Distribution Token"で、利用者がオーナーにポイントの交換をしたときのイベントをトリガーに、別のERC20/223トークンを安全に配布するための仕組みを提供するスマートコントラクトです。

ERC223トーク

GitHub - godappslab/erc223-token-implementation: Implementation of ERC223 token

ERC20の上位互換のトークンです。 トークンフォールバックによる弱点にも対応した実装になっています。

今後も、暗号通貨のスマートコントラクトの開発を進めてまいります。

宜しくお願い致します。