Hideki's Note

1週間前

HTML5でOGPを導入する際はprefix属性を使えばいいみたい →

1ヶ月前

SyntaxHighlighter 3.xで空白行がスペース1つになるのを防止する

ブログなどでソースコードのサンプルを表示するに便利なSyntaxHighlighter 3.xですが、3.xでは空白行が 1つに置き換えられ、コピー＆ペーストした際に無駄なスペースが1つ入ってしまいます。

そこで、僕はshCore.jsをOnline JavaScript beautifierで整形し、スペース1つの場合は<br>を入れるように変更しました。

            getLineHtml: function (a, b, c) {
                a = ["line", "number" + b, "index" + a, "alt" + (b % 2 == 0 ? 1 : 2).toString()];
                this.isLineHighlighted(b) && a.push("highlighted");
                b == 0 && a.push("break");
                if (c === "&nbsp;") {
                    return '<div class="' + a.join(" ") + '"><br></div>';
                } else {
                    return '<div class="' + a.join(" ") + '">' + c + "</div>";
                }
            },

表示サンプルは、僕のコードストックを参照。カスタマイズ後のshCore.jsは http://code.skyward-design.net/themes/blog/js/sh/shCore.jsを参照。

2ヶ月前

#Tools

Xcode 4.2 で、iOS 3、iOS4のシミュレータを追加する方法 →

/Developer/Applications/Xcode.appを起動し、[Xcode]-[Preferences]を選択。そしてDownloadsを選択し、「iOS 4.3 Simulator」をInstall。

インストールが完了したら、/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.appを起動し、[ハードウェア]-[バージョン]を見ると、iOS4.3が選択可能になっている。

2ヶ月前

iOSにおいてアプリでURLを開けるかどうかのチェック →

iOSにおいて、利用したいURLスキームがサポートされているか（＝アプリがインストールされているか）をチェックし、サポートされていなければApp Storeへ遷移するスクリプト。Ustreamで利用されているものもほぼこのような感じだった。

自分なりに利用できるよう変更したものはコードストックを参照。

2ヶ月前

a-blog cmsで構築するコードストックシステム

エンジニアとしては日々書くコードの中で、今後も使えそうなものや苦労の末に書き上げたコードは何らかの手段で残しておきたいもの。僕は下記要件を満たすものとしてWordpressを選定し、運用してきました。

コードをストックしたいと思った時に素早く書けるもの
検索性の良いもの
（CMSの場合）コードをエスケープせずそのまま記述できるもの

これで上手くいくかと思っていたのですが、Wordpressの<!— more —>以降をコードとして自動エスケープする仕組みとしていたので、事実上1つのコードサンプルしか掲載できず、不便を感じていました（つまりHTMLとCSSを両方記述し、シンタックスハイライトさせることができない）。

そのような中、a-blog cms勉強会に参加したり、実際にXAMPPにインストールして触ってみたところ、a-blog cmsを使えば思い通りのコードストックシステムが構築できることが分かり、さくらのレンタルサーバーでHideki’s Code Stock（仮称）を構築してみました。

2言語以上のコード掲載・シンタックスハイライトを実現できたのは、a-blog cmsが採用しているユニットを追加して1つのエントリーを完成させていくシステム。必要な言語分だけ「ソース」を指定したユニットを追加してコードを放り込めば、自動でエスケープしてくれます。MTやWPのビジュアルエディタ・カスタムフィールドでは実現できない画期的なシステムだと思います。

※まだサンプルデータしか入れていないため、2言語以上掲載した記事はありません。追って追加します。

2ヶ月前

MACのXAMPPでApacheを複数ポートで立ち上げるとエラーの対処 →

Windowsでは問題なくできたのにMacではできなかったのでどうしたものかと思っていたけど、あっさり解決！

2ヶ月前

Test for ie selector limit →

IE9以下では、1ファイルにつき4,095セレクタまでしか認識しない。Sassでコンパイルする際にCSSを1ファイルにまとめている場合は、サイトの規模によっては注意が必要かもしれない。

2ヶ月前

なぜ @kotarok さんはmixinよりextendを推すのか →

スケーラブルな設計のためには、「要素からスタイル」ではなく、「コンポーネント定義から要素」であるべきではないか。スタイル、デザイン、役割が先にあり、それを文書のフラグメントに割り当てる方が最適なのでは無いか。

