Tool & Snippet

WEB系／３DCG・映像系に関すること

JavaScriptのノーマルなポップアップウィンドウ

JS スニペット

jQueryを使って使い回しできるポップアップウィンドウのイベントと作る。

仕様：

  • HTML側でURLを設定
  • window.open()を使用する
  • ポップアップウィンドウのサイズ：横幅700px 縦幅400px
HTML CODE：
<a class="iMovie" href="https://www.google.co.jp">ポップアップウィンドウ</a>
JS CODE：
	jQuery(".iMovie").on("click", "a", function(e){
		e.preventDefault();
		var target = jQuery(this).attr("href");
		window.open(
			target,
			'data',
			'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,width=700,height=400'
		);
		return false;
	});
おわりに。

アンカーのクラス名はお好きな名前を設定してください。
最近はライトボックスのプラグインが主流なので、あまり使う機会がありませんが、
クライアントによっては必要なことがあるのでメモ程度に記録しました。
ご参考に。

jQuery　ページネーション・ページング　2種類のプラグインをカスタマイズ（表示位置を改良）

jQuery Plugin

プラグインの仕様を少し変更したいと思ったので、改修した箇所のメモです。

プラグイン：Pajinate

jquery.pajinate.js - version 0.4
配布元：
http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
デモ：
http://dl.dropboxusercontent.com/u/4151695/html/pajinate/examples/example1.html

実装：

CODE：
HTML:
<div id="section">
	<ul class="content">
		<li>1件</li>
		<li>2件</li>
		<li>3件</li>
	</ul>
	<div class="page_navigation">（ナビゲーションの位置）</div>
</div>


JS:
jQuery('#listSection').pajinate({
	nav_label_prev: '前へ',	//初期値　Prev
	nav_label_next: '次へ',	//初期値　Next
	items_per_page : 40,	//表示件数-初期値　10件
	show_first_last: false	//最初へ・最後へのリンク　非表示
});

カスタマイズ：

1.　縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。

CODE：

ファンクションgotopageの最後に ID=main の要素へ表示位置を変更する処理を追加

//line212:
function gotopage(page_num){

	//最後に追記
	var target = $("#main");
	if(target.size()){ 
		var top = target.offset().top;
		$(jQuery.browser.safari ? 'body' : 'html').scrollTop(top);
	}

}

プラグイン：jPaginate

jPaginate.js - Version 0.3
配布元：
http://vanity.enavu.com/download/
デモ：
http://vanity.enavu.com/demo/jPaginate/jPaginate.html

実装：

デフォルト記述。

CODE：
HTML:
<ul id="content">
	<li>1件</li>
	<li>2件</li>
	<li>3件</li>
</ul>


JS:
jQuery("#content").jPaginate();

カスタマイズ：

1.　縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。

CODE：

ファンクションの最後に ID=main の要素へ表示位置を変更する処理を追加

//line176:
$(".goto").live("click", function(e){
	//ファンクション内の最後に追記
	toTop();
});
//line183:
$(".goto_next").live("click", function(e) {
	//ファンクション内の最後に追記
	toTop();
});
//line192:
$(".goto_previous").live("click", function(e) {
	//ファンクション内の最後に追記
	toTop();
});


//174行目にファンクションを追加
function toTop(){
	var target = $("#main");
	if(target.size()){ 
		var top = target.offset().top;
		$(jQuery.browser.safari ? 'body' : 'html').animate({scrollTop:top}, 800, 'swing');
	}

}


行数は変わっている可能性があります。
参考になれば幸いです。

JS／PHP：コピーライトの年号を自動更新したいとき

スニペット HTML

制作用のメモです。

仕様：
  • コピーライトの年号を自動で今年度に更新
HTML CODE：
<div id="copyright">
  <p><small>Copyright (C) <span id="echoNowYear"></span> CampanyName. All Rights Reserved.</small></p>
</div>
JS CODE：
/**
 *  jQueryを使用した場合の出力
 */
jQuery(function(){ 
	var now = new Date();
	var year = now.getFullYear();
	jQuery("#echoNowYear").html( year );
});
PHP CODE：
/**
 *  PHPで出力する場合（今年の場合の出力→　2013-2014）
 */
function set_copyright() {
	$thisYear = date('Y');
	if ($thisYear == "2013") :
		echo $thisYear;
	else :
		echo "2013 - " . $thisYear;
	endif;
}
参考サイト

