【jQuery】 bodyIDを参照して画像を置換する方法
先ほどまで、どーやればいいのかなーと考え考えやってみたので備忘録のために記事にします。
記事内のソースは好きに流用でもなんでもしてください。
やりたいこと
例えばグロナビなどでSSIを使ってて、すべてのページで共通利用している場合に各カテゴリでのstay表示をどーしようかいろいろ試行錯誤してました。
そして、私はけっこうな頻度でbodyにそのカテゴリを示すIDを付けていろいろとやることが多いので、これのbodyIDを使って画像の置換ができれば楽ちんだなーと思いやってみました。ていうか、世の中的にはみなさまとっくにやってることでしょうが、今更やってみたのです。
というわけで、
「bodyIDを参照して画像を置換する方法」です。
HTML
- body
<body id="btnA">
ボディに好きなIDを振っておきます。なんでもいいです。仮に「btnA」などと書いてますが、普通にカテゴリ名「company」とかなんでも大丈夫です。
- グロナビ
<ul class="imgReplace">
<li class="btnA"><a href=""><img src="common/img/btn_A-off.png" alt="ボタンA" width="192" height="100"></a></li>
<li class="btnB"><a href=""><img src="common/img/btn_B-off.png" alt="ボタンB" width="192" height="100"></a></li>
<li class="btnC"><a href=""><img src="common/img/btn_C-off.png" alt="ボタンC" width="192" height="100"></a></li>
<li class="btnD"><a href=""><img src="common/img/btn_D-off.png" alt="ボタンD" width="192" height="100"></a></li>
<li class="btnE"><a href=""><img src="common/img/btn_E-off.png" alt="ボタンE" width="192" height="100"></a></li>
</ul>
画像を置換したい対象のナビをulで組んで、ulに「imgReplace」とclassを付けます。各liにはclassでbodyに振った各IDを付けていきます。ここでは、仮にbtnA～btnEとしてます。
今回は、bodyIDがbtnAの場合に、btnAというclassが付いているliに属するimgを置換していこうと思います。
jQuery
//--- image replace ---------------------------------------------------------------//
var bodyID = $('body').attr('id');
$('.imgReplace li').each(function() {
var navClass = $(this).attr('class');
var targetImg = $(this).find('img');
if (navClass == bodyID) {
$(targetImg).attr('src',$(targetImg).attr('src').replace('-off','-on'));
};
});
これだけです。
一応、1行ずつ解説してみます。・・・自信ないけど。
2行目の「var bodyID = $('body').attr('id');」でそのページのIDを取得します。
4行目からが画像置換の命令になるのですが、「$('.imgReplace li').each(function() { ～ });」は「imgReplaceというclassの中の各liで」という命令です。そのあと、
「var navClass = $(this).attr('class');」でそのliのclass名を取得して、実際に置換したい画像を「var targetImg = $(this).find('img');」で変数に入れておきます。
「if (navClass == bodyID)」でbodyIDとliのclass名を見比べて、同一だった場合に「$(targetImg).attr('src',$(targetImg).attr('src').replace('-off','-on'));」で画像置換をしています。
無駄な記述も多々あると思いますが・・・。IE8～とchromeで動作確認できました。
今日からがんばると宣言した日に2回目の投稿！
素晴らしい。明日もがんばろう。
このテンプレートだとソース書いたときに超絶見にくいので違うテンプレートを探そうと思います。
本日参考にさせていただいたサイト
Macのapache設定のための、ターミナル起動からの、viの操作
3日坊主ではなかったけど、4日坊主で止まってしまったブログ更新。
毎日更新を1か月やろうと試みているのだけど、むずかしいですね。
今日からまたがんばる。
ということで、今日はつい最近おうちのMacで苦労した「Macのapache設定」・・・・・ではなくてそれよりも前段階の「ターミナル起動してviを操作する」っていうのをまとめたいと思います。
私viってものはほとんど触ったことなくて、大学のなんかの情報系の授業ですこーしだけやってみて意味のわからないまま今日まできたような感じです。たまに必要なときがあって、その時はgoogle先生にお伺いをたてていろいろな方のブログなどを参考にどーにかしてました。
ただ！このブログタイトルは「ひとりできるもんっっ！」です。その名の通り、必要最低限なことはひとりでできるようになりたいなという願いがあります。
ということで、この際だからちょっとしたことはgoogle先生にお伺いをたてなくてもできるようになりたいと思います。
ターミナル起動
windowsでいうところの「コマンドプロンプト」のようなものですね。
これを起動して、httpd.confとかhttpd-vhosts.confにアクセスしてviで編集して設定するという感じです。
「アプリケーション > ユーティリティ > ターミナル」
これでも起動できます。
Dockに入れておいてもいいし、ショートカット割り当ててもいいかもです。
ターミナルを起動すると「MacName:~ UserName$」が表示されてると思います。この$のうしろにコマンドを入力していろいろやります。コマンドを入力してreturnで実行です。
コマンド
コマンドにはいろいろな種類があるので、ここで一つ一つの紹介はしません。なので、apache関連で使用するコマンドのみを紹介します。
sudo
sudoとは管理者（Super User）として実行（Do）、実効せよという意味です。Mac OS Xに置いては管理者権限は、絶対的な権限を持っています。
OSに不具合を引き起こさせるを指示するコマンドすら、実行させてしまいます。
OSを起動できなくすることも、使い方によっては簡単にできてしまいます。間違って使えば、恐ろしい結果が待っています。
注意して使ってください。
apacheの設定のために、httpd.comfなどを編集する際に、
「$ sudo vi /etc/apache2/httpd.conf」
とコマンドを入力すると、「管理者としてviで/etc/apache2/httpd.confを使用する」という意図になります。
viの使い方
さっきのコマンドを入力してreturnを押すと、httpd.confが出てきます。基本的にマウスなどのスクロールで行を移動することもできないし、そのまま入力もできないという状態なので、ここでviのコマンドを打つ必要が出てきます。
とはいえ、apacheの設定するくらいならほんの少しのコマンドを覚えればいいので、せっかくなんで覚えちゃいましょう。
文字の入力
- <i> カーソル位置に入力
- <I> 行の先頭に入力
- <a> カーソル位置の直後に入力
- <A> 行の末尾でに入力
- <ESC> 挿入モードを終了
削除
- <x> 1文字 の削除
- <dl> 1文字 の削除
- <dw> 1単語 の削除
- <dd> 1行 の削除
- <d0> 行頭からカーソルの直前まで の削除
- <d$> カーソルの位置から行末まで の削除
保存と終了
- <:w> 保存
- <:wq> 保存して終了
- <:q> 保存せずに終了（変更点がある場合は終了できない）
- <:q!> 保存せずに終了(変更点がある場合は破棄される)
これさえ覚えておけば、apacheの設定だけで言えばOK！他のはまた必要になったときに覚えればいいかなと思います。
これで、apacheの設定を行うことができるようになりました。
明日は、apacheの設定まとめをします。
本日参考にさせていただいたサイト
Sublime Text 2からSublime Text 3への移行 【Package編】
もう、見た目も使いやすくなったしいい感じなのですが、Sublime Textのいいところは豊富な機能拡張ですので、そこを本日はまとめていきます。
おとといの記事で紹介したように、Sublime TextにはPackageと呼ばれる機能拡張ができるものがたくさん用意されています。
Sublime Text 2からSublime Text 3への移行 【基本編】 - ひとりでできるもんっっ！
何を使うかは、個人の好みが大きくかかわってくるので、とりあえず私が使用しているものと使用をやめたものをまとめてみました。きっと、今後も多分増やしたり減らしたりするけど・・とりあえず現段階ってことで。
使っているPackage
- AutoFileName
imgタグのwidthやheightを補完してくれる。
ちなみに、こちらのPackageはデフォルトだと、「height="" width=""」の順番で補完されるので、これを「width="" height=""」の順番にしたい場合は、「基本設定 > ユーザ」に下記の一文を足せばOKです。
// AutoFileNameのwidthとheightの順番
"afn_insert_width_first": true
- BracketHighlighter
対応する括弧を強調表示してくれる。
jQueryの自動補完をしてくれる。
- LiveStyle
Chromeと合わせて使うと爆速で素敵なマークアップを送れるPackageだが、まだその可能性は未知数のためとりあえず入れてあるだけです。
このPackageについては、こちらを参考にされるといいと思います。
Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆！ | 株式会社LIG
- MoveTab
タブを自由に動かせる
- SideBarEnhancements
サイドバーで右クリック操作ができる。
- SimpleClone
画面分割が簡単にできるようになる。
- SublimeLinter
書いているソースのLintチェックをしてくれる。
私は、SublimeLinterは「html-tidy」と「jshint」だけ使っています。他にもいろいろあるので自分が何を使うかによって使い分けるといいと思います。
- Tag
HTMLタグなどの自動補完です。
これ、一応入れているのですが別に必要ないかも・・・って思い始めてるからもしかしたら近いうちに削除するかもです。
使うのをやめたPackage
- HTMLAttributes
Tagで充分だったので、削除しました。
Tagで充分だったので、削除しました。
なんか、自動補完すてきだーーーーと思っていろいろ入れて使っていたのですが、Sublime Textのデフォルトで付いている補完機能で充分だったので、こんな感じになりました。
これで、ひととおりのSublime Textの設定が終わり、無事に会社のwindowsもおうちのmacも2から3に移行できました。
よかったよかった。
本日参考にさせていただいたサイト
Sublime Text 2からSublime Text 3への移行 【設定編】
昨日は、インストールから日本語対応までを行ったので、ひとまずエディタとして利用できるところまでは完了しました。
今日は、より使いやすくするための設定をまとめたいと思います。
この設定については、Sublime Text2でも3でも共通して使えるものだと思います。
初期状態だと、Sublime Textの見た目は下図のように至ってシンプルなものです。これはこれでよいのですが、もう少し便利にしたいと思います。
サイドバーの表示
Dreamweaverを使っていた方には馴染み深い、サイドバーでファイルをずらっと見せる方法です。
上部メニューの「表示 > サイドバー > 表示/非表示」でサイドバーが出現します。さらに、そのサイドバーにフォルダーをドラッグするとフォルダ一覧が生成されます。これで、エクスプローラーからファイルを開かずにサイドバーから直接開けて便利です。
ミニマップの表示
Sublime Textで自分として便利だと感じている機能の1つに「ミニマップの表示」があります。下図の赤い枠で囲まれた部分です。
ミニマップは、開いているファイルの表示している場所を示してくれるものなのですが、これがすごく便利！！
ながーーーーーいソースコードの場合に下の方に移動するのにスクロールするのがめんどうだったり、上に戻るのがめんどうだったりします。このミニマップだとマップ上の移動したい先をクリックするとそこに移動できます。ぜひ使ってみたらいいと思います！！
ユーザー設定をいろいろと
ここまでで、見た目の部分の設定できてきました。次に、フォントのサイズやインデントなどの設定を行いたいと思います。上部メニューの「基本設定 > 基本設定-ユーザ」を選択するとJSONが出てきて、ここにつらつらと設定を追加していきます。
- // 作業スペースの色合い
"color_scheme": "Packages/User/Monokai Bright (SL).tmTheme",
- // ホワイトスペースを見えるようにする
"draw_white_space": "all",
- // 使用するフォント
"font_face": "Ricty",
- // フォントサイズ
"font_size": 15,
- // 現在行の強調
"highlight_line": true,
- // 保存されていないファイルのタブを強調
"highlight_modified_tabs": true,
- // 使用しないパッケージ
"ignored_packages":
[
"Vintage"
],
- // 行の上の余白
"line_padding_top": 3,
- // 行の下の余白
"line_padding_bottom": 3,
- // インデントの大きさ
"tab_size": 3,
- // 行末の空白を削除する
"trim_trailing_white_space_on_save": true,
- // テキストの折り返し
"word_wrap": true,
- // 自動インデント
"auto_indent": true,
- // 自動補完の遅延時間
"auto_complete_delay": 20,
- // ファイルのフルパスを表示
"show_full_path": true,
これに関しては個人の好みなどが多々あるので、あくまでも私の設定なのでこれを参考に変えてみてください。
それと、これも個人的な好みなのですが私はctrl + tabを多用してタブの切り替えを行いたいので、この動作をDreamweaverと同じになるように、「基本設定 > キーバインド-ユーザ」を開いて下記を書いておきました。これもお好みで。
- // Ctrl + Tab でタブの切り替えがDreamweaverと同じにする
{ "keys": ["ctrl+tab"], "command": "next_view" },
{ "keys": ["ctrl+shift+tab"], "command": "prev_view" },
{ "keys": ["ctrl+pagedown"], "command": "next_view_in_stack" },
{ "keys": ["ctrl+pageup"], "command": "prev_view_in_stack" },
以上が、ユーザー設定のもろもろでした。
明日は、やっとPackageをまとめます。
このまとめを機に自分の膨れ上がったPackageを整理していきたいと思います。
本日参考にさせていただいたサイト
- Sublime Text 3の設定をしてみる - 好きな設定に出来るSublime Textは最高 / 自分の設定も晒す | stryhの日記 ~stryh/changelog
- Sublime Text 2 のDefault設定ファイルを眺める - blue_ham_cake1024のブログ
- Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
Sublime Text 2からSublime Text 3への移行 【基本編】
ずっと、やらなきゃと思ってめんどくさがっていたこと。
それは、「Sublime Text 3」への移行です。
Package Controlが普通に使えるようになったら、やろうと思っていたらとっくに普通に使えるようになってました。ということで、会社のwindowsもおうちのMacも「Sublime Text 3」に一気に移行する決心ができたので、今後の備忘録も兼ねて、記事にしておきます。
まずは、基本です。
設定については明日あたりにまとめる予定。
そして、Packageについては明後日あたりにまとめる予定。
インストール
「Sublime Text 2」と「Sublime Text 3」はアップグレードとかではなく、まったく別のソフトなんですね。ということで、Sublime Text 2をすでに持ってる人もまだSublime Text を使ったことがない人も、普通にSublime Text - Downloadここからダウンロードして、インストールです。
ちなみに、
各OS名の部分にあるリンクがインストーラーがダウンロードできて、「portable version」というリンクがexeがダウンロードできるリンクでした。どちらを利用するのかは、お好みでいいかと。
Package Controlを利用できるようにする
Sublime Textの素敵な機能として、Packageを利用して様々な拡張ができることがあります。これを利用できるようにするために、Package Controlという機能をSublime Textで有効にする必要があります。
以下がその手順です。
Sublime Text 3を起動させて、上部のメニューから「View > Show Console」を選びます。そーすると下の画像の赤枠ような入力エリアが出てくるので、
そこに
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
をコピーして貼り付けて return（enter）キーを押します。
このコピーするテキストは Installation - Package Control で入手できます。
これで、Package Controlが有効になりました。
日本語対応する
次に、Sublime Text 3は基本的に英語なので、使いやすいように日本語対応しようと思います。英語がペラペラだったり、英語の勉強中ならこの作業はしないで英語のままでいいかと思います。
Package Controlが有効になったら、「Shift＋Command＋P（Shift＋Ctrl＋P）」を押してCommand Paletteを出します。「Command Palette」はいろんな機能へのショートカットみたいなものだと私は思ってます。出てきたCommand Paletteに「Install」と入力して「Package Control: Install Package」を選びます。
少し待っていると、インストールできるパッケージがずらっと出てくるので、先ほど「Install」と入力した場所に今度は「japanize」と入力します。すると、日本語対応用のファイルが見つかるのでそれを選択したら完了です。
上部のメニュー部分はこれで日本語対応できました。
次に細かいメニュー内も日本語対応させます。
これは、
“Sublime Text 3”が使いやすい！初心者でも簡単な“Sublime Text”の設定方法 | WordPressプラグイン 役立つ情報 - luna plate
こちらを参考にさせてもらいました。
以下、引用
1. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
にコピーします。
※Defaultフォルダがない場合は作成してください。「Default」フォルダを作成します。
「Japanize」フォルダから最後に「.jp」と付いているファイルを全て「Default」フォルダにコピーします。2. コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
Defaultフォルダに移したら、コピーしたファイル全てから「.jp」だけを削除してください。
前にファイルがある場合は最後に「.org」を付けるか、頭に「_(アンダーバー)」を付ける等して別名で残します。3. C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User
にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
「Japanize」フォルダにある「Main.sublime-menu」を「Japanize」フォルダと同じところにある「User」フォルダの中にコピーします。
ありがたいです。
ありがとうございます。
インラインで日本語入力をできるようにする
メニューなどは日本語で表示されるのですが、肝心の入力時に日本語を入力すると画面左上に小窓が出てきてその中に日本語入力されて・・・みたいなちょっと見づらい状態になります。これを他のエディタ同様の挙動にするために、Packageを1つインストールします。
日本語対応の時と同様に「Shift＋Command＋P（Shift＋Ctrl＋P）」を押してCommand Paletteを出します。出てきたCommand Paletteに「Install」と入力して「Package Control: Install Package」を選びます。「IME Support」と入力して選択してインストール完了です。
これで、日本語もインライン入力できるようになりました。
メニューの日本語対応をしなかった方も、これはやっておいた方がいいと思います。
本日参考にさせていただいたサイト
- MacにSublime Text 3をインストールし日本語化する方法まとめ – Gadget Drawer
-
“Sublime Text 3”が使いやすい！初心者でも簡単な“Sublime Text”の設定方法 | WordPressプラグイン 役立つ情報 - luna plate
以上、まずは基本編でした。
私はまだ本気出してないだけ。
今年からブログやる。
キリよく元旦から始めるぞ！！
・・・・あ。
いつのまにか、お正月休み終わっちゃった。
じゃあ、来月からブログやる。
キリよく2月1日から始めるぞ！！
・・・・あ。
いつのまにか、ソチオリンピック始まっちゃった。
じゃあ、来月から (ry
このまま、次のキリのいいお日にちとか考えてると
おそらく2014年が終わってしまう。
なので、今日から始めます。
