この放置っぷり…スイマセン…orz

最近はネイティブなiPadアプリにも手を出したりしてて、もうちょっとしたらお見せできるかと思います。

そんな近況ですが、この頃なにかと顔を出してるドットコーダーのゆるふわ会に行って喋ってきました。今回のテーマはjQuery。基礎的な所は他の人が話すので、応用的な内容で喋って欲しい、と。
こういう喋る内容ってターゲット層にバラつきがあるので、どこら辺にターゲットを置いて内容を決めるのかが難しいところではあるのですが…

まーボチボチjQueryのメソッドをちょいと使った感じで且つJavascriptのTips的なことも盛り込める「画像切り替えスライダー」を作ることをテーマにしてみました。というのも、先日のコーディング案件で作ったばかりだったんで…（ちゃんと受注元にも許可を貰いましたよｗ）
実際に使用されている物の方が参考にもなりません？

ちょっと他のプレゼンターがゆるふわな雰囲気だったので、一人お堅い感じで進めてしまいましたが…何かの参考になったりモチベーションの向上の一助になれたとしたら発表者冥利に尽きます。不手際とかお叱りの言葉もありましたら真摯に受け止めたいと思います。。。
少しずつ発表には慣れてきましたが、いやー喉がカラカラでひっつく感じでしたよ。まだまだ緊張しながらの発表です。

もうちょっと全体的な雰囲気とか感じ取りながら話せるようにならねば、といった感じです。

しかしjQueryっていつになっても人気の話題ですねぇ。

ページ内で記事の一覧とそのサムネイル画像を表示させたい、という要求は往々にしてあると思うのですが、それをなんとか使用者にも使いやすい形で実装できないものか…と。

最初に考えたのはカスタムフィールドを使用して、アップロードしたファイルのURLを入れてもらう。。。は手間が増えるし、おそらくイマイチ分かりにくい操作だなぁ。。。と。
記事内の最初に出てくる画像を正規表現で取得して…矩形のサムネイルだと良いけど、中・大の画像サイズとファイル名が不明…
Ver 2.9から実装されているthe_post_thumbnail()はなにも表示されない…

ということで実装したのがこちら、

get_posts()にパラメータ「post_type=attachment」を指定すると、「post_parent」に与えた記事IDに紐付いているデータを取得できます。その他のパラメータは並び順の先頭にある1件のみを取得する指定です。ギャラリーダイアログで1番上に指定している物を取得する仕様にしました。
配列にはそれぞれファイルURL・幅・高さが入っています。

お客さんにはサムネイルに表示したい画像をアップロード、1番上に移動してもらうだけ。記事内にその画像を表示させたくなければ挿入しなければ良いだけで、ギャラリーの1番上にある画像が自動的に表示されるのは分かりやすいかな？と（サムネイルは表示させたくないけど、記事中に何か画像を表示したい、という希望には添えませんが…orz）。

次のネタは「ページ内で記事を表示させたい。そしてページングも表示させたい」です。ネタは小出しでｗ

fuga.html#hoge

とかして、ページ内のアンカー位置に表示を移動させたいときってありますよね。

とかしても同じ動きですけど。

そうすると、なぜかボックスが上にずれてしまう、という現象がありましたので、その解決法を一日うんうん言いながら探してました。
ググっても全然出てこないしさ…orz

症状としては、ハッシュでの移動を行った場合、正常であれば

のようになっている箇所が、

こんな感じで上にずれてしまうんですな。
（ちょっと分かりにくいけど、メニューの上が切れてるでしょ？）

問題はハッシュでの移動で起きてるので、アンカー用意してページ内でのみ遷移させるということであれば、noriさんのslideScroll.jsとか使っちゃえば、スクリプト読み込むだけでページ内リンクをJSが乗っ取ってくれてハッシュでの移動にならないんだけど、別ページからハッシュを指定する場合、JSではどうしても乗り越えられない壁があって対応できないのデス。

やはり問題の特定を行わなければ…orz

で、デバッグモード全開で見つけたのが、
アンカーを配置している要素の親要素に”overflow:hidden”が指定されているとその親要素が上にずれる
でした。

overflow:hiddenと言えば…

定番のclearfixにバッチリ使われておりますやん。。。

clearfix大好き人間（ちゃんと使うべき所で使ってますよ）の自分は、きっちりコンテンツ用ボックスにclearfixを仕込んでたようで。。。
親要素にバッチリ原因が潜んでいた、という。。。orz

一応、全てのブラウザで起きてしまうので、この現象にハマってしまった人は、アンカーの親にoverflow:hiddenが居ないか、調べてみて下さいね。

