旧gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

ひとりで作るネットサービスとポツンと一軒家

大学時代、ITmediaの「ひとりで作るネットサービス探訪」という連載記事が好きで、よく読んでいた。既存サービスのマッシュアップだったりCGMだったり、おもしろいウェブサービスを一人で立ち上げて、運営している人がたくさん出ていた。当時自分はまともな社会人として働ける気がしなかったので、こういうのを自分もやってみて、少しばかりでもお金が稼げるんだったらそれで生活したいな〜みたいな妄想をしたりしていた。

大学時代にがんばって3つくらい作ってみたけど、やっぱスキル不足で思ったより陳腐なものしかできず、はじめてユーザーが何十人かついたサイトも、すぐに人がいなくなって、閉じてしまった。

就職して、1社目は合わなかったけど2社目で思いのほか仕事が楽しくなり、気づけばそこで3年半も働き続けている。個人でなにかやらなくてはというのも薄れてきた。

そんなときに、ふとテレビでポツンと1軒家という番組を目にした。自分で山を買って切り開いて家建てて庭きれいにしてってやってる人たちが映されていた。かっこいい。こういう感じいいなと思った。

ウェブエンジニアも、自分でCMSつくってサーバー建ててそこに置いてブログ記事書いて公開みたいなことはできる。お金をつくることを目指さないのであれば、広げる必要なんてなくて、自分で気持ちよく使えるものをつくればいい。ネットサービスを個人で作るとき、人様のデータを預かるというのが一番こわいのだけど、それをしなくてよくなる。WordPressのように、使うには自分でサーバー建ててデータ管理してね、とか、データはローカルのファイルに保存して、オンラインストレージと同期して使ってね、とか、既存のサービスを使うためのクライアントみたいなものとかになる。

その前提で、直近つくりたいものは、以下のようなものだ。

こういうものを、趣味でほそぼそと作って、ものによってはちょっと友人を招くみたいな感じで利用権限を渡したり。そういう感じで、ポツンと一軒家モデルみたいな感じでインターネットとプログラミングを楽しんでいきたい。

モブプロ楽しい

最近仕事でモブプロをやっている。楽しい。

何が楽しいか

  • 自分だけでは立ち止まるようなところでも誰かしらが解決してくれるので立ち止まらず進められる
  • typo指摘してもらえる。助かる。
  • typo指摘しただけで感謝される。嬉しい。
  • コードレビューで悩むことがない(モブプロの時点で解決している)
  • 全員が一発で仕様を理解できる(モブプロの時点で解決している)
  • テストなど、手を抜かずにしっかりやる傾向がある(例:ここのテストはこれで十分だろうか?いや、このcontextも書かないと。みたいな)
  • たくさんしゃべるので、のどの筋力低下防止になりそう(しらんけど)

気をつけないといけないこと

一方、気をつけないといけないこともある。

  • 急いで進めようとしてピリピリすると、質問がしづらい空気とか、作業を止めて話したりしづらい空気ができたりしてよくない
  • 個人のもくもく作業をみんなで眺める形になるともったいない(せっかく人が集まっているのだから、ただコードを書く以上に、一つでも多くの疑問が解消されるとよさそう)
  • 各々がそれぞれ別の作業をする以上の生産性を求めるのはさすがに無理がある気がしている(多少効率が落ちても、長い目で見て情報共有やら教育も兼ねられたから良いよね、くらいの温度感でやりたい)
  • 全員が悩まず実装できるようなお題でわざわざモブプロする必要はなさそう

今のところは、以上のような感想。あらゆる開発作業をモブプロにしたいとは思わないけど、要所要所でやっていけたらいいな

最近の情報収集のやりかた

RSS

SlackでRSSフィードを登録して、Slackから見に行って読んでる。登録したいときは /feed subscribe [url] で随時足している。

今の所登録しているURL一覧は以下の通り。

Title: Release notes from compiler
URL: https://github.com/elm/compiler/releases.atom

Title: Microsoft Edge Blog
URL: https://blogs.windows.com/msedgedev/feed/

Title: webpack - Medium
URL: https://medium.com/feed/webpack

Title: Babel Blog
URL: https://babeljs.io/blog/feed.xml

Title: mizchi's blog
URL: https://mizchi.hatenablog.com/rss

title: blog.jxck.io
URL: https://blog.jxck.io/feeds/atom.xml

Title: Mozilla Hacks – the Web developer blog
URL: https://hacks.mozilla.org/feed/

Title: WebKit
URL: https://webkit.org/feed/

Title: Next.js Blog
URL: https://nextjs.org/feed.xml

Title: React
URL: https://reactjs.org/feed.xml

Title: Yarn
URL: https://yarnpkg.com/feed.xml

Title: The npm Blog
URL: https://blog.npmjs.org/rss

