作ったものの説明

• 今まで作ったものの説明をしてこなかったので簡単に説明しようと思います。
• 就職活動でGitHubのURLを乗せても、READMEに書くのは簡単な説明と使い方くらいなので分かりにくいと思うので…。
  • 主に「なぜ作るのか」、「何を学んだか」
  • 基本的には、自分の問題を解決するため
    • 次に、興味のあるライブラリなどを試すため

ie-ignore-slide

• スライドのライブラリ
• polyfill使えばいいのだけど完全に個人用なのでIEを無視することに

背景

• パワーポイントを使いたくなさすぎて自作した

学んだ技術

• WebComponents
  • 当時ようやくFirefoxで使えるようになったのと、技術書典でWebComponentsの本を買ったことが理由

工夫

• 地味にプログレスバーを用意してLTに便利なようにしてる

改善点

• CSSアニメーションをもっとスライドらしくしたい
• コンポーネントにあてるCSSをきれいに書けずもどかしい
• npm publishしたほうが使いやすい

podcast

• 録音したものをpodcast形式で配信するアプリケーション
• だいぶ前に作っていて今でもずっと使い続けており、最近コンテナ化した

背景

• ラジオが好きなので個人用のアーカイブ

学んだ技術

• docker
  • もともと素朴に作っていたものをコンテナ化した
  • そうすることでミドルウェアの設定などもgitで管理できるようになり、ポータビリティが得られた
  • logging driverでログ収集することでfluentdクライアント不要になるところがよい

工夫

• docker-compose.ymlを開発用と本番用に分けたところ
  • 本番用にはfluentd/mongodbを足して、ログの集積をしている

改善点

• 集積したログを閲覧・検索したり、監視したりする仕組みを用意したい

videoserver

• youtubeから動画をダウンロードしてpodcastとして配信する

背景

• テック系の動画を通勤中に見れるように
• podcastとして管理すると未読管理が楽になる
• 結局はmusic videoがメインになってしまった

学んだ技術

• バックエンドはgolang
  • goroutine, channelの基本的な使い方
  • パッケージ管理はいろいろ変遷があったようだがdepを使うようにした
  • ビルドにはmakeを使い、静的解析をするようにした
• フロントエンドはreact
  • 途中でhooksに書き換えてみたり、reduxに入門したりした
  • ビルドツールはparcelにした
    • 勝手に必要なものが裏で揃えられるので楽だけど、たまにうまく行かなくなるときがある…
    • 小さく始めるときの最初のビルドツールとして最適だと思った
  • web workerも使ってみた

工夫

• polling処理でダウンロードの進捗表示をするところ
  • バックエンドはgoroutineからyoutube-dlの標準出力を抜き取ってレスポンスを返す
  • フロントエンドはWebWorkerでサーバリクエストを送り、メインスレッドにサーバレスポンスの一部を返す

改善点

• 削除APIができていない
  • DBを使ってない（ファイルシステムを直接見てレスポンスを作っている）ので、一意にしにくい
• reduxを使い始めたが、きちんと理解した感じがしない
  • ミドルウェアまで入れたくない気持ちがあるが実際はどうなのか
• 字幕情報をダウンロードできるのだが、動画に埋め込むとき字幕表示がきれいではない

meigaza

• スクレイピング結果をslackやスマホに通知してくれるスクリプト

背景

• 映画をよく見るようになった
  • 東京にある名画座のスケジュールを簡単に知りたくなった
  • 気づいたら前売り券を買える期間が過ぎていた

学んだ技術

• puppeteerによるスクレイピング
• aws lambdaのカスタムランタイム
• iftttでの通知

工夫

• 最初は常駐型のボットを実装しようと思ったが、スケジュールでキックされるAWS Lambdaで実現できたこと

改善点

• cliでデプロイできるようにしたい

mock-server

• リクエストパスとサーバローカルのファイルをマッピングするサーバ

背景

• フロントエンド(SPA)の開発でモックサーバが欲しくなった
  • 特にページャの実装で、特定のクエリ文字列を含むURLのとき、それっぽいJSONを返してほしい
  • nginxのlocationはクエリまで含めて判定してくれない
  • 軽く探しても欲しい物はなさそうだったので、自分で書くことにした

学んだ技術

• node.jsでのサーバの書き方

工夫

• ライブラリを使わないようにnodeのapiだけで作ってみた
  • 使うときnpm installする必要がなくなって、シンプルなものになった
• 普通に作ると起動時だけ設定ファイルを読むように作るが、フロントエンドの開発をしやすいようにリクエストの度に設定ファイルを読むようにした

改善点

• typescript化
• テストがない
  • ルーティング定義のファイルを実行時引数で渡せるようにしないとな…
• 公開ディレクトリに置かれたファイル（webpackなどのビルド成果物）の変更検知して、ブラウザをリロードしたい

modal_sample

• よくあるモーダル画面のサンプル実装

背景

• 仕事でモーダル画面が必要になったがライブラリを使わず実装したかった

学んだ技術

• よくあるモーダルの実装方法
  • 世の中のモーダルはどう実装されているのか、いろいろ調べてみるとだいたい同じだったのでそのように実装した
• cssアニメーションの基礎

工夫

• ライブラリを使わずvanillaに作ること
• WindowsのインターネットオプションによってIEではlocalStorageが無効にできるので、Nullオブジェクトを用意した

改善点

• 特になし

elecron

• 指定したスケジュールで任意のURLを開く常駐アプリ

背景

• 物理的な勤怠打刻からWebの打刻に移行した際、打刻を忘れてしまうという話を聞いた
  • 出退勤の時間になったらブラウザで打刻用のサイトを開くアプリを作ろうと思った

学んだ技術

• electron
• vue
• webpack

工夫

• windows向けに作ったのでappveyorを使ってみた

改善点

• cronの書式が分かりにくい（がパターンの表現力は高いので、完全に置き換えるものは思いつかず…）
• コンポーネントが大きいので分割したい
  • 1個のFormを分割するのは冗長な部分が増えそうで躊躇してしまう