たねっぱ！ » 拡張機能 https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 Atomのおすすめパッケージ20選！ https://taneppa.net/atom_package/ https://taneppa.net/atom_package/#comments Mon, 10 Apr 2017 03:18:59 +0000 rurippa! https://taneppa.net/?p=3670 Atomには豊富なパッケージが用意されていますので、
便利なものは使っていきましょー！

ぜひご自身にあったパッケージを見つけて使ってみてください〜。

Atomのおすすめパッケージ20選！

日本語化

パッケージ名 説明
japanese-menu メニューなどを日本語化でき ます。
英語が得意じゃない方は必須！

入力関連

パッケージ名 説明
autocomplete-paths 画像などのパスを補完してくれます。
パスを書くときに便利です。
tag HTMLの閉じタグを自動で挿入してくれます。
emmet emmetが使えるようになります。
show-ideographic-space 全角スペースが□で表示され、可視化できるようになります。
全角スペースが残ってしまうミスを未然に防げます。
linter 構文チェックをするためのパッケージ、これだけでは動作しません。
必要な言語のlinterプラグインをインストールすることで使えるようになります。
linter-scss-lint 上で紹介したlinterのscss版。scssの構文チェックをしてくれます。
他にもcss、js、phpなど各種用意されています。

表示関連

パッケージ名 説明
minimap 画面右側にミニマップを表示します。
ソースコード全体が表示され、現在地の把握もできます。
SublimeTextでおなじみのやつです。
minimap-autohide スクロール時はミニマップを表示し、それ以外の時は隠れた状態になります。
highlight-selected ダブルクリックで選択したワードと同じものをハイライトしてくれます。
こちらも、SublimeTextでおなじみのやつです。
pigments 色コード部分に実際の色も表示されるようになり、視覚的にわかるようになります。
このコードって何色だっけ…？とならなくなるので、オススメです！

その他

パッケージ名 説明
file-icons 左側のツリービューのファイル名の横に、アイコンが出るようになります。
ファイル形式が一目でわかりやすいのと、可愛いのでオススメです。笑
Jumpy キーボード操作だけで、画面上（パネル超えも可能）の好きな場所にカーソル移動できます。
atom-beautify ソースコードを整形してくれます。
インデントの幅が広いと感じる場合は、変更もできます。
（私もデフォルトは広く感じたので、一部変更して使っています）
Project Manager よく使うプロジェクトを登録できます。
保存方法は、Packages > Project Manager > Save Project
プロジェクトを開くときは、⌘ + control + P
sync-settings 複数のPCでATOMの設定を引き継ぐためのパッケージ。
別のPCで新たに設定し直すのは手間がかかるので、こういうのを使うと便利です。
※ GitHubのアカウントが必要です。
platformio-ide-terminal Atom上でターミナルが使えるようになります。
同じようなパッケージで「terminal-plus」というがあるのですが、
Atomを最新にすると動かなかったりするので、こちらの方がオススメです。
split-diff ペインを左右分割して、一時ファイルとの差分を表示をしてくれます。

Git

パッケージ名 説明
git-plus Atom上でGitのコマンドが使用できるようになります。
merge-conflicts コンフリクトが発生した箇所を、わかりやすく表示してくれます。

まとめ

どうでしたか？
パッケージを入れすぎると重くなると思いますので、自分にあうものをカスタマイズして、効率アップしていきましょー♪

]]> https://taneppa.net/atom_package/feed/ 0 Dreamweaverのコーディングを楽にする方法 https://taneppa.net/coding01/ https://taneppa.net/coding01/#comments Mon, 02 Jun 2014 09:19:02 +0000 yanoppa! https://taneppa.net/?p=1717

Dreamweaverのコーディングを楽にする方法

こんばんちわ、まーくあっぷえんじにゃぁ4ヶ月弱のやのっぱです。

少しは出来るようになってきたのか、いかに楽をしてコーディングをするかを考える余裕が出来てきたので、そろそろ一度まとめてみようかと思います。