スタイルルール群が先にありきで「それをどこに当てるか？」を考えるのが本来の姿。その、「どこに当てるか」を増やしていくメンタルモデルに、 extend が近い。

2ヶ月前 (4リアクション)

#LESS

続・LESSでコンパイルして出力するCSSのフォーマットをカスタマイズする

昨日の「LESSでコンパイルして出力するCSSのフォーマットをカスタマイズする」では、セレクタのフォーマットについて触れなかったので、調査結果を簡単に解説したいと思います。

早速ですが、/Applications/Less.app/Contents/Resources/engines/lib/less/tree/ruleset.jsの165行目に次のような記述が見られます。

                }).join(env.compress ? ',' : (paths.length > 3 ? ',\n' : ', '));

これがコンパイル結果にどう影響をするかは、次のコードを見るとお分かりいただけると思います。

// LESS
h1,h2,h3,h4{
	margin: 0;
}

h1,h2,h3{
	padding: 0;
}

// CSS（前の記事のカスタマイズが反映されています）
h1,
h2,
h3,
h4{
margin:0;
}
h1, h2, h3{
padding:0;
}

もうお気づきかもしれませんが、セレクタが3つまでの場合はカンマ+1スペース、4つ以上の場合はカンマ+改行が入るようになっています。

これを例えばセレクタ毎に改行するように統一するには、ruleset.jsの165行目を次のように変更します。

                }).join(env.compress ? ',' : ',\n');

他に気になるのは、1つのスタイルの記述毎に1つ空行が入ってほしいといったところでしょうか。これは、ruleset.jsの169行目に改行を追加することで解決できます。

                        (env.compress ? '}' : '\n}\n\n'));

最後に@mediaルールを記述した場合のフォーマットですが、これは/Applications/Less.app/Contents/Resources/engines/lib/less/tree/directive.jsの20行目〜22行目に手を加えることでカスタマイズできます。場所のみ赤字で示しておきます。

            return this.name + features + (env.compress ? '{' : ' {\n  ') +
                   this.ruleset.toCSS(ctx, env).trim().replace(/\n/g, '\n  ') +
                               (env.compress ? '}': '\n}\n');

昨日も書きましたが、WinLessの場合はless.jsを書き換えなければならないようです。GitHubから非minified版のless.jsをダウンロードしてファイルを置き換え、記事で示したコードを検索して該当部分を書き換える、という技で解決できるのでは？と思います。

誰もがSassやLESSを使えるにはまだしばらく時間が必要かなと思います。それまでの間、自分だけでもLESSを使って制作を行いたい、といったシーンなどでお役に立てば嬉しく思います。

2ヶ月前 (4リアクション)

#LESS

LESSでコンパイルして出力するCSSのフォーマットをカスタマイズする

Sassでコンパイルして出力するCSSのフォーマットをカスタマイズする方法は、私のブログ記事「Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント」でご紹介していますが、LESSでも同じようなことができないか少しだけ見てみました。コンパイルに利用したのはLESS.appです~~が、私の推測では他のアプリでもきっと同じファイルがあるのではないかと思っています~~。

デフォルトのCSS出力フォーマットは次の通りですが、

body {
  margin: 0;
}

/Applications/Less.app/Contents/Resources/engines/lib/less/tree/ruleset.jsの167行目を次のように変更すると、

                        (env.compress ? '{' : '{\n  ') +

このようにセレクタの後のスペースが削除できます。

body{
  margin: 0;
}

また、/Applications/Less.app/Contents/Resources/engines/lib/less/tree/rule.jsの17行目を次のように変更すると、

        return this.name + (env.compress ? ':' : ':') +

値の前のスペースが削除できます。

body{
  margin:0;
}

さらに、/Applications/Less.app/Contents/Resources/engines/lib/less/tree/ruleset.jsの167行目〜168行目を次のように変更すると（最初の変更例と行が重複しています）、

                        (env.compress ? '{' : '{\n') +
                        rules.join(env.compress ? '' : '\n') +

プロパティの前の2スペースが削除できます。

body{
margin:0;
padding:0;
}

カスタマイズの際はLESS.appの再起動は必要なく、ファイルを書き換えた後に「Compile All」ボタンを押せばOKです。

普段Sass(Compass)使いなのでこれでOKなのか謎ですが、参考になりましたら幸いです。

※WinLessだとless.jsを書き換えなければならないようです。" {\n "で検索をかけるとヒントがつかめるかと思います。

※続編を書きました。