Title: Updates
URL: https://developers.google.com/web/updates/rss.xml

Title: TypeScript
URL: https://devblogs.microsoft.com/typescript/feed/

Title: JSer.info
URL: https://jser.info/rss/

記事が流れてきたらなるべく読んで、Slack上でコメントつけるようにしてる。

Twitter

情報流してくれそうなアカウントをフォローしたり、ツイート数多くてあんまり自分が見てもしょうがないなというアカウントは外したりミュートしたりして、リストとかできれいに整理しなくてもそこそこTLが役立つようには気をつけてる。とはいえTwitterなので技術と関係ないものも見ているし、そんな頑張って見てもいない。

理想

ちょうどいい量の情報が、ちょうどいいタイミングで入ってくるといいなと思っているので、今後もちょうどいい感じを目指して整えていきたい。

CSSで■、●、▲を描く

CSSでいろいろ描けるようになっておきたいなという気持ちだけは以前からあったものの、これまでちゃんとキャッチアップできていませんでした。まずは簡単なものからということで、●と▲と■をCSSで描いて、その実装方法について書いておきたいと思います1

これは、widthとheightと背景色を指定するだけですね。

●も簡単で、直径の半分をborder-radiusに指定すると円になります。

.circle {
  --diameter: 200px;
  width: var(--diameter);
  height: var(--diameter);
  border-radius: calc(var(--diameter / 2));
}

▲はちょっと難しかったです。CSS triangleで検索してみると、以下のジェネレータが出てきました。

生成されたCSSは以下のようになっています。

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

なるほど(わからん)。

よくわからないので、詳しく見ていきます。

border-width

まずは、MDNでborder-widthのページを見てみます。

border-widthに値を4つ指定すると、 border-width: 上 右 下 左の指定になるみたいです。しかしそれでもなぜ上の記述、border-width: 0 0 200px 200px で三角形になるのか理解できません。色の指定を border-color: #007bff;にすればただの正方形になるので、border-colorの指定が肝なのでしょう。

border-color

MDNには、border-colorに4つの値を指定したときの例が載っています。なるほど、色をつけてみるとわかりやすいです。borderは上下左右指定すると、それぞれが台形になるんですね。

それぞれ別の色を指定すれば、きれいに三角形ができるまでの過程がわかりやすいので、アニメーションさせてみました。

See the Pen Animation of making triangle by gaaamii (@gaaamii-the-sasster) on CodePen.

それぞれのborder-widthをboxの幅の半分に指定したところ、boxの中身が全部borderで埋め尽くされ、きれいに三角形で四等分されました。なお、border-box: 0にしておかないとbox内の領域をそのまま保とうとしてしまうので、boxに大きいborderが付くだけになってしまうので注意です。

表示したい三角形の部分以外をtransparentにしていた

こうやって見た上だと、先程のborder-colorの指定 transparent transparent #007bff transparent; が理解できます。下のborderだけ色を付けほかは透明にすることで、色をつけたところの三角形だけが表示される感じになっていたのです。

さらに、伸ばしたい辺のborder-widthをboxと同じ長さに、かつ向かい合う辺のborder-widthを0に、それ以外の辺はboxと半分の長さにすることで、いい感じにboxの幅と同じ長さの底辺の二等辺三角形が描けました。

まとめ

今回、CodePenで書きながら一通り確認しました。書いたものも一応公開してるので興味ある人は見てみてください。

See the Pen basic shapes (●▲■) drawn by css by gaaamii (@gaaamii-the-sasster) on CodePen.

三角形の描き方を理解するのに思ったより時間がかかりましたが、とりあえずは●▲■の描き方を覚えられたので、次はこれを組み合わせていろんな形の表現に挑戦していきたいと思います。調べたらElmのロゴをCSSで描いてる人がいた2ので、自分でもいずれチャレンジしてみたいです。


  1. この記事ではIE11などの古いブラウザについてはあまり考慮していないので、仕事の使ったりする場合は caniuse.com で確認するなどしてからにしてください 🙏

  2. https://www.youtube.com/watch?v=ZNBc1BsJZnQ

2020/01〜2020/03 やること

次のクオーター(2020/01~03)の個人目標がざっくり決まったので、社外でやることだけ書いておく。

  • 会社のTechブログを2週に1記事(以上)更新する
  • 何かしらの勉強会で1回以上発表(LTも可)する
  • Elm Japan 2020 にcfpを出す

3ヶ月で1回の勉強会発表というのは慣れてる人からしたら大したことないのだろうけど、自分はまだ1度も社外で発表らしいことをしたことがないので、そこをクリアしておきたいというのがある。

逆にTechブログはハードルが低いしネタもありそうなので2週に1記事にした。とはいえ今クオーターの実績は2記事なので、その3倍と考えるとやっぱり大変そうでもある。

