トランスビットの開発ノート

Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

- 制作ツール -

jQueryのドロワープラグインSlidebarsが、Androidでちょっとした問題を起こしていた件について

仕事が終わってまったりしていたら、トランスビットの外の人に「これ原因突き止めといて。じゃ、出かけてくるから!」って投げられた宿題の話です。

AndroidのChromeでページを一気にスクロールさせていると、footerを表示するあたりで一セクション前の部分まで勝手にスクロールして戻ってしまうので、正常な状態に直す。

他のデバイスではなんともないので、cssかscriptだろうとあたりをつけて探っていくと、Slidebars(2系)でした。
スクロールするのみでドロワーメニューをタップしていないにもかかわらず、slidebars.jsが動いて何らかの処理をしてしまう……。
ということで、slidebars.jsを見ていくと、一番最後にありました!

//459行目(最後から2行目)をコメントアウト

//$( window ).on( 'resize', this.css.bind( this ) );

PCでウインドウ幅を狭めてスマホ版表示にした時、ドロワー表示用のボタンが出てくるようになっています。
このドロワー表示用のボタンをタップしてドロワーメニューを表示させたままウインドウ幅を広げ、PC版表示にした時、ドロワーメニュー用の領域をきれいになかったことにしてくれるのが、この一文です。
なので、この一文がないと、ドロワーメニューを表示させたままウインドウ幅を広げPC版表示にした時、ドロワーメニュー用の領域が白い帯として残ってしまいます。

そもそもトランスビットではスマホ版でしかドロワー使わないということもあるのですが、

  • PCでサイト閲覧してて
  • 320pxまでウインドウ幅狭めてスマホ表示にして
  • ドロワー出して
  • 更にそのままウインドウ幅広げてPC表示に戻したりする

そんな人はいないんじゃないか?

という性善説で、トランスビットでは459行目をコメントアウトして問題なしとなりました。
これで宿題クリアです。

Androidでスクロールすると、ウインドウ再描画してるみたいやなーって思うときがあったんですが、リサイズしてたんですね。
cssやscriptの読込順とかなんか色々関係してるんでしょうか……リサイズ……謎です。

Filed under: ,

半年前にEmmet LiveStyleが正式公開されてた件について

半年も気づかなかっただなんて……完全に出遅れた!!orz
と思っていたんですが、意外と気づいてない人の方が多いのかな?あんまり話題になっていないような気もします。

さて、二年ちょっと前、ちょうどこのサイトをリニューアルした頃、Emmet LiveStyleのbeta版を触って遊んだ覚えがあります。確かに便利ではあったんですが、既にcssの記述はSass
(SCSS記法)に移行していたため、拡張子scssのファイルをいじれないEmmet LiveStyleは実用的じゃありませんでした。
ですが、まさしくネックなっていたその部分を克服し、Emmet LiveStyleが正式公開されたそうです。DLは公式からできます。
Emmet LiveStyle 公式サイト

これで、関連づけた.scssをいじれば、ブラウザ(Chrome)をF5しなくても即時反映。
逆もまた然りで、Chromeのデベロッパーズツールでスタイル修正すると、関連づけた.scssに即時反映。

便利!!

まだ少ししか触ってないのですが問題なく動いてくれたので、次のコーディングが楽しみになってきました。

—–
(追記 2016/10/19)

その後、わくわくしながらEmmet LiveStyle使ってみました。今からもう3か月くらい前ですが(笑)
使い心地は、Dreamweaverのcssパネルをいじるかのようなcssコーディングでした。
Sublime Textに出会う前なら、移行してたと思いますが、HayakuやらBourbonやら自分用Mixinやらのぬるま湯に慣れ親しんだ私には、残念ながらまどろっこしくて耐えられず……。
あんまりレビューを見ないと思ったら、私と同じ思いをした人が多かったと……きっとそういうわけだったんですねぇ。なんか悲しい。

実は、Emmet LiveStyleにがっかりした後、構築環境が便利にならないかなーと思ってgulpにも手をだしてみました。
compassより何倍もコンパイルが速いし、オートで画像最適化とかcss最適化とか色々出来て確かに便利なんですけど、プロジェクト毎にgulp用のファイルを用意しなければならなず、管理が煩雑になるのでやめました・というより、決して軽いとは言えないフォルダ、しかも同じものがHDD内に何個もあるなんて、悪!無駄!断捨離断捨離!!というのが本音です。
グループでプロジェクトに当たってるんならいいんでしょうけどねぇ……。
ぴったりの構築環境の構築wって、なかなか難しいです。

