design
小島 和剛

2019.9.4デザイン 

Webデザイナー/ディレクター

小島 和剛

Adobe XDのプラグイン「google sheets」がうまく使えない…

こんにちは、デザイナーの小島です。

社内でもAdobe XDでのワイヤーフレーム・デザイン制作が浸透してきてすっかりXD無しでは生きていけなくなりつつある今日このごろです。
XDでは便利なプラグインがたくさんありますが、その中でも便利なのが「Google Sheets for XD」です!
Googleスプレッドシートのデータを、リピードグリッドで作成したレイアウトに当て込んでいけるプラグインですが…
なぜか私の環境だとうまくいきません…
正攻法で使えなかったので、試行錯誤してとりあえず使えるようになったので、その方法をご紹介します。

スプレッドシートを読み込み:下準備

まずはAdobe XD上でレイアウトを組み、リピートグリッドで枠を増やします。
kojima201909_01
今度はGoogleスプレッドシートで入れるデータを作ります。
kojima201909_02

スプレッドシートを読み込み:その1(There is Nothing Selected)

以下をクリックしました。
プラグイン > Google Sheets > Paste Public Link…
kojima201909_03
There is Nothing Selected
なんで??と思いましたが、単純にペーストするところを選択していなかっただけでした。
おっちょこちょいですね。

スプレッドシートを読み込み:その2(Unable to Access)

ちゃんと選択してから「Paste Public Link…」をクリックしたところ、正しくPaste URLが表示された。
kojima201909_04
作ったスプレッドシートのURLを貼り付けて「Continue」をクリック。
kojima201909_05
Unable to Access
直訳するとアクセス出来ませんでした。ということのようです。
マリンロードの環境のせいなのかわかりませんが、URLを変えてみたり、個人のGoogleアカウントで作ってみたりしてみましたがダメでした。

ダウンロードしたCSVを読み込み:下準備

ここで諦めかけましたが、「プラグイン > Google Sheets >」の中を見てみると、2項目目に「Load .CSV…」というのがあります。
ローカルのCSVをアップして使うという事なのかな?という事で、直接スプレッドシートを諦めて、この作戦に切り替えました。
kojima201909_06
csv形式でダウンロードします。
ちなみに、いろいろ試してみたところ、CSVのエンコードが「UTF-8」で無いとダメでしたので、エクセル等で開いて文字化けしていても、そのまま使う必要があります。
基本的にスプレッドシート上で正しいデータになっていればOKです。

ダウンロードしたCSVを読み込み:その1(Apply押しても進まない)

以下をクリックします。
プラグイン > Google Sheets > Load .CSV…
「Select a CSV File」とあるので、そこをクリックして、ダウンロードしたcsvを選択します。
kojima201909_07
ついに項目を選択出来るエリアが出てきました!
どこになにを貼り付けるかを決めていきます。
ある程度予測してくれていますが、名前の付け方で微妙だったりするので、念の為確認して「Apply」をクリックします。
kojima201909_08
しばらく待っても画面が変わりません。
いろいろ試しすぎたのかな?と思い、再起動しても
kojima201909_08
やっぱり画面が変わりません。

ダウンロードしたCSVを読み込み:その2(成功!)

もしかしたらNo Mappingの項目が多いから処理できないのかな?と思い、リピートグリッドをバラしました。
項目名・枠線、データを貼り付けたい内容に分けてみて、貼り付けたい方を選択してみると。
kojima201909_09
スッキリしました。
そして「Apply」をクリックすると…
kojima201909_10
無事成功しました!!
かなり手間でしたが、もっと多いデータの時は使えそうです。
ただし、ローカルのCSVを編集するとエンコードが面倒だったりするので、そのあたりの運用は考える必要がありそうです。
もし使えないという方が他にもいましたら、このどれかで解決するかもしれないので、ぜひ試してみてください。
現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