shwldの投稿 - Crieit

エンジニアのアウトプット力を高めるメモ投稿サービスをリリースしました【個人開発】

2023-03-22T10:07:36+09:00

この記事は Zennに投稿したものと同じ内容です

こんにちはmofmofでエンジニアをしているshwldです。

mofmofではエンジニアの成長にフォーカスして色々施策を思索して試作したりしていたりもします。
今回は、課題の一つである、「アウトプットを習慣づけたい」について、ソリューションとなるサービスを作ってみました。

この記事では

なぜサービスを作るに至ったのか
どんなサービスなのか

あたりを書いていきます。

https://revelup.dev/ja

なぜアウトプットを習慣づけたいのか

アウトプットには様々なメリットがあります。

インプット内容を自分のものにする
- 技術情報をインプットしただけではいざ仕入れた情報を使おうとした時に使える状態になっていないことがほとんどです。実際に手や頭を動かし、相手に教えられる状態になっていると、学習・定着効果が高まります。
プレゼンスを高める
- エンジニアの技術力を客観的に評価するにはアウトプットや経歴が重要です。極論ですが、アウトプットしていないと何もしていないと同義になってしまうのです。

と、メリットはわかるのですが、実際自分がたくさんのアウトプットをできているわけではありません。自分が継続的アウトプットを改善した方法を元に今回サービスにしました。

解決したい課題

アウトプットの際に以下のような課題があります。

ひたすら開発してしまい、つまづいたところ、工夫したところを残してない
- いざ記事を書こうとしても、記事を書くための調べ直しに多くの時間がかかる
記事を公開するのにハードルがある。誤った情報を書いていないか、読めるものになっているか気になってしまう。

ZennのScrap機能はこの課題への良い解決策で、Scrapの思想が好きです。
ただ、今回自分はScrapよりもさらにハードルを下げたサービスが欲しいと思いました。

どんなサービスなのか

REVELUP.devはTwitterのような気軽さで技術アウトプットメモを投稿できるサービスです。
フロー情報を前提としているため、正確性などを気にせず気軽に投稿しながら、本番アウトプットの練習ができる場を目指します。

以下のような機能が備わっています。

気づいた時に即残せるデスクトップ用アプリケーション

開発の途中、何か工夫したり、つまづいたその瞬間に記録を残します。
任意のショートカットを登録することで、10秒で投稿できる体験を提供します

階層化可能なタグ付けによるノート整理を採用し、投稿速度と内容の整理を両立します

階層化可能なタグ↑

心理的安全性を担保しつつ、公開練習できる

REVELUP.devへ投稿する内容は、承認した友達だけがみることができます。
Twitterというよりは、技術投稿版facebookといった感じです。

気づいた時に投稿する性質上、業務中や驚くような時間であることもあると思いますが、友達からは投稿した時間はバレないようになっています。

実際にアウトプットする材料とする

投稿した内容は、GraphQL　APIで取得することができます。
投稿内容を好きに加工、バックアップしたり他のサービスに連携など、ご活用ください。

ストックした情報を使って、AIで記事を生成するということができると、アウトプットのハードルが下がりそうだなーとかを考えています。

https://revelup.dev/ja

このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
https://indie-dev.mof-mof.co.jp

g4と個人開発と私

2019-12-11T07:00:07+09:00

@shwldです。
g4というポモドーロ・テクニックした結果で自分（のアバター）が成長できるサービスを運営しています。

年末ですし、このg4の開発開始から現在までを振り返ってみます。

前身となるみんなの成長をリリース

去年、みんなの成長というアプリを制作しました。

このアプリは、クロスプラットフォームにリリースしたい。Expo.io を検証したい。という目的から制作しました。

最初はTODOアプリになんか独自要素を追加するくらいのもので行こうと言うことから始まって、自分の子供の成長記録をつけられるアプリという方向性に落ち着いた結果です。

