Laravel Mix -> Hackers Galore 様編

Posted by muchag | CakePHP 3.x,Library & PlugIn & AddIn,困ったTT |
初回投稿:2018-12-07 (金) 13:31:02 | 最終更新:2018-12-11 (火) 23:13:04

【環境】
CakePHP: 3.6.5
php: 7.3.0 rc6
手順
シンボリックリンク問題対応

シンボリックリンク権限問題 解決のために
シンボリックリンクを作成。


mkdir /media/sf_CakeTest/node_modules
mkdir /var/CakeTest
mkdir /var/CakeTest/node_modules
mount --bind /var/CakeTest/node_modules /media/sf_CakeTest/node_modules
package.json 配置

https://github.com/laravel/laravel/blob/master/package.json
を CakePHP3 のルートディレクトリへ配置。

webroot 内に配置しないように。

私は、直接 Laravel 5.7.15 からコピペした。

インストール

cd /media/sf_CakeTest
yarn install
imagemin

imagemin についての警告が出るので、インストール。


warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".

こちらを解決するために、imagemin をインストール。


yarn add -D imagemin
yarn add v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 14 new dependencies.
info Direct dependencies
└─ imagemin@6.0.0
info All dependencies
├─ @mrmlnc/readdir-enhanced@2.2.1
├─ @nodelib/fs.stat@1.1.3
├─ arrify@1.0.1
├─ call-me-maybe@1.0.1
├─ dir-glob@2.0.0
├─ fast-glob@2.2.4
├─ file-type@8.1.0
├─ glob-to-regexp@0.3.0
├─ globby@8.0.1
├─ ignore@3.3.10
├─ imagemin@6.0.0
├─ merge2@1.2.3
├─ p-pipe@1.2.0
└─ replace-ext@1.0.0
Done in 9.96s.
webpack.mix.js 配置

https://github.com/laravel/laravel/blob/master/webpack.mix.js
を CakePHP3 のルートディレクトリへ配置。

私は、直接 Laravel 5.7.15 からコピペした。

assets ディレクトリ配置
/assets/js/app.js
/assets/sass/app.sass

を配置。

私は、直接 Laravel 5.7.15 からコピペした。

webpack.mix.js 修正

参考サイトのものを基に、自分の環境に合わせて改変。

/webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');


mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('assets/js/app.js', 'webroot/js')
.sass('assets/sass/app.scss', '../assets/build/css')
.sass('assets/sass/self.scss', '../assets/build/css')
.styles([
    'assets/build/css/app.css',
    'assets/build/css/self.css'
    ], 'webroot/css/app.css');
テストコード

参考サイトにはテストコードを記述する件があるけど
Laravel からコピペしてきた、ExampleComponent.vue があるので
テストコードはスキップ。

組み込み
/src/Template/Pages/home.ctp

header 閉じタグ直後に3行追加。


body 閉じタグ直前に2行追加。


webpack 始動

npm run watch

 DONE  Compiled successfully in 8082ms                                                                                                                                                                                                                                                                               15:57:56
                                                                                                                                                                                                                                                                                                                       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.38 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app
表示確認

CakePHP3 のロゴ黒帯下に

Example Component
I’m an example component.

と、ExampleComponent.vue の内容が表示された。

やた~!!

ところが・・・

その後の使い方で 困ったこと が・・・。

webpack.mix.js において
ファイル統合をしようとすると
表示時にデベロッパーツールのコンソールへ謎のエラー、
というか、
コンパイル後の app.js へ、謎の追記がされる。

stack overflow:Uncaught SyntaxError: Invalid or unexpected token in file compiled by Browserify(2016-06-10)
こちらと同じ症状っぽいんだけど、
上記は Elixir 時代のものだし、提示されている方法が Nginx のもので
私の環境は Apache なので、どうしてよいかわからずじまい。

webpack.mix.js

mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('resources/assets/js/app.js', 'webroot/js')
.sass('resources/assets/sass/app.scss', 'webroot/css');

これだと問題ないけど


mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('assets/js/app.js', 'webroot/js')
.sass('assets/sass/app.scss', '../assets/build/css')
.sass('assets/sass/self.scss', '../assets/build/css')
.styles([
    'assets/build/css/app.css',
    'assets/build/css/self.css'
    ], 'webroot/css/app.css');

