はてなブックマーク

1. はじめに 皆様お疲れ様です。「iOS Advent Calendar」の24日目を担当させて頂きます、fumiyasac(Fumiya Sakai)と申します。何卒よろしくお願い致します。 今回はUI実装に関するトピックスの中でも、簡単な画面のパスコードロック機能を実装したサンプルを作ってみましたので、その際にポイントになる実装部分やUI面で配慮をした部分についても紹介できればと思います。ファイナンス系のアプリをはじめとしたアプリ内でお金のやりとりが発生するものや、ヘルスケアアプリ等でもあまり他人に見られたくないセンシティブな情報を持つようなアプリにおいてはよく見かける機能の1つですが、AppDelegate.swift部分のライフサイクルを利用する点やユーザーの使いやすさを実現するために画面に関する処理にも工夫が必要な部分でもあるので、実際のアプリに導入する際にはこのサンプルだけで

1. はじめに 個人的にReactNativeを(片手間で)触り初めてから約1年が経過しまして、その際にもう一度始めたばかりの時になかなか理解ができなかった点を中心に復習をしてみた際の記録を改めて自分なりにまとめてみることにしました。また補足として現在の本業(iOSでSwift開発)にも活かすことができた部分についても少し紹介ができれば幸いに思います。 ※ すでにReactNativeを活用している方には物足りない内容かもしれませんが、何卒ご容赦下さい。 ReactNative + Redux + NativeBase + Firebaseを組み合わせたサンプル ※ 上記のサンプルに関しても手を入れた場合には追記するように致します。 今回の記事のポイントとなる部分を「React Native Meetup #8」にて発表する機会がありましたので、その際に使用したスライドもここに共有致します

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに iOSの人気アプリTinderで採用されている、「好き」or「嫌い」（Yes or No）を左右のスワイプで答えるようなUIは、シンプル＆カジュアルでありながらもその斬新さ故に出た当時から今もなお注目されているUI表現の1つかと思います。また同様な動きを表現するためのUIライブラリについても数多くあることからも、アプリのUXという点においても、その心理的な効果や応用可能性への関心が高いことがうかがえます。 “業界を変えた”UberとTinder 2つの優れたUXデザイン Tinder風UIがUXを高める4つの行動心理学的

1. はじめに 皆様お疲れ様です。Swift AdventCalendarの9日目を担当させて頂きます、fumiyasac(Fumiya Sakai)と申します。何卒よろしくお願い致します。 以前に作成した記事で、できるだけUI系のライブラリを用いないでアニメーションを盛り込んだサンプルの実装に関する紹介をしたのですが、今回の記事はその番外編として動きやアニメーションが美しいライブラリを活用してUIを構築した際の事についての紹介記事になります。 できるだけ、Swift4にすでに対応したUI系のライブラリを組み合わせて作成してみました。（記事の内容に関してはあとで少し手直しする予定です） Githubでのサンプルコード： Swift4でUIライブラリを組み合わせて作成したUIサンプル サンプルの全体的な動きの動画： 1分間のサンプルの動きを解説した動画 ※こちらのサンプルはPullReque

1. はじめに 最近はなかなかまとまった時間が取れずにかなりサボり気味でしたが、ぼちぼち再開していければと思っています。 現在は本業もiOSエンジニアとなり、XCodeやSwift（たまにObjective-C）と戯れながらUIをあれこれ考えながらの毎日を送っています。最近もiPhoneXが日本でも発売されたり等もあったり、その対応をどうするか等も今考えないといけないトピックスになっているので、色々と試行錯誤をしています。 今回は、UIのスクロールやタブUIの切り替えを伴うようなコンテンツにて動きの中でポイントとなりそうな部分にアニメーションを入れたサンプルの紹介になります。 ※ ボリュームの関係で前編・後編を分割してお送り致します。 また恐縮ですが実装の際に書いたノートの内容も併せて掲載する形にしようと思います。 Githubでのサンプルコード： ライブラリを使わないでアニメーション表現

