作ったものリスト

主に趣味で作成したものになります。

ディスカッションプラットフォーム

ディベート形式で意見を述べられるSNSを作成しました。
議題に対して2択があり、自分の意見の近いほうに投票&コメントできるSNSになります。

既存のSNSでは著名な人の意見がクローズアップされがちなので、少数派や反対派の意見もセットで可視化すれば多面的な判断ができるのでは?という思想で作成していました。

ディベート画面。2択のうち、自分の意見に近いほうに投票&コメントする。
マイページのスマホ版。投稿した議題やコメントが表示できる他、レスポンシブにも対応していた。
自分が投稿したコンテンツに対して他者がアクションを起こすと通知が届く仕組みもあった。

使用技術

Laravel, Vue, Vuex, MySQL, MongoDB, Redis, Lightsail など

作成経緯・理由

個人でサービスを作りたかった+技術研鑽という意図が大きいです。

  • 会員登録周りの実装を経験しておきたかった
  • レイヤードアーキテクチャを試したかった
  • ユニットテストを書く練習をしたかった

「ディベート」というテーマについては、普遍的なテーマにしておけば飽きにくいだろうという雑な発想ではじめました。

終了理由

集客とコンテンツ作成を考慮していなかったため、初動でコケました。
具体的には、集客を考慮せずに実装を始めたため、新規流入経路再流入経路がほぼ無く、新規利用者がなかなか増えませんでした。(例えばSEOが考慮されておらず、グーグルの検索にひっかからないなど)
また、SNSという性質上、利用者が書き込まない限りコンテンツが増えないため、「利用者が増えないとコンテンツが増えないが、コンテンツが増えないと利用者が増えない」という鶏卵問題が発生していました。
上記の問題を把握し、Twitter上で広報活動的なものを始めたりOGP画像の見栄えを良くしたりと改善を行っていましたが、徐々に活動時間が減り気がつけば別の事をやっておりました。

得た知見

  • 集客、マーケティングをどうするかを考慮する必要がある
    • 新規流入経路、再流入経路を予め設計する必要がある
    • SEOを行って検索流入を確保する
    • OGP画像などを用意してSNS経由の流入も確保する
  • コンテンツをどう作成するのかを考慮する必要がある
  • 「書き込む」という行為は想像以上にハードルが高い

関心ワード検索基盤

Twitterのアカウントをクロールして、直近100件のツイートから関心の高いワードを抽出し、関心ワードでアカウントを検索できるシステムのプロトタイプを作成しました。

直近100件のツイートをひとつの文章として、TF-IDFというアルゴリズムで単語の重要度を算出しました。

以下のように「PHP」「ユニットテスト」を検索すると、それらに関心が高い人たちを検索できる基盤になっていました。

「PHP」「ユニットテスト」で検索している図。それらに関心のあるアカウントの一覧が表示されている。

使用技術

Laravel, MeCab, Vue, InertiaJS, MySQL, AWS ECS

作成経緯・理由

前述のディスカッションプラットフォームの失敗から、「コンテンツを低コストで作成する方法はないか?」「自動生成できないか?」という事を考えた結果、「既サイトをクロールして新たなコンテンツを生み出すサービス」ならどうかという仮説を立て、実験的に当該システムを作成しました。

また、単語の検索結果ページをグーグルにインデックスさせる事で、グーグル検索にも引っかかりやすく、新規流入も見込めるのでは?という仮説もありました。

技術面では以下のような理由もありました。

  • SEO周りの知識を付けたい
  • MySQLの全文検索を触っておきたかった -> 当時の記事
  • InertiaJSを触っておきたかった -> 当時の記事
  • AWSのECSを触っておきたかった

結果

結果としては、コンテンツ作成にほとんど時間を掛けていないにも関わらず、グーグル経由の流入はそこそこありました
問題もあって、一般的にSEOを行う際は上位表示を狙う単語を決めてからコンテンツを作成するのですが、そのあたりを考慮していなかったため、ほとんど検索されないような単語も多くインデックスされていました
Googleがクロールする速度にも制限があるので、優先度の高い単語の精査と、それらに絞ってインデックスさせる仕組みが必要だと感じました。

サーチコンソールで検索結果の表示状態を確認している図。

終了理由

ECS(※)でインスタンスが停止するとディスクが再作成されるのは把握していたので、停止しないように運用してましたが、AWSの障害の際に再起動されディスクが削除されていました。
ランニングコストを掛けたくなく、バックアップを行っていなかったため再開困難になりました。
概ね結果は出ていたので一旦終了としました。
まだ先の展望はあるので時間がある時に見せ方を変えてサービス化したいです。

※ECSとはAWSのコンテナ実行基盤です。ECSで当該システムを運用していました。

セリフデータベース

(TODO)

仮想通貨自動売買システム

2020年末から2021年に書けて仮想通貨が盛り上がっていたので、仮想通貨の自動売買を行うシステムを作ってみました。
模擬の取引結果ログをDWHに溜め、BIツールで結果を可視化/分析し、分析結果を踏まえて売買アルゴリズムを改良していきました。

自動売買システムの大まかな構成

作成経緯

自動売買で本当に利益が出るのか興味があったのでそれを検証した形になります。

使用技術

言語JavaScript(Node), SQL
分析系BigQuery, データポータル
取引APIbitFlyer
コンテナDocker
インフラAWS(ECS, ECR, S3, SSM)
IaCTerraform
IDEPhpStorm
テストmocha, chai

結果

売買履歴を取りつつ、利益が出せそうなアルゴリズムを探りました。
結論として価格の推移を元に判断を行う自動売買で利益を出すのは難しいと感じました。
取引を重ねるほど平均損益は0に近づき、手数料分だけ損するような結果になりました。
実際にはインフラの維持費もあるので黒字にするのはかなり難しいと思います。

その他詳しいシステムの構成は以下の記事にまとめています。

ライブ配信コメント盛り上がり分析ツール

(TODO)

自己署名証明書を作成するツール

(TODO)

PHPでStripeを利用するサンプル

(TODO)

新ポートフォリオ

(TODO)

旧ポートフォリオ

以前ポートフォリオとして使用していたページです。
SPAとして作成しました。
デザインがイマイチだったり情報量も足りなかったりと中途半端だったので現在は作りなおしました。

ポートフォリオのトップページ。背景の波がアニメーションしていました。
読んだ本を紹介するページ。当該ブログに移動したので廃止。
作った物を紹介するページ。いま見ているこのページに移動したため廃止。

使用技術

Vue+Vuex+Vue-Routerを使ったSPAで、Fluxアーキテクチャとatomicデザインを試してみました。

ソースコード

https://github.com/t-kuni/t-kuni.github.io-old/tree/src

フォルダ構成

(root)            
└ src
  ├ assets       # 画像やテキストなどのリソースが格納されているフォルダ
  │ ├ products   # 「個人製作」ページのコンテンツが格納されているフォルダ
  │ └ books.yml  # 「読書」ページのリソース
  ├ components   # Vueコンポーネントが格納されているフォルダ
  │ ├ atoms
  │ ├ molecules
  │ ├ organisms
  │ └ pages
  ├ App.vue      # 基底となるコンポーネント
  ├ main.js      # 処理の起点となるスクリプト
  ├ store.js     # Vuexストアの定義
  ├ getters.js 
  ├ mutations.js
  ├ state.js
  ├ router.js    # Vue-Routerの定義
  └ routes.js

主な使用ライブラリ

  • github-markdown-css
    • GithubライクなデザインにしてくれるCSS
  • @fortawesome/fontawesome-free
    • お手軽なアイコンセット
  • bootstrap
    • CSSフレームワーク
  • bootstrap-vue
    • bootstrapをVueコンポーネントとして提供してくれる
  • lodash
    • 配列操作のユーティリティ
  • markdown-loader
    • mdファイルの読み込み
  • search-query-parser
    • 「読んだ本リスト」ページの検索文字列のパースに利用
  • yaml-loader
    • yamlファイルの読み込み