これだと
コンパイルは無事に通り、ファイルも生成されるけど
Uncaught SyntaxError: Invalid or unexpected token となり
デベロッパーツール上では、app.js に ******************************************** な感じのが表示される。
コンパイル後の app.js ファイルを直接見てもそんな記述はないけど。。。

わかる方がいらしたら、ぜひ情報をください。

試行錯誤
yarn install

yarn install --no-bin-links
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
warning laravel-mix > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 120.15s.
解決1

warning laravel-mix > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

こちらの4行を解決するために

/package.json

へ、下記3行を追記。


"browserslist": [
    "> 1%",
    "last 2 versions"
],

と思ったけど、これでは解決しない。

解決2

こちらは、yarn install 前にはできないので
下記警告が出てから対処。


warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".

こちらを解決するために、imagemin をインストール。


yarn add -D imagemin
npm run watch1

起動してみると


npm run watch

__ snip __

sh: cross-env: コマンドが見つかりません

と怒られた。

解決

teratail:npm run watch時に「sh: 1: cross-env: not found」のエラー発生(2018-04-05)
を参考にして、package.json を、下記の通り編集。

/package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
}


{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
}
npm run watch2

再び、webpack を起動してみると


npm run watch

__ snip __

These dependencies were not found:

* /media/sf_CakeTest/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* /media/sf_CakeTest/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
解決

これは、resources ディレクトリを Laravel からコピペしたため
assets ディレクトリを配置し忘れていた。

npm run watch3

再び、webpack を起動してみると


npm run watch

__ snip __

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
npm rebuild node-sass

Qiita:EC2環境でLaravelのセットアップ中にnode-sassのvenderディレクトリが見つからないと言われたときの対処法(2016-07-21)
を参考に npm rebuild node-sass してみた。


npm rebuild node-sass
npm ERR! path ../node-sass/bin/node-sass
npm ERR! code EROFS
npm ERR! errno -30
npm ERR! syscall symlink
npm ERR! rofs EROFS: read-only file system, symlink '../node-sass/bin/node-sass' -> '/media/sf_CakeTest/node_modules/.bin/node-sass'
npm ERR! rofs Often virtualized file systems, or other file systems
npm ERR! rofs that don't support symlinks, give this error.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T05_28_07_044Z-debug.log
シンボリックリンク権限問題

件の シンボリックリンク権限問題 が出たので


mkdir /var/CakeTest
mkdir /var/CakeTest/node_modules
mount --bind /var/CakeTest/node_modules /media/sf_CakeTest/node_modules
npm rebuild node-sass再

で、もっかい


npm rebuild node-sass

> node-sass@4.10.0 install /media/sf_CakeTest/node_modules/node-sass
> node scripts/install.js

node-sass build Binary found at /media/sf_CakeTest/node_modules/node-sass/vendor/linux-x64-57/binding.node

> node-sass@4.10.0 postinstall /media/sf_CakeTest/node_modules/node-sass
> node scripts/build.js

Binary found at /media/sf_CakeTest/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
node-sass@4.10.0 /media/sf_CakeTest/node_modules/node-sass

それでも vendor ディレクトリは生成されなかった。

npm install node-sass@3.7.0

そこで、
stack overflow:Error: ENOENT: no such file or directory, scandir
に載っていた


npm install node-sass@3.7.0

を実行してみると
大量のログが出たけど
vendor ディレクトリは生成されなかった。

解決?

ここで試しに webpack を起動。


npm run dev

すると、コンパイル完了。

どの時点で、不具合が解消されたか不明。
次回試行まだお預け。

予想

npm rebuild node-sass

こちらで入ってきた node-sass は 4.10.0

そして、3.7.0 を入れたらうまくいったので
4.10.0 の不具合?

参考サイト

Hackers Galore:Using Laravel Mix with CakePHP 3(2018-04-29)

ログ
sh: cross-env: コマンドが見つかりません

npm run watch

> @ watch /media/sf_CakeTest
> npm run development -- --watch


> @ development /media/sf_CakeTest
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

sh: cross-env: コマンドが見つかりません
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional log

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T04_27_40_334Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional log

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T04_27_40_345Z-debug.log
ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

npm run watch

ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                                                              14:16:59

These dependencies were not found:

* /media/sf_CakeTest/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* /media/sf_CakeTest/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install them, you can run: npm install --save /media/sf_CakeTest/resources/assets/js/app.js /media/sf_CakeTest/resources/assets/sass/app.scss                                                                                                                                                                     Asset     Size  Chunks             Chunk Names
/js/app.js  2.76 kB       0  [emitted]  /js/app

ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve '/media/sf_CakeTest/resources/assets/js/app.js' in '/media/sf_CakeTest'
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve '/media/sf_CakeTest/resources/assets/sass/app.scss' in '/media/sf_CakeTest'
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module build failed: Error: ENOENT: no such file or directory, scandir ‘/media/sf_CakeTest/node_modules/node-sass/vendor’

npm run watch

> @ watch /media/sf_CakeTest
> npm run development -- --watch


> @ development /media/sf_CakeTest
> node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

 10% building modules 1/1 modules 0 active
Webpack is watching the files…
                                                                                                                                                                                                                                                                                    95% emitting                             
 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                                                              14:25:46

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18

 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at runLoaders (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:195:19)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:170:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:27:11)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:182:3)
    at NormalModule.build (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:275:15)
    at Compilation.buildModule (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:157:10)
    at moduleFactory.create (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:460:10)
    at factory (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:243:5)
    at applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:94:13)
    at /media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/media/sf_CakeTest/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:272:13)
    at resolver (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:69:10)
    at process.nextTick (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:196:7)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
                                                                                                                                                                                                                                                                                                                     Asset     Size  Chunks                    Chunk Names
/js/app.js  1.39 MB       0  [emitted]  [big]  /js/app

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/assets/sass/app.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at runLoaders (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:195:19)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:170:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:27:11)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:182:3)
    at NormalModule.build (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:275:15)
    at Compilation.buildModule (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:157:10)
    at moduleFactory.create (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:460:10)
    at factory (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:243:5)
    at applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:94:13)
    at /media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/media/sf_CakeTest/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:272:13)
    at resolver (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:69:10)
    at process.nextTick (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:196:7)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Posted by muchag | CakePHP 3.x,Library & PlugIn & AddIn,困ったTT |
初回投稿:2018-12-07 (金) 13:31:02 | 最終更新:2018-12-11 (火) 23:13:04

Moment の isValid() が機能しない

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation

現象

公式ドキュメント:Moment.js Documentation

  1. moment("2010 13",           "YYYY MM").isValid();     // false (not a real month)

こう書いてあるけど、月を3ケタにすると通っちゃう。

しかも挙動がマチマチ。

  1. // 根本的にフォーマットが違っているパターン
  2. moment( '2010 12', 'YYYY-MM' ).isValid() // true
  3. var date = moment( $( '#month' ).val() );
  4. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  5.  
  6. moment( '2010 99', 'YYYY-MM' ).isValid() // false
  7.  
  8. moment( '2010 100', 'YYYY-MM' ).isValid() // true
  9. var date = moment( $( '#month' ).val() );
  10. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  11.  
  12. moment( '2010 129', 'YYYY-MM' ).isValid() // true
  13. var date = moment( $( '#month' ).val() );
  14. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  15.  
  16. moment( '2010 130', 'YYYY-MM' ).isValid() // false
  17.  
  18. // フォーマットは正しいパターン
  19. moment( '2010-100', 'YYYY-MM' ).isValid() // true
  20. var date = moment( $( '#month' ).val() );
  21. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  22. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-10
  23.  
  24. moment( '2010-101', 'YYYY-MM' ).isValid() // true
  25. var date = moment( $( '#month' ).val() );
  26. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  27. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-11
  28.  
  29. moment( '2010-129', 'YYYY-MM' ).isValid() // true
  30. var date = moment( $( '#month' ).val() );
  31. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-05
  32. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-05-09
  33.  
  34. moment( '2010-130', 'YYYY-MM' ).isValid() // false

上記実験結果をまとめると

  • 2ケタ月は 13~99 について false
  • 3ケタ月は 100~129 について true、130~ false
  • フォーマットが異なっているときは、moment オブジェクトとしては認めても、Invalid Date
  • フォーマットが合っているときは、YYYY-DDD として、元日からの総合日数で年月日を算出している模様
    ただし、130日以降は NG

