ボクココ

個人開発に関するテックブログ

久々に個人開発をした報告 - 詠みラボ

ども、@kimihom です。

個人開発で「詠みラボ」を作って公開までしたのでシェアしよう。

※ぜひ俳句を作ってください!

www.yomilab.com

サービス概要

某テレビ番組ですっかり普及してきた「俳句」。これを誰もが簡単に作ってシェアできるWebサービスが見つからなかった。

実は以前、私は俳句のAndroidアプリを作ってそれなりにインストールされた経験がある。俳句を詠むのが得意とかではないけど、たまに素晴らしい俳句を見ると、その光景が目に見えて「お〜」と感動することが(稀に)ある。どちらかと言えば俳句を感じるのが好きなタイプである。

そこで、俳句アプリを復活させようとした。ただし、これをわざわざスマホアプリにする必要はなく、単純にWeb上でスマホ/タブレット/PC のブラウザで手軽に読めるWebサービスで十分だと思い、Webサービスとして実装することにした。

俳句に特化して、現在のところ以下の機能を提供している。

俳句を感じる

他の俳人が詠んだ句を感じることのできる機能。何よりも俳句の"縦書き"と、アニメーションにこだわりを入れた。俳人は作った俳句の季語や俳句に対する想いを書いたり、タグ付けをして分類できるようになっている。

詠んだ後、ログインをしていればその俳句に対して評価を入れることができる。"みんなで良い俳句を詠んでいこう" という思いを込めて、ユーザーは感想やアドバイスが書けるようになっている。

ツイート!ツイート!ツイート! Twitterシェアしてもらうことでユーザーを増やしていこうとしている。

俳句を詠む

ログイン後、俳句を自由に作ることができる。俳句に季語を入れることが必須となっていて、川柳や短歌ではなく、「俳句」に特化したサービスにしている。

俳句はあえて編集ができないようにしている。詠んだ俳句を他の人が感じてレビューを書いてくれている中で、その俳句を編集できると他の人が疑問に思ってしまうためだ。同じく俳句の削除もできない。替わりに俳句を非公開とすることができるようになっている。

学ぶ

現状アフィリンクのみが収益となるので、ぜひ買ってください(笑)

私も休みの暇な時に本で学んで俳句を詠もうではないか。

もし他におすすめの本があれば、教えてください。

マイページ

ログインするとマイページが表示される。今まで作った俳句を一覧で見るページと、プロフィール変更、そしてログアウト、退会まで実装済みだ。

俳句を感じている中で、「あ、この人の詠む俳句良い」って思った人のプロフィールを見て、その人の書いた他の俳句を閲覧できるようになっている。※フォローは実装してない

今後

時間のある時にいじっていく程度なので、あまり期待はしないで欲しい・・。

ただユーザーが増えてくれば以下のような機能などを考えている。

  • 俳句の称号機能
  • 称号に応じたグループ分け(そのレベルに応じた俳句詠み)
  • 特定の季語に限定して俳句大会

終わりに

久々に一人で作りきるところまでできて、満足している。こんなことを書くと、以下のような話が出てくる。

「作るまでなら、どんなエンジニアでもできる。その後にユーザーがつくかどうかは全く別の世界。」

はいはい。ゆるくやっていくのでよろしくお願いします。

外部サービスのAPIやWebhook連携をするときに便利なもの

ども、@kimihom です。

仕事を効率化させたり、Webサービスをより快適に使えるようにしたいときに便利なAPIやWebhook。これらを活用する上で必須とも言えるツールを改めて紹介しよう。

API

API のメリット

API を利用することで、こちらから好きなタイミングでAPIを使って外部サービスにアクセスし、そこで情報の取得や作成、更新などができる。それにとどまらず、APIの種類によっては何かしら重要なアクションの実行をさせることもできる。もちろん、WebサービスだったらWebページ上で同じことができるけども、そのWebページで毎回ポチポチとクリックしたりタイピングしなければならない手間が発生する。APIを活用できれば、1つのイベント(アイテム購入や毎日9:00、異常検出など)が発生したら、それ以降でやらなければならないタスクを全て自動で完了させて手作業が不要にさせることができる。今までの手作業にかけていた時間を、他の大切な時間に使うことができるようになる。

APIを使う場合、大抵の場合 Webのリクエストを送ることになる。そこで GET/POST/PUT/DELETE のHTTPメソッドを指定したり、URLにパラメータを付与したり、ヘッダに指定された認証を付与させたりする必要が出てくる。とりあえずどんなAPIなのかな?を確認したいときに、これらをわざわざ考慮してプログラムを0から書いていくのは手間のかかることである。そこで紹介したいのが Postman である。

Postman

Postman を使うことで、URLを指定し、パラメータを付与し、特定のヘッダを入力し、リクエストを送ってみて、そのレスポンスを確認することができるようになる。いろいろなメニューがあるけども、個人的には"New"と"History" 履歴だけで十分だ。

今まで作ってリクエストしてみた履歴が History に表示され、試行錯誤しながら最終的に思い通りのレスポンスが返ってくるように調整していくことになる。

APIで最も苦戦を強いられるのは、OAuth連携時のAccess Tokenの取得だ。今ではPostmanからOAuthに必要な情報を入力して、最終的にAccess Tokenの取得まで自動で取得できるようになっている。ただこれは、OAuthのリダイレクトで渡ってきたコールバックのデータを取得して、APIリクエストに使う必要があったりするので、Postmanだけで完結させることは難しい。最初のOAuth利用は難しく見えるけども、1度理解できれば他のOAuthも似た実装となる。

最終的にOK! となったリクエストは、プログラムのコードに落とし込む必要がある。実装が本当に最初で、どうやってリクエスト送ればいいかわからないというケースでは、Postman側でサンプルコードを自動で作ってくれたものを参考にできる。

Webhook

Webhookのメリット

APIとWebhookの違いは何かというと、APIは自分達が好きなタイミングで"リクエストを送る"ものであるのに対し、Webhookは相手側の特定のイベントのタイミングで、"リクエストが渡ってくる"ものとなる。方向が逆ということになる。

この場合、Webhookで実際に受け取ることのできるドメインとサーバーが必要になる。とはいえ、まず最初にどんなデータが実際に来るのかを試したいというときに、その用意は手間なものである。そこで便利なのが webhook.site だ。

ここで表示される http:// のURLにcurlで実際にアクセスしてみる。

curl https://webhook.site/bde52ca****

この例だとパラメータなど何も付与していないが、何もないリクエストが来たことを自動で検出し、そのリクエスト内容を見やすく表示してくれる。

クエリの中にデータがきているのか、POST の body に入っているのか、どんなフォーマットでリクエストが来るのかなどを確認した後に、実際にそのリクエストを受け取る実装をした方が効率が良いのでおすすめである。

終わりに

私自身、今まで様々なWebサービス連携でAPIやWebhookを実装してきた。

最初は外部サービス連携の利点をイメージしづらいかもしれないけど、実際に1度でも外部サービスと連携をしてみたら、その便利さに感動すら覚えることだろう。

最近は Zapier をはじめとして、連携専門の SaaS などが出てきている。これらを使うのでもいいし、自分で実装するとより柔軟な実装が可能となる。

さて、そろそろ単純作業は終わりにして、よりイノヴェイティブ?なことに頭を使っていこうではないか。

Slack App 移行メモ

ども、@kimihom です。

f:id:cevid_cpp:20220402140412j:plain

旧式 Slack App を公開している場合、2022年5月27日までに対応しなければ、App ディレクトリから除外するよ というお知らせが届いた。本記事ではその対応についてまとめよう。

注意 : 移行期限が 2022 年 5 月 27 日まで延長されました。

App ディレクトリにご登録いただいている Slack アプリについてのお知らせです。アプリで詳細な権限を使用するための変更が行われていない場合、そのアプリは 2022 年 5 月 27 日以降 App ディレクトリから除外されます。詳細な権限によって、アプリが機能するのに必要な最低限の情報のみを要求できるため、セキュリティを心配するユーザーにも広くアプリを使用してもらえるようになります。

2020 年 1 月 1 日にお知らせしたとおり、まもなく従来のトークンモデルが新しい権限モデルに置き換わります。アプリで詳細な権限を使用するための変更が行われていない場合、そのアプリは 2021 年 11 月 18 日以降 App ディレクトリから除外されます。除外されると、ユーザーは App ディレクトリを介してアプリにアクセスできなくなり、Slack による審査が完了していないことが示されます。

いよいよこの期限が迫ってきたこともあり、新しいSlack App申請をすることにした。

今回の申請したSlack Appは、単に サーバー側から Slack にメッセージを投稿するだけのシンプルなものになっている。

それなのに、なぜ Incoming Webhook という最もシンプルな Slack 投稿の方法を使っていないのか? それは、Webhook だけだと @ メンションをつけてユーザーに Slack メッセージを投稿できない というクリティカルな欠点があったためである。このこだわりだけのために、Slack App を作って Slack で @ メンション付きメッセージを投稿できるようにした。

f:id:cevid_cpp:20220402131713p:plain

api.slack.com

v2 で何が変わる?

私がさっとみた限りでは、Block KitApp Home の2つが大きいように思えた。

