しっかり手をいれるのは初めてなのでマジでゼロからのメモ。
BASEとは
全くの無料で運営できて、その代わり販売手数料がちょっと高め。
決済代行の手続きが必要ないのでめちゃくちゃ楽。
「Apps」で機能を追加してやっていく。
独自デザインを取るかページ追加を取るか
地味にしんどいところで択がかかる。
ページの追加について
「ページ追加 App」を入れると独自ページを作成できる。表示上限は5ページ。
使用するにあたって縛りがある。
注意事項
【ページ追加 Appの使い方】について教えてください – ヘルプ | BASE
「ページ追加 App」は、オフィシャルテーマ（無料のテーマ）でのみご利用いただけます。
BASEデザインマーケットで販売しているデザイナーズテーマ、および「HTML編集 App」で作成されたカスタムテーマには、現在対応しておりません。
マジかよ。
無料テーマでやっていけることなんてほぼ無いんで、有り物のページでうまくやっていくしかない。
用意されているページ内訳
- HOME
- ABOUT
- CONTACT
- 商品一覧
- 商品ページ
- プライバシーポリシー
- 特定商取引法に基づく表記
- カート～決済
最低限といえば最低限。しかしキツい。
追加したかったら別サーバーでページを作って飛ばすしかないけど、似せて作ったところでグローバルナビゲーションとかの共通コンテンツの同期ができないので、運営の手間とか管理を考えると「サイト内のページ」じゃなくて「特設ページ」みたいにするのが無難か。
独自デザイン
「HTML編集app」を入れることで好き勝手に作ることができる。
それはいいんだけど、ページごとの管理じゃない。サイト内のすべてを1つのページにぶち込むことになる。だからどのページで何を表示する、みたいなのをタグで振り分けていく。ということで、キレッキレなページを作ったら他に影響がでないようにきちんと切り分けないといけない。面倒というか大変。
エディタ
エディタはVSCodeっぽい見た目。っていうか、まんまそれをぶち込んでるんじゃないのこれ。
Emmetは無いけどタグの頭文字（<とか{とか）を打てば候補が出るので、慣れたら一応なんとかなる。ベタ打ちをちょっと補助してくれる程度のやつ。
多分使ってる人は殆どいないと思う。ローカルで組んで、エディタに移して、微調整する感じじゃないでしょうか。
アップローダー
無料なのにアップローダーがある。すごい。
画像、CSS／Javascriptをホストするために使ってください。
ファイルアップローダー
1ファイル最大サイズ1MBまでです。
1日にアップロードできるサイズは10MBまでです。
一度アップロードされたファイルは、削除または変更できません。
見る限り、総量に上限はないのかもしれない。すごい。
1ファイル1MBまでの縛りはいいとして1日10MBまでがきつい。やり直しが効かないので、画像を多くしたい場合は特に、間違ったら詰む。アイコンはsvgにしてベタ打ちとか、軽量化するとか、別サーバーに上げるとか、対策というか保険がほしいところ。
ふと思ったけどLP的な感じにしたかったら数日かけてアップする感じになるのかな。
htmlをいじれないページ
ページ内のコンテンツがまるまる出力されるため、こちらでhtmlを操作できないページがある。できることは以下の通り。
- 自動生成外でコンテンツ追加
- cssによる装飾
- jsによる構成変更
全く何もできないわけじゃないけど大したことはできないって感じ。
{block:ContactPage}
{ContactContentsTag}
{/block:ContactPage}
{block:PrivacyPage}
{PrivacyContentsTag}
{/block:PrivacyPage}
{block:LawPage}
{LawContentsTag}
{/block:LawPage}
{block:BlogPage}
{BlogContentsTag}
{/block:BlogPage}
{block:CommunityPage}
{CommunityContentsTag}
{/block:CommunityPage}特商法、プライバシーポリシー、お問い合わせ、ブログが該当。
ソースをぶっこ抜いてローカルでデザインしましょう。
タグ周り
公式がちゃんとまとめてくれている。
現状全部はまだ見終わってないけど、条件分岐は無いっぽい。ブロックで管理されて、「この場合に表示」が大量にある感じ。組み合わせたら擬似的に条件分岐を組める感じではある。
必須タグ
自作にあたって絶対使用しろってタグがある。入ってなかったら動かないらしい。
それはいいんだけど、規約とかつけるのはいいんだけど対策は簡単に打てちゃうし、というかjQueryは大丈夫なのかこれ。
ページ拡張案
どうにかしてBASE内でページを増やせないかという足掻き。
ポップアップ化
新しくページが作れないならポップアップで表示させてしまえという案。
コンテンツが多いとしんどい。
表示・非表示で管理
あまりやりたくないけど、URLにパラメータを付けても削られることはないっぽいことを確認したんでこれを活用する方法。
例えばaboutページでやるとする。
https://www.hogehoge.jp/about
通常のaboutページを表示
www.hogehoge.jp
www.hogehoge.jp
FAQコンテンツを表示パラメータの有無、パラメータの内容をjsで拾って表示内容を切り替える。
こんな感じで。
閲覧には耐えるけど、SEO的にどうなのってのとGoogleの判定的にどうなのってのがある。
あとURL的に違和感がある組み合わせになるとしんどい。
定期購入について
Appsから定期購入機能を追加することができる。
で、これは通常商品と区別して登録することになる。だから商品ページ内で通常購入と定期購入を選択することはできない。在庫数も個別管理になる。めんどくさい。
多分プラグイン化したことで、プラグインを削除してもあんまり影響がないように、って感じで組んだんだと思う。だるい。
外部ページでの購入ボタン埋込について
最近は対応するサービスが増えてきたけど、BASEにそんな機能はない。一旦商品ページに飛んでもらう必要がある。LPを他所で作ったときに地味にめんどいだるい目に合うところだけど、上記のように定期購入と単品購入を共存させたい場合を考えると、自サイト内でもしんどい。
無料だから、で諦めないといけないんだろうか。
見た感じ、form内に商品idを入れて指定してるところがあるからユニークなアレを振られてなかったらワンチャンいける気がする。
単品購入と定期購入の「カートに入れる」リンク共存案
多分いける。
事例に上がっているサイトからソースをぶっこ抜いたら動いた。
というのが、商品ページの「カートに入れる」を含む<form>をコピーして、ローカルに保存して、ブラウザで開いてクリックしたらカートに飛んだ。一応中身を確認したけど都度書き出してるユニークコード的なものは見受けられなかったので、多分やれる。
- 商品ページを作って公開する
- カート周りの<form>をぶっこ抜く
- <form>から不要なものを取り除いて整形
- jsで該当ページを開いたら<form>を挿入するように仕込む
多分これでいける。懸念点は、セキュリティで弾かれたりしたら嫌だなって。jsでやるしかないもんね。
特定ページ・特定商品を指定した条件分岐案
とりあえず、商品登録ページでhtmlを打ち込んでも全部文字列として書き出されるから、機能面で個別にどうのこうのすることはできない。
なので、回りくどいけど奥の手。これをやれば一応、サイト内の全てのページで条件をつけることができる。
というのが、URLからユニークな部分を拾ってきてどうのこうのする。
//about→「about」
www.hogehoge.jp
//プライバシーポリシー→「privacy」
www.hogehoge.jp
//商品→「/items/」特定商品→「00000000」
www.hogehoge.jpこんな感じだから、jsで拾ってきてどうにかできる。できるんだけど、jsだから処理に多少時間がかかるんで表示がおかしくなる部分が出てくる。そうなったら仕方ないんで、ページの表示にフェードインをかけて誤魔化すとかする。
どうだ。どうでしょう。だめですかね。
カートの横にあるBASEアイコン
BASEアイコンは月額500円のAppを入れることで非表示にできる。だけどぶっちゃけ、CSSとかで余裕で消せる。だけど消しちゃいけないっていうルールがある。
カートリンク・BASEリンクに関するタグは以下の通りです。 すべてのページで表示することが必須です。
このタグは下記のように出力されます。有料のBASE Apps「BASEロゴ非表示」を導入することでBASEロゴを非表示にすることが可能ですので、BASEロゴをCSSで意図的に非表示することは禁止です。
<body>仕様 · Developers
それでもって、最小サイズは14pxなんだと。いいけどさ。
このページを読む限りはカートリンクとBASEリンクは絶対設置しろよってことで、だからまあ、生成するタグを絶対使えとは言われてない。ようにも読める。タグ使ってたほうが怒られないんだろうけど。
でも設置場所について言及はないからjsで逃がすとかしてfooterに表示するとかしてもいいんじゃないんですかね？調べ足りてないかもしれないけど。NGのボーダーラインがよくわからない。
使うApps（順不同）
現時点で必要だと思うやつ。他にも機能はいっぱいある。
コメント