面白くていくつか実験してみたけど、解決策があるので、この辺で。
 

解決策

というか正しい書式。

  1. moment('It is 2012-05-25', 'YYYY-MM-DD').isValid();       // true
  2. moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
  3. moment('2012-05-25',       'YYYY-MM-DD', true).isValid(); // true

第3引数に true を入れると「真面目に」チェックしてくれるみたい。 😎
今のところは正常にバリデーションしてくれてます。

と思ったら嘘だった

と、思ったら、次の日、鯖に上げてみたら true が機能しない。
そして、あれ?っと思ってローカルで再び試したら機能していない。
???
むぅ。。。

困った
Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

pjax(defunkt) -> フォームの値の受け渡し

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-18 (水) 12:44:50 | 最終更新:2015-02-18 (水) 13:33:45

フォームの値の受け渡しについて。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
GET

GET 渡しはすんなりできた。

  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'GET',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [name] => hoge
  5.     [value] => 1
  6. )

 

JSON

dataType を json にしても、結果は同じ。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 

JSONP

dataType を jsonp にすると、2つばかり $_GET の値が増えた。。。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'jsonp',
  6.     container: '#container',
  7. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [callback] => jQuery21309920695357463317_1424227516871
  5.     [name] => hoge
  6.     [value] => 1
  7.     [_] => 1424227516872
  8. )

まぁ、JSON と JSONP のお勉強は今度ということで。 🙄
 

POST
  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'POST',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_POST ); 結果
  2. Array
  3. (
  4. )

$_POST を取得できていない。
そして通信時間が長くなった。

dataType を text にしても、結果は同じ。
 

serialize()

data を serialize() にしても結果は同じ。

  1. var url = 'index.php';
  2. $.pjax({
  3.     url: url,
  4.     type: 'POST',
  5.     data: $( 'form' ).serialize(),
  6.     container: '#container',
  7. });

 

JSON, JSONP

dataType を json にしたら、通信すら行われなくなった。
JSONP にしても、通信は行われない。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 
困った
仕方ないので、今回は GET で対応。

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-18 (水) 12:44:50 | 最終更新:2015-02-18 (水) 13:33:45

ライブラリ -> Moment.js

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-02 (月) 14:20:23 | 最終更新:2015-03-28 (土) 18:31:40

日付関連のライブラリ。

JavaScript は、日付関連の操作が弱いそうで
こちらのライブラリを入れておくと、便利だそうな。

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation
 

解析
バリデーション

moment().isValid();

Validation

  1. moment( 日付文字列, フォーマット ).isValid() // true or false
  2.  
  3. moment( '2015-02', 'YYYY-MM' ).isValid() // true
  4.  
  5. moment( '2015-22', 'YYYY-MM' ).isValid() // false

確かに上記はちゃんと動作するのだけど、ちょっとバグがあるかも?
Moment の isValid() が機能しない

表示
フォーマット

moment().format();
moment().format(String);

Format

  1. moment().format( 'YYYY-MM' );

まぁ、いつも通りの感覚で利用すればよいかと。

タイムスタンプ

タイムスタンプのフォーマット文字列を初めて知ったので、覚書。

  1. // 秒単位(Unix Timestamp)
  2. moment().format( 'X' ); // 1360013296
  3.  
  4. // ミリ秒単位(Unix Millisecond Timestamp)
  5. moment().format( 'x' ); // 1360013296123
計算
  1. // 明日の Moment オブジェクトを取得
  2. moment().add( 'days', 1 );
タイムスタンプ

Moment オブジェクトからタイムスタンプを得ると、文字列として返されているみたい。

上記1日後という計算をタイムスタンプでやろうとしたら、取得できなかった。
キャストしてやることで計算できた。

  1. var today = moment().format( 'x' );
  2.  
  3. var tomorrow = today + 1000 * 60 * 60 * 24; // アウト
  4.  
  5. var tomorrow = parseInt( today ) + 1000 * 60 * 60 * 24; // セーフ
初期化

参考サイトに書いてある初期化。
よく意味がわからない。