Elm Japan 2020はElm作者のEvanさんとかも来るガチイベントなのでcfp通すのは厳しそうだけど、cfpを出すというのも良い経験になりそうなので頑張りたい(締め切りまで時間あまりないので年末年始頑張ろう)。

「平成Ruby会議 01」を見に行った

同僚の id:atomiyama さんがRustでgemを書く話をするそうで面白そうだったので行ってきました。

heiseirb.github.io

各セッションの感想など

RubyJVMを実装してみる

speakerdeck.com

Javaコンパイルして出てくるバイトコード読んで云々という話だったけど、ぼけーっとバイトコード眺めてる間に話が進んですぐについていけなくなってしまった。あとスライドのコードとかあまり見れなくて視力の衰えを感じた...。

rustで拡張モジュールを作成してgemにする

speakerdeck.com

  • 順を追って説明してくれてありがたかった。
  • Rustで速くなるんだったら一部だけRustで書いてgemにするのはよさそう。どんなモジュールだとRustにするメリットが大きいんだろうと興味が湧いた。
  • 以前はffiを通じて他言語の実装を使うみたいなのはなんかすごい特殊なイメージがあったけど、最近(というか去年の今頃)ElmでPortを通じてJSのライブラリ呼び出すみたいなことをしてからは、必要があってインタフェースがちゃんとしてるんだったらやっていいんじゃないのという気持ちになっていたのでなおさら興味深かった。

やわらか増税 〜はじめての増税対応〜

真のREST

www.slideshare.net

自分は正直RESTといえば「URLでリソース表してHTTPのメソッドでCRUDするやつ、Railsがやってるやつ」みたいな雑認識があったので、その雑認識がとりあえずは潰されてよかった。特にREST APIハイパーテキスト駆動ではないといけないというのが全然自分の頭の中になく、なんなら驚いてしまった。ちゃんと勉強しよう...。RESTful Web APIsという本が良いらしいので読んでおきたい。

全体の感想

どのセッションも自分が知らなかったことが多く、勉強になりました。どんなプラットフォーム向けに何を書こうにも、コンピュータそのものとか言語処理系のしくみとかWebの歴史とか、そういう基礎的なこと(だけど実務で学ぶ緊急性があまりないこと)をしっかり理解しておかないといけないな...と同世代のできる人たちを見ていて感じました。

高さいっぱいのアコーディオンメニュー

See the Pen Full height accordion by gaaamii (@gaaamii-the-sasster) on CodePen.

高さいっぱいのアコーディオンメニューを書いてみた。calc()は幸福度が高い。

こういうの必要なことはちょいちょいありそう。

「サバイバルファミリー」を観ました

突然電気もガスも水道も使えなくなって情報も全然入ってこないみたいな状況で家族みんなで東京脱出して云々というすごい大変そうな話だけど、暗い感じはなくてへらへら笑いながら観れて楽しかったです。

PWA Night vol.10 行ってきました

pwanight.connpass.com

なんで参加したか

趣味でMarkdownエディタを書いていて、一応create-elm-appが吐き出すmanifest.jsonとregisterServiceWorker.jsをそのまま利用してPWA対応してあるのだけど、Service Workerとキャッシュ周りよくわかってないのでそこらへん知れたらいいな〜と思い参加しました。

メモ

  • SPAのSEOは相変わらずちょっと大変
  • プロダクションでがっつりPWAやっていってる人は、「アプリじゃストアの審査通らない!」「じゃあPWAだ!」というパターンが多いっぽい
  • Service Worker 周りは特殊なことしないのであれば自分でいちから書かずにworkbox使っておけばよさそう
  • https://oo.parts のデモ見せてもらったけどよく出来ていてネイティブアプリ感あった
  • WebAssemblyがどういうところに使えるのか実例見せてもらって雰囲気がわかった(雰囲気だけ)
  • JSとWebAssemblyが違うところとして、型情報があるから安定して動作するみたいな話が興味深かった(まだあんまりよくわかってないので学んでいきたい)

所感

個人的にPWAは、検索して、リンクをクリックして、使って、気に入ったらインストールして使うっていうプログレッシブな感じが気に入ってて、デスクトップアプリに関してはほとんどこれでいいのではという感じがしてます。普通のウェブアプリならそんなに難しい作業も必要ないので、いま使ってるウェブサービスの多くも、今後は当たり前にPWA対応されていくのだと思います。

雑にはてなブログテーマ用意して公開もせず使ってる

ちょっと前に、はてなブログのテーマを作った。いや、作ったというか手元にテンプレートをおいていじくったやつを貼っ付けてるといったほうがいいかもしれない。

はてなブログは以下に素晴らしいテーマがたくさんある。

blog.hatena.ne.jp

