こんにちは、スタディサプリ開発チーム iOS エンジニアの @m-sugawara です。
スタディサプリの iOS アプリでは2~3ヶ月前に PencilKit を使ったメモ帳機能を公開したのですが、今回はその機能の開発〜公開まで至った流れについてご紹介したいと思います。
（実際の画面です）
きっかけは社内勉強会
スタディサプリ iOS チームでは月1回ぐらいの頻度で勉強会が開催されており、こちらでは iOS 開発に関しての最近学んだ知見などが共有されたりしています。
今回実装することになったメモ帳機能はこのイベント主催でもある @nkmrh が PencilKit を紹介していたことが一番最初のきっかけとなりました。
PencilKit は、WWDC2019 で紹介され、iOS13 から追加された公式のお絵描き機能です。
数行の簡単なコードでアプリ内の任意の画面に絵が描ける機能を実装することができます。また、絵を描くためのツールセットは公式のメモ帳アプリなどと同等のものを呼び出すことができるので、シンプルな実装で使いやすい UI を提供することができます。
機能の提案
実はこのイベントで PencilKit のことを学ぶ前から、ユーザーから問題を解くときに手書きでメモを取りたいというような要望がいくつか届いていました。1
そこでこの機能について改めて勉強会で学んだことにより、実際に機能として盛り込むと需要があるのでは？という話が上がり、 GitHub issue が立てられました。
この GitHub issue をもとに TPM(Technical Product Manager) 兼 iOS エンジニア2 の @zaq46 が中心となってステークホルダーの方々に機能の提案を行い、結果として実際に導入してみようという話になりました。
実装
機能提案のフェーズを経て、実装を行うことが決定したので実際に PencilKit を使ってメモ帳機能の開発をおこなっていきます。
PencilKit の実装は非常にシンプルで、下記のような数行のコードを書くだけでメモ帳アプリのように自由記述形式で画面に文字を書くことができるようになります。
let canvas = PKCanvasView() canvas.backgroundColor = .white canvas.drawingPolicy = .anyInput let toolPicker = PKToolPicker() toolPicker.addObserver(canvas) toolPicker.setVisible(true, forFirstResponder: canvas) canvas.becomeFirstResponder() view.addSubview(canvas) // CanvasView に Constraints を追加する(省略)
一方で、PencilKit の実装時の注意点としては、 iPad だと undo, redo ボタンが標準の PKToolPicker 上に表示されているのですが、iPhone ではその機能を自前で実装しなければならないというような機能の差分がありました。
こちらの実装に関しても公式のサンプルコードを参考にしながら、First Responder の undo:, redo: の処理とボタンをタップした時の処理を紐付けることで無事 iOS でも undo/redo の実装を行うことができました。
その他、PencilKit で描画中の画面を閉じると入力途中のデータも消えてしまうので、PKDrawing.dataRepresentation() でデータを取得し、再度メモ帳画面を開いた時にそのデータを PKDrawing に再変換して CanvasView に渡すことで入力途中のデータを復元することができます。
// 入力途中のデータを取得するとき let data = canvas.drawing.dataRepresentation() // 復元するとき canvas.drawing = PKDrawing(data: data)
今回実装した機能には含めていませんが、上記で取得したデータをファイルに保存したりすることで、記入したメモ帳の永続化なども容易に実現可能になります。
また、PencilKit とは別の話題になるのですが、デザイナーさんにデザインを作成いただいた際、メモ帳機能をハーフモーダルで出したいというデザイン上の仕様がありました。
ハーフモーダルの実装を行うのであれば iOS15 から導入された UISheetPresentationController を使った方がシンプルに実装できるので、iOS14 での対応をどうするかという相談がありました。3
結果として、すでに iOS14 の端末を使っているユーザーの割合が低いこと、来年には iOS14 もサポート対象外になること4、メモ帳機能自体が実験的な試みであることなどから今回は iOS15 のみを対象として出すことに決まりました。
（ハーフモーダルの様子。二本指ドラッグでのスクロールも可能です。）
公開〜その後
実装を終え、QA チームでの確認も迅速に対応いただき、機能の公開を行いました。
すでに機能の公開から2~3ヶ月が経っており、事前に仕込んでおいたログも溜まりつつあります。つい先日、そちらのログから使用率を取得したところ、メモ帳機能を公開しているユーザーのうち 10% 程度のユーザーに使われているようでした。
これは昔からある他の機能と比較しても割と使われている方で、実際に需要がある機能だったのだなぁと感じているところです。
現在は一部のユーザー限定で公開していることもあり、今後はこの調査結果をもとにより多くのユーザーに機能を公開して行ければと思っております。
まとめ
メモ帳機能の提案〜公開までの流れを一通りお伝えさせていただきましたが、いかがでしたでしょうか。
スタディサプリ開発チームではこのように開発者側から機能を提案し、実際に公開まで行えるような環境があります。
この記事を読んで少しでも私たちの開発チームに興味をお持ちになりましたら、ぜひカジュアル面談からでもお話を聞きに来てもらえると嬉しいです。
https://brand.studysapuri.jp/career/category/engineer#openPositions