でも、実際に使っていて、初期化をしないと代入できないケースに遭遇。

  1. // これだと Invalid になる
  2. tsDatetimeNext = moment( tsDatetimeNext ).add( 'minutes', 1 ).format( 'x' );
  3.  
  4. // こちらはちゃんと代入できる
  5. tsDatetimeNext = moment( tsDatetimeNext, 'x' ).add( 'minutes', 1 ).format( 'x' );
参考サイト

アシアルブログ:JavaScriptで日付を扱うならこれ!「moment.js」

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-02 (月) 14:20:23 | 最終更新:2015-03-28 (土) 18:31:40

DebugKit

Posted by muchag | CakePHP,Library & PlugIn & AddIn,困ったTT |
初回投稿:2011-07-03 (日) 19:49:46 | 最終更新:2011-07-22 (金) 9:39:48

も、もしかして、これは素晴らしいかも。

【環境】
[CakePHP] 1.3.8
DL&インストール

github:cakephp / debug_kit

2011-07-03 現在、1.3.0 が最新版。

DL した cakephp-debug_kit-1.3.0-0-g5db6ec7.zip を解凍して
出てきたフォルダを debug_kit にリネーム。

app/plugins

に配置する。

app_controller.php など利用したいコントローラに

  1. class AppController extends Controller {
  2.  
  3.     public $components = array('DebugKit.Toolbar');
  4.  
  5. }

これで完了。
 

IE との相性

導入してみた途端に IE が吹っ飛んだ。

具体的には debug_kit フォルダを
app/plugins
に放り込んで IE を F5 で更新したら
IE がクラッシュし、無言で消えた。

IE を起動して、再度アドレスを入れてみたら
無事に DebugKit が機能したので
これでいけるかもしれないけど
しばらく様子見。

こんな記事も発見した。
趣味の延長線:DebugKit+IEでのエラー緩和

上記を参考に

app/plugins/debug_kit/webroot/js/js_debug_toolbar.js
  1. var clickedEl = event.target;
  2. var clickedEl = event.target || event.srcElement;
  1. event.preventDefault();
  2. if (event.preventDefault) {
  3.     event.preventDefault();
  4. } else {
  5.     // IE
  6.     event.returnValue = false;
  7. }

と書き換えてみたが、直ったかどうかよくわからない。
 

アクション名が・・・

上述の如くパッチを当てたが、ログインアクションで不思議な現象が起こった。

users_controller.php の login アクションにてログインを処理をしているのだが
突然不具合が出た。

エラーメッセージを見ると

Missing Method in UsersController
Error: The action : is not defined in controller UsersController
Error: Create UsersController:::() in file: app\controllers\users_controller.php.


Notice: If you want to customize this error message, create app\views\errors\missing_action.ctp

アクション名 : (コロン)って・・・。

そら ctp ファイルもないでしょうよ・・・。

Firefox では問題ない。

ログイン後に元見ていたページへ飛ばす仕組みになっている。

