操作ガイド

  1. Directoneとは
  2. お申し込み
  3. 連携ファイル作成
  4. カスタマイズ
  5. お申込み内容の変更
  6. 解約
  7. 試用期間について

Directoneとは

Directoneとは、HP上での入力内容をKintoneに直接登録するアプリケーションです。

登録だけではなく、レコード参照からの更新やカレンダー表示・フォトギャラリー表示も行えますので、様々なシーンでの活用が期待出来ます。

お申し込み

トップページの「ご利用お申込み」ボタンを押下し、表示された画面に必要情報をご入力下さい。

Directoneは登録先アプリ数に関わらず毎月の利用料一律1,500円をご登録頂いたクレジットカード会社経由でご請求致します。

クレジットカード会社による引き落としが出来なかった場合は、ご利用を停止させて頂くことがございますので、ご注意下さい。

連携ファイル作成

Directoneは、お申込み完了後にお送りするメールに記載されたKintone連携設定ページ上で登録先アプリ・登録先フィールド等の情報を登録し、それらの情報を元に生成されたhtmlファイルを使って、Kintoneへの登録・更新を行います。

まずはKintone連携設定ページにアクセスして下さい。

ご契約時のメールアドレスとパスワードでログインして下さい。

ログインに成功すると、「設定追加」ボタンが表示されますので、ボタンを押下し設定を開始します。

  1. ページ設定

    ページ設定では連携を行うページそのものに関する設定を行います。

    内容に沿って入力して下さい。

    » 連携設定ページ
    » 公開ページ

    アクセス制限をかけたい場合は、ページ設定のパスワード欄にパスワードを入力して下さい。

    » 公開ページ

    許可ドメイン欄には、作成した連携ファイルを配置するHPのドメインを入力して下さい。

    » 連携設定ページ
    » 公開ページ

    許可ドメインの指定は、Kintoneへの不正アクセス防止に必要な機能です。

  2. Kintone設定

    Kintone設定では登録・更新先となるKintoneアプリとの連携設定を行います。

    まずはそのアプリへの管理者権限を持ったKintoneユーザーのログイン名とパスワードを入力して下さい。

    入力したログイン名とパスワードでKintoneへのログインが成功すると、登録先アプリが選択出来るようになります。

    » 連携設定ページ
    » 連携設定ページ

    登録先アプリを選択したら、登録先フィールドと参照用一覧(任意)を選択して下さい。

    » 連携設定ページ
    » 公開ページ

    レコードの登録だけでなく、更新も行いたい場合は参照用一覧を指定します。

    フォーム形式でレコード参照・更新を行いたい場合は表形式の一覧、カレンダー形式でレコード参照・更新を行いたい場合はカレンダー形式の一覧を指定して下さい。

    また、登録・更新等を行わず、一覧表示のみを行いたい場合にも、参照用一覧を指定して下さい。

    一覧表示のみの参照については、後述するフォトギャラリー設定をご確認下さい。

    » 連携設定ページ
    » 公開ページ (参照用一覧で表形式一覧を選択)
    » 公開ページ (参照用一覧で表形式一覧を選択)
    » 公開ページ (参照用一覧で表形式一覧を選択)

    参照用一覧で表形式一覧を選択した場合は、表示するフィールド数が多くなると参照画面が見づらくなってしまいますので、表示させるフィールド数は参照画面を確認しながら適時調整して下さい。

    » 公開ページ (参照用一覧でカレンダー形式一覧を選択)

    カレンダー形式を利用しつつ、レコードの参照・更新を行いたくない場合は、後述するカスタマイズで対応して下さい。

  3. フォトギャラリー設定

    Directoneはレコードの登録ではなく、商品案内等の閲覧ページとしてもご利用頂けます。

    参照用一覧を指定した上で、一覧表示用の添付ファイルフィールドを指定して下さい。

    登録・更新機能は無効になります。

    » 連携設定ページ
    » 公開ページ
    » 公開ページ
  4. 住所設定

    Directoneは住所・郵便番号等の指定をすることで、住所検索機能を追加出来ます。

    登録先フィールドの「住所」ボタンから住所フィールド設定画面を開いて下さい。

    » 連携設定ページ
    » 連携設定ページ
    » 公開ページ
    » 公開ページ

    各住所フィールドに指定出来るのは、文字列(1行)フィールドのみとなります。

    郵便番号フィールドを指定した場合は、郵便番号での住所検索も出来ます。

  5. 設定保存・連携ファイルダウンロード

    連携ファイルに関する設定が済みましたら、画面最下部の「登録」ボタンを押下し、設定を保存します。

    保存に成功すると、設定画面が消え、一覧画面に戻ります。

    » 連携設定ページ
    » 連携設定ページ

    一覧画面に表示された設定右の「ダウンロード」ボタンを押下すると、設定したKintoneアプリへの登録・更新を行うhtmlファイルがダウンロード出来ますので、許可ドメインに指定したWebサーバーへアップロードし、Kintoneへ登録が出来るか確認してみて下さい。

    » 連携設定ページ
    » 公開ページ (フォーム形式)
    » 公開ページ (カレンダー形式)
    » 公開ページ (フォトギャラリー形式)

    ダウンロードしたファイルのファイル名は自由に変更して下さい。

    登録フィールドの追加・変更等で連携設定の変更があっても、連携ファイルを差し替える必要はありません。

