http://aurelia.io/get-started.html
(ﾟωﾟ) Configuring Your Environmentの部分の手順を書いておく。
(ﾟωﾟ) lubuntuでは、このようなコマンドを実行すればいい事がわかった。
(ﾟωﾟ) 環境作成には、githubのユーザー名を入力する手順が書いてある。つまり、
(ﾟωﾟ) githubのアカウントも必要なので、フリーメール等を使ってユーザーを作っておくこと。
(ﾟωﾟ)GitHubのユーザー名には、アンダーバー_を含めることが出来なかった。
sudo bash
apt-get install git
apt-get autoremove npm
apt-get install npm
apt-get install nodejs-legacy # これはjspm registry config githubする時に必要
npm install -g gulp
npm install -g jspm
root@ubuntu-VirtualBox:~# jspm registry config github
Would you like to set up your GitHub credentials? [yes]:yes
If using two-factor authentication or to avoid using your password you can generate an access token at https://github.com/settings/tokens.
Enter your GitHub username:kairino
Enter your GitHub password or access token:
Would you like to test these credentials? [yes]:yes
ok GitHub authentication is working successfully.
ok Registry github configured successfully.
root@ubuntu-VirtualBox:~# pwd
/home/ubuntu
root@ubuntu-VirtualBox:~# ls -la .jspm/
合計 12
drwxr-xr-x 2 root root 4096 6月 15 01:48 .
drwxr-xr-x 36 ubuntu ubuntu 4096 6月 15 01:48 ..
-rw-r--r-- 1 root root 434 6月 15 01:51 config
root@ubuntu-VirtualBox:~# more .jspm/config
{
"defaultTranspiler": "traceur",
"defaultRegistry": "jspm",
"registries": {
"github": {
"remote": "https://github.jspm.io",
"auth": "ここに暗号化？された認証情報が入る==",
"maxRepoSize": 0,
"handler": "jspm-github"
},
"npm": {
"handler": "jspm-npm",
"remote": "https://npm.jspm.io"
},
"jspm": {
"handler": "jspm-registry",
"remote": "https://registry.jspm.io"
}
}
}
root@ubuntu-VirtualBox:~#
http://aurelia.io/get-started.html
Setting up the Project Structure and Build
With the tooling installed, we can now turn our attention to setting up a basic structure for your app. Begin by downloading the navigation skeleton. Unzip it and rename the folder to navigation-app.
(ﾟωﾟ)the navigation skeletonのzipファイルを取得しよう。
(ﾟωﾟ)「Alternatively 別の方法」の２つのコマンドは、実行しないほうが良い。
(ﾟωﾟ)npm ERR!から始まるエラーメッセージが沢山出る。
Note: Alternatively ・・・
npm install -g yo generator-aurelia
yo aurelia
(ﾟωﾟ)skeleton-navigation-0.14.0.zipを取得した。
root@ubuntu-VirtualBox:~/public/js# ls -la
合計 48
drwxrwxr-x 3 ubuntu ubuntu 4096 6月 15 02:55 .
drwxrwxrwx 10 root root 4096 6月 15 02:55 ..
drwxrwxr-x 7 ubuntu ubuntu 4096 6月 9 13:03 skeleton-navigation-0.14.0
-rw-rw-r-- 1 ubuntu ubuntu 36233 6月 15 02:53 skeleton-navigation-0.14.0.zip
root@ubuntu-VirtualBox:~/public/js# mv skeleton-navigation-0.14.0 navigation-app
root@ubuntu-VirtualBox:~/public/js# cd navigation-app
root@ubuntu-VirtualBox:~/public/js/navigation-app# ls -la
合計 100
drwxrwxr-x 7 ubuntu ubuntu 4096 6月 9 13:03 .
drwxrwxr-x 3 ubuntu ubuntu 4096 6月 15 02:56 ..
-rw-rw-r-- 1 ubuntu ubuntu 264 6月 9 13:03 .editorconfig
-rw-rw-r-- 1 ubuntu ubuntu 80 6月 9 13:03 .gitignore
-rw-rw-r-- 1 ubuntu ubuntu 21 6月 9 13:03 .jshintrc
-rw-rw-r-- 1 ubuntu ubuntu 36 6月 9 13:03 .npmignore
-rw-rw-r-- 1 ubuntu ubuntu 628 6月 9 13:03 CONTRIBUTING.md
-rw-rw-r-- 1 ubuntu ubuntu 1079 6月 9 13:03 LICENSE
-rw-rw-r-- 1 ubuntu ubuntu 4224 6月 9 13:03 README.md
-rw-rw-r-- 1 ubuntu ubuntu 1689 6月 9 13:03 aurelia.protractor.js
drwxrwxr-x 3 ubuntu ubuntu 4096 6月 9 13:03 build
-rw-rw-r-- 1 ubuntu ubuntu 11093 6月 9 13:03 config.js
drwxrwxr-x 2 ubuntu ubuntu 4096 6月 9 13:03 doc
-rw-rw-r-- 1 ubuntu ubuntu 2249 6月 9 13:03 favicon.ico
-rw-rw-r-- 1 ubuntu ubuntu 155 6月 9 13:03 gulpfile.js
-rw-rw-r-- 1 ubuntu ubuntu 684 6月 9 13:03 index.html
-rw-rw-r-- 1 ubuntu ubuntu 1996 6月 9 13:03 karma.conf.js
-rw-rw-r-- 1 ubuntu ubuntu 2159 6月 9 13:03 package.json
-rw-rw-r-- 1 ubuntu ubuntu 606 6月 9 13:03 protractor.conf.js
drwxrwxr-x 2 ubuntu ubuntu 4096 6月 9 13:03 src
drwxrwxr-x 2 ubuntu ubuntu 4096 6月 9 13:03 styles
drwxrwxr-x 4 ubuntu ubuntu 4096 6月 9 13:03 test
root@ubuntu-VirtualBox:~/public/js/navigation-app#
(ﾟωﾟ)Apache2の仮想ホストに置いて、ブラウザで閲覧して見るとエラーになった。
GET
http://localhost/navigation-app/jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css [HTTP/1.1 404 Not Found 1ms]
GET
http://localhost/navigation-app/jspm_packages/system.js [HTTP/1.1 404 Not Found 8ms]
ReferenceError: System is not defined config.js:1:0
ReferenceError: System is not defined navigation-app:18:6
HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 navigation-app
(ﾟωﾟ)navigation-appディレクトリの、index.htmlとsrcディレクトリを削除か改名。
(ﾟωﾟ)そして、下記のコマンドをrootで行う。
(ﾟωﾟ)今までrootで環境作成してたから、なのかは不明。
http://aurelia.io/get-started.html
With all this in place, let's run some commands.
1.Open a console and change your directory to navigation-app.
2.Execute the following command to install the Gulp plugins listed in the devDependencies section of the package manifest.
npm install
3.Next, execute the following command to install the Aurelia library, bootstrap and font-awesome, listed in the jspm.dependencies section of the package manifest.
jspm install -y
(ﾟωﾟ)打ったコマンドは、
sudo bash
cd navigation-app
mv src src_bak
mv index.html index.html.bak
npm install
jspm install -y
(ﾟωﾟ)こんな結果になった。
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create es6-module-loader.js:7:27734
HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 navigation-app
"INFO [aurelia] Aurelia Starting" index.js:49:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-binding@0.12.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-binding@0.12.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-resources@0.12.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-resources@0.12.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/history-browser@0.5.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/history-browser@0.5.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-router@0.13.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-router@0.13.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/event-aggregator@0.5.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/event-aggregator@0.5.0." index.js:41:10
"INFO [aurelia] Aurelia Started" index.js:49:10
GET
XHR
http://localhost/navigation-app/dist/app.js [HTTP/1.1 404 Not Found 1ms]
"Unhandled promise rejection" "Error loading "app" at http://localhost/navigation-app/dist/app.js
Not Found: http://localhost/navigation-app/dist/app.js" es6.promise.js:131:12
(ﾟωﾟ)お？ app.jsを置いたら動くのか？
http://aurelia.io/get-started.html
Creating Your First Screen
(ﾟωﾟ)には、app.jsとapp.htmlが書かれてある。コピペしてファイルを作ってみると・・
(ﾟωﾟ)動いた！
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create es6-module-loader.js:7:27734
HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。 navigation-app
"INFO [aurelia] Aurelia Starting" index.js:49:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-binding@0.12.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-binding@0.12.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-resources@0.12.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-resources@0.12.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/history-browser@0.5.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/history-browser@0.5.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/templating-router@0.13.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/templating-router@0.13.0." index.js:41:10
"DEBUG [aurelia] Loading plugin github:aurelia/event-aggregator@0.5.0." index.js:41:10
"DEBUG [aurelia] Configured plugin github:aurelia/event-aggregator@0.5.0." index.js:41:10
"INFO [aurelia] Aurelia Started" index.js:49:10
"DEBUG [templating] importing resources for app.html" Array [ ] index.js:41:10
(ﾟωﾟ) gulp watchを実行すると、distディレクトリが消えるんだけど、
(ﾟωﾟ) [07:27:54] Starting 'clean'
(ﾟωﾟ) が怪しいよね。
root@ubuntu-VirtualBox:~/NetBeansProjects/navigation-app# gulp watch
[07:27:54] Using gulpfile ~/NetBeansProjects/navigation-app/gulpfile.js
[07:27:54] Starting 'build'...
[07:27:54] Starting 'clean'...
[07:27:54] Finished 'clean' after 29 ms
[07:27:54] Starting 'build-system'...
[07:27:54] Starting 'build-html'...
[07:27:54] Finished 'build-html' after 7.51 ms
[07:27:54] Finished 'build-system' after 22 ms
[07:27:54] Finished 'build' after 54 ms
[07:27:54] Starting 'serve'...
[BS] Local URL: http://localhost:9000
[BS] External URL: http://192.168.1.4:9000
[BS] Serving files from: .
[07:27:54] Finished 'serve' after 82 ms
[07:27:54] Starting 'watch'...
[07:27:54] Finished 'watch' after 11 ms
http://aurelia.io/get-started.html
Adding Navigation
Adding a Second Page
Bonus: Creating a Custom Element
Bonus: Leveraging Child Routers
(ﾟωﾟ)この辺りまで、動作確認した。
(ﾟωﾟ)ChildRouterをクリックすると、こんな画面になる。
(ﾟωﾟ)セレクトエレメント、複数セレクトエレメントを使ってみた。
https://github.com/aurelia/documentation/blob/master/Japanese/docs.md#select-elements