※サンプルではRedux不使用の為、ステートの管理はそれぞれのコンポーネント内で行っています。 ※サンプルのpackage.jsonの記載の中でreactのバージョン設定の部分とreact-native-router-fluxに関してはバージョンを固定する為に^(キャレット)を外しています。 ★2-3. 今回使用したサンプルの画面設計図 こちらはおまけになりますが、今回のサンプル実装に関する設計図になります。 あまりReactNative特有の処理はほとんどないのでUIモックに近い形になってはいますが、ご参考になれば幸いです。 3. NativeBaseの基本概要について こちらはiOS/Androidでの端末によるデザインの違いをよしなにすることができるUI Component Libraryになります。 このライブラリで提供されているコンポーネントに関しては、基本的にはReactNat

はじめに 個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。 今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。 あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも

1. はじめに こちらの記事は、前回の記事で紹介したRxSwiftでObserverパターンの例とUITableViewの例に関する実装解説の続編になります（あいだが1週間ほど空いてしまってすみませんでした。。。）今回は少し難易度を上げてAPI通信を伴うサンプルの実装（写経）を行なったものになります。 RxAlamofireを用いたものと、FoursquareのAPIクライアントのライブラリを使用してテキストフィールドから入力した際に、少し時間が経過したタイミングで入力した文字列に該当するデータを一覧で表示するタイプのサンプル2種類に関する実装について、前回同様にできる限り自分の言葉でのドキュメンテーションと実装時に参考にした資料等をまとめることができればと思い、まとめた次第です。 ※前編の記事は下記になります。 RxSwiftでの実装練習の記録ノート（前編：Observerパターンの例と

1. はじめに 昨年からなかなか着手ができなかった部分でもあるRxSwiftに今年こそは実際にサンプルを作って、最初の触りの部分や感覚を掴んで見たいという思いから、自分なりの取り組みではありますがRxSwiftに関するサンプルを実装（写経）をした上で、できる限り自分の言葉でのドキュメンテーションと実装時に参考にした資料等をまとめることができればと思い、まとめた次第です。 2. 本サンプルに関して 今回のサンプルに関しては【Warming Up】〜【Chapter3】の現在全4パターンありますが、この記事内では比較的実装コード量が少なくかつ通信が伴わないものに関しての解説を行なっていく形になります。 Githubのリポジトリ： RxSwiftの練習記録ノート（Swift3.xバージョン） サンプルのキャプチャ画像： 今回解説を行うサンプル： 【Warming Up】テキストフィールドやボタン

1. はじめに 皆様お疲れ様です。AdventCalendarの20日目を担当させて頂きます、fumiyasac(Fumiya Sakai)と申します。何卒よろしくお願い致します。 今週末はいよいよクリスマスに差し掛かり、私のお世話になっている現場の周囲や帰り道でもクリスマスデコレーションやクリスマスソングに触れることが多くなり、「今年も終わりか...」と少し切なさも覚える今日この頃です。 Qiitaに投稿している内容も元々UI周辺の実装に関するものが多くを占めることもあり、今回はまたUIまわりのサンプルに関する実装の解説を行っていきたいと思います。 今回は普段からよくチェックしているFacebookやTwitterでよく見かけるようなUITableView内の写真配置に関するレイアウトの実装で、画像の枚数に合わせて写真の形が変化して配置されるようなレイアウトを実装する際の解説を中心に行っ

1. はじめに 「Swift愛好会 Advent Calendar 2016」の9日目を担当するfumiyasac(Fumiya Sakai)です。 最近ではUIまわりのこと「アニメーション・画面のデザインの構成に関すること・ライブラリ実装のDIY」に関するサンプルや登壇を行ったりもしています。 （Swift愛好会では「UI番長」の称号を頂き、照れるやら恥ずかしいやらですが…笑） 僕個人としては、EC系やメディア系のアプリをよく入れて使っているのですが、このようなアプリの多くでは「写真を生かしたレイアウトや心地よいアニメーション」がUIの随所に散りばめられていてなおかつ綺麗にまとまった形になっているものを多く見受けます。またそういうアプリのUIを見ると「自分でも真似をしてみたい！」という気持ちが湧いてくることも多かったように思います。 というわけで今回は自分の憧れや実装をしてみたいと思った