子供の成長記録をつけていけるなら大人も行けそう。
みんなの成長ではSNSの基礎的なところを実装して、ネタ帳であたためていたRPGみたいに自分のパラメータが上がっていくサービスにつなげよう。と想定をしながら開発をしてました。

ここで想定してたがg4ですね。

みんなの成長リリース後、当初はexpo.ioでみんなの成長とg4のバックエンドを一緒にして、子供が成長したら大人版へ移行するような並行運用を考えていました。
しかしg4の機能を作るにつれて成長と違う仕様がたくさん出てきたので、今年のはじめくらいに別で作り始めました。

経験値稼ぎの1要素としてポモドーロ・テクニックを採用してリリースへ

自分のパラメータをあげるにあたって、経験値をためてレベルアップするということが必要でした。
ちゃんと時間をかけたという実績が有るとレベルに信憑性が出ると思い、ポモドーロ・テクニックできるタイマー機能を採用しました。

はじめがexpo.ioの勉強目的だったためもあり割と目標もなくダラダラと開発してしまった感はありますが、そうして仕事しつつ子育てしつつスマブラしたり回り道しながら夏にリリースしました。

リリースからが本番だった

リリースすることによって沢山の人に触っていただくことができました。これは自分の作ったものがある程度興味を引けたという達成感になりました。
ただ、リリース後どういう風にしたいかというビジョンがまったくなかったため、ある程度使ってくれる人がいたこともありそのへんを考えていく必要性を強く感じました。

今まで、作ってきたサービスやアプリもある程度周りの人が使ってくれたのですが、g4はそれに比べても反応が良いです。
これが単にクオリティの違いなのか、アイデアや問題解決に繋がりそうな期待感からなのか、そのへんを観察しつつどういう風に育てていきたいのかというのを自問しながら考えていきました。

ポモドーロサービスにすることに

ポモドーロ・テクニックというのはg4のいち要素でしか無いつもりでした。
しかし、今使ってくれている人のこと。自分が実際使ってみて。また、サービスの目的をシンプルに。などいろんな事を考えた結果、まずはポモドーロ・テクニックをして成長するサービス。
としてg4を作っていくことにしました。

自分の中では結構大きなピボットでした。これから壮大な旅が始まるのだ...

そういう意味で最初のリリースは、成長がどんな感じで使われるのかとか、レベルどのくらい上がるとか、やっぱりポモドーロ・テクニックなのかとかを検証するMVPとしては良かったなって気がしてきてます。

今後のリリースについて

次のリリースではクエストを作成する事ができるようになります。
ポモドーロ・テクニックのやること管理みたいなところに踏み込む形になります。

レベルをあげる目的とポモドーロ・テクニックを融合させる第一歩です。
ツールとしての使い勝手が結構変わるので、ユーザーの反応が気になるもので、そのへん見つつ今後も変化と検証を繰り返していきたい。

そして、自分の中で本当のリリースにしたいっていうMVPが一応合って、来年どこかでそれを実施したい。と思っています。
そのときには「これが真のリリースだ！」って言います。

唐突になんかここからポエムが始まるのだ...

[ポエム] 何を目指して個人開発をするのか

コラムみたいな感じでポエムを記事に挟んでくスタイルを唐突に思いついたので誰か試してみてください。

個人開発ってなんだろう。
自分がなぜ個人開発をするのか、その理由を上げてみると

新しい技術のキャッチアップをする
趣味。楽しいから
達成感、賞賛を得るため

自分が個人開発する動機はおもにこのへんです。
何かを新しい技術で作るのはそれだけで楽しいし、リリースするのを目標にすると身になりやすいと感じます。
リリースすれば誰かしら褒めてくれます。

これらが動機ですかね。目的でいうと

ポートフォリオになるから
収入を得るため

あたりなのかなぁ

ポートフォリオになる

ポートフォリオって言うとなんか違うかなぁ。自分というブランドのブランディングかなぁ。
なんかそんな感じのことです。

