動的ページ作成以前にまず、
モバイルのデザインがほったらかしだったので
まずそのへんを最低限修正しました。
基本は自動作成（PC版のコンテンツを縦に並べられる感じ）の内容の高さとかを修正しました。（明らかに異常なサイズがあったりしたので・・・）
特にブログはひでー感じだったので触りまくりました。
モバイルの検索バーの背景色とか、
色々触れない箇所が多くもやもやしました。
本題ですが、グラブルの編成を残しておくための
ページが作成できました。
ページ自体は作ってましたがリンク元がなかったので
リンク元を作成する感じですね。
現在このサイトは以下のようになっています。
この、各PTはできていましたが、
そこに至るまでのリンクがなかったから追加したということになります。
（全件表示→カテゴリ分けされたページ→単独ページ
ただ、モバイルは全件から単独ページのみ）
で、今回触ってて気づいた点
DBをテーブル感覚で使用してはいけない
いや、単位が違うので当たり前のことなのかもしれないんですが、
テーブルを作成する機能がないし感覚的にリレーション組めちゃうので
テーブル感覚でDBを内部にぴょこぴょこ作成していました。
※DB一覧
DB:granblue_fantasyを軸にDB:Characterと
リレーション組んだり、
このSS撮影時点で消してるんですけど
属性格納していたDBとリレーション組んでました。
※命名規則が存在しない名称なのは無視してください
で、なぜ属性DBを削除したかというと、
動的ページ作成時のカテゴライズの問題です。
現在は「ソロ」、「マルチ」、「周回」と
用途別にタグを用意しています。
元々は属性で最初カテゴリページを作成するつもりでしたが、
DB:granblue_fantasyの中での属性はリレーションで取得した
値を格納していました。というかリレーションのキーというか
で、これをwixの動的ページの作成単位、
URLの区切り（階層）にしようとしたところ
選択項目として存在しないんですね。
で、テキストで保持している「用途」は選べたので
そういうことかなぁという見解
SSのタイミングが文とあってないのであれですが、
属性をテキストに直した状態。
右側のcharacter_1（青背景）の箇所は
別DBとリレーション組んでるところで、
このフィールドはURLの階層には使用ができない。
※DB:granblue_fantasyの中身
それで、結局なぜ属性を使用していないのかですが、
属性・用途の2重フィルタをかけれるようにすることを想定していました。
しかし、URLの仕組みが判明したことと、
フィールドの情報を2つ持っているページが作成できない（おそらく）
ということで、やるとすると2つのフィールド値を保有する
フィールドを新規に作成するか、
今別れているフィールドを1つに統合する？
（フィールドに複数値を保持できる属性があるので）
かなぁと思います。ただそれでも触った感じ思い通りのものは
作れないんじゃないかなぁ、と思いますが
これ（多重カテゴリの絞り込み）をコーディング無しで
作成できるかできないかは大きいし、
ECサイトの作成用途で大きく売り出してるのに
それができないのは考えづらいと思うので
ちょっとここはもう少し触ってみたいです。
いまいちぽいんと
色々ページ触ってて、コーディングにも手を出そうとしたんですが、
ちょっとコーディングは挫折しました。
これは本当に恥ずかしいしなにかしら書こうとおもったんですが、
javascriptをよくわかってないままだと触りづらい印象が。。。
なにがダメだったのかというと、
要素の取得・指定？これができませんでした。
自分が操作したい要素を指定できない感じ。
各要素のIDはエディタ上で表示されているので
ページ表示時に（onreadyとか)テキストの値を
指定した値を代入する。substrで加工した値を代入する。
ぐらいは流石にかけたのですが、
今回やりたかったのはDBから取得する値の加工でした。
編集したかった箇所は用途カテゴリページの
タイトル下の簡易メッセージの箇所です。
このジータちゃん云々書いてる場所ですね。
ここに、詳細ページの本文テキストを表示させる想定でした。
※囲み範囲がちょっとおかしい！囲めてないところもすべて同じテキストのフィールドです
最初に、DBのフィールド指定して表示したところ
まぁ当たり前ですが本文がながったながと表示されちゃいました。
このカテゴリページは見出しですからそんな文量は必要ありません。
そこでまずはテキスト要素のサイズ固定とかで勝手に収まらないかを検証
ダメですね。はい
次に、試したのが上記に書いたコーディングです。
テキスト要素は画面でわかるので、
そこに対して[取得した要素.substr(0,30)]ぐらいを代入してやろうとしました。
まず、どういう動きをしているのかも知らなかったので
onready (text要素.text = text要素.text.substr )
みたいなjavascript書いてみたんですが
この場合DBから取得する前の値、つまり
text要素のデフォルト値をsubstrで加工した値が
設定されるだけでした。
挙動としては
DB読み込み後にonreadyが動いてるんだろうなぁという挙動ですので
じゃあDBから取得した値を加工しようと思ってググりました。
ググりました。
本当です。
わかりませんでした
もうやだぁ。。。
普及してないこともあって
そもそも試している方が少ない、
のと公式も英語・・・
いや、これはgoogle翻訳でかなりどうにでも
なるので翻訳したページみて
見様見真似コード書いて見るんですが、
DBのItemは取得できてもフィールドの値を取得する方法が
見つからなかったです。
それがItemで参照したものなのかな、と
Itemが引数NUMBER型だったので
色々数字渡してコンソールログに表示させてみましたが、
アンデファインド。。。？
とりあえずなにも表示されませんでした。
DB要素が全く操作できないまま断念して、
見出し用のテキストフィールドを泣く泣く作成して代用しています。。。。。
で、いまいちポイントはもう一個あるんですが
cssがさわれないことですね。
一番最初の方にも書いた色変えれないところもそうですが、
これ、カテゴリページの右側に表示させている
カテゴリページの名称表示箇所です。
元々ただの画像要素にテキスト要素を上に配置している状態です。
これ、テキストを画像要素の中央に配置したいんですが、
それがもう要素重ねて中央位置に配置するぐらいしか方法が見当たらない。
cssでそこまでできたっけとかも思ったんですが、
ちょっとイマイチでした。
あまり満足いく結果ではないですが、
一旦ページのコンテンツは作成したので
しばらくは運用と微修正を続けて行こうと思います。
あと、動的ページの作成をもうちょい煮詰めたい。
コーディングは、、、再挑戦・・・したい・・・です・・・
adieu.
Comments