LIFE is 日々一歩(74)[コラム]アプリケーションの不具合をとことん確かめる/森 和恵

投稿:  著者:  読了時間:11分(本文:約5,100文字)


※末尾に追記あり(2018.5.15)

こんにちは! 森和恵です。GWも明けて、すっかり初夏らしい陽気ですね。次の連休まで、がんばって乗り切りましょう!

今回は、“アプリケーションの不具合を確かめてみた”という、悲しい体験をお話します。「仕事で毎日使う機能が、バージョンアップで使えなくなっちゃった!」なんて、よくあるけど笑えない話って、身近でありますよね(涙)。

さて、まずは告知から。7月に大阪で開催されるイベントに登壇します。「Bootstrapありきで考えるXDでのページレイアウト」というセッションを担当します。

【CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog】
http://cssnite.jp/osaka/vol45/

このイベントで取り上げられるAdobe XDは、ウェブのデザインツールとして注目が高まってきているツールです。そんな中、私が気になっているのが「デザインツールを使った後のコーディング」のことです。

ウェブコーディングが未経験でも、ツールを使えばそれっぽい画面の設計が手軽に作れますが、いざコーディングの段階ですごく手間がかかることも多いようで……そうならないために、コーディングを意識してツールを使うポイントをお伝えする予定です。


●ある日突然「できない」に気づく恐怖

Adobe Photoshopには、「画像アセット生成」という機能があります。これは、「生成→画像アセット」メニューをチェックし、フォルダ名に「xx.svg」や「xx.jpg」など画像のファイル名をつけておけば、PSDファイルと同じ階層のassetsフォルダ内に、レイヤーに指定した画像の形式で自動的に書き出してくれるという、便利な機能です。

【Photoshop でのレイヤーから画像アセットの作成】
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

Photoshopはビットマップデータがメインのソフトなので、ベクターデータのSVGを書き出す頻度は少ないのですが、デザインカンプをPSDファイルで作成した時などにSVG書き出しが必要になるので、画像アセット生成を使うこともあります。

とても便利に使っていたのですが、先日久しぶりに使ってみるとSVGファイルだけが出力されていないことに気づきました。

「あれ? たしかこのデータ、前は普通に書き出せていたような……」と、そこで初めて不具合に気づくわけでした。時間がないときに、このトラップに陥ると本当に泣けてきますよね……ちょうど、そんなタイミングでした。

とりあえずSVGファイルが必要だったので、Photoshopに埋め込んでいたIllustratorの元ファイルを開き、その時は書き出してなんとか対応したのですが、これをこのまま放っておくわけにも行かず、調べることとなりました。

わたしの作ったデータが悪いのか? それとも、ソフトに原因があるのか?それを解消する手立てはあるのか? を突き止めなくてはなりません。

●「他にも困っている人はいるの?」リサーチ

まずは、ネットで「他の人はどうなのか?」を調べてみることにしました。

「Photoshop 画像アセット生成 できない」と、頭で思いつくキーワードで検索し、めぼしい記事を読んで情報を収集していきます。収集する過程で気になったキーワードがあれば、それを追加してまた検索、検索の繰り返しです。

できるだけ、公式に近い情報にたどり着くまで、繰り返し検索を行ったところ、いくつかの記事が見つかりました。

【photoshopCC 2018 最新版にアップデートをしたらSVGの書き出しができなく
なりました | Adobe Community】
https://forums.adobe.com/thread/2448605

これは、日本の公式サポートサイトにユーザーが投稿した記事です。いくつか検索を繰り返すうちに、それが起っているユーザーがWindowsを使っていることに気がついて、再検索をしたところたどり着きました。

内容は、アセット書きだしをしたときのエラーについてと、同じ現象が起っているユーザーの書き込み、最後に「CC2017にバージョンダウン」すれば回避できるとのことがわかりました。

その文面を読んでいると、本家海外の公式サポートに不具合を投稿したという話が合ったので、その先を調べてみることにしました。

【Photoshop CC 19.1: SVG export problem | Photoshop Family Customer Community】
https://feedback.photoshop.com/photoshop_family/topics/svg-export-problem-by-photoshop-ver-19-1

おお。英語ですね。当たり前ですが。英語ができないわたしは、慌てず騒がず、右クリックの「日本語に翻訳」でChromeのGoogle翻訳をしました。

翻訳されたページを読むと、不具合報告の詳細と1件返信があるものの、とくに話の進展はなさそうでした。そこで、このコミュニティ内でも検索をしてみたところ、2件の記事がヒットしました。どちらも1か月前の記事のようでした。

【Photoshop CC 2017, CC 2018: Export to SVG file - endless processing loop | Photoshop Family Customer Community】
https://feedback.photoshop.com/photoshop_family/topics/export-to-svg-file-endless-processing-loop

海外の方が書き込んだ、同様の不具合報告でした。返答している方々のコメントを見ても、海外の方でもWindows版で同様のトラブルが多数報告されているようです。

最後に、Photoshop 19.1.3バージョンで修正されるというコメントがありますが、わたしの手元にある一番新しいPhotoshop 19.1.3バージョンで解決していないなぁ……と思っていると、その続きの記事がヒットしました。

