無銘雑記

これ書けばいいの?

2020年の t_igarashi_sho を振り返る

この記事は Lancers(ランサーズ) Advent Calendar 2020の9日目の記事になります。

qiita.com

まえがき

入社して3ヶ月になりました。五十嵐です。

この記事は、Slackにある自身の分報チャンネルを振り返ってみてどんなことあったのかとかやりたいこと、共通の話題にできそうなものをピックアップしてみる記事です。

世間的にフルリモート推奨される事態になり、雑談をすることが減ったこともあって、今年は雑談として分報を活用することが多かったなと思います。
業務のわからないとこなどを雑にプッシュすることもありますが、雑談と業務の話の割合は1対1ぐらいなんじゃないかなと思います。 あと分報以外では、時間をあわして対応したいときなどには Slack Call などのテレビ電話で会話ベースで作業を進めることもあります。

下記にピックアップしたものを記載しますが、多くなると思いますのでメモ書きベースな感じで書いていきたいと思います。

どんな気持ちでこの記事を見れば良いのかというとリモート作業でも弊社はこんな雰囲気なんだという感じにみていただければ良いかなと思います。

ピックアップしたもの

チャタる

MacBook支給されてキーボードの操作で不具合がなさそうだったので
「今回のMacBook Pro今のところチャタらないので多分あたり枠(13-inch, 2019」
と言ったときにチャタるとは?となった話です。
正しくはチャタリングのことで、MacBookのキーボード不具合について公式で修理を受け付けてますというページが去年ぐらいに出てたというのもあってなんとなく分報に流しました。

support.apple.com

Slackのアイコンを自分の顔にした

顔をあわすことが少ないと思うので入社手続きで出社したときに撮った写真を顔だけ切り抜きしてアイコン化しました。

後にSlackの絵文字化もして、メンションされて個人のアピールしたいときにリアクションするために使うようになります。

f:id:igara1119:20201208002821g:plain

この際に作成した動く画像をGoogleアカウントのプロフィール画像にも登録したらカレンダーやスプレッドシート上でも動く顔が表示されるようになりました。

スプレッドシートをスプシ言うかスプレと言うか

弊社ではスプシ派が多そうです。
僕はスプレ派でこれからもスプレと言い通すのでしょう。

Wayする【動詞】

入社したときの資料の名前を見てやたら〜Wayと書いてあったので
「Wayする【動詞】 という語録が存在しそう」
と、ふと分報に記載したものです。

弊社限定かもしれませんがツールの使い方や社内規定のようなものをWayをつけてドキュメント化するようになっているようです。
例えばSlackの使い方が記載されているSlack Wayとかあります。
Wayと言うワードで共通認識化しようとする考え方は良いと思いました。

仕組みとしてないものやよしなに力(りょく)で対応しちゃっているタスクもまだあったりするのでWay化していくことが大事だなぁと思ってます。

テスト環境で使えるクレジットカード番号

支払いどうしたらいいのか聞いた時に教えていただいた記事です。
今でも結構見ます。

qiita.com

VSCode

CakePHPのテンプレートとjQueryとインテリセンス

PHP Intelephense (bmewburn.vscode-intelephense-client) 入れたらCakePHPのテンプレートでもjQueryの補完利くようになってこの拡張すごくない?と言う話をしました。

marketplace.visualstudio.com

Save and Run で自動でテストと整形するようにする

今だとXdebugと併用してDockerコンテナ内のユニットテストデバッグしながら実行可能な状態になっているので、サンプル用のPHPプロジェクトを作成して記事化したいなぁと思っています。すごい便利です。

marketplace.visualstudio.com

みんなのClipyを晒す会

GitHubのコメントをスニペット

approveする時や本番確認した時にPR対してのコメントをする機会があります。
定型文をクリップボードやどこからか引用して貼り付けるような仕組みを各々持ってたりしますよねと言うあるある話がありました。

業務効率系のスクリプトスニペット

晒していただいた方の例で

  • 実行するビルドコマンド
    コンテナ内にアプリケーション毎の異なるフロントエンドのソースがあるのでパス情報を含めたワンラインで実行できるようなビルドコマンドなど
  • システムフロー上で必要なデータを作成するためのSQL
    複数のテーブルに対してデータを作るようなもの
    画面操作で10分くらい時間かけていたものを10秒で終わらせるようになったとか

各々の努力を感じました。

SlackBot開発

業務外で対応していました。

Botがチャンネルをハシゴしてコメント投稿する機能
@igarashi-bot say channel=#hoge_channel comment=リモート開始します。36.5

とコメントすれば対象のチャンネルにも投稿される仕組みを自分の分報チャンネルに入れてみました。

Slack経由でジョブカンに打刻する仕組みがあるのですがそれプラス、勤怠連絡する用のチャンネルがあるのでどっちも忘れないようにするために

/jobcan_touch @igarashi-bot say channel=#hoge_channel comment=リモート開始します。36.5

とコメントすれば同時に対応するようにしました。
このコメントはClipyに保存しています。

GASで作成しているのでどのぐらい利用枠でいけるのか謎なのでまだ個人のみでしか使用していないですが、安定してそうならこれも記事にしたいです。

CakePHPユニットテストのFixtureの定義議論

Fixture側のfield定義とModelの定義がずれていたものがあり、Fixtureに手を入れなくても済むようにできないかと話し、Fixture側も更新しようという結論になりました。
(Fixtureの定義自体がテスト用に使用したいものの定義として別出ししているものなので)
将来的にはCakePHPにあるbakeでうまいことできないか検討しようという会話ができました。

本番反映するためのDDLなど別ファイルで保存してたりするのでユニットテスト環境でも併用できるようなスキーマ反映するものがあったら良さそうとも思いました。
(該当するのがridgepoleなんだよなぁと思いつつ...)

いろいろベストに近いものをこれからも考えていきたいと思います。

リグレッションツール導入したい

様々なフロントエンドのソースがあったりするのでちょっとしたCSSの変更があったときにも差分表示できるものを導入しようか検討しています。ツールとして BackstopJS のようなものを使用して画面検証しようかと考えております。

github.com

ツールのサンプルをGitHubに管理していますがどう運用まわすかが課題になっていて

  • 誰がテスト対象の画面を追加していくか
  • ページ上のイベントを実行した検証を追加するか
  • CI上でWebサーバとHeadless Chrome起動できるような構成がないと検証できない
  • CI運用した際に差分表示したファイルをどう設置して見えるようにするか

などなど

リモート手当てのようなもの取り入れたい

家で作業することが多くなったことにより光熱費がかかるようになった反面、飲食代かからなくなったという今までになかった生活面の話があったりしました。

月一にビデオ通話による全体会があるのですがそのときにも、リモート作業に対しての手当てを出そうという話が展開されており、iPadの貸し出しなどされるようになったというのがあります。

ライブラリのセキュリティ的なアップデート検知できるものを導入したい

今のところ Dependabot を検討予定で考えており、複数あるフロントエンドのプロジェクトや既存のPHPライブラリに対して更新するべきタイミングを検知できればと思います。

まだ業務とは関係のない個人のプロジェクトで入れて検証したぐらいなので、次回の定例で入れるか会話をした上で実施しようかと思っているところです。

dependabot.com

さいごに

分報で言ってたことをただ箇条書きにしたような記事ですみませんでした。
改めて振り返ってみるとちょっとした雑談のものが課題点だったり、
分報の発言から個人としてできる会社に貢献できそうなミッションを出すきっかけにもなっているので今後も引き続き分報を続けていきたいと思います。

以上でこの記事は終わりになります。

次回 10日目 金澤さんのランサーズのリモートワーク化の歴史です。
引き続きよろしくお願いします。

USキーボード OSの違い キーバインド 違和感

この記事は Lancers(ランサーズ) Advent Calendar 2020の5日目の記事になります。

qiita.com

まえがき

システム開発している 五十嵐です。

この記事は、2020年弊社アドベントカレンダー キーボードについて書く枠 代表として書きたかったので書きました。
数少ないErgodox派としてのアウトプットをしたいというのもあります。
半年前、こんな記事書いててなんやかんやでこのキーボードに慣れました。

igara1119.hatenablog.com

とはいえ、業務に関係ないですけど最近は個人のWindows機ともキーボード併用してて、
macOSWindowsのOSの違いによる同じ操作感で使用できない問題点が出てきてたので
どのようにして問題解決したのかを重点的に記載できればと思います。

記事のタイトルにErgodox入れなかったのは、USキーボードだったら共通の話題になるのかなぁと思い、外しています。

前提知識: 使用しているキーボードの配列

f:id:igara1119:20201203225946p:plain

上記はMacbookのUSキーボードの配列に近い形に設置しています。

例えば

  • 左上Esc
  • 左上Tab
  • 左下・右下Shift
  • 下側にCommand, Option

ちょっと例外的な配列で

  • 左親指位置にEnter, Space, Backspace, Delete
  • 左下Control
    MacBookでCaps LookをControlに置き換える作業ってみんなやらない?)
  • 右親指位置にEsc, Tab, Up, Down, Left, Right
    ※この配列は若干ターミナル操作を意識したものにしてますが実際はEsc, Tab左上のを使うことが多いです。
    実際の写真で見るとわかるのですがDownが大きめの記号のShiftキーを下方向に反転させてます。
    カーソル操作でめっちゃガチャガチャするときなどに、このデコボコしてる感がいい感じに手に馴染みます。

