OwnedMaker（オウンドメーカー）

求人一覧
求人詳細
求人検索軸
ブログ一覧
ブログ詳細

②求人を挿入したい箇所に以下のタグを挿入します。

<section id="[任意のid名]"></section>

③求人を挿入したい箇所に以下のタグを挿入します。

<script>
    new om.JobList({
        container_id: "[②で設定したID]",
        site_url: "[企業ごとに設定されたsite_url]",
    });
</script>

設定できるパラメータは以下のようになります。

container_id	①で設定した任意のid名。ここで指定した要素の中に求人データが生成されます。
site_url	OwnedMakerで指定したURLキー。作成したコンテンツのURLから確認できます。例えば求人であれば「https://ownedmaker.com/jobs/〇〇〇/[求人番号]」の「〇〇〇」の部分がURLキーです。
date_show_type	表示する求人作成日の表示形式「0」⇒ 例：2020-11-04 「1」⇒ 例：2020-11-04 12:04 「2」⇒ 例：2020年11月04日「3」⇒ 例：2020年11月04日12時04分
excerpt_char_count	仕事内容の表示文字数
is_new_tab	求人を新しいタブで開くかどうか。bool値。デフォルト値はfalse。
limit	最大求人取得件数。デフォルト値は500。500件より多くの件数は取得できません。
get_items	求人リストを辞書型で取得する関数を指定。 `function(items) { if (items && items.length > 0) { // pass } }`
before_get_data	求人リストを取得する前に実行される関数。 `before_get_data: function() { // pass },`
after_get_data	求人リストを取得した後に実行される関数。 `after_get_data: function() { // pass }`
get_job_link	求人詳細ページをOMではなく、別のページを遷移させる場合。JavaScriptの関数を指定。idは求人番号。 `function(id) { return "https://getbootstrap.jp/docs/4.4/utilities/text/?id=" + id }`
custom_dummy_image	画像がない場合に表示させるNO IMAGE画像を指定。
get_custom_template	表示項目をカスタマイズする場合に指定します。指定する値は「JavaScriptの関数」で以下のようにしてください。 function get_custom_template(job_offer){ return `<div class="om-job-item"> <div class="om-job-item-inner"> <div class="om-job-item-type"> <div>${job_offer.work_type}</div> <div>${job_offer.item_name}</div> </div> <div class="om-job-item-thumbnail"> <a href="${job_offer.url}"> <img src="${job_offer.image1}" alt="${job_offer.image1_caption}" /> </a> </div> <div class="om-job-item-detail"> <ul> <li class="om-job-item-detail"> <div class="om-job-item-detail-title"> <span>仕事内容</span> </div> <span class="om-job-item-detail-content"> ${job_offer.job_description} </span> </li> <li class="data"> <div class="om-job-item-detail-title"> <span>給与</span> </div> <span class="om-job-item-detail-content"> ${job_offer.salary_pattern}${job_offer.salary_min}〜${job_offer.salary_max} </span> </li> <li class="data"> <div class="om-job-item-detail-title"> <span>勤務地</span> </div> <span class="om-job-item-detail-content"> ${job_offer.prefecture}${job_offer.city}${job_offer.building} </span> </li> <li class="data"> <div class="om-job-item-detail-title"> <span>掲載日</span> </div> <span class="om-job-item-detail-content"> ${job_offer.created_at} </span> </li> </ul> </div> <div class="buttonArea"> <a href="${job_offer.url}">求人詳細へ</a> </div> </div> </div>` }

ページ送りの設定。


<!-- ページ送りのボタン。idは固定 -->
<button id="om-job-list-back">BACK</button>
<button id="om-job-list-next">NEXT</button>


const omJob = new om.JobList({
    container_id: "[②で設定したID]",
    site_url: "[企業ごとに設定されたsite_url]",
    date_show_type: 2,
    num: 3,
});

const n_btn = document.getElementById("om-job-list-next");
const b_btn = document.getElementById("om-job-list-back");

n_btn.addEventListener("click", function() {
    omJob.goNext();
}, false)

b_btn.addEventListener("click", function() {
    omJob.goBack();
}, false)