Filed under:

Google Fontsで代替フォント3選

あっという間に季節が過ぎてもうすぐ椿さんですね。
「……長い間ブログさぼってるやろ」って先日突っ込まれたトランスビットの中の人です。
無論、気づかれていないなどとは思ってもいませんよ……ええ。

さて、スマホの普及率が高くなったので、どこのサイトでもwebフォントが最早デフォルトのように使われていますね。
トランスビットでは、Windowsでも、Macでも、スマホでも表示できるということで、ポイントとなるような欧文のフォントには、Google Fontsが便利でよく使ってます。
Androidをぶったぎったら、システムフォントのみで済ますことができるんですけど、そういうわけにもいきませんしね。

Google Fontsで使える代替フォントの記事は、ググれば色々でてきます。
ただ、大抵ベーシックな物だけを求めている私には、情報過多。
ということで…

「アレ」と似ているGoogle Fontsの覚書:トランスビットバージョン

ゴシック

ド定番。安定のHelvetica、Arial、Gill Sans →  Open Sans または Lato

セリフ系

電話番号にも最適。みんな大好きTimes New Roman → Lusitana

その他

一気に溢れる品の良さ。碑文体のOptima → Cinzel

ゴシックの場合、Open SansよりLatoの方がすっきりしてて好みです。
両方とも選べるくらいウエイトがあるので、Arial Blackの代わりにも。
数字だけOpen Sanを使ったりもするんですが、そんな時は下記のようにパラメータを与えてサブセット化すると、軽量になって素敵。

<link href='https://fonts.googleapis.com/css?family=Open+Sans&text=089623-' rel='stylesheet' type='text/css'>

セリフ系は書体数が結構あるんですが、Lusitanaは字面から字詰めまでTimes New Romanに酷似しています。
Cinzelは……ほんと、よくぞ無料で提供してくださいましたっ!(TT)

今後も代替フォントを見つけたら、書き留めていきたいと思います。
——
追記(2016/07/06)

セリフ系の電話番号

A-OTFリュウミン → Vidaloka

Filed under: , ,

iPhone5、6、6+を判別した上でviewportを最適化

こんにちは。一ヶ月ほど前にiPhone6無印を支給されたトランスビットの中の人です。

外)「これで、い つ で も 実機で確認できるから」
中)「……そうですネ(外堀埋められた気分)」

さて、レスポンシブで組むのに慣れてきたと思っていても、色々な問題に出くわします。
その度にちぎっては投げ、ちぎっては投げ……今回はiPhoneのviewport絡みです。

基本的にトランスビットの外の人は幅320pxでスマホ用縦デザインをあげてきます。
いつももっと大きいけど、仮にPC用デザインは幅1024pxとし、画面サイズ480px(スマホ横)からはPC用デザインで表示するとしましょう。
iPhone5以下、6、6+でそれぞれ画面幅が違うので、各デバイスで同一表示になるよう調整します。
※Androidぶったぎりコード

