読み込めなくなったHDDをデータを消さずに復旧したい（未解決）その2
これは日記であり、解決方法を示してはいません！
前置き
Windows11で内臓HDD（データ保存用）を外付けUSBで繋げたら読めなくなった話の2回目。
↓前回 magokoro-magon.hatenablog.jp
HDDが読めなくなった時にまずやること
- クローンの作成
- パーティション情報の保存
- ファイルの復元
使うツール（フリーソフトのみ）
- TestDisk（パーティションの情報を保存したり修正したりするのに使う）
- Active@Disk Editor（ハードディスクの中身を見るのに使う）
Active@ Disk Editor - Freeware Hex Viewer & Hex Editor for raw sectors/clusters
- Macrium Reflect Free（クローンを作るのに使う）
Macrium Software | Reflect Free Edition
HDDのデータを復旧するまでの道のり
読めなくなったHDDを操作しない
まずクローンしよう。
元のHDDをいじくり倒すとどんどん壊れていくのでクローンしてから作業しよう。
別の使ってないHDDがあるなら機械でクローンしてもいい。ソフトでクローンするより早い。(1TBで3時間くらい)
ソフトクローンの前準備
8TBのHDD上に仮想ディスクを作ってそこに1TBのHDDをクローンすることにした。
まずWindowsの「ディスクの管理」で作る。
「操作」メニューで「VHDの作成」を選ぶ。
サイズは元のHDDより大きくしておけばいい。
「仮想ハードディスクの種類」で「容量固定」を選んでしまうと、指定したサイズでVHDXファイルを作りはじめるのでめっちゃ時間がかかる。
すぐにやめたけど、1TBで数時間はかかりそうだった。
「可変容量」だと数秒で出来る。
パーティションを保存する
とりあえず今のパーティション情報を保存しておこう。
TestDiskでBack Upをしておく。
もしパーティションが見れない状況になっていたらQuick Searchしよう。
まずは「正しいと思われるパーティション情報」を手元に置いておくのだ。
色々やってると意図せずパーティションの終了セクタの位置がずれたりする。
自分の場合はDataパーティションが1MB分減った。
ソフトでクローンする
ファイルシステムを読んでコピーするんじゃなくて、セクタ丸ごとコピーね。
WDのHDDに付いてきた「Acronis True Image for Western Ditigal」でクローンしたらパーティションの順番が入れ替わったのでこれは正しくないのかもしれない。
なのでMacriumを使うことにした。
デフォルトがファイルシステムに従ってクローン（インテリジェントセクタコピー）するようになってるので、ここは変える。
クローン先を選ぶときに「高度な設定」的なのが左下にあるので、そこで設定する。
設定でクローン完了時にメールを送ることができるが、これは有料機能らしい。
クローンの余談
実はMacriumを使う前にdisk2vhdxを使ってvhdxイメージを作ってた。
Microsoft公式というよりは、Microsoftの偉い人が個人的に作ったツールっぽい。
Microsoftのサイトからダウンロードできる。
Disk2vhd - Windows Sysinternals | Microsoft Learn
このvhdxイメージからもファイルは復元できたのだが、セクタの完全コピーではないのか、一部のセクタが0で埋められていた。
ファイルを復元してみる
このvhdxをマウントしてTestDiskに同梱されている「PhotoRec」を使いファイルを復元することができた。
この復元はあくまでもHDD上に生き残ってるデータを吸い出すツールなので、フォルダ構造やファイル名は復元できない。
失敗した
Macriumでクローン中にHDDスタンドの電源が切れた。
そのまま電源が入らなくなった。
交換して再度クローンに挑戦しようとしたけど、なぜかHDDのパーティションがおかしくなっていた。
続く
ECS Execを実行するときの注意点
環境作成時の注意点（Cloud9の場合）
作成の方法はググっていただくとして、注意点だけ。
環境作成時の注意点（CLIの場合）
接続するときは毎回credentialsを作らないといけない。
IAMユーザー作成時のアクセスキーとシークレットキーをセットしたcredentialsで、SSM接続時のcredentialsを作る。
このcredentialsが有効なのは一時的なので（デフォだと12時間）、繋がらなくなったら作り直す必要がある。
実行方法
想定されるエラー
An error occurred (TargetNotConnectedException) when calling the ExecuteCommand operation: The execute command failed due to an internal error. Try again later.
よくわからないけど接続できないときはこのエラーが出るけど、「Try again later.」と言われても待っても解決しない。
実行失敗する時の確認事項
タスクでExecuteCommandは有効になっているか？
aws ecs describe-tasksを実行。
「ExecuteCommandAgent」が「RUNNING」で、「enableExecuteCommand」が「ture」。
なってなかったらtrueにしてタスクを起動しなおす。起動中のtrueの設定は反映されない。
ポリシー許可しているか？
IAMポリシーでコマンドが拒否されてないか？
調べ方：IAM Policy Simulatorで確認する。
https://policysim.aws.amazon.com/
ECSのExecuteCommandが通るか。
通らなかったら、何が悪いか確認できる。
環境確認ツールを使う
amazon-ecs-exec-checker
GitHub - aws-containers/amazon-ecs-exec-checker: 🚀 Pre-flight checks for ECS Exec
このツールでも途中で止まるようなら、都度IAM Policy Simulatorで確認していく。
最終手段
どこも問題無いのに、それでもexecute-commandが通らなければタスクを再起動する。
やり方はECS→クラスター→サービス→更新
「新しいデプロイの強制」にチェックを入れる。
自分もこれで行けた。
VirtualBoxにMacOSをインストールする
あちこちのサイト見て回ってようやくインストールできた。
VirtualBoxのマニュアルの3.1.1に書いてあるけど、MacOS Xのサポートは試験的なものらしいのですんなりとはインストールできない。
環境
- Windows11Home（ホスト）
- VirtualBox 7.0.2
- MacOS 12.6.1 Monterey（ゲスト）
やること
- VirtualBoxマネージャーで仮想マシンを作る
- vboxファイルにExtraDataを書き込む
- VirtualBoxマネージャーから起動する
VirtualBoxマネージャーで仮想マシンを作る
- VirtualBoxを起動して新規から作成
- Mac OS X（64-bit）を選ぶ。
- 名前を決める。（この記事では「macOStest」とする）
vboxファイルにExtraDataを書き込む
管理者権限のコマンドプロンプトで実行
Intel CPUの場合
cd "C:\Program Files\Oracle\VirtualBox\" VBoxManage modifyvm "macOStest" --cpuidset 00000001 000106e5 00100800 0098e3fd bfebfbff VBoxManage setextradata "macOStest" "VBoxInternal/Devices/efi/0/Config/DmiSystemProduct" "MacBookPro11,3" VBoxManage setextradata "macOStest" "VBoxInternal/Devices/efi/0/Config/DmiSystemVersion" "1.0" VBoxManage setextradata "macOStest" "VBoxInternal/Devices/efi/0/Config/DmiBoardProduct" "Iloveapple" VBoxManage setextradata "macOStest" "VBoxInternal/Devices/smc/0/Config/DeviceKey" "ourhardworkbythesewordsguardedpleasedontsteal(c)AppleComputerInc" VBoxManage setextradata "macOStest" "VBoxInternal/Devices/smc/0/Config/GetKeyFromRealSMC" 1 VBoxManage setextradata "macOStest" VBoxInternal2/EfiGraphicsResolution 1440×900
AMD CPUの場合は以下を追加
VBoxManage modifyvm "macOStest" --cpu-profile "Intel Core i7-6700K"
これで.vboxファイルに
cpu profileの一覧はVBoxVMM.dllにあるらしい。
Where is the list of supported CPU profiles in VirtualBox? - Unix & Linux Stack Exchange
ちなみに6.x系には無いが、VirtualBox7.0だと以下のコマンドでprofileの一覧が見れる。
「VBoxManage list cpu-profiles」
Oracle® VM VirtualBox User Manual for Release 7.0 - Chapter 7 VBoxManage
C:\Program Files\Oracle\VirtualBox>VBoxManage list cpu-profiles #00: Intel Core i7-6700K [AMD64] #01: Intel Core i7-5600U [AMD64] #02: Intel Core i5-3570 [AMD64] #03: Intel Core i7-3960X [AMD64] #04: Intel Core i7-2635QM [AMD64] #05: Intel Pentium N3530 2.16GHz [AMD64] #06: Intel Atom 330 1.60GHz [AMD64] #07: Intel Pentium M processor 2.00GHz [x86] #08: Intel Xeon X5482 3.20GHz [AMD64] #09: Intel Core2 X6800 2.93GHz [AMD64] #10: Intel Core2 T7600 2.33GHz [AMD64] #11: Intel Core Duo T2600 2.16GHz [x86] #12: Intel Pentium 4 3.00GHz [AMD64] #13: Intel Pentium 4 3.00GHz [AMD64] #14: Intel 80486 [x86] #15: Intel 80386 [x86] #16: Intel 80286 [x86] #17: Intel 80186 [x86] #18: Intel 8086 [x86] #19: AMD Ryzen 7 1800X Eight-Core [AMD64] #20: AMD FX-8150 Eight-Core [AMD64] #21: AMD Phenom II X6 1100T [AMD64] #22: Quad-Core AMD Opteron 2384 [AMD64] #23: AMD Athlon 64 X2 Dual Core 4200+ [AMD64] #24: AMD Athlon 64 3200+ [AMD64] #25: ZHAOXIN KaiXian KX-U5581 1.8GHz [AMD64] #26: VIA QuadCore L4700 1.2+ GHz [AMD64] #27: Hygon C86 7185 32-core [AMD64]
もう一度VirtualBoxを立ち上げて「起動」ボタンを押せばOK。
トラシュー
「起動」を押して以下のエラーが出た場合
Failed to query SMC value from the host (VERR_INVALID_HANDLE).
Result Code: E_FAIL (0x80004005)
Component: ConsoleWrap
Interface: IConsole {872da645-4a9b-1727-bee2-5585105b9eed}
1→0にする
VBoxManage setextradata "macOStest" "VBoxInternal/Devices/smc/0/Config/GetKeyFromRealSMC" 0
インストール中に落ちる場合
コントロール パネル\すべてのコントロール パネル項目\プログラムと機能
「仮想マシンプラットフォーム」を無効にして再起動する。
インストール中に落ちる場合その２
やっぱり1→0にする
VBoxManage setextradata "macOStest" "VBoxInternal/Devices/smc/0/Config/GetKeyFromRealSMC" 0
それでもまだpanicになる場合
これも追加で。
VBoxManage setextradata "macOStest" "VBoxInternal/TM/TSCMode" "RealTSCOffset"
ずっとループしてるっぽくてインストール画面に進まない場合
自分も黒画面に文字がずっと出続けてグラフィカルなインストール画面に全然進まなかったんだけど、以下をやったら進めた。
同時にやったのでどれが正解なのかわからないけど、とりあえず全部やっとけ！
- ExtraDataに書き込む値
コマンドプロンプトでExtraDataに書き込むところで、「文字列はなんでもいいのかな？」と思って最初は自分の好きな文字列にしてたんだけど、うまく行かなかった。
特にDeviceKeyは適当な文字列に見えてそうじゃないらしい。OSKがどうたら。
- VMの名前
スペースがあるとダメという記事を見たので「macOS test」→「macOStest」に変えた。
- 実は.vboxファイルが書き換わってない
コマンドプロンプトで入力するときはちゃんとVirtualBoxを終了させておいてね！
一度は起動したけど二度目は起動しなくなった
解像度は縦と横それぞれ入れたら正常に起動するようになった。
VBoxManage setextradata "macOStest" VBoxInternal2/EfiHorizontalResolution 1440 VBoxManage setextradata "macOStest" VBoxInternal2/EfiVerticalResolution 900
最後に
i7-6700だけどくっそ重い。
インストールする過程で色々リストから選んだりボタン押したりするけど、マウスの動きがカクカクでちゃんと選べなかった。
実用は厳しいね。
今日のアフィリエイトコーナー！！
おススメの漫画（無料）。読んでてほっこりする。
以下の栄養ドリンクは特に元気が出るわけではなかった。
![[Amazonブランド]SOLIMO 栄養ドリンク リオパミン3000 100ml x 50本 [指定医薬部外品]](https://m.media-amazon.com/images/I/51HyMui58uL._SL500_.jpg "[Amazonブランド]SOLIMO 栄養ドリンク リオパミン3000 100ml x 50本 [指定医薬部外品]")
![[Amazon限定ブランド] [指定医薬部外品] PHARMA CHOICE 栄養ドリンク リオパミン3000 100mlx50本](https://m.media-amazon.com/images/I/51szOIizOkL._SL500_.jpg "[Amazon限定ブランド] [指定医薬部外品] PHARMA CHOICE 栄養ドリンク リオパミン3000 100mlx50本")
以上
読み込めなくなったHDDをデータを消さずに復旧したい（未解決）その１
HDDを入れ替えたら読めなくなりました。
先に言っておくと、「この記事は解決してない」です。
作業の備忘録というか、調べながらやったことをメモしているだけ。
目次
環境
Windows11 Home
換装前
換装後
- 内臓HDD 8TB（Western Digital）←新しく買った
- 外付けHDD 1TB（Seagate）
- 外付けHDD 1TB（SAMSUNG）
何が起きたか
PC購入時はSeagateのHDDにOSが入っていたのだが、SSDを購入し、SeagateのHDDはデータ格納用に変えた。
時が経ち、SeagateのHDDの空きが少なくなってきたのでWestern Digitalの8TBのHDDを購入し、差し替えた。
これ。（アフィリエイト）
SeagateのHDDはUSBの外付けにした。
このディスク2というのがそれだ。見事に無効である。取り外してUSBの外付けにしただけでこの状態だ。
ちょっとした衝撃でハード故障したのだろうか。
やってみたこと
- 別のHDDに丸ごとクローン。
- Linuxにつなげてみる。
- TestDisk 7.2-WIPで調査。
別のHDDに丸ごとクローン
玄人志向のHDDスタンドで実施。特に止まることなくクローンは3時間ほどで完了し、同じように「無効」と認識されるHDDが2台できた。
スタンドはこれ。（アフィリエイト）
つまり、ハード故障ではないと判断。
HDDスタンドの説明書に、クローン中不良セクタがあったらエラーになると書かれていたので、不良セクタも無かったのだろう。
Linuxにつなげてみる。
これはやらなきゃよかった。
VMwareにRocky Linux9.0をインストールしてホスト(Windows11)につないでるHDDをそのままゲスト(Linux)に接続してみたが、Linuxから見えない。ntfs-3g関連を入れてLinuxから救い出そうとしたが失敗。
このせいでHDDに変なパーティションができてしまったと思われる。
TestDisk 7.2-WIPで調査。
というわけで本題。
HDDを何とかするソフトを探していると有償のがいくつかでてくるが、これはオープンソース。
以降はTestDiskを操作した記録。
1. ログは取るかい？
「つくる」「あるものに追加する」「いらない」の３択。
あったほうがいい。なぜなら画面に出力される以上の情報がログに出るからだ。
出力しても数百行程度のテキストなのでサイズも気にしなくていいし、何より少しでも情報が欲しい。
HDDの復旧で色々作業する場合、今までの作業は記録されていたほうがいい。
2. どのディスクを見るんだい？
接続されてるディスクが一覧で出るので該当するものを選ぶ。容量とデバイスの名前が出てるので見ればわかると思う。
3. 調査したいHDDのパーティションの種類はなんだい？
Windowsなら「Intel」か「EFI GPT」のどちらからしい。
選択肢の下に「Hint」として、TestDiskが検出したパーティションのタイプが出るので、それを選べばいいと思う。
今回は「EFI GPT」にした。
ちなみにデバイスマネージャーで該当のHDDの詳細を見ても「GPT」と書かれていたので合っているはず。
ここで「イベント」タブを見ると「デバイスの設定が移行されていません」と言われてる。
最初はこれ見て「内臓HDDを入れ替え前後で同じドライブ文字割り当てたから競合したのか？」と思ったがわからない。
エラーコード的な「0xC0000719 」でググると色んな症例が出てくるので、これで原因を特定するのは無理そうだ。
4. 何をしたいんだい？
「Analyse」を選ぶ。これと「Advance」以外の選択肢は上級者向けらしい。
すると次の画面で今のパーティション情報が出てくる。
check_part_gpt failed for partition 3 P MS Reserved 208896 239615 30720 [Microsoft reserved partition] Current partition structure: 1 P EFI System 2048 206847 204800 [EFI system partition] 2 P MS LDM MetaData 206848 208895 2048 [LDM metadata partition] No FAT, NTFS, ext2, JFS, Reiser, cramfs or XFS marker 3 P MS Reserved 208896 239615 30720 [Microsoft reserved partition] 3 P MS Reserved 208896 239615 30720 [Microsoft reserved partition] 4 P MS LDM Data 239616 1952499711 1952260096 [LDM data partition] 5 P Windows Recovery Env 1952499712 1953523711 1024000 [Basic data partition]
3が2つあるのは気になるけどとりあえず重なったりはしてなさそう。
5. 調べるかい？
まずは今のパーティション情報をバックアップした上で「Quick Search」だ。
これは簡易的にパーティションを検査してくれるメニューだそうだが、40時間くらいかかった。
TestDiskについて色々調べてたら、海外のサイトで「Quick Searchを選ぶとそのままDeeper Searchが実行されるよ」とかいう記述を見たが本当だろうか。
色々なサイトを見てるとQuick Searchですぐに結果出て、その後ちゃんと検査したかったらDeeper Searchしなよ、みたいな記述を見かけたので、Quick Searchにこんなに時間がかかるとは思わなかった。
6. 調べた結果が出たよ！
40時間くらいかかったQuick Searchの結果、見つかったパーティションが羅列される。Analyseで出た結果とまるで違う。
Linux filesysなんてのがあるのはLinuxにつなげたときにできてしまったのかもしれない。
余計なことしなければよかった。
ここでログを見ると各パーティションのもっと詳しい情報が出てるのでログも確認する。
開始位置とかサイズとかめちゃくちゃやんけ！っていうパーティションは多分ぶっ壊れてるので捨てよう。
この画面で「P」を押すとそのパーティションの中身が見れて、ファイルを他のドライブにコピーできたりするらしいが、自分の場合は次のメッセージが出て何も見れなかった。
Can't open filesystem. Filesystem seems damaged.
残念ながらTestDiskでファイルを取り出すことはできないようだ。
7. どのパーティションを選ぶ？
さて、正しい（と思われる）パーティションを選ぶのだが、Analyseの時にあったパーティションが出て無い。
このまま進めるとあるはずのパーティションを捨ててしまうことになる。
そこで「load backup」により、Analyseの時に保存したパーティション情報を読み込むと、Quick Searchで見つかったパーティションとバックアップしてあったパーティションが混ざったリストができる。
Disk \\.\PhysicalDrive2 - 1000 GB / 931 GiB - CHS 121601 255 63 Partition Start End Size in sectors D Unknown 2048 206847 204800 P EFI System 2048 206847 204800 [EFI System Partition] [SYSTEM] >P Unknown 206848 208895 2048 P Unknown 208896 239615 30720 D Unknown 239616 1952499711 1952260096 P MS Data 239616 1952499711 1952260096 D MS Data 25019059 25021938 2880 [NO NAME] D MS Data 121907091 121909970 2880 [NO NAME] D MS Data 122114143 365078622 242964480 D Linux filesys. data 1212047138 1218568156 6521019 [a~V 4) D MS Data 1951475713 1952499712 1024000 D Unknown 1952499712 1953523711 1024000 D MS Data 1952499712 1953523711 1024000 [Recovery tools]
混ざっているので、当然同じパーティションも並ぶ。
バックアップ（backup.log）には開始位置とサイズしか情報が無いので、Unknownで出てくる。
Unknownのパーティションはログを見ながらTypeを変えよう。
8. やってしまった！
パーティションの情報を書き換えながら慎重に操作してるつもりが、Enter押してしまった。
焦ってEscを押すと「Analyse」を選ぶメニューに戻ってしまった。
「また40時間やるのか、、、」と一瞬気落ちしたが、でも大丈夫。
ログさえあれば自分で設定できるので問題ない。
しかし、安易にEnterを押してはいけない。
9. Analyse再開
もう一度Analyseからやりなおすのだけど、すぐにStopしていい。
そのままパーティションを直す画面に進むが、ここでログを元に、「add partition」すればいいのだ。
backupを取ってあるなら「load backup」してもいい。
ていうか結果論だけど「認識してないけど必要そうなパーティション」は無かったのだから、40時間も待たずにすぐに「load backup」してもよかったということになる。
10. そして書き込みへ
パーティションに問題が無いと思ったら、Writeするのだ。
「ホントに書き込むの？」と聞かれるので引き返したくなるけどWriteするのだ。
11. 一部復活
PCの再起動後HDDの一部のRecovery tools(G:)の部分だけが見えるようになった。
しかし相変わらずディスク管理上では「無効」のままだし、ボリュームの一覧にもなぜかGは表示されない。
diskpartではパーティション見える。
ダイナミックなのがだめなのだろうか。
まとめ
HDDが見えない
↓
TestDiskでパーティション検査
↓
パーティションを正す
↓
一部のパーティションだけOSから見えるようになる
次回予告
- ファイルの復元
- ベーシックデータに変換
- ブートセクタ
- 仮想ディスク
【できなかった】Androidのニコニコ生放送アプリで画面録画
環境
Oneplus5 Android10(非root)
ニコニコ生放送アプリは、チャンネル放送は画面録画できないそうで。
AZ Screen Recorderみたいなキャストして記録するタイプだと画面が真っ黒になっちゃう。
これはアプリが録画を禁止してるからみたい。
Activityを開くときにFLAG_SECUREを立てることで記録できないようにするんだとか。
解決方法としては、XposedでFLAG_SECUREを無効にするしかない。
Root化しないでFLAG_SECUREを無効にする方法は、仮想空間アプリを使うことだった。
しかしうまく行かなかった。
以下に紹介するアプリはストアに無い野良アプリなので自己責任でおねがい。
X8Sandboxを使う
Xposedが使える仮想空間アプリ。めちゃくちゃ広告が出る。
apkのサイズがでかい。
起動にめちゃくちゃ時間がかかる。
スマホがフリーズするくらい起動が遅い。
Google系サービスは入ってるっぽい。
何かメニューを選択するたびに広告動画を見ないといけない。
PIPできるのは便利だと思った。
多分後述するVirtualXposedと同じ問題があると思うので諦めた。
SlimVXposedを使う
Xposedが使える仮想空間アプリ。
動作もapkもとても軽い。
Google系サービスは自分で持ってこないといけない。
Xposedモジュールのapkを自分で持ってきてインストールしないといけない。
使い方がわからない。
多分後述するVirtualXposedと同じ問題があると思うので諦めた。
VirtualXposedを使う
最初に上がった候補はこれ。Xposed Installerが最初から入ってる。
Google系のサービスもメニューからインストールできる。
最新版の0.22.0はXposedが起動しない。
0.20.3はXposedは起動するけどモジュールがダウンロードできない。
さらにバージョン落として0.18.2だとXposedモジュールがインストールできた。
で、ニコ生インストールして起動できたのはいいんだけど
最初にログインするときに内部ブラウザからログインするじゃん。
ログインできたらアプリに遷移するんだけど、VirtualXposed内じゃなくて、元のアプリが起動しちゃう。
だから、元のニコ生アプリをアンインストールしたんだけど、
そしたら「nicocas://」のスキーマエラーで、VirtualXposed内のニコ生アプリに遷移してくれない。
VirtualXposed内のアプリは、あくまでもVirtualXposedとして動くから、アプリ独自のURLスキーマに反応しくれないっぽい。
結論
禁止されてるアプリはroot化しないと画面録画できないっぽい。
終わり
Webデザインツール「nicepage」を使ってみよう。
Windows10 64bit
nicepageを使ってみた。
これはあまり無料ツールとは言えない。
無料プランはあるけれども、できることは少ないようだ。
「7日間は全機能使えます、8日目からは制限します」と書かれている。
サブスクではなく買い切りのようだ。
早速Windows版をダウンロードしてインストールしてみた。
（ブラウザで出来るので、実は必要ない。）
起動するとこんな感じだ。チュートリアルで作成したpageが1つあるが。
メニューは「Figma」より断然わかりやすい！！
操作性も良い。ページに並べられたパーツが一覧化されていてわかりやすい。
さて、これをエクスポートしてみる。
「Website」と「Image」以外は有料プランのようだ。
「Website」は「.nicepage.io」への出力になるみたい。
とりあえず7日間は全機能使えるようなので、「HTML」と「WordPress」に出力してみた。
「HTML」で出力するとたくさんファイルができる。jquery.jsも入ってる。
htmlファイルを見て見よう。
ちゃんとしてる。「Figma」の時のようなぐちゃぐちゃなHTMLではない。
CSSも「Figma」の時は全部absoluteで座標指定されていたが、nicepageはそんなことはない。というか冒頭に「floala」って書いてあるんだけど、外部から持ってきたCSSなんだろうか。使っていいのこれ？
続いて「WordPress」で出力したもの。どうやらテーマとして使えそうなのでzipで固める。
wordpress管理画面からテーマのzipを追加したら、テーマ一覧に出てきた。
ちなみにこれを有効化すると「nicepage plugin」というのも一緒にインストールされる。
メニューの「Nicepage」から各ページを作ることになるようだ。
ブラウザ版、デスクトップ版と同じ画面が出る。
結論
このツール欲しい！Figmaとは比べ物にならないくらい良い！！
$59でこれだけできるならありじゃない？？
8日後の「無料プランでもフル機能使えるよ」期間終了後どうなるのかが気になる。
終劇
Webデザインツール「Figma」を使ってみよう！
Webサイトを作るにあたって、デザインするのに良いツールは無いものかと尋ねて三千里。
そこでみつけた「Figma」とは！！
Webページをデザインするツール！！
でも、それをHTMLやCSSに吐き出してくれるツールであることを期待してはいけない！！
というかWebデザインよりも、みんなでホワイトボードにお絵かきしながら議論できるツールと言った方がいいかもしれない。
そのお絵かきの一つにWebページのデザインがしやすいUIが揃ってるよってだけで。
Figmaの特徴
- 基本ブラウザで動かす。
- WindowsやMacにインストールするネイティブアプリもある。
- Android、iOSのアプリもある。
- データはアカウントで共有されているので、どこでもどんなデバイスでも作業可能。
- チームで共有可能。
- 英語しかない。（Chromeの日本語化プラグインがあるけどところどころ英語のまま）
- 日本語フォントも標準では無い。
- 最近日本法人ができたので近いうちに日本語対応されるかも。
- 作ったデザインを出力できるのは画像（JPG、PNG）かPDF。
FigmaでのWeb制作
FigmaからHTML/CSSへの出力
プラグインのページで「HTML」と入れて検索した結果がこれ。
たくさんあるので上（インストールされてる順）から適当に入れてみた。
結果、以下の二つしか気軽には使えない。
"気軽に"というのは、プラグインだけでは完結しなくて、外部サイトにユーザー登録などしないと動作しないプラグインは除外したいのだ。
Figma to HTML
初期状態で入ってるサンプル的なワイヤーフレームを出力してみた。
これに対して「Figma to HTML」を実行すると
出たー！
CSSも出てるよ！
でもよく見て欲しい。
- HTMLは一行で出力されていて見づらい。
- CSSは全部absoluteで位置指定されていてgridとか使われてない。
Visual Studio Codeで成型したのがこれ。
なんかよくわからないdivが沢山あるな。
というわけでHTML/CSSの出力は期待しない方がよさそうだ。
（他のプラグインだと違うのかもしれない。試してない。）
Figma to HTML/WordPress by pxCode
こいつFigmaをHTMLに出力する（ユーザー登録が必要）機能もあるのだが、URLを指定してFigmaにインポートする機能も持っている。
インポートしてみた結果。
なかなかいい感じじゃないですか！
これは使えるような気がする。
まとめ
- FigmaはWebサイトをデザインしてHTML/CSSを出力できるけど、参考程度にしかならないよ。
- デザインを複数人で議論するのなら良いツールかもしれない。
- Webデザインに限らずいろんなテンプレート（AWSとか！！）があっていろんなお絵かきができる。
終劇