Block Kit では、投稿するメッセージをよりカスタマイズして、もはや Web サイトのような情報をSlackで表示できるようになる。Incoming Webhooks や Web API の chat.postMessagechat.postEphemeral 権限を使って、実現が可能だ。

App Home は Bot と会話できるような専用のアプリ部屋が作られるようになったようである。

そして、Slack をより安全に使えるようにということで、より細かいスコープが指定できるように変わっている。今回のSlack App移行では、かつての古い影響範囲の大きなスコープを、より細かく定義することが求められている。

また、Slack チャンネルごとに、対象の Slack App を入れるかどうかを選択できるようになった。これで思った以上のチャンネル範囲で Slack App が動作してしまっていた点を解消している。

f:id:cevid_cpp:20220402125012p:plain

URL: https://app.slack.com/apps-manage/****/integrations/installed

v2 への移行ステップ

基本的に以下の英語を頑張って理解しながら実装するしかない。私が調べた限りでは、日本語で細かく解説されたサイトがなかった。

api.slack.com

対応に必要なことは大きく分けて2つ。スコープの更新OAuth v2 への移行 だ。

スコープの更新

普段 たくさんの方に使われている Slack Appの場合、その利用履歴を元に、Slack が移設すべき新しい Slack スコープを提案してくれる形になっている。

アプリ管理ページより、移設が必要な場合は Tools っていうのがサイドバーに表示されている。そこから細かなスコープ定義のアップデートをしていくことになる。

OAuth v2 への移行

これは簡単で、OAuth のアクセス URL を、変更したスコープを込みでリクエストするようにするだけだ。

OAuth

https://slack.com/oauth/v2/authorize?client_id=&redirect_uri=&scope=chat:write chat:write.public users:read&state=___

アクセストークン

https://slack.com/api/oauth.v2.access

最難関、Slack App申請

これで Slack App申請をし直せば完了である。ところが、ここで最大の難解が待っている。

Slack の Security & Compliance の申請である。

まず、Slack Appを連携実行する際、自社のプライバシーポリシーをそのSlack連携ページ内に必ず含める必要がある。

そして、 Data retention policy, Data archival/removal policy, Data storage policy の3つのポリシーに関して、申請時に "英語で" しっかりと記述する必要がある。

これはエンジニアが~ とかの話では全くなく、英語と法律に関してしっかりと理解して対応する必要がある。これに一番時間がかかった。

このハードルを乗り越えた後に、Slack Appを無事申請することができるようになる。

終わりに

今回は Slack Appを v2 へ移行した内容に関して記した。

いろいろな Web サービスと連携することを経験しているが、Slack のセキュリティ関連での申請はあらゆる Web サービスの中でも一番厳しいものだった。

それでも、Slack API を使うことで日常の利用が特段に便利になる。そのためなら、どんな高い壁でも乗り越えていこう。

Heroku CI の導入と得られた結果

ども、@kimihom です。

f:id:cevid_cpp:20211218150554j:plain

この記事は、Heroku Advent Calendar 2021 の 18日目の記事です。ぜひ他の記事も読んでみていただければと思う。

今回は、つい最近 Heroku CI や Pipeline を導入したこと、そしてセキュリティ事情 について記す。

導入前の開発環境

今まで開発効率のテクニックが流行ってるのを聞き流し、目の前の個人開発に没頭してきた。一人でひたすら develop ブランチへプッシュ。STG へは手動デプロイ。最後リリースする時に master(main) へプルリクエストを出して、そのフェーズでの全体コードを一通り確認したら、 master へマージ。この開発体制ならなら以下の開発環境で十分だった。

  • テストはローカル環境で実行
  • git push origin develop で Bitbucket へプッシュ
  • STG 環境へも 手動で git push staging develop:master
  • プルリクエストからのマージ
  • 本番へも git push production master

当時、プライベートなGit環境は有料だった GitHub を導入する必要性を感じず、Trello のついでに 無料で使える Bitbucket のプライベートリポジトリを長い間使い続けてきた。Bitbucket と Heroku の 2つの場所にそれぞれ push する手間はあったけど、その程度だったので問題だと感じていなかった。むしろ、それの方が安心して開発ができた。

きっかけは開発のチーム化

いよいよ開発環境の改善が必要になってきたのは、1人開発から開発チームとして数人のメンバーが加わったことにある。常に私がコマンドを叩かないと Heroku にデプロイできない状態だと、開発効率が下がることになってしまう。

ちょうど、GitHub も無料の範囲内で Private リポジトリを作れるようになっていた。

そこで、まずは以下の流れを基本とすることにした。

  • 私自身、開発の際には develop ブランチから feature, bugfix ブランチなどを切って開発
  • GitHub へそのブランチでプッシュ。この時点で Heroku CI でのテスト自動実行
  • develop へプルリクエストして、問題なければマージ
  • develop の変更があった時点で Heroku CI のテスト自動実行
  • テスト成功すれば Heroku へ自動デプロイ、失敗すれば停止
  • 結果を Slack へ通知

Heroku CI の利用

Heroku CI を使えば 細かな設定はほぼ不要で簡単に上記手順を追加できた。

まず、Staging 環境と Production 環境の Heroku App をそれぞれ Heroku Pipeline に設置する。

f:id:cevid_cpp:20211123153118p:plain

次に プロジェクトのルートに app.json を用意して、テストに必要な環境を記す。

{
  "description": "develop でテスト通り次第 Heroku デプロイ",
  "environments": {
    "test": {
      "addons":[ "heroku-postgresql" ],
      "formation": {
          "test": {
            "quantity": 1,
            "size": "standard-1x"
          }
      }
    }
  }
}

Heroku 側で勝手にどのテストをするか見つけてくれるようで、Rspec の場合は特に何も指定せずにテストが始まっていた。上記の app.json具体的にどのテストをやるかを指定することもできる。 テスト環境でも環境変数が必要になるが、その設定も 通常の Heroku App と同じようにコードからセット or Settings から ブラウザ上でセットできた。

また、テストが通ったら Staging 環境へデプロイの流れも Heroku 側で設定するだけで動作した。

f:id:cevid_cpp:20211123153820p:plain

このおかげで、チーム開発での それぞれが書いてもらったコードをしっかりと読んで、コードに対してのやり取りを GitHub 内でできるようになった。

かつての git push staging develop:master のコマンドは不要になった。"develop へマージされたら勝手に Heroku に上がる" とさえ認識しておけば、git push heroku master しなくても勝手に上がることの違和感はすぐになくなった。

最初は "面倒そうだな" と感じていた新しい開発環境が、ここまで簡単にできるとは思わなかった。これこそ、「さすが Heroku」である。

GitHub の恩恵

それだけでも満足だったけど、GitHub を開くと Security 関連で 通知が出ていた。Dependant alerts というものだった。Dependant alerts のおかげで、Ruby の Gem や Node.js の yarn で使っているライブラリにおいて、秘密性、一貫性、可用性を損なう リスクのあるものが自動で通知が来るようになった。それぞれの通知に段階があり、危険なアラートに関してはすぐ対応を求められるようになった。

さらに、GitHub で各種ライブラリに最新版が出た対た時点で1日に1度の Slack 通知が来るようになった。単にプロジェクトのルートディレクトリに、.github ディレクトリを作り、そこにちょろっとファイル名を記載するだけで動作した。このおかげで、今までは一定の周期で 一括で gem アップデートしてテストしてたのを、毎回新しいリリース内容をチェックして、問題なさそうならすぐに最新へ更新というプロセスを踏むことができるようになった。

Log4j

さて、ものすごくタイムリーに、Log4j の脆弱性に関して話題になっている。これの大きな問題は、自分達は Java と全く関係ないプログラミング言語を使っていたとしても、開発で利用しているライブラリやWebサービス側にも気を配る必要があるという点だ。

まずメインの Heroku 。現状の最新は Salesforce 側のこちらで確認できる。Heroku を使っていれば Heroku Addons 提供者側の詳細を調べていく必要がある。それ以外にも、もちろんAWS の各種サービスTwilio など、それぞれをしっかりとウォッチする必要がある。

障害と似ていて、障害より危険な状態だ。障害は先方が把握をしていて、いつか治るってことがわかる。だから "ひたすら祈る" っていうのが基本だろう。セキュリティに関しても基本は "各種サービスが セキュリティ対応を完了してもらうことをひたすら待つ" ということかもしれない。しかし、いつまでも来ずにスルーされている可能性もある。その場合は こちらから連絡したり、他の外部サービスを探すということが必要になってくる。

今までに経験したことのないような、世界規模での大規模な改修が必要なこの問題。より世界を安全にという意味で、今後こうしたのは増えていくのだろう。その時に、そのままスルーするのか、我ごととしてしっかりと調査していくのか。これが次世代のセキュリティ対応に必要になってくるのかもしれない。

終わりに

おっと、そもそも今回の記事は Heroku CI の話だった。ありがとう Heroku そして GitHub。この両者の密接な連携によって、チーム開発をより効果的に実施できるようになったと肌で感じることができた。

そして "今" まさに問題となっている Log4j 問題。しっかりと各種連携先まで調査し、対応が必要なら対応する。その姿勢を忘れずに過ごしていこう。Heroku ユーザーの間で、各種アドオンの最新情報を共有していければ幸いである。

恐れるな。さぁ立ち向かっていこう!

複数の SaaS を開発すべきでない理由

ども、@kimihom です。

f:id:cevid_cpp:20211122142841j:plain

開発した一つの SaaS が多くのユーザーに使われるようになった時、別のサービスを作り始めるケースがよくある。これらは失敗するので、自らの経験と共に記しておこう。

Atlassian や Basecamp(37 signals) プロダクトを全て使うのか

当時、Atlassian の製品を好んで利用していた時期があった。Atlassian 製品を全て使い切ることが、最適な選択だと思っていた。私が使ったことあるのは、以下のプロダクトである。

  • Jira
  • Confluence
  • Trello
  • Bitbucket
  • Sourcetree
  • Statuspage

現在はさらにプロダクトが増えて、数えただけで16個ある模様である。これらシステム開発に必要になるであろうあらゆる機能を実現したサービスを、Atlassian アカウントで連携させて開発効率をあげる。そんなことができたら、魅力的に見えたのである。

しかし、最近の傾向を見ていると、そうはなっていないように思える。ユーザーは、それぞれベストだと思える SaaS を、外部 連携によって効率よく使うのが当たり前になってきているのだ。Trello を使っているから わざわざ Bitbucket を使う選択をするのではなく、GitHub と Trello を連携すればいいだけなのである。

このことを真っ先に気づいて実行までできたのが、エンジニア間では有名な Basecamp (旧37signals)社であろう。Basecamp が多くの方に使われるようになった後、Highrise, Backpack, Campfire などの他のサービスを次々とローンチしたのであった。その後、彼らが他の企業と全く違うのは、Basecamp だけに絞るために、他3つのサービスをクローズしたのである。

この理由が 他3つのサービスがうまくいかなかったから、と考えるのは単純な話になるであろう。しかし、"Basecamp が作ったサービスだから使ってみよう" と思う人は多くいたはずで、ユーザー数は問題なかったのではないかと推測している。それでもクローズしたのは、まさに 「連携を通して他の例えばチャットメインサービスな Slack と "外部連携" するだけ」 でいいからだと気づいたからではないか。

私のサービス開発の体験

実は私自身、既にある SaaS をより便利に使えるように、連携機能を持った 別の SaaS を開発したことがある。ビジネスにおけるコミュニケーションを解決できるよう、電話の世界から超えてチャット・ビデオの世界に手を入れてみたのだった。今ならその他のあらゆるビデオ通話できるサービスが思いつくだろうが、当時は選択肢として1,2個程度しかなく、しかも競合は英語しかないようなサービスだけだったので、チャンスを感じていた。

数社の利用ユーザーさんが出てきて、続けようと思えば続けることができるところまでいけた。しかし、メインのサービスに比べたらとても少ない利用者数で、連携のメリットを感じている企業はほんの数社だけという現実を知った。そしたら 今や誰もが知っている ビジネス向けビデオ通話サービスが出てきて、ビデオ通話なら "Z***" というのが当たり前になっていったのであった。

結局、電話に集中していくために Basecamp (37 signals) と同じように、新しく始めたチャット・ビデオ サービスの クローズを決断したのであった。

まとめ

現状でいえば、自社の代表プロダクトを磨き続けるだけでなく、他のサービスを提供し始める会社が多くある。正直に記しておこう。これは大抵の場合、他に代表的な SaaS が既にあるものであり、小さくうずくまって そのうちクローズするか、小さく コソコソ続けていくだけになる。

"○○" といえば、"○○"! その地位を目指すために一点集中で磨き続けていこう。そして他のサービスと "連携" して便利にさせていくトレンドに気づこう。

当時の私のように、"国産 SaaS の広げ方の勘違い" を犯すことが 減ることを期待しつつ、外部サービスの連携を今後も積極的に行っていく次第である。

wellcast ウェビナー機能の最新レポ

ども、@kimihom です。

f:id:cevid_cpp:20200902143539p:plain

wellcast のリリースをコツコツ続けてきていて、最近の状況についてレポートする。

ウェビナー中の視聴者とのコミュニケーション

ウェビナー中、視聴者の方はチャットで質問などができるようになっているのだけど、他の知らない視聴者の方もいる中で、なかなか投稿しづらい問題があった。

ウェビナー中の配信者と視聴者の間のコミュニケーションが全くなければ、それは YouTube なりでビデオで見るのと全く変わらない形となってしまう。むしろ 撮った動画を加工などして、より見やすい動画として見てもらった方が良い。だから、ウェビナーをする場合には、視聴者とのコミュニケーションが何よりも重要であると考えている。

そこで、ウェビナー中のコミュニケーションを円滑にするために、以下の2つを実現した。

  • チャットのニックネーム投稿
  • 絵文字による感情反応

チャットのニックネーム投稿

wellcast のウェビナーでは、ビジネス向けに最適化するため、視聴前に名前と会社メールアドレスを入力してもらうことが必須となっている。そのウェビナーを見てもらった後、メールで別途フォローし、より深い関係にしていくことが狙いだ。以前までは、チャットの投稿の時に出る名前を、この入力してもらった名前でそのまま出していた。しかし、それだと本名を姓名で入力してもらってるケースが多く、フルネームがチャット欄に出てきて、ウェビナーを見ている誰もが見れてしまうという問題があった。もちろんそれで悪さするような人なんて BtoB でほとんどないとは思うけど、やはりチャットを打つ側に立ってみれば、不安になるのも無理はない。

そこで、チャットの投稿者名は 視聴前の名前入力とは別に、ニックネームを見る直前に入れてもらうようにした。ニックネームであれば他の視聴者から特定はされないので、より気軽にチャットを投稿することができる。そして、配信者側は正式な名前とニックネーム それぞれを把握することができるので、誰がどの投稿をしたのかを後で管理することが可能だ。

ここがまず YouTube Live などと大きく違う点である。YouTube Live では Google アカウントまではわかるかもしれないけど、仮に今後メールアドレスがわかるようになったとしても、それは gmail の個人メールアドレスだ。単に配信して視聴者を得るってだけなら、YouTube Live でも問題ないかもしれないけど、せっかくウェビナーをやるのに、視聴者の情報すらわからない、連絡が取れないってのは大変もったいないことである。

絵文字による感情反応

これはウェビナーの内容にもよるけども、配信中にチャットで何か投稿するというのは視聴者にとって大きなハードルだ。そもそも質問がない場合もあるし、チャットした内容が問題を起こす不安を抱える場合がある。

そこで、チャットとはまた別に、視聴者が反応できる機能として、絵文字で投稿できる機能をリリースした。

f:id:cevid_cpp:20200902142012p:plain

右下の絵文字をクリックすると、配信・視聴している全ての画面に左下に表現が出てくるようになる。

この絵文字の種類が少ないと思われるかもしれないが、ひとまず今回リリースしたばかりなので2つで様子を見ている。あまり多すぎても ビジネス向けのサービスで本当にそれが必要なのかがまだ明確でないからだ。ビジネス配信で、ハートマークの絵文字がいるのか。もちろんケースによってはあるだろうけど、どんな絵文字を出すのかは慎重に検討していく。

iPhone での視聴

ウェルキャストは アプリを一切使わないので、ブラウザで配信と視聴のどちらもが可能なサービスだ。この手のよくあるサービスは、どちらかは専用のソフトウェアをインストールしないと使えないケースが多い。

実際、つい最近まではそうしないと無理だったという背景がある。iPhone が動画配信(WebRTC)に最適な対応がされ続けていない状況だったからである。日本では大人気な iPhone だが、とりわけ iPhone はこの分野でとても遅れをとっている。

だが iPhone でも WebRTC による配信や視聴が Safari 限定でできるようになってきた。まだ完璧に安定したものではないけど、iPhone の Safari で 配信・視聴できるようになってきた。

今後、iPhone の Chrome でも問題なく使えるようになってきたら、動画配信のために専用の iPhone アプリを入れてもらう必要がなくなることになる。そんな未来が来ることを信じて待っている。取り急ぎ Safari である程度は見れるようになった、という現状だ。

Slack 連携の強化

今までの Slack 連携では、単に 配信が終わった後に そのサマリーが投稿されるだけのシンプルな連携だった。

それがウェビナーを開始した時点でも Slack 通知が届くようになった。これで視聴用の URL が投稿されるので、同じ Slack グループにいる人がそのウェビナーが問題なく配信ができているかを確認しやすくなった。

また、ウェビナーページから視聴の申し込みをされたら、Slack 通知が来るようになった。ウェビナーの申し込み状況をわざわざ wellcast にログインして見る必要がなくなった。

自分で ウェビナー配信をやって、それで必要だと感じた機能を実現した、まさに典型的な改善であった。

終わりに

最近のリリース内容を簡単に紹介した。

ここまで書いて、Zoom と何が違うの?って思われることはあるかもしれない。それは料金や機能、そして国産ツールとして最適化された点を見てみて欲しい。今後、その強みをさらに強固なものにしていく予定だ。

ウェビナー時代はまだ始まったばかり。共にこの時代を駆け抜けよう。

サービス開発の成功を左右する 3つの Why

ども、@kimihom です。

f:id:cevid_cpp:20200802141623j:plain

新しい Web サービスのアイディアを考える上で、有名な 3つの Why が存在する。

  • Why this?
  • Why now?
  • Why you?

どれか一つを満たせばいいのではなく、この3つ全てを満たさないと、サービス開発は成功しない。今回は自分の経験や考えを踏まえて、それぞれ説明してみる。

Why this?

  • なぜ、あなたはそのサービスを作るのか?
  • 現時点で、同じ課題を抱えている人は、どのように解決しているのか?
  • 今の解決方法の何に不満を抱えているのか?
  • 課題を抱えている人は、新しいサービスが出たら今のサービスを解約する決断をするくらい、大きな課題なのか?

思いついたほとんどのアイディアは、「あったらいいね」程度のもので終わる。それらのアイディアの評価を友人に聞いても、同じように「あったら便利かもね」といった感想をもらうことになる。しかし、実際にサービスをローンチしても、「なきゃ困る」レベルのサービスではないので、サービスローンチ後、Twitter に "いいね" がそれなりについて終わる運命を迎える。

そうではなく、何かの対象と比較して、そのデメリットを完全に解決するサービスってのは、使う側からしてもわかりやすい。

例えば、最近だと "mmhmm" がそれに値する。今までのビデオ配信における課題を完璧に解決するサービスとして、熱狂的なファンを掴み取ることができている。別に全員が「なきゃ困る」レベルである必要はない。mmhmm で言えば、ビデオ配信をしょっちゅうする人が 「mmhmm はヤバイ」と熱狂的なファンになれれば、それだけでいいのだ。別の言い方をすれば、ターゲットを絞って、そのターゲットに対して完璧に課題を解決できるサービスかっていうことになる。

internet.watch.impress.co.jp

Why now?

どんなに良いアイディアのサービスであっても、タイミングはとても大事なものだ。

例えば今、どれだけ便利な出社前提のオフィス向けサービスを作っても、使われることはほとんどないと簡単に想像できる。そうした明確な理由がなくても、 Why now? のない、ただ単に作ってみた程度のサービスは高い確率で失敗する。Why now? のないサービスは、同じようなサービスを今まで作ったことのある人が必ずいるはずで、そのアイディアで成功したサービスがないてことは、そのサービスも成功しないのだ。

だからこそ、明確な Why now? が答えられる必要がある。オンラインビデオ通話 がこれだけ流行ったのも、Why now? に対して "在宅で会話する" という 回答を用意できたからだ。

エンジニアからすれば、この Why now? に対して、"最新テクノロジーの登場" っていう部分で回答できるところはある。しかし、当然それはユーザーに対しての回答ではないので、不十分である (が、可能性はあると私もエンジニアだからフォローしておく)。

Why you?

そのサービスが、他の人ではなく、なぜあなたが作るのか。その価値に対して自信を持って説明できる必要がある。

例えば Why you? を明確に説明するために、創業者の深刻な体験を報告するってのはよく使われている手法である。とりわけ命に関わる体験をして、絶対に自分で達成させるという目標を持つというエピソードをよく聞く。

Why you? がなぜ大事なのかというと、自分がそのビジネスを続けられるかどうかという部分に関わってくるからだ。Why you? のないサービスは、初期フェーズでユーザーが全然こない状態を耐え切ることができず、サービスを閉じたりユーザーの来ないまま放置するという決断を迎えることになる。

この Why you? に対する一番シンプルな回答は、「自分があったら必ず使うから」というもので、実は強力なものである。ただ、この「必ず使う」というものにサービス以外の条件(例えば出会い系アプリで女性が必要) だと、その条件に引っかかってうまくいかないケースが多い。

Why you? が明確にないと、そのサービスを長く熱中して改善していくことができない。熱中して改善されないサービスが今後どうなるかってのは簡単に想像できる。

終わりに

サービス開発を始めようって時に、いろいろなアイディアが思いつくけど、この 3 つの Why? を明確に答えられるアイディアってのはなかなか出てこない。

でも、もしこの 3つの Why? を明確に答えられるアイディアが出てきた時には、サービス開発を始めてみる絶好のチャンスである。そのサービス運営をずっと続けられることができ、ユーザーがつく可能性も高いのである。

そもそも、サービス開発のアイディアを考えないことには、この便利すぎる世の中で、アイディア自体思いつかない。毎日の生活の中で、3つの Why を満たすサービスアイディアを考えてみる習慣が必要であろう。

そのアイディアを考え続け、そして実際に行動した人だけが、最後の成功を掴み取ることができる。

私もサービス開発を成功させるために、これからも考え続けよう。さて、あなたはどうするか。

2つの Web サービスを提供する理由

ども、@kimihom です。

f:id:cevid_cpp:20200527164016j:plain

ご存知の方も多いかと思うが、私(弊社)は2つのサービスを提供している。

www.callconnect.jp

www.wellcast.in

Web サービス開発でよく言われる話としては、「1つのサービス開発運営に集中しよう」とある。そんな中、なぜ私がこの2つのサービスの開発を続けているのかについて、理由をまとめてみる。

同じテクノロジーを極める

CallConnect と wellcast、全く違うサービスに見えて、実は裏側で動いているテクノロジーは全く同じだ。キーワードは「Twilio」、「Heroku」、そして「WebRTC」だ。ここ5年以上、私がひたすら磨き上げ続けている技術分野である。

CallConnect で WebRTC を実際にビジネスとして提供していると、様々な問題が発生する。

  • 利用ブラウザ(IEなど)で電話(WebRTC)が使えない
  • ネットワークの不安定さによる通話品質の悪化
  • "同時に" 何かをやった時の挙動

wellcast では、これら WebRTC をビジネスでやる上で発生するあらゆる問題を経験した上で、Webビデオシステムとして提供している。wellcast の開発やテストに際しては、ポイントを絞って徹底して行われている。wellcast は CallConnect の開発を経験した私でなければ、作ることのできなかったサービスだと自負している。

また、wellcast でも「音声」は非常に重要なテーマだ。今は CallConnect で得られた音声技術を wellcast に注ぎ込んでいるが、ゆくゆくは wellcast で得られた音声技術を、CallConnect にも適用するといった改善が行われる予定だ。こうした相互の開発において、それぞれをよりスピーディに、より正確に改善させていくことができると考えている。

サービスをシンプルに保ち続ける

サービス開発の一つの選択肢として、「1つのサービスに機能を注ぎ込む」ってことがある。私のサービスで言えば、「CallConnect を電話だけでなく、ビデオ通話もできるサービスにしよう」といった具合である。

裏の技術的には同じなんだけど、私はサービスの機能をどんどん追加していって複雑にすることを良いとは思わない。単に電話の機能を使いたい方が、そこにある全く使わないビデオやチャットの機能が画面に出続けるというだけでもストレスだし、全く使わないのに追加の料金を支払うということにも納得がいかないと考えている。

CallConnect といえば "ブラウザ電話" で、wellcast といえば "Web ビデオ"。サービスの印象を覚えてもらって、その印象に恥じないシンプルな機能提供を、これからも続けていく。

機能の豊富さとしての課題解決として、今後 CallConnect と wellcast を連携して、より便利に使えるようにできたら良いなと思っている。どちらか一方を使うだけでも便利だけど、両者を使えばもっと便利になる。2つのシンプルなサービスを提供しながら、連携として機能を提供することで、そうした未来を描くことができる。

自分たちが使うサービス

CallConnect と wellcast に共通する点として、「私たちが必要だから作った」というのがある。会社を始めたての頃、電話があることが原因で、それぞれがリモートで自由に働くことができなかった。また、電話のログを残せず、誰が何を話したのかが完全にブラックボックスになっていた。それでも顧客サポートのチャンネルとしての電話の大事さをわかっていたので、電話をなくすという選択ではなく、電話を改善するという選択をしたのだった。

しばらくして多くの顧客を CallConnect で抱えるようになり、CallConnect の顧客に対して新機能のお知らせや、実は知られていない便利な機能などを紹介したいという思いが強くなった。そんな中で当時は "ウェビナー" 自体 メジャーではなかったけど、リモートで顧客に伝えるという CallConnect に似たモチベーションとして開発が始まった。

今では wellcast でウェビナーを開催するだけでなく、社内の朝と夕方の定例ミーティングでも wellcast を使っており、今後はリードや顧客との個別面談でも wellcast を積極的に活用していく。

私たちが必要なものを、私たちで作る。そんな単純なモチベーションが、2つのサービス提供の大きな理由となっている。

終わりに

もちろん、1つのサービスだけに集中すれば機能開発も先に進むことができるけど、その分 視野を見失うことにもなりかねないし、サービスが複雑になるリスクもある。

私は 1つのサービスを提供し続けるだけでは得られないメリットを、2つのサービスを運営することで得られている。

今後も 2つのサービスの成長に期待しておいて欲しい。その期待を裏切らない開発を、これからも続けていく。

面談、ウェビナー用途の Web ビデオシステム wellcast 技術

ども、@kimihom です。

f:id:cevid_cpp:20200524174745p:plain

先日、Web ビデオシステム wellcast をリリースした。wellcast における技術面の工夫に関して、本記事で紹介していく。

www.wellcast.in

