制作部 部長
Kazutaka Kojima
2019.09.04 デザイン
Adobe XDのプラグイン「google sheets」がうまく使えない…
こんにちは、デザイナーの小島です。
社内でもAdobe XDでのワイヤーフレーム・デザイン制作が浸透してきてすっかりXD無しでは生きていけなくなりつつある今日このごろです。
XDでは便利なプラグインがたくさんありますが、その中でも便利なのが「Google Sheets for XD」です！
Googleスプレッドシートのデータを、リピードグリッドで作成したレイアウトに当て込んでいけるプラグインですが…
なぜか私の環境だとうまくいきません…
なぜか私の環境だとうまくいきません…
正攻法で使えなかったので、試行錯誤してとりあえず使えるようになったので、その方法をご紹介します。
目次
スプレッドシートを読み込み：下準備
まずはAdobe XD上でレイアウトを組み、リピートグリッドで枠を増やします。
今度はGoogleスプレッドシートで入れるデータを作ります。
スプレッドシートを読み込み：その1（There is Nothing Selected）
以下をクリックしました。
プラグイン ＞ Google Sheets ＞ Paste Public Link…
プラグイン ＞ Google Sheets ＞ Paste Public Link…
There is Nothing Selected
なんで？？と思いましたが、単純にペーストするところを選択していなかっただけでした。
おっちょこちょいですね。
おっちょこちょいですね。
スプレッドシートを読み込み：その2（Unable to Access）
ちゃんと選択してから「Paste Public Link…」をクリックしたところ、正しくPaste URLが表示された。
作ったスプレッドシートのURLを貼り付けて「Continue」をクリック。
Unable to Access
直訳するとアクセス出来ませんでした。ということのようです。
マリンロードの環境のせいなのかわかりませんが、URLを変えてみたり、個人のGoogleアカウントで作ってみたりしてみましたがダメでした。
マリンロードの環境のせいなのかわかりませんが、URLを変えてみたり、個人のGoogleアカウントで作ってみたりしてみましたがダメでした。
ダウンロードしたCSVを読み込み：下準備
ここで諦めかけましたが、「プラグイン ＞ Google Sheets ＞」の中を見てみると、2項目目に「Load .CSV…」というのがあります。
ローカルのCSVをアップして使うという事なのかな？という事で、直接スプレッドシートを諦めて、この作戦に切り替えました。
ローカルのCSVをアップして使うという事なのかな？という事で、直接スプレッドシートを諦めて、この作戦に切り替えました。
csv形式でダウンロードします。
ちなみに、いろいろ試してみたところ、CSVのエンコードが「UTF-8」で無いとダメでしたので、エクセル等で開いて文字化けしていても、そのまま使う必要があります。
基本的にスプレッドシート上で正しいデータになっていればOKです。
ちなみに、いろいろ試してみたところ、CSVのエンコードが「UTF-8」で無いとダメでしたので、エクセル等で開いて文字化けしていても、そのまま使う必要があります。
基本的にスプレッドシート上で正しいデータになっていればOKです。
ダウンロードしたCSVを読み込み：その1（Apply押しても進まない）
以下をクリックします。
プラグイン ＞ Google Sheets ＞ Load .CSV…
プラグイン ＞ Google Sheets ＞ Load .CSV…
「Select a CSV File」とあるので、そこをクリックして、ダウンロードしたcsvを選択します。
ついに項目を選択出来るエリアが出てきました！
どこになにを貼り付けるかを決めていきます。
ある程度予測してくれていますが、名前の付け方で微妙だったりするので、念の為確認して「Apply」をクリックします。
ある程度予測してくれていますが、名前の付け方で微妙だったりするので、念の為確認して「Apply」をクリックします。
しばらく待っても画面が変わりません。
いろいろ試しすぎたのかな？と思い、再起動しても
やっぱり画面が変わりません。
ダウンロードしたCSVを読み込み：その2（成功！）
もしかしたらNo Mappingの項目が多いから処理できないのかな？と思い、リピートグリッドをバラしました。
項目名・枠線、データを貼り付けたい内容に分けてみて、貼り付けたい方を選択してみると。
項目名・枠線、データを貼り付けたい内容に分けてみて、貼り付けたい方を選択してみると。
スッキリしました。
そして「Apply」をクリックすると…
無事成功しました！！
かなり手間でしたが、もっと多いデータの時は使えそうです。
ただし、ローカルのCSVを編集するとエンコードが面倒だったりするので、そのあたりの運用は考える必要がありそうです。
ただし、ローカルのCSVを編集するとエンコードが面倒だったりするので、そのあたりの運用は考える必要がありそうです。
もし使えないという方が他にもいましたら、このどれかで解決するかもしれないので、ぜひ試してみてください。
