web

2018.10.04

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

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

2017.08.23

今更知るscssのソースマップの存在意義

チームで作業する場合、ソースマップ普通に便利かも。
てか必須かも。

いままでは
1）cssからscssを辿るのはそんなに大変でもない
2）もしSassファイル内での行番号を知りたい時は、ラインコメントを出力すればいい

みたいな感覚でいたんですけど
cssを見ればscssのどこか判ると言っても、20〜30を超える数の.scssを@importしたサイトになると流石に骨（心）が折れるし
ラインコメントなんてのは論外で、例えば改行の仕方が違う人がscssを編集するだけで
gitが反応しまくるので非常に面倒臭いってのが実際。

けれどもソースマップならば！

開発者ツールで直接scssのどこかに書いてあるのかが判るので、使わないより使った方が断然早い。

もし直接cssが見たいようて時は
ブラウザの設定を変更すれば切り替えられるので
安心安心

2017.04.06

google driveの共有アイテムにあるファイルをマイドライブに移す

複数のgoogledriveを一緒に開きたくてodrive（https://www.odrive.com/）とか使ってたんですけど
たまに共有に落ちてこないファイルがあったりして使うの辞めました。

とはいえgoogle driveアプリは共有アイテムを拾ってくれなくて困ったなーって思ってたら
マイドライブに移せばローカルでも開けるんですね。

マイドライブに移したいファイルを選択して、右上のマイドライブに移すアイコンをクリックです

2016.02.03

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+

ul+

をexpand abbreviationすると

<ul>
<li></li>
</ul>

<ul>

</ul>

とならずに

<ul+></ul+>

1	<ul+></ul+>

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

.kitでもemmetを有効にする

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

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

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

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

その中の

/Contents/Resources/snippets.json

1	/Contents/Resources/snippets.json

を開く

下の方に

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

"kit": {

"extends": "html"

を追加

snippets.json

これでおk

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

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

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

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

2016.01.10

こうゆう入力欄て超ユーザービリティ低いんで、やめてもらいたいんですけど。

酷い入力欄

なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。

さらにここは、よくある並びの
[姓名]
[セイメイ]
じゃなく
[姓セイ]
[名メイ]
が1列になってる点もポイント高いんじゃないかって思います。

2015.12.21

CodeKitを使ってみた

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

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

例えば次の記述は



		
		
			
			

			
			div{
display:flex;
}
			
				
					
				
					1
2
3
				
						div{
display:flex;
}

こんな風に変換される。



		
		
			
			

			
			div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
			
				
					
				
					1
2
3
4
5
6
				
						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は自分で編集してターミナルも使う事になりそうだ。

2015.09.28

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

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

sudo gem install sass
sudo gem install compass

1 2	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

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

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

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

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

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

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

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

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

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

アップデート

Rubygemsをアップデート

sudo gem update --system

1	sudo gem update --system

sassをアップデート

sudo gem update sass

1	sudo gem update sass

compassをアップデート

sudo gem update compass

1	sudo gem update compass

バージョン確認

Rubygemsのバージョン確認

gem -v

gem -v

sassのバージョン確認

sass -v

sass -v

compassのバージョン確認

compass -v

1	compass -v

sassだけで使う

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

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

compassを使う準備

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

compass create --bare

1	compass create --bare

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

これが基本

compass create

1	compass create

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

compass w

compass w

もしくは

compass watch

1	compass watch

参考

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

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

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

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

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

12 3 4 5

web

vscodeの拡張Bookmarks

Available commands
使用可能なコマンド

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

今更知るscssのソースマップの存在意義

けれどもソースマップならば！

google driveの共有アイテムにあるファイルをマイドライブに移す

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

.kitでもemmetを有効にする

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

こうゆう入力欄て超ユーザービリティ低いんで、やめてもらいたいんですけど。

CodeKitを使ってみた

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

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

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

アップデート

バージョン確認

sassだけで使う

compassを使う準備

参考

最近の投稿

カテゴリー

Available commands 使用可能なコマンド

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

けれどもソースマップならば！

.kitでもemmetを有効にする

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

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

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

アップデート

バージョン確認

sassだけで使う

compassを使う準備

参考

最近の投稿

よく見られているページ

カテゴリー

Available commands
使用可能なコマンド