生産性アップtips

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

イラレでスライスを速くするスクリプト。quick exporterが便利

イラレで作られたデザインのスライス、psdの5倍時間かかるな、なんとかならねぇのかよ。

と思っていた。

これを見つけた。

quick exporter
http://2-hats.hateblo.jp/entry/2015/07/27/120859

知らなかったよ・・
これを知らずにいままで1個1個切り分けてスライスしてたなんて、おれたちオラウータンじゃないか。 

psdと同じ速度でスライスできる! 

マスクがかかっている画像のスライスを一瞬で。(photoshopのスライススピードアップ)

psdファイルをスライスするとき
「レイヤーに基づく新規スライス」を使うと激的に早くなるよね。

ショートカットを割り当てておくとさらに早くなる。

やりかた http://dis.ne.jp/blog/topics/3035.html 


これ、めちゃめちゃ使うんだけど、1つ困ったことがあって、マスクがかかっている画像は、元画像の大きさにスライスが作られちゃったりして、不便だった。

デザイナーの知人に相談したら
「マスクがかかっていたらレイヤー結合しちゃえばいいよ」

それでした。

選択ツールで画像をクリックして、「あ、マスクかかってるな」と思ったら、その場ですぐに「command+E」(すぐ下のレイヤーと結合)

するとマスクと画像が結合されて、欲しいものができる。

そしてすかさず、レイヤーからスライス作成!!

僕は、alt+command+1 に割り当ててるから、連続技でこれをやると、マスクがかかっている画像も0.7秒でスライスできる。

できる、スライスが。 

【mac】選択したhtmlファイルをsublime textで開くショートカットを作る【Automator】

いやぁずっとね、探してたんですよ。
macでマウスを使わずに、選択したhtmlファイルをsublime textで開く方法を。

3年探した。

僕らみたいな職業だと、htmlファイルってブラウザとエディタ両方で開くじゃないですか。 
どっちかっていうとブラウザで開くほうが多いから、

[command + ↓] ショートカットで開くように設定しておくのは「ブラウザ」になってる。

正確にはchromeになってる。



じゃぁエディタ(僕の場合はsublime text2)で開きたい時にはどうするかって、わざわざ右クリックして、「アプリケーションで開く」>「sublime text2」って選んで開くんだけど、これ、結構しんどいよね。
1日に100回は開くんだから、いちいち右クリックでサブメニューでるの待って、アプリケーションを開くでアプリケーションがズラって出てくるの待ってってやるの、そういう、0.2秒ずつまつみたいなのって以外に脳を使うんだよ。

 
だから、マウスを使わずにキーボードだけで 、できれば1発で開く方法ないかって、探してたんだけどぐぐってもぐぐっても見つからざりぢっと手を見る、ことしかできなかったわけなんだけど、偶然、ほんと全然関係ないことを探してたら偶然みつけた。

その方法とは、

automatorさん!


automatorってソフト知ってる?macにもともと入ってるやつ。
しらない?

しらないなら話が進まないからぐぐってよ。


これを使えば、キーボードから1発でsublime text2 で開くショートカットを作れることがわかったんだ。


そのやり方を英語で紹介している、so coolな記事がある。

http://charles.lescampeurs.org/2012/06/18/right-click-open-with-sublime-text-2

いやー、ミスターブラウン。

キャプチャ写真つきで書いてあるから英語はそんなに読まなくてもいけるよね。

一応手順を書くと

①Automatorをたちあげて、「サービス」を選んで「選択」をクリック
②一番上の「テキスト」になってるプルダウンを「ファイルまたはフォルダ」にする
 その右の「すべてのアプリケーション」を「Finder」にする
③左のバーの中にズララーっと並んでる命令リストの中から「Finder項目を開く」をドラッグして右のあいてるグレーのところにドロップする
④このアプリケーションで開くというのが出現するので「sublime text2」を選択
⑤保存 → 僕は保存名を「OpenSublimeText2」としたぜ。


できたら、Automatorはいったん消してOK。

Finderをひらいて適当なhtmlファイルを選択した状態で右クリックして
サブメニューの一番したの「サービス」っていうのを選択するとさっき作った「OpenSublimeText2」っていうのができてれば成功〜


ミスターブラウンが紹介してるのはここまで。

でも待てよ?待て待て。
右クリックしたくないんだったね。

まだ途中だ。

ここから設定することがある。


■ショートカットでサービスを実行する


つくったサービスにはショートカットを割り当てることができる。

macのシステム環境設定から
キーボード
 →ショートカット
  →サービス

と選んでいくと、ずらーっと並ぶリストの中に「OpenSublimeText2」というのがあると思う。

そいつを選択して「ショートカット追加」ボタンを押すと、ショートカットを設定することができる。


僕の場合はとりあえず

command + F12 

に設定してみたよ。



さぁさぁこれで完成だ!

環境設定は閉じて、Finderを開いて、htmlファイルが選択された状態で、command+F12を、ッターン!!!


ブワっ!!

スパーーン!!

にっこり



※要望があれば、キャプチャとって図でも説明するのでコメント欄などに書いてね。






















sublime text2でテキストを行ごとにpタグで囲む置換(正規表現)

お客さんから原稿をもらって、それをデザインにいれていくとき。
pタグで囲っていくことが多いよね。

午前2時踏切に望遠鏡を担いでいったよね。
背が伸びるにつれて伝えたい事も増えていった。
僕は元気でいるよ 


これを

<p>午前2時踏切に望遠鏡を担いでいったよね。</p>
<p>背が伸びるにつれて伝えたい事も増えていった。</p>
<p>僕は元気でいるよ </p>

こうしたい。

3行くらいだったら手でコピペしながら入れていってもいいけど、これが30行あって、しかも何十ページもあったらいちいちpタグつけていくの大変だ。


正規表現でやろう


やろうやろう。

まずsublime text2を開いた状態で、alt+command+F 
置換の入力エリアがでてくる。

そしたら、正規表現がつかえるようになるボタンをon

一番左の「.*」みたいなやつね。

12

その状態で、検索語(Find What)のところにこれ

^.*$

置換(Replace With)のところにこれ

<p>$0</p>

をそれぞれ入力して、ReplaceAllをクリッククリック!


全行にpタグが入ったね!



何をやってるのか40秒で説明する。

正規表現で「^」は行の先頭「$」は行の終わりって意味だ。

「.*」はあらゆる文字列なんでもーって意味。

つまり「^.*$」というのは行のはじめから終わりまでを探すってこと。


次に置換のところの「$0」というのは、検索のときに「.*」にあたる部分をペーストしてくるみたいな意味がある。

なので、行の初めから終わりまでを取得して、それを<p>と</p>の間にいれますよー。

ということになるんだ!


さぁ、ぐずぐずするんじゃないよ!
 

chromeの要素を検証でスマホモード(device mode)を切り替えるショートカット

51

コーディングしてて、スマホで確認したいとき、まずはchromeのスマホモードで確認するよね?
そうだよね?

26
 
要素の検証をおして左上のスマホみたいなアイコンをクリックしてiphone5とかに切り替えて確認する。

要素の検証を立ち上げるショートカットはよく使うが、その後、スマホモードにするのにいちいちマウスをさわりにいかないといけないのも面倒だったのでショートカットあるのかなって調べたらあった

このデバイスモード(device mode)を切り替えるショートカットは

⌘+shift+M

だから、htmlをブラウザで開いてスマホモードで閲覧するためのショートカットキーの流れは以下のようになる。

①要素を検証をたちあげる
⌘+alt+I



②デバイスモードを切り替える
⌘+shift+M



③リロードする(リロードしないと正しく表示しないことが多いため)
⌘+R


これを素早くできるようになるには訓練が必要だけど、5分もやれば身につけられるだろう。

さぁさっそくyahooにいってこの流れを10回やろう!

もっと強い戦士になるために。


 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