OWLet なんでもFAQ
キーワード検索
FAQのカテゴリ一覧
よくある質問キーワード
最近よくあるFAQ一覧
jsに入力項目を使用する際、いくつかのパターンがございます。
１）テンプレート 及び 共通JavaScript欄の併用
①入力項目「hoge」を作成します
②テンプレートの開始タグ部分に
data-hoge="{=@hoge=}"
を記述します
例）<div data-hoge="{=@hoge=}">となる形
③共通テンプレート内に
let hoge=element.getAttribute('data-hoge');
を記述することで、変数hogeに値が入ります
２）テンプレート内にscript記述の実施
３）AJAXテンプレート内で記述
→こちらは記述が複雑となるため、推奨しておりません。。
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
①ウィジェット内に、入力タイプが「ファイル」の項目を１つ作ります。
②画面を一度更新し、「デフォルト値」に動画ファイルを入れます。
ファイルサイズが上限を超えていないか、ご注意ください。
③テンプレートに下記を貼り付け、「入力項目コード」を①の項目のコードに合わせます。
<video src="/_file/{=current_lang()=}/{=@parts:datastore=}/{=@parts:id=}/入力項目コード/" loop autoplay muted playsinline></video>
④動画がうまく出ない場合は、データ読み込みのため、一度「編集内容の公開」を行ってください。
※ウィジェットを作成する際、「基本設定」の「タグ」で
REVOLUTIONで探しやすいタグをつけ、その後「編集内容の公開」をします。
付けるタグは「動画パーツ」等で良いかと思います。
REVOLUTIONで設置する際、「全てのパーツ」の中にこのタグが出ます。
※見た目は調整頂く必要があります。
YouTubeで動画設置をしているウィジェットを参考にしていただくと良いかもしれません。
（iframe {～～～} の指定をvideo {～～～} にしていただくなど
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
articleブロックに ,'tag'=>unserialize(@tag_●) 追加
<ul>
{same_tag:article(
'code'=>'columnTest'
'tag'=>['special'=>unserialize(@tag_●)]
)}
<li><a href="{=@detail_page:url=}">{=htmlspecialchars(@name)=}</a></li>{/same_tag:article}
</ul>
入力内容にタグが含まれていた場合、それを除去します
「あああ<BR>あああ」と入力された場合、「ああああああ」と出力されます。
{=htmlspecialchars(@hoge)=}
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
入力内容にタグを除去しつつ
複数行テキスト内の改行を反映する書き方です。
{=nl2br(htmlspecialchars(@hoge))=}
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
「複数行テキスト」にし、自動コード生成の{=htmlspecialchars(@入力項目のコード=}の形から、htmlspecialchars()を抜いた{=@入力項目のコード=}の形で出力が可能です。
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
入力タイプ「ファイル」を使用することで、PDFファイルのアップが可能です。
リンクパス内の「2」は、「1」に変更していただくことで
ダウンロードする形にも変更できます。
<a href="/_file/ja/{=@parts:datastore=}/{=@parts:id=}/コード/1/">ファイルをダウンロード</a>
<a href="/_file/ja/{=@parts:datastore=}/{=@parts:id=}/コード/2/">ファイルを開く</a>
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
アーティクル詳細出力用のウィジェット内、
「article:datastore」ブロックの中に、
,'term'=>in_cms_mode()?'all':'public'
という一行を追加していただくことで、
未来日の記事も表示確認が可能です。
例）
{article:datastore(
'datastore'=>'article'
,'term'=>in_cms_mode()?'all':'public'
,'class'=>array('article'=>'%')
,'id'=>(int)( (@contents:id) ? (@contents:id) : (@default:id) )
)}
可能です。
下記、記述例になります。
入力項目：単一選択
項目：
そのまま開く：off
別タブで開く：on
コード：target
◆記述例
{=(@target)=='on'?'target="_blank"':''=}
- カテゴリ：
- なんでもFAQ
- キーワード：
- ウィジェット
下記のように記述することで可能です。
コード：aaa
入力値：あああ
◆記述例
{d:def(
'aaa'=>1
)}
{=@aaa=}
{/d:def}
{=@aaa=}
◆出力例
1 あああ
- カテゴリ：
- 制作FAQ
- キーワード：
- ウィジェット
下記記述で三項演算子を使用することができます。
◆記述例
{=strlen(resource('common','company_name')
)?'<div>'.htmlspecialchars(resource('common','company_name')
).'</div>':'ありません'=}
{=htmlspecialchars(resource('common','company_name')
)=}
変数を定義し、条件分岐することができます。
{d:def(
'c'=>owlet_dsl::resource('common','company_name')
)}
{if(!strlen(@c))}
ありません
{/if}
{=strlen(@c)?htmlspecialchars(@c):'ありません'=}
{if(strlen(@c))}
<div>
{=htmlspecialchars(@c)=}
</div>
{/if}
{/d:def}
フィールドセットの中にフィールドセットの項目がある場合の記述です。
◆記述例
グローバルナビをフィールドセットで作り、そのサブメニューをフィールドセットにする場合の例になります。
※ネストの開始には@識別子①が入る。
<ul id="navigation">
{識別子①:fieldset_query(
owlet_dsl::resource_id('リソースコード')
,'resource'
,'フィールドセットコード'
)}{識別子①:foreach(@recordset)} <!--フィールドセット開始-->
<li>
<a href="{=htmlspecialchars(@link_url)=}">{=htmlspecialchars(@link_text)=}</a>
{識別子②:fieldset_query(
@識別子①:id
,'resource'
,'フィールドセットコード'
)}{識別子③:if(@record_count)} <!--以下がネスト-->
<ul class="sub">
{識別子④:foreach(@recordset)} <!--以下がループ-->
<li>
<a href="{=htmlspecialchars(@link_url)=}">{=htmlspecialchars(@link_text)=}</a>
</li>
{/識別子④:foreach} <!--ここまでがループ-->
</ul>
{/識別子③:if}{/識別子②:fieldset_query} <!--ネスト終了-->
</li>
{/識別子①:foreach}{/識別子①:fieldset_query} <!--フィールドセット終了-->
</ul>
下記のように記述してください
◆記述例
<table>
{fieldset_query(
owlet_dsl::resource_id('リソースコード')
,'resource'
,'フィールドセットコード'
)}{1:foreach(@recordset)}
<tr>
<td>{=nl2br(@コード)=}</td>
<td>{=nl2br(@コード)=}</td>
<td>{=nl2br(@コード)=}</td>
<td>{=nl2br(@コード)=}</td>
</tr>
{/1:foreach}{/fieldset_query}
</table>
下記のように記述することで、CSSプロパティを含め出力することができ、未入力時は出力されません。
・16進数
{=css('background-color',resource('colors','assort'))=}
・rgba
{=css('background-color',rgba(resource('colors','assort'),0.5))=}
下記のように記述することで出力できます。
{=resource('リソースグループコード','コード')=}
◆例
{=resource('colors','assort')=}
入力項目でページネーションを表示させるかどうかの単一選択項目を作成します。
コード：pager_onoff
日本語名前：ページャー表示
入力タイプ：単一選択
ーーー
選択肢設定
①value：off 日本語：表示しない
②value：on 日本語：表示する
下記記述をテンプレート欄に記述することで切り替え可能となります。
{=(@pager_onoff)=='on'?'[*article_pagination*]':''=}
記事詳細レイアウトに、「他の記事を見る」のようなコンテンツを出したい場合に、「今開いている記事は表示しない」ようにする記述方法です。
{ab:if((@detail_page:url) == (@url:url))}
<!--今表示している記事と同じ記事の判定。何も記載せず閉じる-->
{/ab:if}
{cd:if((@detail_page:url) !== (@url:url))}
<!--今表示している記事以外の記事の判定。-->
<!--ループ内容（<li>～</li>等を記載する）-->
{/cd:if}
ディレクトリごとに入力項目を設定したい場合に使用します。
hoge の部分は任意の文字列で統一
コードは入力項目のコード
{hoge:datastore(
'datastore'=>'setting'
,'class'=>array('directory'=>'%')
,'parent'=>array('164.setting')
)}
{hoge:foreach(@hoge:recordset)}
{=hoge:コード=}
{/hoge:foreach}
{/hoge:datastore}
下記は、ディレクトリごとの画像にリンクさせて一覧表示するサンプルです。
{d:datastore(
'datastore'=>'setting'
,'class'=>array('directory'=>'%')
,'parent'=>array('164.setting')
)}
<ul class="-w-article-list">
{d:foreach(@d:recordset)}
<li>
<a href="/{=@d:url=}/">
<div class="-w-contents">
<div class="-w-image"><img src="/_img/{=current_lang()=}/setting/{=@d:id=}/image/390_250_2_/" alt="{=(strlen(@d:image_alt)?htmlspecialchars(@d:image_alt):preg_replace('/(.*)\..*$/','$1',@d:image))=}" /></div>
<div class="-w-title">{=htmlspecialchars(@name)=}一覧はこちらへ
</div>
</a>
</li>
{/d:foreach}
</ul>
{/d:datastore}
入力項目「アーティクル」を設定を設定することで、アーティクル間連動が可能です。
アーティクル記事の中に他のアーティクルの情報を引っ張ってくることができます。
◆記述例
{a:datastore(
'datastore'=>'article'
,'class'=>array('article'=>'%')
,'id'=>(int)$param['article:member']
)}{a:foreach(@a:recordset)}<div class="-w-column-prf">
<div class="-w-image">
<img src="/_img/ja/article/{=@a:id=}/pic_roll_off/_/" alt="{=htmlspecialchars(@a:title)=}" />
</div>
<div class="-w-contents">
<p class="-w-position">{=nl2br(@a:post)=}</p>
<p class="-w-name">{=htmlspecialchars(@a:title)=}</p>
<div class="-w-profile">
{=nl2br(@a:works)=}
</div>
</div>
</div>{/a:foreach}{/a:datastore}
