カテゴリー : Blog

jQueryを使用したjExpandの導入方法

本日は、Blog関係の記事を書きたいと思います。
随分前から自作PCの記事を書いてきましたが、そこで使用されている「表組み」について解説します。
以下が、実際に表組みが使用されている記事のリンクです。

 大関の自作PCへの道!電源とCPUクーラーとOS編

表組みを作るにあたって、各製品を比較しやすいものが良かったのですが、比較しやすいように詳細を記載すると表組みが長くなってしまうので「折りたたみ」で必要な情報を任意に見れるようにする必要がありました。
このような動的な表組みを実現するには「jQuery」が必要でした。
jQueryは、JavaScriptとHTMLを相互に使用するWEBプログラムの一つです。

プログラムというと難しい印象がありますが、テンプレートやサンプルが多く配布されているので、それを使用するだけでも簡単に導入出来ます。
実際に今回の表組みは「jExpand」というものをベースに使用しました。

さて解説ですが、以下の内容で解説していこうと思います。

 1. jExpandのファイル
 2. CSS
 3. HTML
 4. WordPressのカスタマイズ

ただ、今回解説する導入方法は、jExpandのサンプルファイルのままでは無く、通常の表組みに実装するという、完全とは言えない状況なので参考程度に留めておいて下さい。
それでは、以下に導入方法を記載します。

1. jExpandのファイル
 まずはjExpandのファイルを公式サイトからダウンロードします。
  jExpand

 解凍すると、色々ファイルが入っていますが、重要なのは以下の2点です。

  ・arrows.png
    表組みの展開を示す「矢印のアイコン画像」です。
    これを必ずしも使用する必要はありませんが、便利でしたのでそのまま使用します。
  ・jExpand.js
    jExpandを実装させるために必要な「JavaScriptのファイル」です。
    ただし、どのようなスクリプトになっているか内容を確認するだけで構いません。

 ここでは、とりあえず「arrows.png」のみを任意のフォルダに入れてWordPressが置かれているサーバーにコピーします。
コピーする場所はどこでも構いませんが以下の2点がオススメです。

  ▼/wp-content/themes/(任意のテーマフォルダ)/
    テーマフォルダに入れるので、WordPressを引っ越す場合も忘れにくいです。
    ただ、違うテーマに変更した時にjExpandが機能しなくなるので注意です。
  ▼/wp-content/uploads/jexpand/
    テーマに左右されずjExpandを機能させる事が出来ます。
    WordPressの構成が変更になったり、引っ越した場合に機能しなく恐れがあります。

2. CSS
 今回はWordPressで標準で使用している表組みに組み込む事と、自作PCのスペック表のために文字等を装飾する必要がありました。
そのため独自にCSSを少し追加しました。

ですので、普通の表組みで使用する場合は必要がない部分もあると思いますので、その時は的然、該当する箇所を削除する事をオススメします。
以下がCSSの内容です。
数字で指摘している部分は、後述する表組みの装飾されている箇所です。

#table {
	border-collapse:collapse;
	}

/* 1.テーブル全体の文字等の装飾 */
#table td {
	color:#555;
	font-size:90%;
	}
#table tr.odd td {
	cursor:pointer;
	}

/* 2.矢印画像 */
#table div {
	position:relative;
	left:14px;
	}
#table div.arrow {
	background:transparent url(http://(サイトURL)/wp-content/uploads/jexpand/arrows.png) no-repeat scroll 0px -16px;
	width:16px;
	height:16px;
	display:block;
	}
#table div.up {
	background-position:0px 0px;
	}

/* 3.製品画像 */
#table img {
	float:right;
	}

/* 4.詳細項目文字(「スペック」「参考サイト」) */
#table h4 {
	margin:0px;
	padding:0px;
	}

/* 5.スペック 文字 */
#table p {
	font-size:80%;
	margin:0px 0px 0px 20px;
	padding:0px;
	}
#table p span {
	font-weight:bold;
	display:inline-block;
	width:150px;
	}

/* 6.参考サイト 文字 */
#table ul {
	margin:5px 0px 0px 15px;
	padding:0px;
	}

jExpand 「CSS装飾」

各箇所の文字の大きさや配置等をCSSで指定しています。
矢印画像をクリック出来るようにしているのも、このCSSでの指定となっています。
矢印画像へのリンクは、サーバーにアップロードした場所を指定して下さい。

また、各タグの先頭文字に記載されている「#table」ですが、これはiExpandを適用させたい表組み毎に、違うものを指定する必要があります。
つまり、表組みが二つあれば、「#tableA」「#tableB」というように違うものを指定しなくてはいけません。
文字自体は任意のもので構いません。

3. HTML
 実際に記述するHTML自体は通常のものと殆ど変更ありません。