早速 DebugKit で元ページのアドレスを見ると(何か皮肉な・・・
IE のときだけ末尾に /:/ が追加されている。

原因はわかったけど、直し方が・・・わから~にゃい!
 
参考元サイト:cakephperの日記(CakePHP, MongoDB) 超便利なDebugkitを画面キャプチャ付きで解説

Posted by muchag | CakePHP,Library & PlugIn & AddIn,困ったTT |
初回投稿:2011-07-03 (日) 19:49:46 | 最終更新:2011-07-22 (金) 9:39:48

DISTINCT

Posted by muchag | CakePHP,困ったTT |
初回投稿:2011-06-29 (水) 23:03:22 | 最終更新:2011-06-30 (木) 19:57:49

DISTINCT の使い方が難しい・・・。

【環境】
[CakePHP] 1.3.10
[MySQL] 5.1.41
機能

DISTINCT キーワードはカラム内の重複データを1つにまとめてくれるもの。

  1. SELECET DISTINCT family_name FROM users

とすると、同じ苗字のユーザがまとめられる。

その後集計を必要とするなら GROUP BY 句を用いるべき。

詳細は解説サイト参照。
 

基本

CakePHP で DISTINCT を利用するには
find メソッドで第2引数に設定する $options の ‘fields’ に設定する。

  1. $options = array(
  2.     'fields' => array(
  3.         'DISTINCT User.family_name'
  4.     )
  5. );

 

注意点
大文字で記述

DISTINCT キーワード自体は 全て大文字 で記述する。

Distinct と小文字で記述すると

SQL Error: 1054: Unknown column ‘Distinct User.family_name’ in ‘field list’

というエラーメッセージが出た。

参考元サイト:cakephperの日記 cakeのSQLでDISTINCTを扱う
 

先頭に記述

マニュアルを見ると

  1. array(
  2.     /* snip */
  3.     'fields' => array('Model.field1', 'DISTINCT Model.field2'), //フィールド名の配列
  4.     /* snip */
  5. )

The CakePHP 1.3 Book:3.7.3.1 find
と書いてあるが
ちょびろぐ:findでDISTINCTを使う際に注意すること
に書いてあるように、DISTINCT を 先頭 に設定しないと

SQL Error: 1064: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘DISTINCT `User`.`family_name` FROM `users` AS `User`

というエラーメッセージが出る。
 

アソシエーション

DISTINCT を利用したいモデルにアソシエーションを設定しているときは
‘recursive’ = -1 を設定しないと重複をまとめてくれない。

具体的に試した内容は
User モデルに $hasMany プロパティを設定した状態ではNGだった。

‘recursive’ = -1 を設定したら希望通りに重複レコードをまとめてくれた。
 

複数カラムを取得できない

上述注意点を全てクリアしたものの、単一カラムは取得できても
複数カラムを設定するとエラーにはならなくても、まとめてくれない。

未解決。

Posted by muchag | CakePHP,困ったTT |
初回投稿:2011-06-29 (水) 23:03:22 | 最終更新:2011-06-30 (木) 19:57:49

1つ目のテキストの位置がずれる

Posted by muchag | Android,困ったTT |
初回投稿:2011-04-18 (月) 15:22:27 | 最終更新:2011-04-18 (月) 15:24:59

またまたわけのわからない現象が・・・。 🙄

RadioButton & RadioGroup
スクリプトでラジオボタンを配置しようとサンプルを作っていたら
1つ目のラジオボタンだけテキストの位置がずれる。

 
順番を入れ替えても
やはり1つ目のテキストの位置がずれる。

 

main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:id="@+id/llMain"
  4.    android:orientation="vertical"
  5.    android:layout_width="fill_parent"
  6.    android:layout_height="fill_parent"
  7.    >
  8. </LinearLayout>

 

Acha.java
  1. package com.example.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.ViewGroup;
  6. import android.widget.LinearLayout;
  7. import android.widget.RadioButton;
  8. import android.widget.RadioGroup;
  9.  
  10. public class Acha extends Activity {
  11.     /** Called when the activity is first created. */
  12.     @Override
  13.     public void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.main);
  16.        
  17.         LinearLayout llMain = (LinearLayout) findViewById(R.id.llMain);
  18.        
  19.         RadioGroup rg = new RadioGroup(this);
  20.         llMain.addView(rg, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT) );
  21.        
  22.         RadioButton rbA = new RadioButton(this);
  23.         rbA.setText("A");
  24.         rg.addView(rbA);
  25.        
  26.         RadioButton rbB = new RadioButton(this);
  27.         rbB.setText("B");
  28.         rg.addView(rbB);
  29.        
  30.     }
  31. }

グーグル先生におうかがいを立てても
上手くヒットしない。

たまにエミュレータの画面のサイズ?解像度?が
突然変わることがあると、エミュレータの再起動で直るんだけど
再起動しても直らない。

何事?

Posted by muchag | Android,困ったTT |
初回投稿:2011-04-18 (月) 15:22:27 | 最終更新:2011-04-18 (月) 15:24:59

setMargins と setPadding の違い

Posted by muchag | Android,困ったTT |
初回投稿:2011-01-22 (土) 17:21:38 | 最終更新:2011-01-22 (土) 17:27:34

setMarginssetPadding の違いは何だろう・・・と思った。

setMargins

ViewGroup.MarginLayoutParams クラスのメソッド。
Android Developers:setMargins

具体的には、以下のサブクラスにて利用。

  • FrameLayout.LayoutParams
  • LinearLayout.LayoutParams
  • RelativeLayout.LayoutParams
  • RadioGroup.LayoutParams
  • TableLayout.LayoutParams
  • TableRow.LayoutParams

具体的な利用法は setMargins 参照。

