tags

[1]
[4]
[1]

Mac OS のMarkdown(マークダウン)エディタ

MacDown(無料) ( M1 , M2 Mac 未対応 ❌ )

http://macdown.uranusjr.com/

Haroopad(無料)

http://pad.haroopress.com/ Windows, Mac, Unix版があります。

● boostnote (無料)( M1 , M2 Mac 未対応 ❌ )

http://boostnote.io

● MarkEdit for Markdown

https://apps.apple.com/app/id1669953820

● zettlr

https://www.zettlr.com/download/macarm

● MWEB(有料)

http://www.mweb.im

● Marxico(WEBアプリ)

http://marxi.co/ WEBアプリです。ブラウザでアクセスするだけですぐ使えます。

● (GitHub-Flavored) Markdown Editor(WEBアプリ)

http://jbt.github.io/markdown-editor/ こちらもブラウザでアクセスするだけですぐ使えます。


添付ファイル1
添付ファイル2
添付ファイル3
添付ファイル4
atom_t.jpg ( 30.1 KBytes ) ダウンロード
No.54
05/05 07:09

edit

添付ファイル

Markdown

PhpStormやWebStorm導入直後に行った方が良い設定

● PhpStorm や WebStorm の キーボードショートカットをMacの一般的なエディタと同じに変更する

・パスのコピー

パスのコピー : Command + Option + C
相対パスをコピー : Command + Option + Shift + C

・マルチカーソル

ショートカットキー(Mac):(特定文字列を選択してから)Ctrl + G
 ↓
Command + D

・キャレットをテキストの先頭に移動

Command + Fn + 上
 ↓
Command + 上

・キャレットをテキストの最後に移動

Command + Fn + 下
 ↓
Command + 下

・選択状態でキャレットをテキストの先頭に移動

Command + Shift + Fn + 上
 ↓
Command + Shift + 上

・選択状態でキャレットをテキストの最後に移動

Command + Shift + Fn + 下
 ↓
Command + Shift + 下

・行または選択範囲のインデント

Command + ]

・選択範囲のインデント

Command + ]

・選択範囲/行のインデント解除

