■

[後で追記予定]

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

マケプレで安かったので注文してみた。内容古すぎないといいけど。
よかったらこっちも読んでみたい

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

逆引きjQueryマニュアル

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

先日買った本が届いたのでぱらぱら見てるけど、amazon評価は良くないけどこの本結構いいと思う。
自分みたいに、まだうろ覚えで仕事してる人間には使いやすい。
元々グーグル検索でサンプルページhttps://books.google.co.jp/books?isbn=4844329618
が引っかかって良さそうだと思って調べたら、５００円ぐらいで手に入るって理由で手に入れた。

■

[後で追記予定]

ウェブデザイナーというかフロントエンドっぽい仕事をはじめたのでBookoffでいろいろ本を仕入れた。
全部で3000円くらい。

jQueryクックブック

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

jQueryデザインブック　仕事で絶対に使うプロのテクニック

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

Webデザイナーのための WordPress入門 3.ｘ対応 (Books for Web Creative)

よくわかるPHPの教科書

改訂版出てたりもしてるちょっと古い本ばかりだが、まだ使えるかなと思っている
こなすだけならネットで調べてコピペ組み合わせでその場しのぎできないこともないけど、それじゃあ身に付かないしね

仕事でTIPSもたまったし、そろそろ自分のサイトの方もまたいじりはじめたいのだけれども。

■

またいろいろ勉強中

年始ぐらいからまたindexhibitをさわりはじめたのやったことのメモ。
大したことをやってるわけじゃないがGit Hubとかにコードを保存したほうがいい気がしてる。
ただindexhibit2.0系はシェアウェアなのでライセンス的にどうなんだろとかそういうのもありこのブログにはほとんど該当部分しか書いていない

jQueryとPHPの本しか持っていないのとJSの基本ぐらいは勉強しとこうと思って今日これ買った。まだ序章。

ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)

サンプルコード一覧 - ノンプログラマのためのJavaScriptはじめの一歩

実践マスター PHP+MySQL PHP5対応

PHPの本は職業訓練で買わされたこいつしか持っていない。
終わってからあまり読んでないけどamazonレビューの評判良くないねぇ

[Indexhibit]Pull Down Menuの実装[JS]

Indexhibitには
indexpand http://www.indexhibit.org/plugin/utility/indexpand/というプラグインや
Expanding Menusというプラグインがすでにあるのだが、
マウスホバー時に意図した動作をしてくれなかったので、Webで調べてプラグイン化した。
ほぼコピペに近いけど、Indexhibitのメニュー構造が既にUL ,LIの入れ子構造だったため楽だった。
以前試して失敗したレスポンシブでのハンバーガーメニューとの切り替えなんかもやれる気がする

[plugin.pull_down_menu.php]

<?php

/*
Plugin Name: Pull-down menu
Plugin URI: http://log.hatenadiary.com/
Description: Pull-down menu
Version: 1.0
Author: yozhik
Author URI: http://log.hatenadiary.com
Type: front
Hook: pre_load
Function: pull_down_menu:go
End
*/

class pull_down_menu
{
	function go()
	{
		$OBJ =& get_instance();
		
		// do we need to do a file check for this?
		$OBJ->page->add_jquery('jquery.pull_down_menu.js', 25);	
		
		return null;
	}
}

[jquery.pull_down_menu.js]

$(function() {
	$("#nav li").hover(function() {
		$(this).children('ul').toggle();
	});
});

style.cssに以下を追加

/* pull_down_menu */
#index ul.section li ul{ display: none; }

• 参考にしたサイト

www.finefinefine.jp
www.task-notes.com
www.jquerystudy.info

[Indexhibit]jQuery Cycle2 plugin導入

http://jquery.malsup.com/cycle2/
前ヴァージョンのjQuery Cycleよりも有名じゃないけれど、レスポンシブ対応していたので組み込んでみた。htmlタグ内で設定できるようになった模様。

format.no_thumbs.phpを基に改造してulリストの中に画像が挿入されるようにした。

		// images
		$s .= "<div id='img-container'>\n";
			$s .= "<ul class='cycle-slideshow' data-cycle-fx='fade' data-cycle-next='.cycle-slideshow' data-cycle-speed='300' data-cycle-slides='li'>\n";
		$s .= ($OBJ->vars->exhibit['placement'] == 0) ? $OBJ->vars->exhibit['content'] . $a : 
			$a . "<div class='cl'><!-- --></div>" . $OBJ->vars->exhibit['content'];
			$s .= "</ul>\n";
		$s .= "</div>\n";

style.cssに以下を追加。

/* Slideshow cycle2 plugin */
.cycle-slideshow { z-index: 1; text-align:center; margin:0 auto; width: 80%;}
.cycle-slideshow img { width: 100%; height: auto; }
.cycle-slideshow li { display: none }
.cycle-slideshow li:first-child { display: block }

具体的には

• メニューとかぶってしまうのを避けるためにz-indexで階層を下げる。
• レスポンシブ対応で画像をウインドウの80％に指定。センタリング。
• liリストの最初のもの以外を非表示にすることで読み込み時に一瞬画像が表示されてしまうのを避ける

■

今後の指針

