Tags

閉じる

Category

閉じる

Search

Search

閉じる

モックアップ支援アプリ"POP"での画像の自動置換方法

戻る

POPは実機でのモックアップを手軽に行うためのアプリです。

知っている方も多いと思いますが、気軽にモックをつくって試すには便利なアプリです。
そんなPOPで待望の!画像をdropbox経由で自動置換する方法が追加されたのですが、
ちょっとやり方がわかりにくかったので画像つきで紹介します。
 

自動置換のやり方

  1. プロジェクトのdropbox連携をONにする
  2. dropboxフォルダ以下のアプリ/popを参照する
  3. 連携したプロジェクトの名前のフォルダをつくる
  4. フォルダの中に画像をいれる
それぞれスクリーンショットと共に説明します
 

1. プロジェクトのdropbox連携をONにする

プロジェクトの情報画面を開き、dropboxとの連携を行います。
事前にdropboxのアプリも入れておきましょう。
 
2014-07-08 12.15.57.png  2014-07-08 12.16.04.png
[左画像:プロジェクト作成画  /  右画像:プロジェクト内の設定画面]
 
 

2. dropboxフォルダ以下のアプリ/popを参照する

連携が終わると、dropboxのトップフォルダに「アプリ」というフォルダが追加されます。(英語では"app"らしい)
 
 
2014-07-08 12.17.10.png
[画像:dropboxアプリのトップ階層画面]
 

3. 連携したプロジェクトの名前のフォルダに画像をいれる

Dropboxのアプリフォルダの中にはこのようなフォルダが用意されています
アプリ
ーpop
ーー[プロジェクト名]
この[プロジェクト名]のフォルダの中に画像を入れましょう。
 
2014-07-08 12.17.17.png2014-07-08 12.17.49.png
 
[左画像:POPフォルダの中にできたプロジェクトフォルダ / 右画像:そこに画像をいれる]
 
今回はAと書かれた画面とBと書かれた画面を入れてみました。
これで準備は完了です。
それではPOPのアプリに戻りましょう。
 

4. 画像を表示させる

プロジェクトを読み込むタイミングや、画像のインポートタイミングなどでdropboxとの連携が始まります。
そうすると、、、、
 
2014-07-08 12.21.22.png
 
[画像:連携が始まった画面]
 
フォルダに入れた画像が自動で出るようになりました。
 
そしてフォルダ内の画像を書き換えると、、、
 
 
2014-07-08 12.18.35.png
[画像:Aを赤の画像に変えました]
 
 
 
2014-07-08 12.18.54.png
[画像:POP上でAが自動更新されました]
 
替わる!!!!
 
リンクやコメント・ノートなどの画像以外の情報は差し代わりませんので、安心して使えます。
 
 
これのおかげで、ちょっとした変更もすぐにテストすることができます。
最新版のアプデで使える機能なので、みなさんもぜひPOPを使ってみてください。
 
あと、同じアップデートでの機能に含まれるスクロール対応のやり方がさっぱりわからないので、
知ってるかたいましたら、コメントででも教えてください。。。
 
 
 
 
ではでは