tips

vscodeの拡張Bookmarks

いやーこれ便利だなぁ、もっと早く知りたかった。
[追記 / 2018/10/05]
なんて事でしょうか
prettierなんかでコードフォーマットを掛かるとブックマーク行がついていって紅………に染まったこの俺をッ!!!
ファイル保存時に発動する自動フォーマットも駄目。
ああああ。。。。

Bookmarks – Visual Studio Marketplace

Available commands
使用可能なコマンド

Bookmarks: Toggle Mark/unmark positions with bookmarks
ブックマーク:ブックマークで位置をマーク/マーク解除する
opt + + cmd + K

Bookmarks: Toggle Labeled Mark labeled bookmarks
ブックマーク:ラベル付きのマーク付きのブックマークを切り替えます。

Bookmarks: Jump to Next Move the cursor forward, to the bookmark below
ブックマーク:次へ進むカーソルを下のブックマークに移動します。
opt + + cmd + L

Bookmarks: Jump to Previous Move the cursor backward, to the bookmark above
ブックマーク:ジャンプする前にカーソルを上のブックマークに移動
opt + + cmd + J

Bookmarks: List List all bookmarks in the current file
ブックマーク:リスト現在のファイル内のすべてのブックマークを一覧表示します。

Bookmarks: List from All Files List all bookmarks from all files
ブックマーク:すべてのファイルからのリストすべてのファイルからすべてのブックマークを一覧表示する

Bookmarks: Clear remove all bookmarks in the current file
ブックマーク:現在のファイル内のすべてのブックマークを消去する

Bookmarks: Clear from All Files remove all bookmarks from all files
ブックマーク:すべてのファイルからクリアすると、すべてのファイルからすべてのブックマークが削除されます。

Bookmarks (Selection): Select Lines Select all lines that contains bookmarks
ブックマーク(選択):行の選択ブックマークを含むすべての行を選択する

Bookmarks (Selection): Expand Selection to Next Expand the selected text to the next bookmark
ブックマーク(選択):選択範囲を次に展開選択したテキストを次のブックマークに展開する
shift + opt + L

Bookmarks (Selection): Expand Selection to Previous Expand the selected text to the previous bookmark
ブックマーク(選択):選択範囲を前へ展開選択したテキストを前のブックマークに展開する
shift + opt + J

Bookmarks (Selection): Shrink Selection Shrink the select text to the Previous/Next bookmark
ブックマーク(選択):選択範囲を縮小選択したテキストを「前へ/次へ」ブックマークに縮小します
shift + opt + K

サイドバーからパネル開くとこんな感じで表示される。

Coda2でCodeKitのKit Languageを編集する際に、Emmetを有効にする方法。

今まで使ってこなかったんですが、CodeKitにはKit languageという簡易テンプレート機能があるみたいなんです。
https://incident57.com/codekit/help.html#kit

