PackageResourceViewerでパッケージ内容を書き換える

忙しい時って不思議な行動を取ってしまいます。
役に立ちそうで何の役にも立たない、いわゆる現実逃避の話です。その現実逃避も、年を経る毎に変化してきました。

15年前 → PC重くて作業に支障でる、デフラグしよう！
10年前 → 標準使用だからダメなのかも、Extention探そう！
5年前 → くぁwせdrftgyふじこlp……zzz(育児疲れで寝落ち)
今 → まえやったあれ、ブログに書いとこう！

さて、先日の記事に出てきたSublime Text 3には、たくさんのパッケージがあります。
そのパッケージの中身をごにょごにょしたい時には、PackageResourceViewerを使うと良いらしいです。
私の場合、Japanizeで日本語してあるSublimeTextに、SideBarEnhancements入れてサイドバー拡張したら、サイドバーの表記が英語になっちゃって使いこなせなかったので、そこを日本語化するためだけにインストールしました。
ちなみに、Side Bar.sublime-settingの変更では効かなかったので、PackageResourceViewerからSideBarEnhancementsを開いて、Side Bar.sublime-textを下記に変更。
なんにもないだろうけど、なんかあったら嫌なので、もともとあった分はコメントアウトして下記を追加しました。ついでにドネーション部分も削ってしまいました。
SideBarEnhancementsの作者さん、ごめんなさい。