カスタマイズ

Directoneはメール送信機能や独自のエラーチェック等も自由に追加出来るよう、レコード表示・登録・更新・行追加等のイベントがバインド出来るようになっています。

また、スタイルシートを独自のものに変更すれば、レイアウトや装飾も自由に変更可能です。

  1. スタイルシート

    下記リンクからCSSファイルをダウンロードし、適時変更をした後、サーバーへアップロードして下さい。

    directone.css

    入力フォームのDOM構造につきましてはお客様側でのご確認をお願いします。

  2. イベント

    各イベントハンドラーの登録方法は以下のサンプルhtmlをご確認下さい。

    フォーム形式サンプル:eventsample_form.html

    カレンダー形式サンプル:eventsample_calendar.html

    フォトギャラリー形式サンプル:eventsample_gallery.html

    レコード追加画面表示イベント

    入力フォーム生成・レコード登録完了後の入力フォーム初期化・新規レコードボタン押下時に発生するイベントです。

    イベントタイプdirectone.create.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    レコード追加完了前イベント

    新規レコード登録前に発生するイベントです。

    イベントタイプdirectone.create.submit

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    idレコードID (空値)
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    レコード追加完了後イベント

    新規レコード登録完了時に発生するイベントです。

    イベントタイプdirectone.create.submit.success

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    responseKintoneAPIのレスポンス
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    レコード編集画面表示イベント

    レコード参照画面・カレンダーからレコードを選択した時に発生するイベントです。

    イベントタイプdirectone.edit.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    idレコードID
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    レコード編集完了前イベント

    既存レコード更新前に発生するイベントです。

    イベントタイプdirectone.edit.submit

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    idレコードID
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    レコード編集完了後イベント

    既存レコード更新完了時に発生するイベントです。

    イベントタイプdirectone.edit.submit.success

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    responseKintoneAPIのレスポンス
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    サブテーブル行追加イベント

    サブテーブルへの行追加時に発生するイベントです。

    イベントタイプdirectone.rows.add

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    fieldcodeサブテーブルのフィールドコード
    rowindex追加した行の行番号
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    サブテーブル行削除イベント

    サブテーブルの行削除時に発生するイベントです。

    イベントタイプdirectone.rows.del

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    fieldcodeサブテーブルのフィールドコード
    rowindex削除した行の行番号
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    カレンダー生成イベント

    カレンダー初期表示完了時に発生するイベントです。

    イベントタイプdirectone.calendar.build

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    table表示テーブル (TABLE要素)

    カレンダー表示イベント

    カレンダー表示完了時に発生するイベントです。

    イベントタイプdirectone.calendar.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    month表示月 (yyyy-mm)
    recordsレコードオブジェクトの配列
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    カレンダーセル表示イベント

    カレンダー表示時における各セルの表示完了発生するイベントです。

    イベントタイプdirectone.calendar.cell.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    cell表示セル (TD要素)
    date表示日 (yyyy-mm-dd)
    recordsレコードオブジェクトの配列
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    フォトギャラリー生成イベント

    フォトギャラリー初期表示完了時に発生するイベントです。

    イベントタイプdirectone.gallery.build

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    table表示テーブル (TABLE要素)

    フォトギャラリー表示イベント

    フォトギャラリー表示完了時に発生するイベントです。

    イベントタイプdirectone.gallery.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    offsetレコード取得開始位置
    recordsレコードオブジェクトの配列
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    フォトギャラリーセル表示イベント

    フォトギャラリー表示時における各セルの表示完了時に発生するイベントです。

    イベントタイプdirectone.gallery.cell.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    cell表示セル (TD要素)
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    フォトギャラリーレコード詳細画面表示イベント

    フォトギャラリーからレコードを選択した時に発生するイベントです。

    イベントタイプdirectone.gallery.detail.show

    » eventオブジェクトのプロパティ

    typeイベントタイプ
    errorエラー判定
    eventオブジェクトのerrorをfalseにしてreturnした場合は、以降のイベントはキャンセルされます。
    idレコードID
    recordレコードオブジェクト
    ※フィールド形式についてはCybozu developer networkをご確認下さい。

    入力フォームのDOM構造につきましてはお客様側でのご確認をお願いします。

    各フィールドのchangeイベントはaddEventListener等をご利用下さい。

    Promiseオブジェクトを用いた非同期処理も実装可能です。

  3. 関数

    レコード再読み込み

    参照用一覧の絞り込み条件に加え、新たな条件と共にレコード取得を行います。

    関数名directone.reload(query)
    引数クエリパラメータ
    ※クエリパラメータについてはCybozu developer networkをご確認下さい。
    ※本関数はカレンダー形式・フォトギャラリー形式のみで使用出来ます。

