「おもしろがり」からのサービスリリース 〜てがきはてなブログの場合〜

Transcript

1. 「おもしろがり」からのサービスリリース
   〜てがきはてなブログの場合〜
   

   View Slide

2. © Hatena Co., Ltd.
   誰？
   ● はてなID: AirReader
   ● はてなブログユーザーチームのディレクター
   ● はてな歴:
   ○ 2006年頃 はてな登録。ダイアリーなど使い始める
   ○ 2008年4月 はてなユーザーサポートのアルバイトとして入社
   ■ 新サービスのはてなワールドというサービスに入り浸っていたところ、オフ会が開催され、そこ
   にはてな社員も参加し、アルバイトに誘われたという経緯
   ○ 2011年頃 ユーザーサポートの社員
   ○ 2015年頃 プラットフォームチームのディレクター
   ○ 2019年頃 はてなブログのディレクターになる
   

   View Slide

3. © Hatena Co., Ltd.
   そもそも「はてラボ」って何？
   はてラボは、はてなの実験的サービス置き場です。
   2006年2月に「はてな社員の個人的アイデアに形を与え、未完成のサービスに改善を重ねながら本サービスに育てる」という目的で開始しま
   した。
   現在では、本サービス化を目指すだけではなく
   ● 稼働中の本サービスに導入することが難しい新規機能を先行して実装する
   ● 本サービスとは異なるルールやポリシーに基づいてサービスを提供する
   ● 本サービスとして継続提供することが難しくなったサービスを、規模を縮小した形で提供し、ラボならではの挑戦的な施策を導入し再
   生を図る
   といった、広義の実験的プロジェクトや実証実験の場としても使われています。
   https://hatelabo.jp より抜粋　　　
   “
   ”
   

   View Slide

4. © Hatena Co., Ltd.
   社内的な「はてラボ」リリース要件
   ● ラボサービスは、はてな社員が自由にウェブアプリケーション、スマートフォンアプリケーションを開発・発
   表してよいとされている
   ● リリース判断はサービスシステム開発本部 本部長のよる確認のみ
   ● セキュリティ要件など幾つかの条件はあるが、挑戦や実験の場であり続けるために、特段に高いハード
   ルを設けない方針で運用されている
   

   View Slide

5. リリース要件にエンジニアの
   限定はない！
   ↓
   私にもリリースチャンス
   

   View Slide

6. © Hatena Co., Ltd.
   はてラボサービスの運用
   ● 作成者が退職したサービスも多い
   ● ひとつのラボサービスにつき複数人の有志でメンテナがついている
   ○ 匿名ダイアリーのみ担当チームが存在しています
   (メインの業務ではないですが)
   ● サービスが好きだったり、利用者がいることや、技術的な実験など様々な目的でメンテナとなっ
   ている
   ● このあとメンテナより色々紹介があると思いますのでお楽しみに
   

   View Slide

7. てがきはてなブログの場合
   

   View Slide

8. © Hatena Co., Ltd.
   ● はてなブログ
   ○ https://hatenablog.com
   ○ はてなが提供しているブログサービス
   ○ 「思いは言葉に。」をキャッチコピーに、思いを表現すること、その表現に
   触れられることを大切に運営しています
   ● てがきはてなブログ
   ○ https://tegaki.hatelabo.jp
   ○ はてなブログで「手で書く」と「手で描く」表現を手軽に楽しめる
   サービスとしてリリース
   ○ 文字を書き損じたときに出てくるこのゲジゲジは文字と絵の間の子という感じでピッタリ！という感じでロゴに決
   めた
   ○ はてなブログが提供している AtomPub API を利用してはてなブログに投稿できる
   (Fotolife AtomPub APIも
   使ってます)
   

   View Slide

9. © Hatena Co., Ltd.
   開発動機
   ● 手元にiPadとApple Pencilがあった
   ● いつの間にか Apple Pencil の情報がブラウザから取得できるようになっていた
   ● そういえば、絵を添えたブログやTwitterの投稿などをよく見る
   ● そういえば、絵が上手くなりたいと思っていた
   ↓
   おえかきツールを作ったら良さそう
   

   View Slide

10. 振り返ると動機は異常かつ軽い
    

    View Slide

11. © Hatena Co., Ltd.
    開発
    ● 開発期間: 2020/5 ~ 2020/9
    ● 開発時間: 子供を寝かしつけた後
    ○ 寝落ちすること多数
    ○ ラボリリースを決めた後は業務時間も使った
    ● やったこと
    ○ 企画、開発、ロゴ、デザイン、告知全部やった
    ○ 投稿コンテンツチェックはしなくて良いように、アプリケーション内に投稿表示機
    能を設けなかった
    

    View Slide

12. © Hatena Co., Ltd.
    セキュリティレビュー
    ● ラボですがセキュリティレビューは必須。利用者の保護は大事
    ○ OAuth認証といえども、ブログ、フォトライフへの投稿機能を備えるので、リス
    クはある
    ● サービスリリースしたいと言ったら2名レビューを名乗り出てくれた
    ● 酔狂にノッてくれる人がいるから成立しております
    ○ ありがたい
    

    View Slide