ビデオ通話の品質

今では色々なビデオ通話のサービスが登場してきて、読者の皆さんも一度は誰かとビデオ通話をした経験があるかと思う。そんな中、相手の声がまともに聞こえなかったり、ビデオがカクカクになってしまったり、こうしたビデオ通話におけるトラブルは付きものである。そんな中でも、まともに会話のできるビデオ通話のサービスが、安心して使えることは間違いない。

今回の wellcast で一番力を入れているのは、まさにビデオ通話品質の部分だ。

具体的にどんな工夫がされているのかというと、ビデオ通話の中で「どれが一番優先度が高いか」を意識されているという点がある。ビデオ通話の中で最も大切なのは、映像ではなく "音声" だ。ビデオ通話の音声品質が悪いと、相手の言っていることが途切れ途切れになってしまって会話すらできないビデオ通話となってしまう。そのため、wellcast ではネットワークが弱い環境でビデオ通話をする場合、映像の品質を落としてでも音声の品質を保とうとする機能が搭載されている。

それ以外にも、例えばウェビナーでスライドシェアをしている場合、音声の次に大事なのは、スクリーンシェアしている資料映像だろう。もしインターネット接続が不安定である場合、スクリーンシェアをしている映像の品質を保つために、他のカメラの映像などの画質を落として、その画質を落とした分をスクリーンシェアの方にネットワークを費やすといったことが裏で行われている。

ミーティング中では、そもそも途中でネットワークが途切れてしまうことも起こり得る。wellcast ではネットワークのトラブルが起きた時にも、なるべくビデオ通話を続けられるようになっている。ネットワークが途切れた際、数秒間のあいだ再接続を試みる機能が搭載されており、もしネットワーク接続が復活すれば、そのままビデオ通話が再開されるようになっている。

これらのビデオ通話におけるネットワークの工夫により、誰でもできる限り問題の起きづらいビデオ通話を実現している。もし他の ビデオ通話サービスで問題が起きた場合に、wellcast のビデオ通話でどうなるかを試してみて欲しいと思う。

ビジネスの現場におけるビデオ通話の最適化

実際に会うリアルのミーティングでは、記憶を頼りに覚えていたことを情報として書き起こすか、書記担当を用意してひたすらメモを残してもらうなどの対応されていることだろう。これらの対応は、情報が完璧に残らないため、言った/言わないの問題になりかねない。そして振り返りができないのでミーティングの何が良くて何が悪かったのか、こうした改善が難しい。

リアルのミーティングでは困難な、オンライン面談における録画機能は、ビジネスの現場で役に立つことだろう。また、相手のビジネスメールアドレスを含めて管理ができるため、ミーティングを終わった後のサポート・フォローもより正確になる。これらがバラバラで管理されていると、単にリアルで会うのではなくオンラインで会うってだけの違いとなってしまう。

ビジネスの現場において、単に会話をするという目的だけで、BtoC のビデオ通話サービスを使うという選択肢をするケースもあるかもしれない。しかし、それでは誰が、いつ、どんな会話をしたのか、完全にブラックボックス化されてしまい、Web オンラインで通話しているメリットをほとんど活かせてないことになる。

wellcast ではミーティング録画機能の標準搭載だけでなく、ミーティングが終わった後に、自動で Slack 通知がされたり、CRM へ相手の情報が自動で書き出される "連携" 機能がある。ミーティングのログを残すことを wellcast に任せることで、他に集中しなければならない仕事に時間をさくことができるようになる。

"ビジネス" における最適なビデオ通話。wellcast はそこを目指してリリースされている。

ウェビナーの申し込みから視聴までの最適化

ウェビナーは、開催する際にいつ、どんな内容のウェビナーをやるのかを事前にお知らせして、希望者に申し込んでもらうような仕組みが必要であることが多い。しかし、BtoC のビデオサービスではこれらの申し込み機能が存在しないことも多く、単に時間になったら SNS などで URL を共有して始めるだけといったものもある。

ビジネス用途に最適化された wellcast では、ウェビナーで事前に専用の申し込みページを作れるようになっている。その申し込みページは、 Rails6 の "ActionText" によって、マークダウン記法のようなフォーマットを覚える必要すらなくなる。申し込みページには、ツールバーとして文字を強調したり、項目としてまとめたり、ファイルをアップロードできたりする機能が搭載されていて、まるで Microsoft ワードの文書作成のような手軽さを実現している。

f:id:cevid_cpp:20200524180410p:plain

さらに、申し込みフォームには名前、メールアドレス だけでなく カスタム項目 を追加することが可能になっている。ここで、ウェビナー参加者に事前に聞いておきたい内容を聞いておくことが可能だ。例えば電話番号、会員ID、簡単なアンケートなどが考えられるだろう。この柔軟な参加申し込みフォームは、BtoC 向けのウェビナー配信サービスではなかなか提供されていない機能である。

そして wellcast のウェビナーには、事前申し込みページの PV 数、実際に申し込んでいただいた予約者の数、当日実際に見ていただいた視聴者の数がまとめられているため、今後ウェビナーの視聴を増やすためにはどこを改善すればいいのかを簡単に確認することが可能だ。

最後に、ウェビナー後にアンケートを取る機能が標準で提供されている。アンケートによって実際のウェビナーの内容自体も、どこを改善すべきかが把握できるようになっている。

終わりに

オンライン面談、そしてウェビナーの時代へようこそ!ぜひ wellcast を使ってオンライン上でのビジネスを飛躍させていっていただければと思う。

30日間、無料で試すことができるので、是非この機会に新しい wellcast を試してみて欲しい。

開発スピードを保ち続ける唯一の方法

ども、@kimihom です。

f:id:cevid_cpp:20200320231733j:plain

先日、顧客からのフィードバックを元に機能追加・改善をしたところ、「そのスピードが羨ましい」とお褒めの言葉をいただいたので、本記事では私の思う開発スピードを高速に保つ方法を紹介してみよう。

サービス担当者が長くサービスと関わり続ける

サービスを 0 から作った人が、そのサービスを長く運用し続ける。これこそが開発スピードを高速に保ち続ける上で最も重要な点であると考えている。

私はまさに今、 0から作ったサービスを運営し続けている。今まで作ったソースコードの全ての関係を把握しているので、ここのコードを修正すると、他のどのコードに影響を受けるかが全てわかる。だから、そもそもトラブルが起こりにくい。仮に起こったとしても、どこが問題かが一瞬でわかるのですぐに修正できる。コードの影響範囲がわかると、コードを削除するという決断をしやすいという点がとても重要だ。影響範囲がわからないと、コードを削除する判断ができず、とにかく過去の酷いコードを残し続け、似たようなコードが量産されていく。そうして開発スピードはどんどん下がっていくのである。

最近、大きな組織にいるエンジニアがソースコードの削除を自慢するようなツイートをよく見かける。Git での +20, -1600 の差分をシェアしている。とても素晴らしい仕事だ。これを可能にしたのは、テストコードの存在だろう。正しくテストコードを書けば、失敗した時点で何かおかしな修正をしてしまったということを把握できる。ただしテストコードが完璧であり続けることは不可能だ。必ずどこかで抜け漏れのテストコードが出てくるし、そのテストコードを細かく書き続けるための追加の時間が必要になる。

サービス開発を最初からずっと担当していれば、そもそも最低限の需要なテストコードだけを記しておくだけで十分だ。テストコードに時間をかけるより、その分、新しい機能開発・改善に時間を費やすことができる。しかも、書いたコードはバグが少ない。全てのソースコードを既に把握しているからだ。

これは他の競合や大企業が類似サービスを作った時でも確実に強みになる。彼らはエンジニアがコロコロ変わっていく環境に身を置き続けている。コロコロ変わる前提でサービスを開発運用しないといけないため、開発速度よりもバグが起きづらい環境を維持し続ける必要がある。システム安定性を無視してスピード重視を保ち続けると、必ず深刻なトラブルを引き起こす。そして新しく入ったエンジニアを責め立て、次々とエンジニアが辞めていくわけである。そんな企業が運営しているシステムと、サービスを作った本人が運営し続けているサービスとで、あなたはどちらのサービスを使いたいと思うだろうか。前者を選ぶ場合には、どうぞ大企業の作っているでっかいシステムを使っていただければと思う。

リスクをどう考えるか

この話をすると、「でもその専任の人がいなくなったら、さらにリスクになるよね」というレスポンスを多くいただく。これに関しては、その通りである。リスクをとってエッジを利かせてより良いサービスにするか、リスクを取らずに特徴のない普通のサービスを作るかのどちらかを選ぶ必要がある。

本記事の文脈で、投資を受けて一気にサービスを拡張する選択をすることは、リスクだろうか?私からしたら、これはエンジニアにとってはリスクを取らない安全策だと考えている。その得られた資金でエンジニアを大量に採用し、一人が辞めても問題なく動き続けるシステム運営をする決断をしている。リスクを取らない選択をした結果、どんどん新しく入ってきた人を教育するのに時間をかける。誰かが書いたコードをメンテナンスすることでサービスが大きくなってどんどん開発スピードが落ちていく。そんな環境に身を置くエンジニアは、かつて自分の思い通りにプログラムを書いていた時期を懐かしく感じる。そして時には辞め、時には給与を優先して仕事のモチベーションを下げる。