[
  {"caption":"-", "id":"side-bar-start-separator"},
  { "caption": "新規ファイル作成",        "id": "side-bar-new-file",         "command": "side_bar_new_file",         "args": {"paths": []} },
  { "caption": "新規フォルダ作成",       "id": "side-bar-new-directory",       "command": "side_bar_new_directory",       "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-new-separator"},

  { "caption": "編集",              "id": "side-bar-edit",             "command": "side_bar_edit",             "args": {"paths": []} },
  { "caption": "開く / 実行",              "id": "side-bar-open",             "command": "side_bar_open",             "args": {"paths": []} },
  { "caption": "ブラウザで開く",              "id": "side-bar-open-in-browser",             "command": "side_bar_open_in_browser",             "args": {"paths": []} },
  { "caption": "新しいウィンドウで開く",              "id": "side-bar-open-in-new-window",             "command": "side_bar_open_in_new_window",             "args": {"paths": []} },
  { "caption": "Open With Finder",              "id": "side-bar-open-with-finde",             "command": "side_bar_open_with_finder",             "args": {"paths": []} },
  { "caption": "プログラムから開く",        "id": "side-bar-files-open-with",

    "children":
    [

      { "caption": "-",                  "id": "side-bar-files-open-with-edit-application-separator"},
      { "caption": "設定", "id": "side-bar-files-open-with-edit-applications", "command":"side_bar_files_open_with_edit_applications","args": {"paths": []} },
      { "caption": "-",                  "id": "side-bar-files-open-with-edit-applications-separator"}

    ]
  },
  { "caption": "フォルダを開く",            "id": "side-bar-reveal",           "command": "side_bar_reveal",           "args": {"paths": []} },

  { "caption": "-",                 "id": "side-bar-edit-open-separator" },

  { "caption": "ファイル内容の検索・置換", "id": "side-bar-find-selected",    "command": "side_bar_find_in_selected", "args": {"paths": []} },
  { "caption": "プロジェクト内の検索", "id": "side-bar-find-in-project",    "command": "side_bar_find_in_project", "args": {"paths": []} },
  { "caption": "詳細検索", "id": "side-bar-find-advanced",
    "children":
    [
      { "caption": "親フォルダ内",   "id": "side-bar-find-parent",      "command": "side_bar_find_in_parent",   "args": {"paths": []} },
      { "caption": "-",         "id": "side-bar-find-parent-separator"},
      { "caption": "このプロジェクトフォルダ内",  "id": "side-bar-find-project-folder",     "command": "side_bar_find_in_project_folder",   "args": {"paths": []} },
      { "caption": "全てのプロジェクトフォルダ内",  "id": "side-bar-find-project-folders",     "command": "side_bar_find_in_project_folders"},
      { "caption": "-",         "id": "side-bar-find-project-separator"},
      { "id": "side-bar-find-in-files-with-extension",     "command": "side_bar_find_in_files_with_extension",   "args": {"paths": []}},
      { "caption": "In Paths Containing…",   "id": "side-bar-find-files-path-containing",      "command": "side_bar_find_files_path_containing",   "args": {"paths": []} }

    ]
  },
  { "caption": "-",                 "id": "side-bar-find-separator"},
  { "caption": "切り取り",               "id": "side-bar-clip-cut",         "command": "side_bar_cut",              "args": {"paths": []} },
  { "caption": "コピー",              "id": "side-bar-clip-copy",        "command": "side_bar_copy",             "args": {"paths": []} },
  { "caption": "名前のコピー",         "id": "side-bar-clip-copy-name",                     "command": "side_bar_copy_name",                         "args": {"paths": []} },
  { "caption": "ファイルパスのコピー",         "id": "side-bar-clip-copy-path",    "command": "side_bar_copy_path_absolute_from_project_encoded",        "args": {"paths": []} },
  { "caption": "Copy Dir Path",     "id": "side-bar-clip-copy-dir-path",                     "command": "side_bar_copy_dir_path",                         "args": {"paths": []} },
  { "caption": "テキストとしてコピー",      "id": "side-bar-clip-copy-as",
    "children":
    [
      { "caption": "Relative Path From View Encoded",         "id": "side-bar-clip-copy-path-relative-from-view-encoded",    "command": "side_bar_copy_path_relative_from_view_encoded",        "args": {"paths": []} },
      { "caption": "閲覧地点からの相対パス",                 "id": "side-bar-clip-copy-path-relative-from-view",            "command": "side_bar_copy_path_relative_from_view",                "args": {"paths": []} },
      { "caption": "-",                                       "id": "side-bar-clip-copy-path-relative-from-view-separator"},

      { "caption": "Relative Path From Project Encoded",         "id": "side-bar-clip-copy-path-relative-from-project-encoded",    "command": "side_bar_copy_path_relative_from_project_encoded",        "args": {"paths": []} },
      { "caption": "プロジェクトからの相対パス",                 "id": "side-bar-clip-copy-path-relative-from-project",            "command": "side_bar_copy_path_relative_from_project",                "args": {"paths": []} },
      { "caption": "-",                                          "id": "side-bar-clip-copy-path-relative-from-project-separator"},

      { "caption": "Absolute Path From Project Encoded",         "id": "side-bar-clip-copy-path-absolute-from-project-encoded",    "command": "side_bar_copy_path_absolute_from_project_encoded",        "args": {"paths": []} },
      { "caption": "プロジェクトからの絶対パス",                 "id": "side-bar-clip-copy-path-absolute-from-project",            "command": "side_bar_copy_path_absolute_from_project",                "args": {"paths": []} },
      { "caption": "-",                                          "id": "side-bar-clip-copy-path-absolute-from-project-separator"},

      { "caption": "URIとしてのパス",                  "id": "side-bar-clip-copy-path-encoded",             "command": "side_bar_copy_path_encoded",                 "args": {"paths": []} },
      { "caption": "ファイルパス",                          "id": "side-bar-clip-copy-path",                     "command": "side_bar_copy_path",                         "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-path-separator"},

      { "caption": "エンコードされた名前",                  "id": "side-bar-clip-copy-name-encoded",             "command": "side_bar_copy_name_encoded",                 "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-name-encoded-separator"},

      { "caption": "URL",                           "id": "side-bar-clip-copy-url",             "command": "side_bar_copy_url",                 "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-url-separator"},

      { "caption": "aタグを使用してコピー",                         "id": "side-bar-clip-copy-tag-a",                    "command": "side_bar_copy_tag_ahref",                  "args": {"paths": []} },
      { "caption": "imgタグを使用してコピー",                       "id": "side-bar-clip-copy-tag-img",                  "command": "side_bar_copy_tag_img",                    "args": {"paths": []} },
      { "caption": "scriptタグを使用してコピー",                    "id": "side-bar-clip-copy-tag-script",               "command": "side_bar_copy_tag_script",                 "args": {"paths": []} },
      { "caption": "スタイルシートのリンクタグとしてコピー",                     "id": "side-bar-clip-copy-tag-style",                "command": "side_bar_copy_tag_style",                  "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-tag-separator"},
      { "caption": "プロジェクト全てのフォルダパスを一括コピー",               "id": "side-bar-clip-copy-project-directories",          "command": "side_bar_copy_project_directories",            "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-project-directories-separator"},
      { "caption": "ファイル内テキストをUTF-8でコピー",               "id": "side-bar-clip-copy-content-utf8",             "command": "side_bar_copy_content_utf8",               "args": {"paths": []} },
      { "caption": "ファイル内容をデータURIとしてコピ―",           "id": "side-bar-clip-copy-content-base-64",          "command": "side_bar_copy_content_base64",             "args": {"paths": []} }
    ]
  },

  { "caption": "貼り付け",             "id": "side-bar-clip-paste",       "command": "side_bar_paste",            "args": {"paths": [], "in_parent":"False"} },
  { "caption": "親フォルダに貼り付け",   "id": "side-bar-clip-paste-in-parent",       "command": "side_bar_paste",            "args": {"paths": [], "in_parent":"True"} },
  { "caption": "-",                 "id": "side-bar-clip-separator" },
  { "caption": "名前を付けて複製",         "id": "side-bar-duplicate",        "command": "side_bar_duplicate",        "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-duplicate-separator" },

  { "caption": "名前の変更",           "id": "side-bar-rename",           "command": "side_bar_rename",           "args": {"paths": []} },
  { "caption": "ファイルを移動する",             "id": "side-bar-move",             "command": "side_bar_move",             "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-rename-move-separator" },

  { "caption": "削除",            "id": "side-bar-delete",           "command": "side_bar_delete",           "args": {"paths": []} },
  { "caption": "Empty",            "id": "side-bar-emptry",           "command": "side_bar_empty",           "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-delete-separator" },

  { "caption": "フォルダを再読み込み",           "id": "side-bar-refresh",          "command": "refresh_folder_list" },
  { "caption": "-",                 "id": "side-bar-refresh-separator" },
  { "caption": "プロジェクト",            "id": "side-bar-project",
    "children":
    [
      { "caption": "プロジェクトの編集", "id": "side-bar-project-open-file",      "command": "side_bar_project_open_file",           "args": {"paths": []} },
      { "caption": "Edit Projects Preview URLs", "id": "side-bar-project-preview-url",      "command": "side_bar_project_open_project_preview_urls_file",           "args": {"paths": []} },
      { "caption": "-",                         "id": "side-bar-project-open-file-separator" },
      { "caption": "Promote as Project Folder", "id": "side-bar-project-item-add",     "command": "side_bar_project_item_add",        "args": {"paths": []} },
      { "caption": "Exclude From Project",      "id": "side-bar-project-item-exclude",   "command": "side_bar_project_item_exclude",        "args": {"paths": []} },
      { "caption": "-",                         "id": "side-bar-project-item-separator" },
      { "caption": "プロジェクトからフォルダを取り除く", "id": "side-bar-project-item-remove-folder", "command": "side_bar_project_item_remove_folder", "args": { "paths": []} },
      { "command": "prompt_add_folder", "caption": "Add Folder to Project…", "mnemonic": "d" }

    ]
  },
  { "caption": "-",                 "id": "side-bar-end-separator" }
 ]

