OctopressのデフォルトJavaScriptについて

Octopressでデフォルトで入ってるJavaScriptをチェックして必要無さそうだったので削除したのでそのメモ。

octopress.jsとmodernizr-2.0.js
まとめ

octopress.jsとmodernizr-2.0.js

Octopressでデフォルトで入ってる主なJavaScriptは octopress.jsとmodernizr-2.0.jsです。

他、github.jsとかtwitter.jsとかサイドバーに3rdパーティー情報を載せる様なのが入ってますがこれらはもともと使ってません。

後はlibs/jquery.min.jsももし外部から取れなかった時様に入ってますがこれも今は使っていません。 (deferとか使うのが面倒なので。)

ということで、主に上の2つなわけですが、ちょっと見た感じ殆ど使ってないような感じがしたので何が必要なのか見てみました。

getNav

getNav()はナビゲーションバーをドロップダウン表示にしてくれる物。 Octopressのページを縮めるとナビゲーションバーのメニューがドロップダウンメニューになることがわかると思います。

ですが octogray では使ってないので必要なし。

ついでにここで使っているだけのCSSの fieldset.mobile-navに関する物もscss/partials/_navigation.scssから削除。

addSidebarToggler

addSidebarToggler()はサイドバーの上の方にサイドバーを引っ込める(下に送る)為のボタンを追加してくれる関数。

これは最近まで使ってましたが、付ける位ならサイドバーをもともと下にするかどっちか、という感じもするので使わないようにしました。

下に行った時に、各パーツにodd、evenやthirdといったクラスを付け加える機能も有りますが、これらは特に画面が広い状態で下に行った時に重要になるものなので、サイドバーを固定してしまえば(幅が狭い時だけ下に行くようにすれば)差し当たり無くても大丈夫なのでこれらに関するものもsass/base/_layout.scssから削除。

サイドバーをどうするかは考え中。

testFeatures

testFeatures()は maskImageというクラスとplaceFolderというクラスを全体に足しています。

maskImageは

ul[data-subscription$=email]
rel=subscribe-rss, rel=subscribe-email

に関する要素の設定をしていますが、これらは classicテーマのnavigation.html内の

.maskImage {
  ul.subscription { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
  a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
  a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
}

に関するもの。これらのものはoctograyでは使ってないもの。

SCSSはsass/partials/_navigation.scss。実際にはもう少しサイズによる指定みたいなのもありますがmaskImageに囲われた物を全削除。後、mask-subscription-navもこのmaskImageの中だけで使われてるので削除。さらにsass/base/_utilities.scssの mask-imageもmask-subscription-navでしか使われてないので削除。

placefolderに関しては

.no-placeholder {
  body > nav .search {
    background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
    text-indent: 1.3em;
  }
}

というのがやはり_navigation.scssの中にありますが、これはnavigation.htmlの中で

<input class="search" type="text" name="q" results="0" placeholder="Search"/>

に対して使っています。これはsimple_searchを選んだ時だけのものですが、今は使ってないので必要なし。

またもし使うとしてもtestFeaturesがやってることは placefolder ¹ が効かない場合にsearch.pngをバックグラウンドに置いてるだけ。

なのでこれのCSSも_navigation.scssから削除。

ちなみにこの中ではModernizrを使っています。

addCodeLineNumbers

addCodeLineNumbers()はGistで取ってきたコードに対してラインナンバーを付ける関数ですが、 Gistの仕様が変わっていて関数の中で使ってるdiv.gist-highlightというクラスも今は取ってきたGistのコードの中にありません。

取り敢えず消してみてCode testで確認する限りは大丈夫。

コレに関して、 sass/partials/_syntax.scssからもgist-highlightに関するものを消しておく。

flashVideoFallback, wrapFlashVideos

flashVideoFallback()、wrapFlashVideos()は {% fnin %}Video Tag - Octopress{% endfnin %} はmp4ビデオを簡単に載せられるタグの{% video… %}(またはHTMLで直接class='flash-video')に関する関数ですが今まで使ってないし使う予定も無いので外しても大丈夫。

これで必要なければplugins/video_tag.rbも削除可能。 (ただ、これはplugins内なのでテーマ関係なくあるものなので別にむりして削除しなくてもOK。試しに他に移して見たりしてgenerateすれば使ってないことが直ぐ分かったりはしますが。)

SCSSではsass/partials/_blog.scssから video、flash-videoに関する物を削除。

さらにsource/assets/も中にあるjwplayerのファイルがvideoタグで使われてるものだけなのでこのディレクトリも削除。

また、このflashVideoFallbackの中でもModernizrを使ってますが使っているのはこれとflashVideoFallbackだけです。

ここまででtestFeaturesとflashVideoFallbackが必要なくなったので、 modernizr-2.0.jsも削除することが出来ます。 (自分のJavaScriptとかでは使ってないので。)

renderDeliciousLinks

renderDeliciousLinks()は ./_includes/asides/delicious.htmlで使われてるだけ。今はこのサイドバーのパーツは使ってないし使うつもりもないのでで削除可能。

これを消してしまうと中途半端になるので上のHTMLも削除。

iOS scaling bug fix

iOS scaling bug fixの部分ですが 2011年頃に言われてたもので、ページを表示してから横に倒したりなどして Landscape viewにするとページがはみ出してしまったりする、と言うバグを直したものみたいですが、手元のiPhoneのSafariで言われてる様なデモページ ² を見てみたところ今は問題無さそうなので削除。