とはいえ、エンジニアの理想を実現できる、作った本人が運営をし続けているサービスは少ない。これは 0->1 が好きなエンジニアと 1->10 が好きなエンジニアの性格の違いだろう。0->1 エンジニアがそれなりにユーザーを抱えて、メンテナンスの仕事も入ってきたり、新しいことにチャレンジできなくなってきた途端、やる気をなくして去っていく。そうしてまた新しいサービスを他で作って、また辞めていく。そうした0->1 エンジニアは、実は最新技術を追ってカッコよく見える裏で、開発チームにはとんでもないデメリットを残していっているわけだ。でも、これもリスクに対する一つの考え方なのである。

終わりに

私が テクノロジーの最新を追い続け、真似されないスピードで開発を続けられているのは、作った本人が運営をし続けているからである。この体制が終わった瞬間、開発スピードは極端に落ちる。そうして他のよくあるサービスの一つとして埋もれていく。

仮に何かしらの理由で私がいなくなった時のリスクは高い。それでも、そのリスクを受け入れたからこそ実現できた理想の環境が今ここにある。運営を信じてサービスを使い続けてくれている顧客のためにも、私は続けていく。そうしてこれからも尖ったサービスとしてあり続けていこう。

SaaS におけるカスタムダッシュボードの実装

ども、@kimihom です。

f:id:cevid_cpp:20191201182224j:plain

SaaS を開発していると、指標管理をしたいニーズが多く出てくるかと思う。そんな中で、どんな指標を掲示するかって部分は、企業の文化や目標によって違うため、企業ごとに最適な指標を掲示できるようにしたいという流れになることが多くあるだろう。

今回はその課題を解決するためのカスタムレポート(ダッシュボード)機能に関して技術的な部分にフォーカスを充てて解説してみる。


CallConnect カスタムレポート(ダッシュボード) デモ

表示形態の保存

まず、好きなように項目を表示できるように、設定データを設計しよう。全てのレポートで共通の項目と、レポートごとに違う項目を分けて考える必要がある、ここでは以下のようなデータ構造サンプルを挙げておく。

  • order (順番)
  • width (横幅)
  • height (高さ)
  • title (タイトル)
  • period (集計期間)
  • extra (レポート個別の設定項目、 JSON 形式)

個別の項目は JSON として切り出すことにした。そうしないと無駄に NULL の項目が大量にできてしまうのと、今後レポート項目を追加するときに柔軟に対応ができなくなるためである。最近はリレーショナルデータベースでも簡単に JSON 保存と管理ができるようになって、便利なものだ。

上記 動画デモでは、シンプルな横幅、高さの設計となっている。レポートの各高さは共通で、横幅は 1/4 か 1/2 かのどちらかしかない。必要に応じてそれぞれの width, height も DB に保存しておく必要があることだろう。

extra のデータ保存を、それぞれのフォームに落とし込むのが若干難しい。フォームで保存方法を選ぶと、グラフや表などの選択に応じて、選択項目を動的に変えていく必要がある。それは今回の話とは外れるので頑張って実装しようとだけ書いておく。動画にあるように、フォームで選択項目を変えるたびに、右側のプレビューを動的に変えるようにしてみよう。そうすれば都度都度作って確認して編集して・・みたいな面倒な手間を省くことができる。

順番の並び替え

直感的に各レポートの順番を移動できるように、ドラッグ&ドロップの実装をしたいところだ。このような実装を、ライブラリを使わずに自分の力だけで実装できるか。そこがフロントエンド 開発の実力の見せ所だ!今回はあくまで実装の大枠だけ、解説してみる。

まず、それぞれのレポートの場所を JSON で計算して保存しておくようにする。この情報をベースに、ドラッグ&ドロップしたときにどこに灰色プレビューの置くポジションを表示させるかを決定させる。

[
  { id: 1, left: 0, top: 0, width: 120, height: 120 },
  { id: 2, left: 140, top: 0, width: 120, height: 120 },
  { id: 4, left: 0, top: 140, width: 120, height: 120 },
]

ドラッグ時に、上記 JSON のポジションを満たす条件が出た場合に、各レポートの並び替えをして、改めて位置情報 JSON を計算し直す。実際はドラッグしている間に移動先候補の灰色プレビューをどう表示させるのがユーザーの操作に違和感を与えないか、工夫が必要になる。

`mousemove` 時のイベント
  ドラッグしているレポートを移動させる
  それぞれのレポート位置に対して {
    もし対象のレポート枠内に入っていたら {
      移動先候補の灰色プレビューを移動させる
      レポートの場所を再度計算
    }
  }

そして、ドロップした時点で、移動を確定させる。

`mouseup` 時のイベント
  移動候補先のところに、ドラッグしていたレポートを移動
  移動先候補の灰色プレビューを隠す
  各レポートの位置を API を通じて保存

なぜ独自実装が必要か?

「こういうのはどっかのライブラリ使えば良いっしょ」って考える方は多いかと思う。しかし、このドラッグ&ドロップによるカスタムレポート(ダッシュボード) は、サービスに応じて柔軟に実装を最適化する必要があるため、ライブラリでなんとかならない部分が必ず出てくる。従ってライブラリでなんとかならない部分だけ、ライブラリを拡張した実装をするという判断になることだろう。その判断をする前に気づいて欲しい。自前でゼロから実装した方が速く、そして無駄なコードを読んだり管理したりする必要がなくなるのである。

パッと簡単に実装できるような JavaScript コードでないことは、間違いない。でも上記デモ動画のケースでは200行ほどの JavaScript で実装できる。試行錯誤の果てに200行だけ管理すれば良いコンパクトなソースコードができあがる。しかも、自社 SaaS に最適な形式でね。

終わりに

今回は SaaS の開発で必要になるケースが多いであろう、カスタムダッシュボード(レポート) の実装例について紹介した。こうした動的なHTML要素のカスタマイズってのは JavaScript 実装の腕の見せ所だ。ぜひそれぞれの SaaS に最適な形式で、ダッシュボード(レポート) が作成できるようになって欲しいなと思う。

私はこうして自社の SaaS をより良いものに改善し続けている。

今までのサービス開発と得られた学び

ども、@kimihom です。

f:id:cevid_cpp:20191116135824j:plain

今まで、"サービス開発で意識すべきこと" という観点での記事が多かったけど、私が実際に開発してきたものと、そこでの具体的な学びという観点から記事を書いてなかったので書いてみる。

サービス開発に夢中だった学生時代

コア読者の方ならご存知の方もいるかもしれないが、私のサービス開発の起点は大学生の頃からだった。

インターネット黎明期とも言えたこの時期に、私は"自分のサービス開発で成功させること"を夢見てプログラミングの勉強を始めたのだった。私が初めて作ったサービスは、ASP.NET を使った「投資サークルのWebサイト」だった。友人を集めて投資サークルを始めようぜと持ちかけ、そこの Web サイトを私一人で構築した。そこは単なる掲示板のようなサイトだったんだけども、プログラミングを学んで初めて全て自分の手で構築するという経験は貴重なものだった。プログラムはコピペの連続、サーバーもどこにおいたのかすら覚えていないくらいの初心者感たっぷりの Web サイトだったけど、そこで自分の作ったサービスを誰かに使ってもらうってことの喜びを感じることができた。結局、このサークルは初回のノリだけで、数ヶ月したら活動が終わってしまって Webサイトもクローズする結果となった。

この開発で自信をつけた私は、ガチで Web サービスを作ることにした。それが、「ゴルフオンラインレッスン」である。私自信、当時はゴルフにハマっていただけど、講師をつけたレッスンは高すぎるってことで新サービスの開発をすることになった。このサービス開発にあたって、私以外に当時大学の同級生で私以上にプログラミング能力の優れた2人を招待して万全の体制で開発を始めた。そして実際にレッスン予約ページや、実際に携帯メールを通じてゴルフスウィングのビデオを送付し、それを先生がWeb上でアドバイスできるようなサービスを構築できたのである。これが普及すれば、間違いなく私は使いたい。そんな Web サービスの完成だ。

だが、このサービスは全く普及せずに終えることになる。作った後にどうやって人を呼び込むのかが全くわからなかったのである。ゴルフの先生は私の知人宛で見つけることはできたのだけど、私以外のゴルフをするユーザーにどうやって案内すればいいかわからず、そして私だけが使えればいいやというモチベーションだったので、そもそもユーザー獲得に熱心になれなかったのだった。何より一学生が作った遊び感覚に近い Web サービスだったので、私自信サービス開発を絶対に成功させるという意思が弱かったように思う。

学生起業ってのも選択肢の一つとしてなくはなかったけど、学生時代に成長見込みのある Web サービスを作りきれなかったため、就職して学び直す決意をしたのであった。

R時代 (2011~2015年)

就職を決めた私は引き続き「自分でサービス開発をして運営できるようになりたい」という強い意志を持って仕事に取り組んでいた。この時期のブログを見返しても、やはり個人で開発していた記録が多く残っている。