num	一度に表示される求人件数。ページを送りをつけたい場合は必須になります。

②ブログ詳細のためのタグを埋め込みます。

<script>
    new om.JobPage({
        site_url: "[企業ごとに設定されたsite_url]",
        id: "[ブログのID]",
    });
</script>

②以下の規則に従ってHTMLをコーディングします。


<div class="container py-4">
    <div class="container m-4">
        <h1 class="display-4">サンプル求人</h1>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="col-sm">
                <span id="om-job-image1" class="col-sm"></span>
                <span id="om-job-image1_caption" class="col-sm"></span>
            </div>
            <div class="col-sm">
                <span id="om-job-image2" class="col-sm"></span>
                <span id="om-job-image2_caption" class="col-sm"></span>
            </div>
            <div class="col-sm">
                <span id="om-job-image3" class="col-sm"></span>
                <span id="om-job-image3_caption" class="col-sm"></span>
            </div>
            <div class="col-sm">
                <span id="om-job-image4" class="col-sm"></span>
                <span id="om-job-image4_caption" class="col-sm"></span>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="col-sm">求人番号: <span id="om-job-id"></span></div>
        </div>
        <div class="row">
            <div class="col-sm">求人発行日: <span id="om-job-created_at"></span></div>
        </div>
        <div class="row">
            <div class="col-sm">求人更新日: <span id="om-job-updated_at"></span></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">業種/職種</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <span id="om-job-work_type" class="col-sm"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <span id="om-job-job_type" class="col-sm"></span>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">求人タイトル</div>
        </div>
        <div class="row">
            <div id="om-job-item_name" class="col-sm"></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">仕事内容</div>
        </div>
        <div class="row">
            <div id="om-job-job_description" class="col-sm pre"></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務時間</div>
        </div>
        <div class="row">
            <div id="om-job-work_time" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-work_flow" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">仕事の流れ</div>
        </div>
        <div class="row">
            <div id="om-job-work_flow" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-period_min" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">最低勤務日数</div>
        </div>
        <div class="row">
            <div id="om-job-period_min" class="col-sm"></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務地</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-company_name"></div>
                <span id="om-job-zip_code"></span>
                <span id="om-job-prefecture"></span>
                <span id="om-job-city"></span>
                <span id="om-job-building"></span>
                <div id="om-job-work_location"></div>
                <div id="om-job-access"></div>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">給与</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <span id="om-job-hiring_system"></span>
                <span id="om-job-salary_pattern"></span>
                <span id="om-job-salary_min"></span>
                <span>～</span>
                <span id="om-job-salary_max"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-salary_description" class="pre"></div>
            </div>
        </div>
    </div>

    <div id="om-job-container-trial" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">試用期間</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <span id="om-job-trial"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-trial_condition"></div>
            </div>
        </div>

        <div id="om-job-container-trial_condition" class="row">
            <!--採用時と同じor notでON/OFF-->
            <div class="col-sm">
                <div class="row">
                    <div class="col-sm">
                        <div id="om-job-trial_hiring_system"></div>
                        <span id="om-job-trial_salary_pattern"></span>
                        <span id="om-job-trial_salary_min"></span>
                        <span>～</span>
                        <span id="om-job-trial_salary_max"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm pre">
                <div id="om-job-trial_description"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-trial_period"></div>
            </div>
        </div>
    </div>

    <div id="om-job-container-travel_cost" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">交通費</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-travel_cost"></div>
                <div>
                    <span id="om-job-travel_cost_pattern"></span>
                    <span id="om-job-travel_cost_min"></span>
                    <span>～</span>
                    <span id="om-job-travel_cost_max"></span>
                </div>
                <div id="om-job-travel_cost_description"></div>
                <div id="om-job-travel_cost_day_cond"></div>
                <div id="om-job-travel_cost_month_cond"></div>
            </div>
        </div>
    </div>

    <div id="om-job-container-holiday" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">休日休暇</div>
        </div>
        <div class="row">
            <div id="om-job-holiday" class="col-sm"></div>
        </div>
        <div class="row">
            <div id="om-job-holiday_description" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-work_week" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務曜日</div>
        </div>
        <div class="row">
            <div id="om-job-work_week" class="col-sm"></div>
        </div>
    </div>

    <div id="om-job-container-welfare" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">待遇・福利厚生</div>
        </div>
        <div class="row">
            <div id="om-job-welfare" class="col-sm"></div>
        </div>
        <div class="row">
            <div id="om-job-welfare_description" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-workstyle_experience" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">経験</div>
        </div>
        <div class="row">
            <div id="om-job-workstyle_experience" class="col-sm"></div>
        </div>
    </div>

    <div id="om-job-container-workstyle_shift" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">シフト</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-workstyle_shift"></div>
                <div id="om-job-shift_circle"></div>
                <div id="om-job-shift_income_example"></div>
            </div>
        </div>
    </div>

    <div id="om-job-container-workstyle_time" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務時間</div>
        </div>
        <div class="row">
            <div id="om-job-workstyle_time" class="col-sm"></div>
        </div>
    </div>

    <div id="om-job-container-workstyle_location" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務場所</div>
        </div>
        <div class="row">
            <div id="om-job-workstyle_location" class="col-sm"></div>
        </div>
    </div>

    <div id="om-job-container-workstyle_other" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">勤務スタイル</div>
        </div>
        <div class="row">
            <div id="om-job-workstyle_other" class="col-sm"></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">人数・男女構成</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-environment_age" class="col-sm"></div>
                <span id="om-job-environment_gender_ratio" class="col-sm"></span>
            </div>
        </div>
    </div>

     <div id="om-job-container-environment_mood" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">職場環境・雰囲気</div>
        </div>
        <div class="row">
            <div id="om-job-environment_mood" class="col-sm"></div>
        </div>
    </div>

    <div id="om-job-container-embed_url" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">Youtube動画</div>
        </div>
        <div class="row">
            <div id="om-job-embed_url" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-worker_message" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">先輩からのメッセージ</div>
        </div>
        <div class="row">
            <div id="om-job-worker_message" class="col-sm pre"></div>
        </div>
    </div>

    <div id="om-job-container-applied_flow" class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">応募後の流れ</div>
        </div>
        <div class="row">
            <div id="om-job-applied_flow" class="col-sm pre"></div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">お問い合わせ</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-job-recruit_number"></div>
                <span id="om-job-recruit_number_description" class="pre"></span>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">企業情報</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div>
                    <div id="om-job-container-company">
                        <div id="om-job-company"></div>
                    </div>

                    <div id="om-job-container-phone">
                        <div id="om-job-phone"></div>
                    </div>

                    <div id="om-job-url"></div>
                </div>
            </div>
        </div>
    </div>