Command + [

・戻る

Command + Option + 左
 ↓
Option + 左

・次へ

Command + Option + 右
 ↓
Option + 右

・コード補完

Control + space
 ↓
Command + space

・前のタブを選択

Command + option + ←

・次のタブを選択

Command + option + →

● 設定を同期する

● メモリ設定 / メモリ表示

メモリ設定する

ヘルプ → メモリ設定を変更

メモリ表示 / ガベージコレクション

右下を右クリックして表示させます ↓

● IntelliJ系のIDEで「import ...」のように省略されないようにする

「エディタ」→「一般」→「コードの折り畳み」→「インポートのチェックを外す」

● PhpStormのよく使うショートカット

検索系

クラス名で検索     Command + O
ファイル名で検索        Command + Shift + O
ファイルの中身で検索      Command + Shift + F
アクション検索     Command + Shift + A
最近のファイル     Command + E
ファイルを任意のツールで開く      Option + F1
どこでも検索      Shiftダブルプレス
コンテキストアクションの表示      Option + Enter
リファクタリング        Command + Option + Shift + T
宣言に移動       Command + B または Command + Click
コード補完と置換        Tab
選択範囲の拡張     Command+  W
実行      Option + Shift + F10
ライブテンプレートの展開        Tab
複数キャレット     Option + Click
スクラッチファイル       Command + Option + Shift + Insert
メソッド一覧      Command + F12
次(前)のブレース   Command + [ または ]
関連するテストユニットへ移動      Shift + Command + T
イチオシのショートカットとしては
Shift + F6でファイル名やクラス名を参照箇所とともに一括置換
Alt + F7でそのクラスや関数を利用している箇所を一括で検索
がリファクタリングで非常に便利です。

https://bit.ly/3OfOLBf

JavaScriptのプログラミングはこれだけ効率化できる! 使用歴5年目のエンジニアが送るWebStormの厳選神業集 - ICS MEDIA

ウェブ制作にはWebStormがお勧め! 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA

● top-webstorm-plugins-for-javascript

https://www.tabnine.com/blog/top-webstorm-plugins-for-javascript/

皆に絶対知ってほしい Webstorm ショートカット・設定集╭( ・ㅂ・)و


添付ファイル1
sync.png ( 131.2 KBytes ) ダウンロード
添付ファイル2
ss01.png ( 25.5 KBytes ) ダウンロード

Visual Studio Code (vscode) のオススメのショートカット

前に戻る
Option + ←

No.224
08/15 10:53

edit

VS Code の extension を公開する

● vsce コマンドのインストールと公開

npm install -g vsce

● 公開

vsce publish

● アップデート

extension の更新と package.json の バージョンを正しく更新したら

vsce publish

でアップデートできます。

● バージョン番号を自動でアップデート

vsce publish minor

とすると、バージョン「1.2.0」→「1.3.0」として、アップデートします。

major, minor, patch が選択できます。

それぞれバージョン番号の

major.minor.patch

にマッチします。


No.220
01/27 21:30

edit

VS Code で 自動で対応するタグにマルチカーソルが当たらないようにする

● VS Code で 自動で対応するタグにマルチカーソルが当たらないようにする

「設定」→「 MirrorCursor で検索」
対応する HTML タグでカーソルのミラーリングを有効または無効にします

のチェックを外します。


No.219
01/23 10:27

edit

Visual Studio Code で USキーボードを使用する

● Visual Studio Code で USキーボードを使用する

次のように設定します。


添付ファイル1

SublimeTextの設定を Dropbox で共有する

● SublimeTextの設定を Dropbox で共有する

1. Dropbox 上に用意するSublime Textのフォルダ

<ログインユーザー名> のところは適宜読み替えてください

/Users/<ログインユーザー名>/Dropbox/SublimeText/Installed Packages
/Users/<ログインユーザー名>/Dropbox/SublimeText/Packages

2. 既にサブライムテキストを使用中の場合は既存の二つのフォルダをリネームします

( またはこれらの二つのフォルダをドロップボックスに移動させます)

~/Library/"Application Support"/"Sublime Text 3"/"Installed Packages"
~/Library/"Application Support"/"Sublime Text 3"/Packages

3. 使用するMacからDropboxへシンボリックリンクを貼る

 cd ~/Library/"Application Support"/"Sublime Text 3"
/Users/<ログインユーザー名>/Dropbox/SublimeText/"Installed Packages"  "Installed Packages"
/Users/<ログインユーザー名>/Dropbox/SublimeText/Packages

(フォルダ名にスペースを含む場合はダブルクォーテーションでくくります)


No.216
01/05 10:45

edit

Visual Studio Code (vscode) で設定をDropBoxを使って共有する

● Visual Studio Code (vscode) で設定をDropBoxを使って共有する

* 1. Visual Studio Code (vscode)の 次の二つのフォルダをドロップボックスに移動し、 シンボリックリンクを貼ります

Finderから(移動 → フォルダへ移動)を 選択し次のパスを入力しているします。

~/ライブラリ/Application Support/Code/User
~/.vscode/extensions

* 2. 新しいマシンや別のマシンを設定するときは以下のコマンドを実行して、 Dropbox にリンクを貼ります。

ln -s  ~/Dropbox/VisualStudioCode/User  ~/Library/Application\ Support/Code/User
ln -s  ~/Dropbox/VisualStudioCode/extensions  ~/.vscode/extensions

No.215
12/25 09:42

edit

SublimeTextで右クリックメニュー(コンテキストメニュー)をカスタマイズする

● SublimeTextで右クリックメニュー(コンテキストメニュー)をカスタマイズする

SublimeTextで右クリックメニューは 自由にカスタマイズすることができますが、 デフォルトの設定値は隠されています。 そこで 隠されている設定ファイルを表示させるパッケージをインストールします

● PackageResourceViewer

https://packagecontrol.io/packages/PackageResourceViewer

こちらを「command + shift + P 」の「Install Package」 からインストールします。

● 右クリックメニューの設定ファイル Context.sublime-menu を表示させる

Package Rexource Viewer: Open Resource
  ↓
Default
  ↓
Context.sublime-menu

デフォルトの右クリックメニューを表示させます。 ここから変更できます。


No.213
08/27 09:36

edit

Sublime Textで日本語検索を行う

● Sublime Textで日本語検索を行う

Sublime Textはデフォルトでは日本語検索は行えません。
そこで日本語検索が行えるように設定ファイルを書き換えます。

・1. Sublime Textを起動して「Preferences」→「Key Bindings」を開いて左側のウィンドウをコピーする。

・2. Finder から 「移動」→「フォルダへ移動...」して「~/Library/Application Support/Sublime Text 3/Packages/Default」へ移動する。

・3. ファイル「Default (OSX).sublime-keymap」を作成して、先ほどコピーした設定をペーストする

・4. 次の項目の直下3行をコメントアウトする

Find panel key bindings の下3行の { "keys": ["enter"],  ......
Replace panel key bindings の下3行の { "keys": ["enter"],  ......
Incremental find panel key  の下3行の { "keys": ["enter"],  ......


添付ファイル1

Sublime Text の 便利パッケージSFTP を利用する

● SFTPのインストール

[command] + [SHIFT] + [P]  → 「Package Controll : install Package」から SFTPを検索してインストール

● SFTPの使い方

1.プロジェクトにフォルダを追加する

1. Project → Add Folder to Project からフォルダを追加する
2. 追加したフォルダを右クリック「SFTP/FTP」→「Map to remote」
3. sftp-config.json ファイルが開くので、そこに SFTPサーバ情報を記述する(必須の設定項目は ↓ こちら)

sftp-config.json で設定する項目

    "host": "SFTPサーバ名",
    "user": "SFTPユーザー名",
    "port": "SFTPポート番号",
    "remote_path": "リモートサーバのパス",
    "ssh_key_file": "~/.ssh/SSH秘密鍵",
4.  ファイルを編集して保存すると自動的にアップロードが開始されます( 画面下にアップロードの進捗が表示されます。success と一瞬表示されるのでそれを確認してください。failedの場合はエラーが出ています。)
5.  プロジェクトファイルをローカルの好きな場所に保存しておきます。
6.  サイドバーへの移動は「Ctrl」+「0」です。これでキーボードで操作できます。

● SFTPインストール完了時のメッセージ

Package Control Messages
========================

SFTP
----

  Thanks for installing Sublime SFTP! Below are some quick notes to get you
  started with the plugin. Please see https://wbond.net/sublime_packages/sftp for
  the full documentation.

  There are two major modes of operation:
  1. Mapping a local folder to a remote folder
  2. Working off of a server

  Mapping a Local Folder to a Remote Folder
  ----

  To map a local folder to a remote folder, right-click on it in the side bar
  and select the SFTP/SFTP > Map to Remote... You will enter your connection
  parameters and a new file will be created named sftp-config.json.

  Once this file has been saved, all files in that folder and all subfolders
  will have various operations available via the side bar context menu, editor
  context menu and command palette.

  Working off of a Server
  ----

  To work off of a server, use the File menu and select SFTP/FTP > Setup Server...
  You will enter your connection parameters and options then save the file with
  the name you want to give the connection.

  Once the server config is saved, you will be automatically connected to the
  server and you can browse and perform actions via the quick panel.

  Unfortunely due to limitations of the Sublime Text API, it is not possible
  to present the remote filesystem in the side bar. There are, however, key
  bindings for connecting to servers to help reduce the amount of time remote
  file operations take.

  Support
  ----

  To learn more about the features and settings, please visit
  https://wbond.net/sublime_packages/sftp.

  If you are having trouble, please visit
  https://wbond.net/sublime_packages/sftp/support. The support page includes
  instructions for capturing a debug log that will be useful if you believe
  you are experiencing a bug.

No.206
05/07 10:55

edit

Visual Studio Code (vscode) オススメの 拡張

● colonize ( shift + enter )で行末に ; を入れる

https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize

● Jest JavaScript , TypeScript のテスト

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

起動時にテストを自動実行しないようにするには

{
  "jest.autoRun": { "watch": true }
}

● TypeScript Error Translator

TypeScriptエラーを翻訳してくれる
https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

● Auto Import

TypeScript の import を自動で挿入してくれる
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

● Template String Converter

文字列内に ${hoge} のような変数が表れた際に自動的に `(バッククォート) で文字列を囲うように置換する
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

対象ファイルは設定できます

    "template-string-converter.validLanguages": [
        "vue",
        "svelte",
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
    ],

● change-case

ケースを変更する
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

● Search node_modules

node_modules を検索する
https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules

● vscode-input-sequence

連番の数字入力
https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

● Quokka.js

VSCodeで手軽にJavaScript TypeScript を試す
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

● Git Graph

git の更新やブランチの状態を sourcetree.app のように表示します
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

● Rainbow CSV

CSVをカラムごとに色分けします
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

● CSS Navigation

htmlでクラス名を右クリックして「定義へ移動」や「F12」へ cssや scss の該当クラスへジャンプする。
CSSPeek よりおすすめ。

● HTML CSS Support

HTML を記述している時に CSS のサポートを受けることができます
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

● Auto Close Tag

HTML の閉じタグの入力支援
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● Code Spell Checker

スペルミスを防ぎます
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

● zenkaku

全角文字を薄いグレーで表示する
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

● indent-rainbow

インデント階層を色分け
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

● Path Autocomplete

フォルダ名やファイル名のオートコンプ(入力補完を行う)
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

● eCSStractor for VSCode

cssにHTMLタグを貼り付けると CSS セレクターを生成する
https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port

● Auto Close Tag

</ でタグを閉じる

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● FileUtils

左のエクスプローラーツリーから複製(Duplicate)が行えるようになります。

● Remote Development

SSH で接続してリモートサーバーをローカルサーバーのように編集する 監視するファイル数の上限を設定する設定方法 

sudo vi /etc/sysctl.conf
fs.inotify.max_user_watches=524288

↑ 524288 は 最大値です。 任意の数値を設定してください。

Remote Development を使用するときに Watcher Excludeでファイルを除外してリモート開発を高速化する

設定の「Watcher Exclude」に以下を追加します。

(上から4つ目まではデフォルトで設定されています一番下の ** を追加します)

**/.git/objects/**
**/.git/subtree-cache/**
**/node_modules/**
**/.hg/store/**
**

この設定を追加するとファイルを更新したときに、gitの更新されたファイル一覧に自動的にどっちが表示されなくなります。 (その代わりに更新ボタンをいちど押せば表示されるようになります)

● CodeMetrics

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
コードの複雑度(Cyclomatic complexity)などを表示する

● Auto-Align

https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align
自動で揃える文字を判別して揃えてくれます

揃える文字を追加する

    "autoalign.moveableItems": [
        "=>",
        "=",
        ":",
        "+=",
        "-="
    ],

● Log File Highlighter ログファイルを見やすくする

● Regex Previewer 正規表現を確認する

● Favorites お気に入り機能

● file-icons-mac (macライクなアイコン)

● Auto Rename Tag (htmlタグのリネームを便利にする)

● CSS関連

● IntelliSense for CSS class names in HTML

css入力時に ID, CLASS 名を保管する

● Git関連

・Git Lens

誰がいつ編集したかを表示する

・Git History

ログを見やすく表示

vscode-caniuse
gitflow
Git History
Log File Highlighter

● 全角文字を発見する Hightlight

"highlight.regexes": {
  "( )": [
    {
      "backgroundColor": "#d9ad00"
    }
  ],
  "([1234567890])": [
    {
      "backgroundColor": "#d90000",
      "color": "#1f1f1f"
    }
  ]
}

引用 : https://qiita.com/yukishiba/items/ab1d3535f2490cb99d38

参考 : https://dev.to/gsdev/10-vscode-extensions-i-can-t-live-without-1i5c


No.205
10/04 09:20

edit

Sublime Textでインストール済みのパッケージ一覧を表示しそれを別のマシンに自動インストールする

● Sublime Textでインストール済みのパッケージ一覧を表示

Preference > Package Settings > Package Control > Settings - User

このようなファイルになります

{
    "bootstrapped": true,
    "in_process_packages":
    [
    ],
    "installed_packages":
    [
        "Alignment",
        "All Autocomplete",
        "ApacheConf",
        "AutoFileName",
        "Autoprefixer",
        "BetterFindBuffer",
        "Blade Snippets",
        "BracketHighlighter",
        "Case Conversion",
        "Colorsublime",
        "Compare Side-By-Side",
        "CSS3",
        "CSSFontFamily",
        "DotENV",
        "EditorConfig",
        "Emmet",
        "Emmet Css Snippets",
        "ExpandRegion",
        "FileDiffs",
        "FindKeyConflicts",
        "Function Name Display",
        "Git",
        "GitGutter",
        "Goto-CSS-Declaration",
        "Hjson",
        "HTML-CSS-JS Prettify",
        "InputSequence",
        "Package Control",
        "Pretty JSON",
        "Sass",
        "SerializedDataConverter",
        "ShellCommand",
        "SideBarEnhancements",
        "Smart Delete",
        "SqlBeautifier",
        "SublimeCodeIntel",
        "SublimeLinter",
        "SublimeLinter-annotations",
        "SublimeLinter-contrib-sass-lint",
        "SublimeLinter-contrib-sublime-syntax",
        "SublimeLinter-csslint",
        "SublimeLinter-html-tidy",
        "SublimeLinter-phpmd",
        "SublimeNFDToNFCPaste",
        "SublimeOnSaveBuild",
        "W3CValidators"
    ],
    "repositories":
    [
        "https://github.com/kazu1107/InputSequence.git"
    ]
}

● 一覧を元にパッケージを一気に自動インストール

・まず パッケージコントロール をインストールします。

次に
↑ の内容を

/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/User/Package Control.sublime-settings

に上書き保存して、Sublime Text を再起動してしばらく待つと自動的にインストールが始まります。

インストールにはそこそこ時間がかかるので気長に待ちましょう。


No.202
04/21 08:45

edit

WEB制作に欠かせないテキストエディタ Sublime Text とおすすめパッケージ

Sublime Text

https://www.sublimetext.com

・パッケージコントローラーインストール方法

【command + shift + p】 →【install】→【return】
表示されるウィンドウに検索文字列を入力してパッケージ名を選択

● ・Sublime Textおすすめパッケージ

・HTML, css3, プログラムコードコード( SCSS, SASS )編集に便利なSublimeTextパッケージ

(インストール方法: Command + Shift + P を押して「Package Control : Install Packages」を選択し、パッケージ名を入力してインストール。)

パッケージ名 説明 キーバインド・備考
GotoDocumentation 関数のマニュアルを表示します。 Command + Option + D に設定するには以下のようにします。
    { "keys": ["alt+super+d"], "command": "goto_documentation" } ,
CSS3 CSS3のモード
Color Helper 色コードの横に色を表示。+ カラーピッカー。
All Autocomplete htmlに記述した id や class名 をオートコンプリートしてくれる。
Emmet Css Snippets css スニペット
SublimeLinter-csslint CSSの構文チェック 下記オプションを参考
CSSFontFamily cssの font-family: 入力中に先頭文字を打つとフォント名を保管する
Goto-CSS-Declaration HTMLファイルから該当cssクラスへジャンプする
SCSS SCSS編集時にオートコンプリートしてくれる
CSS Comb cssのプロパティを自分の好きな順に並べることができる
Emmet LiveStyle CSS編集を即座にブラウザに反映
SublimeNFDToNFCPaste Macユーザーは必須!!!。PDFやFinderから文字列をコピーペーストした時の濁点などが離れてしまうのを修正する。
BracketHighlighter 行番号の左に対応するカッコを表示する
Emmet HTML入力を支援する div.class と 入力して「TAB」でHTMLタグへ変換します。
「ctrl」+「 ↓ ↑ 」で 10px などの数値を変更します。
HTML-CSS-JS Prettify ( command + shift + H でhtmlソースコードを整形。余分な行末スペースを削除 )
SublimeLinter-html-tidy HTML5の構文チェック インストール前に
brew install tidy-html5
で tidyコマンドをインストールしておくこと
W3CValidators W3CValidators を使って HTML5のバリデーションが一撃で行える command + control + v
Hayaku css入力をショートカットできる。「fl」→「 command + E 」→「float: left;」となる
AutoFileName ファイル挿入ヘルパー。また width image も自動でセットする
autoprefixer cssのベンダープレフィックスを自動で追加する
Smart Delete 前の行の一番後ろ(一番右)でdeleteキーを押した時に余計なインデントも一緒に削除してくれる。
Local History 自動バックアップ。"history_retention": 30 くらいに設定しておきましょう(30日後にバックアップを自動削除)。設定しないとずっとバックアップが残ります。

● SublimeLinter-csslint の設定

例えば下記のように設定してエラー出力をゆるくします

{
    "paths": {
        "osx": ["/Users/USER-NAME/.anyenv/envs/ndenv/versions/v9.11.2/bin/"],
    },
    "linters": {
        "csslint" : {
            "ignore" : ["order-alphabetical", "important", "empty-rules", "universal-selector","font-sizes", "box-model", "zero-units", "shorthand","fallback-colors","adjoining-classes", "box-sizing"]
        }
    }
}

・PHPやRubyなどプログラミング言語編集に便利なパッケージ

パッケージ名 説明 キーバインド
Dash Doc カーソルの当たっている文字列を ヘルプ検索アプリ Dash で開く(Macユーザー専用です) { "keys": ["ctrl+h"], "command": "dash_doc"} ,
Pretty JSON JSONをバリデーションかけてから整形する JSONファイル保存時に書式が正しいかチェックしてくれます。またJSONを綺麗に整形します。
ShellCommand シェルコマンドを実行する キーバインドに好きなショートカットを設定して任意のシェルコマンドを実行できます
設定は **Preferences - Keybindings** に記述します。( Package Settings ではありません )
phpfmt PHPソースコードを自動で整形する command+shift+pから phpfmt : format now を選択
Case Conversion キャメルケース、スネークケースを相互変換する control+option+cを2回連打
Serialized​Data​Converter ( plist , bplist , json , yaml )を相互変換する
Random Everything ランダムなidやメールアドレスや国名などを生成する
ConvertToUTF
+
Codecs33
Sublime Text 3をShift_JISとかEUC-JP等utf8以外のエンコードに対応させる。 { "keys": ["shift+super+c"], "command": "null" },
(GBK encoding へのショートカットを殺す)
Increment Selection 一気に連番入力する control+option+で複数選択をした後に
control+option+0
SublimeLinter 各種プログラムの構文チェックをリアルタイムで行えるようにする
SublimeLinter-phplint PHP構文チェックをリアルタイムで行えるようにする
SublimeLinter-phpmd PHPの使われてない変数などを知らせてくれる
SublimeLinter-annotations FIXME, NOTE, TODO, @todo, XXX, README などの重要なコメントをハイライト表示させる。@todo のハイライトは重宝します。
JQuery
e​CSStractor 関数、メソッドの定義元にジャンプする
SublimeCodeIntel JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, PHP等の強調表示コードの自動補完(コードヒント)
Alignment イコール = の位置を揃える。コロン : でも揃えたいときは以下のようにする (※1)
EditorConfig 色々なテキストエディタアプリでインデント等の設定を共有するEditorConfigに対応する
DocBlockr PHPDocの記述をサポート http://bit.ly/2p1pLED クラスが定義されてる1つ上の行で /** 押すと自動的にドキュメントを作成してくれる
**/ で終了。

・その他便利なパッケージ

https://packagecontrol.io/packages/ApacheConf
パッケージ名 説明 キーバインド
ApacheConf .conf .htaccess .htpasswd のハイライト
File​Diffs 最速Diff(ファイル比較)比較したい2つのファイルを開いてタブを右クリックして「Diff with Tab」でパッと比較できます
BetterFindBuffer フォルダ内一括検索の検索結果からファイル名にカーソルを当てて「enter」でファイルを開く
SideBarEnhancements サイドバーを拡張し、右クリックメニューを増やす
Sync View Scroll 複数のウィンドウでスクロールを同期させる command+shift+pから SyncScroll : Toggle Current View Scroll Sync を選択
Chain of Command 任意のコマンドを連続で実行させる
SyncedSideBar 現在開いているファイルとサイドバーのファイルの位置を連動させる
Expand​Region [command] + [shift} + [space] で広がる選択範囲を細かくする { "keys": ["super+shift+space"], "command": "expand_region" }
FindKeyConflicts [command] + [shift] + p の後に FindKeyConflicts を入力するとバッティングしているショートカット一覧を表示する

(※1) Alignment を cssプロパティ( : )でも揃えられるようにする

【Preferences】→【Package Settings】→【Alignment】→【Settings - User】 に以下を記述して保存。

{"alignment_chars": ["=",":"] }

Goto-CSS-Declarationのショートカットを [ctrl] + ←・→ に設定する

    {
      "keys": ["ctrl+right"], "command": "goto_css_declaration",
      "args": {"goto": "next"}
    },
    {
      "keys": ["ctrl+left"],  "command": "goto_css_declaration",
      "args": {"goto": "prev"}
    }

● option 左 , option 右 で移動する

    // jump back
    { "keys": ["alt+left"], "command": "jump_back" },
    { "keys": ["alt+right"], "command": "jump_forward" },

● 前回開いたファイルを自動で次回起動時に開くのをやめる

Preference > Setting に以下を追加します

{
    "hot_exit": false,
    "remember_open_files": false,
}

● ダブルクリックでハイフンで繋いだ単語も選択できるようにする

ハイフンで繋いだ単語( my-class )をダブルクリック選択できるようにするには
【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

● 文字コードと改行コードを表示する

【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"show_encoding": true,
"show_line_endings": true,

● Sublime Textで shift + return で <br> タグを挿入する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br>" } }

を追加します。

● Sublime Textで ブックマークを(設定/解除)する

    { "keys": ["super+b"], "command": "toggle_bookmark" , "args": {} },

● Sublime Textで command + J で選択中のhtmlタグを1行にまとめる( 要 emmet )

【基本設定】→【キーバインド - ユーザ】で開くファイルに

    { "keys": ["super+j"], "command": "run_emmet_action" , "args": {"action": "merge_lines"} } ,

を追加します。

● Sublime Textで control + option + B で表示中のソースを自動整形(インデント)出来るようにする

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["control+option+b"], "command": "reindent" , "args": { "single_line": false } },

を追加します。

● Sublime Textで [command]+space で選択範囲を細かく拡張する、 [command] + [shift] + space で選択範囲を大きく拡張する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

  { "keys": ["super+shift+space"], "command": "expand_selection", "args": {"to": "scope"} } ,
  { "keys": ["super+space"], "command": "expand_region" } ,

を追加します。

● Sublime Textで PHPの構文チェックを出来るようにする

  1. SublimeLinter-phplint をインストールする。

  2. 次の node.js パッケージをインストールする
    sudo npm install -g phplint

● ShellCommandで 任意のシェルコマンドをショートカットで実行出来るようにする

例 : 「ctrl」+「3」でPHPのバージョンを表示します

  {
    "keys": ["ctrl+3"],
    "command": "shell_command",
    "args": {
      "command": "echo $PATH" ,
      "target": "point"
    }
  } ,

● Sublime Textのおすすめショートカットキー

(基本的なショートカットは除きます。 command + ↓ とか。)

コマンド ショートカットキー
● カーソル移動系
カーソル位置を戻す(Undo) command + U 
カーソル位置を進める command + shift + U 
今いるタグの開始タグ、終了タグへ移動 cotrol + shift + T 
● マルチカーソル
上または下にマルチカーソルを増やす ctrl + shift + ↑・↓(OSXのMission Controlのショートカットをオフにすること) 
今カーソルがあたっている単語を全てマルチカーソルで選択 command + ctrl + G 
● タブ系
隣のタブへ移動する command + option + ← ・ → 
X番目のタブへ移動する command + 0〜9 
● テキスト選択系
単語を選択 マウスダブルクリック
選択範囲を拡張 command + shift + space
今いる行を選択 command + L
今いるhtmlタグを選択(連続押しで親要素をたどって選択) command + shift + A またはcontrol + D
● 編集系
選択したテキストをソートする F5
選択したテキストの前後にhtmlタグを挿入 ctrl + shift + W
画像タグ <img>の width, height を取得して更新する ctrl + shift + I
閉じタグ を挿入する command + option + .
1行コメントアウト command + \
複数行コメントアウト command + shift + \
● その他
マクロを記録する control + Q
マクロを実行する control + shift + Q
折り返しを変更する command + shift + P の後に w を押して Word Wrap Toggle を選択

● Sublime Textのカラーテーマ

こちらのサイトから選ぶといいでしょう
https://colorsublime.github.io/
( Colorsublime というパッケージのインストールが必要です。 )

合わせて、「Preference」→「Settings」に

    "highlight_line": true,

を追加しましょう。 現在行がハイライトされて編集しやすくなります。

● Sublime Textのカラーをカスタマイズする

http://tmtheme-editor.herokuapp.com
作成したファイルは拡張子「.tmTheme」をつけて

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Colorsublime-Themes/

に移動します。
『Sublime Text』→『Preferences』→『ColorScheme ... 』から選択して適用させます。

● sublime Textでインデントの罫線を見やすくする

1. 『基本設定』→『基本設定 - ユーザ』に以下の行を追加します。

現在アクティブなインデントのカラーが強調されて見やすくなります。

    "draw_indent_guides": true,
    "indent_guide_options": ["draw_normal", "draw_active"],

2. /Users/ユーザ名/Library/Application Support/Sublime Text 3/Packages/Colorsublime-Themes/カラーセッティング名.tmThemeに以下の行を追加します。

<key>guide</key>
<string>#cccccc</string>
<key>activeGuide</key>
<string>#E91E63</string>
<key>stackGuide</key>
<string>#cccccc</string>

挿入位置は background が記述してある並びでokです。

● sublime Textおすすめのフォント

Menlo
Ricty Diminished
Souce code pro

あたりがおすすめです

● sublime Textの設定

こちらを参考にするといいです。 http://bit.ly/22xr0pC

● sublime Textでファイルタイプ(拡張子)ごとにタブの設定を変更する

『基本設定』→ 『基本設定 - 拡張』→ 『シンタックス指定 - ユーザ』を開いて以下のように記述して保存

{
    "tab_size": 4, // タブサイズ
    "translate_tabs_to_spaces": true, // タブの代わりにスペースでインデントする
    "auto_indent": true, // 自動インデント
    "smart_indent": true, // 自動インデントを少し賢く
    "trim_automatic_white_space": true // 空行の無駄な自動インデントを削除
}

添付ファイル1
t_st.jpg ( 31.1 KBytes ) ダウンロード

Sublime Text でMarkdownを編集する時に便利なパッケージ

Sublime Text

https://www.sublimetext.com

Sublime Text でMarkdownを編集する時に便利なパッケージをしょうかいします。

● 1. Sublime Text でマークダウンのリアルタイムプレビューを行う OmniMarkupPreviewer

・ OmniMarkupPreviewer で Error: 404 Not Found が表示される時の対処法

「基本設定」→「Package Settings」→「OmniMarkupPreviewer」→「Settings - User」に以下を保存する。

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

● 2. Sublime Text でマークダウンテーブル編集を楽にする「Table Editor」


No.188
01/29 11:26

edit

MacでPDFを印刷するときにページ番号を追加する

MacでPDFを印刷するときにページ番号を追加する

● pdf Paginate

https://itunes.apple.com/jp/app/pdf-paginate/id866628744

(注意)横位置(横長)の pdf 書類だとうまくページ番号が挿入されません。


No.176
04/21 10:26

edit

エディタ Atom のショートカットを任意に設定する

ATOMでショートカットキーを自分好みにカスタマイズするには

・【ATOM】→【環境設定】→【キーバインド】 から変更したいメニューの左のアイコンをクリックして設定をコピー
・キーマップファイル のリンクを押して keymap.cson を開く
・開いたファイルにペーストして好きなキーに書き換える
・ATOMを再起動

例 ブックマークの切り替え( Command+F2 を Command+b に書き換える) keymap.cson

'atom-text-editor':
  'cmd-b': 'bookmarks:toggle-bookmark'

No.133
04/21 14:57

edit

No.119
03/23 19:50

edit

エディタ Atom のアンインストール(再インストール)

エディタ Atom の再インストールを行いたく、まずアンインストールを行う。

アプリケーションフォルダの Atom を削除
rm -rf ~/.atom
rm /usr/local/bin/atom
rm /usr/local/bin/apm
rm ~/Library/Preferences/com.github.atom.plist
rm -rf ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom

No.116
04/21 14:34

edit

Atom

エディタ Brackets のショートカットを変更する

エディタ Brackets のショートカットを変更するには

【デバッグ】>【ユーザーキーマップを開く】

から設定ファイルを開きます。(jsonフォーマット)

設定は以下のようにします。

{
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
        "overrides": {
            "Cmd-Up":          "",
            "Cmd-Down":        "",
            "Cmd-T":           "io.emmet.matching_pair",
            "Cmd-Ctrl-Up":     "edit.lineUp",
            "Cmd-Ctrl-Down":   "edit.lineDown",
            "Cmd-R":           "navigate.gotoDefinition",
            "Cmd-P":           "navigate.quickOpen" 
        }
}

No.104
12/28 11:58

edit

Brackets

次世代WEB開発用エディタ Bracketsとおすすめ拡張機能

Brackets

アドビが開発している次世代のWEB用テキストエディタです。
http://brackets.io

emmetをインストールするとHTML入力作業が早くなります。

●emmet

http://emmet.io

emmetのHTML定義を日本語にする

extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json
(/Users/ユーザ名/Library/Application Support/Brackets/extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json)

冒頭の言語設定( en )のところを以下のように書き換える。

{
 "variables": {
  "lang": "ja",
  "locale": "ja-JP",
  "charset": "UTF-8",
  "indentation": "\t",
  "newline": "\n"
 },

BracketsのEmmetをカスタマイズしてより使いやすくする | 9ineBB

Brackets おすすめの拡張機能( Bracketsのメニュー > ファイル > 拡張機能マネージャー から検索してインストールします。)

●Brackets Tools

複数行のリストを <ul><li> リストに変換したり細かい便利なツール集

●Brackets CSS Class Code hint

HTMLのクラスを設定するときに読み込んであるcssのクラス名をリストで出してくれる。

●Brackets CSSfier

cssファイルにあえてHTMLコードをペーストすると、からのCSSを作成する。(ID,クラス名入力を省略できる。)

<div id="#navbar-main"></div>

 ↓ このコードをペーストすると

#navbar-main {
}

が自動で作られる。

●Paste and Indent

BracketsはAtomとくらべてコードをペーストした時に崩れが生じます。 これを入れるとペースト時に自動インデントしてくれるようになります。

●CDN Finder

CDN(jQueryなど有名なJavaScriptライブラリをホスティングしているさいと)を検索できます。

●Brackets Css Color Preview

BracketsではCSSのカラー設定表記があるときにオンマウスで色をプレビューできますが、 これは行番号のところに常に色を表示します。

●Overscroll

もうちょっと下までスクロール出来るようになります。

●Brackets Outline List

現在開いているファイルの関数やタグや設定を一覧できます。

●Display Shortcuts

「ヘルプ」>「Show Shortcuts」からショートカット一覧を表示します。

●Brackets File Icons

ファイル一覧のところでアイコンを表示できるようになります。 アイコンは

  • Ionicons
  • Devicons から選べます。

●HTML Block Selector

command + shift + T で対応するタグの中身をすべてを選択出来るようになります。

添付ファイル1

エディタ Atom で複数の環境でパッケージを自動で同期させる

MacとWindows 両方でAtomを使用している時など、パッケージをいちいちダウンロードするのが面倒です。 そこでアカウントを作って同期させる(半手動)と便利です。

1. まず apm コマンドをインストールする

Atomを起動してから

【Atom】→【Install Shell Commands】を実行

2. Atom アカウントの作成

https://atom.io/ からアカウントを作成してログインする。(GitHubアカウントがある場合はそのままログインできる。)

3. 現在インストール済みのパッケージ全てにスターを付ける

apm stars --install

これを実行すると、 Token を入力するよう促される。 Token は https://atom.io/account に表示されるのでこのページに移動してコピペ。

4. 新しい環境のAtomにパッケージをインストールする

コマンドラインから

apm stars --install

とすると、スターのついたパッケージがすべて一括インストールされる。

参考 : http://goo.gl/9RlfLT


No.94
10/07 10:31

edit

Atom

エディタ Atom の便利なおすすめパッケージ一覧

Atom

プログラミング、WEB制作や文書作成に使いやすいフリーソフトのエディタ Atom。

● エディタatomのメニューを日本語化する

【Preferences】→【Install】→【japanese_menu】をインストールすると日本語になります

● bracket-matcher

対応する括弧やHTMLタグを光らせたり、ctrl + M で対応する括弧に移動したり、cmd + ctrl + M で対応する括弧内をすべて選択したりできます。

● autocomplete-paths

ローカルのファイル名の入力補完をしてくれます。

● atom-html-preview

HTMLファイルを編集中にライブプレビューします。 ctrl + shift + H で起動します。
https://atom.io/packages/atom-html-preview

● pigments

CSSカラーコードの背景色をその色で表示します。

● autoprefixer

CSSのベンダープレフィックスを自動で追加・削除してくれます。

● EditorConfig

「プロジェクト」「拡張子」ごとにタブ幅や後ろの空白行を制御する .editorconfig に対応できるようになります。

● ighlight-selected

ある単語を選択すると同じ単語をハイライト表示します。

● script

ほとんどのプログラミング言語を即座に実行します。(セーブも必要なし)
画面右下のモードを実行したい言語に設定して cmd + A で実行します。

● show-ideographic-space

全角スペースを表示します。 インストール後にメニューの  【Atom】→【スタイルシート】から style.less を開いて

atom-text-editor::shadow {
  .highlight.ideographic-space {
    .region:after {
      color: #800000;
      background-color: #CCCCCC;
    }
}

で、好きな色に設定できます。

● Sublime-Style-Column-Selection

option を押しながらドラッグで矩形選択ができます。 # ● atom-alignment https://atom.io/packages/atom-alignment 複数行を選択して ctrl + cmd + A を押すと = の位置を揃えてくれます。 ``` var english = 'test'; var japanese = 'テスト'; ``` # ● tablr ATOMでCSVファイルをエクセルのように編集できる。便利です。 # ● linter https://atom.io/packages/linter プログラムのエラーをリアルタイムで表示します。プログラムごとに以下のパッケージを追加でインストールします。 - [linter-jshint](https://atom.io/packages/linter-jshint)(JavaScript , JSON 用) - [linter-php](https://atom.io/packages/linter-php) (PHP用) - [linter-ruby](https://atom.io/packages/linter-ruby) (Ruby用) - [linter-csslint](https://atom.io/packages/linter-csslint) (CSS用) - [linter-htmhlint](https://atom.io/packages/linter-htmlhint) (HTML用) # ● atom-beautify https://atom.io/packages/atom-beautify HTMLやJavaScriptからPHP,Rubyなどほとんどのソースをきれいに整形できます。 - ctrl + option + b
  • メニューの【Packages】>【Atom Beautify】>【Beautify】

PHPでコード整形をするには php-cs-fixer.phar http://cs.sensiolabs.org が必要です。

● symbols-tree-view

プログラムソース記述時に関数やメソッド、変数の一覧を表示します。

  • ctrl + option + o

 

● minimap

画面右にファイル全体のミニマップを表示する

● minimap-highlight-selected

minimapに「highlight-selected」結果を表示する

● minimap-bookmarks

minimapにブックマークをを表示する

● minimap-find-and-replace

minimapに検索結果を表示する

● minimap-autohide

スクロール時にのみminimapを表示させる

 

● tag

https://atom.io/packages/tag

HTML入力時に <div> を入力した後 < を入力したタイミングで自動でタグを閉じてくれます。

● emmet

https://atom.io/packages/emmet
HTML入力支援

div>div

と記述して TAB キーを押すと

<div>
  <div></div>
</div>

に展開されます。
http://docs.emmet.io/cheat-sheet/

他にも以下のようなショートカットがあります。

CommandDarwinLinux/Windows
選択した複数の行を1行にまとめるshift + + mctrl + shift + m
対応するタグに移動するctrl + alt + jctrl + alt + j
Expand Abbreviationtab or shift + + etab or ctrl + e
Expand Abbreviation (interactive)alt + + enterctrl + alt + enter
Wrap with Abbreviationctrl + wctrl + alt + w
Balance (outward)ctrl + dctrl + ,
Balance (inward)alt + dctrl + shift + 0
Next Edit Pointctrl + ctrl + alt +
Previous Edit Pointctrl + ctrl + alt +
Select Next Itemctrl + shift + ctrl + shift + .
Select Previous Itemctrl + shift + ctrl + shift + ,
Toggle Comment + /ctrl + shift + /
Split/Join Tagshift + + jctrl + shift + `
Remove Tag + 'ctrl + shift + ;
Evaluate Math Expressionshift + + yctrl + shift + y
Increment Number by 0.1ctrl + alt + alt +
Decrement Number by 0.1ctrl + alt + alt +
Increment Number by 1ctrl + alt + + ctrl +
Decrement Number by 1ctrl + alt + + ctrl +
Increment Number by 10ctrl + alt + + shift + shift + alt +
Decrement Number by 10ctrl + alt + + shift + shift + alt +
Reflect CSS valueshift + + rctrl + shift + r
Update Image Sizectrl + ictrl + u
Encode/Decode image to data:URLctrl + shift + ictrl + '
Update Tagctrl + shift + uctrl + shift + '

No.87
09/04 17:01

edit

Atom

エディタAtomの簡単な使い方

Atom(無料)

https://atom.io

エディタ「Atom」は実はプログラムをさほど書かないライトユーザー向けにもいいのではないかと思うので 簡単な設定方法を書いておきます。 Atomを実行したら最初に次のようにするといいでしょう。

1. 画面テーマを明るい色にする

メニューの【Atom】>【Preferences】>【Themes】から『Atom Light』を選択する

2. メニューを日本語化する

メニューの【Atom】>【Preferences】>【Install】から『Localization』をインストールする。
インストール後に再起動し、メニューの【Package】>【Localization】の『Setting』のところに
Current Languageの項目があるので【Japanese】と入力してAtomを再起動

Markdownのプレビューを表示するには

[command] + [shift] + p を押して preview と入力すると
『Markdown Preview: Toggle』と表示されるのでそれをクリック

参考:http://goo.gl/bai5xR


No.70
09/11 13:48

edit

Atom

定型文を簡単に入力するスニペットソフト

Dash(無料)

https://kapeli.com/dash マニュアル検索 + 定型文入力支援アプリ

Dashのスニペットの使い方

  1. 【システム環境設定】 > 【セキュリティとプライバシー】>【プライバシー】>【アクセシビリティ】で Dash を有効にした後Dashアプリを再起動
  2. Dashアプリから【File】>【New Snippet】でスニペット登録ウィンドウを表示してそこへ登録していきます。
  3. 登録したショートカットキー(Abbreviation)を入力すると定型文が入力されます。

Alfred

Alfredは無料ですが スニペットを使うには有料のPowerPackを導入する必要があります

TextExpander(シェアウェア)

https://smilesoftware.com/TextExpander/index.html

Mac, Windows, iOS で使用できる定型文入力支援アプリです。


添付ファイル1
Dash_t.jpg ( 28.1 KBytes ) ダウンロード
添付ファイル2
te_t.jpg ( 37.0 KBytes ) ダウンロード

Macのフリーのオフィスソフト

Macでワード(.docx)やエクセル(.xls)ファイルを開くにはこちらのソフトがおすすめです。

Libre Office

https://ja.libreoffice.org

Neo Office

http://www.neooffice.org/neojava/en/index.php

● Microsoft Office Online(ブラウザで使える無料のWEBサービス)

https://office.live.com/start/default.aspx
こちらも意外と使い勝手位がいいのでおすすめです。


添付ファイル1
添付ファイル2

Macのテキスト文書比較(diff)ソフト

DiffMerge

http://sourcegear.com/diffmerge/downloads.php
ファイルの比較はもちろんのこと、ディレクトリごとのファイル比較もできます。おすすめ。

DiffFork($26)

http://www.dotfork.com/difffork/
画面が見やすいのでおすすめです。

TextWrangler(無料)

http://www.barebones.com/products/textwrangler/
メニューから【Search】【Find deferences】を選択すると2つのテキストファイルを選択するメニューが出てきますので 選択するとファイル比較ができます。

JDiff X (書類比較プラグイン for Jedit X)

http://www.artman21.com/jp/jdiff_x/

Jedit X で編集中の2つの書類の差異をわかりやすく対照表示し、編集できるようにする Jedit X Rev.2 用のプラグイン。タイムマシンバックアップとの比較もサポートしています。

SublimeText ($70)

http://www.sublimetext.com
パッケージ「Sublimerge」差分とマージができます
http://www.sublimerge.com

ARAXIS MERGE

http://www.araxis.com/merge/index.ja


添付ファイル1
diff_t.jpg ( 19.6 KBytes ) ダウンロード
添付ファイル2
jdiff.png ( 13.4 KBytes ) ダウンロード
添付ファイル3

プログラミングやソースコード編集に便利なMacのテキストエディタ

Aptana STUDIO(無料)

http://www.aptana.com

統合開発環境

Sublime Text(無料)

http://www.sublimetext.com

複数選択、複数同時編集が便利なテキストエディタ。

使い方 : http://www.buildinsider.net/small/sublimetext/02

TextMate(シェアウェア)

http://macromates.com

プログラムのソースコードを書くのに適したエディタ

espresso(シェアウェア)

http://macrabbit.com/espresso/

HTML,CSS編集に便利なテキストエディタ

phpstorm(シェアウェア)

http://www.jetbrains.com/phpstorm/

PHP開発統合環境


添付ファイル1
添付ファイル2
添付ファイル3
添付ファイル4
添付ファイル5

MaOSXのテキストエディタ

mi(無料)

http://www.mimikaki.net

言わずと知れた定番テキストエディタ。キーボードマクロ(キー操作の記憶・再生)もついているので、単純繰り返し作業も楽に作業できます。

Coteditor(無料)

http://coteditor.com

こちらも定番テキストエディタ。

Jedit(シェアウェア)

http://www.artman21.com/jp/jedit_x/

TextWrangler(無料)

http://www.barebones.com/products/textwrangler/

BBeditの弟分(無料版)ソフト

BBedit(シェアウェア)

http://www.barebones.com


添付ファイル1
添付ファイル2
添付ファイル3
mi_t.jpg ( 54.5 KBytes ) ダウンロード
添付ファイル4
添付ファイル5
tw_t.jpg ( 51.6 KBytes ) ダウンロード