【Photoshop: Export as svg, endless loop | Photoshop Family Customer
Community】
https://feedback.photoshop.com/photoshop_family/topics/export-as-svg-endless-loop

19.1.3にアップデートしても、まだ直っていないという質問者のコメントがあり、Adobeの中の人っぽい方が、システム情報を送ってくださいというところで止まっています。

ここまで記事を読んで、自分のデータの作り方が悪くて書き出せていないのではないこと、おそらくPhotoshop Windows版が、いま抱えている問題なのだという確信がある程度持てました。

●自分のマシンを使って、動作検証する

ここまで調べたところで、次は自分のマシンでの動作検証をしていきます。バージョンによって上手くいくことがあるのなら、どのバージョンからそれが起こったのかを突き止めて、その過程でなにか探れないかという実験です。

まずは、先の書き込みにCC2017ならOKだったという話があったので、それを確かめてみたところ、CC2017では何の問題もなく、スルッとSVGファイルが書き出されました。

http://r360studio.com/dgcr/dgcr-lifeis74a.png

CCバージョン以降のAdobeアプリケーションでは、デスクトップアプリの
「Creative Cloud」を使ってソフトのインストールを行います。Photoshopでは、最新バージョンの「CC(19.1.3)」と旧バージョンの「CC2017」は、両方インストールして共存ができます。

http://r360studio.com/dgcr/dgcr-lifeis74b.png

ちなみに、最新バージョンから、バージョン番号に年号がつかず「CC」表記のみとなったので、細かいバージョンを確認するには、図番号1のPSアイコンをマウスでポイントするとポップアップで表示されます。

また、旧バージョンをインストールするときは、図番号2の下向き矢印ボタンをクリックし、「他のバージョン」から選べます。

わたしは、CC2017から現在のバージョンまでを、ひとつづつインストール/アンインストールを繰り返して「どの時点で不具合がでるか?」を調べてみました。すると、2017年10月18日にアップデートされた「19.1」バージョンで起ることがわかりました。

Adobe公式サイトで、CCになってからのバージョンアップ履歴が確認できます。

【Photoshop CCの新機能】
https://www.adobe.com/jp/products/photoshop/features.html

また、「19.1」バージョンは大型バージョンアップだったので、その時にどんな機能が追加されたのか? というリリースノートが確認できます。

【新機能の概要 | 2018年1月および2017年10月リリースのPhotoshop CC】
https://helpx.adobe.com/jp/photoshop/using/whats-new.html

SVGが出力できないために、旧バージョンを使わないとならないときは、これらの新機能がつかえないことを覚えておかなくてはなりませんね。

あとひとつわかったことがありました。画像アセット生成は、Generatorという機能を使うのですが、今回のSVGが出力されていないメッセージがログファイルで残っていました。

C:\Users\KazueMori\AppData\Roaming\Adobe\Adobe Photoshop CC 2018\Generator\logs
の下に生成されるテキストファイルを確認したところ、SVGファイルを生成する段階でエラーメッセージらしき内容が確認できています。


●顧客が本当に必要だったものは、知らせてくれること

Adobe公式サイトのコミュニティの海外でも日本でも、この問題がユーザーによって報告されているので、恐らく不具合対応のために動いてくれているのでは……と期待しているのですが、表面的にはなにも見えていないのが不安です。

先に紹介したリリースページには「既知の問題」が掲載されていますが、残念ながらここに今回のトラブルは記載されていませんでした。

今回の不具合は、旧バージョンを使わないと対応ができないという、かなり不便なトラブルではないかと個人的には感じたのですが、事実をつかんだ段階で、まず知らせてくれるとうれしいなと思いました。

そうすれば、この調べる時間を無駄に費やさずにすんだのではと思います。

この記事を書くことにした理由は、不具合を切り分ける方法として、こういう調べ方があるよという例をお伝えしたかったからなのですが、もしも困ったときに突破口を見つけるきっかけになれば幸いです。

ちなみに、いま私がどうしているかというと、普段は一番新しいバージョンを利用し、SVGの画像生成が必要なときだけ旧バージョンを使っています。

というところで、今日は終わりです。

次回は、Bootstrapの話に戻ります。バージョン4.1もリリースされて、再び注目されてますし、楽しみです。

今年は、「Bootstrap×Adobe XD×Dreamweawver」をテーマに話していこうかなと思います。

ようやく仕事も落ち着きだしてきたので、Youtubeライブ配信もまた放送しますね。(チャンネル登録500名さま突破!記念なんてのもいいかも)

チャンネル登録、お待ちしております。
https://www.youtube.com/r360studio

ではまた、次回お目にかかりましょう!
(^^)

※追記
 本日のデジクリ発行後、夕方に新しいバージョン Photoshop 19.1.4 がリリースされました。
 今回の不具合が、きれいに解消されておりますので、慌てての追記です。
 (本人が一番ビックリしています……。調べた半日が……)
 http://r360studio.com/dgcr/dgcr-lifeis74c.png

【森和恵 r360studio/ウェブ系インストラクター】
mail:r360studio@gmail.com
サイト:http://r360studio.com/