Sublime Text で散らかりがちなMedia Queryをまとめる
スマホ、タブレット用にCSSを書く時、気を抜くとページ内にいくつも書くことになってしまう Media Query。
以前はSassを使ってPC用、SP用のScssファイルを用意して対応しましたが、Sublime Textのパッケージでまとめることが出来たので、メモ。
必要なもの
- SublimeCombineMediaQueries
- group-css-media-queries
SublimeCombineMediaQueries
こちらはPackage Controlにまだないので、Githubから落とします。
ダウンロードしてきたものを解凍し、Packageディレクトリに CombineMediaQueries という名前で設置します。
group-css-media-queries
npmからもってきます。
$ npm install -g group-css-media-queries
インストール出来たらSublime Text を起動して、Preferences: Package Settings > CombineMediaQueries > Settings – Userを開き、自分のnode のパスを記載します。
nodeのパスを確認するのは、ターミナルからわかります。
$ where node /usr/local/bin/node
{
"bin_path" : "/usr/local/bin/node" // 上で調べたパスを記載
}
やってみよう
Media Queryがあちこちに散らばったCSSファイルを開いて、Shift + Control + C を押すと・・・、
// これが
.itemA {
background-color: #f00;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
.itemB {
background-color: #ff0;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
.itemC {
background-color: #f0f;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
// `Shift + Control + C`を押すと・・
.itemA {
background-color: #f00;
}
.itemB {
background-color: #ff0;
}
.itemC {
background-color: #f0f;
}
@media screen and (max-width: 1200px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
@media screen and (max-width: 768px) {
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
a {
display: block;
flex: 0 1 200px;
border: 1px solid #555;
}
}
うん、いい感じ。
でも実際にはSassコンパイルのタイミングで走らせたいから、gulp-combine-media-queriesとか使ってgulpでやったほうがいいかも。
まぁ、ケース・バイ・ケースで使い分けていこうかなぁ。
Mac使いはSpaceキーで決定できるようにすると色々捗る！
久しぶりの更新です。
確認用ダイアログ（「上書きしてもよろしいですか？」みたいなやつ）が出てきて、その都度マウス or トラックパッドで「OK」を選択すると思います。
でもこれって、 - キーボードから手を離さないといけない - 「OK」の場所にポインタを合わせないといけない
というふうに、結構めんどくさいです。
それを、Tabキーで選択して、Spaceキーで決定してしまおうという話。
やること
「システム環境設定」 → 「キーボード」 → 「ショートカット」タブ を開きます。
下の方の、「フルキーボードアクセス」を「すべてコントロール」に変更します。
これだけです。
やってみよう
ダイアログが出ればなんでもいいんですが、今回は拡張子を変えてみましょう。
画像を一つ用意して、拡張子を変えてみてください。 ダイアログが出るので、おもむろにTabキーを押してみましょう。青い枠が動くのがわかると思います。 そして、またまたおもむろにSpaceを押してみましょう。ダイアログにポイントを合わせて選択したのと同じ結果になりましたね？
これでいちいちマウスから手を話す必要がなくなりました。
簡単にできる設定なので、やっていない人はぜひやってみてください。
BLISKというブラウザに心が震えた
現在、夜中の1時だけど、すごいブラウザを見つけてしまい、興奮してこのポストを書いてます。
そのブラウザの名前は BLISK blisk.io
開発をやりやすいように作られているブラウザのようで、実際、かなり便利だと感じている。
何がいいのか、少し紹介します。
ここがすごいよ、BLISK！！！
BLISKのことを知ったのは以下のブログポストからでした。
新しいもの好きの自分としては、これは試してみないとと思い、早速ダウンロード。
の前に、brew で落ちてないか確認してみる。
$ brew cask search blisk ==> Exact match blisk
あった・・・。すげぇな、Homebrew.
なので、インストール。
$ brew cask install blisk ==> Downloading https://bliskcloudstorage.blob.core.windows.net/mac-installers/B curl: (22) The requested URL returned error: 404 The specified blob does not exist. Error: Download failed on Cask 'blisk' with message: Download failed: https://bliskcloudstorage.blob.core.windows.net/mac-installers/BliskInstaller_0.61.2743.166.dmg The incomplete download is cached at /Users/〇〇/Library/Caches/Homebrew/Cask/blisk--0.61.2743.166.dmg.incomplete
あれ？落とせない。どっかでエラー吐いてるみたい。。。 時間があれば調べるけど、試したいだけだから今回は素直にdmgを落としてきます。
アカウント作成を促されるので、一応作っておきます。
まずここに驚いた！
インストールが完了して、立ち上げると早速適当なページを開いてみます。 今回はデベロッパー御用達、はてなブックマークを開きます。
すごくない？
デスクトップとモバイルの表示が同時にできるんです。
しかも片方でスクロールすると、デフォルトでスクロールが連動します。（これは設定で変更可能） しかもしかも、chromeでおなじみのデベロッパーツールも使えます。
ライブリロードも使えるよ！！
今までライブリロードやろうと思ったら、Gulp設定したりなんやかんややらないと出来ませんでした。 BLISKはライブリロードが使えます。
ツールバーの右から3番目、矢印が回転してるアイコンをクリックして設定画面を開きます。 「ADD NEW WATCH」から変更を監視したいディレクトリを選択します。 この時のディレクトリはルートディレクトリを選択してやれば、それ以下にある html,css,js を監視してくれます。（この監視する拡張子は設定可能）
設定したら、選択したディレクトリ配下にあるファイルを変更してみましょう。 この時、以前のファイルから変更がなければ、保存してもリロードしないようになっているみたいです。
どうですか？リロードされました？？すごいですよね？？？
制作にはSassを使ったりして、コンパイルしないと行けない場合も多いので、これがあれば万事OKってことは難しいかもしれないけど、ちょっとした修正でGulpfile書いたりするのめんどくさいなぁという場合にはかなり使えそう！！
スクリーンショット、動画Gifが取れる！シェアできる！！
スクリーンショットが簡単にとれます。 撮りたい画面を選択してやり、ツールバーのカメラアイコンをクリックしてやるだけで、デスクトップかモバイルのスクリーンショットをかんたんに撮ることが出来ます。
取り終えると、BLISKのストレージに保管されて、ボタン一つで簡単にURLをコピーすることが出来ます。 このURLを複数人で共有することもできるので、ちょっとした意見をもらいたいときに便利かも。 （実際にはSlackでもスクリーンショットのコピペができるからどっちが使いやすいかはケースバイケースかなぁ。）
さらにさらに、動画Gifも取れちゃいます！これはブラウザだけじゃなくて、他のアプリの画面も対象になります。 ちょっとしたコードや、スクリプトの動きを確認してもらいたいときに便利だと感じています。
これだけの機能が付いていながら、まだVersion 0.62.4925.237だって言うんだから、今後が益々楽しみです。
とりあえずしばらく使ってみて、なにかあればまたポスト書きます。
いつの間にかAmazonプライムの会員になっていた件・・・。
しかも約一年間も。。 なんでだ・・・。
どういうこと？
事の発端はAmazonで注文をしようと思った時。
以前からAmazonはよく利用していて、1ヵ月に1度はなにかしら購入していた。 kindle Unlimited も入ってるしね。
Amazonプライムの存在は知ってたし、お急ぎ便やプライムビデオが利用できるのはすごく魅力的だった。 しかも年間3,900円だし。
だけど、いまいち踏ん切りがつかなくて、「いつか入ろう」で、2年くらい経過していた。
事件は予約商品を購入するときに起こった・・・
来月発売の商品を予約購入しようと思って、レジに入れた。 ふと、
「プライム会員だったら発売日に届くんじゃねぇ？」
ってなことが頭をよぎって、これはいい機会だと思い、改めてプライム会員になったときのメリットを確認していた。
色々見てみて
「ふむふむ、やっぱりいいじゃん」
と思っていると、「Amazonプライム会員情報を管理する」というリンクが。
「なんだこれ？」
と思いつつ、リンク先を開いてみると会員情報のページが。
左メニューを見ると、
会員登録日: 2015/11/25 会員タイプ: プライム
・ ・・ ・・・ ・・・・えっ？
会員タイプ: プライムってなに？ しかも登録日が 2015/11/25 ってほぼ一年前じゃん？
どのタイミングではいったんだろう・・・？
別に入りたかったからいいんだけど、プライム会員だったら、もっとお急ぎ便とか使いたかったし、見たい映画やドラマもあったのに！！！
とまぁ、幸いにも私は入りたかったのでそんなに気になりませんでしたが、これを見た人できになった人は一度確認されるのをおすすめします。
以下のアカウント設定 > Amazonプライム会員情報の管理を開いて、左メニューの会員タイプで確認できます。 Amazon.co.jp - アカウントサービス
微妙な気分になったというお話でした。。。
デーモン化してるHubotが何故か勝手に落ちてしまう。
Slackと連携させているHubotが何故か勝手に落ちてしまうので、調べてみたのでメモ。
どういうこと？
VPS上にHubotを設置して、Slackと連携させて遊んでました。 デーモン化にはforeverを使っていました。
毎日定期的につぶやいたり、backlogの変更をSlackに通知してくれたり、便利に使っていたのですが、ある日をさかいに勝手に落ちてしまうようになりました。
最初は普通に再起動していたのですが、頻繁に再現するので、調べてみました。
foreverのログを見てみる
$ forever logs info: Logs for running Forever processes data: script logfile data: [0] node_modules/.bin/hubot /home/www/.forever/YABZ.log $ cat /home/www/.forever/YABZ.log [Wed Oct 19 2016 11:19:00 GMT+0900 (JST)] ERROR TypeError: Cannot read property 'name' of undefined at Request.callback (/home/www/hubot/node_modules/superagent/lib/node/index.js:619:12) at /home/www/hubot/node_modules/superagent/lib/node/index.js:795:18 at IncomingMessage.<anonymous> (/home/www/hubot/node_modules/superagent/lib/node/parsers/json.js:16:7) at emitNone (events.js:72:20) at IncomingMessage.emit (events.js:166:7) at endReadableNT (_stream_readable.js:921:12) at nextTickCallbackWith2Args (node.js:442:9) at process._tickCallback (node.js:356:17) error: Forever detected script was killed by signal: SIGKILL
killされちゃってるみたいですね。。。
ググッてみる
ググッてみると同じような症状の人がいるみたい。
error: Forever detected script was killed by signal: SIGKILL - Google 検索
んで、見ていくと、以下のStack Overflowが見つかりました。
なんでも .foreverignore を作れば治るよ。ということなので、早速作ってみた。
$ cd /home/hubot/ $ ls -al drwxrwxr-x 5 www www 4096 10月 24 11:01 2016 . drwx------ 8 www www 4096 10月 24 11:58 2016 .. -rw-r--r-- 1 www www 39 5月 20 06:45 2016 .gitignore -rw-rw-r-- 1 www www 11 9月 2 12:21 2016 .hubot_history -rw-r--r-- 1 www www 24 9月 2 12:16 2016 Procfile -rw-r--r-- 1 www www 7820 9月 2 12:16 2016 README.md drwxrwxr-x 2 www www 4096 9月 23 18:24 2016 bin -rw-rw-r-- 1 www www 186 9月 21 18:05 2016 external-scripts.json drwxrwxr-x 190 www www 4096 10月 24 11:45 2016 node_modules -rw-rw-r-- 1 www www 677 9月 25 21:37 2016 package.json drwxrwxr-x 2 www www 4096 10月 24 11:58 2016 scripts $ touch .foreverignore $ ls -al drwxrwxr-x 5 www www 4096 10月 24 11:01 2016 . drwx------ 8 www www 4096 10月 24 11:58 2016 .. -rw-rw-r-- 1 www www 0 10月 24 11:01 2016 .foreverignore <= 追加されてる -rw-r--r-- 1 www www 39 5月 20 06:45 2016 .gitignore -rw-rw-r-- 1 www www 11 9月 2 12:21 2016 .hubot_history -rw-r--r-- 1 www www 24 9月 2 12:16 2016 Procfile -rw-r--r-- 1 www www 7820 9月 2 12:16 2016 README.md drwxrwxr-x 2 www www 4096 9月 23 18:24 2016 bin -rw-rw-r-- 1 www www 186 9月 21 18:05 2016 external-scripts.json drwxrwxr-x 190 www www 4096 10月 24 11:45 2016 node_modules -rw-rw-r-- 1 www www 677 9月 25 21:37 2016 package.json drwxrwxr-x 2 www www 4096 10月 24 11:58 2016 scripts
まだ追加して１日だけど、logで吐いてたエラーも出てないようだし、うまくいってるっぽい。
これでうまくいくといいけどなぁ。。
鍵認証で入れていたSSHが、ある日は入れなくなったとき
鍵認証で入っていたVPSに入れなくなって、さんざん悩んで解決したのでメモ。
どういうこと？
VPSを借りて、ログインには鍵認証を使ってパスワード入力なしで入っていました。 2~3日ぶりにサーバーにログインしようとしたら、パスワード入力のモーダルが出てきました。 変だなと思ったけど、しょうがないからパスワードを入れても、再度ターミナルからパスワード入力をしないと入れない。ってなことがあった。（伝わるかな？）
やったこと
ssh-agentの確認
「ssh-agentに情報を登録しなおしたら入れるよ」というのをどっかで見たので、やってみた。
$ ssh-add -K {鍵の場所}
$ ssh-add -l
2048 {鍵情報} (RSA) <= 登録されてる
$ ssh {ユーザー}@{URL}
{ユーザー}@{URL}'s password: <= だめ・・・
入れない・・・
パーミッション変更
「パーミッションが正しくないと入れないよ」と言われたので、やってみた。
# ローカル
$ cd .ssh
$ ls -l
-rw------- 1 {ユーザー} staff 1.7K 8 26 18:35 id_rsa
-rw------- 1 {ユーザー} staff 415B 8 26 18:35 id_rsa.pub
うーん、大丈夫っぽい。
# サーバー
$ cd .ssh
$ ls -l
-rw-------. 1 {ユーザー} {ユーザー} 383 9月 5 11:04 authorized_keys
うーん、大丈夫そう・・・。
結局
サーバーの鍵を削除して、ローカルの鍵を登録しなおしました。
# サーバー $ cd .ssh $ vi authorized_keys 該当する記述を削除
これでサーバはOK
# ローカル
$ cd .ssh
$ ssh-copy-id -i id_rsa.pub {ユーザー}@{URL}
/usr/local/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "id_rsa.pub"
/usr/local/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/local/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
{ユーザー}@{URL}'s password:
Number of key(s) added: 1
Now try logging into the machine, with: "ssh '{ユーザー}@{URL}'"
and check to make sure that only the key(s) you wanted were added.
# 入ってみる
$ ssh {ユーザー}@{URL}
[{ユーザー}@{URL} ~]$ <= 入れた！！！
こんなに簡単に入れるなら最初からこうしておけばよかった。。。
残念な時間の使い方をしました。。。
VPSにwordpressを入れたらCentOSのスタート画面しか出てこない時ーー
サーバー移転の際、Wordpressを移したのですが、ドメインを叩いてもCent0Sのスタート画面しか出てこなくて涙が出たので、解決したメモ。
どんなエラーが出るの？
サーバーにSSHで接続してエラーログを見ると、以下のように出る。
Options FollowSymLinks and SymLinksIfOwnerMatch are both off, so the RewriteRule directive is also forbidden due to its similar ability to circumvent directory restrictions
どういうことだ？？？
ググッてみる
ググッてみると同じようなことで解決している記事があったので、そのとおりにやってみる。
なんでも、mod_rewriteを使うディレクトリでは「Options FollowSymLinks」が必要だということらしい。
修正してみよう
.htaccess を修正。
# BEGIN WordPress
<IfModule mod_rewrite.c>
Options FollowSymLinks <= ここを追加
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
ここまでやって再度、ページにアクセスすると、今度は問題なくつながった！
.htaccessの仕組みをもうちょっとわからないといけないなぁ。と思った一日でした。
