hitode909の日記

趣味はマリンスポーツですの日記です

趣味活動 #kyotojs

プレゼンモード
再生
← / →で移動
fでフルスクリーン
escでおわる

Kyoto.js 16での飛び入りLT資料です

趣味活動

  • Kyoto.JS 16
  • 趣味活動についてのLT
  • 好き勝手に触れるプロダクトを持っておくと便利、という発表をします
  • hitode909

hitode909 レペゼン 株式会社はてな

https://hatenacorp.jp/images/hatenaportal/company/hatena.png

  • Kyoto.JSとのかかわり
    • 2012〜2017 ブログチーム with amagi
      • このプレゼンもはてなブログで実現している
    • 2017〜 漫画チーム with Pasta-K

hitode909 レペゼン 東ダンスネットワーク

https://higashi-dance-network.appspot.com/logo.png

今日の重ね着

趣味プロダクトの醍醐味

  • 他のメンバーが直してくれたりしない
  • OSSであってもコントリビュートするメリットがない
  • 放っておくと滅びるので手を入れていく必要がある
  • 本発表では重ね着の歴史を振り返り、趣味活動について紹介します

今日の重ね着2011

  • CoffeeScript
    • 当時はなんでもCoffeeScriptで書いていた
  • jQuery1.6
    • なんでもjQuery
  • underscore.js
    • _.each_.templateが便利

今日の重ね着2012〜

  • 放置
  • 利用していたAPIが終了して、半年くらい壊れたまま放置したり

今日の重ね着2014

  • 「重ね着」で検索結果1位になっていることに気づく
  • 月間ユニークユーザーが10万人
  • やる気が出て、雨の日に傘を保つ機能を追加


今日の重ね着2016

  • HTTPS化の波
  • 現在位置を取得するブラウザのAPIがHTTPでは動かなくなる→HTTPS化
  • appspot.com そのまま運用していたため証明書の取得は不要

今日の重ね着2017

  • PWAの波
    • ServieWorkerを導入してホーム画面に置けるように
  • いくらなんでもCoffeeScriptはつらい
  • CoffeeScripからFlowTypeに

今日の重ね着2018

  • 手元で起動できなくなる
  • SDKが古くなりデプロイも不能になる

今日の重ね着2019

  • 先週末に突然思い立って手を入れはじめた

手元で起動できるように

  • Google App Engineのローカル起動用スクリプトを使っていた
  • 古いProtocolBufferが入っていると変な失敗をして動かなくなる

レスポンシブ化

  • これまで320px固定で見た目は8年間変化なし
  • レスポンシブ化によってタブレットやPCでも便利に
  • float:left, float: rightをやめてFlexboxに
  • 柔軟な広告を出せるように

FlowTypeからTypeScriptに

  • 2年間放置したことで、ライブラリが古すぎ、エディタからのシンタックスチェックもできない
  • FlowTypeふだん触ってないので直したところで喜びが低い
  • package.jsonを消して一からやり直し
  • https://github.com/bcherny/flow-to-typescript
    • ある程度変換してくれる→あとは流れで

Yarnからnpmに

  • 気づいたらyarn.lockとpackage-lock.jsonが両方できていたのでnpmにした

underscore.js廃止

  • _.each使ってるだけだったのでArray.prototype.forEachに書き換え

jQuery 1.6からjQuery 3.4に

  • 凝ったことしてないのでそのまま動いた

callbackを使った設計をasync/awaitに

  • (callbackSuccess, callbackFail) を引き回していたのをやめられた

令和に向けて

  • 開発環境が整ったのあ新たな施策が可能に
  • jQuery脱出
    • 配信するJSのサイズを下げたい
  • navigator.shareでtwitter以外にシェア可能にしたい
    • LINEで送るとか
  • サーバーサイドをPythonからNodeにしたい
    • 服装決めるロジックをサーバーサイドに
  • AMP化
    • twitterにシェア→開くと高速に開ける、とか
    • GoogleのCDNを通せるのでインフラコスト下げられる
    • そのためにまずはロジックをサーバーサイドに移したい

まとめ

  • 趣味プロダクトを持っておくと便利
  • 好き勝手に手を入れられるサービスを持っておく
  • 新しい技術の実験台
  • 自分の技術スタックにあわせて、たまに手を入れると時の流れを感じられる