コイブミ設置マニュアル

個人サイト向けひとことフォーム コイブミ

zipファイルの解凍とファイルの確認

まずはzipファイルをダウンロード、解凍します。

解凍すると「koibumi_app」という名前のフォルダが入っています。内容は以下の通りです。

コイブミファイル一覧

  • 編集が必要なファイルは、koibumi_appフォルダ直下にあるkoibumi.jsのみです。その他のファイルは基本的に編集する必要がありません。
  • example.jpgはデフォルトのお礼メッセージに含まれるサンプル画像です。不要な場合は削除してかまいません。
  • 送信されたメッセージに関するデータは、datasフォルダ内に蓄積されていきます。
  • お気に入りしたメッセージは、datas>favフォルダ内に蓄積されていきます。
  • 送信可能な文字数や管理画面パスワード、拒否するIPアドレス等に関するデータは、datas>settingフォルダ内のファイルに保存されます。

初期設定

初期設定を行うのでkoibumi.jsをテキストエディタで開いてください。

最初の4行目あたりに以下のような記述があります。

var folderpath = '/';
// koibumi_appフォルダが入っているパスを、ドメイン名以下から記入してください。

var folderpathの値には、koibumi_appフォルダを設置した場所を記載します。詳細がkoibumi.jsファイル本文に記載してありますので、参考にしながら書いてください。ドメイン直下にkoibumi_appフォルダをアップロードした場合は、変更する必要はありません。

送信フォームの設置

いいねボタンを設置したいページのHTMLファイルにコードを書き込み、ボタンを表示します。コードを書き込むのは3か所です。

<head>~</head>の間

<link rel="stylesheet" href="koibumi_app/koibumi.css">

コイブミ送信フォーム用のCSSファイルを読み込みます。

サンプルは、HTMLファイルがkoibumi_appフォルダと同じ階層にある場合の記述です。CSSファイルのパスは、必要に応じて書き換えてください。http://から始まる絶対パスで指定すると安心です。

</body>(閉じタグ)の直前

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="koibumi_app/koibumi.js"></script>

一行目でGoogleの提供しているjQueryライブラリを、二行目でコイブミ送信フォーム用のjsファイルを読み込みます。

こちらもHTMLファイルがkoibumi_appフォルダと同じ階層にある場合の記述なので、jsファイルのパスは必要に応じて書き換えてください。http://から始まる絶対パスで指定すると安心です。

コイブミ送信フォームを設置したい場所

<!-- コイブミここから -->
<div id="koibumi_wrap">
<div id="koibumi_form">
<input type="hidden" name="" value="" id="koibumi_token">
<input type="text" name="" value="" id="koibumi_text" placeholder="ひとこと送る">
<button type="submit" id="koibumi_btn">送信</button>
</div>
<p class="attention">メッセージは<span id="koibumi_limitMessage"></span>文字まで、同一IPアドレスからの送信は一日<span id="koibumi_limitIP"></span>回まで</p>
<p id="koibumi_alert" style="display: none;"></p>
<!-- お礼メッセージここから -->
<div id="koibumi_thanks" style="display:none;">
<div class="box">
<img src="koibumi_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます!</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</div>
<!-- コイブミここまで -->

画像およびありがとうメッセージはお好みで差し替えてください。また、placeholder="ひとこと送る"の値を変更すると、送信フォーム内に表示される文章を変更できます。

サーバーへのアップロードと動作確認

ここまでの作業が終わったら、「koibumi_appフォルダをまるごと」と「編集したHTMLファイル」をサーバーの適切な場所にアップロードします。

管理画面の確認

http://(koibumi_appフォルダをアップロードしたURL)/koibumi_app/admin/にアクセスすると、コイブミの管理画面にアクセスできます。

ひとこと送信フォーム「コイブミ」設定

ログインを要求されるので、初回は「pass」と入力してログインして下さい。

コイブミ設定画面

サイドバーの「設定変更」をクリックすると各種設定画面に遷移します。メッセージ文字数上限などが変更できます。お好みで設定を変更してください。

セキュリティのため、パスワードは必ず変更して下さい。

送信フォームの動作確認

送信フォームを設置したページから、実際にメッセージを送信してみます。

お礼メッセージがポップアップされ、管理画面でメッセージが確認できたら成功です。お疲れ様でした!

トラブルシューティング

ローカル環境ではPHPプログラムが動かないため動作確認ができません。必ずサーバー上にアップロードして動作を確認してください。
koibumi.js内のfolderpathの指定が誤っている可能性があります。koibumi_appフォルダの入っている階層が正しく指定されているか、半角スラッシュ「/」半角クオーテーション「’」が抜けていないか、コメントに書いてある記入例とよく見比べて確認してください
koibumi_app>datas>setting>config.dat 内の一行目にパスワードが保存されています。FTPツールなどを使ってサーバーからdatをダウンロードし、中身を確認してください。
koibumi.cssを開き、「お礼メッセージを上にポップアップする場合ここから」~「ここまで」の部分をコメントアウトし、その下にある「お礼メッセージを下にポップアップする場合ここから」~「ここまで」の部分をコメント解除してください。
CSSで横幅300pxで固定してあります。div#koibumi_thankswidthの値をお好みで変更してください。

プログラムの質の向上のため、もしも不具合などが発見された場合は、こちらのフォームからフィードバックを頂ければ幸いです。

タイトルとURLをコピーしました