本日行われた、こちらのイベントに「今こそ理解するPHPの日時計算」というタイトルで登壇させていただきました。資料は発表前にSpeakerDeckにあげているので、そちらでご覧いただけます。

今こそ理解する PHPの日時計算 / Understand date manipulation of PHP - Speaker Deck

CFPが通った感想

正直言うと、CFPが通るとはあまり思っていませんでした。PHPの8系やcomposerの2系が出るタイミングでもあったので、セッションはそういった話題で埋まってしまうだろうと予想していたわけです。

予想に反してCFPが採択された時は、嬉しさ半分、驚き半分の気持ちでした。「こんな地味な内容で人が集まってくれるのかな・・？」という不安はあったものの、僕が過去に躓いたトピックが刺さる人は一定数いると考えることにし、資料作りに勤しみました。

準備にあたって意識したこと

普段話をする時よりも、少しゆっくりめに話す。
素振り（事前の1人リハーサル）を多めにやる。

今回は以上の2点を意識しました。

「オンライン配信で早口で話しすぎると、リスナー側が聞き取りにくいのでは？」と思い、本番では素振りをした時よりも少しゆっくりに話すことを意識しました。話すスピードを考慮して直前に内容を少しだけ削ったのですが、それでも1分半ほど時間をオーバーしてしまいました。タイムキーパーの方、すみません・・(´・ω・｀)。

25分の枠で話すのも初めてだったこともあり、その感覚を掴むために予行演習もきっちりやりました。初回の予行演習は喋りに詰まってしまった上に説明も間延びしてしまい、正直聞けたものではなかったです。その後、自分の口から出た言い回しや説明をノートに書き出し、不要なものを削りつつ整理して本番に臨みました。

自分の録画を見返してみての感想ではありますが、70点くらいの発表には出来たんじゃないかと思っています。

オンラインのカンファレンスに参加した感想

聴衆側の観点でいうと、気軽に色んなセッションを覗きに行けるのが便利でした。オフラインだと、混みそうなセッションの会場に先に入っておいて待機するサイクルになりがちでしたが、オンラインなら会場の定員を気にする必要もないので楽です。

登壇側の観点でいうと、出番前の独特の緊張感が印象的でした。劇の出番を舞台袖で待つ役者はこういう気持ちなのかな・・とか考えながら待機していました。始まってしまえばスラスラ話せるものなんですが、登壇は何度やっても緊張するものですね。

discordを見ながら話すのは難しい

登壇時は、PCの脇に置いたiPadにdiscordの画面を映しながら喋っていました。コメントに対するリアクションを交えながら話すつもりでしたが、実際はそこまでの余裕がなくて歯がゆい思いをしました。

合間でコメントに反応する前提で話すなら、スライドの量もそれに応じて調整した方がよかったかもしれません。

まとめ

準備はそれなりに大変でしたが、参加して本当に良かったと思います。スタッフの方々の手厚いサポートもあって、不安の少ない登壇経験が出来た気がしています。本当にありがとうございました。

カンファレンスのCFPが正式に採択されたのも今回が初めてで、個人的にも一歩前進できて本当に嬉しいです。

会社のちょっとした宣伝

connehito.connpass.com

今週末の12/17（金）には自社のミートアップがあります！「サービス開発のあるある話」などをしつつ、会社を跨いだ交流が目的のイベントです。興味のある方は是非ご参加ください〜〜！

2020-12-02

O’Reilly書籍をサブスクリプションで読もう

この記事はコネヒト Advent Calendar 2020 2日目の記事です。

O’Reilly（以下、オライリー）のサブスクリプションに契約するとオライリーの技術書が読み放題になるので、今回はその話をします。

概要

www.oreilly.co.jp

www.oreilly.com

Safari Books Onlineという名称で提供されているデジタルライブラリサービスです。サービス名が紛らわしいんですが、SafariはブラウザのSafariとは関係なく、運営会社の名前です。