はじめに 以前にRailsでの開発現場を経験したことや最近Rails5で新しくAPIモードが追加されたこともあり、自分でも気になっていた部分や実装の際のポイントやそれを取り巻く周辺知識や概念を自分なりにまとめたものを「Ruby / Rails ビギナーズ勉強会 第16回 #coedorb」での登壇の際に発表してきました。 このような機会を本当にありがとうございました！ 登壇の際に使用したスライドはこちら Githubのデモサンプル Coedo.rb マイクロサービスアーキテクチャ等の概念に関する部分については、こちらの記事では割愛していますがこの記事では登壇の際にデモを行った際のサンプルに関して深堀りしてまとめたものになりますので、上記の資料と併せて活用して頂ければ幸いに思います。 1. サンプル概要 Rails5のAPIモードで作成したAPIサーバーにおいて、静的なHTMLページからファ

（こちらのサンプルに関して） ※1 UIの見た目や動き方に関しては 「以前の記事で紹介させて頂きましたサンプルと同じもの」 になります。 ※2 こちらのサンプルはPullRequestやIssue等はお気軽にどうぞ！ ※3 まだまだSwift3.0の書き方が甘い部分も多々あるかと思いますがその際もご指摘をお待ちしております。 （Swift3へ書き直しの際の参考資料） 今回のサンプルはSwift3.0で以前のサンプルを書き直した形でレイアウトは特にそのままです。（純粋にコードだけを直した感じです） SwiftでContainerViewとStoryboardをフル活用して複雑なUIを実現する際の実装ポイントまとめ [iOS][Swift]Swift 3.0の変更点まとめ [Swift 3.0]標準ライブラリがAPIガイドラインに適用された話 2. Swift3.0とSwift2.2での実装の

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに 週末に参加した勉強会で、「UI作成の上でコードで組むか？Storyboardを活用するか？」という話題で盛り上がりました。Swift初学者向けの書籍の場合ほとんどの書籍では画面のレイアウトにStoryboardを使った手法がケースとして多いのですが、実務では特に大規模な開発になる場合コードでUIも構築するケースの方が多いかと思います。「Storyboardでは複雑なUIを作成するのは難しいのでは？」と疑問に思われるかもしれませんが、ContainerViewと組み合わせることによって画面遷移がイメージしやすく、他のアプリ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

