とある学生エンジニアがぶつぶつと独り言を呟いているだけのブログサイトです。 生きとし生けるものは幸せでありますように。
Portfolios

Portfolios

これまで作ったアプリの要約とURLを書き留めました。

ホームページ(yukinissie.com – ニッシー☆のブログ)

今ご覧になられているWebサイトです。自分でレンタルしたVPSに1から構築しました。

https://yukinissie.com

Wa:talk

話題提供アプリです。その場にいる人との親睦を深めたいときにどうぞ。概要はこちらから。

※[注意]パソコンからのアクセスの場合、音が出ますのでご注意ください。

https://watalk.yukinissie.com

Meguru Cosmos

モダンな技術を銀河にしました(?)。とあるハッカソンにて製作した作品です。概要はこちらから。

※[注意]若干身内ネタが混ざっています。ご了承ください。

https://lonely1.yukinissie.com

Mazakan

とあるハッカソンに野良で且つ1人で参加したときに作ったWebアプリ。エナジードリンクを日常的に飲む皆さんに専用チャットにて報告してもらいそのチャット数を集計・ランキング化するというもの。

LambdaのようなファンクションサービスやDynamoDBのようなNoSQLサービスを扱うことが初めてだったのでさまざまな面で苦労しました。まずLambdaはフロントが永続化したいデータをDyanamoDBに保存したり、保存済みのものを取得したりするために作成しました。小さなスクリプトを書くに等しいのですが、DynamoDBの扱いに慣れてない(というか知らない)のも相まってとても手こずりました。

React.jsについてもハッカソン中しか学ばないのもあって非同期でデータをフェッチする箇所を書くのに少し時間がかかりました。

この時はDynamoDBにソートのための仕組みを実装できなかったため、チャットによる表示の時系列はめちゃくちゃになってしまいました。

https://mazakan.yukinissie.com

Keiziban(Vue Chat)

開発合宿にてVue.jsで作った掲示板アプリです。ほぼはじめてのVueでしたがなんとか2日で形になったのでよかったです。手こずった点は、APIゲートウェイにてCORS設定を適切に設定していなかったためにリクエストを拒否され続けていたことに半日ぐらい気づけなかったことです。。

元となるソースコードを公開しています。(ソースコードはこちらから)

https://vue-chat.yukinissie.com

勉強で作ったサンプルアプリ

チュートリアルで作った成果物です。ホスティングに費用はかかってないのでドメインをつけて公開しています。

https://nextjs-tutorial.yukinissie.com

https://hello-gatsby.yukinissie.com

https://hello-gatsby-and-netlify.yukinissie.com

https://learnjs.yukinissie.com

その他

なにかしらの作品になるかも??

https://nyannyan.yukinissie.com

https://www.yukinissie.com

以上です。

最後まで見てくださりありがとうございます。

他にもデプロイしていないものがいくつかあるのでこのページに追加していきたいと思います。

watalk
Wa : talk(わトーク)

#watalk
#eye_of_the_cyclone
#キャンプハッカソン
#ハックツハッカソン
#made_in_kyushu

さっそくはじめる

※音量注意(PCユーザーのみ)

What’s “Wa:talk”?

トークテーマと話す人をランダムで表示してくれる話題提供アプリです。

こんな人にオススメです。

  • みんなで楽しみたい
  • その場にいる人との親睦を深めたい
  • 大人数でトークをしたい
  • トークしたいけどおもしろい話題が浮かばない

そんなあなたに以下を提供します。

  • 5 種類 100 個以上のトークテーマ
  • トークテーマの趣に合わせた BGM (PCユーザーのみ)

特徴

  • ユーザーとトークテーマの選択は完全ランダム
  • その場かぎりのインスタントユーザー管理機能
  • トーク時間を管理するタイマー機能
  • トークターン数を管理するカウンター機能
  • すべてオリジナル BGM

さっそくはじめてみる

プロダクトの URL を掲示します。

ぜひお試しください。

※音量注意(PCユーザーのみ)

「Wa:talk」 プロダクトURL:https://watalk.yukinissie.com

※URL はいずれ変更されます。ご了承ください。(このページや、Twitter(@yukinissie) で予告します)
※このプロダクトの利用によって起きた利用者のいかなる損害についての責任は負いかねますのでご理解のほどよろしくお願いします。
※このプロダクトはα版です。

追記1:Wa:talkのURLが変わりました。上記の通りです!(2021/05/30)

開発経緯

このプロダクトは株式会社ハックツ主催のハッカソン「キャンプハッカソン」にて大学生 2 人(企画/プレゼン:@oyamamanao, 開発:@yukinissie)の手によって開発されました。

BGM提供者

以下の方にBGMを提供していただいています。

