Webツールの基本的な設定設置のしかた

タイトルイメージ:Webツールの基本的な設定設置

デジタルエイドが提供する Webツールは機能は違っても、設定設置のしかたはどれもほぼ同じです。ですから、基本的な設定設置方法が呑み込めたら、どの Webツールでも動かせるようになります。ここでは、ほぼすべての Webツールに共通する基本的な設定設置のしかたを解説します。

Webツールの基本構成

Webツールを購入すると、ツール名の付いたフォルダの中に3つのファイルが入っています。

xxx (Webツールフォルダ)
|- xxx.js (プログラムファイル)
|- xxx.css (デザインファイル)
|- settings.json (設定ファイル)

この構成は、ほぼどのWebツールでも同じです。
このうち、設定ファイルは動作確認用のダミーファイルになっています。

なお、サイト内スライドバナーなど、画像を使うWebツールでは、フォルダ内にダミー用の画像も入っています。

プログラムは、jQuery をライブラリとする JavaScript で書かれています。
無料版以外、プログラムは改変できません。また、ファイル名も変えてはいけません。

導入までの流れ

導入までの流れは次のようになっています。

  1. Webツールをフォルダごと、アップロードする。
  2. Webページからリンクを張る。
  3. テストして、正しく動くのを確認する。
  4. 本番用設定ファイル等を生成・アップロードする。

1. Webツールをフォルダごと、アップロードする

FTPソフトで、Webツールをフォルダごと Webサーバーにアップロードします。アップロードする位置は、Webページの表示領域であればどこでもいいので、新たにフォルダを作っても構いません。ただし、リンクパスはできるだけシンプルなほうが間違えがないので、そのまま表示領域のルートに置くことをお勧めします。
WordPress など CMS の場合は、テーマディレクトリなど所定の位置にアップロードします。

2. Webページからリンクを張る

Webツールを表示したいWebページからリンクを張ります。Webページに書き込むのはリンクだけなので、デザインやコンテンツに影響はありません。
リンクしなければならないのは、次の3つのファイルです。

(1) デザインファイル
(2) jquery.js
(3) プログラムファイル

jquery.js は、プログラムファイルより先に読み込まれるように設定します。パーション 1.7 以上、推奨は 3.1.x です。.slim 付きの jquery には対応していません。
なお、設定ファイルやスライドなどの画像ファイルはプログラムファイルから読み込むため、リンクは不要です。

作業する前には、必ず Webページのバックアップをとってください。

3. テストして、正しく動くのを確認する

もし、正しく動かない場合は、リンクが正しく張れていないか、ファイル名が正しくないか、全角文字になっているか等の可能性があります。よく見直し、リンクやファイル名を正しく書き直してください。それでもうまくいかない場合は、Webページをいったんバックアップしたファイルに戻し、専門家に作業を依頼しましょう。

4. 本番用設定ファイルを生成・アップロードする

テストがうまくいったら、会員専用ページで、本番用の設定ファイルを生成します。新しい設定ファイルをアップロードし、ダミー用設定ファイルに上書きします。
サイト内スライドバナーなどの場合は、設定ファイルをテスト用に新たに生成します(スライド表示が確認できるように開始日やスライド等を設定します)。そのうえで、スライドが正しく動くかテストします。

設定ファイルを生成するのは、会員専用ページにログインしてください。Webツールをご購入していただいた方すべてに、1年間無料で、会員専用ページが利用できる会員登録パスを配布していますので、設定ファイル生成にはコストがかかりません。

サポート

いかがだったでしょうか。細かく説明しようとすると、注意事項が多くなってしまい、少しややっこしく感じられたかもしれません。
会員専用ページにそれぞれの Webツールを設置するためのサンプルコードを書いていますので、ご参照ください。

もし、荷が重かったり、身近に専門家がいない場合は、8,000円/件で、サポートいたしますので、お気軽にご連絡ください。

まとめ

デジタルエイドが提供する Webツールは機能は違っても、ほぼすべて、同じファイル構成になっています。すなわち、プログラムファイル、デサインファイル、設定ファイルの3つです。設定設置には、次の4つのステップを踏みます。

  1. Webツールをフォルダごと、アップロードする。
  2. Webページからリンクを張る。
  3. テストして、正しく動くのを確認する。
  4. 本番用設定ファイルを生成・アップロードする。

コメントを残す