あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


leaflet:install

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
leaflet:install [2018/09/11 08:55] – [おまけ] 管理者leaflet:install [2018/09/11 09:27] (現在) 管理者
行 1: 行 1:
 +[[:programming_start]]
 +====== Leaflet インストール ======
 +Leaflef.jsを自分のサーバーにインストール方法です。
 +
 +----
 +===== はじめに =====
 +インストールといってもleaflet.jsを公式サイトからダウンロード、展開、自分のサーバーにアップロードするだけです。
 +
 +インストールせずcdnなど外部サーバーから読み込む方法もありますが、サーバーダウンなどの可能性があるので自分のサーバーにインストールした方が無難です
 +
 +
 +<html>
 +<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 +<!-- respon_0 -->
 +<ins class="adsbygoogle"
 +     style="display:block"
 +     data-ad-client="ca-pub-9251612436023685"
 +     data-ad-slot="1409739163"
 +     data-ad-format="auto"></ins>
 +<script>
 +(adsbygoogle = window.adsbygoogle || []).push({});
 +</script>
 +</html>
 +
 +
 +----
 +===== 準備 =====
 +ブラウザ・FTPクライアント・zip解凍ソフト・自分のサーバーなどが必要です。(ローカルマシンで試すだけならブラウザとzip解凍ソフトだけあればOK)
 +
 +----
 +===== ダウンロード =====
 +公式サイト http://leafletjs.com/ のDownloadから 「Stable version(安定版)」とあるバージョンをダウンロード。
 +
 +ダウンロードしたファイルを展開(解凍)してそのまま自分のサーバーにアップロードします。
 +
 +(実際使用するファイルは「leaflet.js」「leaflet.css」「imagesフォルダ」だけなので、他は削除してもOKです)
 +
 +  ファイルフォルダ構成
 +  (www-root)
 +  | index.html ・・・自分のWebサイトのトップページ
 +  +[leaflet]
 +    | leaflet.js
 +    | leaflet.css
 +    +[images]
 +      |layers.png
 +      |layers-2x.png
 +      |marker-icon.png
 +      |marker-icon-2x.png
 +      |marker-shadow.png
 +
 +----
 +===== おまけ =====
 +バージョンアップなどを考慮すると次のように、常に最新状態とする「常用フォルダ」とバージョン指定できる「バージョン別フォルダ」とした方が便利だとおもいます。
 +
 +バージョンアップによる機能の削除や変更で自分のプログラムが動かなくなる事を考慮しバージョン別にアップロードします。しかしバージョン別に管理するとバージョンアップの度に全ページのプログラムを書き換えなければならず不便なので、常に最新状態とする「常用フォルダ」を作成し通常はコチラを使います。もしバージョンアップにより不具合が出る場合はバージョンを指定して動作させる事ができます。
 +
 +  (www-root)
 +  | index.html ・・・自分のWebサイトのトップページ
 +  +[leaflet]
 +    +[v1]・・・常用フォルダ(中身はバージョン1.3.4と同じ)
 +    | leaflet.js
 +    | leaflet.css
 +    | +[images]
 +    +[v1_3_4]・・・バージョン1.3.4
 +    | leaflet.js
 +    | leaflet.css
 +    | +[images]
 +    +[v1_3_1]・・・バージョン1.3.1
 +    | leaflet.js
 +    | leaflet.css
 +    | +[images]
 +  以下略
 +
 +
 +----
 +===== 終わり =====
 +後は、[[leaflet:map]] のスプリクトを参考にJavaScriptを書いて動作すればインストール成功です。
 +
 +
  

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki