EmmetのBEMフィルターが簡単。
emmet(旧zen-coding)のbemフィルターと言うものがあるらしい。
linuxのコマンドふうに パイプでつなぐみたい。
.media-box>.-img | bem
PhpStormで使ってみようと、環境設定パネルをみると。ありました。
早速チェックを入れて使ってみます。
っと、パイプでつなぎ忘れたのですが、こちらは、パイプで繋がなくても自動でBEM認識みたいです。
こっちのほうが何かと便利そうですね。
投稿者: admin Page 19 of 47
Photoshopの最速の書出し方法って、レイヤーに基づくスライスと思っていたけど、画像アセットだったのか。
最近はWeb界隈はIllustratorを使うことが多いのかな、ずーっとPhotoshopを使うことがなかったのですが(なにかFlashが流行ってた頃がWebでは最盛期だったようなきもする。)
久しぶりに再開っ！ Photoshop、元は写真業の会社にいたこともあり、デジタルの画像処理ソフトで一番触っていかもなのですが、フロントエンドエンジニアとして最近はもっぱらイラレでした。
最近のイラレはアセットパネルへドラッグしてどんどん物を移動して一括でバリエーションも含めて書き出せてとても便利、昔つかっていたスライスには戻れない感じでかなりスムーズに作業ができるようになってきています。
Photoshopはアセットの書出しパネルがなかったので、旧来のスライス切ってからかきだす方法ではつらいなとおもって情報あさっていると画像アセットの生成といのあがあるようなので、使ってみたら便利でした。
使い方
まずは書き出すレイヤーを統合するところから(このあたりはレイヤーに基づくスライスを作るのとほとんど一緒、Photoshopの書出しの肝かなとも思う。
「書き出すパーツを１レイヤーにまとめる。」
ってことをします。ここは、選択ツールで範囲指定でさっとかこって、Cmd + Alt + E (winだと Ctrl + Alt + E )で元のレイヤーを残して統合(残しておくのが味噌)。
そして
そのレイヤーにファイル名をつけます。(png,jpgなど)
そのままファイルメニューにひっそりとある、生成から「画像アセット」を選ぶ。
すると psdファイルのとなりにアセットディレクトリができて、そのなかにレイヤーにつけたファイル名で書き出せます。(これはショートカットはもちろん割り当てたほうが早いです。)
あとレイヤーをいじっててもう一つ便利なのが、右クリックからpngでクイック書出しというものとか、書出し形式ってのもありました。(この辺はもう少し使い込んでみないとなんとも。
ですが、今のところ最速なのは画像アセットの生成っぽいのでしばらく使ってみたいと思います。
まずCustom Post Type UIを利用している場合は、
カスタム投稿タイプにアーカイブページを有効にする。
CPT UIの設定画面で有効にします。
記事一覧ページ
以下のURL及びテンプレートを利用します。
//URL
http://{ドメイン名}/{カスタム投稿のスラッグ名}
//テンプレート名
archive-{カスタム投稿のスラッグ名}.php
(例)カスタム投稿がmenuの場合
//URL
http://{ドメイン名}/menu
//テンプレート名
archive-menu.php
記事詳細ページ
パーマリンク設定は ‘/%postname%’ にした例です。
//URL
http://{ドメイン名}/{カスタム投稿のスラッグ名}/{投稿のスラッグ名}
//テンプレート名
single-{カスタム投稿のスラッグ名}.php
(例)カスタム投稿がmenuの場合
//URL
http://{ドメイン名}/menu/yakiniku
//テンプレート名
single-menu.php
タクソノミー(カテゴリ、タグ)一覧ページ
以下のURL及びテンプレートを利用します。
//URL
http://{ドメイン名}/{カスタム'タクソノミー'のスラッグ名}/タグのスラッグ
//テンプレート名
taxonomy-{カスタム'タクソノミー'のスラッグ名}.php
(例)カスタムタクソノミースラッグmenu_typeの場合
//URL
http://{ドメイン名}/menu_type/meet
//テンプレート名
taxonomy-menu_type.php
sassの@extend でのエラー(SASS記法とおもったら、@mediaの外側は無理みたい。
なぜかエラーがでいて、 みたら@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 でインスペクトを無効化。
５、常時使っていないプラグインの無効化
設定パネルのプラグインからチェックを外す。
６、editor.zero.latency.typing オプションの設定
隠し設定パネルを開く (Cmd + Alt + Shift + / )
Recistoryを選択し、editor.zero.latency.renderingにチェック(私の環境は事前に入れていたか覚えてないが、入っていたデフォルトで入っているのかもしれない。)
７、パンくずリストの非表示
設定パネルの Editor > General > Breadcrumbsのチェックを外す。
８、LiveTemplatesを無効化
設定パネルの Editor > Live Templatesのチェックを外す。
※こちらやっぱり無いと不便だったのであとでチェックいれなおしました。
9、普段使わないウィンドウのタブを非表示にする。
ウィンドウの横や、下などにあるウィンドウを開くタブを非表示に(右クリックして、Remove from sidebarを選択
10、windowのランス関係の設定
設定パネルから、なにかCPU食いそうなものを無効に
カスタムVMオプションの追加
少し軽快になった気がします。
計測などはしていないので、個人的な感覚値なのですが、
４、インスペクトをすべて無効化
が効果があったような気がします。
基本的なタイピングでは問題無いレベルになりました。
欲を言うとDash(スニペットアプリ)での自動で入力する際に少しだけ遅れる感じをどうにかしたいのですが、どうしても遅れがある状態です。
なにか他にも、情報あれば教えて頂けると助かります。m(_ _)m
お名前.comとさくらVPSでIPV6を有効にしてみた。
まずはお名前.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:
>
反映されていることを確認。
続いてさくらVPSのipv6を有効化する。
サポートページに手順がのっているのでそのまま勧める。
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キーを押しながら↓キー(又は↑)を押すと範囲を選択できます。マウスでびょ〜んと選択してもよいんですがね。
マウスまで手を移動させる時間も惜しい人向けで、ホームポジションのキーに矢印キーを割り当てて使うのが正な感じです。
シフト押しながらオプションも押しながら左右矢印(Macのみ)
シフト押しながらの応用編、シフト押しながら左右キーおしても良いのですが、カーソルが１つづつしか動かずかったるいです。そこで一つ味付け 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でタブの設定方法
PHPStorm(webstorm)ではタブの設定は言語ごとに細かく設定できます。
Cmd( or Ctrl) + , を押して設定パネルを開いて、検索窓に indent(インデント)など入力します。
今回設定した箇所
- html,scss,php,js : タブからスペース2個
PHPストーム細かく設定できて便利、プロジェクトごとにできるともっと便利だけどできるのかなぁ。
gulpのbrowser-syncで自動リロード環境をつくる。
自動リロードしたくなったのでインストールしました。
npmインストール(※ gulpのオプションつき)
% npm install browser-sync gulp --save-dev
browserSyncをrequire()に追加
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]);
});
gulpを使って、frontnoteでスタイルガイドを作ってみる。
まずは普通に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フォルダ以下に出力されてようです。
- ディレクトリ直下にスタイルガイドのHTML
- assets以下にCSSなどの関連ファイル
% 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;
}
}