ヤプリでやっていること

ヤプリはアプリ開発・運用・分析をノーコード（プログラミング不要）で提供するアプリプラットフォーム「Yappli」を運営しています。導入企業は550社を超え、店舗やEコマースなどのマーケティング支援から、社内や取引先とのコミュニケーションをモバイルで刷新する社内DX（デジタルトランスフォーメーション）、バックオフィスや学校法人の支援まで、幅広い業界の課題解決に活用されています。

アプリプラットフォーム「Yappli」の6つの特徴
① スピード開発：ノーコードでAndroidとiOSのネイティブアプリを高速開発。
② カンタン運用：直感的な操作で、更新可能。プレビューで事前確認もできる。
③ 多彩なプッシュ通知：エリアや属性など、ターゲットに合わせた多彩なプッシュ配信。
④ 高度なデータ分析：ユーザー行動やアクションに基づきデータ分析が可能。自社データとの統合も。
⑤ クラウドで進化：年間200回以上の機能改善。最新OSにも即座にアップデート対応。
⑥ サクセス支援：専門チームが集客や活用方法などを支援し、成功へコミット。

「Yappli」ではAndroidとiOSがサービスの中心にあり、あらゆる機能はKotlinとSwiftで書かれています。

アプリ提供のために行っていること

「Yappli」でアプリを提供するにあたり、開発観点は大きく「アプリ構築」と「アプリビルド」に分けられます。 まず「アプリ構築」では、1つのプラットフォーム、つまり1つの仕組みで多くのアプリを構築する必要があります。自由度の高いUIと、汎用的な多数の機能を作成しておくことが大切です。次に「アプリビルド」では、数多くのアプリをスムーズにリリースできるビルド環境を構築する必要があります。 この2つの観点について、それぞれ詳しくご紹介します。

アプリ構築

「Yappli」では、様々な機能を組み合わせてアプリを構築します。 基本的なプッシュ通知、レイアウトをセルレベルで自由に組めるフリーレイアウト、ARやQRコードリーダーなど、様々な機能があります。 これらの機能を開発する際は、アプリ体験を最大化するために、多様なレイアウトを実現可能としつつ、UIやアニメーションにもこだわって作成しています。そのため、WebViewを使用してウェブで作成するのではなく、ネイティブで機能を作成するようにしています。 たくさんあるYappliの機能の中で、特にUIにこだわっている機能を4つご紹介します。

フリーレイアウト

セルを順番に並べていくことができる、最も汎用的に活用されている機能です。 セルには文言や画像を設定でき、幅の調整もできるので、グリッドの表現も可能です。 また、セルの中にさらに横スクロールでセルを配置したり、動画再生、配信時間の設定やタップ時のイベントの設定をしたりと、1つの機能で様々な表現を実現できます。 設定可能な項目が多く、組み合わせの自由度が高いレイアウトであるため、プログラムを組むときにはセルのタイプや位置、設定項目など考慮する点が多い機能です。

ポイントカード

アパレルショップや飲食店などのお客様をターゲットとし、店舗でロイヤリティ施策として採用されることの多い物理ポイントカードをアプリ化できる機能です。 カード形式で表示したり、バーコードの位置を複数パターン表示したりと、レイアウトを柔軟に変更できます。 不正ができないような仕組みとして、加速度センサーなどを用いて背景画像にブラー効果をつけたり、背景に動画を入れたりすることも可能です。 このように、実用性の部分もデザインの一部として組み込むなど、遊び心も持ったデザインを実現しています。

フォーム

ユーザーが自身の情報を入力できる機能です。 他の機能と連動して使われることが多く、この情報を活用してコンテンツを出し分けたり、最適化されたプッシュ配信を受け取ることができます。

入力画面として複数のページを入稿でき、ページ内の項目も柔軟に設定できます。 項目のタイプも複数用意しており、通常のエディットテキストから、住所入力用の項目、ショップ機能と連携した近隣店舗の表示などまで、様々な表現ができます。 その際にも使いやすさを考慮して、バリデーション時のアニメーションや、ボトムシート表示、通常のボタンだけでなくキーボードに合わせた場合のボタン表示などもこだわっています。

ショップ

店舗やロケーション情報を地図上に表示できる機能です。Google Maps APIを利用してマップを表示しつつ、各店舗の情報をカード形式で重ねています。 タップすることで店舗の詳細情報をボトムシート形式で表示し、そのままスワイプすることで全画面表示できます。画面遷移を利用するのではなく、1画面の中で多くの情報をシームレスに閲覧できるようにしています。 マップとボトムシートのアクションの組み合わせ、店舗の数が増えた際のピン表示、近隣店舗の表示条件など、アニメーション以外にも色々な考慮をしています。