Wordpressで記事に投稿した画像一覧をProgression用のXMLで出力するためのテンプレートです。
（元ネタはこちらを参考にさせて頂きました。深謝）

Progressionはプログラミングの知識がなくても柔軟且つ簡単ににフルフラッシュサイトを作れる工夫が成されてる割に、細かいことをやろうとしたら意外に奥が深いフレームワークです。ちょっと世界観の把握に苦労した。

あとはこの出力されたXMLをProgressionで読んで、Papervision3Dと絡めて…

という実験的勉強を、クライアントからの連絡をずーっと待ちながらイヂけつつやっている梅雨が明けたある暑い夏の日。

いやービアガーデンって感じですね～
天気も心配されたんですが、会場に居る間は降られず。ビルから出た直後にパラパラとし始めました。参加者の日頃の行いがよっぽど良かったんでしょうなぁ（敢えて自分とは言わない）。

なぜか皿の上にあるホタルイカの佃煮。
想像してた味＋ホタルイカの底力的な感じで美味かったッス。ホタルイカ万歳。富山万歳。
お土産、ありがとうございましたm(_ _)m

来週は淀川の花火大会だったりしますが、週明けからバシバシと忙しくなる予定です。
リフレッシュしたし、頑張るでー！

んで、8月中に服部緑地公園でBBQします？
食材やらの準備は出来ますが、BBQコンロの手配や、一番の問題の人集めなどなど、目処が立てば開催したいな～と思うこの頃であります。

8/1の19時から梅田でリクリのビアガーデン大会が開催されます。
大会なので頑張るしかありません（何を？）

今回も濃いメンツが揃っております。
参加は下記アドレスのmixiからどうぞ～
http://mixi.jp/view_event.pl?id=44588746&comm_id=1994993

金曜はキックオフお食事会、来週末は淀川花火大会と、なにげに忙しい感じでございます。例によって「お盆までに」納品のお仕事などもあったりするので、8月もなんだかバタバタし始めてますYo!

最初は某Webディレクター本を与えていたのですが、内容が難しすぎる（そして役に立ちそうにない）ので、新しく偶然本屋で見つけた「Web制作新人育成ガイド」という本を買ってみました。

適度に挿絵が入っていたり、基本的な事などをサラっと書いてあるので読みやすいです。
読みながら「TCP/IPとか懐かし～」とクスリと笑う嫁は流石です。

が、さらりと書きすぎる面もあって、PHP・JavaやJavascript（Ajax）・Flashの区別や意味が分からなかったようです。が、それも身振り手振りで教えると、キチンと理解できてしまうあたりが逆に怖い。プログラムで負ける気はしないけど、それ以外では速攻追い抜かれてしまいそうです。。。

もう1冊がAndroidの開発本。「Google Androidアプリケーション開発入門」。
先日、妙に時間が空いてしまった時に「折角iPhoneとmac miniがうちに有るんだし、iPhoneアプリ開発しちゃえ」と思って本屋に駆け込んだのですが、やはり先々を見越して「やっぱり今のうちにAndroid勉強しとくか」ということに。

そしてAmazonで評価の高かったのがこの本、という訳です。

ちょっと個人的には「サンプルを作り上げていきましょう」的な流れでコードがずらーっと掲載されているスタイルは好きではないのですが、センサー周りの事なども記載されているので有用かと思います。
順次読み解いていこうと思ってます。

が、手元に実機が無いのが痛い。。。
docomoは先日発売が開始されたそうですが…auユーザーの自分としては、早くソニーのAndroid携帯がリリースされるのを待つのみです。（というかAndroid携帯もパケ放題必須だよな…やべぇ。iPhone早まった…orz）

「SEO対策はしていただけますか？」

答える時は

「サイトの中でやれることはやりますよ」

うちはテーブルでのレイアウトはお断りしていて、基本的にXHTML1.0 Strictで組むし、文書の再構造化も行い適切なマークアップをするようにしているので、デフォルトで検索エンジンのロボットに親和なサイトになっている（と思ってる）。

「Web標準」という言葉が持て囃され、同時にSEOという言葉が一人歩きし始めた頃、SEO対策といえばテーブルレイアウトの構造を(X)HTMLとCSSで組み直すことと同意で、制作会社の口車に乗せられサイトを更新した経験のあるクライアントは多いことだろう。ま、それはそれで全然悪くない。当時は凄いことのように言われてたことが、今や業界では当然の事になってるし対応できない制作は白い目で見られる（実際にまだ存在するし！）。
自分の言う「サイトの中でやれることはやりますよ」というのは、言うなれば「最初からSEOされたページを作ってますよ」程度なのだ。
言葉的には間違ってない（と思ってる）。「Search Engine Optimization」なのだから（もちろん、最近のSEOに有効とされてるページ構成は取り入れますが）。