f:id:igara1119:20201203233043j:plain

そもそもなんでUSキーボードを使うようになったかというと
たまにデフォルトの入力作業がUS配列というものがあるからUSキーボードに慣れてた方が良いと思ったのがあります。
(最近はあまりないですがRaspberry PiとかLinuxサーバ上のターミナル作業とか)

ほんだい

先に注意

Windowsのキーボード操作改善のためにAutoHotKeyを使用した方法を記載しています。
一部、チート対策や自動化作業によるマクロ対策がされているソフトウェアを起動できなくなる可能性がありますのでその際はこのマクロを停止してから実行するようにお願いします。
(実際、某オンラインゲームを起動しようとしたらAutoHotKeyが原因で起動できなかった)

日本語入力切り替えの共通化

macOSでは ⌘英かな というアプリケーション使って左右のCommandキーで英字 / 日本語入力の切り替えを行っています。

github.com

前はKarabiner-Elementsで切り替えしてましたがOSアップデートのタイミングで使えなくなることが多かったので最近はこちらのアプリを使うことが多いです。

Windowsでは CommandキーがWindowsキー扱いされるのでAutoHotKeyというソフトウェアを使ってWIndowsキー押したら日本語入力するようなマクロを起動するようにしました。

github.com

マクロの内容として該当する箇所がこちらになります。