お申込み内容の変更

ご契約情報・決済クレジットカード・パスワードの変更は、ご契約内容変更ページから行います。

ご契約時のメールアドレスとパスワードでログインして下さい。

ログイン後に表示された内容の変更は「ご契約内容の変更」ボタン、決済クレジットカードの変更は「カード情報の変更」ボタン、ログインパスワードの変更は「パスワード変更」ボタンのそれぞれから行います。

解約

解約は、ご契約内容変更ページから行います。

ログイン後にページ下部の「解約」ボタンを押下し、表示された確認メッセージ内の「OK」ボタンを押下することで解約処理が実行されます。

決済情報も同時に削除されますので、前月決済時から解約日までの料金は発生致しません。

試用期間について

Directoneはご登録頂いたクレジットカード会社経由で毎月20日の9時に1,500円の請求処理を行いますが、当月の請求日前までにご解約された分につきましては、請求対象としておりません。

請求対象となるご契約者様は当月20日の9時時点でご解約されていない方のみとなりますので、仮に前月20日の9時以降にお申込み頂き、当月20日の8時59分までにご解約された場合は、1ヶ月のトライアルということで、その分の料金は請求致しません。

決済方法の仕様上、トライアル期間を別途設けることが難しいので、試用目的でご契約頂く場合はお申込み時期にご注意下さい。

Internet Explorerをご利用中の皆さまへ

今回は、当サイトにアクセス頂き有難うございます。

しかしながら、当サイトをご覧頂く為にはGoogle Chrome,Mozilla Firefox,Microsoft Edge等のモダンブラウザのご利用が不可欠となっております。

Microsoft EdgeがインストールされたPCをご利用中であればMicrosoft Edgeを、インストールされていないPCをご利用中であれば、下記URLよりモダンブラウザのダウンロードをお願い致します。

Google Chromeをダウンロード

Mozilla Firefoxをダウンロード

Internet Explorer サポートポリシー変更の重要なお知らせ