Soumettre la recherche
Mettre en ligne
個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
24 vues
S
ssusere75907
Suivre
個人開発でアプリを作成しました。 転職活動用にアプリ内容を紹介するポートフォリオを作成しました。
Lire moins
Lire la suite
Business
Signaler
Partager
Signaler
Partager
1 sur 59
Télécharger maintenant
Recommandé
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
Shingo Hiraya
Titanium Mobile
Titanium Mobile
Naoya Ito
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
shinobu takahashi
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
20120118 titanium
20120118 titanium
Hiroshi Oyamada
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
Recommandé
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
iOS 9 Bootcamp #6 UIKit
iOS 9 Bootcamp #6 UIKit
Shingo Hiraya
Titanium Mobile
Titanium Mobile
Naoya Ito
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
shinobu takahashi
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
20120118 titanium
20120118 titanium
Hiroshi Oyamada
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
【Unite 2018 Tokyo】エディター拡張マニアクス2018
【Unite 2018 Tokyo】エディター拡張マニアクス2018
Unity Technologies Japan K.K.
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
Toshiki Iga
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
スマ研第2回レポート
スマ研第2回レポート
Shinpei Niiyama
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Einsteinvision - object detection を試してみよう
Einsteinvision - object detection を試してみよう
Salesforce Developers Japan
Titanium勉強会
Titanium勉強会
洋平 前田
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Yu Nobuoka
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918
Cybozucommunity
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
Yuki Anzai
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
Web Accessibility Infrastructure Committee (WAIC)
Xamarinの概要
Xamarinの概要
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
Yossy Taka
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
KestrelPro Flyer Japan IT Week 2024 (Japanese)
KestrelPro Flyer Japan IT Week 2024 (Japanese)
Data Analytics Company - 47Billion Inc.
Contenu connexe
Similaire à 個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
【Unite 2018 Tokyo】エディター拡張マニアクス2018
【Unite 2018 Tokyo】エディター拡張マニアクス2018
Unity Technologies Japan K.K.
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
Toshiki Iga
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
スマ研第2回レポート
スマ研第2回レポート
Shinpei Niiyama
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Einsteinvision - object detection を試してみよう
Einsteinvision - object detection を試してみよう
Salesforce Developers Japan
Titanium勉強会
Titanium勉強会
洋平 前田
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Yu Nobuoka
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918
Cybozucommunity
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
Yuki Anzai
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
Web Accessibility Infrastructure Committee (WAIC)
Xamarinの概要
Xamarinの概要
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
Yossy Taka
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
Similaire à 個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
(20)
Css nite(2010.09.23)
Css nite(2010.09.23)
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
【Unite 2018 Tokyo】エディター拡張マニアクス2018
【Unite 2018 Tokyo】エディター拡張マニアクス2018
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
スマ研第2回レポート
スマ研第2回レポート
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Einsteinvision - object detection を試してみよう
Einsteinvision - object detection を試してみよう
Titanium勉強会
Titanium勉強会
UI要素を動的に利用する
UI要素を動的に利用する
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
Xamarinの概要
Xamarinの概要
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Dernier
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
KestrelPro Flyer Japan IT Week 2024 (Japanese)
KestrelPro Flyer Japan IT Week 2024 (Japanese)
Data Analytics Company - 47Billion Inc.
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
ssuser80a51f
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
ssuserfb441f
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
KayaSuetake1
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
hmoriyama
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
Jun Chiba
company profile
company profile
keiibayashi
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
ユニパー株式会社
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
masakisaito12
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ 株式会社
Dernier
(11)
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
KestrelPro Flyer Japan IT Week 2024 (Japanese)
KestrelPro Flyer Japan IT Week 2024 (Japanese)
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
company profile
company profile
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
個人開発したモバイルアプリを紹介したパワポ資料です。転職活動時にポートフォリオとして使用しました。
1.
1 独学で開発したiosアプリ 『ピックコレクション』 をご紹介します。
2.
2 目次 01 ピックコレクションとは 02 開発背景 03
分析と施策 04 個人情報を非表示化する機能をご紹介 05 LINEアイコン非表示化の技術スタックをご紹介 06 サービス初期を見据えた 投稿閲覧画面の設計 07 サービス分析 08 TikTokの設計に基づく施策 09 TinderUIの技術スタックをご紹介 10 実装した機能のご紹介
3.
3 目次 13 位置指定メソッドについて 14 Human Interface
Guidelinesへ の準拠とデザイン性の両立 16 開発の取り組み方についてご紹介 17 現在の取り組み 11 検索機能のアップデート 12 Storyboardを使わずに実装 10 コメント機能で工夫したこと 15 利用したライブラリのご紹介
4.
「ピックコレクション」とは、 LINEのスクショを共有するSNSアプリです。 ピックコレクションとは LINEのスクショ 投稿者 閲覧者 ピックコレクション 4
5.
開発背景 5
6.
問題点 自分が知っている相手の人物像に 過度に期待してしまいます。 リアルな世界 相手は対人関係ごと異なる人格を持っ ています。 デジタルな世界で 実現できること LINEのトーク画面を通じて相手と 他者のやり取りを覗くことで、相 手の多様な側面を捉えることがで きます。 Me Me Me 6
7.
分析と施策 7
8.
巨大SNSは初期にどうやってユーザーを集めたか? 8
9.
最初のユーザーはユーティリティ機能を使うために アプリにアクセスしていました。 9 ユーティリティ機能とはアプリの中で 提供されている簡単に利用できる実用 的なツール
10.
ソーシャル エンタメ ユーティリティ オシャレなフィルターで 良い写真が作れる 有名人や、お気に入りの投稿と 出会う 友達の投稿 友達からのいいね 写真やビデオに音楽を合わせて ミュージックビデオが作れる たくさんの面白い動画を 見つける 友達の投稿 友達からのいいね サービス初期 成長期 10
11.
ピックコレクションではユーティリティ機能として 個人情報を隠す機能を提供しました。 LINEアイコンを自動で特定し 非表示化する機能 ドラック&ドロップで ステッカーや絵文字を追加し、 トーク内の個人情報を隠す機能 1 2 11
12.
個人情報を非表示化する機能をご紹介 12
13.
LINEアイコンを 検出 ステッカーを追加 オリジナル画像 LINEアイコンと ユーザー名が出てしまっている 自動で非表示化 手動で非表示化 🐶 🐶 LINEアイコンの場所を 自動特定し🐶に置き換え ユーザー名の非表示化 🐶 🐶 ステッカーを追加し、 トーク内の個人情報を非表示化 13
14.
LINEアイコン非表示化の 技術スタックをご紹介 14
15.
画像処理 絵文字の配置 オリジナル画像 LINEのアイコンが 見えている状態 LINEアイコンの検出 OpenCVを利用し 画像内から円形の検出します。 検出箇所に🐶を配置 🐶 🐶 画像処理ライブラリ OpenCVから返されるピクセル数を物理 サイズに再計算し、異なる画面サイズや 解像度のデバイスに対応しました。 15
16.
サービス初期を見据えた 投稿閲覧画面の設計 16
17.
解決策 サービス初期に起こる問題 施策 TinderUIを実装しました。 17 ユーザー数が少ない 投稿して反応がない 2度と投稿しない ユーザー1人当たりの いいね量を増やす TinderUIとは投稿を左右にスワイプす ることでいいねか興味がないか選択す るUIのことです。
18.
スワイプ角度に 応じたラベルの表示 スワイプ方向に応じた いいね、保存、 スキップ、リワインド 次の投稿を 表示 18 TinderUIをご紹介 前の投稿に戻す機能
19.
通常のSNS ピックコレクション TinderUIを実装 いいねボタンを 押すのがメンドウ 友達以外に ワザワザいいねしない 投稿ごといいねか興味がないか 決めるので、いいね総量が増加 スワイプで 簡単にいいね いいねすると次の投稿も 表示されるので、 ワザワザいいねをする感を軽減 TinderUIにより解決される問題 19
20.
サービス分析 20
21.
21 投稿型 閲覧型 友人 他人 SNSプロット図 ピックコレクションの立ち位置と施策 『ピックコレクション』 現状の理解 LINE上のやり取りを他者に公開したいと思う人はかなり 少ない。 予想される結果 サービス初期は多くのユーザーが投稿者ではなく、 閲覧者になる。 施策 左のプロット図から、立ち位置が近いTikTokをベンチマ ークにおきピックコレクションを設計しました。 決定 SNS特有の「ユーザー同士の繋がり」ではなく、ユーザ ーに提供するコンテンツの充実化にフォーカスする。
22.
TikTokの設計に基づく施策 22
23.
TikTokの設計と ピックコレクションの施策 TikTokはレコメンド機能に注力してい ました。 開発当初の カテゴリ表示型の投稿閲覧画面 行動データの取得に最適化した 投稿閲覧画面 23 TinderUIを実装 ピックコレクションもレコメンドが重 要になると考えました。 レコメンド機能によりユーザーが「自 分で投稿を探さなくてよい」という体 験を提供していました。 レコメンドの元データとなる行動デー タの取得を最適化するため、 投稿閲覧画面のUIを変更しました。 1スクリーンに複数の投稿を表示 興味に関係なくスクリーン上部の 投稿を開いてしまう 運営側が設定するカテゴリの順番で ユーザーの行動データにノイズが走 ってしまう 1スクリーンに1投稿のみ表示 ユーザーは投稿にフラットな評価が できる いいね、コメントなどのアクション に基づき、好みを数値化しユーザー 情報と紐づけ
24.
TinderUIの 技術スタックをご紹介 24
25.
ライブラリ を導入 カスタマイズ ライブラリの導入 「好き」or「興味がない」を左右のスワイ プで答えるKolodaライブラリを組み込みま した。 ライブラリだけでは 実現できなかったこと 投稿に1枚の画像しか 表示できませんでした。 ライブラリを カスタマイズ 投稿に複数の画像を 表示できました。 Koloda ライブラリ 25
26.
ライブラリをカスタマイズ collectionView 複数画像に対応したカルーセルを実装 UICollectionViewController kolodaView Tinder UIを実装 カルーセルを実装したcollectionViewを KolodaViewに表示させることにより 複数枚の画像保持を実現しました。 投稿に1つの画像のみ 投稿に複数枚の画像を保持 26
27.
TinderUIは投稿閲覧画面に実装しました。 次のスライドでは、 投稿閲覧画面のバックエンド処理についてご紹介いたします。 27
28.
人気投稿と最新投稿をミックスして 表示しています。 レコメンド 同じ投稿を表示させない Firebase上にフラグを立てて、 同じ投稿が表示させないように管理し ています。 レコメンド強化への取り組み ユーザーのアクションによって 投稿への好みを数値化し、ユーザー情報 と紐づけています。 投稿閲覧画面のバックエンド処理 評価されたコンテンツは 人気投稿としてレコメンドに乗り いいね数が増大していきます。 将来的なレコメンド機能開発のため データの蓄積を始めています。 28
29.
実装した機能のご紹介 29
30.
匿名アカウントの自動作成 SNS、SMS、Eメールにより 永久アカウント化 機能一覧 1/4 アカウント 投稿 複数枚の画像を投稿 LINEのアイコンを自動検出し 絵文字に置換 絵文字、ステッカー、コメント、タグ の追加 投稿後の編集 テキスト、ハッシュタグ編集 投稿削除 30
31.
複数枚に対応したカルーセル表示 スワイプによる「いいね」などのアクシ ョン 人気投稿と最新投稿をミックスした表示 機能一覧 2/4 投稿閲覧画面 コンテンツアクション いいね、保存、シェア コメント投稿 コメントリプライ 検索 リアルタイム検索機能 検索ワードを入力中に リアルタイムに検索結果を表示する 31
32.
ユーザーフォロー アンフォロー 機能一覧 3/4 フォロー 通知 いいね、保存、コメント、 フォロー通知 連続した通知のブロック機能 PUSH通知 プロフィール編集 プロフィール画像、名前、自己紹介文の 編集 32
33.
投稿、いいね、保存をした投稿をリス ト表示 フォロー、フォロワーのリスト表示 機能一覧 4/4 ユーザーフィールド ユーザー保護 ブロック機能 違反投稿/ユーザーの報告機能(外部 ツールを含む) アプリ使い方ガイド 初回起動時、アプリの使い方ガイドが表 示されます 33
34.
コメント機能で工夫したこと 34
35.
ユーザー心理 日本のSNS利用者はランキングや他者の コメントに興味を示すと言われています。 シンプルなコメント機能 最初に実装したコメント機能は投稿にコメ ントを送るだけのシンプルなものでした。 リプライ機能を実装 コメントに対するリプライ機能を実 装しました。リプライコメントに、 いいねを送ることもできます。 これによりコメント欄の活性化を促 しました。 35
36.
検索機能のアップデート 36
37.
ユーザー心理 検索するまで結果がわかりません。 Swiftのみで 実装した検索機能 検索ボタンを押すまで検索結果が表示さ れない仕様でした。 ライブラリを導入した 検索機能の実装 検索ワードの入力中に リアルタイムに検索結果を表示され るようになりました。 彼女とケンカ 彼女と 彼女とケンカ 彼女と別れ話 彼女の妹 彼女の両親 37
38.
検索ワードを入力する手間が 省けます。 ユーザーメリット 検索体験の向上 投稿との出会い 検索の途中に 類似コンテンツを見つけられます。 あいまい検索に対応 入力ミスをしても 検索結果が表示されます。 検索ワード:呪術回戦 検索結果 :呪術廻戦 38
39.
Algoliaライブラリ Swiftコード(Firestoreクエリ) メリット 高度な検索機能
実装コスト:低 デメリット 実装コスト:高 大量のデータに対応できない 当初、Swiftコードで実装していましたが、検索対象が数千件を超えると遅延が起こると確認できたため、Algoiaの導入 を決めました。 39 検索機能のアップデートに向けた技術選定
40.
検索と結果の取得 システム構成図 40 Firebase 投稿データを保存 投稿データの追加を検知 投稿データのコピーを作成 Cloud Functions Firestore ピックコレクション Firebase 検索と結果の取得
41.
Storyboardを 使わずに実装 41
42.
Storyboardを 使った開発のデメリット GitHub上で変更履歴を確認しずらい Storyboardを 使った実装 ビジュアルエディタを使い、画面のレイアウ トを直感的に設計するコーディング方法 コードのみを使って開発 GitHub上でコードの履歴が見やすく なった 42
43.
共通のデザインや機能をモジュール化 し、再利用することで新しい画面や機 能を効率的に追加しました。 共通のスタイルのUIパーツを利用する ことでアプリ全体の統一感を保つこと ができました。 コードのみを使った開発で工夫したこと UIパーツのモジュール化 Githubを利用したバージョン管理 各機能ごとに細かなブランチを切り、 プッシュを行いました。 開発初期は巻き戻し作業が多く時間を 要していました。これを改善するため にコードのみの実装に切り替えました。 バグが発生した時も素早く復元ができ 作業時間を大幅に短縮しました。 レスポンシブ対応 ユーザーの様々なスマホサイズに対応 するため、Auto Layoutを取り入れま した。 これによりiPhone
SEからiPad Proま で、デバイスサイズに応じてUIパーツ が適切に配置されるようになりました。 43
44.
汎用的に利用できるコードはモジュール化を進めました。 最初は1ヶ月ぐらいかけて作った機能も、違う画面では数分で追加できます。 次のスライドでは、 特に利用頻度が高く、AutoLayoutに対応したUIパーツの位置指定メソッドにつ いてご紹介します。 44
45.
UIViewの拡張メソッド 利用例 効果 extension
UIView { func anchor(top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil, paddingTop: CGFloat = 0, paddingLeft: CGFloat = 0, paddingBottom: CGFloat = 0, paddingRight: CGFloat = 0, width: CGFloat? = nil, height: CGFloat? = nil) { translatesAutoresizingMaskIntoConstraints = false if let top = top { topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true } if let left = left { leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true } if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true } if let right = right { rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true } if let width = width { widthAnchor.constraint(equalToConstant: width).isActive = true } if let height = height { heightAnchor.constraint(equalToConstant: height).isActive = true } } } textLabel.anchor(top: view.topAnchor, left:view.leftAnchor,paddingTop:100, paddingLeft: 50) 好きな位置に UIパーツを配置すること ができます。 45
46.
UIViewの拡張メソッド 利用例 効果 func
center(inView view: UIView, yConstant: CGFloat? = 0) { translatesAutoresizingMaskIntoConstraints = false centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: yConstant!).isActive = true } textLabel.center(inView: self) UIパーツを中央配置しま す。 func centerX(inView view: UIView, topAnchor: NSLayoutYAxisAnchor? = nil, paddingTop: CGFloat? = 0) { translatesAutoresizingMaskIntoConstraints = false centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true if let topAnchor = topAnchor { self.topAnchor.constraint(equalTo: topAnchor, constant: paddingTop!).isActive = true } } textLabel.centerX(inView: likeButton) UIパーツをX軸方向に中央 配置します。 func setDimensions(height: CGFloat, width: CGFloat) { translatesAutoresizingMaskIntoConstraints = false heightAnchor.constraint(equalToConstant: height).isActive = true widthAnchor.constraint(equalToConstant: width).isActive = true } textLabel.setDimensions(height: 15, width: 15) UIパーツの縦横幅を指定 します。 46
47.
Human Interface Guidelinesへの準拠 とデザイン性の両立 47
48.
z 問題点 控えめなボタンに タップ領域は44pxにしつつ、透明の 余白を作ってボタンを小さくしデザ イン性を保ちました。 48 Human Interface
Guidelines 44px 45-57px 人差し指の平均幅は45〜57px。 ボタンの大きさは44px以上が推奨 されています。 ボタンを縦に積むと 圧迫感が出てしまう 44px タップ領域 ボタンサイズ 36px ボタンサイズ 44px
49.
利用したライブラリのご紹介 49
50.
ライブラリ 説明 AlgoliaSearchClient 高度な検索機能を提供するライブラリ AuthenticationServices
認証サービスに関するライブラリ CryptoKit 暗号化およびハッシュ関数を提供するフレームワーク Firebase FirebaseプラットフォームのiOS SDK FirebaseAuth Firebaseの認証サービスを利用するためのライブラリ FirebaseDynamicLinks Firebaseのダイナミックリンクを扱うためのライブラリ FirebaseFirestore FirebaseのCloud Firestoreデータベースを操作するためのライブラリ FirebaseMessaging Firebase Cloud Messaging(FCM)を扱うためのライブラリ FMPhotoPicker 写真およびビデオの選択および表示を容易にするライブラリ GoogleSignIn Googleアカウントを使用したサインインをサポートするライブラリ JGProgressHUD ユーザーフレンドリーな進捗表示を提供するユーティリティ Koloda Tinder UIのユーザーインターフェースを作成するためのライブラリ NotificationCenter 通知センターに関するライブラリ NVActivityIndicatorView カスタマイズ可能なローディングインジケーターを提供するライブラリ opencv2 画像処理を得意としたOpenCVライブラリ Parchment ページングをサポートする柔軟なタブコントロールライブラリ SDWebImage 非同期でウェブイメージをロードおよびキャッシュするためのライブラリ 50
51.
開発の取り組み方についてご紹介 51
52.
工夫して取り組んだこと 1/4 構成案の事前作成 実装前にAdobeXDで構成案を作成し ました。 UIパーツの配置に迷うことがなくなり 効率的に開発をすることができました。 データベース設計図を作成 Firebase内のデータ構造を設計図に起 こして開発を進めてました。 これにより、データ間の整合性や命名 規則が担保されるようになりました。 52 Collection: 'users' -
Document ID: 'uid' - Field: 'fullname' - Collection: 'alreadyRead' - Document ID: 'postID' エラーが発生した際、コード修正に入 る前にエラー情報を基に問題の仮説を 立てることを意識しました。 簡単なエラー修正でも、その根底にあ る原因まで辿り着くことで、大きなト ラブルを未然に回避できると考えてい ます。 エラーに仮説を立てる
53.
他SNSの徹底的な調査 新しい機能を開発する前に、SNS市場 の動向を把握するため、10数個のSNS を確認しました。 これにより、UIや必要な挙動、機能の 意味を理解した上で開発に取り組むこ とができました。 53 工夫して取り組んだこと 2/4 Trelloを利用してタスクごと進捗や参 考にした記事を記録しました。 これにより、タスクを一時中断した後 も、『思い出す』という工程を省き、 迅速に開発を再開できるようになりま した。 Trelloを活用したタスク管理 アイコンやボタンなどはSF Symbols から取得することを意識しました。 他のアプリとも一貫性をもつことで、 使い心地の向上を図ました。 シームレスなUIの実現 Appleが提供するアイコンセット
54.
人気SNSアプリの色味、行間、パーツ サイズなどスポイトと定規を使い取得 し、自分のアプリに反映させました。 人気アプリのUIなら、多くのユーザー が使い方を慣れていて、快適に利用で きると考えています。 デザインをオマージュ 汎用機能を量産 多用するAPIメソッドやUIコンポーネ ントは構造体やextensionの中に格納 し、モジュール化をして開発工数を削 減しました。 54 工夫して取り組んだこと 3/4 Webスクレイピング Pythonを用いたWebスクレイピングで ネット上に掲載されているLINEトー クのスクリーンショットを一括で自動 収集しました。 興味がある技術はSwift以外にも積極的 に学習し開発に取り入れました。
55.
MVCモデルで実装しました。 Model部分にAPIメソッドを集約した ことによりコードの重複を回避し、保 守性を向上させました。 MVCモデルの活用 工夫して取り組んだこと 4/4 実装する前に仮説を立てる 新しい機能を開発する際、完成までの ステップを考え、現役iosエンジニアに レビューを依頼していました。 新しいアプローチの提案や問題解決の ためのコミュニケーションなど独学だ けでは得られなかった知識や体験を積 むことができました。 55 GitやCocoaPodsなどの管理はターミ ナルを通じて行いました。 また、shellやpythonなどのスクリプト をターミナルを用いて実行することで、 開発の幅が広がったと感じています。 ターミナルの利用
56.
現在の取り組み 56
57.
SNSやサービス紹介サイト、技術系ブ ログを利用しアプリのプロモーション を進めています。 プロモーション 57 現在の取り組み レコメンドシステムの強化 あるユーザーと他のユーザーとの間の 類似性をPythonで計算し、類似したユ ーザーが好んでいるアイテムを推薦す るシステムの構築をGoogle Cloud Platform内で進めています。 行動ログを使って改善 Analyticsを入れて、ユーザーがどこで 離脱しているのか分析し、改善サイク ルを回しています。
58.
ありがとうございました 58
59.
ピックコレクションへのリンク 59
Notes de l'éditeur
いいねをおす
Télécharger maintenant