mizdra's poem

雑なこと (日記/技術ポエム/メモ/…) を書くブログです. 真に受けないでください.

2018-11-08

今日の電車

  • 行き: 勝ち
  • 帰り: 勝ち

Netlify Functions

あるWebアプリでOGPのメタタグを動的に生成したくなったのでNetlify Functionsを使っているのだけど, 挙動が不穏すぎて頭を抱えている.

例えば, ある名前のlambda functionsにリクエストを投げると何故か同じ名前の以前のバージョンのlambda functionsにリクエストが届いてしまい, 全然違うレスポンスが返ってきたりすることがある. 常に古いfunctionsにリクエストが届く訳ではなくて, 確率で新しいfunctionsや古いfunctionsに届いたりする.

あとlambda functionsが吐いた標準出力をNetlifyのダッシュボードから見れる機能があって最初のうちは普通に問題なく動いていたのだけど, 突然ログページを開いてもローディング状態のまま止まってしまい, ログが表示されなくなる現象にも遭遇した. Netlify Functionsぶっ壊れてそうですね.

ともかくOGPのメタタグを動的生成したいという当初の目的はどうにかして達成したいので, Netlifyのサポートに連絡するなり, 他のサービスに乗り換えるなりするのが良さそう. 今日は消耗しまくったのでまた後でやろう...

2018-11-04

React

Dentoo.LT #21で発表するWebアプリをぼちぼち作っている. 今回はViewライブラリにReactを採用していて, 勉強がてらReact Hooksを使って書いている. Vue.jsみたいに簡単にreactiveなデータが扱えて結構便利. 何より今までClass Componentでないと書くのが難しかったことが, React以外のライブラリ(react-reduxやrecompose)に依存せずにFunction Componentでスッキリ書けるのが良い.

React Hooksの useState を使えばreactiveなデータとsetterは同時に用意できる. Class Componentのように, わざわざ自分でreactiveなデータのためのフィールドを記述して, それ専用のsetterを別に用意する必要がない. あるべき形に落ち着いたようで良さそう.

2018-11-01

Dentoo.LT

ポッキーの日にDentoo.LTやります. なんだか登壇希望者が少ないらしいのでネタを抱えているそこのあなた, 今すぐ登壇申請して下さい. とりあえず今この日記を見ている人が全員登壇申請すれば解決するはずです. 是非.

atnd.org atnd.org atnd.org

ちなみに僕も登壇申請していて「祝う2」というタイトルで話します. 気になる方は今すぐatndから参加登録して見に来て下さい.

11月

ノベンバー.

2018-10-28

今日の電車

  • 行き: 勝ち
  • 帰り: 勝ち

ポケモンGO

コミュニティデーでダンバル乱獲していた. 成果は3時間でダンバル202匹, 内6匹が色違いという感じ. 色違いは沢山手に入ったのだけど高個体値のダンバルがあんまり手に入らなくてちょっと残念.

共同編集対応エディタ

前に言ってた大学の課題で作っている共同編集対応エディタがほぼ完成した. 実装した機能はざっと以下の通り.

  • 1文字単位での文字の挿入, 削除に対応
  • 十字キーによる移動, カーソルを使った編集に対応
  • 改行, 折返しに対応
  • Operational Transformationに対応
  • 複数のクライアントからの接続に対応
  • 他のクライアントの挿入/削除によるカーソル位置のずれに対応
  • 移動できない位置にカーソルを移動しようとするとbeep音で警告する機能をサポート

動作の様子を動画で撮ってみた. 今回は遅延のある環境を再現するためにサーバ側でクライアントから操作を受け取るたびに0.5秒sleepする処理を入れている. 動画を見れば, 同じ文章を同時に編集しても想定外の位置に飛んだりすることなく, 操作者の操作はローカルに瞬時に反映され, 遅延してからサーバと他のクライアントに反映されている様子が分かると思う. Operational Transformationスゴイ.

youtu.be

時間が無くてOperation Transformation実装できないかもなーと思っていたのだけど, 以外と何とかなるもんですね. 普段こういう凝ったアルゴリズムをプログラミングで実装することはあまりないので, 良い体験ができた気がする. 提出日は明日なのでもうこれ以上機能を追加することはできないけど, もっと時間があれば共同編集者のカーソル位置の表示とかやってみたかった. ざんねん.

2018-10-15

今日の電車

  • 行き: 勝ち
  • 帰り: 負け

同時編集対応エディタ

大学のネットワークプログラミングという実験で, ソケット通信を使った好きなプログラムを作る課題に取り組んでいる. 講義ではその例としてリアルタイムチャットや対戦型ゲームが挙げられていたけど, ありきたりすぎてつまらないので他の題材を探していた. そこで以前から「DocBaseの同時編集機能を実現しているアルゴリズム | KRAY Inc」という記事を読んで気になっていたOperational Transformationを用いた同時編集対応エディタを作ることにした. なによりHackMDやScrapbox, Google Documentのような同時編集機能を自分で実装するという体験は憧れますよね.

とはいっても授業日数には限りがあり, Operational Transformationの実装に時間が掛かって未完成のまま終了してしまっては悲しいので, 最悪Operational Transformationの実装が間に合わなくても共同編集可能なエディタとしては機能するような実装方針を立てて実装することにした.

  • 実装の方針
    1. 1つのクライアントが同時に接続可能なドキュメント共有エディタのプロトタイプを作る
      • 文字の挿入や削除は対応せず, 全文書き換えのみ対応
      • 挿入や削除といった操作ではなく, ドキュメントを丸ごと送信する方式
    2. 複数のクライアントからの接続に対応
    3. 文字の挿入, 削除に対応
      • 挿入コマンド, 削除コマンドをサーバに送信する方式
      • コマンドはサーバを経由して全共同編集者に反映される
    4. 十字キーによる移動, カーソルを使った編集に対応
    5. Operational Transformationに対応
      • 操作はその操作を行った者には即時反映され, それ以外の共同編集者にはサーバをして反映される
      • 全てのクライアントの整合性が担保されるよう, サーバで操作のコンフリクトを解決する
  • オプション
    • 共同編集者のカーソル位置の表示

1から順に作っていけばOperational Transformationによる同時編集対応エディタが完成する. 仮に5まで終わらなくても, 3まで出来ていれば共同編集可能なエディタとしては機能するはず. とりあえず2時間で2まで出来ていて後9時間あるので4くらいまでは余裕を持って実装できそうな気がする. やっていきます.

21歳になりました

21歳になりました. めでたいですね. 21歳もやっていきましょう.

ちなみにこちらはmizdraの誕生日をお祝いできる最高便利ワンライナーです.

$ npx mizdra/happy-birthday-mizdra

Image from Gyazo

そしてこちらは不思議と押したくなる最高便利リンクです.

よろしくお願いします.

2018-10-12

今日の電車

  • 行き: 負け
  • 帰り: 勝った気持ち

便利ハンコ

hogasさんによって部室に便利ハンコが持ち込まれたので, 押して遊んでいた. とりあえず劇っぽいものに劇を押しておいた.

個々でも十分良いけど「劇毒」みたいに組み合わせても良いですね. 是非お試し下さい.

3Dプリンタ

最近部で3Dプリンタを購入したので, mizdraハンコを作ってみた. 朱肉とハンコさえあれば自己を出力できる便利アイテムです.