じゃ、これで検索サイトの上位にバンバン表示されるようになるんですね？というのがクライアントの考え。

いやいや。

「どんなキーワードで検索に引っかかりたいですか？」と質問してみる。

「○○、××、格安」

格安って言葉、サイトの中に1回も出てきませんよ？サイトの中に検索で当たって欲しい言葉が出てきてないのに、検索上位に出てくる事なんて無理っぽくないですか？さらに「○○」なんて競合他社も狙ってるキーワードですよね？大変ですよ？

（ここで暗躍するのが、衛星みたいなサイトを作りまくって被リンク数を稼ぎ、ページランクを上げて対応するSEO屋。が今回はその話パス）

ここから大事になってくるのが「SEM（Search Engine Marketing）」。
検索エンジンを考えたマーケティング。というかコレが一番大事。

• ターゲット層に対するキーワードの策定
• 1つのキーワードに対して、一緒に検索されるキーワードは何か？
• 組み合わせのキーワードがサイトに対して有益な物はどれか？

そのキーワードを含めた上で、サイト内の文章をライティングしていくことが必要となる。カタログに載っている文章では難しいことも多いので、検索エンジンに対応した文章にリライトしないといけない場合も（実際、それが出来るライターは人気です）。
その出来上がった文章に適切なマークアップを施すことで、検索エンジンにも親和で、見に来たユーザーも見やすいページ作り。
必要であればランディングページ（検索サイトから飛んで来やすいページ）の提案もあるし、さらには別サイトとしての独立、なんて提案も出来るかも。

そういった施策、対応を行っていって初めて検索結果の上位に表示されるようになってくるんです。

さ、これで検索上位に表示されるようになりました。

ところがどっこい。

すでに競合が多いキーワードだと、既に上位に来ているサイトを押さえ込んで自分のサイトを持ってくることは大変です。資本があってサイトにお金を掛けられるところには太刀打ちできないですよね？やはり現在上位に来ているということは実績がある故ですから。

ここまでの話は、一般的にSEO・SEM対策として実施される基本的な内容です。

そこで一旦話を戻して考えて欲しいのが、キーワードの選定や文章を考える時に、地域だったり自身の強みをもっと前面に押し出してみる、ということ。
「美容院」で検索されて上位に来なくても「摂津富田 美容院」で上位に来ることの方が、実際にお客さんとして来店してくれそうな人に対しては重要ですよね？「彦根 動物病院」より「彦根 動物 急患」で上位に来る方が、お客さんにとって（も）有益ですよね？

• 実際のお客さんになってくれる層・地域などに絞って考える
• 検索で表示されて、見に来たお客さんが有益だと思える内容にする

この点をしっかり考えた上で、キーワードの選定やライティングを行っていくことで、大手やポータルサイトが奪い合う検索キーワードから離れ、実際のお客さん候補を的確に誘導して有益なサイトとしていく種があるのだと考えています（これも基本と言えば基本なのですが…）。

どうです？海のものとも山のものともつかぬ「SEO」という言葉も、結局は当然当たり前の事を考えて作っていくことに過ぎないんです。何かについて知りたいと検索したターゲットとなるユーザーをしっかり捕まえ、実際に閲覧された時に「このサイトは自分にとって有益だ」と思わせること。そこで初めて広告であるサイトからお客さんが獲得できた、ということに繋がっていくのだと思います。

もちろん自分はWeb業界の人間なので、クライアントの業界については全くのシロウトです。なので自分一人ではサイトを作ることが出来ません。教えていただかないといけないことも数多くあります。クライアント側と制作側が一緒に1つのサイトを作っているんだ、という気持ちを共有出来れば、もっともっと良いサイトが作れると思います（なんだか最後は精神論的な話になっちゃいましたね。。。）。

その他、検索上位に来やすくなるように、という点も含めて提案している「ブログシステムを統合したサイト作り」という話もありますが、それはまた次の機会に。。。

第1部はスピーカーの方のお話を聞いて、第2部はそれについてのディスカッション、という流れです。

今回のテーマは「ストレスフリーのWebプロジェクト　～Web担当者に出来ること、制作会社に望むこと～」ということで、発注者と受注者それぞれの立場から見た経験や失敗に基づいて、ともすればチグハグになってしまいがちな気持ちや考え、トラブルをどうやってイイ感じに進めることが出来るのか？という内容。

