はじめに

Qrunchいいですね!
パブリックの情報発信と個人用のアウトプットを、1サービス上に無理なく共存させている所に本当に感心しています。
今までSIerという職業柄、パブリックのアウトプットとは無縁だったのですが、初めて技術記事を書いてみたくなりました。
と思ったのが一ヶ月前で、結局自分にはアウトプットするものなんてなかったわけですが、今回初めてWebサービスを公開したので、Qrunchに投稿してみることにしました。

公開したサイト

DECOBOARD

bitFlyerとBitMEXとBitfinexの板情報を一覧できるサイトです。

仮想通貨やビットコインに触れたことのない方には全く意味不明だと思うので情報を補足すると

  • bitFlyer: 日本の仮想通貨取引所でビットコインの取引量は国内最大(なのかな今も)
  • BitMEX, Bitfinex: 海外の仮想通貨取引所で、世界中の取引所のビットコインの値動きを先導することがある
  • 板情報: 詳細な説明はググればいくらでも出てきますが、この記事的には、ある値段で買いたい人/売りたい人がどれくらいいるかの情報だと思ってもらえればいいです

つまり、ビットコインを買いたい/売りたいと思っている人がどの価格帯にどれくらいいるかを、国内/海外の取引所で横断して見ることができます。
これにより、「どの取引所でどの価格帯を突破すると価格が大きく動きそうだ」というのが分かりやすくなると思います。
「思います」というのは、最近はこのサイトの開発ばかりしていて、実際のトレードではまだ使ったことないからです笑

使ったもの

ソースコードを公開すればいい話なのですが、スピード最優先(それでも1ヶ月以上かかりましたが)で開発したのでかなり汚く。。。
リファクタリングしてから記事投稿となると、いつまでたっても投稿できそうにないので、本記事では利用ライブラリ/サービスについてまとめておきます。

Vue.js

このサイトを作るまで、HTML+CSS+JSという昔ながらのWebサイトしか作ったことがなかったので、フレームワークの利用にチャレンジするという意味では「Angular」でも「React」でもなんでもよかったのですが、公式の日本語情報の豊富さからとっつき易さを感じ、Vue.jsを採用しました。

Vue.jsの学習方法については、本家の日本語ドキュメントをざっと読みました。
分からないところは飛ばして読んだり、関連するワードでググって補間しました。
未だに分からない箇所がありますが、結局使わない知識だったということで気にしていません。

また、プロジェクトの作成にはVue CLI 3.0を利用しています。
Vue CLI 3.0の利用についてはYouTubeのこちらの再生リストが参考になりました。
英語なので何を言ってるのかよく分からないのですが、打ってるコマンドとか見れば何をやっているのかは分かると思います。

Vuex

Vuexを使うほどのサイトだったのか?という疑問がありますが、Vuexを使っています。
Vuexを使わずに作るとしたらどう作るか?という点については時間がある時にまた考えたいですね。
今は単にグローバルに便利に使える変数置き場として利用してしまっている気がします。。。

一応学習方法ですが、こちらも本家の日本語ドキュメントをざっと読みました。
使いこなせていない分際でいうのも何ですが、VuexはVueの公式が提供している点が非常に心強いですね。
Vue.js同様日本語ドキュメントが充実しているのもありがたいです。

Vuetify

デザインなんてやったことないので、最初からUIフレームワークは使うつもりだったのですが、Vue対応のUIフレームワークの中で一番公式サイトやExampleがカッコイイと感じたVuetifyを採用しました。

UIフレームワークはBootstrapしか使ったことがなかったので、そのノリで使ったら大苦戦したのですが、YouTubeのこちらの再生リストが大変参考になりました。
最近投稿され始めたシリーズで、まだ完結していないと思うのですが、一番難しいと感じたGrid周りの説明があるだけでもありがたかったです。
この動画を見てから一気にVuetifyを使ったUIの実装が進んだ気がします。

また、この動画シリーズを投稿している「The Net Ninja」チャンネルは、上記の「Vue CLI 3.0」の動画シリーズの投稿者でもあり、英語が読めなくても何となく分かる動画が多いので、私のように英語が苦手な方にもオススメのチャンネルです。
最近は夕飯を食べる時に「The Net Ninja」チャンネルの新着動画を見るのが日課になっています。

Netlify

何とかWebサイトを作った。。。ものの公開の仕方を知りませんでした。。。
今まで業務含めWebサイトの公開なんてしたことないので笑

で、とにかく何でもイイから一刻も早く「全世界にWebサイトを公開」する方法ないのか><と調べて見つかったのがNetlifyでした。
Netlifyというワードを最近「はてブ」で見るなーとは思っていたのですが、こういう用途に使うサービスだったんですね笑

GitHubアカウントでログインし、トップページの指示に従ってビルドしたVueプロジェクトをアップロードするだけで、「全世界にWebサイトを公開」できました。

唯一引っかかったところは、「HTMLを内包したディレクトリ」をアップロードしなければいけない点ですね。
Vueプロジェクトで言う所の、「dist」ディレクトリをアップロードしなければいけないのに、最初は「dist」ディレクトリの中身のファイル群をアップロードしてしまい、Webサイトが表示されませんでした。
が、これもちゃんと英語の説明を読めば書いてある内容でした。。。

初歩的なミスで引っかかったとはいえ、Netlifyに初めてログインしてからサイトを公開するまで20分もかかりませんでした。
GitHubのリポジトリとの連携をはじめ、色々と便利な機能があるみたいなので、これからもっと使い方を勉強したいサービスですね。

最後に

今回は技術記事一歩手前の記事になってしまいましたが、個々の技術的な詳細についても今後Qrunchに投稿していきたいと思います。
DECOBOARD自体に興味を持ってくれた人がいたら、Twitterに連絡ください。

関連記事

この記事へのコメント

まだコメントはありません
+1
108
@joetheace107の技術ブログ
このエントリーをはてなブックマークに追加