これでよし！

Filed under: 制作ツール

242月/15

Sublime Text 3(Compass+sass)のある暮らし

様々なサイトで絶賛されている高機能エディタ、Sublime Text。
恋に落ちるエディタってすごい二つ名だなと思いますが、嘘じゃありません。

遅ればせながら一年ほど前、疑心暗鬼でRubyをインストールし、初めてSassのSCSS記法を使ったcssを書き始めた一時間後……爆速コーディングとSublime Textの拡張性の高さと安定っぷり（作業中に落ちないってほんと重要！）に衝撃を受け、私も漏れなくSublime Textとの恋に落ちました。

ちなみに、それまでコーディングにはDreamweaverとサクラエディタを使用。
サクラエディタは10年ほど使いました。これ、インストールは圧縮ファイルの展開のみなので、レジストリ汚染しません。
昔、他所に出向いて作業することが多々あったため、インストールフォルダそのものをコピーしてUSBメモリに入れておけば、どこにいっても自分好みにカスタマイズしてある高性能エディタを使えるというのは、非常にありがたかったです。
でも、今はもう他所での作業もないし、Sublime Text 3があるのでアンインストール済み。今までありがとうノシ

Sublime Textの特徴

Sublime Textの良いところ

動作が軽い
挙動が安定している
パッケージ（プラグイン）が豊富
コンパイルも簡単
作業管理（プロジェクト）ができる
前回開いていたプロジェクトとファイルを覚えてくれてるから、次回作業開始がスムーズ
使用制限がなく無料で使える

