フレーマ は、市場で最も強力なアプリケーションプロトタイピングツールの1つです。 iOSからAndroidまで、あらゆるモバイルデバイスの設計に使用できます。あなたが少しプログラミングを知っているなら、それはに基づいているので、その機能は事実上無制限です CoffeeScript -比較的簡単なプログラミング言語。 A デザイナー あなたはあなたの想像力とコーディングスキルによってのみ制限されるでしょう。

erc20トークンの作成方法

フレーマー-それはなんですか？

この記事をフォローするには、少なくともフレーマーの基本的な知識が必要です。デザインモードとコードエディタを使用します。知識を補足したい場合は、Framerによる以前の記事を読むことができます。 印象的なインタラクティブプロトタイプを作成する方法 、 プロトタイプを改善するための7つの簡単なマイクロインタラクション

実際のデータでフレーマーを使用する理由

プロトタイピングや設計でよくある問題は、実際のデータが不足していることです。既存の製品の新機能を設計する場合、架空のコンテンツを使用する代わりに、論理的で関連性のある実際のコンテンツを表示できます。たとえば、ユーザーの写真など、どのような種類のデータでもかまいません。このようにして、偽のコンテンツを作成しようとして時間を無駄にすることがなく、無効なデータの使用に起因するエラーが回避されます。利用可能なすべてのデータが表示され、必要なコンテンツを特定できます。その結果、利害関係者や開発チームとのコミュニケーションがより効果的になります。さまざまなユースケースシナリオで設計することも可能です。

新しい機能を設計するとき、すべてのユーザープロファイルが完全であるとは限らず、ストア内のすべてのカテゴリに同じ数の製品があり、すべての製品が同じデータを表示するわけではないことを忘れることがあります。実際のデータを使用したプロトタイピングは、LEGOブロックの作成と比較できます。架空の緩い形状を使用する代わりに、ボックスから既存のコンポーネントを使用して、実際の何かを作成できます。

実際のデータでプロトタイプを作ろう！

Framerの本当の楽しみは、データベースからリアルタイムで更新される実際のデータを使用するときに始まります。たとえば、写真付きのユーザープロファイル、住所、株価、為替レート、天気予報、取引情報、アプリケーションが定期的に使用する情報など、あらゆる種類の情報を適用できます。リアルタイムのプロトタイプを実際のデータと組み合わせると、非常に強力な製品設計が始まります。また、悪名高いラテンスタイルの「loremipsum」マーカーテキストを使用する必要がなくなりました。

MapboxAPIを使用したUber 沿って ブライアントジョー ために Uber

実際のデータを使用するAPI：それは何ですか？どのように使用しますか？

A アプリケーションプログラミングインターフェイス （API）は、アプリケーションと通信するためのインターフェースです。 レストランのようなアプリケーションを想像してみてください。食べ物は情報であり、ウェイターはAPIです。 あなたはウェイターに食べ物を頼みます、それはあなたがする必要があるすべてです。残りはウェイター（API）とキッチン（データベース）が担当します。

特定のデータベースに存在する実際のデータにアクセスすることです。

APIとは何ですか？

各アプリケーションには、データのキャプチャと表示を可能にするAPIがあります。一部のAPIは公開されており、一部は内部製品でのみ使用されます。

公開されているAPIは、新しいアプリケーションを作成するために広く使用されています。たとえば、天気アプリケーションを作成するには、いくつかの天気データが必要です。パブリックAPIを共有する多数の天気予報ウェブサイトの助けを借りて、それは簡単です。また、さまざまなAPIを組み合わせて、まったく新しい製品を作成することもできます。

実際のデータはどこで入手できますか？オープンAPIリスト

さまざまなデータを提供する多くの公開されているAPIがあります。これは、Framerで実際のデータを使用してプロトタイピングするのに最適な5つのリストです。これらの各APIは、次の形式でデータも返します。 JSON 、フレームワークで簡単に管理できます。

ランダムユーザー -初心者にとって間違いなく最高のAPI。アバターからメールアドレスまで、完全でランダムなユーザープロファイルを生成します。

OpenWeatherMap -これは非常に使いやすいAPIです。それはあなたがどんな場所でも現在の天気と予報をチェックすることを可能にします。このAPIを使用することで、気温、湿度、風速などのデータを表示できます。

天気予報アプリ Wojciech Dobry

ポケアピ -教育目的で作成された最高のAPIの1つ。ポケモンについて何かお探しですか？ここで見つけることができます。これは、主要なポケモンゲームシリーズに関するすべてを詳述する広範なデータベースにリンクされた包括的なRESTfulAPIです。

ポケモンUIコンセプト 沿って サイアウン

インスタグラム -使用するために認証を必要とするリストの最初のAPI。しかし、彼らのサービスは非常にシンプルです。すべてのInstagramの写真とユーザーにアクセスして、新しいアプリに表示できます。

スマートウォッチのInstagram 沿って Hironobu Kimura

Mapbox -地図や道順からジオコーディング、さらには衛星画像まで、アプリケーションと簡単に統合できる信じられないほどの数のサービスを提供します。 Foursquare、Evernote、Instacart、Pinterest、GitHub、Etsyには、共通点が1つあります。それらのマップはMapboxで機能します。