閲覧可能なのは本だけではなく、UdemyやUdacityで提供されている動画教材も豊富にあります。ただし、全てのコンテンツが英語なので、動画コンテンツの学習コストは高めかもしれません。

実際に読める本

オライリー本は全部あるんじゃないかと思える程度のラインナップなので、エンジニア界隈で話題になる本は見つかるはずです。僕が実際に目を通した本をいくつか挙げていきます。

Refactoring: Improving the Design of Existing Code

www.oreilly.com

マーチン・ファウラーのリファクタリング本の第二版です。

第一版はJavaのコードがベースになった内容でしたが、第二版ではJavaScriptのコードがベースになっており、2019年12月には日本語版も出版されています。余談ですが、僕が原著を読み終わった直後に日本語版の発売が発表されて愕然とした記憶があります。

Clean Architecture

www.oreilly.com

今日（2020/12/01）時点で何故かAmazonの紙在庫がなくなっていることでお馴染みの本です。これまた余談ですが、この記事で紹介しているサブスクリプションを知る前に原著を輸入しております。もっと早く知りたかった。

Escaping the Build Trap

www.oreilly.com

「プロダクトマネジメント」という名前で出版で日本語訳が発売されています。現在進行系で会社で読書会をやっているので、読書会向けに買った日本語版と読み比べたりしています。

Programming PHP, 4th Edition

www.oreilly.com

この本は日本語訳が出ていないので、サブスクリプションで読めるのは非常に助かってます。紙媒体も持っているんですが、検索したい時はやはり電子書籍が便利です。

課金前に考慮したい点

個人的に気にした箇所をここで書いておきます。 クレジットカード登録不要のお試し期間が10日間あるので、使い勝手は実際に試してもらうのが良いと思います。

料金はやや高め

Online Learning Platform Pricing - O'Reilly Media

個人利用
- $49 / month
- $499 / year

高めの技術書を月に1冊買える程度の料金がかかります。オライリーの本を読み放題であることを考えれば高いとは感じないかもしれないですが、そこは人それぞれです。使用頻度が下がっているのに自動更新されてしまう事態を避けるため、年間契約の場合は自動更新をOFFにしておくのがオススメです。

サブスクリプションをおまけでもらう

agnozingdays.hatenablog.com

詳細は省きますが、年会費99$でサブスクリプション権をもらうことも可能です。

英語と向き合う気力

結論から言うと、書籍ならなんとかなりますが、動画はハードモードです。

電子辞書やDeepLを併用すれば、時間はかかりますが読めます。文学小説と違って、古典的な単語もほとんど出てきませんし、サンプルコードを読めば筆者の主張を汲み取りやすい場合も多いです。とはいえ、一気に読もうとすると疲弊してしまうので、小分けにすると読書を継続しやすいです。

一方、動画は字幕すら出ないので難易度が高いです。聞き取りやすい英語であればまだ良いですが、講師の人が早口だと秒で心が折れます。「とりあえず、サンプルコード見せてくれ！」ってなります。

オフライン保存に制限がある

オンライン図書館みたいなサービスなので当然といえば当然なのですが、書籍を無制限にダウンロードしておくことはできません。専用のアプリケーションを使っても、無制限なダウンロードはできないようです。

なので、事前にダウンロードしておいてからオフラインで読書することを想定している人は注意が必要です。

まとめ

値段はそこまで安くないですし、英語を読むのは大変ではありますが、オライリーの技術書の読み放題が非常に魅力的なのは事実です。

英語を読むのが苦ではない。
年会費の元が取れるペースで技術書を買っている。
読みたい本の日本語訳を待ちきれない！

これらに当てはまる人は、サブスクリプション契約を検討してみるのがおすすめです。

2020-07-12

グラフィックレコードを英単語の暗記に利用する

英単語の暗記を日常的にやっているんですが、頭に入ってこない単語や熟語がたまに出てきます。字面から意味を想像しにくい熟語が出てきた時にそうなりがちで、なかなか覚えられないことがストレスになっていました。

そのイライラポイントを解決するため、例文をイラストで表現して記憶の定着を狙うことを考えました。