https://github.com/igara/ergodox-jp-autohotkey/blob/3a8805d2254922ea648e10b2b45f937e3e35a952/ergodox-jp-autohotkey.ahk#L1-L15

ショートカットキーの共通化

OSの違いによるキーボードの操作の違いとしてショートカットキー(ホットキー)の違いや
macOSではCommandキーをよく使うけど
WindowsではControlキーをよく使うなどソフトウェアでの違いがあったりすると思います。

macOS側は特別な設定をしていないです。

Windows側ではまたAutoHotKeyによるマクロで
複数のキーを同時に押す場合はWindowsキーをControlキーに置き換えするようにしています。

https://github.com/igara/ergodox-jp-autohotkey/blob/3a8805d2254922ea648e10b2b45f937e3e35a952/ergodox-jp-autohotkey.ahk#L17-L75

全てのアルファベットキーを置き換えしなかったのもWindowsキー + Rなどの便利なショートカットもあるので対応していなく、比較的よく使うものだけを対応しています。

対応できていないものとして
キーを3つ使うようなの(Control + Shift + Fなど) ができていないので残課題です。

クリップボードの共通化

macOSでは Clipy 使ってます

github.com

キーボードの配列の話でもありましたがCaps LookをControlとしておいている都合上、左手小指で一番下らへんを2回タップするとクリップボードを開く設定にしてます。
この操作のスカカって感じ結構好きです。
Enterをターンするようなものだと思ってください。
この点に関してはMacBookのキーボード US / 日本語配列関係なく共通です。

f:id:igara1119:20201204003326p:plain

WindowsではWindows 10からWindowsキー + V 押すことでクリップボード開けるようになりましたが
ショートカットキーの共通化により貼り付けのショートカットキーに上書きされて、
代わりに Clibor によるクリップボードを使うようにしています。

chigusa-web.com

こちらもmacOSと同様にControlを2回押すことでクリップボードを表示する設定にすれば同じように使用することが可能になります。

f:id:igara1119:20201204004457p:plain

辞書のような定型文登録ができて純粋に優れているから Clibor 使っているというのもあります。

さいごに

だいぶこの対応で環境の違いによる違和感を消化することができました。
誰かが同じような問題を抱えてて、この記事を元により効率を上げることに繋がればといいなぁと思います。

以上でこの記事は終わりになります。

過去にも弊社のアドベントカレンダーでキーボードの話題がありますので
宣伝になっちゃうんですけどこちらも見ていただけますと書いた人が喜ぶんじゃないかなぁと思います。

ランサーズ Advent Calendar 2016 - Qiita

engineer.blog.lancers.jp

Lancers(ランサーズ) Advent Calendar 2018 - Qiita

engineer.blog.lancers.jp

次回 6日目 まみーさん による 「MySQLの話を何か」です。
引き続きよろしくお願いします。

PC組んでみたのでいろいろ書く記事

6月に古いPCを廃棄して最近のWindows 10を一度もさわったことがないというのもあったので久しぶりにパーツ見て作ってみたという話です。

正面がこんな感じ

f:id:igara1119:20200926184417j:plain
正面

裏側

f:id:igara1119:20200926184450j:plain
裏側

購入したものの一覧として

  • OS
    Microsoft Windows 10 Home
    最近のWindows OSのインストールはUSBブートでできるのでDVDドライブとか付けなくても良くなったのいいすね
  • CPU
    Intel BX8070110900K Core i9-10900K
    今使ってるMacBookも世代とコア数違うけどi9だったのでi9同士で比較したかった
  • CPUファン
    Noctua NH-D15
    でかい
    水冷はリスクありそうと思って空冷にした
  • マザーボード
    ASUS ROG MAXIMUS XII FORMULA
    ツクモでCPUセット価格で購入した
    なんかひかる
    水冷にも対応しているらしく所々管を通せる仕組みがある
    あとでドライバーインストールしたらWifiBluetoothも使えるようになった
  • グラフィックボード
    ASUS ROG-STRIX-RTX2080TI-O11G-WHITE-GAMING
    こいつもなんかひかる
    あとでAura Syncというの入れて設定したらマザーボードのひかるのと一緒に止めることができた
    本当は3080欲しかったけど店にあるものでいいものを探した結果これだった
  • メモリ
    Crucial CT2K32G4DFD832A
    32GBのメモリ2枚で64GBにした
  • SSD
    Western Digital WDS100T2B0A
    1TBのSSD
    軽量なので裏側の写真通り宙にSSDが浮いている状態で置いてる
  • 電源
    Seasonic SSR-1000GD
    1000Wの電源
    余裕を持たせるために大きめのを購入
  • ケース
    ダイソー メタルラック
    あえて壁がないことにより熱をこもらせないようにしている
    上記のパーツを組ませたらどのくらいの大きさになるのか想定できなかったのであとで購入

金額として

f:id:igara1119:20200926192449j:plain
金額

これぐらいだったので
タイトル「藤井棋士のCPUより安いPC」と呼ぶようにしています