jQuery(function($){

/* ==============================================================================
   0. ユーザーエージェントタブレット・スマホの二極で取得
 ================================================================================ */
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
    || u.indexOf("ipad") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    || u.indexOf("kindle") != -1
    || u.indexOf("silk") != -1
    || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

/* ==============================================================================
   1. まずはviewportの変数を設定
 ================================================================================ */
if(navigator.userAgent.indexOf('iPhone') > 0){
  // iPhoneの場合
  if(window.devicePixelRatio == 3) {
      // iPhone6+
      var vpSp = 'width=320px,initial-scale=1.293750,maximum-scale=1.293750,user-scalable=0';
    }else if(window.devicePixelRatio <= 2){
      // iPhone6以下なら
      var height_num = screen.height * window.devicePixelRatio;
      if( height_num > 1136){
        // iPhone6
        var vpSp = 'width=320px,initial-scale=1.171875,maximum-scale=1.171875,user-scalable=0';
      }else{
        // iPhone5+以下
        var vpSp = 'width=320px,initial-scale=1,maximum-scale=1,user-scalable=0';
      }
    }
  }else{
    // iPhoneに非ず
    var vpSp = 'width=320px,initial-scale=1, maximum-scale=1, user-scalable=0';
}

/* ==============================================================================
   2. 次に、viewportの設定
 ================================================================================ */
 var vpPc = 'width=1024px';
  if(_ua.Mobile){ // スマホ用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpSp + '">');

    $(window).on("orientationchange", function() {
        // 傾き検出
        if(Math.abs(window.orientation) === 90) {
          // 横向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
        } else {
          // 縦向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
        }
      });

  }else{ // PC用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpPc+ '">');
  }

/* ==============================================================================
   3. 最後に、ウインドウリサイズ時のviewportの設定
 ================================================================================ */
  $(window).on("resize", function() {
    if( window.matchMedia("(max-width: 479px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
    }
    if( window.matchMedia("(min-width: 480px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
    }
  });
});

色んな方が書いてくださったscriptを、適当に繋ぎ合わせて動かしてるんですが……。

↓↓ いつも一方的に勝手にお世話になっていて、今回もお世話になった方々のブログ記事 ↓↓
2015年版JavaScriptユーザエージェント判別・判定
JavaScript(jQuery)とCSSでiPhone6 Plusを判別するいろいろ
iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法

みんなこういうのどうしてるんだろう……もしかして、もっとスマートな方法があるんだろうか。
ハナからリキッドデザインなんだろうか……。
ちなみに、私はこのコードの中にハンバーガーメニュー用のスライドトグルを初めとし、「スマホデザインで使う関数や色々」とか、「PC用で使う諸々」とかも、2のとこで一緒にぶち込み、ごった煮にしてます。

今更ながら、$(‘meta[name=viewport]’).remove();から$(‘head’).prepend~の下りを、attrで処理した方が数行稼げる気もするのですが、明日にしてもう寝ます。
ちなみに…。

$(window).on("load orientationchange resize", function() {}

こんな風に、ロードもリロードも傾き変化も、全部くくってしまうと設定がまとまって見やすいです。
何故か、後々別々にわけて動かす必要性が出てくるんですけどね……私だけ?

Filed under: , ,

Dreamweaverを捨てきれない理由

お陰様で、昨日子供が卒園しました。
幼稚園で使っていた制服だとか物だとかは半分以上片付けたのですが、捨てることができない物って意外とたくさんありますね。特に、絵なんかは親から見て微笑ましい物が多いので、月替わりで飾ろうかなーとか思って、クローゼットの上の方にしまっておきました。額買わないと……!(親馬鹿)

捨てきれないと言えば、Dreamweaver。
Dreamweaverは、私がSublime Text 2(今は3使ってますが)を使い始めるまでのメインエディタでした。使用暦は、12年くらいになるかも。
確か、cs4あたりからZen-Coding(後継はEmmet)を入れて使ってました。

さて、まずはDreamweaverの欠点から。

  1. 重い
  2. 落ちる

どっちも開発ツールとしては致命的。
保存時にエラー出して固まったりするので、洒落になりません。頻度も多すぎました。

次に、Dreamweaverの良いところ。

  1. プレビュー機能
  2. 強力なサイト管理機能(リンク保持や単体ファイルの検出、テンプレート機能)

プレビュー機能は、マルチディスプレイ環境ならブラウザを常に表示しておく領域が確保できるから要らないって人もいるでしょうが、そうでない場合、どのみちブラウザで確認するとはいえ、あったら便利です。

ただ、フォントサイズの指定にremを用いていると、デザインビューは崩壊としか言いようのない状態になります。
私がメインで使っていた最後のバージョンはCC無印で、ライブビューからの編集はできなかったし、あまり正確でないプレビュー(css3の対応がいまいち)だったので、ブラウザで確認とっていましたが、CC (2014)ではライブビューからの各種修正もできるようになっています。もちろん、css3の疑似セレクタもきちんと理解してくれます。

今ではWordpressの案件がほとんどなのと、それ以外の案件は数ページの小規模サイトが多いのであまり起動することもありませんが、静的ファイル全体のリンク構成を保ちつつ、特定ファイルを別階層に移動……みたいな作業が必要なときは、Dreamweaver一択です。きっと、替わりになるものはないんじゃないでしょうか。
これまでにたくさんのサイトをテンプレート機能を使って作ってきたので、それらサイトの修正にも必要……ということで、Dreamweaverは当分ランチャーの隅に居座りそうです。

Filed under:

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:

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の良いところ

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

Sublime Textのイマイチなところ

  1. プレビュー機能がなく、プレビューから修正ができない
  2. 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:

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

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

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

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

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

Filed under: