WordCamp Fukuoka 2011で@nishiakiから邪魔されたセッションのフォロー記事

Photo by @shigeoka

Wordcamp Fukuoka 2011でセッションさせてもらいました。
昼のメインホールの開会後の一発目、しかも三好さんの裏だったのでのんびりできると踏んでたのですが、、、
あんなに来てくださるとは思いませんでした。
来ていただいたみなさん、ありがとうございます。

さっそくフォロー記事を書きます。

スライドのPDF版はこちら をどうぞ

ダウンロードファイルのアイコンと容量表示

◯配布サイト：Development Reference｜JS　ファイルのサイズを自動で取得して表示する

fileSizeGetter.jsは対応するファイル拡張子から、 jpg,png,gifを削除しただけで他に触らずにOKでした（お手軽)。
しかしこのライブラリをそのまま使うと、ページ全体のリンクに対して実行されてしまうため、
ヘッダー、フッター、サイドにまで影響されてしまいますし、処理も若干重くなります。
もし動作速度を早めたかったり影響範囲を限定したいのであったら、記事表示部分の要素ID内に限定した方がいいでしょうね。

そのため、記事表示部分の要素IDを指定するように一部修正します。

私のブログの場合、現時点では記事表示の要素IDは#mid-content’のため、
fileSizeGetter.js の26行目辺りを以下のように書き換えました。
[javascript num=26]
var elements = document.getElementsByTagName(‘A’);
↓
var content = document.getElementById(‘mid-content’); //← 記事表示の要素ID
var elements = content.getElementsByTagName(‘A’); //指定ID内のAタグのみに限定

[/javascript]
ここは皆さんの環境に合わせて随時書き直してください。

参考までにjQueryライブラリの一つのファイルサイズを取得できるaddsizes.js も紹介しておきます。

外部リンクにclassとtarget=”_blank”付与

スライドで紹介した、jQueryだとたったの一行。

[javascript]
$(“#mid-content a[href$=’.pdf’]”).addClass(“LinkPdf”);
[/javascript]
id=’mid-content’ 内でリンク先が ‘.pdf’で終わるリンクには全てを追加する、となります。

ですが、たくさんのファイル拡張子を加えるのも結構面倒だったり、
jQuery自体を導入が面倒という方には下記のライブラリがオススメです。

◯配布サイト：Development Reference｜JS　リンクに自動でアイコンを付加する

このファイルだけを読み込ませれば動作するのでお手軽です。
addIcon2Links.jsの105行目の “var elements = document.getElementsByTagName(‘A’);” を下記のaddIcon2Links.jsと同じように修正しておけばOKです。
外部リンクだけでなく、 mailtoやhttpsへのリンクも判別してくれるので大変助かりますよ。

見出しの デザイン性を上げる保持する

@goretundance のブログ読んで、表現がおかしかったことに気付きました。
“上げる” じゃなくて”保つ・保持する”が適切ですね。

以下のコードでは記事表示要素内の見出し2(h2)に自動でspanタグを内部に囲みます。
[javascript]
/* jQuery */
$(‘#mid-content h2’).wrapInner(‘<span></span>’);
[/javascript]

[css]
/* CSS */
#mid-content h2{
padding5px; border:1px solid #ccc;
}
#mid-content h2 span{
display:block; padding-left:5px; border-left:5px solid #f90;
}
[/css]

どうしてもお客さんがビジュアルエディタで入力するには再現が難しいデザインの場合には、とても有効です。
他にも応用も効きますので知ってて損はないです。
h3,h4,h5とですね。

若干、スライドとセレクタの指定が違うのは僕のブログに合わせてるためですm(_ _)m

実際に動作してるデモ用エントリーはこちらです。

記事内で自動スライドショー

これが一番設置に苦労した事があります。
またお客さんへの作業としてはハードルが上がりますが、
「記事内でスライドショーができるなら！」と頑張ってもらえた事があります。
（やっぱり、出来ることへの効果が大きいからでしょうかね）
お客さんのモチベーションとスキル次第ですが、もし要望されたらこんな手もありますよってことで。

読み込ませるJS

• jQuery (今回は1.4.1)
• JQuery Cycle Plugin

以下の２行にhead内に記述して読みこめばまずはOK。



ただWordpressのデフォルト関数でjQueryを使う際は、他のJSフレームワーク(prototype.js等)との衝突を避けるために、”$”が使えないようになっていますので注意してください。
他のCMSで使うことを考えると、僕はなるべく”$”で指定するようにしてるため、WordpressデフォルトのjQueryは呼び出さない事が多いです。

参考）WordPressではじめてのjQueryが動かないという人へ スライドショー レビューも兼ねて

jQueryの書き方

流れとして、ページ読込み完了後(onload)に記事内に条件に合うリストが見つかれば、そのulに”SlideList”とclassを付けて、
“SlideList”にのみスライドショーを実行するように書きます。
[javascript]
$(function() {
/*
▼記事内自動スライドの条件
・記事内のulで、liが２個以上
・全てのliの中身がimg要素のみ、もしくは a>img要素のみ
*/
var flg = false;
$(‘.entry > ul:has(li)’).each(function(index){
$(this).find(“li”).each(function(index){
if( $(this).has(“img”).length==0 && $(this).has(“a img”).length==0 ){
flg = true;
}
if( !flg && index == $(this).parent().find(‘li’).length-1){
$(this).parent().addClass(“SlideList”);
flg = false;
}
});
});
//該当ulのみスライドショーを実行する
$(‘.entry ul.SlideList’).cycle({
fx: ‘fade’, //効果はフェード。他に ‘shuffle’,’cover’,’wipe’等多数あり
speed: 1000 //1000ms = 1秒
});
});
[/javascript]

実際に動作してるデモ用エントリーはこちらです。

デメリットは、読み込み完了後の実行となりますので、
一瞬リストで並んでいる画像が沢山表示され、実行後縦スクロールバーが縮み、何かページが動いた感じがしてしまいます。
そのため、読込みまでかかる、あまり重いサイトやたくさんのスライドには向かないでしょう。

CMSのドキュメントはCMSで

前回のWordCamp Fukuoka 2010と同じようなネタですね（汗
でもとても大事なことなので２回言いました。

基本操作はもう優良なマニュアルサイトにリンクさせてしまいましょう！
ということでwordpress マニュアル め組 です。
動画まであってとてもよくできてます。
め組さんがLTで言われたように、現在このマニュアルサイトへの投稿者を、今後なんらかの形で募集するそうです。
ぜひみなさん、みんなで協力して良いマニュアルサイトを作ってしまいましょう！

セッション前に快くリンクOKをいただいた”め組”さんのふとっぱらな所に感謝です。
そしてセッション中に意外な形で絡んできた3人も素敵でした。
（スピーカーを笑わせるのはやめていただきたいｗｗｗ）

入口のドアの隙間に、３つ顔が縦に並んでたら、それは誰でも驚きますよｗ
（誰か写真撮ってないかな〜、撮ってたら僕にください！）

所感

• 一番苦労したのは写真スライドショー。ulの条件分岐。jQuery1.4で大分楽になった。
• 実際に自分のWordpressのエントリーでデモ動作させようとしたら、jQueryのバージョンの違いとかいろいろ合ってその調整が大変だった
• @nishiakiが僕のセッション中に、ブラインド上げる＆電気付けるアクシデント発生
  • カメラマンしてる最中、背中でスイッチを押したのが原因
  • 「なんか俺悪いことした？」ってあの顔は一生忘れない
  • 本人曰く「あ、悪りぃ悪りぃ」で謝ったつもりらしい
  • 僕自身、時間気にしててテンパッてたのでその場はスルー
  • 後から思い出せば思い出すほど、いろいろ込み上がった。

おかげで、セッション後のみんなの感想が、
「役に立った！」よりも「面白かった！ｗ（笑えたｗ）」だった(；´Д`)

教え子やら同業者仲間やら結構見知った方が多かったみたいですが、
ともかく来ていただいた皆さんに何か役に立ってもらったのなら光栄です。

関連してそうなリンク

• wordpress マニュアル め組
• no-relation→ : WordCamp Fukuoka 2011 #wcfukuoka に行ってきました
• WordCamp Fukuoka 2011 | LIFEVISION BLOG（ライフビジョンブログ）
• ねこめも » WordCamp Fukuoka 2011に行ってきました。