Sublime Textのイマイチなところ

プレビュー機能がなく、プレビューから修正ができない
sassの記述が増えてくると、Compassのコンパイルが遅い

本当は、Sublime TextとChromeにEmmet Live Styleを入れると、デベロッパーツールからcssの修正がDreamweaverライクにできるのですが、私はSassを使ってcss書いているので、直接Sassを修正できないと意味がありません。デベロッパーツールのベータ版使えばSassに対応可能とかそんな感じの記事を見て試したものの、どうにもうまくいかなかったので再挑戦予定です。

後は、Compassのコンパイルが遅いのをどうにかしたい……といっても、三分の一くらいは私のsassの書き方が悪いせいかも。
Sassを使い出してから、ネストでのセレクタ指定にやたら頼るようになり、cssが不細工になってきてます。
IE7やIE8への対応案件が減ってcss3で疑似クラスが使用可能になり、レスポンシブの案件が増え、スマホの時は～とか、タブレットではこうだから～とか考えながら書いてると、classの命名にまで頭が回らず、「あーも－、ここは取りあえずセレクタをネストして書いとくか」と、楽な方楽な方に流れていった結果ですね。
……コーディングのみの案件も出てきたし、今後はBEMっぽい命名規則を意識しようと思います。

ちなみに、BEMについてはこの二つの記事がとっても参考になり、且つしっくりきました。
実践めんどうくさくない BEM
CSSをキレイに書くを追求すると行き着く「OOCSS」、「BEM」

コンパイルにCompassじゃなくてGruntを使う方法があるらしいので、そっちも試さないと……。

Filed under: 制作ツール

77月/14

一番使える、アイコン系webフォントのサイト

このサイトでも使っている、アイコン系webフォント。
色々ある中で、一番使い勝手が良さそうだと思ったのはFont Awesome。
Wordpressにも「Font Awesome Icons」というプラグインがあるし、文字だから大きさは自由自在、マウスオーバー時に色もつけれる。どんどん普及しつつあるRetinaディスプレイで見てもきれいだし、何より軽い。
これはメチャクチャ便利。

ただ問題もあって、異なるアイコンをずらっと並べてみると、フォントサイズは一緒なのにそれぞれの大きさがまちまち。
これはアイコン系webフォントの宿命……仕方ないから潔く諦めたいところですが、トランスビットの外の人が許してくれないことも分かっています。
イラレでちまちまSVGファイル作って、まとめてwebフォントに変換してくれるサイトに行くのが最適解なのカシラ…と思ってたのです、が。

IcoMoonにありました。
Font Awesome、入ってました！

IcoMoonは、IcoMoonに登録済みのフォントなら、自分で一文字一文字簡単なカスタムができるし、自作のSVGもwebフォンとして変換可能。さらに使用するものだけを選択してダウンロードができるという、至れり尽くせりのサイトです。これでデザインが保たれ、トランスビットの外の人も大満足。
そのうち、サイトロゴもフォントとして登録してみようと思います。

Filed under: 制作ツール