参考
CodeKitの新機能「Kit Language」(2012年12月19日)
CodeKitの隠れた秀才「Kit Language」で効率化を図る(2013年03月27日)
CodeKitのKit Language(2014年12月11日)
(随分昔からある機能なんだな…

if文は使えないけど変数は使えて
拡張子.kitの中に.kitファイル(.htmlも可)をimport(include)して保存すれば
合体した.htmlファイルを書き出してくれます。

使いこなせたら便利そうなんだけど、
困ったことに拡張子.kitのファイル中ではemmetがうまいこと展開されない( ´・_・`)

例えば

ul+

をexpand abbreviationすると

とならずに

となってしまい、このままでは使い物にならない。

.kitでもemmetを有効にする

わりと簡単に対応させられました。

/Library/Application Support/Coda 2/Plug-ins/Emmet.codaplugin

を右クリックして[パッケージの内容を表示]

その中の

/Contents/Resources/snippets.json

を開く

下の方に

		"kit": {
		"extends": "html"
	},

を追加

snippets.json

これでおk

ul+を展開して動作確認してみよう。

ついでに.kitに.htmlのカラースキームを適用させる

こちらはcoda2の環境設定から[エディタ>カスタム言語モード]
.kitに.htmlのカラースキーム適用させる

テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。

CodeKitを使ってみた

CodeKitなら、Autoprefixerを簡単に使えるようなので試してみることにした。

codekit

Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。

例えば次の記述は

div{
display:flex;
}

こんな風に変換される。

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
  

今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。

ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら?
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。

Coda2でプラグインを使わずにsassやcompassを使うメモ

[追記 / 2015-10-05]
OSX 10.11 El Capitanにアップデートしたら

sudo gem install sass
sudo gem install compass

なんていつもみたいに風にsassやcompassをインストールしようとすると

Ignoring psych-2.0.8 because its extensions are not built.  Try: gem pristine psych --version 2.0.8
Ignoring json-1.8.1 because its extensions are not built.  Try: gem pristine json --version 1.8.1
ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted - /usr/bin/sass

みたいなこと言われてインストール出来なくなってた。

どうやらRootlessってやつが働いてるからだそうな

OS X 10.11 El CapitanではOS Xの新たなセキュリティ整合性保護機能(SIP: System Integrity Protection)通称”Rootless”が導入されており、例え管理者権限(root)であっても”/System”, “/bin”, “/usr”, “/sbin”ディレクトリにファイルの作成が出来なくなっていますが、Appleは開発者向けにこのRootlessを操作するコマンド”csrutil”を提供しています

OS X 10.11 El Capitanのシステム保護機能「Rootless」を無効にするcsrutilコマンドの使い方。

とりあえず

sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass

と書いてインストール出来た。
[追記 / ここまで]


聞きかじったものをがっちゃんこなので間違えてたりおかしい事してるかも。

sass(scss)だけならプラグイン入れちゃえばすぐ使えるんだけど、まぁ手段が増えるのはいいことです。

Coda2からターミナルをlocalhostで開く

sassを使いたいディレクトリに移動しておく(ちゃんとサイト設定してれば不要

cd "scssとcssフォルダを作成した場所をドラッグ&ドロップ"

アップデート

Rubygemsをアップデート

sudo gem update --system

sassをアップデート

sudo gem update sass

compassをアップデート

sudo gem update compass

バージョン確認

Rubygemsのバージョン確認

gem -v

sassのバージョン確認

sass -v

compassのバージョン確認

compass -v

sassだけで使う

sass --watch input元のパス:output先のパス

compassを使う準備

プロジェクトを作成する。
config.rb(compassの設定ファイル)が無ければ最初に作る

compass create --bare

とりあえずconfig.rbとsassフォルダだけが作られます。

これが基本

compass create

あとはウォッチさせておけばいい

compass w

もしくは

compass watch

参考

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

Compassを使用する準備 | Web制作者のためのSassの教科書 – 公式サポートサイト

Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 – 公式サポートサイト

CSS – 全容をざっくり理解するために、Sass+Compassの覚え書き – Qiita

CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG

app storeのダウンロードバッジ(.svg)を貼るのに手こずった話

appstoreのアプリにリンク貼ろうと
appstoreダウンロードバッジ素材

App Store マーケティングガイドライン – Apple Developer
からダウンロードバッジをダウンロードしてみたところ中身は.svgでした。

お恥ずかしながら.svgて使った事なかったのですが、現在は普通にimgタグに指定すれば表示される様子。

[html]
<img src="Download_on_the_App_Store_JP_135x40.svg" alt="ダウンロード">
[/html]

確かにローカルではこれで大丈夫でした。
で、目的のサーバーにアップロードしてモバイル端末で確認してみると、svgが正方形の枠だけで中身が表示されていない…

.svgの中身を貼り付けたら表示されるけど、cssでのサイズ指定が無視されるようで使いづらい。

どうやらサーバーの設定が原因みたいで、.htaccessに
[text]
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
[/text]
を追加したら無事表示されました。

めでたしめでたし。

ちなみにgoogleplayのダウンロードアイコンはここから作れます。
Google Play Badge Generator | Android Developers

googleplayダウンロードアイコン

[coda2] emmetのexpand abbreviationをtabキーで実行する

[追記あり / 2013-04-12 16:58]
プラグイン>Emmet>Preferences…から変更できるようになってますね!
[image]emmet設定

これどのバージョンから設定できてたんだろう、全然気づかなかった。

html:4tとかhtml:xtとかをexpand abbreviationしたらbodyタグの無いコードが生成されて、おかしいなぁと設定を見てみたら発見したというわけ
そして肝心のbodyタグがなくなる現象の原因は未だ発見できず。
こうゆうのことわざでなんていうんでしょう。

TEA for Codaもインストールしてるから駄目なのかな?

追記

喜び勇んで投稿しちゃったけど、coda2自前のクリップ挿入機能(tabトリガー?)が効かなくなってしまった。
それはそれで困るので以前の状態へ戻す事にしました(´・ω・)

_(アンダーバー)は、host名に使えない文字

[image]mac用host設定アプリ

Macで超簡単にローカルホストを追加・設定する方法として
RedWinder::MacApp::Hosterを使っていましたが
このhosterてば(うちの環境だけなのかよくわからないけど)ディスクのアクセス権を修復する度に起動しなくなってしまうので、なんとかならないかなぁと思っていると
(壊れるといっても設定は消えていないから再インストールするだけで復帰は出来る)

Hostsという無料のアプリがありました
これはhosterと違って使う時に起動させなくても大丈夫
インストールしたらシステム環境設定からホストを追加します
(launchpadに出てこないから上手くインストール出来ないなーと少し焦った

でもって、いままでバーチャルホストの名前を
_example.localhostみたいに
アンダーバー + サイト名.localhost にしていたんだけど
Hostsだとこれが登録できない。

おかしいなぁと調べてみると、元々アンダーバーはホスト名に使用する事が許されていない文字だったそうです。

ホスト名 – Wikipedia

ドメイン名と違い、ホスト名のラベルはASCII文字の’a’から’z’まで(大文字小文字は無視される)と、’0’から’9’の数字そしてハイフンだけを使うことが出来る。
ラベルの最初と最後の文字にハイフンを使うことは出来ない。
ハイフン(そしてラベルの間に打つドット)以外の特殊文字は時に誤って使われるが許容されない。
また、アンダースコアはWindowsで構築されたシステムで一般に使われるが、RFC 952によれば許容されない。

とりあえず全部修正した

クイックルック(QuickLook)で画像サイズを確認出来るようにする

クイックルックてば機能拡張できるんですって!知らんかった。
[追記 / 2016-02-16]
El Capitanな今はこっちを使っちょります。
qlImageSize.pkg
Nyx0uf/qlImageSize: QuickLook plugin to display the dimensions and size of an image in the title bar instead of the filename. Also preview some unsupported formats like WebP.

ダウンロードした.pkgをダブルクリックしてインストールするだけ。
[追記ここまで]

[image]クイックルックに画像サイズ表示

早速、画像サイズを表示させるやつとzipの内容を表示させるヤツをいれてみました。
これ、Coda2にいつの間にか実装されてて便利だなーと思ってた機能だ。

画像のサイズを表示させる拡張 qlImageSize.qlgenerator

Images dimensions in QuickLook • Cocoa in the ShellからダウンロードできるqlImageSize.qlgenerator
libraryの中のQuickLookフォルダにぶち込んでfinderを再度開くと有効になりました

うちはMacintosh HD直下のライブラリの中のQuicklookフォルダに入れました(そこしか見つからなかった)。

zipの中身を表示させるやつ

ZIP: BetterZIP
mountain lionだけど、クイックルックフォルダに入れようとしたらエラー表示された
でも使えてる。

ここにたくさんある

QuickLook Plugins List

うちは使ってないけどcsvを表で表示したり、photoshopのブラシを見れたり、もするようになるみたい。

Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ!

なんでHTMLが大文字でlangはlocaleなんでしょう?
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C(HTML5)の記述はこんな感じだった
[html]<!DOCTYPE html>
<html lang="en-US-x-Hixie">
[/html]
lang属性はなんて書くのがいいんだろう?

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

[html]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

</body>
</html>[/html]
こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。

OS X LionからMacを使い始めた人のメモ[3ヶ月目]

[編集中]
初Macを購入してからそろそろ3ヶ月が過ぎ
やっとこ慣れてきました、Macいいわー。

本当は、購入してからいままで
どんな設定をして何をインストールしたかなんてのを
あーだこーだ壁にぶつかる度にメモを残したかったのだけれど
時間がない事を理由にやってこんかった。

そしたらもうほどんど何をしてきたのか忘れてるので
慌ててメモっていきたいと思います。

設定(順不同)

ファンクションキーを使えるように

[システム環境設定 – キーボード]から
標準のファンクションキーとして使用にチェックを入れた
[image]システム環境設定 - キーボード

ライブラリを表示させる

Finderの移動をoption押しながら開くとライブラリが見える、それをよく使う項目にドラッグしておいた。
参考 / [N] 「Mac OS X Lion」ユーザライブラリのフォルダを表示する方法2
[image]ライブラリの表示
Application SupportとかFontsとか弄りたい時があるんです。

.htaccessなどをローカルで表示作成出来るようにする

以下のアプリを使うと簡単に設定出来るよ
TinkerTool: Description

こんな感じ
[image]TinkerTool

windowsの alt + tab みたいにウインドウ毎で切り替えたい

macのcommand + TABはアプリケーション毎の切り替えなんですよね。

しかしWindowFlowを使うと
option + TABでalt+tabのように窓を切り替えられるようになりました。
でも今はほとんどMissionControlでやりくりして使わなくなったけど。

基本操作で困ったこと

やりたい事 winでの操作 macでの操作
ファイル名変更(リネーム) F2 enter
ファイルを対象のアプリで開く enter command +↓
プロパティを見る 右クリックからプロパティ command + I
ファイルのカット&ペースト(移動) ctrl + Xして
ctrl + V
command + Cして
command + option + V
スクリーンショット / 画像保存(全画面) shift + command + 3
スクリーンショット / クリップボードにコピー プリントスクリーン shift + command + control + 3
スクリーンショット / 画像保存(選択部分) Snipping Toolを使う shift + command + 4
スクリーンショット / クリップボードにコピー shift + command + control + 4
スクリーンショット(ウインドウ全体) その後にスペースキーを押すと、ウインドウを選択できる。
アプリの終了 ctrl + W command + Q
アプリの強制終了(タスクマネージャー) ctrl + shift + esc(windows7) cmmand+option+esc
入力文字の切り替え command + space

adobeのphotoshopなんかで拡大縮小したい時

command + spaceとやると「入力文字の切り替え」になってしまうが
space(を先に押してから)+ commandすると「入力文字の切り替え」がでてこないよ。

メモリ増設

[image]現在のメモリ

最初のメモリ4GBだと同時に色々やるのがキツかったので、
4GB×2枚セットのメモリをamazonで購入して8GBに増設、
しかしまだまだモッサリ。

どうもMacBook Pro 17インチ Late2011はSandy Bridgeなので、
メモリを16GBまで増設出来るらしい(公式にはmax8GB)。
というわけで8GB×2枚セットが10000円近くまで下がった時にamazonで購入。

16GBすげぇ快適。

8GBに増設する時に、誤ってHDD交換用のドライバーを購入してしまい
メモリ届いたけどMacが開けられん!事態になり
急遽ダイソーの精密ドライバーを買ってきてMacを開けたんだけど
予想以上に使いづらかったので、
16GBに増設する時は何度も確認してちゃんと使える精密ドライバーも一緒に買った。
200円ちょい。


[編集中]