Download to read offline
![// テキストの属性を設定する
var categoryTitleAttributes = [NSAttributedString.Key : Any]()
categoryTitleAttributes[NSAttributedString.Key.font] = UIFont(
name: AppConstant.CATEGORY_FONT_NAME,
size: AppConstant.CATEGORY_FONT_SIZE
)
// 引数で渡された文字列とフォントから配置するラベルの幅を取得する
let categoryTitleLabelSize = CGSize(
width: .greatestFiniteMagnitude, height: AppConstant.CATEGORY_FONT_HEIGHT
)
let categoryTitleLabelRect = title.boundingRect(
with: categoryTitleLabelSize, options: .usesLineFragmentOrigin,
attributes: categoryTitleAttributes, context: nil)
パンくずリスト型表現のアプローチ例(1)
配置したUILabelを幅 = 表示されるテキストとの長さをする処理がポイント
基本的な方針としてはUICollectionViewやUIScrollView + UIStackViewを利用
UIStackView
UIScrollView
Home ▶︎ Contents
テキストが入ります ▶︎
⭐ sizeToFit()・sizeThatFits(CGRect)を活用
AttibutedTextの場合はBoundingRectから算出する：
※ この例はパンくずリストへ表示される階層が決まっている場合テキストの長さ＋矢印の長さ
1つのボックスの幅を決定するための基本方法：
AutoLayout
幅制約値更新
(Equal Spacing)](https://image.slidesharecdn.com/iosdcrcday2-190918093952/85/Web-iOS-Swift-10-320.jpg)
Uploaded byFumiya Sakai
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
iOSDC Reject Conference Day2の登壇資料となります。 タイトルの通りなのですが、私のキャリアは割と複雑かつ一貫性が全くないキャリアにも見えるかもしれません。「エンジニア」になり、iOSアプリ開発という分野でのキャリアを歩んでいくことを決めた際に、「これまでの知見を捨て去るのではなく、上手に生かした戦略を見出そう」というテーマを持って今日まで幸運にもiOSアプリ開発に携わることができています。 この発表では、これまでの経験や興味・関心をベースとした切り口からどのようにSwiftひいてはiOSアプリ開発に対してのアプローチをしたか？そしてSwiftと向き合い、楽しみ方を見出したかという点についてお話できればと考えております。
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. テキストの取り扱い問題解決のためのアプローチ例(2) 例2. サーバー側と協力することで表示にコンテンツにある程度柔軟性を持たせる 表示データをサーバー側でMarkdown形式で保存させておく SwiftyMarkdown https://github.com/SimonFairbairn/SwiftyMarkdown⭐ Webサイトとアプリでも表示を合わせやすくする形式 シンプルで編集者等が更新しやすい形式： Redcarpet https://github.com/vmg/redcarpet サーバー側のコンテンツについて はMarkdown形式を保存・表示。if leturl = MediaContents.url, let md = SwiftyMarkdown(url: url) { md.setFontNameForAllStyles(with: "HiraKakuProN-W3") md.setFontSizeForAllStyles(with: 13.0) md.h1.fontName = "HiraKakuProN-W6" md.h1.fontSize = 18.0 … markdownTextView.attributedText = md.attributedString() } UITextViewを継承したMarkDownTextView型 Webフロント側の表示にRedcarpetを利用する。 App側 Web側
- 9.
- 10. // テキストの属性を設定する var categoryTitleAttributes= [NSAttributedString.Key : Any]() categoryTitleAttributes[NSAttributedString.Key.font] = UIFont( name: AppConstant.CATEGORY_FONT_NAME, size: AppConstant.CATEGORY_FONT_SIZE ) // 引数で渡された文字列とフォントから配置するラベルの幅を取得する let categoryTitleLabelSize = CGSize( width: .greatestFiniteMagnitude, height: AppConstant.CATEGORY_FONT_HEIGHT ) let categoryTitleLabelRect = title.boundingRect( with: categoryTitleLabelSize, options: .usesLineFragmentOrigin, attributes: categoryTitleAttributes, context: nil) パンくずリスト型表現のアプローチ例(1) 配置したUILabelを幅 = 表示されるテキストとの長さをする処理がポイント 基本的な方針としてはUICollectionViewやUIScrollView + UIStackViewを利用 UIStackView UIScrollView Home ▶︎ Contents テキストが入ります ▶︎ ⭐ sizeToFit()・sizeThatFits(CGRect)を活用 AttibutedTextの場合はBoundingRectから算出する： ※ この例はパンくずリストへ表示される階層が決まっている場合テキストの長さ＋矢印の長さ 1つのボックスの幅を決定するための基本方法： AutoLayout 幅制約値更新 (Equal Spacing)
- 11. パンくずリスト型表現のアプローチ例(2) テキストを利用した表現方法についてはあったけどライブラリは少ない… ライブラリを活用する場合の例やその他の小ネタ集 表現によっては作り方がなかなか悩ましい部分の例 Home Category Design https://speakerdeck.com/rikusouda/osswoyu-tenakaraiosahuritehankusurisutowoshi-xian-sita ⭐ OSSを育てながらiOSアプリでパンくずリストを実現した https://medium.com/@thenamesjames/swift-enums-toasted-breadcrumbs-46c1caac855a ⭐ Swift Enums: Toasted Breadcrumbs UIBezierPath() (ベジェ曲線)を利用して矩形を描画する 綺麗な矢印形を表現するために：
- 12.
- 13. Webとアプリ違いに関するちょっとした余談 Github等でリポジトリを探す前にアニメーション表現や名称や探すこともある これは良さそう！と思った表現をWebからヒントを得る場合もあります 全く同じ表現をするものではあるけれど、Webとアプリでは難易度が異なる場合に注意をする 実はWebでのUI表現ですでに使われているものがあるかを探ってみる： ⭐ UITableViewに配置したサムネイル画像をParallax表示させる（Webだと背景画像を動かすケースが多い） ⭐ カメラロールに保存されている画像一覧からドラッグ＆ドロップで画像を選択（Webのファイルアップロードが元） ⭐ ハンバーガメニューとドロワーメニューの表現（Webサイトの表示でもこちらも良く使われている） …もちろんこの他にも様々な表現があります。
- 14. アプリ側とバックエンド側処理を組み合わせる 前述したMasonryスタイルレイアウト調整を実行する場合の事例と生じた問題 UI側の処理と組み合わせてレイアウト調整を行う場合のアプローチ extension ViewController: UICollectionViewDelegateFlowLayout{ // MEMO: セル1つあたりのサイズを決定する部分 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { // TODO: セルのサイズを返却するための処理 } ����・・・（省略）・・・ } 縦横比によって画像部分の高さが変化する場合： セル1個分の構成 ●●●●●●●●●● ●●●●●●●●●● △△△△△△△△△△ △△△△△△△△△… xxxxxxxx 2行固定 2行固定 1行固定 縦横比 を維持 このメソッドの中で最初は、画像の実サイズを取得して計算し たがパフォーマンスに影響が出てしまったので断念した。
- 15. [ { "meals": [ { "id": 1, "summary":“サマリーが入ります。", "image_url": “https://s3-ap-northeast-1.amazonaws.com/…” “image_width”: 480, “image_width”: 720, ・・・（その他JSONで返される値が続く）・・・ }, アプリ側とバックエンド側処理を組み合わせる バックエンド側で返すJSONデータの中に画像のサイズ情報を持たせる UI側の処理と組み合わせてレイアウト調整を行う場合のアプローチ ⭐ sizeForItemAtでは最小限の計算で済むようにする セル表示データのJSONの例： セル1個分の構成 ●●●●●●●●●● ●●●●●●●●●● △△△△△△△△△△ △△△△△△△△△… xxxxxxxx 2行固定 2行固定 1行固定 縦横比 を維持 アプリ内の重い計算を回避するため （もっと良いアプローチがあるかも）
- 16. アプリ側とバックエンド側が絡む部分のデバッグ サーバーサイドからPush通知を送信する処理で起きた事例 両方のことをある程度理解しないと問題の切り分けがしにくい事例 ※ はじめは特定の条件下で起こる事例との見立てではあったが届かない原因を切り分けられていなかった。 機能開発時の不具合報告： ② 失敗するケース ① 成功するケース Firebase Cloud Messaging を利用したプッシュ通知 App側 サーバー側 ② サーバーから送信 ① Firebaseから送信 Google APIs Client Library for PHPを利用している https://github.com/googleapis/google- api-php-client ⭐ Laravelを利用する例 https://laravelcode.com/post/laravel-56- google-firebase-notification-in-android ・Firebaseからの直接送信 ・定型文をサーバーから送信 ・画面遷移先の判定用パラメー タをつけると届かなくなった ちょっと疑われてしまいそう？
- 17. アプリ側とバックエンド側が絡む部分のデバッグ 片方だけの知識ではすぐには見抜きにくいところだった。 実は本当に小さなミスによって生じていたことがわかった FCMに送信するJSONの形式： 原因はキャスト漏れであった（Int →String）： { "message": { “token”: "(Target Device Token)", “notification": { "title":"タイトルメッセージ", “body":"タイトル本文テキスト" }, "data" : { "parameter" :“Example” } } } https://firebase.google.com/docs/cloud- messaging/ios/receive?hl=ja 絡み合うケースの調査は大変
- 18.
- 19. アプリ側とバックエンド側が絡む部分の設計 メールに添付されたURLを利用してアプリのパスコードを解除する APIサーバー側 アプリ側 送られたリクエストから 該当ユーザーへメール送信 パスコード解除用の メール送信リクエスト ※ 有効期限を短めにする等の配慮 ユーザーが送られたメール に記載されたURLをタップ （解除用トークン入りURL ） 以前に利用したパスコードを破棄 URLスキーム経由で開いて パスコード解除リクエスト 1. ユーザー登録機能を有する 2. DBへメールアドレスを保持している 1. APIサーバー側と通信する機能を有する 2. URL経由でアプリを開ける設定 送られたパスコード解除 リクエストが正しいか判定 リクエストが正しい場合 パスコードを解除する
- 20. iOSアプリを取り巻くネイティブ以外の手法 ReactNativeやReactJSの思想を元に今後利用したい手法を考える 例. ReSwiftの利用検討とReduxの理解 iOSApp + ReduxReactNative サンプルアプリ の開発や記事等 でのアウトプッ トで試し打ち 活かせる点の模索 Cross Platformの検証
- 21.
- 22. 実装とドキュメントを合わせて徹底的に叩き込む 実務の中でいつ遭遇してもおかしくないものは予習しておきたい ReSwift: https://qiita.com/fumiyasac@github/items/f25465a955afdcb795a2 ⭐ ReduxとSwiftの組み合わせを利用したUIサンプル事例紹介 ReactNative: https://qiita.com/fumiyasac@github/items/e27a5901dde1dbcb2086 ⭐ ReactNative+Redux+NativeBaseでつくるサンプル実装をのぞく RxSwift: https://qiita.com/fumiyasac@github/items/e426d321fbb8ab846bb6 ⭐ RxSwiftとUIライブラリの表現を組み合わせたサンプル紹介 基本的な用法や目的パターンを知る
- 23.
- 24.
- 25. なぜにコード以外の部分にも積極的に目を向けるのか？ 1. ある程度どのような形で動いているかを知ることで事情を正しく把握できるように。 ポイントを明確化するだけでなく、知見として溜まる活動もまた仕事 2. 後回しになりがちな部分に対してのアフターケアやナレッジの共有と伝承。 ⭐ 実際に生で発表を聞いていましたが、むちゃくちゃ素敵な発表でした。 https://www.slideshare.net/akiko_pusu/devsumi-2019 ことばだけでは足りません、描いてシェアして伝えていこう！ (DevelopersSummit 2019の登壇 by 高野明子様) 3. 開発はチームで行うもの。だから仕組みかとノウハウへ昇華する下準備。 https://daily-postit.hatenablog.com/entry/2019/02/25/002330
- 26.
- 27.
- 28.