具体的にやっていること

グラフィックレコードについての話はここでは省略します。

僕はグラフィックレコードの手法を利用しているのではなく、グラフィックレコードの練習と英単語の暗記を一緒にやっていると説明するのが正確かもしれません。情報をイラストで表現することがグラフィックレコードの練習にもなりますし、英語の例文をイラストで表現することが記憶の定着の手助けになると考えています。

実際にやってみた

"You've lost me." という表現があります。TOEICやTOEFLのリスニング練習をしていると出てくる口語的な表現で「あなたの言っていることがわかりません」「話についていけません」という意味です。覚えてしまえばなんてことはないですが、僕はなかなか覚えられなくて苦労しました。

このフレーズが出てくるであろう状況をイラストで表現してみます。

積分の話をされて困惑している人の様子を書いてみたイラストです。実際の会話だと、" I'm sorry. You've lost me. Can you explain about integral?" のようなやり取りになるでしょうか。積分の話が分からなくて困っている様子をどう表現するかが意外と大変でした。

落書きのような絵ではありますが、試行錯誤することが記憶の定着につながっている感触は間違いなくあります。

書いている時に意識したこと

いくつか意識したことがあります。

性別はイラストの要素に含めない。
言葉はなるべく使わない。
時間をかけすぎない。

今回は「積分が分からなくて困惑している人」がテーマだったので、イラストに性別の要素を含めないようにしました。主題と関係のない要素を含めると、ノイズになると考えてのことです。

残りの2つはただの縛りです。相手の発言に困惑している様子の表現を楽しみつつも、ダラダラしないことを自分へのルールとしました。言語を用いない感情表現を楽しみつつ、長い時間は使いません。イラストを書くことが目的ではないので、基本的には5分〜10分の制限時間を設けています。

暗記にイラストを用いた感触

英単語の暗記に少し飽きていたので、個人的にはいい刺激になっています。音読をしつつ、状況をイラストで表現することで英単語の学習がほんの少しだけ楽しくなりました。英単語の暗記に飽きてる人にはおすすめです。

参考図書

www.amazon.co.jp

グラフィックレコードの練習の仕方は、この本で勉強しました。アフィリエイトのリンクではので、気楽にポチってください。

2020-05-31

GitHub Actionsを使って、Next.jsを静的にデプロイする

「Next.jsを静的サイトにホスティングできるんだっけ・・？」

Deployment | Next.js

公式にStatic HTML Exportと書かれているので出来るはずですが、自分で試さないと安心できなかったのでやってみました。

実現したいこと

Next.jsで作成したアプリケーションを静的サイトとしてデプロイするが目的です。今回はデプロイ先として、GitHub Pagesを選択しました。

実際に動いているURLはこちらです。 Next.js Sample Website

デプロイまでの手順

GitHub Pagesとして使うリポジトリを用意する。
Next.jsのnext buildでビルドしたソースコードをnext exportで静的サイトとしてエクスポートできるようにする。
GitHub ActionsでGitHub Pagesにデプロイできるようにする。
masterブランチへのpushをトリガーにして、 GitHub Actionsが動くようにする。

必要な手順はこのようになります。一つずつ見ていきましょう。

GitHub Pagesとして使うリポジトリを用意

https://help.github.com/ja/github/working-with-github-pages/about-github-pages

公式のドキュメントを一読しましょう。日本語のページが用意されているので、実際に手を動かしてやってみるのがおすすめです。

静的サイトとしてエクスポートする

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "export": "next export"
}

package.jsonの抜粋です。next exportがエクスポートのコマンドなので、npm run exportで実行できるようにしておきましょう。 yarnでも同様の進め方が可能ですが、今回はnpmで進めていきます。

GitHub Actionsでデプロイ

github.com

今回はこちらを使っていきます。

help.github.com

Actions上でNode.jsを扱いたいので、こちらを参考にしつつ以下のようなymlファイルを用意します。

name: Node.js CI