自分のプロフィールとなるものが欲しかったのですよね。
開発者として@shwldはこのくらいの技量があります。
こんな風にサービスを作っています。
こういうのが好きです。

g4では割とありのままをさらけ出していて、そういう意味では吹っ切れたし一番うまくいっているプロダクトかなと思ってます。
g4を見てのスカウトメッセージとかも来たりしてますし（全然返信とかはできてないですが）、これからもこのスタイルで続けていこうと思いました。
（週3,4くらいで安定した収入があって、個人開発（趣味）を思いっきりできる環境ってのはかなり魅力的）

個人開発って発信が自然とできるようになる気がする（自分はまだまだ全然できてないですが、入り口に立てた感）
自分が作ったサービスを使ってもらいたいという欲からいろんな発信を自然とするようになる利点があります。

お金を得るため

これは難易度が高くて見ないようにしてるとこあります。
でもやっぱり突き詰めていくとここは潜在的な目的としてやっぱりある。

g4は漠然とですが、収入につながるかもしれない検証をしています。

自分が今まで作ってきたものは、行っても月数千円の収入でした。
ただ、リリースからあんまり改善を継続できたものがないんですよね。
どうしてもリリース前ほどモチベーションがのらない問題が合ったんです。

リリースしてある程度満足してしまう
リリース（動くもの）を優先した結果、メンテしたくないコードになっている
他の技術や新しいアイデアを作りたくて浮気する
苦手領域に踏み込めない

このあたりの問題が。g4はこのあたりのカウンターとして作っています。
（あくまで自分自身が「継続」できなかった問題に対する見解とトライでしかないです）

リリースしてある程度満足してしまう

自分の中にあるg4の完成イメージは結構に壮大で、まだ全然リリースできてないです。
リリースはしたが全然リリースではない。まだ本リリースを数回控えています。
そもそもサービスの方向性がやっと決まったぞくらいな感じ。

そもそも現時点のg4はなんの体験もつながっていない...、成長できたね。だから何なの。みたいなとこある
まだ全然満足していません。

リリース（動くもの）を優先した結果、メンテしたくないコードになっている

これはある程度運用していく中でそういうコードが増えていくことは必然なので難しいところですが、テストを書くということがやっぱ大事ですかね。
あとはリファクタをある程度定期的にやろうかなとか考えたりはしています。

つまるところ、仕事と同じようにちゃんと開発しろってことですね。

他の技術や新しいアイデアを作りたくて浮気する

新しい技術やアイデアが出てきたときに、そのアイデアでg4を拡張することでこれを回避したい。
g4の派生アプリとか関連アプリとして作ったり、本体に取り込む形で新機能を作れば解決するのでは。

それによってg4がキメラになるかもしれませんが、g4は無限の拡張性がある神サービスなのでいける（何が

苦手領域に踏み込めない

個人開発で、自分が日常で使えない題材で戦うのは得策じゃないと思う。
自分が作ったサービスを検証したり、その領域を継続してウォッチしたりするのに非日常が入ってくるわけなので、強い気持ちがなければ続けられない。

まあこの辺は個々人の特性にも寄りそうだが、自分は意志が弱いし飽きっぽいので、そういうのは環境に助けてもらうのが良いなと思っている。
ポモドーロ・タイマーは自分が仕事をしていく中でなくてはならない存在だし、競合っぽいのがあったらきっとすぐ飛びついてどういうところがいいのかを見ると思う。

サービスを作るってすごく難しくて、その領域のことを常に考えてるくらいじゃないときっと勝てない。
個人開発のサイドプロジェクトなら日常・習慣化しているもの以外はあんまり考えないほうがいいと言うのが自分の考え。

これは仕事でも言える。片手間でプロダクトオーナーはできないと思う。プロダクトオーナーってすごい大変。常にプロダクトのことを考えないといけない。だから専任か、習慣化しているものがいい。
と思う。

おわりに

なんでも っていう題材に甘えてとりとめもなく書きなぐりました。

