ツールとチュートリアル
実際のデータを使用したプロトタイピング–フレーマーチュートリアル
フレーマ は、最も強力なアプリプロトタイピングツールの1つです。 iOSからAndroidまで、あらゆるモバイルデバイスの設計に使用できます。プログラミングを少し知っている場合は、に基づいているため、その機能は事実上無制限です。 CoffeeScript —比較的簡単なプログラミング言語。 A デザイナー 彼らの想像力とコーディングスキルによってのみ制限されます。
この記事をフォローするには、少なくともフレーマーの基本的な知識が必要です。デザインモードとコードエディタを使用します。知識を補足したい場合は、以前のフレーマーの記事を読むことができます。 見事なインタラクティブプロトタイプを作成する方法 、 プロトタイプを改善するための7つの簡単なマイクロインタラクション
実際のデータでフレーマーを使用する理由
設計またはプロトタイピングにおける一般的な問題は、実際のデータの欠如です。既存の製品に対して新しい機能を設計する場合、架空のコンテンツを使用する代わりに、論理的で関連性のある、実際に見えるコンテンツを表示できます。たとえば、ユーザーの写真など、あらゆる種類のデータにすることができます。このようにして、偽のコンテンツを考え出すために時間を無駄にすることはなく、無効なデータを使用することによる間違いを回避できます。利用可能なすべてのデータが表示され、どのコンテンツがまだ必要かを確認できます。その結果、利害関係者や開発チームとのコミュニケーションがより効果的になります。さまざまなユースケースシナリオを中心に設計することも可能です。
新しい関数を設計するとき、すべてのユーザープロファイルが完全であるとは限らず、ストア内のすべてのカテゴリに同じ数量の商品があり、すべての商品が同じデータを表示するわけではないことを忘れることがあります。実際のデータを使用したプロトタイピングは、LEGOブロックから何かを構築することと比較できます。架空のゆるい形状で作業する代わりに、ボックスから既存のコンポーネントを使用して、実際の何かを構築できます。
実際のデータでプロトタイプを作成しましょう！
Framerの本当の楽しみは、データベースからリアルタイムで更新される実際のデータが使用されるときに始まります。たとえば、写真付きのユーザープロファイル、住所、株価、為替レート、天気予報、取引情報など、アプリが通常使用するあらゆるデータを適用できます。リアルタイムのプロトタイピングと実際のデータを組み合わせると、非常に強力な製品設計が実現し始めます。また、悪名高いラテン風の「loremipsum」プレースホルダーテキストを使用する必要がなくなります。
実際のデータを使用するAPI：それは何ですか？どのように使用しますか？
アン アプリケーションプログラミングインターフェイス （API）は、アプリケーションと通信するためのインターフェースです。 アプリをレストランとして想像してみてください。食べ物はデータであり、給仕はAPIです。 あなたは給仕に食べ物を頼みます—それがあなたがする必要があるすべてです。残りはウェイトスタッフ（API）とキッチン（データベース）が担当します。
特定のデータベースに存在する実際のデータへのアクセスがすべてです。
すべてのアプリには、データをキャプチャして表示できるAPIがあります。一部のAPIは公開されており、一部は内部製品でのみ使用されます。
公開されているAPIは、新しいアプリケーションを構築するために広く使用されています。たとえば、天気アプリケーションを作成するには、いくつかの天気データが必要です。公開APIを共有する多数の天気予報ウェブサイトの助けを借りて、それは非常に簡単です。さらに、さまざまなAPIを組み合わせて、まったく新しい製品を作成できます。
ロボットオペレーティングシステム（ros）
実際のデータはどこで入手できますか？オープンAPIリスト
さまざまなデータを提供する多くの公開されているAPIがあります。これは、Framerで実際のデータを使用してプロトタイピングするのに最適な5つの候補リストです。これらの各APIは、次のデータも返します。 JSON フレームワークで簡単に処理できるフォーマット。
ランダムユーザー –初心者にとって間違いなく最高のAPI。アバターからメールアドレスまで、完全でランダムなユーザープロファイルを生成します。
OpenWeatherMap –これは非常に使いやすいAPIです。それはあなたがどんな場所でも現在の天気と予報をチェックすることを可能にします。このAPIを使用して、温度、湿度、風速などのデータを表示できます。
ポケアピ –教育目的で作成された最高のAPIの1つ。ポケモンについて何かお探しですか？ここで見つけることができます。これは、ポケモンのメインゲームシリーズに関するすべての詳細を示す広範なデータベースにリンクされた完全なRESTfulAPIです。
インスタグラム –使用するために許可を必要とするリストの最初のAPI。ただし、そのサービスは非常にシンプルです。すべてのInstagramの写真とユーザーにアクセスして、新しいアプリに表示できます。
Mapbox –地図や道順からジオコーディング、さらには衛星画像まで、アプリケーションと簡単に統合できる多くのすばらしいサービスを提供します。 Foursquare、Evernote、Instacart、Pinterest、GitHub、Etsyにはすべて共通点があります。これらのマップは、Mapboxを利用しています。
このAPIは、JSONファイルを返さないという点で以前のAPIとは異なりますが、すべてのMapbox機能へのアクセスを提供します。 Mapboxも素晴らしい FramerでAPIを使用する方法に関するチュートリアル 。
実際のデータを使用したフレーマーのランダムユーザーAPIチュートリアル
FramerでAPIを操作する方法を理解するために、 ランダムユーザーAPI 。単一のアプリ画面、つまりユーザーリストが必要になります。
ステップ1：デザインモード
これは、名前、名前、およびアバターを含むユーザーのリストです。必要なのはそれだけです。このプロセスの最も重要な部分は、すべての要素に適切な名前を付けてグループ化することです。アバターと名前はボックスレイヤーにグループ化され、すべてのボックスはリスト内にグループ化されます。
デザインモードで行う必要がある最後のことは、マークを付けることです リスト インタラクティブレイヤーとしてのレイヤー。これを行うには、ターゲットアイコンをクリックするだけです。
ステップ2：JSONを理解する
まず、JSONとは何か、そしてそれをFramerの外部に配置する方法を理解する必要があります。の中に ランダムユーザーAPIドキュメント 、APIからのデータのリクエストを見つけます。次のようになります。 https://randomuser.me/api/?results=20 。ご覧のとおり、これはブラウザでJSONファイルを開く通常のリンクです。
現状では、まったくはっきりしていません。適切にフォーマットされたJSONファイルを表示するには、次のChromeプラグインを使用します。 JSONview 。プラグインを使用すると、ファイルは次のようになります。
asp.netコアを備えたAngular2
ずっといい。これで読みやすくなりました。このファイルには、APIに要求した後に受信したユーザーデータを含む結果の配列が含まれています。では、JSONファイルとは何ですか？技術的な詳細に立ち入ることなく、データベースからの特定のデータを含むJavaScript構文に基づくテキストファイルです。 JSONをFramerで使用して、そこからのデータを表示できます。
ステップ3：JSONファイルをフレーマーにインポートする
これで、JSONファイルを1行のコードでFramerにインポートできます。
data = JSON.parse Utils.domLoadDataSync 'https://randomuser.me/api/?results=20' というオブジェクトを作成します データ JSONファイルが含まれます。使用 印刷 JSONファイルが正しくインポートされたかどうかを確認する関数：
print data 
ステップ4：JSONファイルから特定のデータにアクセスする
次に、JSONファイル構造に戻ります。
このJSONファイルでは、resultsより多くのオブジェクトを含む配列です。各オブジェクトは異なるユーザーです。まず、これらのオブジェクトの1つをターゲットにする必要があります。印刷機能を使用して、何が起こっているのかをよりよく理解します。
print data.results[1] フレーマーコンソール：
{gender:'male', name:{title:'mr', first:'benjamin', last:'petersen'}, location:{street:'2529 oddenvej', city:'sandved', state:'midtjylland', postcode:48654}, email:' [email protected] ', login:{username:'organicsnake771', password:'bauhaus', salt:'PohszyFx', md5:'b19140299c05e5e623c12fb94a7e19e6', sha1:'78d95ec718ef118d9c0762b3834fc7d492111ab2', sha256:'0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54'}, dob:'1974-12-17 04:58:03', registered:'2009-04-08 16:50:59', phone:'76302979', cell:'41168605', id:{name:'CPR', value:'605218-6411'}, picture:{large:'https://randomuser.me/api/portraits/men/65.jpg', medium:'https://randomuser.me/api/portraits/med/men/65.jpg', thumbnail:'https://randomuser.me/api/portraits/thumb/men/65.jpg'}, nat:'DK'} 括弧内の図は、配列内のオブジェクトの番号を表しています。 data.results[1]を使用すると、JSONファイル内の最初のユーザーのすべてのデータへのアクセスが受信されます。
次に、名前や名前などの項目を表示できます。
print data.results[1].name.first フレーマーは次のように応答します：'benjamin'。出来上がり！ APIからのデータへのアクセスが実現しました！
ステップ5：JSONからのデータの表示
最終的に！残っているのはデータを表示することだけです。ここで、デザインモードのすべてのレイヤーを対象とする単純なループを作成する必要があります。この中のループでレイヤーをターゲットにすることについてもっと読む 前の記事 。
x = 0を使用していますJSONデータから配列の最初のオブジェクトをターゲットにします。次に、それぞれについて 子供達 の要素 リスト 、JSONデータからデータを割り当てます。ループの最後に、配列内の次のオブジェクトからのデータを使用するために+1を追加します。
x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++ それでおしまい！これで、デザインモードに戻ってデザインを試すことができ、実際のデータがプロトタイプに表示されます。
上記のフレーマーファイルはここからダウンロードできます。 https://framer.cloud/djmvG
Instagram API –フレーマーのリアルタイムデータ
Instagramは、リアルタイムデータで旅を始めるための興味深い出発点です。手順は比較的簡単に実行でき、APIは興味深いデータを提供します-完全なアクセス権を取得します。記事のこの部分では、Instagram APIを使用して、Instagramのプロフィールデータ（名前、最新の写真、いいねの数）を表示する簡単なプロトタイプを作成します。
ステップ1：アクセストークンを取得する
Instagram APIを使用するには、アクセストークンが必要です。これは、2つの異なる方法で取得できます。
- 最も一般的な方法は、 開発者向けInstagram ウェブサイトと指示に従ってください。このプロセスは、技術者以外の人にとっては複雑かもしれません。
- 幸いなことに、それを取得するための簡単で安全な方法があります。 Pixel Unionは、はるかに簡単なワンクリックプロセスを開発しました。 彼らのウェブサイト [アクセストークンの取得]ボタンをクリックします。
ステップ2：クロスドメインリクエストを有効にする
アクセストークンを受け取った後、1つの小さなトリックが必要です。 Instagramはローカルホスト（Framer）からのAPIリクエストを許可しないため、サーバー側のクエリを使用する必要があります。それらの1つは JSONProxy 。彼らのウェブサイトに行き、貼り付けます InstagramAPIからのリクエスト 、GOを押します。
完了すると、Instagram APIリンクを使用する代わりに、JSONProxyリンクを使用できます。
ステップ3：フレーマーでシンプルなアプリを設計する
このデザインには、名前のプレースホルダー、最新の写真を表示する長方形、画像の下のいいねの数の3つの重要な要素しかありません。これらはすべて、コードエディタで再利用できるインタラクティブレイヤーとしてマークされています。
ステップ4：Instagramのデータを使用するための4行のコードを書く
ここでのフローは、ランダムユーザーAPIの場合と同じです。 Instagramから任意のユーザーデータにアクセスできます。
Webアプリケーションのセキュリティの問題と解決策
yourAccessToken = 'YOUR-ACCESS-TOKEN' instagramJSON = JSON.parse Utils.domLoadDataSync 'https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}' likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url それでおしまい！ 5行のコードで、Instagramが提供するライブデータと実際のデータを使用してプロトタイプを作成できます。ここから実用的なプロトタイプをダウンロードします。 https://framer.cloud/iYAXl 。 （このプロトタイプを実行するには、独自のアクセスキーを追加する必要があることに注意してください。）
まとめ–長所と短所
データベースからAPIを介して取得した実際のデータを使用するプロトタイプを作成することで、新しい創造的な可能性と製品設計をチェックする機能が明らかになります。製品と100％一貫性のあるプロトタイプを作成し、実際のユーザーで新しい機能をテストできます。システム内のすべてのデータのプレビューにより、設計に含める必要のある要素を見逃しにくくなり、実際のデータにアクセスできるため、偽のデータの使用に起因する設計ミスが回避されます。
とはいえ、Framerでの忠実度の高いプロトタイピングは非常に高価です。目的の効果を得るには、多くの調整が必要です。これは、時間とお金を浪費します。 Random User APIの例に示されているように、APIとの通信は難しくありませんが、それから優れたプロトタイプを作成するには、依然として多くの時間が必要です。
それでも、十分な対策を講じた場合は、検討する価値があります。実際のデータを使ったハッピープロトタイピング！
•••
