コイブミ設置マニュアル

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

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

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

koibumi_app
│    example.jpg
│    index.php
│    koibumi.css
│    koibumi.js
│    koibumi.php
│    _ajax.php
│
├─admin
│ │     admin.php
│ │     archive.php
│ │     fav.php
│ │     func.js
│ │     index.php
│ │     setting.php
│ │     style.css
│ │
│ └─inc
│          routine.php
│          _config.php
│          _core.php
│          _footer.php
│          _func.php
│          _header.php
│          _selector.php
│          _setting.php
│          _sidebar.php
│
└─datas
│    .htaccess
│
├─fav
└─setting
    config.dat
    deny.dat
    NGwords.dat
  • 編集が必要なファイルは、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」と入力してログインして下さい。

コイブミ設置マニュアル

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

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

送信フォームの動作確認

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

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

メール通知機能の設定

設定変更>メール通知から、メッセージの通知設定を行えます。

メッセージを受信するごとにメール通知する場合はコイブミの設定画面から設定を変更するだけで完了しますが、毎日/毎週/毎月メール通知をする場合はcronの利用が必須になります。

cronとは……通常のプログラムは、「誰かがボタンがクリックする」などのアクションがなければ、動作させることができません。そこで、自動で定期的にプログラムを動かし、メール送信などのアクションを起こすために、cronを使います。cronは、設定したスケジュール通りに指定したプログラムを動かしてくれます。

PHPが利用できるサーバーであればだいたいcronも使えるはずです。

コイブミ設置マニュアル

コイブミVer1.2.0以上では、設定変更ページのメール通知タブに、cron設定用のファイルパスが生成されているのが確認できます。

サーバーの管理画面にログインし、cron設定で以下のとおりに設定してください。

  • 実行プログラムは、上記ファイルパスに設定する
  • cron実行スケジュールは、コイブミのメール通知設定と同じ周期で設定する(日時、曜日などはお好みでOKです)

トラブルシューティング

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

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