wired raven : Automatic Wing

文字通りの日記。主に思ったことやガジェットについて

WEBエンジニア勉強会#13

WEBエンジニア勉強会#13 2019/05/24

2019/05/24に開かれたWEBエンジニア勉強会#13に参加してきた。

詳細は WEBエンジニア勉強会 - connpassを参照。

個人のメモ書きだけど、こんな雰囲気だったと知る資料になるかな、と。

資料はWEBエンジニア勉強会 #13 (東京都, 渋谷) - connpassに順次あがっていくようなので、そちらと合わせて読むことを推奨


前座枠 : 令和のWebはどう変わる?Web3.0が目指す世界

  • 1.0は初期のWebのこと。静的サイト、閲覧だけが可能なサイト。情報を見るだけ、単方向。
  • 2.0は双方向に情報がやり取りできるようになった世界。SNSによる個人交流。APIによるWebアプリケーション間の連携。
  • 3.0はブロックチェーンの誕生によって新しく提供された概念。特定のサービス事業者が情報を管理する中央管理型のWebから脱却し、全員で情報を分散管理する世界を目指す。よりセキュアに、よりボーダレスに。Web自体が非中央集権型の文書共有システムなので、原点回帰とも言える。
  • これからゆっくり非中央集権型になっていくのではないか、という話。
  • Web 3.0と誰が言い始めたのかははっきりしない。海外由来の模様。

オープニング

  • Gorw with Gogleのデベロッパー向けの記事を見たか、的な話。
  • 教育コンテンツを無料公開しているのでぜひ読もう。
  • Googleアナリティクスアカデミーコースなんてものもある。
  • 各種SNSアカウントあり。
  • 会社以外にも所属するコミュニティを増やす狙い。
  • 個人が自由で発表できる場を目指している。
  • 会場スポンサー、フードスポンサーなどスポンサーを募集中。
  • 開催に関しては個人でできる範疇を超えているので、参加してくれる人を募集中。

LT枠 : 個人でのWEBサービス開発について(仮題)

  • WEB専門でやっているフリーランスの個人開発者
  • 制作物の紹介
    • 猫に邪魔されたい
    • meeemo
    • などなど
  • 個人開発は何をすれば良いのか
    • という質問が出てくる背景の考察
    • 駆け出しエンジニアの増加
    • 非クリエイター業界から物作りに携わりに来た人が増えた?
    • なんか流行っててキラキラしてそう
    • お金が儲けられそう(誤解)
  • そもそもとして「何をしたいのか決まってない」
  • 何かをしたいという思いはあっても、自分のことなのに漠然としていてうまく表現できない状態。イラストってどうやって描いたらいいですか、とか、料理ってどうやって作ったらいいですか、とか。
  • 何をしたいのか、を一緒に考えることはできる。
  • イデア発想手法はいくつかあるので、そういったものを活用しよう。
  • 今すぐできる方法 = 自問自答
  • 感情が大きく振れた経験をベースに考えてみる。
  • 不便だなーって感じていることはあるか? あるならそれが開発するもの。規模が大きい問題の場合はミニマムに分解する
  • 特にそういうものがなかったら、別のことを考える。自分の課題がないなら、他人の課題に注目する
  • これが好きって言えるものがあるか?
  • あるなら、もっと好きになったり、より楽しむには? 誰かと共有する? 競う?
  • それを作ることで誰かの役に立ちたい? そうなりたい、それが目的なら、自分がその誰かに共感できるか? 主軸を自分ベースで考えないとやり切るのは辛い
  • 自分が欲しい、助かるからだ。ならば、ゴー。
  • それを作ることで注目や評価をされたい?
  • それを作ることでお金を儲けたい? そうなりたい、それが目的。マネタイズをどうするか?
  • メイン目的ではないかな? お金を主目的にしないなら、他の目的をより大事にしよう
  • それは爺分が欲しいと思えるか? あったら自分が使ってみたいと思うものか。自分が必要だと思わないなら、いらないよね
  • 何かが思いついたなら、それだけで個人開発の才能あり。何も思いつかなかったら自問自答しよう

自分の性格と制作物の性格

制作物の性格とは

  • 自己 - 他己
  • 課題解決 - 新規創出
  • 満足 - 承認

