こんにちは、クライアントエンジニアのちぎら(@_naru_jpn)です。先日ミラティブの iOS アプリバージョン 9.38.0 にて「配信コメントバー」機能をリリースしました。この機能は iOS15 から利用可能になった PiP に関する技術を活用したもので、ミラティブ以外のアプリを開いている時に、端末の画面上にミラティブ固有のコンテンツを表示できる革新的な機能です。今回は、この「配信コメントバー」機能について背景や概要をご紹介したいと思います。 「配信コメントバー」機能とは 従来、iOS ではアプリがバックグラウンド状態に移行した後は、画面上に独自のコンテンツを表示するといったことは基本的にできませんでした。例えば、ミラティブ iOS アプリでは配信中のコメントを届けるために、プッシュ通知を利用しています。 iOS 15 からピクチャ・イン・ピクチャ（以下: PiP）の柔軟性が増したこ
スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。 Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic
その名も「Hyperion-iOS」 できること View Inspector テキストのサイズやカラー、フォントなどの状態をタップするだけで確認することができます Measurements タップした箇所のパーツの位置を確認することができます。 PSD上で確認していた作業がいらないレベルで使いやすいです！ Zoom ピンチイン、ピンチアウトで拡大縮小が自由自在！ Slow Animations アプリ内のすべてのアニメーションを通常の速度の75％、50％または25％にスローダウンして確認することができます！ 導入 Pods use_frameworks! pod "HyperioniOS/Core", :configurations => ['Debug'] # "Configurations => Debug" ensures it is only included in debug
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
概要 スクロールできるメニューバーとスワイプで画面を切り替えることができるViewControolerのコンテナを、オープンソースとして公開しました。 recruit-mp/RMPScrollingMenuBarController | GitHub We published RMPScrollingMenuBarController by open source. RMPScrollingMenuBarController has a scrollable menu bar, and multiple view controllers for iOS. ニュース系アプリでよく使われているUIで、弊社の料理サプリのiOSアプリのトップ画面でも使用しています。 何はともあれこちらのgifアニメをを見てもらったら分かると思います。 自己紹介 本記事がはじめてなので本題の前に少し自己紹介を。 リ
Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design. Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming. Quartz Composer is a freely-available Mac OS X appl
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が
You’re probably thinking, “I already use Facebook’s and/or Design+Code’s iOS 9 GUI document for Sketch. Why download another one?” Put simply, ours is better. We set out to create a more complete, more up-to-date, more accurate, and more thoughtfully structured iOS UI kit for Illustrator and Sketch. If you use Illustrator, there’s no contest — you won’t find another iOS UI resource remotely close
開発部の@horimislimeです。普段は@y_koh さんとiPadアプリ開発をさせてもらっています。 先日トレタはメジャーアップデートとなるver5.0.0で、飲食店従業員の方が店内のテーブル配置を作成し、空間的にテーブルを見ながら予約を取れる「テーブルレイアウト」機能をリリースしました。 この機能の詳細や、開発にあたっての想いは弊社ブログのエントリも御覧ください。 トレタ新バージョン「5.0.0」とモノ作りの話 : TORETA（トレタ） ブログ トレタとして大規模なアップデートとなるver5.0.0でしたが、その裏ではiOS開発チームとして新しいチャレンジもありました。それが以下の二点です。 Swiftと新しいパラダイムの導入 これまでのトレタには無かったUIの実現 まずiOS開発チーム内でこの新機能からSwiftを導入し、合わせてMVVM風な設計を取り入れつつ実装を進める方針を
２６種類のアニメションパターンを設定できます。 shake pop morph squeeze wobble swing flipX flipY fall squeezeLeft squeezeRight squeezeDown squeezeUp slideLeft slideRight slideDown slideUp fadeIn fadeOut fadeInLeft fadeInRight fadeInDown fadeInUp zoomIn zoomOut flash デモ デモアプリでアニメションの動きを確認できます。 design+code Springの開発元ではDesignとCodeを連携した開発手法の情報を有料で販売しています。$50です。ほしい。 PageMenu ★425 左右にスワイプすることで画面の表示をアニメションしながら切り替えるライブラリです。 インスト
Swift で使えるオープンソースライブラリ 2014年は新言語 Swift が登場し、iOS アプリ開発者にとってはかなり印象深い年になったのではないでしょうか。Swift の登場以後、さまざまな取り組みが iOS アプリ開発者の中で行われ、その結果の1つとしてオープンソースライブラリもかなり増えました。 Swift で一から書かれたものもあれば、既存のものを Swift でも使えるようにアップデートしてくれているものもあります。ある意味、混沌としている現状では「じゃあいまから Swift で iOS アプリ開発するときに何を使えば良いの！？」といったことになりかねません。ということで、現在までに公開されている Swift で使えるオープンソースライブラリを目的別にまとめてみました。 Swift アドベントカレンダーのために書いた記事なので、タイトルには「Swift 時代の」としています
とあるお仕事で、iPad をサポート（＝ Universal 化）してほしいという要望があり、せっかくなので iPhone 6 / 6 Plus （4.7 / 5.5 inch スクリーン）もサポートしようってことで、新しい Xcode 6 の新しい仕組みである Size Class を使って複数画面対応を行ないました。あと、同じく Xcode 6 から Asset Catalog でベクター形式がサポートされるようになったので、こちらもトライしてみました。 で、そのときに学んだ諸々の断片的なメモです。勘違いもあるかもしれないのでその際は優しくご指摘いただけますと幸いです。 ※ちなみに Size Class やベクター形式画像の使用は iOS 8 以上縛りではありません。単に Xcode 6 の新機能というだけなので。 Size Class の前提知識をつける 「Size Classsとは
スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツールなのですが、そのために専用ソフトウェアを購入するのは躊躇してしまう人も多いはずです。そこで今回は使い慣れたPowerPointやKeynoteといったプレゼン作成ソフトウェアを使ってスマホアプリデザインのモックアップが作れるテンプレートやプラグインを提供しているサイトを紹介します。Webサービスとは違って、ダウンロードしてしまえばオフラインでも作成できるのが魅力です。mBaaSお役立ちブログ トップ> ブログ> Tips> PowerPoint/Keynoteでスマホアプリのモックアップを作れるテンプレート/プラグインを一挙紹介！ スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツー
技術部の松尾(@Kazu_cocoa)です。 iOSアプリデザインリニューアルの舞台裏でも書かれていた、" 修正期間中は毎日夜間にアプリケーションの全画面のスクリーンショットを記録するスクリプトを実行し、画面崩れが起きてないか、新デザイン未反映の画面はないか、進捗状況の確認に利用していました。"の舞台裏を少し書いてみようと思います。 はじめに モバイルアプリケーションのテスト環境はまだまだ成長中で、様々なツールが飛び交っていることかと思います。ここでは、E2Eテストに対しての話題に絞り、使っているツール、シナリオの書き方、クックパッドでは、という話しをします。この記事におけるE2Eテストは、UIからの操作によりユーザの操作を模倣して実施するテスト、という意味合いです。 ツール E2Eテストを自動化する為のツールの選定には以下を気にしていました。 OSの更新に追従できそうなもの 特別なテスト
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
is a totally awesome idea still being worked on. Check back later.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