ただ、一部CSSを適用するための指定が必要です。
以下が、サンプルのHTMLになります。

<table id="table">
	<tr>
		<th></th>
		<th>製品名</th>
		<th>価格</th>
		<th>詳細</th>
	</tr>
	<tr>
		<td>ビデオカード</td>
		<td>GTX680-DC2T-2GD5</td>
		<td>70,700円</td>
		<td><div class="arrow"></div></td> //空のセルに矢印画像を表示
	</tr>
	<tr> //折りたたみで表示される項目
		<td colspan="4"> //セル何個分を結合するか指定。上記のtdタグの数と同じにする
			<img src="画像URL" alt="画像の説明" /> //右側に表示される画像
			<h4>◯題名1</h4> //左上に表示される題名
			<p><span>"左の項目"</span>"右の項目"</p> //それぞれ左寄せで表示される文字。簡易表組みみたいな感じ。

			<h4>◯題名2</h4> //二つ目に表示される題名
			<ul> //リスト表示
				<li>リスト文字</li>
			</ul>
		</td>
	</tr>
</table>

基本的には通常表組みタグで構成されます。
「table」の後に「id=table」と記載し、前述したCSSを指定するためのidを指定します。
つまり前述のCSSと、ここのidは一緒でなくてはならないわけです。

そして「矢印画像」が入る場所には「div」を追加し、「class=”arrow”」を記載する必要があります。
これで矢印画像がクリック出来るようになり、詳細項目がプルダウンします。

詳細項目は、実はセルが結合されて一つになっているように見えているので、全体のセルの数を「colspan=”セルの数”」とい風に指定する必要があります。
項目は、画像を「img」で、項目名を「h4」で、通常の文字は「p」でくくります。
「p」の中で「span」を指定すると、左寄せの文字で空間を空けて簡易表組みのように出来ます。
同様に「ul」と「li」でリストも使用出来ます。

4. WordPressのカスタマイズ
 jExpandを使用するのに、WordPress側のカスタマイズも必要になります。
ただ、普通の方法で行うとBlog全体に影響してしまうので、jExpandを使用する記事単位などの、影響が最小限になる方法を解説します。

まずは、jExpandで使用するCSSとJavaScriptを任意の記事だけで使用する方法です。
これを実現するためにはWordPressのPluginである「add css js」が必要です。

 add css js

このPluginは、任意の記事に対して、指定したCSSの記述やファイル、JavaScriptの記述やファイルを指定出来るというものです。
これで、他の記事に余計なCSSやJavaScriptが入るのを防ぐ事が出来ます。
インストールは解凍したファイルをWordPressのPluginフォルダに入れるだけです。

さて、インストールが完了しましたら、記事投稿画面の「カスタムフィールド欄」に以下のルールで記述します。

add css jsのルール
名前
css 任意のCSSを記述
cssfile CSSファイルまでのパス
js 任意のJavaScriptを記述
jsfile JavaScriptファイルまでのパス

具体的にjExpandを使用するためには、以下のようにカスタムフィールドに入力します。
 名前:css 値:(前述したCSSを記述)
 名前:js  値:(以下のJavaScriptを記述)

jQuery(document).ready(function()
	{
		jQuery("#table tr:odd").addClass("odd");
		jQuery("#table tr:not(.odd)").hide();
		jQuery("#table tr:first-child").show();
		jQuery("#table tr.odd").click(function()
	{
		if(!$(this).next("tr").hasClass('shown'))
			{
				$(this).next("tr").show()
				$(this).find(".arrow").toggleClass("up");
				$(this).next("tr").addClass("shown");
			}
		else
			{
				$(this).next("tr").hide()
				$(this).find(".arrow").toggleClass("up");
				$(this).next("tr").removeClass("shown");
			}
	});
//jQuery("#table").jExpand();
	});

ここでも「#table」となっている所は、CSSやHTMLで記述したものと揃える必要があります。
もし、二つ以上の表組みを使用したい場合は、CSSやJavaScript、HTMLを改行して、同内容をペーストし、「#table」の部分を違うものに書き換えれば二つ目以降の表組みも機能するはずです。

最後に、jExpandを機能させる重要な「jQuery」を読みこませる設定です。
WordPressには標準でjQueryが搭載されていますが、これを使用するとjExpandが上手く動作しない事が多いです。
ですので、Googleが提供しているjQueryを読みこませる設定をします。
ただし、これをサイト全体で使用してしまうと、他のページで不具合が出る可能性(特に管理画面)があるので、管理画面ではGoogleのは使用しないという設定をします。

以下の記述を、使用しているWordPressのテーマにある「function.php」に追記します。
テーマが変更になった場合は、同様にfunxtion.phpに記述する事を忘れないようにしましょう。