</div>

詳細

1. 基本パターン

idを下記のように指定した要素の子要素を、データのテキストノードにします。

id="om-job-*"

例：求人タイトルを<title>に設定したい場合

<title id="om-job-item_name"></title>

項目

データ挿入ID	説明
#om-job-id	求人IDを挿入します。
om-job-created_at	求人作成日を挿入します。
om-job-updated_at	求人更新日を挿入します。
om-job-work_type	業種を挿入します。
om-job-job_type	職種を挿入します。
om-job-item_name	求人タイトルを挿入します。
om-job-job_description	仕事内容を挿入します。
om-job-work_time	勤務時間を挿入します。
om-job-company_name	店舗名を挿入します。
om-job-zip_code	郵便番号を挿入します。
om-job-prefecture	都道府県を挿入します。
om-job-city	市区町村を挿入します。
om-job-building	建物名を挿入します。
om-job-work_location	勤務先を挿入します。
om-job-access	アクセスを挿入します。
om-job-hiring_system	雇用形態を挿入します。
om-job-salary_pattern	給与形態を挿入します。
om-job-salary_min	給与最低額を挿入します。
om-job-salary_max	給与最高額を挿入します。
om-job-salary_description	給与補足を挿入します。
om-job-environment_age	男女比構成を挿入します。
om-job-environment_gender_ratio	男女比を挿入します。
om-job-om-job-url	URLを挿入します。

2. コンテナIDの指定が必要なパターン（シンプル）

データ挿入idを指定した要素の子要素を、データのテキストノードにします。
ただしデータが存在しない場合、コンテナIDのスタイルにdisplay: none;を適用します。

コンテナID	データ挿入ID	説明
om-job-container-work_flow	om-job-work_flow	一日の流れを挿入します。
om-job-container-period_min	om-job-period_min	最低勤務日数を挿入します。
om-job-container-work_week	om-job-work_week	勤務曜日を挿入します。
om-job-container-workstyle_experience	om-job-workstyle_experience	経験を挿入します。
om-job-container-workstyle_time	om-job-workstyle_time	勤務時間を挿入します。
om-job-container-workstyle_other	om-job-workstyle_other	勤務場所を挿入します。
om-job-container-workstyle_location	om-job-workstyle_location	勤務スタイルを挿入します。
om-job-container-environment_mood	om-job-environment_mood	職場環境・雰囲気を挿入します。
om-job-container-embed_url	om-job-embed_url	Youtube動画を挿入します。
om-job-container-worker_message	om-job-worker_message	先輩からのメッセージを挿入します。
om-job-container-applied_flow	om-job-applied_flow	応募後の流れを挿入します。

3. 挿入されるデータの種類

a. テキストデータ

テキストデータをそのまま挿入します。

b. 複数選択肢

「#om-job-[項目名]」に項目を追加します。
例：

<div id="om-job-environment_mood" class="col-sm">
    <span class="om-job-tag om-job-tag-environment_mood">
        落ち着いた職場
    </span>
    <span class="om-job-tag om-job-tag-environment_mood">
        業務外交流少ない
    </span>
    <span class="om-job-tag om-job-tag-environment_mood">
        決められた時間できっちり
    </span>
    <span class="om-job-tag om-job-tag-environment_mood">
        デスクワーク
    </span>
</div>

c. 画像

画像のタグを挿入します。番号は1~4（image1, image2, image3, image4）。

<div class="col-sm">
    <span id="om-job-image1" class="col-sm">
        <div class="col-sm">
            <span id="om-job-image1" class="col-sm">
                <!-- 挿入される画像タグ -->
                <img class="om-job-image om-job-image1" alt="求人画像" src="[画像のURL(自動設定)]">
            </span>
            <span id="om-job-image1_caption" class="col-sm"></span>
        </div>
    </span>
</div>

4. 特殊パターン

試用期間

・「#om-job-trial」が「なし」であるとき、「#om-job-container-trial」に「display: none」が適用されます。
・「#om-job-trial_condition」が「採用時と同じ」であるとき、「#om-job-container-trial_condition」に「display: none」が適用されます。

<!-- 「試用期間がなし」の場合非表示 -->
<div id="om-job-container-trial" class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">試用期間</div>
    </div>
    <div class="row">
        <div class="col-sm">
            <span id="om-job-trial"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div id="om-job-trial_condition"></div>
        </div>
    </div>

    <!-- 「採用時と同じ」の場合非表示 -->
    <div id="om-job-container-trial_condition" class="row">
        <div class="col-sm">
            <div class="row">
                <div class="col-sm">
                    <div id="om-job-trial_hiring_system"></div>
                    <span id="om-job-trial_salary_pattern"></span>
                    <span id="om-job-trial_salary_min"></span>
                    <span>～</span>
                    <span id="om-job-trial_salary_max"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm pre">
            <div id="om-job-trial_description"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div id="om-job-trial_period"></div>
        </div>
    </div>
</div>

交通費

・「show_travel_cost(OMの交通費表示/非表示)」が「非表示」であるとき、「#om-job-container-travel_cost」に「display: none」が適用されます。


<div id="om-job-container-travel_cost" class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">交通費</div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div id="om-job-travel_cost"></div>
            <div>
                <span id="om-job-travel_cost_pattern"></span>
                <span id="om-job-travel_cost_min"></span>
                <span>～</span>
                <span id="om-job-travel_cost_max"></span>
            </div>
            <div id="om-job-travel_cost_description"></div>
            <div id="om-job-travel_cost_day_cond"></div>
            <div id="om-job-travel_cost_month_cond"></div>
        </div>
    </div>
</div>

休日休暇

・「#om-job-holiday」が空欄であるとき、「#om-job-container-holiday」に「display: none」が適用されます。


<div id="om-job-container-holiday" class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">休日休暇</div>
    </div>
    <div class="row">
        <div id="om-job-holiday" class="col-sm"></div>
    </div>
    <div class="row">
        <div id="om-job-holiday_description" class="col-sm pre"></div>
    </div>
</div>

待遇・福利厚生

・「#om-job-welfare」が空欄であるとき、「#om-job-container-welfare」に「display: none」が適用されます。


<div id="om-job-container-welfare" class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">待遇・福利厚生</div>
    </div>
    <div class="row">
        <div id="om-job-welfare" class="col-sm"></div>
    </div>
    <div class="row">
        <div id="om-job-welfare_description" class="col-sm pre"></div>
    </div>
</div>

シフト

・「#om-job-workstyle_shift」が空欄であるとき、「#om-job-container-workstyle_shift」に「display: none」が適用されます。


<div id="om-job-container-workstyle_shift" class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">シフト</div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div id="om-job-workstyle_shift"></div>
            <div id="om-job-shift_circle"></div>
            <div id="om-job-shift_income_example"></div>
        </div>
    </div>
</div>

企業情報

・「show_company_name（企業名の表示/非表示）」が「非表示」のとき、「#om-job-container-company」に「display: none」が適用されます。
・「show_phone（電話番号の表示/非表示）」が「非表示」のとき、「#om-job-container-phone」に「display: none」が適用されます。


<div class="shadow container my-4 p-4">
    <div class="row">
        <div class="h5 col-sm">企業情報</div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div>
                <div id="om-job-container-company">
                    <div id="om-job-company"></div>
                </div>

                <div id="om-job-container-phone">
                    <div id="om-job-phone"></div>
                </div>

                <div id="om-job-url"></div>
            </div>
        </div>
    </div>
</div>

②求人を挿入したい箇所に以下のタグを挿入します。

<section id="[任意のid名]"></section>

③求人を挿入したい箇所に以下のタグを挿入します。

<script>
    const omList = new om.JobList({
        container_id: "[②で設定したID]",
        site_url: "[企業ごとに設定されたsite_url]",
    });

    const dom = new om.SearchDOMCreator();

    dom.setButtonEvent(function(params){ 
        omList.refresh(params);
    });
</script>

④下記のようにHTMLをコーディングします。

<section id="om-job-search">
  <form id="om-job-search-form">
      <div class="form-group">
          <label for="keyword">検索ワード</label>
          <input type="text" class="form-control" name="keyword" id="om-job-search-keyword" placeholder="職場・仕事の特徴">
      </div>

      <div class="form-group">
          <label for="workType">職種</label>
          <select name="workType" class="form-control" id="om-job-search-workType"></select>
      </div>

      <div class="form-group" id="om-job-search-employStatus"></div>

      <div class="form-group">
          <label for="prefecture">都道府県</label>
          <select name="prefecture" class="form-control" id="om-job-search-prefecture">
          </select>
      </div>

      <div class="form-group">
          <label for="city">市区町村</label>
          <select name="om-job-search-city" class="form-control" id="om-job-search-city">
          </select>
      </div>

      <button id="om-job-search-button" type="button" class="btn btn-outline-secondary">
          検索
      </button>
  </form>
</section>

<section id="[任意のid名]"></section>

②求人を挿入したい箇所に以下のタグを挿入します。

<section id="[任意のid名]"></section>

③以下のJavaScriptタグを挿入します。

<script>
    new om.BlogList({
        container_id: "[②で設定したID]",
        site_url: "[企業ごとに設定されたsite_url]",
    });
</script>

設定できるパラメータは以下のようになります。

container_id	①で設定した任意のid名。ここで指定した要素の中に求人データが生成されます。
site_url	OwnedMakerで指定したURLキー。作成したコンテンツのURLから確認できます。例えば求人であれば「https://ownedmaker.com/jobs/〇〇〇/[求人番号]」の「〇〇〇」の部分がURLキーです。
date_show_type	表示する求人作成日の表示形式「0」⇒ 例：2020-11-04 「1」⇒ 例：2020-11-04 12:04 「2」⇒ 例：2020年11月04日「3」⇒ 例：2020年11月04日12時04分
excerpt_char_count	仕事内容の表示文字数
get_items	求人リストを辞書型で取得する関数を指定。 `function(items) { if (items && items.length > 0) { // pass } }`
is_new_tab	求人を新しいタブで開くかどうか。bool値。デフォルト値はfalse。
limit	最大求人取得件数。デフォルト値は500。500件より多くの件数は取得できません。
get_job_link	求人詳細ページをOMではなく、別のページを遷移させる場合。JavaScriptの関数を指定。idは求人番号。 `function(id) { return "https://getbootstrap.jp/docs/4.4/utilities/text/?id=" + id }`
custom_dummy_image	画像がない場合に表示させるNO IMAGE画像を指定。
get_custom_template	表示項目をカスタマイズする場合に指定します。指定する値は「JavaScriptの関数」で以下のようにしてください。 function get_custom_template(blog)){ return `<div class="om-blog-item"> <div class="om-blog-item-inner"> <div class="om-blog-item-type"> <div> <span>${blog.title}</span> <span>${blog.category}</span> </div> </div> <div class="om-blog-item-thumbnail"> <a href="${blog.thumbnail}"> <img src="${blog.thumbnail}" alt="{image1_caption}" /> </a> </div> <div class="om-blog-item-detail"> <ul> <li class="om-blog-item-detail"> <div class="om-blog-item-detail-title"> <span>ブログ</span> </div> <span class="om-blog-item-detail-content"> ${blog.excerpt} </span> </li> <li class="data"> <div class="om-blog-item-detail-title"> <span>掲載日</span> </div> <span class="om-blog-item-detail-content"> ${blog.created_at} </span> </li> </ul> </div> </div> </div>` }

ページ送りの設定。


<!-- ページ送りのボタン。idは固定 -->
<button id="om-blog-list-back">BACK</button>
<button id="om-blog-list-next">NEXT</button>


const omBlog = new om.BlogList({
    container_id: "[②で設定したID]",
    site_url: "[企業ごとに設定されたsite_url]",
    num: 3,
});

const n_btn = document.getElementById("om-blog-list-next");
const b_btn = document.getElementById("om-blog-list-back");

n_btn.addEventListener("click", function() {
    omBlog.goNext();
}, false)

b_btn.addEventListener("click", function() {
    omBlog.goBack();
}, false)

num	一度に表示される求人件数。ページを送りをつけたい場合は必須になります。

②ブログ詳細のためのタグを埋め込みます。

new om.BlogPage({
  site_url: "[企業ごとに設定されたsite_url]",
  id: "[ブログのID]",
});

③以下の規則に従ってHTMLをコーディングします。

<div class="container py-4">
    <div class="container m-4">
        <h1 class="display-4">サンプル求人</h1>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="col-sm">
                <div>作成日: <span id="om-blog-created_at" class="col-sm"></span></div>
                <div>更新日: <span id="om-blog-updated_at" class="col-sm"></span></div>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">サムネイル</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-blog-thumbnail" class="col-sm"></div>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">カテゴリー</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-blog-category" class="col-sm"></div>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">タイトル</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-blog-title" class="col-sm"></div>
            </div>
        </div>
    </div>

    <div class="shadow container my-4 p-4">
        <div class="row">
            <div class="h5 col-sm">ブログ本文</div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div id="om-blog-html" class="col-sm"></div>
            </div>
        </div>
    </div>
</div>

OwnedMaker 求人埋め込みタグ ver2

使い方

詳細

1. 基本パターン

2. コンテナIDの指定が必要なパターン（シンプル）

3. 挿入されるデータの種類

a. テキストデータ

b. 複数選択肢

c. 画像

4. 特殊パターン