setPadding

View クラスのメソッド。
Android Developers:setPadding

具体的には Button などの各サブクラスで利用。

差異

で、結局違いは?

LinearLayout などのレイアウトものは setMargins で
レイアウトものの中に配置する View ものは setPadding かと思ったんだけど
あちこちのサイトを見ていると、どうもそうでもないらしい。

実際に私のテスト環境で

  1. LinearLayout layout=new LinearLayout(this);
  2. layout.setPadding(0, 400, 0, 0);

これがちゃんと機能しているし、逆に

  1. ImageButton imagebutton=new ImageButton(this);
  2. imagebutton.setPadding(90, 0, 90, 0);

これが機能しない。

LayoutParams クラスを通すか否かの差?

最初は、LinearLayout などのレイアウトものは setPadding で
レイアウトものの中に配置する View ものは setMargins かと思ったんだけど
そうでもないみたい。

宿題・・・。

Posted by muchag | Android,困ったTT |
初回投稿:2011-01-22 (土) 17:21:38 | 最終更新:2011-01-22 (土) 17:27:34

Flash Builder 4 -> 新規プロジェクトの立ち上げ

Posted by muchag | Flash Builder 4,困ったTT |
初回投稿:2010-07-06 (火) 19:58:10 | 最終更新:2010-07-25 (日) 2:12:46


 
今回はFlexプロジェクトを作成。

新規プロジェクト


[ファイル]-[新規]-[Flex プロジェクト] から作成。

 

ダイアログ1


出てきたダイアログで
プロジェクト名(任意)を入力。

「プロジェクトの場所」つまり保存場所も任意。
私はPHPを使いたいし、ローカルでテストもしたいので
XAMPP内へ配置。

後、「サーバーテクノロジ」も「PHP」を選択。

 

ダイアログ2


「Webルート」と「ルートURL」を入力して
「設定を検証」をクリックすると検証が始まる。

成功すれば
「Web ルートフォルダーとルート URL は有効です。」
というメッセージが出る。

 

ところが、ネットワークPC上のXAMPPを指定したら
「Web サーバーにアクセスできません。サーバーが実行されていないか、Web ルートフォルダーまたはルート URL が無効の可能性があります。」
というメッセージが出た。

うまく情報を調べられなかったので、強引に続行し
プロジェクトを作成して、PHPファイルと接続して
MySQLからデータを取り出してみたら、ちゃんと動いた。
むむむ。

今回は気持ち悪いので、開発PCに新たにXAMPPをインストールしたけど
ネットワーク上のXAMPPが使えないのは、困ったTT

 

ダイアログ3


最後のダイアログはなにもせず
「終了」をポチ。

 
これで
「PHPを利用したい」ときの「Flex プロジェクト」の新規立ち上げ終了。

Posted by muchag | Flash Builder 4,困ったTT |
初回投稿:2010-07-06 (火) 19:58:10 | 最終更新:2010-07-25 (日) 2:12:46

クラスファイル内の文字コードって?

Posted by muchag | PHP,困ったTT |
初回投稿:2008-01-27 (日) 16:59:11 | 最終更新:2010-07-25 (日) 17:47:35

Flash の文字コードが UTF-8 であることと
最近、あちこちで UTF-8 を推奨していることから
最近は、PHP ファイルを UTF-8 で統一するようにしている。

その際

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

は、もちろんのこと

  1. ini_set('mbstring.script_encoding', 'utf-8');
  2. ini_set('default_charset', 'utf-8');
  3. mb_internal_encoding('utf-8');

と、PHP ファイルの先頭に入れてやると
一時的に内部コードを UTF-8 で統一してくれるようなので、上記のようにしている

しかーし!! ここで問題が・・・
せっかく勉強を始めたクラス・・・
にも関わらず、クラスファイル内で print 文を用いると、文字化けする

クラス内のコンストラクタに上記3行を入れてもだめ・・・
なぜだ~TT

だいたい、クラスファイルの呼び出し元の PHP ファイルで文字コードをセットした上で require しているのに
文字コード設定が引き継がれないのが意味不明

Posted by muchag | PHP,困ったTT |
初回投稿:2008-01-27 (日) 16:59:11 | 最終更新:2010-07-25 (日) 17:47:35
次ページへ »