ベンチマークとかも今回回してみたので記載すると
先に普段使いの2018 MacBookPro

f:id:igara1119:20200926193500p:plain
2018MacBookPro

な構成でCinebench回してみたら

f:id:igara1119:20200926193644p:plain
macbook cinebench

高いのか低いのか分かりませんが
作成したPCをCinebenchしてみたら

f:id:igara1119:20200926193835j:plain
自作PCベンチマーク

ptsという数値が倍ちかく異なっていたのでそこそこ性能良さそうです

あとFF15ベンチマークを新しいPCの方だけやってみたら

f:id:igara1119:20200926194140j:plain
FF15ベンチマーク

快適そうなのでこれから3Dのゲームを高品質で楽しむことができそうです

あとは環境構築してたりしましたが
マウスをMagic Trackpad使いたいというのを

github.com

使えばジェスチャーで仮想デスクトップの切り替えやブラウザの拡大表示が同様に使えてよかったです

未解決なものとしてErgodoxのキーボードがMacの設定しかないのでWindowsで使用した際に配列の違和感があるのでどう解決していこうかなって感じです

Ergodox EZ キーボードのカスタム

ちょっとエルゴノミクスキーボード(キーボード分割したような)を作ってみたいという気持ちがありつつ、 行ってみたいキーボード屋さんにも行けない状況なので、 既に出来上がっているキーボードで先に慣らしておこうという気分で購入しました。

f:id:igara1119:20200509213205j:plain

ergodox-ez.com

注文画面でいろいろ、光らせるようにするかとかリストレストも付属するとか選択肢があり、注文を終えると3週間ぐらいでお家に届きました。 (時期が時期だったので注文からの発注大変そうと思いました。)

注文内容としては以下のもので

f:id:igara1119:20200509211850p:plain

  • ErgoDox EZ Glow Standalone × 1
    • Glowというのが光るやつ ただし親指の箇所など端の箇所は光らない
    • Backlit / Black / Cherry MX Brown (RGB)
      • BlackのほかWhiteもある
      • 茶軸以外も選択可能
  • The Wing: Custom ErgoDox EZ Wrist Rest × 1
    • Black
      • 黒しかない
  • Tilt/Tent Kit × 1
    • Black
      • これも黒しかない

全部込みで注文しました。

注文したもの以外でキーキャップを外す道具もおまけでついてきたのですがこれ結構使いやすかったです。

f:id:igara1119:20200509223008j:plain

あと、キーのイメージ変えたいのと自作でキーキャップ 欲しかったので↓のを注文したのですが今回あまり使いませんでした。 一部数字など使用しています。

f:id:igara1119:20200509213536j:plain

www2.razer.com

さすがゲーミングの製品を扱っているだけあって光るキーボード用のキーキャップも販売していました。

shop.tvc.jp

shop.tvc.jp

こちらのキーキャップ はPOSレジ用のですが万が一、やっぱりちゃんと文字が印刷されたキーキャップ欲しいとなったとき、自由に紙に印刷したものを使用できるような保険のものです。

今回はわりと不自由しなかったので使いませんでした。

で、あとはキーの配置も変えたりしました。

画像にするとこんな感じです。

f:id:igara1119:20200509235036j:plain

もしこのキーマップを使用したい場合は下記を使っていただければと思います。

github.com

configure.ergodox-ez.com

このキーボードを使用してまだ1週間かかってないぐらいですが使ってみての感想として

格子配列っていうんですかね? 今まで使用していたキーボードと比べてキーの位置が水平垂直にあるのでちょっとまだ慣れてないところがあってまだ満足に使用できていないなぁという感じです。 よく使うキーボードってQWERTY配列というらしいのですが初めてキーボードの歴史を調べるきっかけを作ってくれた気がします。

あとは親指で選択するキーが多いのでどれを設置しようかという迷いがありました。 よく使いそうなのを親指にやろうとしても今まで使っていた箇所にやたら指を動かしてしまうみたいなのが癖で多かったりするのでしばらくは慣れるように頑張るしかないなぁって思います。 特にEnterとDelete

マウス操作もできるようにしましたが今まで使用していたトラックパッドの方が操作しやすいです。 ただキーボードから手を離さないでマウスとしての操作ができるので細かい操作を要求されなければキーボードからの操作でもいいかなと思いました。

しばらくこのキーボードを使い倒して安心して外出できるようになったらキーボード屋に行きたいと思うのでキーボード作りたい人いたらDMください。

yushakobo.jp

2020/2時点で最近やっていること思うことをいろいろ書いてみる

1つの人生観としてみていただければと思います
最近会わなくなった人にも対して生存確認報告的なものとして記載します