とりとめないついでですが、Patreonもやってみています。
パトロンがいるのにg4開発しないとかできないので、開発やめるならPatreonやめないといけない。これはかなり強い後押しです。

今ならデスクトップアプリ版の先行配信がついてくる。

Become a Patron!

ポモドーロ・テクニックで成長できる「g4」もよろしくおねがいします。

g4 ポモドーロストーリーズ

fly.ioでSPA&OGP芸を最速かつゼロ依存でやる（package.jsonすら不要）

2019-10-17T05:05:57+09:00

個人開発界隈ではOGP芸というものが流行っているみたいですね。

SNSにシェアする際に表示されるOGPの設定や画像をいい感じにするみたいなことのことですが、SPAではこれを生成するのが割と面倒だったりします。

自分が作っているg4でもOGPを使ったシェアを実装していますが、SSRを使って配信していて、割と設定が面倒だったりしています。

こんなの

今回、なるべくSSRをしないでSPAのままやってみることはできないかというのをfly.ioで試してみました。

作ったものの概要

実際にOGP画像として表示される画像は/image.png?i=0で配信する。
/に?i=0のようなパラメータをアクセスすると、入力した↑を含むOGPが反映されたhtmlを表示する
fly.ioが日本語に対応してないので、titleに日本語は使えない
せっかくfly.ioを使ってますが、今回はOGPだけにフォーカスしたいのでキャッシュ周りは実装してません

作ったもの

https://og-image-sample.edgeapp.net?i=0

https://og-image-sample.edgeapp.net?i=1

これをtwitterやfacebookなどでシェアしてみてください。

作り方

事前にflyのcliをPCにインストールしておく
npmは必要ないです（あったほうが便利だけど最速なので）

必要なファイルは4つだけ
- index.js: なんか処理書くやつ
- template.html: テンプレートです。ここに情報を流し込む
- fly.yml: なんか設定書くやつ
- sample.svg: OGP芸したい適当なsvg。今回はURLによって内容を書き換えるため雑に{{title}}みたいなやつをここに書いて、テキスト置換でそこに内容を埋め込んでます。

``` html:template.html

fly.ioで最速ogp芸

fly.ioでogp芸をする場合のサンプルだよ


templateはこんな感じになりました。
ogpのcontentは置き換えるので何でもいいです。とりあえずさり気なくg4のものを入れてアピールしておきます。

次に`index.js`です。こちらにすべての処理を書きます。

``` js:index.js
import { Image } from '@fly/image'
import { mount } from "@fly/fetch/mount"

// templateをテキストで取得するFunction
async function getTemplate() {
  const resp = await fetch("file://src/template.html")
  return await resp.text()
}

// svgをテキストで取得しつつ中身ちょっと埋め込めるFunction
async function getSvgText(title) {
  const resp = await fetch("file://src/sample.svg")
  const text = await resp.text()
  // g4(https://www.g-g-g-g.games)ではReactでテキスト化されたsvgを吐いてるが、とりあえず単純に置換する
  return text.replace('{{content}}', title)
}

// 画像形式のレスポンス作るFunction
async function responseImage(svgText) {
  const svgResp = new Response(Buffer.from(svgText))
  const buf = await svgResp.arrayBuffer()
  const png = new Image(buf).png()
  const result = await png.toBuffer()
  return new Response(result.data, {
    headers: {
      'Content-Type': 'image/png',
      'Content-Length': result.data.byteLength.toString(),
    }
  })
}

// 出力データのパターン
const TITLES = [
  'g4 is pomodoro rpg!',
  'fly.io de OGP!!',
]