目次


1.ショートカットキーを使う、カスタマイズする


よく使っているショートカットキーを並べてみました。
コピペや保存とかは割愛並べると増えたなぁ…と実感しますねｗ


Shift+Enter <br>
Ctrl+Shift+P <p></p>
Ctrl+B <strong></strong>
Ctrl+G 行へ移動（chromeのデベロッパーツールなどをみて行数移動したいとき重宝）
Ctrl+F 検索・置換
Ctrl+Alt+I 画像挿入
Home 行の先頭へ
End 行の最後へ
Ctrl+Home ページの先頭へ
Ctrl+End ページの最後へ

色々いじってるので、標準はこのくらいかと思います

次は追加したものです、追加の仕方は編集→キーボードショートカットを開いて追加して行けます。

私はほとんどがEmmetになってましたｗ


Ctrl+Shift+Q ソースフォーマットの適用
Ctrl+Q 閉じタグ挿入（閉じタグ挿入プラグイン）
Ctrl+Shift+A Emmet機能(wrap with addreviation)：選択範囲を任意のタグで囲う
Ctrl+Shift+W Emmet機能(toggle comment)：選択範囲をコメントにする
Ctrl+PageUp Emmet機能(previous edit point)前のタグとタグの間へ移動
Ctrl+PageDown Emmet機能(next edit point)次のタグとタグの間へ移動
Alt+下矢印 Emmet機能(select next item)次のプロパティ？へ移動
Alt+上矢印 Emmet機能(select previous item)前のプロパティ？へ移動
Ctrl+E Emmet展開

よく使うものは左手だけで押せるようにしてます。

リストやdivを作るのもショートカットで出来ます。


2.コードヒントのカスタマイズ


Dreamweaverなどのコードヒントはとても助かるのですが、よくwidthと打とうとしてwindow打っちゃうことが多々。。。

windowとかつかわないし！！っということで、コードヒントでまず使わないであろうものを削ったり、並び替えたりしてあるコードヒントに変えてしまいます。


私はカラクリエイトさんのブログでダウンロードできるCodeHintsを使わせていただいてます。


打ち易さが劇的に変わりますので、おためしください。

使い方は、ダウンロードしたCodeHints.xmlをc:>Program Files>Adobe>Adobe Dreamweaver CC>configuration>CodeHintsの中にあるもともとのCodeHints.xmlに上書きするだけです。

心配な方は、もともとの方の拡張子を.bakなどに変更しておくと安全です。


他にも私は使っていませんがCSS3のコードヒント拡張やセレクターコードヒントの拡張などもあります。


3.スニペットを活用する


スニペットというのは、コピペ集のようなものです。

CSSでグラデーションつけるとか、これはまた打つの面倒くさいなぁ。。。と思うようなものを
どんどん登録して置いておける機能です。

使い方は、ウィンドウ>スニペットでスニペットウィンドウを開きます。
ウィンドウ右下の新規スニペットで作成し、適当な名前をつけて、種類を囲むのか挿入なのかを決めて
内容を決めて保存すると使えます。


初めはなんのこっちゃ？抹茶に紅茶ですが、使っていくと便利さに気がつくと思います。

まずは、無理矢理にでも使ってみてください。


4.閉じタグプラグインを使う


マークアップに欠かせないのが閉じタグコメントです。

これがあるのと無いのとで、作業のやりやすさがだいぶ変わってきます。

でも、いちいち打ち込むのも面倒。。。

ということで、拡張してワンタッチで挿入できるようになるプラグインをご紹介します。


End_comment.mxp

コメントを生成して挿入するDreamweaver用の拡張機能を作成しました：KATAC DESIGNER’S BLOG 渕上さん


こちらmxpファイルですので、ExtensionManager CS6は正常にインストールできますが、CCはzxpファイルに変換しないとつかえません。

変換の仕方はExtensionManager CS6を開き、ツールからMXP拡張機能をZXPに変換を選び、End_comment.mxpを置いてあるフォルダへ移動して、End_comment.mxpを選択すると、同じ場所に変換したものを作成してくれます。
変換したEnd_comment.zxpをダブルクリックするとExtensionManager CCが立ち上がり、インストールしてくれます。


5.画像サイズリセット・ハーフプラグインを使う


画像の差し替えや、Retina対応のためサイズを半分にするとき、一つ一つ変更してると面倒ですよね。
面倒くさいのはいやなので、これも一括で変更できる拡張機能を入れます。

とっても便利なので、おすすめします。


この、そう！それが欲しかった！という拡張機能作ってくださったのは、きんくまデザインさんです。

ほんと感謝ですｗ


きんくまデザインさん Dreamweaver 画像の幅と高さをリセットするコマンド


そして、Retina対応に欠かせない画像サイズを半分にするのもご紹介


バシャログさん Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利）


これまた、欲しかった機能です。
ページ内の画像サイズを縦横半分にしてくれます。

すばらしぃ

スマホサイトを作るときは重宝します。


6.Emmet/Zen-Codingを使う


今ではこれがないとコーディングしたくないですねｗ

エメットさんは俺の嫁


使い方を覚えるまではもたもたするかもですが、コーディングの効率が格段に上がります。 まだお使いでない方はためしに使用してみるのもいいと思いますよ。


インストール方法

こちらEmmet公式サイトから使用エディターのダウンロードを選びます。

ダウンロードはこちら

GitHubに飛びますので、右にあるDownload ZIPでダウンロードしてください。
あとはEmmet.zxpをダブルクリックしてExtensionManagerでインストールするだけです。

基本的な使い方

省略されたコマンドを打って展開するとHTMLやCSSがぽぽぃっと吐き出されます。


展開キー Ctrl+E
> の中の
ˆ 一つ戻って
+ 同列
* 掛ける
$ 連番1～
$$ 二桁の連番01～
() グループ化
. Class
# id

これだけあれば大体つかえます。


例えば#Contentsを展開するとdivにidが付いた状態で展開されます。

<div id="Contents"></div>


divの中にpを入れたいときはこんなかんじです。

#Contents>p

<div id="Contents">
  <p></p>
</div>


htmlのテンプレートもでます。

 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>


このテンプレは
!と打って展開するだけで出てきます。
楽ちんすぎる！！

他にも

ul>li*6と打って展開すると

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


と一発ででます。