機能開発では、様々なポジションと密に連携を取って行う必要があります。 「1機能の実装＝1プロジェクト」として進めていくのですが、各プロジェクトチームには、開発ディレクター、UI/UX、バックエンド、フロント、QAなど、1機能をリリースするために必要なポジションを全てアサインして、そのメンバーで話し合いながら開発を行います。 特に、アプリエンジニアとUI/UXデザイナーの連携の機会は多くなります。 UI/UXデザイナーは、アプリの体験を落とさずにどこまでデザインの自由度を持たせるかを考えるのに対し、アプリエンジニアはその実現性やアプリらしさを提案し、形にしていきます。 特にデザインの自由度が高く、できることが多い場合は、安全に提供するためにUIを控えめにしがちですが、ヤプリではアプリ体験を損なわないようにしながら、実用性と自由度の兼ね合いを見て実装しています。

また、ARやQRコードリーダーなど、SDKで提供されているAPIも幅広く使用して開発を行っています。 提供する機能の幅が広く、専門性の高いものでも機能として作成するので、触れるAPI数も必然的に増えていきます。そのため、幅広い知識が得られるのも「Yappli」の特徴です。 今後も新しいAPIが提供されるごとに、それを機能としてリリースできないかを考え、プロトタイプの作成なども積極的に行っていきます。

アプリビルド

「Yappli」では数多くのアプリを提供するために、ビルドや申請の自動化を行っています。 1日で数種類の申請を処理しますが、それらを1つ1つエンジニアが手作業で行っていたら、開発する時間がどんどん失われてしまいますし、ミスも生まれます。 そのため、次の図のような形でアプリビルドを自動化しています。

ビルド時には、お客様に合わせて特殊な機能を含まないようにしたり、アイコンを変更したりといった作業が必要になります。 そのようなアプリに応じた設定の反映を、管理画面やCircleCIなどを用いて実現しています。

現状では主に、サードパーティ製のライブラリを使用している機能や、サイズの大きいAPIを利用した機能単位でのモジュール化が行われており、全ての機能のモジュール化は行われていません。 今後、アプリのパッケージ構成の見直しを行いつつ、Dynamic Feature Modulesなどを利用して、より最適化できるのではないかと考えています。

ここまではリリース用アプリ提供に関する説明でしたが、社内で利用するQA用のアプリやgitのマージ、タグを設定したタイミングでの自動ビルドなど、日々改善を行っています。また開発時の単体テストに関しても、Push時の自動実行や、開発効率向上のための自動化に取り組んでいます。

このように、「多くのアプリをビルドするための環境」や「開発効率向上のための環境作り」など、CI/CD周りに深く触れられるのも「Yappli」開発の特徴です。

これからのヤプリ

今まで多くのアプリを提供してきたヤプリですが、さらなる要望に応えるために開発を続けていきます。

まだ導入が進んでいない業界も多くあるので、「Yappli」を導入する動機となる新機能を開発して実現できる範囲を広げていきたいと考えています。一方、すでに導入が進んでいる業界向けには、アプリのさらなる活用につながる機能の開発や改善を行って、サービスとしての深さを出していきます。 また、それぞれの機能を追加するだけではなく、アプリ全体としての表現の幅を広げるための改修や、「Yappli」の進化を加速させる「プラットフォーム」としての根幹部分の強化も行っていきます。

開発者視点では、サービスの成長に伴いソースコードも肥大化し、メンテナンス性の落ちているコードや書き方が古くなっている部分がまだ残っているので、刷新する必要もあります。

また、プラットフォームという性質上、「ビルド、申請」や「ライブラリやOSバージョンアップへの対応」など定常業務も多いため、開発効率を上げる自動化などの環境構築にも積極的に投資していきます。 機能を増やしやすい環境でもありますので、新しい技術やエンジニア発信の新機能リリースも増やしていきたいと考えています。

これからも一層大きくなっていく段階であるヤプリです。そういったチャレンジができる環境だと思うので、ご興味がある方はぜひ下記から応募ください。

https://open.talentio.com/1/c/yappli/requisitions/detail/13701

著者紹介

林宏行

株式会社ヤプリでモバイル（Android/iOS）開発部の部長をやっています。 チームマネージメントをしつつ、社内アプリをFlutterで作成したりもしています。