最近やっていること

  • お仕事関連

    • 本業
      • 作業
        • マスターデータ作成
          • サイトの内容を構成するYAMLとDBのテーブルを構成するCSVとか編集してページ作成する作業
        • マスターデータ反映するためのWeb画面の雛形の改修
          • もともと作成済だったものの未対応だったものやバグの修正とか
        • 効率化
          • マスターデータ反映など自社の開発側でやっていたが外部の会社に依頼して大量のページを複製できるようにする対応してる
          • Google Spreadsheetで全て管理するようなものにしてたりとか
        • 3月末に退職予定なので引き継ぎとか
          • 秘伝のタレのようなLP作成のナレッジとかしてる
      • 雇用
        • よくフリーランスと思われるが自社と直契約の契約社員
          • 正社員とほぼ変わらないが権限周りなどの違いがある
          • ボーナスないが月給高いので正直今までの会社よりも年収はもらっている
        • もともと正社員雇用目指していたがあまり正社員になろうという気が起きなくなった
          • CTOとの面接があったりと正社員になるための段階が嫌だった
            • どっかの退職エントリの「正社員にしてくださってありがとうございます」みたいなの好まない
          • 目標管理が嫌
            • 最近、社会主義に傾倒しているとこがあって割りに合わないと感じているから
              • (脱線)理想の主義ではあるが結果的に資本主義な国の存在知ってる
            • 他人を結構気にするところがあるので
          • 社会不適合者なとこあるので
            • コミュ障だと思っている
          • サービス自体にもあまり興味を持てなくなった
            • いろいろ企画しても強いユーザ・弱いユーザというのが出てきてみていられなくなってきた
            • だんだんソシャゲの運用になってきて何かあったときの補填対応とか嫌になってきた
    • 副業しなくなりました
    • 転職活動しなきゃなと思いながらあまりしていない
      • 職業訓練校行ってみようかと思ってみたり
        • 3Dの加工とかちょっとやってみたいと思ったりする
        • 職業訓練校のレベル感があまりわかっていない
      • 結局自分は何をしたいのか明確ではない
        • ものつくりは何かと掛け合わせで生まれるものだと思っているのでその時の気分によるものが大きいと思う
      • 自分が文句を垂れない環境というものを探し出せていない
        • どういった環境が自分に合っているのかも理解できていない
  • プライベート

    • 動画サイトで見ているもの
      • ゲーム実況者 幕末志士
        • 西郷さんの体調が心配
        • 動画で出てくる自作ゲーム開発者のリスペクトがある
          • 西郷ゲームとかTeam Mの作品とか
      • 政治系の解説動画
        • 右左の主張の違いあるなと思っていろいろ見ている
        • どの情報が正しいのかよくわからないからさらに別の解説も見てみるのループに入る
    • 動画作成の授業受けてる
      • 開発系の仕事をするのをやめようかと思い始めた
        • 地上最強のものつくり屋になりたいというのがあるので
          • 個人的にハマってる漫画の刃牙で心境を例えると
            • カンフーで強い烈海王がなぜか空手やボクシングをやり始めるのような
            • もともと1つの技術でやっていこうと思っていないので本部以蔵みたいな人物に近いのかもしれない
      • 地元に帰ろうかというのも思っているが開発系の仕事が少ないので
        • (補足)地元に帰ろうかと思うことについて
          • 地元でも開発している人を拝見したので関わってみたいというのがある
          • なんだかんだで東京は仕事があるので生存できることに飽きがあった
            • 都内じゃない環境に対応したい
              • 住めば都みたいなものがあるのでどうにかなることではあるが
              • 東京オリンピック前に東京でたい
                • 福島も野球の開催地ではあるので例外ではないが
                • オリンピック開催前後に何か東京に起きると予知してる
        • (補足)地元に帰った時にお話しにいった企業があって開発の仕事は0ではない
          • ラビックス rabbix さん
            • 大学のシステムをRailsで作っている
            • 福島大学の学生さんとかと勉強会開いている
              • connpassでみたことある
          • オリエンタルエージェンシー さん
            • 福島駅前の中合にある大型ビジョンの広告代理店
            • WordPressのHP作成もやってる
            • 市町村のページの多言語化とか大変みたいな話を聞いた
              • 大河ドラマゆかりの観光地とかに海外の人来てたりするので
      • Adobe製品いじってた
        • Premiere Pro
          • レーザーツールによるカット編集
          • リンク解除(動画と音声の切り離し)して2カメ撮影動画の編集
          • エフェクト・トランジションとか
          • Lumetriスコープ(色・明るさ調整)とか
        • After Effects
          • キーフレームアニメーション作成とか
        • Photoshop
          • ビットマップ画像な画像編集
            • 透過とか
        • Illustrator
    • UnityとVRMを独学
      • 最近はVRoid Studioで簡単にバ美肉できてしまうことがわかった
      • 定期的にやってる開発合宿で見てもらうために何かを作成中
        • ご期待ください

サークルのHPリニューアルしました

f:id:igara1119:20190303145348p:plain
平成の終わりが近いですね

先にサークル現状の報告

この場を借りて先に今のサークル(shin・DO・meeeee)がどうしているのかという報告をさせていただきます。

結論言ってしまうと 先月の2月5日に 技術書典6 のサークル当落通知というのがあって落選してしまったので技術書典6には参加しません。

技術書典5以降の技術書典6に向けたサークル内部の動きとして

  • GitLabのサブプロジェクト機能・issues board機能使っていい感じに細かいタスクの可視化 f:id:igara1119:20190303145554p:plain
  • Hangoutで打ち合わせするようになった

とかあって前回とは違った問題解決できてきたなぁと思ったんですけどね。

HPリニューアルしました

こちらになります。

shindomeeee.github.io

リニューアルをおこなった理由としては先ほどのissues boardの画像で目移りしたかもしれませんが

ホームページメンテしんどい問題

