なぜかエラーがでいて、 みたら@mediaの外側はダメらしい。><
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .ttl-simple" on line 965 of sass/main.sass on line 90 of sass/main.sass
[追記] ※解決しました。重くなるタイミングなどしらべていくと、マルチバイトの文字が増えるx4Kディスプレイつかっているときに多い。
まず、Cmd + Shift + A で検索ウィンドウをだす。
switchと入力してSwitch IDE boot JDKを選ぶ、
1.8.0_152から、1.8.0_131に変更(決定して)再起動。
これで現在は重くなることがなくなったようですしばらくつかってみます。
PHPStromがまたもっさりしてきて使いモンにならなくなってきた。
特に、Dashを使ってスニペットを挿入する場合などが酷くて、コーディングがつらすぎる状態。。(涙
(※設定がすべてきえるので、メニューの File > Export Settings しておくといい)
以下のファイルを削除して再起動してInport Settingsで読み込む
~/Library/Preferences/PHPStorm**
メニューのヘルプから設定可能です。
設定値変更前。
-Xms128m
-Xmx750m
-XX:ReservedCodeCacheSize=240m
変更後
-Xms512m
-Xmx2048m
-XX:ReservedCodeCacheSize=480m
以下のページを参考させてもらいました。
PhpStormのメモリ使用量を増やして高速化
http://www.karakaram.com/phpstorm6-memory-size-up
Xms
起動時のヒープサイズ。起動時のメモリ割り当て数。
Xmx
最大ヒープサイズ。この値までヒープは拡大する。Xms と同じ値にするとヒープサイズ調整時のオーバーヘッドがなくなり、パフォーマンスが向上することがある。
XX:MaxPermSize
クラスファイルをメモリ上にロードするための領域として使用される。一般にこれらの値が小さいとGCが頻発するので大きめに設定する。
ReservedCodeCacheSize
予約コードキャッシュサイズ。実は、何に使っているかよく分からない。
メニューから Invalidate Caches / Restartを選んで再起動。
設定パネルのEditor > Inspections でインスペクトを無効化。
設定パネルのプラグインからチェックを外す。
隠し設定パネルを開く (Cmd + Alt + Shift + / )
Recistoryを選択し、editor.zero.latency.renderingにチェック(私の環境は事前に入れていたか覚えてないが、入っていたデフォルトで入っているのかもしれない。)
設定パネルの Editor > General > Breadcrumbsのチェックを外す。
設定パネルの Editor > Live Templatesのチェックを外す。
※こちらやっぱり無いと不便だったのであとでチェックいれなおしました。
ウィンドウの横や、下などにあるウィンドウを開くタブを非表示に(右クリックして、Remove from sidebarを選択
設定パネルから、なにかCPU食いそうなものを無効に
計測などはしていないので、個人的な感覚値なのですが、
４、インスペクトをすべて無効化
が効果があったような気がします。
基本的なタイピングでは問題無いレベルになりました。
欲を言うとDash(スニペットアプリ)での自動で入力する際に少しだけ遅れる感じをどうにかしたいのですが、どうしても遅れがある状態です。
なにか他にも、情報あれば教えて頂けると助かります。m(_ _)m
まずはお名前.comのDNSレコード設定でipv6のレコードを追加。
メニューのDNS関連機能の設定をえらぶ。
変更したいドメインを選んで次へ。
DNSレコード設定の箇所の[変更する]ボタンを押す。
追加の箇所で、TYPEで、AAAA(ipv6)を選んで、VALUEにipv6のアドレスを入力して追加ボタンをおす。
その後は、確認画面へ進んで確認ごに設定して完了。
ここからは少し反映まち。
% nslookup
> set type=AAAA
> yama-lab.com
Server: 8.8.8.8
Address: 8.8.8.8#53
Non-authoritative answer:
yama-lab.com has AAAA address 2001:e42:102:1801:160:16:199:118
Authoritative answers can be found from:
>
反映されていることを確認。
サポートページに手順がのっているのでそのまま勧める。
IPv6有効化手順(CentOS7)
https://help.sakura.ad.jp/hc/ja/articles/115000065981-IPv6%E6%9C%89%E5%8A%B9%E5%8C%96%E6%89%8B%E9%A0%86-CentOS7-
設定が終わったので確認
% ping6 yama-lab.com
PING6(56=40+8+8 bytes) 2409:252:90a0:1800:79e4:8629:868c:20a6 --> 2001:e42:102:1801:160:16:199:118
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=0 hlim=53 time=35.822 ms
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=1 hlim=53 time=32.799 ms
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=2 hlim=53 time=32.887 ms
ブラウザのコンソールでも確認
無事もんだいなく。
感覚値では早くなった感じはないけど気分的にははやい感じに
こんにちは、生業としてインターネットのホームページを作ってます。
タイトルの通り、ほんっとコピペ大事、コピペがなければ私は1日36時間くらいあっても全然たりないかとおもって、コピペ縛り作業してみようと考えるだけで吐き気がしてトイレからでられなくなりそうな勢いです。
といろいろ妄想していたのですが、もはやこのPC・デジタル全盛期の自体ではコピペを制するものはビジネスを制すくらい、ビジネスマナーのレベルでの重要なスキルになってきていると思いそのテクニックをいろいろリストアップしてみたいと思います。
Mac : Cmd + C
Win : Ctrl + C
でコピーして
Mac : Cmd + V
Win : Ctrl + V
で貼り付ける。
これも結構メジャーでよく使うんですが、テキスト、ワープロ、ファイル一覧などですべてを制する(選択)することができます。
Mac : Cmd + A からの Cmd + C
Win : Ctrl + A からの Ctrl + C
これは意外と私は頻繁につかう、カット
使い所は、カットして貼り付けることで’移動’ができる所。
Windowsでは、ファイル自体の移動でも便利
Mac : Cmd + X
Win : Ctrl + X
また、Macでファイルの移動の場合は、普通にコピーして以下のコマンド。
ポイントとしては、親指の第一関節くらいでCmd+Optを抑えてやる。
Cmd+Opt+V
エディタや、ワープロ、ファイル名など様々なケースで使えますが。
ダブルクリックで単語を選択してからのコピーのあわせ技。
略して。‘ダブクリコピー’
以下のようにダブルクリックをすると、(主に)文節をコピーできます。※1(、。などで区切られている範囲)
※1 エディタ等によっては、日本語の単語を選択したり、全角部分はまとめて選択したりします。
あとは英単語は普通は単語単語でスペースが空くので単語の選択になります。
またプログラムなどのキャメルケースとか、スネーク;ケースとか、チェインケースとか。
キャメルケース
スネークケース
チェインケース
※パスワード通知とか、よくパスワードのお知らせで、
パスワード：hogehoge
とか来るけど。「：」が全角なので、ダブルクリックで選択できずに「クソっ！」ってなる。
絶対に外せない商談とかだと。「：」コロンを半角にしてパスワードもダブルクリックで簡単にコピペできるようにしましょう(嘘)
余談。 ダブルクリックで区切りとして認識されるのはどこだ。
3gEjd.Kx-W=j/vaB_oA`tnP+ypfdGX
軒並みアンダースコア(_)以外は区切りと認識、いま書いているエディタ( Byword)では、ドットも区切りとして認識しなかったは以外。
なんだよそれっギャグっぽくおもわれる事も多々ですが、れっきとした選択技法です。環境にもよりますがクリックしたその行全部を選択してくれます。
あとweb上ではトリプルクリックをするとそのブロック全体をコピーできます。(細かい話をすると実は１行で折り返しているだけですが。)
コピー開始(or終了)位置にカーソルをあわせてShiftキーを押しながら↓キー(又は↑)を押すと範囲を選択できます。マウスでびょ〜んと選択してもよいんですがね。
マウスまで手を移動させる時間も惜しい人向けで、ホームポジションのキーに矢印キーを割り当てて使うのが正な感じです。
シフト押しながらの応用編、シフト押しながら左右キーおしても良いのですが、カーソルが１つづつしか動かずかったるいです。そこで一つ味付け Shift + Opt + →(or ←)と選択してみると、単語や文節区切りでジャンプしてくれます。(エディタによりけり。)
前項に続きホームポジションのキーに矢印キーを割り当てて使うのが○な感じです。
もうこれはコピペといえるのかいえないのか、ですが、スニペットツールです。
私はMacでDashというアプリをつかっています。Windowsだと、PhraseExpressというものなどあるみたい。
プログラムだと、よくDRY(Dont Repead Yourself)など良く言いますが、基本数回つかいそうなものはすべて登録しておいていつでも、どのソフトでもすぐ呼び出せるツールです。
メールの定型文や、ソフトのテンプレートなどいろいろありますが、ソフトを飛び越えて使えるのが○です。
このブログでもよく使う文節を登録しました。
住所とか、名前、カナ、Emalなどすべて登録してしまいましょう。(会員登録とかすごい楽。)
htmlコードの雛形とか長い文章でもOK
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="xxx" />
<meta property="og:type" content="website">
<meta property="og:url" content="xxx">
<meta property="og:image" content="xxx">
<meta property="og:site_name" content="xxx">
<meta property="og:description" content="xxx">
<meta property="fb:app_id" content="xxx" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@xxx">
<meta name="twitter:title" content="xxx">
<meta name="twitter:description" content="xxx">
<meta name="twitter:image" content="xxx">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="/css/lib.css"/>
<link type="text/css" rel="stylesheet" href="/css/main.css"/>
</head>
<body>
<script src="/js/lib.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
コピペ禁止とか言われたら生きていけなさそうです。
(スニペットツールとかを使ったら、ソフトを通しているから、コピペではなく登録だと言い張り呼び出しは挿入であってペーストでないと反論もできそうですが。。)
PHPStorm(webstorm)ではタブの設定は言語ごとに細かく設定できます。
Cmd( or Ctrl) + , を押して設定パネルを開いて、検索窓に indent(インデント)など入力します。
PHPストーム細かく設定できて便利、プロジェクトごとにできるともっと便利だけどできるのかなぁ。
自動リロードしたくなったのでインストールしました。
% npm install browser-sync gulp --save-dev
browserSync.initの proxyオプションは開くアプリケーションのサーバーのURL(今回は192.168.0.17)を指定しています。
var gulp = require( 'gulp' ),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create();
gulp.task('sass',function(){
gulp.src('sass/**/*.sass')
.pipe(
sass({
sourceComments: 'map',
outputStyle: 'nested'//'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
browserSync.init({proxy: 'http://192.168.0.17/index.html'});
gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});
ここまでで最少の基本的な設定OKな感じ。
ので、コマンドライン引数からSyncするファイルを指定できるようにしました。
コマンドの実行は以下のように-pathオプションを渡してファイルを指定する。
# gulp watch -path 'README.md'
受け取るプログラム側は、‘browserSyncProxy’ という変数を用意して。
-pathのパラメータがあれば後ろに追記する。
ということを冒頭部分に追加。
var gulp = require( 'gulp' ),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
browserSyncProxy = 'http://192.168.0.17/';
if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
browserSyncProxy += encodeURI(process.argv[4]);
}
全体は以下の通り。
var gulp = require( 'gulp' ),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
browserSyncProxy = 'http://192.168.0.17/';
if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
browserSyncProxy += encodeURI(process.argv[4]);
}
gulp.task('sass',function(){
gulp.src('sass/**/*.sass')
.pipe(
sass({
sourceComments: 'map',
outputStyle: 'nested'//'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
browserSync.init({proxy: browserSyncProxy});
gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});
まずは普通にsassがコンパイルできる環境を作って、HTML/CSSがかけるようにする。
(npmのインストールやgulpの基本的なところは省いています m(_ _)m)
frontnote ( https://github.com/frontainer/frontnote)
% npm install --save-dev gulp-frontnote
gulpfile.jsの編集(docというタスクで登録
コメント最初わからなかったのは、出力されたHTMLが読み込むCSSを、“css: [‘../css/style.css’] ”で指定する必要があること。
out: ‘./_styleguide’,は、出力するHTML一式の保存先のディレクトリ
var frontNote = require('gulp-frontnote');
gulp.task('doc', function() {
gulp.src('sass/**/*.scss')
.pipe(frontNote({
out: './_styleguide',
css: ['../css/style.css']
}));
});
タスクを実行すると、styleguideフォルダ以下に出力されてようです。
% gulp doc
[20:01:15] Using gulpfile ~/htdocs/_template/frontnote_example/gulpfile.js
[20:01:15] Starting 'doc'...
[20:01:15] Finished 'doc' after 6.72 ms
✔ Generated StyleGuide
% find ./_styleguide/
./_styleguide/
./_styleguide//assets
./_styleguide//assets/css
./_styleguide//assets/css/style.css
./_styleguide//assets/fonts
./_styleguide//assets/fonts/fontawesome-webfont.eot
./_styleguide//assets/fonts/fontawesome-webfont.svg
./_styleguide//assets/fonts/fontawesome-webfont.ttf
./_styleguide//assets/fonts/fontawesome-webfont.woff
./_styleguide//assets/fonts/FontAwesome.otf
./_styleguide//assets/images
./_styleguide//assets/images/favicon.ico
./_styleguide//assets/images/frontnote.png
./_styleguide//assets/js
./_styleguide//assets/js/main.js
./_styleguide//assets/js/ripple-effect.js
./_styleguide//assets/lib
./_styleguide//assets/lib/highlight.pack.js
./_styleguide//assets/lib/jquery.js
./_styleguide//assets/lib/jquery.mousewheel.js
./_styleguide//index.html
./_styleguide//sass-style.html
SASSのファイルは以下の用に記載しています。
/*
#overview
The・スタイルガイド
このスタイルガイドは簡単な練習用です。
*/
/*
#colors
@メインカラー #996600
@キーカラー #333
@アクセントカラー #ccc
*/
html{
font-size: 10px;
}
body{
font-size: 1.4rem;
}
/*
#styleguide
ボタンスタイル
.btnです。
```
<a class="btn" href="#">ボタン</a>
```
*/
.btn{
display: inline-block;
border: solid 1px #ccc;
background: #999;
padding: 1em;
border-radius: 3px;
text-decoration: none;
color: #fff;
a{
text-decoration: none;
color: #fff;
}
}
全部はいってますが、必要分を削って使っています。
GitHub : TakamoriYamashiro/mygitignore
#---------------- About files
*.log
*.sql
*.sqlite
#---------------- OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
#---------------- npm specific files
# package.json
# gulpfile.js
package-lock.json
node_modules/
#---------------- bower specific files
# bower.json
bower_components/
#---------------- Apache specific files
.htaccess
.htpasswd
#---------------- WordPress specific files
**/wp-config.php
**/wp-content/uploads
**/wp-content/themes/twenty*
**/wp-content/backup-db
**/wp-content/backups
**/wp-content/cache
**/wp-content/upgrade
**/wp-content/uploads
**/wp-content/wp-cache-config.php
**/wp-content/plugins/hello.php
#---------------- CakePHP specific files
/config/app.php
/config/.env
/tmp/*
/logs/*
/tmp/*
/vendor/*
#---------------- Tool specific files
*~ # vim
*.swp # vim
*.swo # vim
*.sublime-* # sublime text
*.komodoproject
*.tmlanguage.cache # sublime text & textmate
*.tmPreferences.cache # sublime text & textmate
*.stTheme.cache # cache files for sublime text
.settings/* # Eclipse
.idea/* # JetBrains, aka PHPStorm, IntelliJ IDEA
nbproject/* # NetBeans
.vscode # Visual Studio Code
.sass-cache/ # Sass preprocessor
Dash (https://kapeli.com/dash ) に登録していつでもすぐ追加できて便利です。 (このDashは早く買っておけばよかったソフトのトップクラスでおすすめ)
(プロジェクトのパス)/.git/info/exlude
に.gitignoreと同じように記載するだけでできました。
# git ls-files --others --exclude-from=.git/info/exclude
# Lines that start with '#' are comments.
# For a project mostly in C, the following would be a good set of
# exclude patterns (uncomment them if you want to use them):
# *.[oa]
# *~
#************************************** my ignore settings
.gitignore
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
gulpfile.js
package.json
package-lock.json
node_modules/
bower.json
bower_components/
.idea
最近小規模な独自の物流システムを設計しているところなのですが、商品のスキーマがいろいろ変化が多いのでどのように設計していくかを考えています。
作りたいのはこのようなテーブル
先程のテーブルAを次の図のテーブルB,Cように別に分ける。(WordPressの postsとposts_metaのような感じ縦持ちと呼ぶのは知らなかった。><)
テーブルBは基本的な情報のみ
テーブルCはメタ情報を記録
また情報が増えた場合は以下の用に増えても問題がない。
もう一つの問題は、スキーマの変更をどうやって管理していくか。
勝手にデータを追加していっても良いのですが、データの正規化のためのバリデーションルールなどを管理画面から操作していくために。
productsテーブルにはどのようなメタデータがあるかを何処かで定義しないといけません。
幾つか思いつく方法としては、
などが思いつきましたが、Aの方法はバックアップなど、管理も大変なのでNG。
Bのモデルのプログラムに記載するは、隠蔽するということで良い面もありそうだけど今回は、運営の担当者レベルで、管理画面から動的に変更をしたいのでNG。
ということでCのスキーマ用のテーブルに保存する方法を考えて行きたいと思います。
まずは最少な感じだとこんな感じ。(愛称:nicknameと説明:descriptionと追加)
もう少し考えるとお昼は提供可(day_menu)、夜はNG(night_menu)などの1 or 0 みたいな選択肢の場合はどうしよう。
と言った感じで表現できそう。なにか動的フォームの設計のようです。あとはセットメニューに配達範囲(プルダウンのような)の項目を追加をイメージして見ます。
関連するテーブル追加も考えたのですが、READで負荷がかかるところでないので(管理画面からの操作のみを想定)JSON文字列を突っ込んでます。
(DB正規化を尊重する場合は、scheme_select_optionsなどのテーブル追加なのかどうか?とかも)
まずはデータの全体のイメージはこれ
で、実際のテーブルは以下の通りに定義
とりあえず問題は無いと思うのですが、細かい部分をDBに定義するかプログラム部分に持ってくるかが今後ちょっと検討課題になってきそうです。
Powered by WordPress & Theme by Anders Norén