このAPIは、JSONファイルを返さないという点で以前のAPIとは異なりますが、すべてのMapbox関数へのアクセスを提供します。 Mapboxも優れた FramerでAPIを使用する方法に関するチュートリアル 。

モバイルデバイス上のMapbox

実際のデータを使用したFramerのRandomUserAPIチュートリアル

FramerでAPIを操作する方法を理解するために、 ランダムユーザーAPI 。単一のアプリケーション画面（ユーザーのリスト）が必要になります。

ステップ1：デザインモード

これは、名、姓、アバターを含むユーザーのリストです。必要なのはそれだけです。このプロセスの最も重要な部分は、すべてのアイテムに正しく名前を付けてグループ化することです。アバターと名前はフレームレイヤーでグループ化され、すべてのフレームはリスト内でグループ化されます。

デザインモードで最後に行うことは、レイヤーをマークすることです リスト インタラクティブレイヤーとして。これを行うには、宛先アイコンをクリックするだけです。

ステップ2：JSONを理解する

まず、JSONとは何か、そしてそれをFramerの外に出す方法を理解する必要があります。に ランダムユーザーAPIドキュメント APIデータのリクエストを検索します。次のようになります。 https://randomuser.me/api/?results=20 。ご覧のとおり、これはブラウザでJSONファイルを開く通常のリンクです。

現状では明確なことは何もありません。正しくフォーマットされたJSONファイルを表示するには、次のChromeプラグインを使用します JSONview 。プラグインを使用すると、ファイルは次のようになります。

Linuxオペレーティングシステムの未来

より良い。これで読みやすくなりました。このファイルには、APIリクエスト後に受信したユーザーデータを含む結果配列が含まれています。では、JSONファイルとは何ですか？技術的な詳細に立ち入ることなく、データベースからの特定のデータを含むJavaScript構文に基づくテキストファイルです。 JSONをFramerで使用して、そこからのデータを表示できます。

ステップ3：JSONファイルをフレーマーにインポートする

これで、JSONファイルを1行のコードでFramerにインポートできます。

Visual StudioiOSアプリのチュートリアル

data = JSON.parse Utils.domLoadDataSync 'https://randomuser.me/api/?results=20'

というオブジェクトを作成します データ JSONファイルが含まれます。関数を使用する 印刷 JSONファイルが正常にインポートされたかどうかを確認するには：

print data

ステップ4：JSONファイルから特定のデータにアクセスする

次に、JSONファイル構造に戻ります。

このJSONファイルでは、resultadosより多くのオブジェクトを含む配列です。各オブジェクトは異なるユーザーです。まず、これらのオブジェクトの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プロファイルデータ（名前、最新の写真、「いいね」の数）を表示する簡単なプロトタイプを作成します。

Instagramからデータをフェッチするのに必要なコードは5行とアクセストークンだけです。

ステップ1：アクセストークンを取得する

Instagram APIを使用するには、アクセストークンが必要です。これは、2つの異なる方法で取得できます。

1. 最も一般的な方法は、のWebサイトにアクセスすることです。 開発者向けInstagram 指示に従ってください。このプロセスは、技術者以外の人にとっては注意が必要です。

2. 幸いなことに、それを取得するための安全で簡単な方法があります。 Pixel Unionは、はるかにシンプルなワンクリックプロセスを開発しました。 あなたのウェブサイト [アクセストークンを取得]ボタンをクリックします。

ステップ2：クロスドメインリクエストを有効にする

アクセストークンを受け取った後、ちょっとしたトリックが必要です。 Instagramはローカルサーバー（Framer）からのA​​PIリクエストを許可しないため、サーバー側のクエリを使用する必要があります。それらの1つは JSONProxy 。彼らのウェブサイトに行き、1つ貼り付けます InstagramのAPIリクエスト GOを押します。

完了したら、Instagram APIバインディングを使用する代わりに、JSONProxyバインディングを使用できます。

ステップ3：フレーマーで簡単なアプリケーションを設計する

フレーマーで設計されたシンプルなアプリケーション画面。

このレイアウトには、名前のプレースホルダー、最後の写真を表示する長方形、画像の下の「いいね」の数の3つの重要な要素しかありません。これらはすべて、コードエディタで再利用できるインタラクティブレイヤーとしてマークされています。

ステップ4：Instagramデータを使用するための4行のコードを書く

データを取得するためのFramerの5行のコード。

ここでのフローは、Random UserAPIの場合と同じです。 Instagramからユーザー情報にアクセスできます。

yourAccessToken = 'YOUR-ACCESS-TOKEN' instagramJSON = JSON.parse Utils.domLoadDataSync 'http://jsonproxy.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での忠実度の高いプロトタイピングは非常に高価です。目的の効果を得るには多くの調整が必要であり、時間と費用がかかります。ランダムユーザーAPIの例に示されているように、APIとの通信は難しくありませんが、APIから大きなプロトタイプを作成するにはまだ長い時間がかかります。

2017年のcvvと郵便番号でハッキングされたクレジットカード番号

ただし、完全に調整されている場合は、検討する価値があります。実際のデータを使ったハッピープロトタイピング！