13. © Hatena Co., Ltd.
    はてラボで出せて何が嬉しいか
    ● はてなの看板を借りることができる
    ○ 告知のブックマーク数も伸び、様々なメディアで紹介された
    ■ 告知用に自分が描いた絵がいろんなメディアに載ってて面白い
    ○ 個人でやってもこんなことにはならない
    ● その結果、初期から使ってくれるユーザーがいる
    ○ 個人でやってもこんなことにはならない
    ● 自分も嬉しいし会社も嬉しい(はず)
    

    View Slide

14. © Hatena Co., Ltd.
    はてラボを成立させているもの
    ● 面白がる力によって支えられている
    ○ 社外的にははてなのユーザーさん
    ○ 社内的には、こういう活動を認め制度化する会社、またそれを良しとする同僚
    ■ ヤッていきノッていきはとても大事！
    ● そういう風土があると分かっているから自分も自由にできる
    ○ とはいえ近年ラボリリースがなくて寂しい感じだった
    ○ それなりに立場がある者が率先して変なことをしてみんなも自由にやってい
    いってことを伝えたかった
    

    View Slide

15. © Hatena Co., Ltd.
    趣味的な機能の数々(1)
    ● 利き手機能
    ○ 利用開始のウィザードで利き手を聞き、利き手によりUIの場所が変わるように
    した
    ○ デフォルト設定を左利きにした
    ■ なぜなら、自分が左利きで数々の面倒な場面に遭遇してきたから
    ■ というのは半分冗談で半分本気
    ■ 世間では右利きの方が多いので、普通に考えるとデフォルトを右利きにしたほうがユーザー
    のステップが少なくて良いはずが、たまには右利き側が面倒さを感じるのも良いでしょうという
    ことでそうした
    ■ 利き手へのおもてなしがあるんだぜ、というのを見せたいという意図もあった
    

    View Slide

16. © Hatena Co., Ltd.
    趣味的な機能の数々(2)
    ● マスキングテープ機能
    ○ 可愛いマスキングテープは世の中にたくさんあり、上下が存在する絵柄もたく
    さんある
    ○ 絵柄をcanvas.patternで単純に実装しようとすると、上下が固定されてしまう
    ○ 直線ツールの始点と終点の角度から、
    patternも回転させるようにした
    ○ 直線ツールをぐるぐるすると、
    だるまもぐるぐるします
    

    View Slide

17. © Hatena Co., Ltd.
    趣味的な機能の数々(3)
    ● 鉛筆モード
    ○ 画用紙に鉛筆で書いた感じを再現したい
    ○ 画用紙は凸凹していて、筆圧に応じて凸の部分に強く黒鉛が付き、凹の部分
    に弱く黒鉛がつくという物理モデルと想定する
    ○ 画用紙パターンを用意して、グレイスケール化、それを黒鉛のつきやすさ(色が
    つく確率)として数値化する
    ○ その数値を基本データとして筆圧やペンの傾き(寝かせると先端に力が入らな
    くなるので薄くなる)などを変数に鉛筆っぽい筆跡を表現する
    

    View Slide

18. © Hatena Co., Ltd.
    趣味的な機能の数々(4)
    ● ペンをシャッっとやったときの軌跡が
    気に食わない問題
    ○ シャッとやったときの最後の10回分の
    touchイベントをグラフにプロットした
    ○ touchend付近では全然移動していない
    ことになっているのが分かる
    ○ touchend付近の情報を捨てて期待する
    軌跡を計算して描画するようにした
    ○ 当初より良くはなったけど
    そんなに満足はしてない…
    

    View Slide

19. © Hatena Co., Ltd.
    趣味的な機能の数々(5)
    ● 台紙機能
    ○ ボタン一発で、絵日記っぽくなったり青写真っぽくしたりできる機能
    ○ 単純に決まったキャンバスのサイズで台紙が出来ても
    面白くないし、使いにくいので
    キャンバスのサイズから計算して
    台紙を描画するように
    ○ 異常なサイズの絵日記台紙を
    生成できたりして面白い
    

    View Slide

20. © Hatena Co., Ltd.
    怪しい伝説のアレがやりたかった
    

    View Slide

21. © Hatena Co., Ltd.
    苦労話
    ● 一時保存機能
    ○ LocalStorageは保存容量が小さい
    ○ IndexedDBに保存するように
    ● SafariはCanvasのメモリ制限がきつい
    ○ undo,redoを上限を減らしたり、Canvasのサイズ上限を設定したりした
    ○ それでもまだ出ることがありそうなので辛い
    

    View Slide

22. © Hatena Co., Ltd.
    てがきはてなブログは続く？
    ● 実装のほとんどがクライアントサイド
    ○ サーバーサイドはブログとフォトライフへの投稿のみ
    ● めちゃくちゃ低コストに動作しています
    ● 今の所終了する予定はないので、どうぞご利用ください
    

    View Slide

23. ありがとうございました
    

    View Slide