があって告知用とかマルチに使おうとして結果的に放置されてしまったというのがありました。 HPの作成段階では実績もなく なんとなくなデザイン作成 とかの負債があったなぁと感じてあのHPの立ち位置を考え直し、

  • みんなブログなら記載する
  • 実績のみ載せるLP的なページの認識であった方がライトで良さそう

というのに気づいて思い切って今までのホームページを捨てることにしました。

HPにあるリンクとかもGoogleのスプレットシートで管理するようにしたのでよりサークル内部の情報をまとめやすくなったんじゃないかなと思っています。 f:id:igara1119:20190303152113p:plain

あとはイラストなど素材も充実してきたのでHPにも導入するようになったのも大きな変更です。 (あのイラストは汎用性高いので気に入ってます。

ここから玄人バイニン向け

あのHPを僕1人でメンテするのもあれで、やったこと結構エグいのが多かったのでナレッジ残す意味あいで色々記載します。 ※記載している内容はほとんど僕の趣味によるものが強いです。

Blogs一覧取得API作成

  • API・DBはFirebaseのCloud Firestore(最近GAになったらしいですね
  • マスタ管理としてSpreadSheet
  • SpreadSheet -> Cloud Firestoreにデータ反映する仕組みとしてGoogle Apps Scriptを使用しています。

図にするとこんな感じです

f:id:igara1119:20190303162325p:plain

なぜの構成にしたかというとサークルメンバーのGoogleアカウントわかっていたのでIAM管理もGoogleにさせてしまった方が楽だったからです。

Cloud Firestoreの設定

ルール

SpreadSheetに入力できてFirebaseのロールを持っている人への書込み権限 一覧のデータを取得するための読み込み権限 を下記のようなので設定

service cloud.firestore {
  match /databases/{database}/documents {
    match /blogs/{document=**} {
      allow read;
      allow write: if request.auth;
      allow delete: if request.auth;
    }
    match /events/{document=**} {
      allow read;
      allow write: if request.auth;
      allow delete: if request.auth;
    }
  }
}

SpreadSheetの設定

f:id:igara1119:20190303170609p:plain

CSVにすると

id,title,url,tags,created_at,document_id
1,技術書典5当選しました!!!,https://ultrabirdtech.hatenablog.com/entry/2018/08/02/065033,["技術書典", "技術書典5"],2018-08-02,hogehoge

な構成にし、列の説明として

  • id -> 順番
  • title -> ブログタイトル
  • tags -> 現在使用してないけど絞り込み検索とかで使用する想定
  • created_at -> ブログの公開日
  • document_id -> Firestoreのdocument_id

な感じで

f:id:igara1119:20190303171445p:plain

SpreadSheet上に描画ツールで作成した更新ボタンにGoogle Apps Scriptのスクリプトを割り当てできるようにします。

Google Apps Script

Google Apps Script経由でSpreadSheetの内容取得、Firestoreに書込みができるように マニフェストファイルを編集します

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
    "libraries": []
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/firebase.database",
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/spreadsheets.currentonly",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/datastore"
  ]
}

肝心なのがoauthScopesで

で追加してます。

あとはスクリプトの追加で

blogs.gs

function setBlogs() {
  // 列の扱うデータの配置
  const columnNumbers = {
    id: 0,
    title: 1,
    url: 2,
    tags: 3,
    created_at: 4,
    document_id: 5
  }

  const rowNumbers = {
    // 列名がある箇所の配置
    scheme: 0
  }
  const apiUrl = "https://firestore.googleapis.com/v1/projects/(project id)/databases/(default)/documents/blogs"
  // 後にdocument_idを取得するために使用
  const removeString = "projects/(project id)/databases/(default)/documents/blogs/"

  // マニフェストファイル(appsscript.json)にあるoauthScopesで許可されたoauth tokenを取得
  const token = ScriptApp.getOAuthToken()
  const headers = {
    authorization: "Bearer " + token
  }

  // 対象のSpreadSheetのURL
  const url = "https://docs.google.com/spreadsheets/d/(SpreadSheet ID)"
  const spreadsheet = SpreadsheetApp.openByUrl(url)
  // SpreadSheetの読み込みたいシート
  const blogsSheet = spreadsheet.getSheetByName('blogs')
  const blogsData = blogsSheet.getDataRange().getValues()
  // IDの逆の順番にする(最新のものを先に登録させるため Firestore REST APIのorderBy asc があれば...)
  blogsData.reverse().pop()

  blogsData.forEach(function(blog, rowIndex) {
    const id = blog[columnNumbers.id]
    const title = blog[columnNumbers.title]
    const url = blog[columnNumbers.url]
    const tags = JSON.parse(blog[columnNumbers.tags])
    const created_at = new Date(blog[columnNumbers.created_at]).toISOString()

    if (blog[columnNumbers.document_id]) {
      const targetDocumentId = blog[columnNumbers.document_id]
      const deleteOptions = {
        method: "delete",
        contentType: "application/json",
        headers: headers,
        muteHttpExceptions: true
      }
      const deleteResponse = UrlFetchApp.fetch(apiUrl + "/" + targetDocumentId , deleteOptions)
      const deleteResponseCode = deleteResponse.getResponseCode()
      const deleteResponseBody = deleteResponse.getContentText()

      if (deleteResponseCode === 200) {
        const deleteResponseJson = JSON.parse(deleteResponseBody)
      } else {
        Logger.log(Utilities.formatString("Request failed. Expected 200, got %d: %s", deleteResponseCode, deleteResponseBody))
      }
    }

    if (id && title && url && tags && created_at) {
      const createPayload = {
        fields: {
          id: {
            integerValue: rowIndex + 1
          },
          title: {
            stringValue: title
          },
          url: {
            stringValue: url
          },
          tags: {
            arrayValue: {
              values: tags.map(function(tag) {
                return {stringValue: tag}
              })
            }
          },
          created_at: {
            timestampValue: created_at
          }
        }
      }

      const createOptions = {
        method: "post",
        contentType: "application/json",
        payload: JSON.stringify(createPayload),
        headers: headers,
        muteHttpExceptions: true
      }
      const createResponse = UrlFetchApp.fetch(apiUrl, createOptions)
      const createResponseCode = createResponse.getResponseCode()
      const createResponseBody = createResponse.getContentText()

      if (createResponseCode === 200) {
        const createResponseJson = JSON.parse(createResponseBody)
        const documentId = createResponseJson.name.replace(removeString, "")
        blogsSheet.getRange(id + 1, columnNumbers.document_id + 1).setValue(documentId)
      } else {
        Logger.log(Utilities.formatString("Request failed. Expected 200, got %d: %s", createResponseCode, createResponseBody))
      }
    }
  })
}

