IPFSを使ったサンプルアプリケーションの作成手順を解説

IPFSを使ったサンプルアプリケーションの作成手順を解説
目次

今回の内容

この記事では、IPFSを使ったサンプルアプリケーションを実装・解説します。

ターゲット

・ブロックチェーンを使ったストレージに興味がある方
・IPFSを実際に触ってみたい方
・IPFSを使ったアプリケーションを作成してみたい方

前提知識

・P2Pネットワーク、ブロックチェーンの基礎知識
・Ethereumの基礎知識
・Javascriptのソースが読める
・Solidityで書かれたコントラクトが読める

また今回までの記事をご覧になっていない方は、ぜひ下記に目を通しておいてください。

分散型ファイルストレージの概要
http://block-chain.jp/blockchain_study_salon_dojo/what-is-decentralized-distributed-storage/

IPFSとSwarmとは何か?
http://block-chain.jp/blockchain_study_salon_dojo/what-is-ipfs-and-swarm/

IPFSの環境構築の手順と基本的なコマンドを学ぶ
http://block-chain.jp/blockchain_study_salon_dojo/how-to-use-ipfs/

IPFSを使ったサンプルアプリケーションを作る

本章ではIPFSを使ったサンプルとして、下記のような動作をするWebアプリケーションを作成したいと思います。

  1. ブラウザからコンテンツをアップロード
  2. コンテンツをIPFSに保存
  3. コンテンツのメタ情報をEthereumのContractに保存

サンプルアプリケーションの完成イメージ（UI）

通常Webアプリケーションですと、以下のようなサーバーサイド構成を取ることが多いのですが、

今回作成するサンプルアプリケーションでは簡略化のためサーバーを挟まず、 クライアントサイドのJavaScript、HTMLだけでコンテンツのアップロード、情報管理を実現したいと思います。


[確認済み動作環境]
IPFS: version 0.4.14
Ethereum: geth version: 1.8.4-unstable
Browser: Google chrome version 65.0.3325.181
Solidity: 0.4.19
npm: 5.8.0
Web3: 0.20.6
Truffle: 4.0.6

事前準備

IPFS

JSからブラウザとは異なるドメインにアクセスしますので、IPFS daemon側で、クロスドメイン許可(CORS)を行います。

$ ipfs config Addresses.API /ip4/0.0.0.0/tcp/5001
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST"]'

Ethereum(geth)

gethもIPFSと同じくクロスドメイン許可(CORS)が必要になりますので、起動オプションに –rpccorsdomainを追加して起動してください。

 --rpccorsdomain "*"

HTMLとBootstrapでUIを作成する

ファイルをアップロードするアプリケーションUIを作成します。
UIはHTMLのfile属性とform機能で実装します。

次にHTML内で、下記のJSライブラリを３つ、CDN経由で呼び出します。

  • buffer: ファイルをアップロードした際にブラウザ上でバッファリングを行うためのライブラリ
  • web3: gethクライアントライブラリ
  • ipfs-api: JSからIPFS daemonにアクセスするためのjs-ipfsのbrowser版ライブラリ

HTMLファイルの全体像は次のとおりです、index.htmlとして保存します。(※簡易的なデザインを行うために、bootstrapを利用しています。)





 
 
 
 File upload by ipfs + ethereum

 



 

   

     

       
File upload by ipfs + ethereum

       

       

     

   


   

     

         
          

     

     

     

     

       
         

           ファイル名
           ファイルURL

Contractの作成

アップロードされたコンテンツのメタ情報をブロックチェーン(Contract)に保存するためにIpfs.solというContractを作成します。

コントラクトIpfsには以下のような役割の３つのメソッドだけを用意します。

pragma solidity ^0.4.18;

contract Ipfs {

 struct FileInfo {
   string name;
   string fileHash;
 }

 FileInfo[] fileinfo;

 function setUploadFileInfo(string _name, string _hash) public {
   FileInfo memory meta = FileInfo(_name, _hash);
   fileinfo.push(meta);
 }

 function getUploadFileInfo(uint _id) public view returns(string, string) {
   return (fileinfo[_id].name, fileinfo[_id].fileHash);
 }

 function getLength() public view returns(uint) {
   return fileinfo.length;
 }
}