あるんだけど、せっかくCSS読み書きできるのだから自分で書いてちまちま直すほうが、週末に庭の手入れしてるじいさんみたいな感じで楽しそうと思った。はてなブログの自作は以下のページを読むとわりと簡単にできる。

help.hatenablog.com

ありがたいことに、そのまま適用してもちゃんとした見た目になるボイラープレートがある。ありがたい。つまり、自作テーマを作るといっても自分でいちから書く必要はなく、ボイラープレートのリポジトリをcloneしてきて、npm i; npm start して、確認しながらCSSを書いて、ビルドされたCSSを貼るだけでいい。投稿したテーマは、良い具合の出来になるまではストアに公開せず、自分のブログにだけ適用しておけばいい。

f:id:shgam:20191112000312p:plain
自作テーマ管理画面

リモートワークについて

最近仕事どうやってやるのがいいかなあと考える機会が多く、その中でリモートワークについても考えることがある。今の所は以下のように考えてる。

自分はフルリモートじゃないと絶対嫌だという気持ちはないのだけど、考えてみれば往復2時間くらい毎日使うのはもったいないよなあと思う。たとえば週3日のリモートワークが許されているとして、時給が2000円だとしたら、往復2時間×週3日×2000円×4週間×12ヶ月って考えて、576000円!?お得!ってなる。実際、自社にリモートワーク制度ができたときは少し感動した。

もちろんリモートワークはチーム的には工夫しないといけないこと(ビデオ会議どうしようとかちょっと相談したいときどうしようとか)が出てくるので最初は面倒だとも思うし、一緒に働く人とオフラインでワイワイする時間もあったほうがいいと思うんだけど、通勤時間は当たり前に受け入れすぎて忘れがちだけどなかなかの損だよなあ、何も週5日でやらなくても、という思いもある。リモートワークがどうしてもできないとかではなくちょっとした工夫で成り立つレベルであれば取り入れたほうがよさそうだと考えている。

Custom TypesのデータをJS界に受け渡しする(Elm)

Elmでアプリケーションの状態をlocalStorageに保存しとくようなものを作っていて、カスタムタイプはどうするのか知らなかったのでメモ。

雑にそのままportに渡そうとしたところ、以下のコンパイルエラーが出てきました。

The setStorage port is trying to transmit a ColorTheme value:

259| port setStorage : ModelExposedToStorage -> Cmd msg

I cannot handle that. The types that CAN flow in and out of Elm include:

Ints, Floats, Bools, Strings, Maybes, Lists, Arrays, tuples, records, and JSON values.

Since JSON values can flow through, you can use JSON encoders and decoders to allow other types through as well. More advanced users often just do everything with encoders and decoders for more control and better errors.

上の ColorThemeというのが、localStorageに保存したかったけどできなかったカスタムタイプのデータですね。具体的にはこういうものです。

type ColorTheme = WhiteTheme | DarkTheme

で、エラーに出ている通り、

Since JSON values can flow through, you can use JSON encoders and decoders to allow other types through as well. More advanced users often just do everything with encoders and decoders for more control and better errors.

JSON encodersとdecodersとやらを使えばいいようです。

対応

こんな感じの変更を入れました

どういうこと?

localStorageに保存するときにJSONの形にencodeして、localStorageから取り出してきたときにはElmのデータにdecodeしてます。問題になったColorThemeのところは、こんな感じでcaseで文字列にしたやつをencodeしているだけです。

素朴に趣味開発をやっていく

趣味開発は楽しい。楽しいけど時間とモチベ保つのが大変。そのため、以下のようなポリシーで素朴に趣味開発をやっていきたい、というメモ。

  • 自分で使うものは自分でつくる
  • すぐに完成させるつもりで始めない
  • 何度でも書き直す

自分で使うものは自分でつくる

自分で使うものは自分でつくるという感じでやっていきたい。ブログ下書きに使うMarkdownエディタとか、TODOリストとか、RSSリーダーとか。それで稼ごうとか流行らせようとかは一切考えない。

幸いMarkdownエディタもTODOリストもRSSリーダーも、既存のもので自分にとって完全にしっくりくるものがないので、趣味開発のネタに困ることはなさそう。

すぐに完成させるつもりで始めない

自分で使うものといっても比較対象は一流の他のアプリになってしまうので、最初からそこを目指してしまってつらくてモチベーション保てないということになってしまう。本当に自分がそれが最高といえる状態が完成だとして、そこにたどりつくのにどれくらいかかるかはわからない。だから、完成させるつもりで一気に頑張ろうとせず、完成するまではその不便さと付き合う覚悟を決めてそれに接する。不便だと直したくなるので、モチベーションは保たれる。

何度でも書き直す

せっかく仕事と違って自由なので、リニューアルしたいときにできる。技術的にこれ使いたいからという理由で書き直してしまってもいい。

で、なにやってるのか

最近は https://nekobito.github.io をちまちまつくってる。