な感じで雑にSpreadSheetにあるデータを正とするためにFirestore上のデータ全消しした後で再度追加するようにしてます。

このスクリプトに先ほどSpreadSheetのボタンにスクリプトの割り当てをすることでボタンから更新することが可能になります。

フロント実装

github.com

がっつり変更入れてるので現在(2018/03/03時点)でもPR中にしてます。

昔ながらのpublic_html に 自身で編集したindex.html 置くような運用辞めた

どう言ったことというと以前はindex.html, css, jsを直接変更していたのを辞めたということです。 いわゆるジェネレータやbundlerのようなものを用いていなかったため新しいページを作成するときはディレクトリ切ってindex.htmlを設置し、共通で変更必要なものを都度都度index.htmlを直すようなことを辞めました。 なぜ今までこのような運用していたのかというとサークルのみんながどのようなの得意としているのか理解していなかったのもあり一番共通な認識でできるだろうと当時思っていたのですが、結果としていじる側にしんどみが出てしまっていたという風に感じています。

ジェネレータとしてGatsbyJSにした

GatsbyJSのベースとなるReactJSを用いるため別の学習コストが発生してしまっているのですがここは僕が率先してできるので無理やりに選定しました。 Vueベースなものを扱うというのもありましたがTypeScriptで補完が効くようにすぐに作れるのが僕の中でReactだったのでGatsbyJSにしたというのがあります。 知り合いでよくJekyllで作ったGitHub Pagesを見てたりしてたのですが僕個人としてフロントで動的に見させたい需要が強かったのでNodeJSよりのものを選びました。

デプロイ周りの変更

GitHub Pagesのホスティングの仕組みとしてmasterブランチのものが静的サイトとして公開されるようになっていて 以前は様々な対応したものをPR出してmasterブランチに反映されて初めて公開されるような運用していました。

しかし今はmasterブランチとは別でdevelopブランチをデフォルトブランチとし、 yarn deployを実行することでmasterブランチ以外でもすぐにmasterブランチにあげて GitHub Pagesに反映されたものを確認するようにしました。 yarn deploy と言っても厳密には gatsby build と NodeJSライブラリのgh-pagesによるmasterブランチ反映をさせています。

型システム & コンポーネント思考 & できるだけすぐに捨てられるように対応

CSSの運用はCSS Modulesでやるようにしました。 Reactならstyled-componentsでやる手段もありますがelementとstyleが密結合すぎると感じて基本的なhtmlとcssで運用した方が良いと感じてCSS Modulesでやるようにしてます。 CSSのやつもNodeJSライブラリのtyped-css-modulesを用いれば型定義化され補完が効くようにできるのでそうしてます。 あと型導入によってAPIとして使用しているFirestoreが返してくるJSONの形(これとか)であったり、 よく困惑するコンポーネントが持つ独自の状態(これとかやってることとして背景画像が読み込まれたことを保証して背景画像のアニメーションをするようにするためのstate変更をさせる実装してます) というのも型化されて見通しいいように?しました。

jest導入

Reduxによる状態変更テスト以外に独自のコンポーネントのテストも行うようにして作成したテストファイルに対して必ずカバレッジが100%になるように頑張ってます。

f:id:igara1119:20190303183634p:plain

API周りはモック使用したり(これとか)、 デフォルトの値をモックしたりとか(これとか)、 画像の読み込み完了時にstate変更されるようなテストをjest.spyOn使用したとか(これとか)あります。