自分の性格と制作物の性格がずれるとしんどい。

まとめ

仕事だから作った、というのは当たり前。

個人開発だからこその自由度の高さや醍醐味があるよ。

LT枠 : この夏モテたい人のための2stepで起動できるNuxtjs + Rails(ID/PW認証付き)サンプルを公開!

なぜこのタイトルにしたのか

  • キーワードでタイトルを自動生成してくれるツールがある
  • それを使った結果

Nuxtjsとは

  • 細かいことは公式サイト参照
  • 色々やってくれるツール

サンプルの説明

  • なぜこのOSSを使おうと思ったのか
    • サービスを思いついても、すぐに実装できる環境がない
    • 新規作成やろうとしても、ブランクがあると似たようなところで躓いて、思考が止まる
    • これはすぐに作れる
  • サンプルコードはGitHubに上がっている
  • Token-base認証を使う

Vuetify

Jest

  • facebookOSSとして開発を進めているJS用ユニットテストのツール
  • Node、React、Angular、Vueなど色々な環境で使用できる
  • テスト環境の構築やテストコードを書く習慣を作るのは難しい。最初からやったほうが望ましい

最後に

LT枠 : データベース2.0

  • フロントエンドではなくバックエンドの話

平成はデータベースの時代

でも、平成の実情は

  • 去年はこんなことがあった
  • サイトリニューアルプロジェクトをやった
  • DB性能悪化→インデックス張替え→再テスト→HTTP 504エラー
  • SQLの書き換え→デグレっしょんテストが増える
  • DBがボトルネックになるのはプロジェクトにとって鬼門かも
  • 「青い銀行」の障害もDB由来かも

もし矢口蘭童がいたら?

  • DB復活作戦:前に進め
  • 2時間のバッチ処理を15分に短縮、タウンワークのパフォーマンス改善奮闘記【デブサミ2019】
    • ワークテーブルを削除しまくった結果らしい
  • 君たちにDBの未来を託します!!

SQLのおすすめ教材

  • SQLを書くこともプログラミングだ
  • スキルを身につけよう
  • SOFTWARE DESIGN 2019/4のSQL特集
    • Web上にシミュレーターが紹介されている
  • SQL書き方ドリル

RDBMSのおすすめの教材

  • 絵で見てわかるOracleの仕組み 新装版
    • 2006年出版、最近になって改訂版がでた

おまけ

  • スライドはSlideshareで公開予定
  • リンクを埋め込んでいるので是非読んでほしい

LT枠 : Rustでwebassemblyしてみた

  • やってみた系の発表になる
  • 目次
    • 登場人物
    • Rust
    • WebAssembly
    • Nuxt
    • GoでWasm
  • 誰向けの話?
    • Rustのことはあまり知らない?
    • WebAssemblyはあんまり知らない
    • NuxtやVueは知っている
    • WebAssembly、PWAで使うとどうなるかわかる
    • GoでWasmを使ってみたら?
  • Rust
    • 安全
    • 速い
    • Mozillaが支援するOSS
    • クセが強い
  • Rust安全
    • 所有権、ライフタイムがある
      • 変数のスコープが厳密で、値が基本はコピーされず移動する。各変数には所有権と寿命が存在している
  • Rustのエラーハンドリング
    • 関数が単純な型(boolとかStringとか)を返してくれない
  • Rustインストール
    • サイト見ながらコマンド叩けば一発
  • WebAssembly
  • PWA
  • Rust on WebAssembly on PWA
    • wasmファイルをキャッシュできれば、よりネイティブアプリに近づくのでは?
    • 多少ファイルが大きくなっても、キャッシュしてしまえば快適なのでは?
    • できたよ
  • Full Text Searchのパフォーマンスを計測するとwasm 6.2ms js 56.3ms