• トップページの構造を変える　

-ツリー構造のメニュータブで子該当ページに移動だったものを
メニュー＞小インデックスページ＞該当ページ の構成にする
→indexhibitのテンプレート利用でできるはず

• レスポンシブ対応

→レスポンシブメニューのプラグインがindexhibitが吐くリスト構造とあわず上手くうごかないので、ひとまず簡易的にメニューのfloatを利用して、ウインドウサイズでメニューの並びが変わるようにした。
→→Media Queryを使ってスマホ用ではfloatを解除し、縦並びのメニューにしてサイズが大きくなるようにした

• 可能であればプロフィールページはオーバーレイ表示する

→とりあえず colorboxでメニューのaタグリンクを拾うことで実装。外部htmlをアップロードして参照した。
→絶対パスのリンク先をajaxで取得する関係上www付きとwww無しのドメインが同一サーバーと見慣されないためurlによって表示されない事がある。ひとまず.htaccessでwww無しのurlにリダイレクトするようにした。

RewriteEngine On

RewriteCond %{HTTP_HOST} ^www\.hogehoge\.com
RewriteRule ^(.*) http://hogehoge.com/$1 [R=301,L]

→単純な相対パスだとサイト構造上上手く行かなかったので

{{baseurl}}/hogehoge/

をリンク指定してみたらいけた。

Indexhibit2　構造メモ

http://www.indexhibit.org/tutorials/upgrade/updating-templates-and-exhibit-formats/

Options

>Page options/Template 

ページ自体のテンプレート(ガワ。HEAD内 外部CSS,JS追加などはこちらにする。BodyのDIV id=index内部)

>Exhibit Options/Template

画像などの表示方法のテンプレート（BodyのDIV id=exhibit内部）

半年ぶりにいじりはじめたら完全に忘れてた。

Developer Toolメモ

http://news.mynavi.jp/column/wc/011/

• webインスペクタ

https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
http://gihyo.jp/dev/serial/01/chrome-extensions/0006
http://trac.webkit.org/wiki/Web%20Inspector%20Update.ja

■

jQuery最高の教科書

jQuery最高の教科書

先月3冊目のjQuery本を浮気して買ったけどあんまり読んでなかった。
amazonレビューでタイトルに対する内容のなさが叩かれてるｗ
作例は今っぽいというかflash系から流れてきた人たちが好きそうな感じのもの。
確かに単純なアコーディオンとかロールオーバーボタンとか作ってもつまんないというかそんなん使わねぇだろと思ってたからそういう意味では有りだと思う。

■

今後参考にしたいサイト

www.fabulosius.de
ソース見るとindexhibitみたいだけど色々仕込んでて凝ってる。
http://danielogorman.comdanielogorman.com
こっちはwordpressっぽい。
ギャラリーがレスポンシブ対応だったりトップページのコンテンツの見せ方が好きかも
http://www.julianzigerli.com/jz/aw/13/lookbook/www.julianzigerli.com
tumblr的みためでなんかかっこいい 。もうちょっと写真大きくしたいだとかいろいろあるけど。
メニュー位置とか構造的に参考にしたい

Indexhibit_V2カスタマイズその3-3

format.no_thumbsにmasonry（とcolorbox）を実装

作りが簡単そうだったformat.no_thumb.phpを素にした。

				$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' />

<strong>$title</strong> $caption</span>$break\n" : 
				"\n<span class='nothumb'><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></span>$break\n";

以上61-62行目付近を以下のように修正した

				$a .= ($OBJ->vars->exhibit['titling'] == 1) ? "\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a><strong>$title</strong> $caption</div>$break\n" : 

				"\n<div class='nothumb'><a class='colorbox' rel='photo' href ='". BASEURL . GIMGS . "/$go[media_file]' ><img src='" . BASEURL . GIMGS . "/" . $OBJ->vars->exhibit['id'] . "_$go[media_file]' alt='$title' title='$title' /></a></div>$break\n";

spanをdivに変えてimgタグをcolorboxのclassを付けたアンカーで囲った形。

index.php

以前書いた内容と同様にtheme内のindex.phpのhead内

<last:page:javascript />

の後に

<script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.masonry.js"></script>
<script type="text/javascript" src="{{baseurl}}/ndxzsite/js/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
	$("#img-container a").colorbox({ maxWidth:"100%" , maxHeight:"100%"});
});
</script>

<script>
  $(window).load(function(){
    $('#img-container').masonry({
    itemSelector: '.nothumb',  
    isAnimated: true,  
    isFitWidth: true,  
    isRTL: false,  
    gutterWidth: 0,  
    containerStyle: { position: 'relative' }, 
    isResizable: true 
    });
      });
</script>

を追加。
またjQuery colorboxのcssファイルを9行目付近に挿入

<link rel="stylesheet" href="{{baseurl}}/ndxzsite/js/colorbox.css" type="text/css" />

IndexhibitでMasonryを使う場合の注意

$(document).ready(function(){

と書いていてchrome,safariなどwebkit系のブラウザでうまく動かなかったため

$(window).load(function(){

に変更してイメージが読み込まれた後に実行するようにした。

*

色々試したけどスクロールの方はまだうまくいってない。