UI周りはBlogs一覧でリンク何個あるかのテストとかはやってますがどういったスタイル当たるかというかまでやってません。 (そこに関してはjestによるテストというか自動でスクリーンショットとるかstorybookによるもので担保するのが疲弊しないんじゃないかと個人的に思っています

しんどみの技術書典5 中間報告的な何か

この記事の内容

宣伝とかはバードくんやかんずさんが行っているので

ultrabirdtech.hatenablog.com

k-anz.hatenablog.com

僕からは入稿までにどういったことを行ったのかという報告をしたいと思います。

行ったこと

サークル名の決定

サークル名の候補としてメンバーの共通点から決めようというのがありました。
色々あったのですが身内ネタが濃すぎ・喧嘩を売り過ぎてるネーミングだったという自粛の点があり、生き残った候補のshin・DO・meeeeにしたというのがあります。

みんな なんらかの業(カルマ)とかしんどみあるでしょ?

意味とかは宣伝のブログに記載しているので割愛します。

気付かれている方々もいるかもしれませんが、
技術書典5のサークルリスト上でshinじゃなくてsinになってるあれは
スペルまで明確に決めていない時に先に登録してしまった名残で、
間違えるのもsin(罪)だなというの感じて残したまましております。

サークルカットの作成

techbookfest.org

技術書典5の詳細にある画像は別のプロのもきちくんに作成していだたきました。
なんでああなったのかの図にするとこれしかない案からデフォルメされた画像を作ってくれました。

f:id:igara1119:20180923174130p:plain
爆誕

PSDデータのレイヤー見ると細かい下書きの非表示レイヤーが残ってたり、
画像作成してと依頼したのも直近なのにも関わらずに対応していただいて
本当にありがとうございました。

先駆者の意見を聞いてみること

初めて出展する人向けの勉強会があったので参加しました。

techbookfest.connpass.com

その中で知ったこととして

  • 確定申告方法
  • 印刷所
  • 作成方法
  • ロイヤリティフリー素材の扱いについて (レビューの時にいらすとやの絵があるなぁと思ったけど規約内だったのでOKそうとか気付きがあった
  • 過去の現場の声

など他のサークルの人から聞けたというのがあるので
感謝だなぁと思っています。

本の作成手順的なこと

本のタイトルの決定

みんな別々のテーマで書いていたので汎用性あるようなタイトルにならざるを得なかったです。

執筆内容

モチベーション保って書けることを重視し各自自由にテーマを決めて書くようにしました。
途中でテーマ変えたりとかもありました。

執筆環境

これ完全に僕の圧でRe:VIEWで作成しましょうという風にしてしまったなぁと負い目を感じてますが、Re:VIEWで作成しました。
ただRe:VIEWにしたことによるCIとの連携や、
GitLab上でのMerge Requestのレビューが上手くいきましたので結果的によかったと思います。

今回の環境のサンプルとしてこんなものを作成しました。

gitlab.com

CI上で行わせたこととして

  • textlintによる簡単な文章構文の静的解析
  • 電子書籍用のPDF作成
  • 印刷用のPDF作成(本文のみのPDFにして隠し(通し)ノンブルを追加、ページ総数が奇数の時は空白ページをうめる
  • ビルド結果をDiscordに通知

Merge Requestのレビューついては
今までこのメンバーで議論をするということがあまりなかったので楽しかったです。
(途中、議論したがり欲でようわからん難癖議論をしてすみませんでした。

勉強会でも議論になっていたことですが、
レビューしてくれる人がいなくてどうしようというのがある中で
僕達のサークルでは相互にレビューしてくれる人がいるというのはありがたいことだと思いました。

しんどみあったとこ

  • マージン調整とかでLaTexの知見が必要になったところ
    CSSやっていき組だったらまた別の世界があったのかもしれない
  • textlintででたerrorをignoreするか議論
    (固有名詞として存在するけど長い漢字の単語なのでerrorが出るとか
  • PDF出力すると半角の_(アンダースコア)がなんかでかくみえる (未解決

入稿手順的なこと

印刷所の決定

日光企画さんにしました。
理由としてはhttp://www.nikko-pc.com/only-event/backup.htmlとかのページを見ると入稿から本が納品される日の目安が見れて良いというのと
技術書典のバックアップ印刷所でもあるので本の受け取りが会場でできて楽そうだったからです。

入稿日の決定

早めに印刷所に入稿すると割引が適応されるので当初は50%引きの日に入稿しようとしていました。

入稿の仕方・添削をしてもらう

日光企画さんにお伺いし、いただいた指摘として

  • 出力された本文がB5サイズのものではない
    (今回はB5想定ではない本文の中心から無理やりB5サイズに適応した
    Re:VIEWの設定でtexdocumentclass: ["jsbook", "uplatex,oneside,b5j"] を忘れていた
  • 本文全体に通しノンブルがない
  • 本の厚さに適応した表紙の設置がされていない
    (もきちくんに依頼してたけど細かい指示内容なしで 日光企画さんのテンプレートに表紙載っけてとしか言わなかったので反省してます。 あとB5で入稿できそうな雰囲気がなかったので別のフォーマットの提示とか かわいそうな事させたなぁと思っています。

入稿申し込み・入金

申し込みした結果

  • B5
  • 34ページ(表紙4ページ + 本文30ページ
  • 50冊
  • 左綴じ
  • 平綴じ
  • クリアPP(表紙の加工
  • 本文用紙 上質90
  • オンデマンド スミ
  • 割引適応40%

計15,180円 になりました。

さいごに

様々な方の知見を借りる事で進める事ができたなぁと思います。

当日寝坊しないようにがんばろう