この記事は最新更新日から、4年以上経過しています。
簡単にWindows環境にWEBサーバーを構築できるXAMPPがインストールされていることが前提で進めます。
XAMPPインストールフォルダの「htdocs」フォルダに、「w2ui」フォルダを作成します。
作成したフォルダに、以下のフォルダを作成しました。
- js
- css
- locale
また空のファイル「index.php」を作成。
localeフォルダに言語ファイルを配置する
W2UIは基本英語表記のUIライブラリですが、各種言語への対応もできていて、GitHubに言語ファイルがあります。
日本語ファイルは、「ja-jp.json」になりますので、ダウンロードしてlocaleフォルダに配置します。
jsフォルダにJavaスクリプトファイルを配置する
まず個人的な趣味になりますが、w2.jsという空ファイルを作成します。
次にw2uiはjQuery拡張ライブラリになりますので、jQueryライブラリが必要になります。
jQueryのバージョンは1.9以上となってますので、w2uiのGitHubでも置いてある2.1.4を使用します。
先ほどの「w2.js」ファイルの上部に、「jquery-2.1.4.min.js」のソースコードを貼り付けます。
※3.1.1を設置しGoogleChromeで確認したところエラーが出てしまったので、2.1.4を利用します。
次にw2uiのソースコードを取得するのですが、バグ等に対応した最新版を利用します。
最新版のw2uiはこちらのページの「w2ui.min.js」になります。
バグや要望なども、英語ではありますが受け付ける窓口があります。
いろいろな情報も記載されていて、開発のヒントになると思いますので、一度見ても損は無いかと思います。
取得した最新ソースを「w2.js」ファイルの下部に張り付けます。
実際のソースコードはこんな感じです。
|
1 2 3 4 5 |
/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ 実際はjQueryソースコードをここに設定します。 /* w2ui 1.5.x (nightly) (c) http://w2ui.com, vitmalina@gmail.com */ ここにw2uiソースコードを設定します。 |
CSSフォルダに必要ファイルを配置する
最新のw2uiを利用しているので、cssも同じバージョンを取得します。
Javaスクリプトが配置してあるページに、同じく配置してある「w2ui.min.css」を取得します。
後ほど別のcssを追加するかも？しれませんので、Javaスクリプトと同様に「w2.css」というファイルに張り付けるか。取得したファイルをリネームして配置しておきます。
index.phpにベースになるHTMLコードを記述する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>W2UI サンプル</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/w2.css" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="js/w2.js"></script> </head> <body> <div id="layout" style="width: 100%;"></div> <script type="text/javascript"> $(function () { //現在のウィンドウ高さを取得し、要素に設定 $("#layout").css("height",$(window).height()-15); //言語設定を日本語にする。 w2utils.locale('locale/ja-jp.json'); }); </script> </body> </html> |
CSSアイコンライブラリ「Font Awesome」を参照する
w2uiライブラリで利用するアイコン関連は、「Font Awesome」を利用しているようなので配布元ページから一式ダウンロードするか？外部サーバーへ配置してあるCSSを参照します。
外部サーバーから最新のCSSを参照するには、以下のページを確認すると良いです。
アイコンが文字化けするので、CSSに追記する
配布されているCSSをそのまま読み込んでも、Font Awesomeを利用している部分で文字化けしてしまいました。
ですので、w2.cssの末尾に以下を追記しました。
|
1 |
[class^="fa-"],[class*=" fa-"]{font-family:FontAwesome !important;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.fa-white,.nav-pills>.active>a>[class^="fa-"],.nav-pills>.active>a>[class*=" fa-"],.nav-list>.active>a>[class^="fa-"],.nav-list>.active>a>[class*=" fa-"],.navbar-inverse .nav>.active>a>[class^="fa-"],.navbar-inverse .nav>.active>a>[class*=" fa-"],.dropdown-menu>li>a:hover>[class^="fa-"],.dropdown-menu>li>a:hover>[class*=" fa-"],.dropdown-menu>.active>a>[class^="fa-"],.dropdown-menu>.active>a>[class*=" fa-"],.dropdown-submenu:hover>a>[class^="fa-"],.dropdown-submenu:hover>a>[class*=" fa-"]{background-image:none}[class^="fa-"]:before,[class*=" fa-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="fa-"],a [class*=" fa-"]{display:inline-block}.fa-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="fa-"],.nav [class^="fa-"],.btn [class*=" fa-"],.nav [class*=" fa-"]{display:inline}.btn [class^="fa-"].fa-large,.nav [class^="fa-"].fa-large,.btn [class*=" fa-"].fa-large,.nav [class*=" fa-"].fa-large{line-height:.9em}.btn [class^="fa-"].fa-spin,.nav [class^="fa-"].fa-spin,.btn [class*=" fa-"].fa-spin,.nav [class*=" fa-"].fa-spin{display:inline-block}.nav-tabs [class^="fa-"],.nav-pills [class^="fa-"],.nav-tabs [class*=" fa-"],.nav-pills [class*=" fa-"],.nav-tabs [class^="fa-"].fa-large,.nav-pills [class^="fa-"].fa-large,.nav-tabs [class*=" fa-"].fa-large,.nav-pills [class*=" fa-"].fa-large{line-height:.9em}li [class^="fa-"],.nav li [class^="fa-"],li [class*=" fa-"],.nav li [class*=" fa-"]{display:inline-block;width:1.25em;text-align:center}li [class^="fa-"].fa-large,.nav li [class^="fa-"].fa-large,li [class*=" fa-"].fa-large,.nav li [class*=" fa-"].fa-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="fa-"],ul.icons li [class*=" fa-"]{width:.75em}.fa-muted{color:#eee}.fa-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.fa-2x{font-size:2em}.fa-2x.fa-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.fa-3x{font-size:3em}.fa-3x.fa-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.fa-4x{font-size:4em}.fa-4x.fa-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="fa-"].pull-left,[class*=" fa-"].pull-left{margin-right:.3em}[class^="fa-"].pull-right,[class*=" fa-"].pull-right{margin-left:.3em}.btn [class^="fa-"].pull-left.fa-2x,.btn [class*=" fa-"].pull-left.fa-2x,.btn [class^="fa-"].pull-right.fa-2x,.btn [class*=" fa-"].pull-right.fa-2x{margin-top:.18em}.btn [class^="fa-"].fa-spin.fa-large,.btn [class*=" fa-"].fa-spin.fa-large{line-height:.8em}.btn.btn-small [class^="fa-"].pull-left.fa-2x,.btn.btn-small [class*=" fa-"].pull-left.fa-2x,.btn.btn-small [class^="fa-"].pull-right.fa-2x,.btn.btn-small [class*=" fa-"].pull-right.fa-2x{margin-top:.25em}.btn.btn-large [class^="fa-"],.btn.btn-large [class*=" fa-"]{margin-top:0}.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x,.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-top:.05em}.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em}.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em}.fa-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.fa-spin{height:.9em}.btn .fa-spin{height:auto}.fa-spin.fa-large{height:1.25em}.btn .fa-spin.fa-large{height:.75em}}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-empty:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-ok:before{content:"\f00c"}.fa-remove:before{content:"\f00d"}.fa-zoom-in:before{content:"\f00e"}.fa-zoom-out:before{content:"\f010"}.fa-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before{content:"\f013"}.fa-trash:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file:before{content:"\f016"}.fa-time:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download-alt:before{content:"\f019"}.fa-download:before{content:"\f01a"}.fa-upload:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle:before{content:"\f01d"}.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-indent-left:before{content:"\f03b"}.fa-indent-right:before{content:"\f03c"}.fa-facetime-video:before{content:"\f03d"}.fa-picture:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before{content:"\f044"}.fa-share:before{content:"\f045"}.fa-check:before{content:"\f046"}.fa-move:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-sign:before{content:"\f055"}.fa-minus-sign:before{content:"\f056"}.fa-remove-sign:before{content:"\f057"}.fa-ok-sign:before{content:"\f058"}.fa-question-sign:before{content:"\f059"}.fa-info-sign:before{content:"\f05a"}.fa-screenshot:before{content:"\f05b"}.fa-remove-circle:before{content:"\f05c"}.fa-ok-circle:before{content:"\f05d"}.fa-ban-circle:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-share-alt:before{content:"\f064"}.fa-resize-full:before{content:"\f065"}.fa-resize-small:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-sign:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye-open:before{content:"\f06e"}.fa-eye-close:before{content:"\f070"}.fa-warning-sign:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder-close:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-resize-vertical:before{content:"\f07d"}.fa-resize-horizontal:before{content:"\f07e"}.fa-bar-chart:before{content:"\f080"}.fa-twitter-sign:before{content:"\f081"}.fa-facebook-sign:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-up:before{content:"\f087"}.fa-thumbs-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-empty:before{content:"\f08a"}.fa-signout:before{content:"\f08b"}.fa-linkedin-sign:before{content:"\f08c"}.fa-pushpin:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-signin:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-sign:before{content:"\f092"}.fa-upload-alt:before{content:"\f093"}.fa-lemon:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-check-empty:before{content:"\f096"}.fa-bookmark-empty:before{content:"\f097"}.fa-phone-sign:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0a2"}.fa-certificate:before{content:"\f0a3"}.fa-hand-right:before{content:"\f0a4"}.fa-hand-left:before{content:"\f0a5"}.fa-hand-up:before{content:"\f0a6"}.fa-hand-down:before{content:"\f0a7"}.fa-circle-arrow-left:before{content:"\f0a8"}.fa-circle-arrow-right:before{content:"\f0a9"}.fa-circle-arrow-up:before{content:"\f0aa"}.fa-circle-arrow-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-fullscreen:before{content:"\f0b2"}.fa-group:before{content:"\f0c0"}.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-beaker:before{content:"\f0c3"}.fa-cut:before{content:"\f0c4"}.fa-copy:before{content:"\f0c5"}.fa-paper-clip:before{content:"\f0c6"}.fa-save:before{content:"\f0c7"}.fa-sign-blank:before{content:"\f0c8"}.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-sign:before{content:"\f0d3"}.fa-google-plus-sign:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before{content:"\f0dc"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-up:before{content:"\f0de"}.fa-envelope-alt:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-undo:before{content:"\f0e2"}.fa-legal:before{content:"\f0e3"}.fa-dashboard:before{content:"\f0e4"}.fa-comment-alt:before{content:"\f0e5"}.fa-comments-alt:before{content:"\f0e6"}.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before{content:"\f0ea"}.fa-lightbulb:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-alt:before{content:"\f0f3"}.fa-coffee:before{content:"\f0f4"}.fa-food:before{content:"\f0f5"}.fa-file-alt:before{content:"\f0f6"}.fa-building:before{content:"\f0f7"}.fa-hospital:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-sign:before{content:"\f0fd"}.fa-plus-sign-alt:before{content:"\f0fe"}.fa-double-angle-left:before{content:"\f100"}.fa-double-angle-right:before{content:"\f101"}.fa-double-angle-up:before{content:"\f102"}.fa-double-angle-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before{content:"\f10b"}.fa-circle-blank:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-close-alt:before{content:"\f114"}.fa-folder-open-alt:before{content:"\f115"} |
まとめ
思ったより記事が長くなったので、いったん区切ります＾＾；
次回から、レイアウトを基本としたコーディング例を書いていければと思います。