論文紹介 Language in Our Times: An Empirical Analysis of Hashtags

  • instagramにおけるハッシュタグの分析
  • The Web Conference
    • Web技術全般に関するもっとも権威のあるカンファレンス
    • 審査が厳しいので信頼性が高い
  • Excuse
    • 概要をさらっと紹介
    • あくまで論文を読んだ上での私的な感想
  • 軽く背景
  • Instagramの大規模データ・セット
    • 2010年の終わりから2015年の終わりまで約5年間のデータを収集
    • ニューヨーク、ロサンジェルス、ロンドンの位置情報付きの写真対象
    • #nys#londonなどの地域特有なものも多くあった
    • 一方で#love#artなど一般的なものも多く買った
    • ハッシュタグのシェアされた回数とハッシュタグ付きの投稿をしたユーザーの人数の分布
    • ほとんどは数回程度しか投稿されてない。たくさんシェアしているユーザは少ない
  • ハッシュタグ付きの投稿と、投稿をしたユーザの割合の時間変化
    • 2010年から2%、5年後には70%
  • 3つの観点
    • 時間や場所とハッシュタグの関係
      • #newyear などの祝日に関係するようなものは周期的に人気になる
      • タグの種類によって変わる人気度の時間的変化の違いを分析したい
      • 最初増えた後安定する / ずっと増え続ける / 規則的に変化 / 一瞬ドーンと増える
      • Barなどでは訪問してもあまりハッシュタグをシェアしない。公園などでハッシュタグをつける傾向あり
    • ハッシュタグの意味の変化
      • 単語の意味というのは変換していくもの
      • ハッシュタグの意味も時間の経過とともに変化していくのではないか?
      • みんな大好きWord2Vecで単語をベクトルに変換して類似度を測定
      • 1年ごとにハッシュタグをベクトルに変換し、時間の変化とともに意味が変わっているのか検証
      • 一般的によく使われる単語は意味が変わりにくいと言われる
      • ハッシュタグにおいてはそうでもなかった。相関係数 -0.2
      • ハッシュタグの使われ方のばらつきを計算するハッシュタグエントロピーというものを提案
      • たくさんのユーザに同じぐらいの頻度で使われているほど小さくなる。
      • ハッシュタグエントロピーハッシュタグの意味の変化の関係を分析
      • たくさんのユーザに同じぐらいの頻度で使われているハッシュタグほど意味が変わりやすい
        • ヘヴィユーザーが少ない場合はあまり変化がしない、らしい
    • ハッシュタグを用いたソーシャルな友達関係の推定
      • 友達関係にあれば同じようなハッシュタグを投稿するのでは?
      • 共通のハッシュタグの数が多ければ友達? →結構少ないから厳しい
      • UserとHashtagの関係をグラフで表す
      • 3つのベースラインと比較して高い精度
      • 共通のハッシュタグ投稿がない友達関係も推定できた
    • まとめ

## LT枠 : チーム開発でモチベーションを保つためにCT(継続的ツイート)を実施してみた

  • いきなりですがデモします
    • Pull requestをMergeすると自動ツイートされる
  • きっかけ
    • 勉強会での発表をきっかけにチーム開発が始まった
  • モチベーション維持問題
    • 金銭的なインセンティブがない
    • 時間的な制約がある
    • コミュニケーションが非同期
      • Slackを使っているが、1日単位で返事を待つことも
    • タスクを把握できない
    • タスクが大きすぎる
      • Issueを画面単位で区切ってやってみたら、同じ画面を数週間単位で抱えるのでモチベーションが上がらない
  • 色々な工夫
  • CTの機能概要
    • GitHubでプルリクをマージした際にツイートする
    • ツイートの内容はマージする際に作成できる
      • 本来のマージコメントの使い方からは外れる
  • 所感
    • WebhookはGitHubのほぼ全てのイベントをカバーしているのでなんでもできそう
    • Pythonを選んだ理由はLambdaでググったらサンプルコードがたくさん出てきたから
    • サーバレスはすぐに実装できるのでよき
  • 運用した結果どうなの?
    • Twitterユーザにはみやすい
    • CTをすることで、自分の含め他の人の活動がはっきり見える化するので、良い刺激になる
    • GitHubを見ている開発者モードの時じゃなくても、Twitterをひらけば見えるのでモチベーションが上がる

LT枠 : MySQL8.0にしてみたかった話

  • MySQL 8.0にしようとしたら、自動で元の状態に復元された
    • 原因
      • 新DATETIME型
        • 5.6から小数秒の指定ができるようになった
        • 古いDATE型があった
      • テーブルを先に作り直してから実行した
  • DBのファイルが肥大化した
    • 調査
      • ログファイル
        • デフォルトでテーブルに出力
      • 保存先が違う?
      • 各テーブルの容量確認
        • バージョン違いで容量圧迫?
        • むしろ減ってた
      • 実は、CloudWatch似ないだけでbinlogをとっている?
        • がっつりとっている
    • やったこと
      • logのパージ期間を短くした
      • 効果があった
  • 5.7から8.0のアップグレードができない
    • 何があったか
      • RDS側で互換性チェックが走るようになった
        • 日本語はまだ更新されてない
        • スキップはできない
      • PrePatchCompatibility.log
    • 原因
      • UTF8
        • MySQL内ではutf8mb3のalias
        • 将来的にはmb3はなくなる
        • utf8mb4にしよう
  • 5.6から8.0ではなく、一度、5.7にしてみるのもあり

LT枠 : SemanticUIを使って工数をかけずにサービス開発

  • CSSフレームワーク
  • きっかけはコーディングとフロントエンドを含んだ発注だった
  • マークアップ自信ないし、でいざなーでもないし、工数ないし……
  • CSSフレームワーク戦国時代
  • SemanticUI
  • 実はSemanticUIは更新が止まっている。フォークされたFomanticUIというものがある。これから使うなら後者が良い
  • DatePickerのカスタマイズ性が高くて良い
  • 開発手順
    • 紙に完成のイメージ。レイアウト・情報設計
    • モックアップ作成
    • 開発環境・インフラ構築
    • フロントエンド・サーバーサイド実装
  • まとめ
    • フルスクラッチCSSを書ける方が望ましい
    • ただ、CSSはとても難しいので、自分好み・あるいはサービスにあったフレームワークを利用しよう
      • CSSは人類にはやすぎる」
    • 様々なOSSの恩恵を受けているので、プルリクなどを出して貢献しよう

雑感

  • 19時10分ぐらいに会場入り、その時点で席の半分近く埋まっていた
  • 空いていた前のほうに座ったら主催の人と同じテーブルだった
    • 壇上近くの席はスタッフや話す人などが座るよね、普通に考えて、うん
  • 新しいものを試してみた、というものから、実務でこんな苦労をした話までいろいろ聞けた
  • SemanticUIの話の中で「CSSは人類にとってまだ早すぎる」とでてきて、思わず頷いた
  • 次7月開催とのこと。スケジュールがあえば、ぜひ参加したい

ゴースト「記憶の司書」正式版リリース

ゴーストマスカレードに投稿したゴースト「記憶の司書」のネットワーク更新対応版をリリースしました。

死の心配はなくなっても、物忘れの心配は付きまとう不死者と、その不死者の書いた日記を管理する司書のゴーストです。

すでに使っている方はNARアーカイブの上書きインストールをお願いします。

配布ページはProject Roche Limit - 記憶の司書です。

ゴーストマスカレードに参加しました

公開されたあとがきにもありましたが、記憶の司書の作者でした。

トークでわかったよ、という報告もあって、隠しきれてなかったのだなぁ、と。それはともかくとして、見つけてくれてありがとう。

ゴーストのほうは、

  • シェルに不備があったのでそちらの手直し
  • ネットワーク更新機能の実装
  • READMEの加筆・修正
  • 里々を最新版に差し替え
  • ssu.dllの削除

をやったところ。

あとは、動作の確認と配布ページの作成をすれば、公開できる見込み。

Twitter APIの利用申請が意外と高い壁

利用する目的な内容を300字で説明するのが思ったよりも厳しい。

スクレイピングは禁止されているから、すでに連携しているサービスと連携して何かするか……?

迂回するだけ手間が増えるわけで、Google翻訳使うなどして、申請したほうがはやい気もする。

何がしたいのか、というと、その日の「わんどろ」をブログにまとめる作業を自動化したい。

他の案としてはMS Flowを使う手もあるらしい。ちょっと触った印象はいけそうな、いけなさそうな。思ったよりもできることが多く、使えるようになるまで大変そう。

都度、ハッシュタグ付きで投稿された内容をスプレッドシートにため込んで、スプレッドシートの内容をブログに投稿できたらいけるか……?