👊

グータッチでお互いを褒め合うことができるアプリを作った話

2024/12/15に公開

iOS

Swift

hackathon

tech

※この記事は Life is Tech!School秋葉原のメンバー・メンターが執筆する akihabara-school Advent Calendar 2024 15日目の記事になります。

はじめまして！私はLife is Tech!Schoolの秋葉原校でiPhoneコースのメンターをしている、せいといいます！

今回は、9月に私が参加したメンター向けのハッカソンで制作した、グッチャレというアプリについて紹介してみようと思います。

参加したハッカソンについて

まずは私がさん回したハッカソンでどんな課題が出たのかを紹介します。
それはメンター全員が使いたくなるような就活支援サービスを作れでした。しかも期間は1日（というか時間で言ったら半日くらい）で企画からMVP（最低限動作するプロダクト）までを完成させなくてはいけませんでした。結構厳しい…

作ったプロダクト

私達が作ったプロダクトは、就活の自己分析を行う際に、一番そばにいて自分のことを見てくれているメンターに、自分がまだ気がついていない部分をフィードバックしてもらうことで、より自分への理解を深めることができるアプリです。

その時の発表スライドです。興味のある方はぜひ！

送信側キャプチャ動画

受信側キャプチャ動画

簡単にアプリの説明をすると、送信側はGoodかMoreのどちらのフィードバックを送るか選択し、フィードバックの内容を書きます。そして「グッチャレ！」のボタンを押します。その状態でフィードバックを送りたい相手といっしょにスマホを持って、グータッチをします。するとスマホが振動した後に、フィードバックが相手にスマホの画面に送られます。単純にオンラインで送信するだけじゃ味気なかったので、実際のオフラインの行動をアプリ内の挙動と連携させて、UXの向上を図っているところがポイントです！

実装

ここからは私がどのようにしてこのアプリを作成したのか、解説していこうと思います。
大きく分けると2つの機能を使っています。1つはcustom URL schemeというもので、簡単に言うと、リンクから特定のアプリを開くことができる機能です。もう1つはActivityViewsというもので、画像やテキストを外部のアプリに共有したり、AirDropしたりできる機能です。

以下公式ドキュメントになります

ActivityViewsの実装

まずはフィードバックを送信する画面から作っていきます。
今回はテキストのみを共有できればいいので、基本的な実装はこのような感じになります。

ViewController

func shareSheet(shareText: String) {
    let controller = UIActivityViewController(
        activityItems: [shareText],
        applicationActivities: nil
    )
      
    self.present(controller, animated: true, completion: nil)
}

あとは共有ボタンが押されたときに、こちらの関数を呼び出してあげれば、任意のテキストを共有することができます。

Custom URL Schemeの実装

URLからアプリを開けるようにするには、まずTARGET>InfoからURLを設定する必要があります。

URL Schemesに設定した文字列（画像の場合だとmyapp://）に対応するURLをブラウザなどに打ち込むと、アプリを開くことができます。
それとIdentifierには、TARGETS>Generalから確認できる、Bundle Identifierをそのまま打ち込みます。加えて、RoleはViewerに設定します。

またこのURLによってアプリが開かれたときSceneDelegateの以下の関数が呼ばれます。

SceneDelegate

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    // URLを介して起動された場合の処理
}

それに加えて、URLにパラメーターを含めることができ、それらは上記の関数で以下のプロパティを指定することで、取り出す事ができます。
myapp://hoge/huga?xxx=1

let scheme = url.scheme //myapp
let host = url.host  //hoge
let path = url.path //huga
let query = url.query //xxx=1

つまりこのURLにメッセージや誰からのメッセージかなどを含めることで、フィードバックを送ることができるというわけです。

今回はhostに送り主の名前、pathにメッセージ、queryにGood or Moreを含めることにします。

ここで問題になってくるのは、日本語をURLに含めようとすると、値がnilになってしまうことです。
そこで日本語をURLにエンコードする方法を解説していきます。

日本語の文字列をURLへエンコードする

日本語の文字列をエンコードするには以下のようにすると実現可能です。

let japaneseString = "あいうえお"
let encodingString = japaneseString.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)

print(encodingString) //%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A

デコードするときは、以下のようにします。

let decodingString = encodingString.removingPercentEncoding
print(decodingString) //あいうえお

これでURLを共有する準備は整いました。あとは受け取ったときの処理を実装するだけです。

URLからアプリを開いたときの処理

上記で書いた通り、SceneDelegateにはURLを受け取る関数があるので、先程のエンコードしたURLを受け取り、フィードバックを受け取る画面に遷移するコードを書きます。

SceneDelegate

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    // URLを介して起動された場合の処理
    guard let url = URLContexts.first?.url else { return }
    handleURL(url)
}

private func handleURL(_ url: URL) {        
    // FeedbackViewControllerをStoryboardから読み込み
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    guard let feedbackViewController = storyboard.instantiateViewController(identifier: "FeedbackViewController") as? FeedbackViewController else {
        print("Failed to instantiate FeedbackViewController")
        return
    }
        
    // URLから必要な情報を取り出す
    let sender = url.host ?? ""
    let feedbackText = url.path.split(separator: "/").last?.lowercased()
    let feedbackType = url.query?.split(separator: "=").last?.lowercased()

    // URLの情報をViewControllerに渡す
    feedbackViewController.sender = sender
    feedbackViewController.feedbackText = feedbackText!
    feedbackViewController.feedbackType = feedbackType!

    // 画面を切り替え
    window?.rootViewController = feedbackViewController
}

解説は以上となります。長々とお付き合いいただきありがとうございます。
以下にコードの全文を載せているので、もし必要でしたらぜひ！

最後に

今回のようなユーザーのアプリ外の行動が、アプリ内に反映される体験は、使っていて面白いので、ぜひ皆さんもなにか思いついたら作ってみてください！
もし何か間違っている点や、不備などありましたらコメントにてご指摘いただけると幸いです。
最後までお読みいただきありがとうございました！