ココナラでビデオチャット相談やオンライン対応をしていると、お客様へ予約可能な日時を案内する場面がよくあります。
たとえば、
「〇日は10:00〜12:00、13:00〜16:00が空いています」
「この週の空き枠は以下の通りです」
といった案内を、予約管理画面を見ながら毎回手入力するのは意外と手間がかかります。
そこで今回は、ココナラの予約管理ページに表示されている予約受付枠を、1クリックで文章に変換してコピーできる仕組みを作りました。
できること
この機能を設定しておくと、ココナラの予約管理カレンダーを開いた状態で、Chromeのブックマークバーにある専用ボタンをクリックするだけで、表示中の予約受付枠を文字情報としてコピーできます。
出力される文章は、たとえば次のような形式です。
6/7(日) 空き無し
6/8(月) 10:00〜12:00 13:00〜16:00
6/9(火) 13:00〜16:00
6/10(水) 13:00〜16:00
6/11(木) 10:00〜12:00 13:00〜16:00
6/12(金) 10:00〜12:00 13:00〜16:00
6/13(土) 空き無し
コピーされた内容は、そのままココナラのメッセージ欄に貼り付けて、お客様への案内文として使えます。
使い方の流れ
使い方は大きく分けると、次のような流れです。
まず、Google Chromeのブックマークバーに専用のボタンを登録します。
登録後は、ココナラの予約管理ページを開き、ブックマークバーの「予約枠コピー」をクリックします。
すると、画面に表示されている予約受付枠が自動で読み取られ、日付ごとの空き時間として整理されます。
整理された文章はクリップボードにコピーされるため、あとはココナラのメッセージ欄に貼り付けるだけです。
毎回の手入力を減らせる
予約枠の案内は、1回あたりの作業時間は短くても、何度も繰り返すと地味に負担になります。
特に、複数日の候補を案内する場合や、毎週同じようなやり取りが発生する場合は、
「画面を見ながら日付と時間を写す」
という作業だけでもミスが起きやすくなります。
この機能を使うことで、予約管理画面に表示されている内容をもとに、案内文のたたき台をすぐ作成できます。
完全に文章作成を自動化するというより、お客様へ送る前の下書きを素早く作る補助機能として使うイメージです。
こんな方に向いています
ココナラで、以下のようなサービスを出品している方には特に相性が良いと思います。
ビデオチャット相談を行っている方
オンラインレッスンを提供している方
日時調整が多いサービスを出品している方
予約可能時間を毎回メッセージで案内している方
手入力による転記ミスを減らしたい方
予約枠の案内は、お客様とのやり取りの中でもよく発生する作業です。
こういった小さな作業を少しずつ減らしていくことで、返信のスピードアップや作業ミスの削減につながります。
設定イメージ
設定時は、Chromeのブックマークバーに「予約枠コピー」というボタンを追加します。
一度登録しておけば、次回以降はココナラの予約管理ページを開いて、そのボタンをクリックするだけで使えます。
特別なアプリをインストールする必要はなく、Chromeのブックマーク機能を利用する形です。
JavaScriptコード（こちらをコピーしてブックマークのURLに貼り付け）
javascript:(function(){var P='d-reservationProviderCalendarContents_';var c=document.querySelector('.d-reservationProviderCalendarContents');function SP(text,copied){var old=document.getElementById('bm-reserve-panel');if(old)old.remove();var b=document.createElement('div');b.id='bm-reserve-panel';b.style.cssText='position:fixed;top:20px;right:20px;z-index:2147483647;background:#fff;border:2px solid #2ea98c;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.28);padding:16px 18px 14px;font-family:sans-serif;font-size:14px;color:#222;max-width:380px';var x=document.createElement('button');x.textContent='×';x.style.cssText='position:absolute;top:4px;right:8px;border:none;background:none;font-size:20px;line-height:1;cursor:pointer;color:#999';x.onclick=function(){b.remove();};var h=document.createElement('div');h.textContent=copied?'予約枠（クリップボードにコピー済み）':'予約枠（コピー失敗：下を選択してコピー）';h.style.cssText='font-weight:bold;margin-bottom:8px;padding-right:16px;color:'+(copied?'#2ea98c':'#c0392b');var bd=document.createElement('div');bd.textContent=text;bd.style.cssText='white-space:pre-wrap;line-height:1.7;user-select:all';b.appendChild(x);b.appendChild(h);b.appendChild(bd);document.body.appendChild(b);}if(!c){SP('カレンダーが見つかりません。\n予約管理カレンダーのページで実行してください。',false);return;}var WD=['日','月','火','水','木','金','土'],U=30;function V(e,n){return parseFloat(e.style.getPropertyValue(n));}function F(m){var h=Math.floor(m/60),x=m-h*60;return h+':'+(x<10?'0'+x:x);}var ttl=document.querySelector('.d-reservationProviderCalendarHeading_termText');var ym=(ttl?ttl.textContent:'').match(/(\d{4})年(\d{1,2})月/);var now=new Date();var yy=ym?parseInt(ym[1],10):now.getFullYear();var mm=ym?parseInt(ym[2],10):now.getMonth()+1;var DT=[],pv=-1;document.querySelectorAll('.d-reservationProviderCalendarDays_dayWrapper .d-reservationProviderCalendarDays_day').forEach(function(el){var dn=parseInt(el.textContent,10);if(pv!==-1&&dn<pv){mm++;if(mm>12){mm=1;yy++;}}DT.push(new Date(yy,mm-1,dn));pv=dn;});var L=[];c.querySelectorAll('.'+P+'dayWrapper').forEach(function(col,i){var d=DT[i]||new Date();var lb=(d.getMonth()+1)+'/'+d.getDate()+'('+WD[d.getDay()]+')';var S=[];col.querySelectorAll('.'+P+'reservationFrameCell').forEach(function(f){var tp=V(f,'--reservation-frame-cell-top'),un=V(f,'--reservation-frame-cell-unit');if(isNaN(tp)||isNaN(un))return;S.push({s:tp*U,e:(tp+un)*U});});S.sort(function(a,b){return a.s-b.s;});L.push(lb+' '+(S.length?S.map(function(s){return F(s.s)+'～'+F(s.e);}).join(' '):'空き無し'));});var O=L.join('\n');function FIN(ok){SP(O,ok);}function EC(){var t=document.createElement('textarea');t.value=O;document.body.appendChild(t);t.select();var ok=false;try{ok=document.execCommand('copy');}catch(e){}document.body.removeChild(t);FIN(ok);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(O).then(function(){FIN(true);},function(){EC();});}else{EC();}})();
使用イメージ
実際に使うときは、ココナラの予約管理カレンダーを表示した状態で「予約枠コピー」をクリックします。
クリックすると、表示中の予約受付枠が日付ごとの文章に変換され、コピーされた状態になります。
その後、メッセージ欄に貼り付けると、予約可能な日時をまとめた文章として利用できます。
注意点
この機能は、あくまで自分の管理画面上に表示されている予約枠を、メッセージ用の文章に整えるための補助ツールです。
実際にお客様へ送信する前には、内容に間違いがないか確認してから送るようにしてください。
また、ココナラの画面構成が変更された場合、うまく動作しなくなる可能性もあります。その場合は、必要に応じて調整が必要になります。
まとめ
今回は、ココナラの予約管理カレンダーに表示されている予約受付枠を、1クリックでコピーできる仕組みを作りました。
予約枠を毎回手入力する必要がなくなるため、お客様への案内文作成がかなり楽になります。
大きなシステムではなくても、こういった小さな自動化を取り入れるだけで、日々の作業効率はかなり変わります。
ココナラ出品者の方で、
「この作業、毎回面倒だな」
「メッセージ作成を少し楽にしたい」
「自分のサービス運営に合わせた便利機能を作りたい」
という方は、こういった小さな業務改善ツールの作成も可能です。
日々の出品作業やお客様対応を少しでも楽にしたい方は、お気軽にご相談ください。