仕事を受けたら納品するべきファイル・設定するべきもの：SEO関連ファイル

Business WEB

ビジネスとしての案件は、最低限、標準レベルで納品したいと思います。
納品すべきと考えるファイルや設定などについてメモです。

SEO関連ファイルと登録

現在では必須だと思う4つの機能です。

robots.txt

クロール用ロボットに対して、クロールをブロックするためのファイルです。
ブロックしたいページやディレクトリなど個別に設定します。

長期にわたって運用しているWEBサイトで、古いファイルがサーバ上へ大量に保管されているときがあります。依頼をいただいてからサーバ内をみてみると、、、ファイルのほとんどがバックアップファイルのときなど…びっくりするときがあります。
そんなときにも利用できます。

User-agent:

以降のルールを適用するロボット。基本はアスタリスクでよいと思いますが、詳細な設定を行う場合にはロボット名をそれぞれ記述します。

Disallow:

ブロックするURL、ディレクトリなど

Allow:

許可するURL

記述パターン
  • Disallow: /*?

　パラメーターなどのURLのことです。?を含む全てのURLへのアクセスをブロック

  • Disallow: /directory*/

　directoryで始まる全てのディレクトリへのアクセスをブロック

  • Disallow: /*.pdf$

　URLの末尾（.pdf）が一致するURLへのアクセスをブロック

  • User-agent: Googlebot-Image

　Disallow: /img/xxx.jpg
　画像検索に対し特定の画像（xxx.jpg）をブロック


サイトマップ

クロール用ロボットに対して、クロールして欲しいWEBページを知らせるための補強ファイルです。

便利なWEBサービス

http://www.sitemapxml.jp/
ウェブマスターツールのサイトマップ登録方法についてのページがあります。※スクリーンショットは前バージョンのようですが大変参考になります。

サイトの更新頻度の選択

個人的には1年もしくは更新しない（記述しない）など頻度を低くし、ファイルをダウンロード後に頻繁に更新するファイルを個別に書き換える方がよいかと思います。
※yearly (1年毎)、monthly (1ヶ月毎)

除外ディレクトリの入力

ワードプレスの場合は重複ページを防ぐために、除外ディレクトリを記述する方がよいかと思います。
※（例）category,tag,author,page,serch


Google アナリティクス

最近トラッキングコードが新しくなっていました。登録方法はあまり変わっていませんが、分析するための詳細設定がどんどん増えてます。乗り遅れないように定期的に勉強が必要だと感じます。

Javascriptファイルは1ページずつ記述する方法より、外部ファイルとして読込む方法が個人的に好きです。

JSファイルを外部ファイルへ
  1. トラッキングコードを新規テキストファイルにペーストし、<script>と</script>の記述を削除
  2. ga.jsなどのファイル名で保存
  3. 任意のディレクトリへアップロード
  4. WEBページに<script src="任意URL"></script>
  5. 対象ページへアクセス＆管理画面でリアルタイムにログが取れているのを確認する

ウェブマスターツール

https://www.google.com/webmasters/tools/home?hl=ja
アナリティクスと同じアカウントでログインし、登録します（間違って自分のアカウントへ設定しないように）。
簡単に設定できるのは「Google アナリティクス」の方法です。既に導入済みの場合には［確認］ボタンをクリックするだけです。
でも、CMS構築の場合に原因不明ですが確認とれません（たぶん複雑なディレクトリが原因）。ワードプレスなどでは、「HTMLファイルのアップロード」か「HTMLタグ」で確認を取るとスムーズです。

  • HTMLタグ・・・metaタグ（name=google-site-verification）をテンプレートに記述
  • HTMLファイル・・・googleから始まるHTMLファイルをWEBサイトのルートディレクトリへアップロード
構築後に設定することになると…

HTMLタグので確認する場合、全関連ファイルに追加記述しなければいけません。
静的ファイルのWEBサイトでは特に時間の無駄です。構築前にきちんと確認を取ることをおすすめします。


最後に。

構築の仕事を受けた際にはきちんと運用面を考慮して提案・確認しておくと、後々困ったことにはならないと思います。ただし、間違った設定をすると大変なことになるので気をつけよう。

Androidエミュレーター：インストール後の日本語設定

AVD

Androidエミュレーターを新しくインストールしました。2年前くらいと少し変わってるような気がしたのでメモしておくことにします。
Eclipsが同梱されている圧縮ファイルは480MBありました。

SDKダウンロード先

Android SDK | Android Developers
http://developer.android.com/sdk/index.html
f:id:MOREi:20131206152741j:plain
環境に合わせてダウンロードする内容が選べます。
ページ下部の青文字リンクをクリックするとアコーディオンでダウンロードリンクが表示されます。

インストール

SDK Managerを起動し、必要なプラットフォームなどインストールします。
4.3のプラットフォームをインストールしました。

ディバイスの設定

（今回割愛します）

起動時の画面

f:id:MOREi:20131206153201j:plain
画像は、バージョン4.3＋4.0インチ（480ｘ800）の画面サイズを設定しています。

起動オプション

4.0インチでは、実際のサイズで起動した場合とても小さいので、起動オプションで「Scale display to real size」のチェックを外します。

日本語設定

  1. 「Settings」をクリック
  2. 「Language & input」をクリック
  3. 「Language」をクリック
  4. 日本語は一番下にありました。クリック後、自動的に画面が切り替わります
  5. キーボード入力の変更をします。「デフォルト」をクリック
  6. 「日本語」　をクリック

f:id:MOREi:20131206162413j:plain
設定変更するだけでも、とても時間がかかります。

感想＆メモ

ネット検索画面で入力を試してみましたが、インプットボックスへも入力できないのかなと思ったくらいテンポが遅れて反応します。
数文字の変換でエラーが出たり、、、と使いづらいです。

WP：マルチブログで各ブログの「サイトのタイトル」と「概要文」を出力

WPスニペット

仕様：

  • マルチブログ構築
  • 管理画面で登録している各ブログのタイトル名＋リンクと概要文を出力
  • 各ブログをブロック要素として3列に並べる
CSS：

.cols3 { width:33%; float:left; }

関数：

get_bloginfo( 'url' )　
ブログURL　||　サイトネットワーク管理者＞サイト＞編集＞設定：Siteurl
get_bloginfo( 'name' )　
一般設定＞サイトのタイトル　||　サイトネットワーク管理者＞サイト＞編集＞設定：Blogname
get_bloginfo( 'description' )　
一般設定＞キャッチフレーズ（ブログ概要文）||　サイトネットワーク管理者＞サイト＞編集＞設定：Blogdescription

CODE：
//$blogs＝ブログのID
$blogs = array(1, 2, 3, 5, 4);
foreach ( $blogs as $i ) {
	switch_to_blog( $i );
	echo '<dl class="cols3"><dt><a href="' .get_bloginfo( 'url' ). '">' .get_bloginfo( 'name' ). '</a></dt>';
	echo '<dd>' .get_bloginfo( 'description' ). '></dd></dl>';
}
restore_current_blog();

//SiteID＝01に戻す
switch_to_blog(1);

WPスニペット・現在のカテゴリーから最新記事を表示＋サムネ付

仕様：
  • マルチサイトを構築
  • 投稿記事を表示しているページで、その記事のカテゴリ内で最新記事を5件表示。
  • アイキャッチで登録した画像のサムネイルを表示
CSS:
#recentEntries { width:240px; }
.mBtm10 { margin-bottom:1em; }
.fLeft { float:left; }
.pLeft70 { padding-left:70px; }
CODE：
$categories = get_the_category();
foreach($categories as $category) :
	$related_posts = get_posts( 'category='.$category->cat_ID.'&exclude='.$post->ID );
	if($related_posts):
		$args = array (
			'numberposts' => 5,
			'cat' => $category->cat_ID
		);
		$data = get_posts($args);
		
		echo '<aside id="recentEntries"><h3 class="widget-title">最近の投稿</h3>';
		echo "<ul>\n";
		foreach($data as $post) :
			setup_postdata($post);
		?>
		<li class="mBtm10">
			<p class="fLeft">
			<?php /*サムネイル*/
				the_post_thumbnail( array(60,60) ); 
			?>
			</p>
			<p class="pLeft70"><a href="<?php the_permalink(); ?>">
			<?php /*投稿日*/
				the_time('Y年m月d日'); 
			?>
			<br />
			<?php /*タイトル（記事のタイトル:20文字が理想）*/
				the_title(); 
			?>
			</a>

		<?php 
		echo "</li>\n";
		endforeach;
		echo "</ul></aside>\n";
	endif;
endforeach;

wp_reset_postdata();　/*マルチサイトの場合に使用*/


プラグインを使った参考サイト：http://blog.inmycab.com/pc/wordpress/15830/