katonobo’s blog

プログラミング中心の雑記ブログ

Vue.js

ERC721とIPFSを用いたDappsアプリの習作「トークンバトラー」をテストネットにデプロイしました。

IPFSとERC721を用いたDappsアプリの習作を作成したので記事にしておきます。

Vue.jsのフロントエンドでIPFSにアップロードしipfsHash値を取得する方法の肝心部分のメモ

IPFSにファイルをアップロードし、その値を取得して画面に表示するためのコードをメモ。 基本的にはReactやJavascriptでのサンプルはネットに多くなるのでそれを参考にすればほとんど問題ないが、そのままだとonloadend処理した後のipfsHashがVue.jsだと取得…

Vue.jsでreader.onloadend内のデータを返す方法【ipfs】【Vue.js】 【Dapps】

ipfsに画像をアップロードしようとするときに、FileReaderオブジェクトを使うんですが、その際に非同期処理でreader.onloadendの処理を書きます。 その結果をデータバインディングで表示させたいのですがなかなか取得する方法が見つからなかったので解決策を…

Vue.jsにVue-Bootstrapを使うための設定

vue.jsでbootstrapを使うようにするのはとても簡単。 Bootstrap vueというのがあるのでこれを使う。下記サイトを参照すればわかるが備忘録。 bootstrap-vue.js.org ステップ1 $npm i bootstrap-vue npmでbootstrap-vueをインストール ステップ2 main.jsに…

はてなブックマークトップに載った話

先日、自分が書いた記事がはてなブックマークに載りました。 www.katonobo.com 最初はテクノロジーのカテゴリに入っていたんですが、そこから総合にも載せてもらえ、結局390件以上のブックマークをつけてもらえました。 自分のブログの中で大ヒットだったの…

Vue.jsとFirebaseで最速でウェブサービスを作るための学習教材3ステップ【完全独学】

Vue.jsとFirebaseを使って最短でウェブサービスが作れるようになるために最適な教材を紹介しています。何かウェブサービスを作りたいと考えている方は必見です。

Daapsアプリ「わしが育てたおじさん2.0」をリリースしました。

Dappsアプリ「わしが育てたおじさん2.0」作りました。ブームの前から自分が俺は目をつけてたと自慢するためにスマコンを利用する虚しいアプリとなっています。metamask必須でRopstenネットワークにデプロイしてます。制作期間は1週間ほど。練習なので1週間く…

【Dapps】【Truffle】【web3】Truffle-contractはとっても便利

www.npmjs.com Dappsアプリを作る時にTruffleを使いますが、Truffle-contarctというライブラリがありコントラクトとの接続が簡単になります。 サンプルコードは上記ドキュメントとこちらのVue-boxのSimpleStorege.vueのコードを見ると使い方がわかります。 g…

Dappsをフロントエンドまで作ろう!【Truffle】【Infura】【Metamask】【Vue.js】【npm】

Dappsアプリで、フロントエンドまで作るためのブロックチェーンエンジニア向けの記事です。Truffle+Infura+Metamask+Vue.jsで構築します。

Solidity、イーサリアムでフロントエンドとの提携で参考にしている記事まとめ

Solidityのコードを書いたあとは、フロントエンドで反映できるようにする必要がありますが、なかなか情報が少ないのです。 今回は参考にしている人のブログや記事を備忘録としてまとめてます。 matsushin11.com サンプルと、実際にアプリを作られたことなど…

【Vue.js】【Cloud Firestore】Webアプリのリリースまでの学習過程まとめ

先日、初のWebアプリをリリースしました。 contents-chat このサービスは、最近もの凄く人気がある、定額動画見放題サービスの映画や番組の感想などを書き込んで感想を共有するサイトです。アマゾンプライムとか、ネットフリックスとかですね。 [実際のモバ…

自信満々なバカになる勇気をもつ

先日、webサービスのテスト版をリリースしました。 https://contents-chat.firebaseapp.com/home 友人や、ツイッターで何人かの方に登録していただいたり、感想もいただけました。みんな優しい…! 本当にありがとうございます! 今回のサイトは、最低限の機…

【Vue.js】【Cloud Firestore】【備忘録】リアルチャット機能を実装してみたよ

現在開発中のウェブサービスの経過報告です。 リアルチャット機能を実装できました。 今の進捗。ラインみたいなリアルチャット機能を実装できた。 pic.twitter.com/YRTaqFpmHI — katonobo (@katonobo1) 2018年6月10日 リアルチャットはLINEのトークの様な機…

【書評】【Vue.js】基礎から学ぶVue.jsは必読の書

基礎から学ぶ Vue.js Vue.jsに関する本は少ないんですが、本書は非常に細かくまとめられています。 読んだ後の僕の感想だと、本書は、Vue.jsが全くわからない人ではなく、少し触ってみてVue.jsがちょっとわかってきたくらいのレベルの人にピッタリだと思いま…

【備忘録】【Vue.js】Vue.jsのstyleタグは、scopedを入れる方がいいのか?

Vue.jsの素晴らしいところに、拡張子「.vue」の単一コンポーネントがあります。 単一コンポーネントは、「template」「script」「style」の三つで構成され、それぞれざっくりとHTML部分、javascript部分、CSS部分に別れています。この3つが一つのファイルに…

【備忘録】【Vue.js】routeを使ってログインしてないと見れないように設定する方法

いわゆるRoute Guard。サーバーはFirebaseで、Vue-Routerを使っている前提。 ポイント: ・routeのパスの部分に「meta」として、ユーザ情報の真偽情報を入れる。 例えば、pathは「/」で、コンポーネントは「name」場合 { path: '/', name: 'home', component…

Vue.js+Fifebaseの学習途中のメモ その2 〜Vue.jsがやっとわかってきました〜

www.katonobo.com 前回の学習過程まとめの続きです。 Vue.jsとFirebaseを使ったWebアプリケーションを作成中ですが、ここにきてやっとVue.jsの概要が掴めてきた感じがします。 どこがわかってなかったかと言うと、Router周りだったり、全体的にぼんやりとで…

【備忘録】Vue.js+Fifebaseの学習途中のメモ

Vue.jsの学習過程とその時参考になったサイトと記事を現段階でまとめてみます。 スタート スタートはモモンガ本(500円安い!モモンガ可愛い) booth.pm 本書を読めば、全く寄り道をせずにVue.jsとFirebaseを連携させることができます。 本書で学習を進める…