on:
  push:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install dependencies
        run: npm ci
      - name: build
        run: npm run build
      - name: export static html
        run: npm run export
      - name: jekyll
        run: touch ./.nojekyll
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: master
          FOLDER: out

masterブランチへのpushをトリガーにして、GitHub Pagesへのデプロイまでを実行できるようになりました。見れば分かる箇所は飛ばしつつ、補足をしていきます。

yamlのファイル名

今回はGitHub Actionsを1つ試すだけなので、適当な名前でOKです。作成したyamlは.github/workflows配下に配置しましょう。

jekyllの無効化

- name: jekyll
  run: touch ./.nojekyll

GitHub Pagesではデフォルトでjekyllの変換機能が入っていますが、今回はNext.jsの静的ホスティングを試すために変換を無効にする必要が出てきます。

.nojekyllをルートディレクトリに配置することで無効にできるので、忘れずに入れておきましょう。

デプロイ指定の落とし穴

- name: Deploy
  uses: JamesIves/github-pages-deploy-action@releases/v3
  with:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    BRANCH: master
    FOLDER: out

BRANCHの指定はGitHub Actionsのトリガーに選んでいるブランチと同じにしましょう。master以外のブランチでGitHub Actionsが動くように設定している場合はBRANCHの変更も忘れないでください。

FOLDERに指定しているoutディレクトリは、next exportでソースコードがエクスポートされるディレクトリです。指定があっていないと「CIは正常に通ってるけど、ページが見れない」状態になってハマるので注意してください。

まとめ

同じことを試されている方が多くいたのですんなり行くかと思っていましたが、意外とハマりどころがありました。GitHub Actionsの練習にもなるので、これから入門する人はやってみるのがオススメです。

2020-05-19

React Hooksを使ってJavaScriptを動的に取得する

「Next.js、全然分からない」「Reactやるのが久しぶりで何もわからない」

このようにボヤきながらReactと向き合う中で、しばらくハマっていたことが解決したのでブログに纏めておきます。

何が解決したのか

独立したJavaScriptファイルを取得Custom Hookを作ることができました。

自前のソースコードを書くだけなら要らぬ心配ですが、サードパーティのスクリプト（Google Analyticsなど）をSPAでそのまま使いたい場合があると思います。そういう時に使えるかもしれない裏技です。

動作サンプル

https://codepen.io/rukiadia/pen/JjYadOL

画面表示後にjQueryのコードをCDNから取得しています。あくまでサンプルなので、jQuery云々は気にしないでください。

react v16.13.1
react-dom v16.13.1

Reactのバージョンはこちらで動作させています。

コードの説明

const { useEffect, useState } = React;
// 手元で試す場合は以下
// import React, { useEffect, useState } from "react";

const useScript = (src) => {
   // 「取得の完了」「取得時のエラー判定」をLocal Stateとして扱う
   const [state, setState] = useState({
     loaded: false,
     hasError: false
   });

  useEffect(() => {
    const scriptElement = document.createElement('script');
    scriptElement.src = src;

    const onLoadFunction = () => {
      setState({
        loaded: true,
        hasError: false
      });
    };

    const onErrorFunction = () => {
      // 取得失敗時、コンポーネント側でエラーハンドリングするフラグを立てる
      setState({
        loaded: true,
        hasError: true
      });
    };

    scriptElement.addEventListener('load', onLoadFunction);
    scriptElement.addEventListener('error', onErrorFunction);
    const wrapper = document.getElementById('wrapper');
    wrapper.appendChild(scriptElement);

    return () => {
      // load、error時の処理を関数化しておけば、ここでremoveEventListenerできる
      scriptElement.removeEventListener('load', onLoadFunction);
      scriptElement.removeEventListener('error', onErrorFunction);
    }
  }, []);

  return [state.loaded, state.hasError];
};

動的にscript要素を生成してJavaScriptを取得する。
「取得の完了」か「取得の成否」をLocal Stateとして管理し、結果をuseScriptを使っているコンポーネント側に返す。

