NOMA MEMO

なんとなく日々の気になったこと。

noma memo

スライダーのページネーション(ドット)が出てこない時の最終手段

SwiperSliderでページネーション&矢印付きのスライダーを設置しようとしてました。

しかし、なぜかダウンロードしたときのdemoでページネーションのドットが出てこず、Swiper DemosのサイトからGitHubにいき、乗っているコードを抜いてみたり、全部コピーして、相対リンクなどは調整したもののなぜか出でこず手間取りました。

swiperjs.com

github.com

最終的にはSwiper Demosのopenwindowを別枠で開き、コードを全コピー、相対リンクを調整したらうまく動きました。 どうしてうまくいかなかったのか、という理由はわかりませんでした、、(gitで管理して差異とか確認すれば良かったのかも?)

この現象、なぜかBxSliderの時もあった様な気がして、一応検証で確認したり、該当クラスに色をつけて見つけてみようと思ったものの行方不明。

自分で悩んで時間なくなるのもあれなので、困ったらさっさとちゃんと動いているデモページからコードをダウンロードしたりコピーしようという学びです!

スライダーのページネーション(ドット)が出てこない時の最終手段

SwiperSliderでページネーション&矢印付きのスライダーを設置しようとしてました。

しかし、なぜかダウンロードしたときのdemoでページネーションのドットが出てこず、Swiper DemosのサイトからGitHubにいき、乗っているコードを抜いてみたり、全部コピーして、相対リンクなどは調整したもののなぜか出でこず手間取りました。

swiperjs.com

github.com

最終的にはSwiper Demosのopenwindowを別枠で開き、コードを全コピー、相対リンクを調整したらうまく動きました。 どうしてうまくいかなかったのか、という理由はわかりませんでした、、(gitで管理して差異とか確認すれば良かったのかも?)

この現象、なぜかBxSliderの時もあった様な気がして、一応検証で確認したり、該当クラスに色をつけて見つけてみようと思ったものの行方不明。

自分で悩んで時間なくなるのもあれなので、困ったらさっさとちゃんと動いているデモページからコードをダウンロードしたりコピーしようという学びです!

XDでそれっぽいパターンを作る方法(ドット背景)

XDでモックを作ってみるとき、背景がなくなんとなくイメージできない時がありました。 Illustratorの要領でXDでもパターンを作ることができるのでスクリーンショットでメモ。

①線なし2020の正方形を準備 f:id:Haribooooom11:20200731082222p:plain ②線なし1010の正円を準備しセンターに f:id:Haribooooom11:20200731082225p:plain ③グループ化(⌘G) f:id:Haribooooom11:20200731082228p:plain ④リピートグリット(⌘R) f:id:Haribooooom11:20200731082231p:plain ⑤リピートグリットで余白を0に f:id:Haribooooom11:20200731082238p:plain

⑥リピートグリットを横幅いっぱいに伸ばす f:id:Haribooooom11:20200731082241p:plain

⑦⌘Dで複製 f:id:Haribooooom11:20200731082245p:plain

⑧複製した物を横に10ずらし、右のリピートグリットを伸ばす f:id:Haribooooom11:20200731082409p:plain

⑨2列を余白の状態でリピートグリット化 f:id:Haribooooom11:20200731082414p:plain

⑩完成 f:id:Haribooooom11:20200731082419p:plain

なお、パターンをそのままにするとXDが重くなるので、一旦書き出しして画像にしてから背景として使うのもあり。 近くで見たら余白が白く見えていますが、モックなので許してください(気になるようなら下の背景を同色にする)

パターンの色を変えたい時

パターンの色を変えることを想定する場合、先ほどの工程の前にブロックをコンポーネント化する必要があります。 パターンを作ってから画像化したら色は変えられないので注意。

①正方形をコンポーネントf:id:Haribooooom11:20200731083212p:plain ②パターンを作る(⌘R→⌘D) f:id:Haribooooom11:20200731083215p:plain ③最初にコンポーネント化した正方形を選択し、塗りの色を選択 f:id:Haribooooom11:20200731083220p:plain ④変えたい色を選択して完成 f:id:Haribooooom11:20200731083225p:plain

リピートグリットとコンポーネントを活用することでXDの使い道は広がりそうです!

XD プラグインのインストールに関する問題

久しぶりにXDでポートフォリオを作るためのモックアップを作ろうと思ったら、なぜかプラグインが全部消えてしまっていました。 結局のところ秒(?)で解決できる問題だったのでのまメモ。

起こったことは、プラグインをインストールしようとしたところ、更新エラーが出たことです。 それをインストールできるようにすることが目標です。

出たエラー↓

f:id:Haribooooom11:20200729114155p:plain
更新エラー

表示されたリンクをクリックすると以下のサイトに繋がります。 helpx.adobe.com

このサイトに従ってFinderで探して、ロックの確認をしたものの元々ロックされておらず、Adobe cloudの更新を確認しましたが問題なく。 むしろ更新が2020/07/29の今日でした。

そこで困ったときのPC再起動。 そうしたら問題なくAdobe XDでプラグインのインストールできました。

f:id:Haribooooom11:20200729114902p:plain
プラグイン

普段PCを使い終わった後電源落とさないので、そこが問題だったのかも。困ったときは再起動しよう!