使用技術について

以下に概要だけを示します。

フロントエンド

サーバーサイド・インフラ

Node.js 環境構築(Mac × fish × anyenv)

Node.jsを使う機会があったのでメモ。

前提要件

以下の環境上で構築する。

  • OS
    • MacOS Catalina v10.15.6
  • shell
    • fish v3.1.2
  • Xcodeインストール済み。
  • Homebrewは使わない。
  • **env系は入っていない。

anyenv のインストール

nodenvを使ってNode.jsを管理したいので、まずはnodenvそのものを管理するanyenvをインストールする。

必ず本家サイトを参照すること。

git clone でダウンロード

$ git clone https://github.com/anyenv/anyenv ~/.anyenv

パスを通す

$ set -Ux fish_user_paths $HOME/.anyenv/bin $fish_user_paths

anyenv の初期化

$ ~/.anyenv/bin/anyenv init

結果

# Load anyenv automatically by adding
# the following to ~/.config/fish/config.fish:
status --is-interactive; and source (anyenv init -|psub)

言われた通りに以下を~/.config/fish/config.fishに追記。

※環境によって追記内容が違うかも。

status --is-interactive; and source (anyenv init -|psub)

anyenv install の初期化

ターミナルに再ログインする。

結果

ANYENV_DEFINITION_ROOT(/Users/riywo/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

anyenv-installフォルダ(install manuifest)が無いよと注意される。

以下のコマンドで作成。

$ anyenv install --init

途中、Do you want to checkout ? と聞かれるので「y」を押してリターン。

anyenv自体のインストールは完了。

以下のコマンドでinstallできるもののリストを確認できる。

$ anyenv install -l

各**envをアップデートするためのプラグインをインストール

$ mkdir -p (anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git (anyenv root)/plugins/anyenv-update

プラグインの本家サイトはこちら

以下のコマンドでアップデートできるようになる。

$ anyenv update

nodenvのインストール

$ anyenv install nodenv
$ exec $SHELL -l

yarnも一緒に入れてくれるプラグインをインストール

$ git clone https://github.com/pine/nodenv-yarn-install.git (nodenv root)/plugins/nodenv-yarn-install
$ exec $SHELL -l
$ nodenv hooks install

Node.js をインストールする

Node.jsのバージョンリストを表示

$ nodenv install -l

バージョンを指定してインストール

$ nodenv install 14.10.1

globalで使うバージョンの指定

$ nodenv global 14.10.1

Node.jsのバージョン確認

$ node -v
v14.10.1

これでNode.jsの環境構築ができた。

以上。

参考

fishでanyenvを使う

anyenvを使う

anyenv.github.io

anyenv-update

ndenv / nodenv で Node.js をインストールする際、同時に Yarn もインストールする方法

nodenv-yarn-install

はじめてのiOS勉強会からの1人ハッカソン

勉強会で作ったアプリを元に挑むハッカソン

先日、とあるSwift勉強会に参加し、はじめてのiOSアプリをビルドしました。
その勉強会の裏イベントで、iOSアプリをテーマとした1人ハッカソンが開催されるということで、学んだことをアウトプットする機会として参加してみました。
以下、関連URLです。

CountUpGame

このアプリについて

勉強会で作ったアプリを拡張して、ゲーム要素を取り入れてみました。
+ボタンやーボタンを押すと表示されている数字の値が変化する仕様だったので、新たにターゲットとなる数字をランダムに用意し、プレイヤーはそれに合わせる形でカウントアップやカウントダウンをしてもらい、スコアを稼いでもらうようにしました。
制限時間を用意したのでどれだけ速くターゲットと数字を合わせられるかがスコアゲットの鍵になります。

プレイ映像

play映像

技術的概要

  • Xcode Version 11.6 (11E708)
  • Swift Version 5.2.4
  • StoryBoardを使用
  • アダプティブユーザーインターフェイスに挑戦
  • ダークモードでも使用できるように調整(プレイ映像はダークモード)
  • import GamePlayKit
  • 乱数を生成: GKRandomDistribution(lowestValue: Int, highestValue: Int)
  • Timerを使用
  • プレイヤーの扱う数字はcount、ターゲットの扱う数字はquestionで集約(リファクタリングの余地がありそうです。)

まとめ

はじめてのネイティブアプリ制作でしたが自分なりにアウトプットできてとても楽しかったです。
ヒミツ機能としてオンライン対戦機能を付けようと思っていたのですが、、
サーバーとの通信を用いたアプリを作るには、まだまだ僕の技術的スキルでは及ばない感じです。。

大学のテスト頑張ります(^^)(全く関係ない)

リポジトリはこちらhttps://github.com/yukinissie/CountUpGame