// fly.ioのrouterみたいなやつ。ここに処理を書いてく。
const mounts = mount({

  // このパスでogpの画像を生成する
  '/image.png': async (req, init) => {
    const url = new URL(req.url)

    // URLからQueryStringを取得
    const index = url.searchParams.get('i')
    if (index !== '0' && index !== '1') {
      return new Response('not found', { status: 404 })
    }

    // 対応したタイトルを取得
    const title = TITLES[index]

    // タイトルをsvgに埋め込んだテキストを作る
    const svgText = await getSvgText(title)

    // svgからpng画像を生成する
    return responseImage(svgText)
  },

  // このパスをシェアする
  '/': async (req, init) => {
    const url = new URL(req.url)

    // URLからQueryStringを取得
    const index = url.searchParams.get('i')
    if (index !== '0' && index !== '1') {
      return new Response('not found', { status: 404 })
    }

    // 対応したタイトルを取得
    const title = TITLES[index]

    // テンプレートをparseして編集できるようにする
    const doc = Document.parse(await getTemplate())

    // テンプレートにOGPを埋め込む
    doc.querySelector('meta[name="description"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:url"]').setAttribute('content', url.href)
    doc.querySelector('meta[property="og:title"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:description"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:image"]').setAttribute('content', `${url.origin}/image.png?i=${index}`)
    doc.querySelector('meta[property="og:image:alt"]').setAttribute('content', title)

    // htmlを返す
    return new Response(doc.documentElement.outerHTML, {
      headers: { 'Content-Type': 'text/html' },
      status: 200,
    })
  },
})

// リクエストをmountsの定義を使って処理するように設定する
fly.http.respondWith(mounts)

index.jsはこんな感じ。
/ はtemplate.html のogpを書き換えて出すだけ。
/image はsvgファイルを読み込んで文字列を置換したものをpngに変換して返してます。

fly.ymlやsvgファイルは特に特別な設定はないのでドキュメントや最後にソースを貼るのでそちらを見ていただければ。

あとは、fly.ioのコンソールでアプリを作って、fly deploy するだけ。

再度になりますが、

https://og-image-sample.edgeapp.net?i=0

https://og-image-sample.edgeapp.net?i=1

これをtwitterやfacebookなどでシェアしてみてください。

以上になります。ソースはこちらにあります。

React PWA + Rails GraphQLで作ったポモドーロRPGに使った技術やその選定理由を書いてみた

2019-09-26T22:08:54+09:00

先日、『g4』というポモドーロ+RPGなサービスをリリースしました。

そのサービスで使った技術について聞かれることがあったので残しておきます。

どんなサービス?

ポモドーロ・タイマーを使い25分間集中すると経験値をもらえ、その経験値でレベルが上がる。
って言う感じのやつです。

https://www.g-g-g-g.games

こんな特徴があります。

ポモドーロ・タイマーやRPG的なUIはリッチで動きがある
現在のステータスをOGP画像にしてシェアできる
上昇する能力値や覚えるスキルは登録した文章を解析して決まる

構成はこんな感じ

フロントエンドの選定理由

フロントエンドはSSRしたReactアプリをfly.ioにおいています

[React]

自分は過去に仕事でNuxt.jsや生Vue.jsを使ったことがあり、個人ではExpoやNext.jsでReactにも触っていました。

今回Reactを選択した理由は以下です。

型が欲しかった。Typescriptを使いたかった
Reactのほうが書いていて楽しい（個人の感想です）
- React Hooksめっちゃいい
Apolloを使うならVueよりReactのほうが色々揃っている

[fly.io]

SSRするためにNode.jsをホスティングするやつが欲しかったので選定。
mizchiさんのブログで知り、面白そうだなと思ったのがきっかけ。
べつにfirebase hostingでもよかったですが、以下が決め手

firebase hosting同様初期導入費用がほぼ0
CDN
キャッシュコントロール
svgを使ったOGP画像の生成ができる

特に、

svgを使ったOGP画像の生成ができる

に有用性を感じて選定したんですが、現時点ではカスタムフォントと日本語への対応が十分でなく、別途Cloud Runを使うことになってしまっています（後述）
（サポートに聞いたらリポジトリ教えてもらったので（OSS）対応できるようなら自分で対応してなげたいなぁ）

キャッシュコントロールもよい

