目次
主に個人制作で作成したものになります。
Live Excite Analyer
ライブ配信のコメントを元に盛り上がっているタイミングを可視化するツールを作成しました
開発に工数を掛ける気は無かったので、デザインは手抜き（フレームワークの初期のまま）です。
以下のページで配布しております。
（余談ですが、2022年4月現在、Googleの検索ワード「ライブ配信 解析」でトップを獲得しています）
作成経緯
切り抜き動画が流行っていたので需要があるかと思い作成しました。
実際、それなりに需要はあるようで、配信サイトのアップデートによりツールが動かなくなると、SNSで修正依頼が来る程度には使われています。
使用技術
| フレームワーク | Electron |
| 言語 | JavaScript(Node) |
| 動画の切り出し | ffmpeg |
| テスティング | mocha, mochapack |
| UIライブラリ | Vue, Vuetify |
苦労した点
複数のライブ配信サイトのコメントの解析に対応していますが、各サイトがコメント取得APIの仕様を公開している訳ではないので、コメントを取得する方法について通信を解析して調べている点で手間が掛かってます
マウスのチャタリングチェックツール
マウスがチャタリングしているか調べるためのWebツールです
既存のチャタリングをチェックするツールが微妙だったので衝動的に作りました
仕様技術はJavaScriptのみです。
Google検索の「チャタリング」絡みのワードで多く１位を獲得していて、毎日300人前後が使用しているようです（2022年4月現在）
ディスカッションプラットフォーム
ディベート形式で意見を述べられるSNSを作成しました。
議題に対して２択があり、自分の意見の近いほうに投票＆コメントできるSNSになります。
既存のSNSでは著名な人の意見がクローズアップされがちなので、少数派や反対派の意見もセットで可視化すれば多面的な判断ができるのでは？という思想で作成していました。
使用技術
Laravel, Vue, Vuex, MySQL, MongoDB, Redis, Lightsail など
作成経緯・理由
個人でサービスを作りたかった＋技術研鑽という意図が大きいです。
- 会員登録周りの実装を経験しておきたかった
- レイヤードアーキテクチャを試したかった
- ユニットテストを書く練習をしたかった
「ディベート」というテーマについては、普遍的なテーマにしておけば飽きにくいだろうという雑な発想ではじめました。
終了理由
集客を考えていなかったため、新規流入経路、再流入経路がほぼ無く、新規利用者がなかなか増えませんでした。（例えばSEOが考慮されておらず、グーグルの検索にひっかからないなど）
また、SNSという性質上、利用者が書き込まない限りコンテンツが増えないため、「利用者が増えないとコンテンツが増えないが、コンテンツが増えないと利用者が増えない」という鶏卵問題が発生していました。
上記の問題を把握し、Twitter上で広報活動的なものを始めたりOGP画像の見栄えを良くしたりと改善を行っていましたが、徐々にモチベーションが無くなり終了しました
得た知見
- 集客、マーケティングをどうするかを考慮する必要がある
- 新規流入経路、再流入経路を予め設計する必要がある
- SEOを行って検索流入を確保する
- OGP画像などを用意してSNS経由の流入も確保する
- コンテンツをどう作成するのかを考慮する必要がある
- 「書き込む」という行為は想像以上にハードルが高い
関心ワード検索基盤
Twitterのアカウントをクロールして、直近１００件のツイートから関心の高いワードを抽出し、関心ワードでアカウントを検索できるシステムのプロトタイプを作成しました。
直近100件のツイートをひとつの文章として、TF-IDFというアルゴリズムで単語の重要度を算出しました。
以下のように「PHP」「ユニットテスト」を検索すると、それらに関心が高い人たちを検索できる基盤になっていました。
使用技術
Laravel, MeCab, Vue, InertiaJS, MySQL, AWS ECS
作成経緯・理由
前述のディスカッションプラットフォームの失敗から、「コンテンツを低コストで作成する方法はないか？」「自動生成できないか？」という事を考えた結果、「既サイトをクロールして新たなコンテンツを生み出すサービス」ならどうかという仮説を立て、実験的に当該システムを作成しました。
また、単語の検索結果ページをグーグルにインデックスさせる事で、グーグル検索にも引っかかりやすく、新規流入も見込めるのでは？という仮説もありました。
技術面では以下のような理由もありました。
結果
結果としては、コンテンツ作成にほとんど時間を掛けていないにも関わらず、グーグル経由の流入はそこそこありました。
問題もあって、一般的にSEOを行う際は上位表示を狙う単語を決めてからコンテンツを作成するのですが、そのあたりを考慮していなかったため、ほとんど検索されないような単語も多くインデックスされていました。
Googleがクロールする速度にも制限があるので、優先度の高い単語の精査と、それらに絞ってインデックスさせる仕組みが必要だと感じました。
終了理由
ECS(※)でインスタンスが停止するとディスクが再作成されるのは把握していたので、停止しないように運用してましたが、AWSの障害の際に再起動されディスクが削除されていました。
ランニングコストを掛けたくなく、バックアップを行っていなかったため再開困難になりました。
概ね結果は出ていたので一旦終了としました。
まだ先の展望はあるので時間がある時に見せ方を変えてサービス化したいです。
※ECSとはAWSのコンテナ実行基盤です。ECSで当該システムを運用していました。
セリフデータベース
Youtubeにあるアニメのセリフや名言の動画をまとめたメディアを作成しました。
コンテンツはヘッドレスCMSで管理したり、NUXTでSSRしてCDN(CloudFront)でキャッシュさせたり、AWS LambdaでOGP画像を生成したりとモダンな構成を試したくて作りました。
技術的な詳細は以下にまとめております。
https://qiita.com/t-kuni/items/cd9cff8171f14a170da3
仮想通貨自動売買システム
2020年末から2021年に書けて仮想通貨が盛り上がっていたので、仮想通貨の自動売買を行うシステムを作ってみました。
模擬の取引結果ログをDWHに溜め、BIツールで結果を可視化/分析し、分析結果を踏まえて売買アルゴリズムを改良していきました。
作成経緯
自動売買で本当に利益が出るのか興味があったのでそれを検証した形になります。
使用技術
| 言語 | JavaScript(Node), SQL |
| 分析系 | BigQuery, データポータル |
| 取引API | bitFlyer |
| コンテナ | Docker |
| インフラ | AWS(ECS, ECR, S3, SSM) |
| IaC | Terraform |
| IDE | PhpStorm |
| テスト | mocha, chai |
結果
売買履歴を取りつつ、利益が出せそうなアルゴリズムを探りました。
結論として価格の推移を元に判断を行う自動売買で利益を出すのは難しいと感じました。
取引を重ねるほど平均損益は0に近づき、手数料分だけ損するような結果になりました。
実際にはインフラの維持費もあるので黒字にするのはかなり難しいと思います。
その他詳しいシステムの構成は以下の記事にまとめています。
新ポートフォリオ
（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ファイルの読み込み