やっていることを箇条書きにすると、このようになります。

実装時に気をつけること

動的に生成したscriptで取得したJavaScriptからはdocument.writeを呼び出せないので、document.writeが含まれている場合はこの手法が使えません。非同期取得を試す前に取得相手の中身は軽く見ておくようにしましょう。

Custom Hookの命名はuseで始める

ja.reactjs.org

カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。

自作する場合は自由な命名をしないように意識しましょう。

ja.reactjs.org

"use"で始めなくても動かせてしまうので、公式で提供されているESLintを使っておくのが安全です。

参考資料

useHooks - Easy to understand React Hook recipes
- React Hooksのレシピ集です。React公式のドキュメントを読んでから、こちらのコードを写経するだけでかなり慣れることができます。
りあクト！ TypeScriptで始めるつらくないReact開発第2版 - くるみ割り書房 - BOOTH
- TypeScriptでReactを始める場合は、この本で始めるのが安定。社内でおすすめの本を聞かれた時、他に参考にできそうな本が思いつかなかった。

2020-05-13

WebRTCを効率的にキャッチアップする

仕事でWebRTCを使うことになり、この一週間くらいはキャッチアップに勤しんでました。ベースとなる知識の習得と、最新動向を知るためのアプローチについてブログに書いておきます。

まず大事なこと

最初のうちは、古い情報を見ないようにしましょう。 WebRTCは変化が早い技術なので、ブラウザの対応状況や最新仕様は頻繁に変わっていきます。前提知識がない状態で古い情報にアクセスすると、その情報が今も使える知識なのか判断できずに混乱してしまいます。

WebRTCで有名な人や企業を探す

WebRTCに限った話ではないが、業界の最先端でいる人や企業を探して最新動向を入手しやすくしよう。

NTTコミュニケーションズ
- SkyWayの開発元
時雨堂
- WebRTCで真っ先に思いついた会社さん。
- WebRTC コトハジメという資料を公開されていて、これを読むだけでも入門としては十分に感じる。

すぐに思い浮かんだ企業はこちらの2社。

V (@voluntas) | Twitter
- 時雨堂の創業者の方
Yusuke Naka@SkyWay (@Tukimikage) | Twitter
- SkyWayの中の方
Massie_G (@massie_g) | Twitter
- HTML5 Expertの方

個人単位ではこの辺りの方達をフォローした。

参考に出来る資料を探す

W3Cの資料読めばいいっちゃいいんですが、網羅的に書かれた説明を読んだり聞いたりもしたいところです。なので、udemyで動画講座を探したり、O'Reillyで参考書籍を探してみましょう。

動画

Udemyは講座がそもそもあまり無かったり、最終更新日が古いものも混ざっていて参考にできそうなものはなかった。 Youtubeで過去に開催された「HTML5 Conference」や「WebRTC Meetup Tokyo」の録画を見ることは可能だった。

youtu.be

書籍

色々漁ってみたが、参考にできたのはReal World HTTPとハイパフォーマンス・ブラウザネットワーキングの2冊。

「Real World HTTP」で大まかな概論とユースケースを理解して、「ハイパフォーマンス・ブラウザネットワーキング」でWebRTCのプロトコルの詳細を理解するようにすれば、学習がスムーズに進むかもしれません。

「ハイパフォーマンス・ブラウザネットワーキング」ではWebRTCを支えるプロトコルであるUDPについても詳しく解説されているので、予備知識に不安がある人は知識を補っておくとベター。

実際に作って練習する

概論を読んだだけだとイメージが湧かないので、チュートリアル的なものをこなしてみると良い。

SkyWayは有料のプラットフォームだが、開発用アカウントを作ると無料枠があるので、そちらで動きを試すのがオススメ。 WebRTCに必要なサーバ（シグナリングサーバーやTURNサーバー）も用意されているので、手早く試せる。

まとめ

簡単ですが、自分が調べたりやってみたことを纏めてみました。僕と同じく、これからWebRTCに入門しようとしている人の道標になってくれれば幸いです。