会場でスピーカーの話を聞いてる状況だと話を聞くのに集中するんだけど、中継ということもあり合間合間で意見を述べたり人の考えを聞けたり、ただ聞くよりもさらに内容が濃くなった印象です。
話の中で、実際にあったプロジェクト失敗談の披露は笑える事もあり、参考になる点もあり。
常に制作者である自分として、発注者の気持ちや考え方は参考になる点が多かったです。

第2部は第1部の内容を踏まえて、どういう心持ちであれば2者間のギャップを埋めることが出来るのか、それぞれ格言で考えることで解決してみよう、といった内容のグループディスカッション。
大阪での初中継、ということで参加メンバーがいつもの顔ぶれなので、忌憚なく（とはいえ、相手の意見は否定しない、というのが前提）議論することが出来ました。

ワークショップという、テーマについて議論して意見を出し合い理解を深める、といった場は初の参加でしたが、正直「ここまで良いものだとは！」という気持ちで主催者に感謝感謝です。今回は既に顔見知ったメンバーで、WebSigという東京で既に確立しているワークショップがベースでしたが、もっと多くの人たちや、可能であれば大阪発信でこういうイベントが開催できたら、と思うばかりです（リクリ？ｗ）

（写真のモザイク？ナイショｗ）

さてさて、ページごとに独自のページごとにCSSを切り替えたい、という要望は多々あるはず（少なくとも自分には必須項目）。ページごとにページタイプを作ってテンプレートを作る、なんてナンセンスなので、何とかお手軽に導入できないものか…

そこで利用するのが「ページ属性」。デフォルトでも「Metaタグタイトル」「Metaタグ説明」「Metaタグキーワード」など、“ページごと“に独自の値を設定できるように用意されたオプションですね。管理画面の「ページとテーマ」メニューから、「ページタイプ」の下に設定があります。

ここの「ページ属性情報を追加」でCSS用のページ属性を作りたいと思います。
識別子となる“ハンドル“には、分かりやすく「CSS」とでもしましょう（たぶんここは半角英字が良いかと思います。）。“タイプ“には「テキストボックス」を。”検索可能”は必要ないでしょう。“名前“は適当に「CSS」でいいでしょうか？自分が見て分かりやすいもので良いと思います。
こんな感じでテキスト入力で任意の値を入力できるページ属性が追加できます。

次。

今度はページタイプごとに、先ほど追加したページ属性を使用できるように設定します。ページ属性を追加しても、ページタイプごとに使用可否を指定する必要があるのです。
ページタイプの一覧から「編集」で「使用可能なMETA属性」内に“CSS”というチェックボックスが追加されてるかと思います。これにチェックを入れることで、そのページタイプでCSSのページ属性を使用することが出来るようになります。
うむ。2段階体制。

さて、実際に各ページごとに追加した「CSSページ属性」の値に情報を入力してみます。
サイトマップから「ホーム」の編集画面を表示させて、上部タブメニューの「カスタム項目」を表示させると、最下部に“CSS”のテキスト入力欄が追加されてるかと思います。とりあえずここにCSSファイルの名前だけ入力しておきましょう。例えば「home.css」みたいな。

しかし、この「ページ属性」をどう引っ張ってきたらいいのか、資料を探すのに苦労しました…
今回はCSSファイルの指定なので、<head>～</head>内に記述することになりますね。ページ属性の値を読み出すには、ページ属性で指定した「ハンドル」を使用します。今回は“CSS“としたので、その値を読み出すには

とすればページごとに設定したCSSのファイル名を取得することが出来るようになります。とりあえず自分の要求としては複数のCSSを取得する必要は無いので、単一行的な扱いにしてますが、区切り文字を指定しておいてsplitで分けてもいいでしょう。さらに404をログに残したくなければfile_existsで存在確認してもいいでしょう。
ま、そんな事は省いちゃうとすると、ヘッダー部に記述するのは

な感じで良いかと思います。
値の存在確認なんかを入れた方がスマートでしょうけど…

とりあえずはこれで「ページごとにCSSを指定する」という目標は達成です。今回利用した「ページ属性」にはテキスト入力の他にも「選択メニュー」や「ファイル/画像」「評価」などを指定することが出来るので、他にも有効な使いどころは多いのかと思います。PHPをカジったことがある人だとあまり苦労はしなさそうですが。。。また有効な使いどころがあれば、その都度ご紹介できればと思います。 ]]> http://www.studio-bloom.net/archives/1293/feed 0