ぶっちゃけ微妙
どういうものか
BASEにはFTPがない。指定の枠内に画像を登録できる程度。
「HTML編集App」をインストールすると「ファイルアップローダー」が解禁されて、画像やらcssやら、ある程度の制限はあるけどWEB周りの任意のものがアップできるようになる。
<input type="file" accept="image/jpeg,image/pjpeg,image/png,image/x-png,image/gif,text/css,text/javascript,application/javascript,application/x-javascript" class="m-uploadBox__input">人間に分かるように変換するとこんな感じ。
- jpg
- gif
- png
- css
- js
素材画像がsvgとかwebpとかダメなやつだったらツールとかWEBサービスで変換する。
通常の制作で新しいものを取り入れまくった人だと地味に躓いちゃう。
使い方
Developers画面の右上にある「ファイルアップローダー」からアップする。
仕様
- アップしたファイルは削除できない
- アップしたファイルのURLはその場その時しか確認できない
- 複数ファイルを一括アップできない
- 1ファイル1MBまで、1日10MBまでの制限
無料サービスにケチを付けてもどうなのって感じなんだけど、アップ済みファイルの管理とか閲覧ができないのが非常にダルい。ここだけはどうにかして欲しい。
活用にあたって
アップしたファイルの管理のために、エクセルまたはスプレッドシートを用意した方がいい。
生成されたURLは当然のこと、いつアップしたとか何用のためとかメモっておいた方がいい。
一応ファイル名はそのままになってるけどどれが何なのか分からなくなったらしんどい。
ついでに、完成までのスケジュールはアップロードファイルの容量も計算に入れる必要がある。一日で済ませるのはまず無理。とりあえず書き出した画像は軽量化したほうが無難。
気軽に始められるけど、手を入れるとなるときっちり管理しなきゃ詰む。
思いつく注意
普通に作ってる上でcssとかjsでたまにやる、外部ファイル同士のincludeとかimportはできないと思った方がいい。
できるっちゃできるけど、相対パスが使えないから絶対パスで書かないといけないし、更新するたびにパスが変わるからめんどくさいことになる。全部まとめて1ファイルに突っ込むか、それぞれを直接読み込ませるようにするのが無難。
例えばcssだったら、style.cssに全部突っ込んでまとめてしまう。CSSリセットをつかうならそれもstyle.cssに入れちゃうとか、そっちは内容は恒久的に変わらないんで、別で読ませるのもあり。
ということは、cssのbackgroundで画像を指定するのも無理というかめんどくさいことになる。サイズとかの調整はstyle.cssで、画像指定はHTML編集App上でやってしまうのが賢いんじゃないだろうか。嫌だけど。
つまり、svgで画像を作ってcssで背景として読み込んでる場合はこんな感じでやっちゃうとかになる。
- svgをpngとかに変換する
- 画像をアップしてurlを取得する
- HTML編集App上に<style>を作って背景をベタ打ちする
<style>
li.cart a{ background-image: url(https://basefile.akamaized.net/【ショップID】/【ユニークコード】/cart.png) !important;}
</style>cssファイルを編集してアップしたURLに書き換えても後から修正することになったらを考えると、都度いじるのは大変だからこっちのが楽でしょう。!importantを付けてるから優先されて大丈夫でしょって感じで。
コメント