この時期では時間を取れるのが土日程度だったため、とにかく手がかからずに手っ取り早く小銭稼ぎできそうな何かを探し続けていた。まずやってみたのが「海外ブログ翻訳サイトの大量生産」である。海外で写真の美しいブログを掲載しているWebサイトをかたっぱしから取ってきて、翻訳して記事として勝手に書き出される仕組みを作ってみた。今になってみれば「そんなことやっちゃダメだよ」と思うこのアイディアだが、いかんせん日本語の翻訳結果があまりにも雑で、PVは放置しててもずっと低いままだったので結局全てクローズすることになった。やはり単に金儲け程度の気持ちで作ったサービスは成功しないんだな、ということを学んだ。

その後、エンジニアならきっと誰もが作るであろう「出会い系アプリ」を作り始めることにした。この時期からスマホが一般的に普及するようになり、スマホアプリ開発のニーズが大きくなってきた時期だったため、スマホ用の Web アプリを作ってみた。そのアプリの当時 革新的な部分だったのが、位置情報を用いた近くにいる人との出会いができるアプリであった。これも最終的には全部作りきって広めていくぞってフェーズになったんだけど、改めて「ユーザー獲得の方法がわからない」ということでユーザーが全く集まらずに次第に開発のモチベーションを失ってしまった。当時からプログラミングしかしてなかった私が、どうやって女性のユーザーにこのアプリを使ってみるようにお願いすることができたのだろうか。そんなことは当然無理で、一緒に協力してくれそうな仲間を見つけようというモチベーションもなかった。

失敗に失敗を重ねてきたわけだけども、サービスを作りたいってモチベーションはずっと残り続けていた。それは、開発するたびに技術力が上がっていって新しい発見があり、次はこうしようみたいなサービスの成功とは別の部分での成長に喜びを見出していただからだった。だからサービス開発に成功しなくても、プログラミングなどの技術を学べればいいや程度の気持ちでゆるく個人開発を続けることができたのである。

仕事で Android アプリを担当することになった私は、個人開発でも Android アプリを作ってみることにした。最初はゴミのようなアプリを量産していたけど、仕事にも活きるスキルであったため全く問題がなかった。そして仕事で得られた Android アプリ開発の知識を、個人アプリ開発に適用してみたところ、ついに初めての個人開発での成功を迎えることになる。今でも公開されている 15万DL以上、評価☆4.6 のアプリなんだけど、このアプリでの成功ポイントは「リリース直後から自分が毎日使えるアプリ」だったというのと、「ユーザーが新しいユーザーを集めてくれる仕組み」を構築できたというのが大きな要因だと考えている。私が使うということは、リリース後もアプリ開発を継続するやる気があったし、私が得意でないユーザーの獲得は Google Play での検索や、アプリからの Twitter, Facebook シェアによって私が何もせずとも広まっていく仕組みを構築できたのだった。

"起業しても成功するアプリ・サービスを絶対に開発できる" そういう確信の持てた私は、起業を決意したのであった。「マネタイズ」っていう大事なことを気にせずに、ね。

起業 (2016 ~ Now)

R時代から、起業したらどんなサービスを作ろうかと考えていた。せっかくなら思いきって世界を変えるような何かにチャレンジしたいという思いが強かった。

そんな思いから、当時 Uber が海外で大ヒットしてアメリカの交通を変えているニュースを見て、これを日本でも展開したら面白いんじゃないかと考えた。私が日本の Uber を作りましたって言えたら、すごく誇らしいなというモチベーションだった。今までのサービス開発の学びから外れているというのは、ここまで読めばきっとわかるだろう。もしこのアプリがリリースされたら私は乗る専門で使うかもしれないけど、そもそも乗せてくれる人がいなければ、私が使うってことには決してならないのだ。技術的には当時最先端のものを駆使して、私でもよくやったと思うくらいのものができあがったんだけど、結局私がそのアプリで本格的なライドシェアを経験をすることなく、閉じる決断をした。

作ったら私が使うっていうモチベーションがあったとしても、それが他のユーザーありきのサービスである場合には間違いなく失敗している。こういうのは少人数で開発するのではなく、一気に資金調達して大人数でチャレンジする領域なんだということを理解した。それをやっても良かったんだけど、私は成功より自由を選びたかった。

そこでライドシェアのアプリをクローズさせ、全く別の路線でサービス開発に挑んだ。それが、SaaS の開発である。おかげさまで、作った SaaS は現在多くの企業さんに利用いただいている。私の当時夢見た"自分のサービス開発で成功させること" に向けて、確実に一歩ずつ向かっていけているという自信がある。この目標の実現のために、今後も SaaS の開発を継続・改善していく次第である。

終わりに

サービス開発 成功の条件。ここまでの学びをシンプルにまとめると、以下の3つである。

  • 作った自分が確実に使うか。
  • 他のユーザーありきのサービスではないこと。他にユーザーがいなくても自分が使えるもの
  • ユーザーが新しいユーザーを招いてくれる仕組み

これらが揃えば、サービス開発は成功させられる。それは私の10年にも及ぶサービス開発によって得られた教訓であることが、この記事を読んで理解いただけたはずだ。

なお、文中に出てきたサービスは過去のボクココ記事を遡ると、詳細を見つけることができる(かもしれない)。「ボクココ」は私のサービス開発の今までがまとまった貴重なブログである。

サービス開発における「ターゲットを絞る」

ども、@kimihom です。

f:id:cevid_cpp:20191027230840j:plain

最近とある本を読んで改めてターゲットを絞ることの大切さについて考えている。

ターゲットを絞ることの大切さ

以下のような判断をしてしまった経験はないだろうか。

  • 「ターゲットを絞ると、顧客を絞ってしまってインターネットの誰でも繋がるってことの良さを活かせないじゃないか!」
  • 「AさんとBさんそれぞれに適した案にしよう!Aさんがめっちゃ良く感じてBさんは微妙ってのは良くない!」
  • 「適したターゲットじゃない人はお断りする?たまたまページを見て導入してくれたらそれも成功じゃん」

安心して欲しい。私も同じようなことを考えた時期はある。これらがなんでダメなのか、考えてみよう。

まず一つ目にターゲットでないユーザーがサービスを使い始めてくれたところで、合わない想定や使い方をされることによって余計なサポートコストがかかる点がある。合わない使い方をされるのでそのユーザーが気に入って今後アップセルすることもまずない。微妙と思われて悪評が広まるリスクもある。 そんなユーザーから問い合わせが来て、そのユーザーも満足させたい!って展開になってしまうと結局誰にとって最適なサービスなの?という謎に多機能なサービスができあがる。

100人が「まぁまぁ」ってサービスを目指すと、その100人は今後アップセルなしの低価格のままなら使い続けるほどの低いヘルススコアで終わりだ。その反面、10人が「こんなサービスを待っていた!」ってサービスを目指すと、その10人は今後アップセルもするし、他の方に紹介までしてくれる高いヘルススコアまで成長する。短期的なユーザー数で勝負すれば前者の方が良いけど、その後の急成長って意味では後者に軍配が上がる。

初めて何かのサービスを見たときに、「Aさん、あなたのためのサービスです!」「Bさん、あなたのためのサービスです!」と2つ書かれた時点で、「別に私のためのサービスじゃないじゃん」っていう思考が入って選定が終わる。Aさんだけのためって書いてあるのに合わない機能とかの矛盾があると、納得してもらうまでいかない。

二つ目に、天下を取れないという点がある。ターゲットを広めてしまうと、その業界の多くの競合と比較されるようになる。じゃあ多くの競合と比べてあなたのサービスの利点は何?って言われたときに何も答えられなくなる or ちょっと良い程度の何かレベルで終わる。人が今使っているサービスを乗り換えてまでそのサービスを新しく使い始めるという大きなハードルを超えることができず、ユーザーが全然獲得できなくなる。

その反面、ターゲットを極限まで狭めることで天下をとれる可能性が格段に上がる。「この業界のこの人たちだけにとって最適なサービスです」ということを伝え、他のサービスでは解決できないその特定のニーズを満たすことができれば、まずそのターゲット内で天下を取ることができる!しかも顧客満足度の高いロイヤルカスタマーだ。そんな方々と協力しながら次なる成長を遂げることができる。もちろん同じ業界に広めていくこともできるし、その評判を聞きつけた他の近い業界から、同じように最適化を進めていくこともできる。

ここで言いたいのは、「今誰もが使っている人気のサービスがあったとしても、ユーザーのターゲットを極限まで狭めてその人たちに最適なサービスを作ることで、狭めたターゲットの人たちにとって人気サービスよりも便利だと思ってくれるサービスを確実に作れる」ということだ。ここを諦めて業界No1 サービスが既にあるし諦めるみたいな判断をするのは時期尚早だ。

極限まで限定したターゲットが独自で抱えるペイン(課題) は何か。そこを徹底的に調べて革新的に解決するサービス。そんなサービスが、未来の急成長サービスとなる。

終わりに

サービス開発において、「ターゲットを絞ろう」とはよく言われているが、実際にそれを忠実に実行できているスタートアップは、私の観測範囲ではうまく行っているように見える。ただ現状は「これって結局どんなサービス? 」って思ってしまうようなサービスのほうが多いと感じる。

急成長という目標を掲げることで、ターゲットを広めてしまう。それが失敗の始まりだ。急成長したいなら、ターゲットを極限まで狭めよう。このジレンマを理解し、超えられたサービスだけが急成長を成し遂げることができる。