app.jsの作成

最後にContract、IPFSの操作を行うロジックapp.jsを作成します。
app.jsの全体は以下のようになります。

App = {
 ipfs: {},
 contract: {},
 web3: {},

 init: () => {
   App.initIpfs();
   App.initWeb3();
   App.initContract('0x02c4fbdef5be7d1e96a70ed3ad3dffbe6964175a');
   return App.bindEvents();
 },

 initIpfs: () => {
   App.ipfs = window.IpfsApi('localhost', '5001');   
 },

 initWeb3: () => {
   App.web3 = new Web3();
   App.web3.setProvider((new Web3.providers.HttpProvider('http://localhost:8545')));   
 },

 initContract: (address) => {
   $.getJSON('Ipfs.json', (aritifact) => {
     App.contract = App.web3.eth.contract(aritifact.abi).at(address);
     for (var i = 0; i < App.contract.getLength(); i++) {
       info = App.contract.getUploadFileInfo(i);
       App.setTemplate(info[0], info[1]);
     }
   });
 },
  bindEvents: () => {
   $('#target').submit(App.handleSubmit);
 },

 handleSubmit: (event) => {
   event.preventDefault();
   const file = event.target[0].files[0];
   const reader = new window.FileReader();
   reader.onloadend = () => App.saveIpfs(reader, file.name);
   reader.readAsArrayBuffer(file);
 },

 saveIpfs: (reader, filename) => {
   const buf = buffer.Buffer(reader.result)
   App.ipfs.files.add(buf, (err, result) => {
     if(err) {
       console.error(err);
       return;
     }
     const hash = result[0].hash;
     const url = `https://ipfs.io/ipfs/${hash}`;
     App.contract.setUploadFileInfo(filename, hash, { gas: 500000, from: App.web3.eth.coinbase });
     $('#success-alert').show();
     $('#success-message').text(url);
   })
 },

 setTemplate: (name, hash) => {
   var body = '';
   body += '';
   body += `${name}`   
   body += `https://ipfs.io/ipfs/${hash}`   
   body += ''
   $('tbody').prepend(body);
 }
};

$(() => {
 $(window).load(() => {
   App.init();
 });
});

IPFSホスティング

最後に、サンプルのソースもIPFSにアップロードして、IPFS上で動作させたいと思います。

記事の続きはオンラインサロンにて公開中！
サロンで続きを読む
     

免責事項

本記事に掲載されている記事の内容につきましては、正しい情報を提供することに務めてはおりますが、提供している記事の内容及び参考資料からいかなる損失や損害などの被害が発生したとしても、弊社では責任を負いかねます。実施される際には、法律事務所にご相談ください。

技術・サービス・実装方法等のレビュー、その他解説・分析・意見につきましてはblock-chani.jp運営者の個人的見解です。正確性・正当性を保証するものではありません。本記事掲載の記事内容のご利用は読者様個人の判断により自己責任でお願いいたします。

     

コンセンサス・ベイス（株）とブロックチェーン事業を行なってみませんか？

当サイトを運営するコンセンサス・ベイス株式会社は、2015年設立の国内で最も古いブロックチェーン専門企業です。これまでに、大手企業の顧客を中心に、日本トップクラスのブロックチェーンの開発・コンサルティング実績があります。

ブロックチェーンに関わるビジネスコンサル・システム開発・教育・講演などご希望でしたら、お気軽にお問い合わせください。

     
コンセンサス・ベイス（株）の実績を見てみる
     

ブロックチェーン学習に最適の書籍の紹介

図解即戦力 ブロックチェーンのしくみと開発がこれ1冊でしっかりわかる教科書

ブロックチェーン　イーサリアムへの入り口　第二版 (ブロックチェーン技術書籍)

本書は、ブロックチェーン技術に興味を持ったエンジニアや、その仕組みを学び、自分の仕事に活かしたいビジネスパーソンを対象にして、ブロックチェーンのコア技術とネットワーク維持の仕組みを平易な言葉で解説しています。この本を読んだうえで、実際にコードを書くような専門書、ブロックチェーンビジネスの解説書を読むことで、理解度が飛躍的に高まるでしょう。（はじめにより）

IPFSカテゴリの最新記事