<?php
	// jExpandのために追記
	// 管理画面以外ではデフォルトのjQueryは読み込まずGoogle APIのものを読み込む
	function load_cdn()
		{
			if ( !is_admin() )
				{
					wp_deregister_script('jquery'); // WordPressデフォルトで読み込まれるjQueryをキャンセル
					wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); // Google APIからmin版の最新のものを読み込んでいる
				}
		}
	add_action('init', 'load_cdn');
?>

以上で、全ての設定は終了です。
jExpandを正常に動いている事を確認しましょう。
かなり専門的な話しになってしまいましたが、自分で色々調べてみたのですが、jExpandを実際に導入する手法が詳しく書いてあるサイトがあまり無かったので、まとめがてら記事にしてみました。
それでは今回はこの辺で!

Blog更新再開

まただい〜ぶ更新が滞ってしまったんですが、ようやく仕事が落ち着きまして、長期休暇を取る事が出来ている状況です。
良い機会だったので、Blogの方も少し整理しました。

 ・テーマの変更
 ・テーマ変更に伴い記事の不具合修正
 ・Pluginの整理
 ・解説ページの一部を最新の情報に
 ・タグを追加

少しだけですが、以上の内容で修正しました。

テーマは変更しましたが、前回のものと制作されている方が一緒なので、シンプルなテーマとなっています。
前回のはBlogの幅が決められていたのですが、今回から可変幅に対応しています。
後は、テーブル周りとかPlugin周りとかをカスタマイズしていたので、それを新しいテーマに適応して、既存の記事に不具合出ないようにしています。

次に、Pluginの整理です。
TwitterのPluginがバージョン新しくなって不具合が出てしまったので、新しいものに変更しました。
今回は「WP to Twitter」というものを使用しました。
問題無ければ正式に使っていこうと思っています。

解説ページの方は、新しいPCを購入したので、それの情報を追加したくらいです。

タグは、今まではカテゴリーのみの分類をしていたのですが、カテゴリーだけでは分類しにくい記事もあったので、今回からはタグでも整理する事にしました。

Blog部分に関しては以上ですが、これからはもう少し更新間隔を以前に戻して行こうと思います。
サボっちゃいけませんね。
これからの主な記事は、雑記、PSO2、PC関連、動画制作・配信解説、CG関連、などを扱っていこうと思います。
それではまた!

近況とXSplit自動枠取り解説

またまただい〜ぶ更新があいてしまいました。

とりあえず、ちまちま作っていたXSplitの解説ページを追加しましたので、ご紹介。
今回はXSplitを使用して、ニコ生の自動枠取りをしようという内容です。
詳細は以下のページを見て下さい。

 どすこい!人生 XSplitの自動枠取りページ

さて、次に近況をご報告。
ゴールデンウィーク突入前は、やはり仕事が忙しく、休出と徹夜が続いていました。
ゴールデンウィーク中も数日出勤しましたが、最近になってようやく仕事の方は落ち着きました状況です。

ゴールデンウィーク中は、家の片付けや、生放送、寝溜めw などなどしてgdgdして過ごしていましたね。
後は、リアルフレとスパIV合宿でしょうか。
そういえば、セス使ってみたけど面白かったですね。
もうちょっと練習してみようと思いました。

という感じで、短めですが近況のご報告でした。
次回は、また解説ページの追加とかのご報告になりそうです。
それでは!

NCVの解説と近況

え〜、だいぶ更新があいてしまいました。
ここ2週間くらい仕事が猛烈に忙しく、深夜帰宅が続いていまして、なかなかBlogの更新も手が付けられませんでした。
まだゴールデンウィークに向けて、というかゴールデンウィーク中も仕事が続きそうなので、また少し更新があきそうですが、ちまちまページは作っていこうと思っています。

さて、今回はニコ生の解説ページを追加しました。
今回はNiconama Comment Viewerについてです。
コメントを管理するソフトウェアですね。

 どすこい!人生 Niconama Comment Viewerページ

詳細はページを見ていただくとして、XSplitのページも引き続き制作しています。
その時に必要になるので、今回先にNiconama Comment Viewerのページを作ったわけです。

それでは、また更新出来る時にお会いしましょう。
あ、そうそう、ちょっとずつプレイしているPSO2のクローズドベータテストのレビューも、近々書く予定です。

XSplitの課金方法

本日は、XSplitの解説ページに追加した、「XSplitの課金方法」のお知らせです。

 どすこい!人生 XSplitの課金ページ

XSplitは現時点では無料のベータテスト中なのですが、4月12日から有料化する事が発表されました。
それに向けて、現時点でも無料版にも段々機能制限がかかって来ています。

色々不満が出てきましたので、今回致し方なく課金をする事にしました。
いろいろ課金する際に方法があったり、注意する事があるので、今回ページとしてまとめてみた次第です。

課金する予定のある方は、ぜひ参考にしてみて下さい。