1. はじめに iOSアプリを開発するにあたって機能の実装と同じくらいに頭を悩ませる部分でもありながら、楽しい？部分でもあるのがUI設計だと思います。しかしながら、CocoaPodsでインストールできるライブラリの中でもUIやアニメーションに関わるものは多数あり、用途によっても組み合わせも色々です。 私自身はiOSアプリを開発する際には、実はできるだけライブラリに頼らないで作れないか？を考えるタイプではありますが、公開されているライブラリのGithubのREADMEをチェックしたり、実際の挙動を確認するために下記のサイト等をチェックしています。 iOS Cookies UIに関するライブラリに限らずとも、ライブラリを使う際には最新のバージョンへSwiftへの対応がなされているかをチェックしておいて下さい。(今回は元々Objective-Cで作られていますが、Bridging-Headerで

1. はじめに アプリ開発を始めたての頃に一番最初に作成したのが日本の祝祭日を考慮したカレンダーの作成をしたことがきっかけで、その後アプリ開発へ本格的にのめり込んでいったこともあり改めてSwiftできちんと書き直してみようと思い立ち、今回着手をしました。（その当時はObjective-Cで書いていました） handMadeCalendarAdvance CalculateCalendarLogic(CocoaPodsへのリンク) 今回のサンプルの動きは下記のようになります。 カレンダーそれ自体に関してはシンプルなものにはなりますが、もしカレンダーアプリ等で活用したい場合や実装の参考にする場合等で活用して頂ければと思います。 実装及びデバッグに関しては@akio0911さんに多くのお力添えを頂きまして本当に感謝をしております。遅くはなってしまいましたが、本当に感謝しておりますm(_ _)m

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨年の投稿の中で、iOSアプリでも特にメディア系のアプリよくあるようなUIを実現した簡易サンプルに関する説明をしました。（まだまだ拙い記事ながら100ストック以上していただき本当に感謝しています。） メディア系アプリでよくあるUIを実現した簡易サンプル ある程度複雑なUIを実現するためにはライブラリを使う方が開発工数や時間の短縮につながることが多いですが、ライブラリに対してカスタマイズを施したい場合や一部分の機能や動きだけを再現できていればよい場合には、UIを構成しうるクラスに対する理解や使い方をある程度知っておく必要がありま

はじめに 春らしい陽気の季節になってきました。4月からの新生活に向けての準備をしたり等忙しい時期がしばらく続くかと思いますが皆様いかがお過ごしでしょうか？ 自分がiPhoneアプリ開発をスタートした際にサンプルで作成していたのがクイズアプリでした。最初はただ4つの選択肢から正しいものを一つ選ぶだけのとってもシンプルなアプリから、いろいろ手を加えてアレンジしてみた結果、昨年に下記のようなアプリをリリースしました。 リリースしたアプリ名：10秒虫食い算 こちらのゲームの概要としては「10秒×10問の虫食い算があり（？）に入る数字を1〜9の中から選択して正解とスピードを競う」ミニゲームアプリとなっています。ただの四則演算だと思ってやってみると時間制限もタイトなので結構難しいと思います。最初はそのスピードに面食らいますが、暗算や脳トレ系のクイズが好きな方は意外とハマるかもしれません。 ※不具合やお

はじめに（Advent Calendarで書いたネタの続きとおまけ） 以前にLaravel5のAdvent Calendarにて「Laravelの環境設定＆開発体験自作Laravel5.1ミニマムチュートリアルまとめ」を書きました。この記事については基本的なデータの追加・変更・削除のチュートリアル的なサンプルになりますが、その際にも使用したファイルアップロード用のライブラリである「Laravel-Stapler」に関しての補足記事になります。 以前のサンプルはローカル環境で動かすことを前提としていたので、アップロードした画像ファイルに関してはLaravel内のpublic配下に保存されるようにしていました。 自分で借りたレンタルサーバーやVPSを利用する場合はこの設定でも問題は特にありませんが、heroku等のクラウドサーバー上にLaravelのアプリケーションを構築する場合には、アップロ

はじめに 昨年からRuby on Railsでもお仕事をする機会があり、その中で自分が得たものや自分で作成したアプリの中で使用している技術やTipsに関しても少しずつQiitaに公開していければと思います。今回は自分が公開している簡易家計簿アプリ「Coffre」でも使用している画像のアップロードに関しての実装方法についてまとめてみたいと思います。 Coffre公式ページ Coffreのダウンロードはこちら Coffreのアプリ概要や設計・取り組んでみた感想等について 具体的に使用している部分に関しては、管理画面側の「お知らせ・Coffreのコラム」部分についてheroku + PaperClip + AWS S3での追加・変更画面にて画像アップロードを使用している部分になります。 （参考）Coffre管理画面： （Rails歴は個人的に触ってみるのも合わせて1年程度の経験しかありませんが、

はじめに 私自身は公開しているアプリやサンプルに関してはCoreDataやRealmを活用する場合が多くあります。その中でも実際に処理を書いてみて「どこまで違うものなのか？」ということを自分なりにサンプルアプリを通じて制作してみることで見えてくるものがあるのではないか？と思い今回はCoreDataとRealmで全く同じ仕様のアプリを作成してみた備忘録として残しておきます。 私自身もCoreDataとRealmを比較して今回のサンプルを作成してRealmについて学習した個人的な雑感ですが、 CocoaPods経由のRealmSwiftのインストールがとても手軽である PHPでのフレームワークで使用しているORMやRuby on RailsのActiveRecordのような感覚で使用することができる ViewControllerで記載するデータの保存等に関する処理がシンプルで掴みやすくなった

音声読み上げ機能を試してみたかったので作成してみました 某所で行われたハッカソンの中で自分が思いついたアイデアとして、これからの時期はインフルエンザや風邪にかかってしまい、高熱や喉が痛い中で声に出してしゃべるのは辛いだろうなと思い立ったので、入力したテキスト文字列や登録をした定型文を音声読み上げしてくれる簡易的なサンプルを作成しましたので、簡単ではありますが共有できればと思います。 ■ Github Sample Code: 定型文や入力テキストを音声読み上げをするサンプル ※今はシミュレーターOnly こちらのサンプルはAppleWatch(Watch OS2)のWatchConnectivityのInteractive Messagingを利用してAppleWatch側でも定型文の音声読み上げができるようになっています。（ただしWatch側のボタンを押してからのタイムラグ＆たまに動作し

はじめに Laravel 5 Advent Calendarの12/25を担当するfumiyasacです。 今ではすっかりiOS(SwiftやObjective-C)やRuby on Railsばっかりやっていますが、一番開発歴の長い言語は実はPHPだったりします。別のところですでにAdvent Calendarの記事を1本書き上げた後だったのでなかなか時間が足りず説明がざっくりしすぎている部分があるかと思いますが、何卒宜しくお願い致します。 今回はできるだけお手軽にLaravel5.1の開発エッセンスを掴んで頂けるような形のサンプルを作成してみました。 ■ Github Sample Code: Laravel5.1でCRUDアプリケーションを作成する簡易チュートリアル ■ Screen Captureその1（一覧画面）: ■ Screen Captureその2（詳細画面）: ■ Scr

はじめに. まえがきと自己紹介 年の瀬ということもあり、仕事プライベート問わず忙しい時期に皆様いかがおすごしでしょうか？ はじめまして、12/22のAdventCalendarを担当するfumiyasacです。（本業は一応PHP/Rubyがメインですが、好きなのはSwift/Objective-Cです笑） 今回AdventCalendarにチャレンジしてみるに当たって、まだまだ個人的に7ヶ月程度しか経験のない私ではありますが宜しくお願いします。 最近は忘年会シーズンということもあり食べ過ぎてしまうことが多いということもありまして、自戒の意味も込めまして下記のようなサンプルを作成しました。 今回のサンプル：私のカロリーグラフ（試作品） 今回は上記の様な割と本格的？なデータ記録系アプリを作成するにあたっての個人的に感じたことや実装のポイントをオムニバス形式で解説できればと思っています。 1つの

一度は憧れたことがあるメディア系アプリのUI 最近のキュレーションアプリやファッション情報系のアプリでよくある、スワイプすると写真付きコンテンツリストの一覧が切り替わり、なおかつコンテンツの上部分に設置されたタブが切り替わるようなUIはよく見かけると思います。このようなアプリを作成するための足がかりとしてまずはUIScrollViewとContainerViewを用いて、アプリの骨格となる部分を作成するための方法とポイントをご紹介致します。 ContainerViewに関してざっくり説明＆導入する際のポイント 以外と参考書や書籍などでも扱っているものが少ないContainerViewですが、特に1つのベースとなるViewControllerに複数のViewControllerを配置して複雑な画面構成をする際には重宝します。 InterfaceBuilderで「Container」という要素

APIから取得した情報を表示する際にはリンク付テキストやCSS付きのテキストで表示したい場合も多いはず iOS開発の中でもWebAPIとの連携する場合等、HTMLタグ付きの情報を取得してUITextViewに表示させたい場合があったので試してみたのですが、少しハマってしまいましたので、その方法を備忘録も兼ねて記しておこうと思います。 ■ 私の使用環境： OS：Yosemite 10.10.5 ※まだEl Capitanにはしていません>< XCode：XCode 7.1.1 Swift：Swift2.1 ポイントとなるのはNSAttributedString 上記のNSAttributedStringを使用することによって、UILabelやUITextViewに対して文字の一部やフォントなどを変更することができます。 今回は下記のような見た目のものをUITextFieldを使って再現するコ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?