もう少しいじって
ul>(li>a[href=#]{サンプル$$})*6を展開すると

<ul>
  <li><a href="#">サンプル01</a></li>
  <li><a href="#">サンプル02</a></li>
  <li><a href="#">サンプル03</a></li>
  <li><a href="#">サンプル04</a></li>
  <li><a href="#">サンプル05</a></li>
  <li><a href="#">サンプル06</a></li>
</ul>


と連番も可能です。

imgのsrcを連番にしておくと挿入が一瞬ですし、サイズ違ってても先にご紹介した画像リセットコマンド使えば問題なく使えます。

ul>(li>a>img[src=./images/dummy_img$$.jpg])*6を展開すると

<ul>
  <li><a href=""><img src="./images/dummy_img01.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img02.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
</ul>


途中からもできます。

ul>(li>a>img[src=./images/dummy_img$$@3.jpg])*6、$$の後ろに@3をつけました。

<ul>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img07.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img08.jpg" alt=""></a></li>
</ul>


このように03から連番に出来ます。

私はタグをせこせこ打ちたくないので、全部これで作っちゃいます。
手間っぽいですが、今のところ余程レイアウトがあれこれしてなければ、この方法で作る方が早くなりました。

例えば

!>(hdr#header>.inner>h1.logo{ロゴ}+nav#Gnav>ul.navList.clearfix>(li>a[href=#]{ナビ$})*5)+(#Contents>art.contArt>h2.mainTi{タイトル}t+(sect.contSect$$>h3.sectTit{タイトル}+.sectMain.clearfix>.txtBlock>p.txt{テキスト}^fig.photo>a[href=#]>img)*2)+(ftr#Footer>.inner>small#CopyRight>img)と改行をしないで長々と打ちます。
慣れるとこのくらいなら4～5分かからないで打てます。

展開すると

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id="header">
  <div class="inner">
    <h1 class="logo">ロゴ</h1>
    <nav id="Gnav">
      <ul class="navList clearfix">
        <li><a href="#">ナビ1</a></li>
        <li><a href="#">ナビ2</a></li>
        <li><a href="#">ナビ3</a></li>
        <li><a href="#">ナビ4</a></li>
        <li><a href="#">ナビ5</a></li>
      </ul>
    </nav>
  </div>
</header>
<div id="Contents">
  <article class="contArt">
    <h2 class="mainTi">タイトル</h2>
    <section class="contSect01">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
    <section class="contSect02">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
  </article>
</div>
<footer id="Footer">
  <div class="inner"><small id="CopyRight"><img src="" alt=""></small></div>
</footer>
</body>
</html>


が一瞬で吐き出されます。
あとはテキストや画像を入れて、CSSを書くだけ簡単！

それに閉じタグ忘れなどもなくなります。

構造がややこしくなればなるほど書くことも多くなりがちですが、マウス使わないでさくさく打つだけなので、私はこの方が好きみたいです。

詳しいコマンドはこちら

コーディングは早ければ早いほどよいし、楽にそうできたらいいですよね。

]]> https://taneppa.net/coding01/feed/ 0 Dreamweaverさんと仲良くなれそうな拡張機能とショートカットのお話 https://taneppa.net/dreamweaver_extended/ https://taneppa.net/dreamweaver_extended/#comments Tue, 22 Jan 2013 08:40:22 +0000 yukappa!(INO) https://taneppa.net/?p=68 皆さんは便利機能がた～っぷりなDreamweaverさんと仲良くお仕事してらっしゃいますか？
私は…まだちょっと微妙な距離感を感じています。。。
コーディング作業もまだちょっと自信がないという方におススメの
Dreamweaverと少し仲良くなれそうな拡張機能とショートカットをご紹介いたします。

もう</div>で迷わない！閉じタグコメントを自動生成してくれる拡張機能

今だに入れ忘れてしまったり、いちいち入れるのが面倒だったりする</div>なんかの閉じタグコメント。
なんと自動生成してくれる拡張機能が！さすがですカヤックさん！

コメントを生成して挿入するDreamweaver用の拡張機能を作成しました
(KAYAC DESIGNER’S BLOGさんより)

上記ブログ記事よりEnd_comment.mxpをインストールします
問題なくインストールが完了するとAdobe Extention Managerに拡張機能が追加されます
extention_manager

さっそく使ってみよう！

①Dreamweaverを起動し、閉じタグコメントを挿入したい部分にカーソルを合わせます01

②コマンド(C)→「閉じタグコメントを挿入」をクリック
02

③コメントが挿入されました！　class指定してたので「.main02」と表示されています
03

④ID指定だと「#」が表示されています
04

この拡張機能のおかげでうっかり迷子が減りそうです！
ショートカット登録しておくととっても便利です！！

もうひとつ、基本の機能ですが、ソースをきれいにしてくれる「ソースフォーマットの適用」機能
05
Windowsのデフォルト設定だと「Alt」→「C」→「A」
作業の区切りで押しておくと、いつでもすっきりソースを見ることができますね。
これもショートカット登録しておくととっても便利！

コーディングの際、謎の</div>があったり、フォーマットされていないソースを開くと
まず「うわっ…とっつきにくい…」と思ってしまいますよね。

すっきりしたきれいな机で作業をするように、まずはソースもきれいにして作業していきたいですね(*＾v＾*)

]]> https://taneppa.net/dreamweaver_extended/feed/ 2