キャッシュの操作も面白くて、
g4の公開用ページではAPIからもらった結果をキャッシュして、キャッシュがあればそれをそのまま返すということをしています。

これによってAPIサーバーへの負荷はかなり低くなってると思います。
APIサーバー側からは、データ更新時にfly.ioのキャッシュを削除する操作をしていて、データが更新されるまではfly.ioはキャッシュを使い続けてます。

この辺のAPIが普通に使いやすくて簡単にかけるのでめっちゃ良きです。

fly.io良いよ

fly.io自体ははデプロイも早いし、導入コストも安いのでnowとかと並べて、手軽にNode.jsをホスティングするための選択肢にしてもいいんじゃないかなって思います。

Next.jsを選ばなかった理由

SSRする予定ではありましたが、OGPだけ生成できればいいなというレベルだったので、通常のReactアプリで作りました。
なるべく継続開発するため、アップデートの手間と依存を減らしたかったのも少しある

[PWA]を選定した理由

最初は、Expoで作ろうかと思っていました。

もともとSPAでアプリっぽいUIを作る仕事を受けたときに、Nuxt.js + Firebaseで作り、マルチブラウザ対応が辛いと思った経験がありました。

RNならその辺いい感じに作れるかもと思ってみんなの成長というアプリでExpoを試しみて、使い勝手が良い事までは確認してました。

ただ今回はモバイルより、デスクトップアプリのほうが欲しいということに気づき、
Electronで作りやすかったり、PWAならそのままインストールもできちゃうのでWebでいいかなって思いPWAにしました。

なのでマルチブラウザ辛いは解決してないです。
ここは個人開発なので修行と割り切って本業に生かしていきます。
Safari対応が結構めんどいけど、ユーザー多くて無視できない...

マルチブラウザと言っても、現状Chrome、Safari以外はほぼ無視してまっす。

[Apollo Client (react-apollo)]

これもSPAでアプリっぽいUIを作る仕事で、Nuxt.js + Firebaseで作ったときに、Firebaseのデータベース（このときはrealtime database使ってた)をフロントに反映するのが辛くて、同じようにREST APIも辛いだろうなと思って、GraphQLに手をだしたのがきっかけでした。

GraphQLだけでもすごく良いのですが、Apollo Clientがいいのはキャッシュコントールで、
クエリ毎にキャッシュを優先するかサーバーを優先するかを選択できます。

また、キャッシュがあれば再取得しないなどを簡単に書けたり、とにかくこれはSPAのベストプラクティスだなって感じの実装をシンプルに書けます。

Mutationするとキャッシュが書き換わったりするのもめっちゃ良き

正直この辺のこと考えながらSPA実装するのってかなり大変じゃない?ってか大変だった
アプリライクなUIのSPAならApollo Client使おうぜ！

こいつのおかげでこれまたAPIサーバーの負荷はまあまあ抑えられてそうです。

[Firebase Auth, Storage]について

バックエンドはRailsですが、APIサーバー作るのに正直Deviseとか使いたくないです（完）

Twitter連携やら諸々簡単なので選ばない理由がない。
Auth0は選択肢に入るけど今回GCPなのでGoogleでまとめられるし、そこまで込み入った認証必要ないしでこれにしました。

Storageは別に何でもよかったですが、Firebase Authの認証ユーザー単位での権限指定が楽なので使い勝手は良いです。

デザインについて

g4のデザインはレスポンシブのヘルパーとしてbootstrap-gridだけ使わせてもらってます。
めっちゃ便利なのでおすすめ。

それ以外はcss全部自分で書いてます。

コンポーネントファーストで作成しており、Atomic Designの粒度で、Storybook作ってコンポーネントを作ってる感じです。
Storybookは割とぶっ壊れやすかったり、他のビルド設定と競合とか重複したり、辛みもありますが、storyshotsによるスナップショットの差分確認ができるのと、テストの安心感があるので、無いと無いで不安ではあります。