私が投資とか応援とか就職とか考えるなら、ターゲットを徹底的に絞って最適なサービスを提供するサービスを選ぶかな。それはきっと、未来のあなたが作ったサービスなんだと思う。

SaaS のアプリストアの可能性

ども、@kimihom です。

f:id:cevid_cpp:20190726153003j:plain

今回、Heroku Meetup で Zendesk App について LT してきたので、それに関連して SaaS アプリストアについて記事としてまとめる。

資料

Zendesk App を Heroku で作ってみた話

アプリストア の可能性

BtoC で「アプリを作って公開」ってなると、Android の Google Play か Apple の App Store の2択くらいになるだろう。しかし、BtoB に目を向けると、実は多くの アプリストアが存在する。

BtoC は100万DL とか、そういう数字の部分では確かに夢がある。

BtoB のアプリストアの場合、BtoC に比べてインストール数は少なくなるけど、ちゃんと使うってなった時に契約や支払いをした前提であることが大きな違いになるだろう。「無料アプリで広告載せて~」っていう BtoC の戦略とは根本的に異なる。

そして、まだ国内ではこうしたアプリ開発に注力している企業が少ないというのも、大きな特徴としてあるだろう。私は上記のアプリストアのほとんどにアプリを公開しているが、HubSpot や Intercom など最近国内でも話題になってきたサービスでは国産アプリは現状ほとんどない。むしろ私の作ったアプリしかないんじゃないかと思うくらいだが、今後こうしたサービスも発展とともに国産アプリが増えていくことだろう。

んで、BtoB のアプリストアは BtoC と違って作ったものを他のアプリストアにも同様に配布することができるのが大きな特徴だ。 Android で Google Play ストアに公開するには Android 独自で作る必要があって、それがうまく行ったとしても App Store にはまた iOS 独自に作る必要が出てきてしまって大変効率が悪い。BtoB ではそういうことがないのである。つまり、一つ枠組みを作った企業が、これらの BtoB アプリストアのシェアを独占してしまうとも言える。

こうした可能性を感じている企業が今、どんどんとこれらアプリストアへサービスを公開しているという訳だ。

求められる能力

ここで求められる能力は、"API, API, API" である。それぞれの企業が提供する API のドキュメントを読み込み、最適な形としてアプリに落とし込む必要がある。

ほとんどの場合、OAuth 認証で アクセストークンから REST API の JSON レスポンスでアクセスできるので、技術的に困るという部分は少ないだろう。ただ、それぞれのサービスにそれぞれの特徴があるので、それに合わせて微妙に仕様を変えたりといった検討が必要になる。

国内の SaaS は、基本的に REST API だけの提供 (or なし!) で、単に「データ連携させられる」ってだけなんだけど、こうしたアプリストアでは、「そのサービス内で他のサービス(アプリ)を使う」ってとこまでできる。ここが今、海外の SaaS と国内の SaaS の大きな違いの一つだと言えるだろう。

Zendesk App の所感

今回の LT タイトルが Zendesk App なので、Zendesk App に焦点を当ててみよう。

Zendesk App は他の SaaS アプリに比べて、アプリ内でできる幅が大きい。Zendesk App から Zendesk のあらゆる REST API を呼び出すことができるし、Zendesk 内の UI 動作の指定も多種多様である。ただし、その自由さ故なのか審査に1ヶ月以上もかかるというのがネックなポイントだ。

現状 Zendesk App で公開できるのは Zendesk Support と Chat の2つだけのようだ。今 Zendesk は他に多くのサービスを提供し始めていて、今後これらのサービスと統合したアプリ開発環境ってのが出てくるんじゃないかなと思っている。ただ Zendesk といえば「サポート」って印象が染み付いているので、ここで最近「Zendesk Explore」 や 「Zendesk Sell」などが出てきてどうなっていくのかな、という感じではある。今後の Zendesk に注目である。

終わりに

今回は Zendesk App の派生形として、SaaS アプリストアの可能性に関して言及した。

これら SaaS アプリの中に埋め込む場合、URL など気にする必要がない。てことで、 *.herokuapp.com で自由にアプリを作って公開する、そんな SaaS アプリストアでのアプリ公開が一つのトレンドになっていけば面白いなということでこの記事を閉めようと思う。

私はこの世界にお先に足を踏み込んでいる。あなたはこのウェーブに乗るか?

SaaS 規約ナイト の参加メモ

ども、@kimihom です。

今回は SaaS 規約ナイトっていう利用規約周りの話をするレアなイベントがあったのでエンジニア枠で参加してみた。ざっとメモと参加した感想を記す。

saas-kiyaku.peatix.com

参加メモ

利用規約とは

  • サービス提供者とユーザーの決め事
  • ユーザーがやっていい、やっちゃいけないこと
  • サービス提供者側で保証していること

規約更新

規約を変える時にどうするか。ユーザー通知のタイミング。SaaS は買って終わりではなく関係の始まり。これから毎月支払っていただくスタイルであるため、契約の更新や解約に関する記述が大事になる。

価格改定

消費税増税や改正民法の定型約款なども考慮。規約に料金表を入れずに、LPに料金を別途表示する方法が一般的か。ただ顧客ごとにカスタマイズのプランを提供して料金が違うような形になると、料金変更の際に個別の合意が必要になってくる。 今後、SaaS が普及するにつれて料金アップは避けられない。ただ実際は料金の値上げでトラブルになることはそんなにない?。どう料金アップするかも考慮して規約を決める。

「更新値上げ」がトレンドになりそう。1年で自動更新、更新期間についてたんか7%までは値上げする可能性ありと事前に伝える。もし7%を超える値上げが発生する場合は、60日前までに通知する規約にする。その期間で別サービスを検討するなどの期間を与える。

規約内容の変更

ユーザーに影響を与える変更の場合はちゃんと通知する。 文法とか分かりやすい文にする修正は適宜更新。それだけで通知..? それよりもちゃんと差分をユーザーが気軽に見れるようにすることの方が大切。

障害の時の責任範囲

SLA を設置するかどうか。障害が保証した期間以上に伸びた場合の返金対応とその上限。ずっと開発を続ける SaaS にはトラブルがつきもの。SaaS の中でも頻繁な更新をして多少トラブルを多めに見れる SaaS と、遅くなってもいいからとにかく安定性が必要な SaaS など種類がある。

データの取り扱い

入力データに対してアクセスしない、GDPR のような制度はそのうち日本にも来るだろう。 データは自社の DB に保存だけとは限らない。他サービスとの連携ではどう扱うのか。連携においてどの情報をどのように利用するのか。

顧客との関係

BtoBtoC を考える。その SaaS の顧客は1社だけだとしても、その1社が1万ユーザーを対象にその SaaS を使うことも当然ある。その時に BtoB だけの規約の対応だけで本当にいいのだろうか。

エンジニアとしての感想

スタートアップとかだと、こういう法律はひとまず脇に置いておいて「今までにないサービスなので法律はこれから制定していく必要がある」みたいな Airbnb の人みたいな発言をして乗り切っていくわけだけども、それなりに多くの顧客を抱えてくると当然そういうわけにはいかなくなる。

じゃあエンジニアが全部把握しなきゃいけないのって言ったら、それは当然無理なことだ。でも、とりわけ障害やデータの取り扱いとかはエンジニアしか把握できないものも多く、これらは早いうちからしっかりと設計レビューしてもらう環境が大事になってくるだろう。そうしないと、いつぞやの顧客情報流出トラブルとかが発生して今までの努力がパーになってしまうからね。

「エンタープライズプラン」ってのを設けると、規約や価格改定の時にそれぞれ個別の同意が必要になるってところが、確かにって思った。やはり SaaS が成長してくるとエンタープライズ向けに SaaS を売りたくなってきて、そのエンプラ特有の要望とかカスタマイズを受け入れてでも顧客にしたくなってくる。SaaS の場合はそれで対応して導入してくれれば終わりじゃないってのは先述の通りだ。

「利用規約なんてそもそも読まない」って人が大半なのは間違いない。だからこそ、「利用規約を誰でもアクセスできるように公開する」ってのが大事って視点も面白かった。99% 読んでなくても、うち1%の人がちゃんと読んでおかしな部分があれば誰でもブログで簡単に報告できる時代だからだ。これで炎上した SaaS があることも身に覚えがある。

規約は長けりゃいいってもんじゃない。ちゃんと読んでユーザーと運営のお互いが把握して問題なく使い続けてもらうために大切なので、1万字以内に収める努力はしたほうがいいとのことだった。わざと分かりづらくしてる利用規約とかがダメなのは当然のことだ。

終わりに

普段こういうミートアップは技術的なものばっかりだったけど、今回のは新しい視点が得られたって意味で参加してよかったと思う。自分の SaaS もお陰様で多くの方に利用されるようになったので、引き続き安心と安定を提供できるように意識を深めていきたい。

顧客とより良い関係になるにはどうしたら良いのか? これが私の次の大きなテーマである。

【改訂新版】良いウェブサービスを支える 「利用規約」の作り方

【改訂新版】良いウェブサービスを支える 「利用規約」の作り方